fix: format

www/content/docs/components/colors/color-area.mdx

@@ -12,7 +12,10 @@ links:
     href: https://github.com/mehdibha/dotUI/tree/main/content/components/colors/color-area.mdx?plain=1
 ---
 
-<ComponentPreview name="core/color-area/color-area-default" preview={`<ColorArea />`} />
+<ComponentPreview
+  name="core/color-area/color-area-default"
+  preview={`<ColorArea />`}
+/>
 
 ## Installation
 

www/content/docs/components/data-display/badge.mdx

@@ -8,7 +8,10 @@ links:
     href: https://github.com/mehdibha/dotUI/tree/main/content/components/data-display/badge.mdx?plain=1
 ---
 
-<ComponentPreview name="core/badge/badge-default" preview={`<Badge>Badge</Badge>`} />
+<ComponentPreview
+  name="core/badge/badge-default"
+  preview={`<Badge>Badge</Badge>`}
+/>
 
 ## Installation
 

www/content/docs/components/date-and-time/calendar.mdx

@@ -12,7 +12,10 @@ links:
     href: https://github.com/mehdibha/dotUI/tree/main/content/components/dates/calendar.mdx?plain=1
 ---
 
-<ComponentPreview name="core/calendar/calendar-default" preview={`<Calendar />`} />
+<ComponentPreview
+  name="core/calendar/calendar-default"
+  preview={`<Calendar />`}
+/>
 
 ## Installation
 

www/content/docs/components/date-and-time/date-field.mdx

@@ -12,7 +12,10 @@ links:
     href: https://github.com/mehdibha/dotUI/tree/main/content/components/dates/date-field.mdx?plain=1
 ---
 
-<ComponentPreview name="core/date-field/date-field-default" preview={`<DateField />`} />
+<ComponentPreview
+  name="core/date-field/date-field-default"
+  preview={`<DateField />`}
+/>
 
 ## Installation
 

www/content/docs/components/date-and-time/date-picker.mdx

@@ -12,7 +12,10 @@ links:
     href: https://github.com/mehdibha/dotUI/tree/main/content/components/dates/date-picker.mdx?plain=1
 ---
 
-<ComponentPreview name="core/date-picker/date-picker-default" preview={`<DatePicker />`} />
+<ComponentPreview
+  name="core/date-picker/date-picker-default"
+  preview={`<DatePicker />`}
+/>
 
 ## Installation
 

www/content/docs/components/date-and-time/time-field.mdx

@@ -12,7 +12,10 @@ links:
     href: https://github.com/mehdibha/dotUI/tree/main/content/components/dates/time-field.mdx?plain=1
 ---
 
-<ComponentPreview name="core/time-field/time-field-default" preview={`<TimeField />`} />
+<ComponentPreview
+  name="core/time-field/time-field-default"
+  preview={`<TimeField />`}
+/>
 
 ## Installation
 

www/content/docs/components/overlay/dialog.mdx

@@ -260,7 +260,10 @@ If you need to customize things further, you can drop down to the composition le
 
 ### Async form submission
 
-<ComponentPreview name="core/dialog/dialog-async-form-submission" preview={``} />
+<ComponentPreview
+  name="core/dialog/dialog-async-form-submission"
+  preview={``}
+/>
 
 ### Nested dialog
 

www/src/app/(home)/components-overview.tsx

@@ -35,7 +35,12 @@ export function ComponentsOverview() {
   return (
     <div className="grid grid-cols-10 gap-8 p-8">
       <div className="col-span-8">
-        <Slider label="Progress" valueLabel defaultValue={50} className="!w-full" />
+        <Slider
+          label="Progress"
+          valueLabel
+          defaultValue={50}
+          className="!w-full"
+        />
       </div>
       <div className="col-span-2 row-span-2">
         <RadioGroup>

www/src/components/sidebar.tsx

@@ -3,7 +3,6 @@
 import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { motion } from "motion/react";
 import type { PageTree } from "fumadocs-core/server";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
 import {
@@ -14,6 +13,7 @@ import {
   SearchIcon,
   SunIcon,
 } from "lucide-react";
+import { motion } from "motion/react";
 import { cn } from "@/lib/cn";
 import { hasActive, isActive } from "@/lib/docs/utils";
 import { useCommandMenuInputRef } from "@/hooks/use-focus-command-menu";

www/src/components/style-switcher.tsx

@@ -23,7 +23,10 @@ export function StyleSwitcher({ componentName }: { componentName: string }) {
     <SelectRoot
       selectedKey={currentVariant}
       onSelectionChange={(key) => {
-        setVariants((prevVariants) => ({ ...prevVariants , [componentName]: key }));
+        setVariants((prevVariants) => ({
+          ...prevVariants,
+          [componentName]: key,
+        }));
       }}
     >
       <Button
@@ -43,7 +46,8 @@ export function StyleSwitcher({ componentName }: { componentName: string }) {
                 id={item.name}
                 description={item.description}
               >
-                {item.name} {currentThemeVariant === item.name && "(current theme)"}
+                {item.name}{" "}
+                {currentThemeVariant === item.name && "(current theme)"}
               </Item>
             ))}
         </ListBox>

www/src/demos/alert/action.tsx

@@ -10,6 +10,6 @@ export default function AlertDemo() {
         </Button>
       }
       description="You are currently on the free plan. Upgrade to unlock more features."
-     />
+    />
   );
 }

www/src/demos/alert/default.tsx

@@ -1,5 +1,5 @@
 import { Alert } from "@/components/dynamic-core/alert";
 
 export default function AlertDemo() {
-  return <Alert title="You can add components to your app using the cli."/>;
+  return <Alert title="You can add components to your app using the cli." />;
 }

www/src/lib/helpers.tsx

@@ -1,28 +1,37 @@
-import * as React from 'react';
+import * as React from "react";
 
 export function createScopedContext<ContextValueType extends object | null>(
   rootComponentName: string,
   defaultContext?: ContextValueType
 ) {
-  const Context = React.createContext<ContextValueType | undefined>(defaultContext);
+  const Context = React.createContext<ContextValueType | undefined>(
+    defaultContext
+  );
 
-  const Provider: React.FC<ContextValueType & { children: React.ReactNode }> = (props) => {
+  const Provider: React.FC<ContextValueType & { children: React.ReactNode }> = (
+    props
+  ) => {
     const { children, ...context } = props;
     // Only re-memoize when prop values change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;
+    const value = React.useMemo(
+      () => context,
+      Object.values(context)
+    ) as ContextValueType;
     return <Context.Provider value={value}>{children}</Context.Provider>;
   };
 
-  Provider.displayName = rootComponentName + 'Provider';
+  Provider.displayName = rootComponentName + "Provider";
 
   function useContext(consumerName: string) {
     const context = React.useContext(Context);
     if (context) return context;
     if (defaultContext !== undefined) return defaultContext;
     // if a defaultContext wasn't specified, it's a required context.
-    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    throw new Error(
+      `\`${consumerName}\` must be used within \`${rootComponentName}\``
+    );
   }
 
   return [Provider, useContext] as const;
-}
+}

www/src/registry/core/slider.tsx

@@ -34,7 +34,7 @@ const sliderStyles = tv({
     thumb: [
       focusRing(),
       "rounded-full bg-white shadow-md transition-[width,height]",
-      "top-[50%] left-[50%]",
+      "left-[50%] top-[50%]",
       "disabled:bg-bg-disabled disabled:border-bg disabled:border",
     ],
     valueLabel: "text-fg-muted text-sm",