fix: format

Author: mehdibha

www/src/components/demos/toggle-button/sizes.tsx

@@ -7,11 +7,7 @@ export default function Demo() {
   return (
     <div className="flex items-center gap-4">
       {sizes.map((size) => (
-        <ToggleButton
-          key={size}
-          size={size}
-          aria-label="Toggle pin"
-        >
+        <ToggleButton key={size} size={size} aria-label="Toggle pin">
           <PinIcon className="rotate-45" />
         </ToggleButton>
       ))}

www/src/components/docs/code-block-mdx.tsx

@@ -67,9 +67,9 @@ export const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(
       <figure
         ref={ref}
         className={cn(
-          "not-prose fd-codeblock bg-fd-secondary/50 group relative my-6 overflow-hidden rounded-lg border text-sm bg-bg-muted/30",
+          "not-prose fd-codeblock bg-fd-secondary/50 bg-bg-muted/30 group relative my-6 overflow-hidden rounded-lg border text-sm",
           keepBackground &&
-            "bg-[var(--shiki-light-bg)] dark:bg-[var(--shiki-dark-bg)] ",
+            "bg-[var(--shiki-light-bg)] dark:bg-[var(--shiki-dark-bg)]",
           className
         )}
         {...props}

www/src/components/docs/install-tabs.tsx

@@ -112,7 +112,7 @@ export function InstallTab({
     <TabsPrimitive.TabPanel
       id={toValue(value)}
       className={cn(
-        "mt-0 text-xs [&>figure:only-child]:m-0 [&>figure:only-child]:rounded-none [&>figure:only-child]:border-none overflow-hidden",
+        "mt-0 overflow-hidden text-xs [&>figure:only-child]:m-0 [&>figure:only-child]:rounded-none [&>figure:only-child]:border-none",
         className
       )}
       {...props}

www/src/components/icons/reactjs-icon.tsx

@@ -5,18 +5,18 @@ interface IconProps extends Partial<SVGProps<SVGSVGElement>> {}
 export const ReactJsIcon = ({ height = 50, ...rest }: IconProps) => {
   return (
     <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="-10.5 -9.45 21 18.9"
-    height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="-10.5 -9.45 21 18.9"
+      height={height}
       {...rest}
-  >
-    <circle r={2} fill="#58c4dc" />
-    <g stroke="#58c4dc">
-      <ellipse rx={10} ry={4.5} />
-      <ellipse rx={10} ry={4.5} transform="rotate(60)" />
-      <ellipse rx={10} ry={4.5} transform="rotate(120)" />
-    </g>
-  </svg>
+    >
+      <circle r={2} fill="#58c4dc" />
+      <g stroke="#58c4dc">
+        <ellipse rx={10} ry={4.5} />
+        <ellipse rx={10} ry={4.5} transform="rotate(60)" />
+        <ellipse rx={10} ry={4.5} transform="rotate(120)" />
+      </g>
+    </svg>
   );
 };

www/src/modules/demos/components/components-overview.tsx

@@ -115,8 +115,8 @@ export function ComponentsOverview({ className }: { className?: string }) {
         <TimeField aria-label="Event time" />
         <DatePicker className="" />
       </div>
-      <div className="col-span-5 flex flex-col gap-4 md:col-span-4 lg:col-span-3 md:row-span-6 lg:row-span-8">
-        <Alert title="Payment Information" className="md:flex hidden">
+      <div className="col-span-5 flex flex-col gap-4 md:col-span-4 md:row-span-6 lg:col-span-3 lg:row-span-8">
+        <Alert title="Payment Information" className="hidden md:flex">
           Enter your payment method to complete your purchase.
         </Alert>
         <Tabs>

www/src/registry/core/toggle-button_basic.tsx

@@ -12,7 +12,7 @@ import { focusRing } from "@/registry/lib/focus-styles";
 
 const toggleButtonStyles = tv({
   extend: focusRing,
-  base: "disabled:bg-bg-disabled shrink-0 disabled:text-fg-disabled inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium leading-normal transition-colors disabled:cursor-default",
+  base: "disabled:bg-bg-disabled disabled:text-fg-disabled inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium leading-normal transition-colors disabled:cursor-default",
   variants: {
     variant: {
       quiet: