fix: format

Author: mehdibha

www/src/app/(app)/docs/[...slug]/page.tsx

@@ -36,7 +36,7 @@ export default async function Page({ params }: PageProps) {
           page.data.toc && page.data.toc.length > 0,
       })}
     >
-      <div className="container max-w-(--breakpoint-md)">
+      <div className="max-w-(--breakpoint-md) container">
         <Breadcrumbs tree={source.pageTree} className="mb-2" />
         <h1 className="text-4xl font-bold">{page.data.title}</h1>
         <p className="text-fg-muted mt-2">{page.data.description}</p>

www/src/app/(app)/themes/components/explore-themes.tsx

@@ -17,7 +17,7 @@ export const ExploreThemesDialog = ({
   return (
     <DialogRoot>
       {children}
-      <Dialog type="drawer" className="container max-w-(--breakpoint-xl) py-8!">
+      <Dialog type="drawer" className="max-w-(--breakpoint-xl) py-8! container">
         {({ close }) => (
           <>
             <h2 className="text-lg font-bold">Themes</h2>

www/src/app/(app)/themes/components/theme-select.tsx

@@ -308,7 +308,7 @@ const AutoResizeInput = React.forwardRef<HTMLInputElement, InputProps>(
         ref={mergeRefs(inputRef, forwardedRef)}
         onChange={chain(onChange, setInputValue)}
         className={cn(
-          "border-fg min-w-[10px] focus:border-b focus:outline-hidden",
+          "border-fg focus:outline-hidden min-w-[10px] focus:border-b",
           className
         )}
         {...props}

www/src/app/(preview)/preview/(marketing)/layout.tsx

@@ -7,7 +7,7 @@ export default function MarketingLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="container max-w-(--breakpoint-lg)">
+    <div className="max-w-(--breakpoint-lg) container">
       <Header />
       <main className="mt-16">{children}</main>
       <Footer />

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

@@ -100,7 +100,7 @@ export const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(
         ) : (
           allowCopy && (
             <CopyButton
-              className="absolute right-2 top-2 z-2 backdrop-blur-sm"
+              className="z-2 absolute right-2 top-2 backdrop-blur-sm"
               onCopy={onCopy}
             />
           )

www/src/components/mdx/mdx-components.tsx

@@ -41,10 +41,7 @@ export const mdxComponents: MDXComponents = {
   >,
   p: ({ className, ...props }) => (
     <p
-      className={cn(
-        "text-base leading-7 not-first:mt-4",
-        className
-      )}
+      className={cn("not-first:mt-4 text-base leading-7", className)}
       {...props}
     />
   ),
@@ -59,10 +56,7 @@ export const mdxComponents: MDXComponents = {
   ),
   blockquote: ({ className, ...props }) => (
     <blockquote
-      className={cn(
-        "*:text-fg-muted mt-6 border-l-2 pl-6 italic",
-        className
-      )}
+      className={cn("*:text-fg-muted mt-6 border-l-2 pl-6 italic", className)}
       {...props}
     />
   ),
@@ -134,17 +128,10 @@ export const mdxComponents: MDXComponents = {
   InstallTab,
   InstallTabs,
   ComponentSource: ({ name, ...rest }: { name: string }) => (
-    <ComponentSource
-      name={name}
-      className="w-full not-first:mt-4"
-      {...rest}
-    />
+    <ComponentSource name={name} className="not-first:mt-4 w-full" {...rest} />
   ),
   ComponentPreview: (props: ComponentPreviewProps) => (
-    <ComponentPreview
-      containerClassName="not-first:mt-4"
-      {...props}
-    />
+    <ComponentPreview containerClassName="not-first:mt-4" {...props} />
   ),
   Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
     <h3

www/src/components/mobile-nav.tsx

@@ -15,7 +15,7 @@ import { ThemeSwitcher } from "./theme-switcher";
 export const MobileNav = ({ items }: { items: PageTree.Node[] }) => {
   return (
     <header className="bg-bg sticky top-0 z-50 block border-b backdrop-blur-md sm:hidden">
-      <div className="container flex h-14 w-full max-w-(--breakpoint-2xl) items-center justify-between">
+      <div className="max-w-(--breakpoint-2xl) container flex h-14 w-full items-center justify-between">
         <DialogRoot>
           <Button variant="quiet" size="sm" shape="square">
             <AlignLeftIcon />
@@ -24,7 +24,7 @@ export const MobileNav = ({ items }: { items: PageTree.Node[] }) => {
             type="drawer"
             placement="left"
             swipeIndicator={false}
-            className="w-60 p-0!"
+            className="p-0! w-60"
           >
             {({ close }) => (
               <div className="flex h-screen flex-col">

www/src/components/sidebar.tsx

@@ -156,11 +156,11 @@ const SidebarRoot = ({
       >
         <div
           className={cn(
-            "transition-sidebar group-data-collapsed/sidebar:w-(--sidebar-width-collapsed) relative z-10 h-svh w-(--sidebar-width) bg-transparent"
+            "transition-sidebar group-data-collapsed/sidebar:w-(--sidebar-width-collapsed) w-(--sidebar-width) relative z-10 h-svh bg-transparent"
           )}
         />
-        <div className="transition-sidebar bg-bg group-data-collapsed/sidebar:w-(--sidebar-width-collapsed) [&_svg]:text-fg-muted fixed inset-y-0 left-0 z-10 flex h-svh w-(--sidebar-width) flex-col overflow-hidden border-r [&_button]:font-normal">
-          <div className="relative flex h-svh w-(--sidebar-width) flex-1 translate-x-[-0.5px] flex-col overflow-hidden">
+        <div className="transition-sidebar bg-bg group-data-collapsed/sidebar:w-(--sidebar-width-collapsed) [&_svg]:text-fg-muted w-(--sidebar-width) fixed inset-y-0 left-0 z-10 flex h-svh flex-col overflow-hidden border-r [&_button]:font-normal">
+          <div className="w-(--sidebar-width) relative flex h-svh flex-1 translate-x-[-0.5px] flex-col overflow-hidden">
             {children}
           </div>
         </div>

www/src/registry/ui/default/core/command/command.tsx

@@ -39,7 +39,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "placeholder:text-fg-muted flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
+        "placeholder:text-fg-muted outline-hidden flex h-11 w-full rounded-md bg-transparent py-3 text-base disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
         className
       )}
       {...props}
@@ -125,7 +125,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "aria-selected:bg-bg-muted aria-selected:text-fg relative flex h-10 cursor-pointer select-none items-center rounded-sm px-2 text-sm outline-hidden transition-colors",
+      "aria-selected:bg-bg-muted aria-selected:text-fg outline-hidden relative flex h-10 cursor-pointer select-none items-center rounded-sm px-2 text-sm transition-colors",
       className
     )}
     {...props}

www/src/registry/ui/default/core/date-input/date-input.tsx

@@ -15,7 +15,7 @@ const dateInputStyles = tv({
       "text-fg placeholder:text-fg-muted disabled:text-fg-disabled flex items-center justify-start disabled:cursor-default",
     ],
     segment:
-      "focus:bg-bg-accent focus:text-fg-onAccent type-literal:px-0 placeholder-shown:[&:not([data-disabled])]:[&:not([data-focused])]:text-fg-muted disabled:text-fg-disabled select-none rounded px-0.5 outline-hidden focus:caret-transparent",
+      "focus:bg-bg-accent focus:text-fg-onAccent type-literal:px-0 placeholder-shown:[&:not([data-disabled])]:[&:not([data-focused])]:text-fg-muted disabled:text-fg-disabled outline-hidden select-none rounded px-0.5 focus:caret-transparent",
   },
 });
 

www/src/registry/ui/default/core/dialog/dialog.tsx

@@ -20,7 +20,7 @@ import { Text } from "@/registry/ui/default/core/text";
 const dialogStyles = tv({
   slots: {
     content: [
-      "relative flex max-w-full flex-col rounded-[inherit] p-4 outline-hidden",
+      "outline-hidden relative flex max-w-full flex-col rounded-[inherit] p-4",
       "group-data-[type=modal]/overlay:p-6",
       "group-data-[type=drawer]/overlay:pt-0",
     ],

www/src/registry/ui/default/core/input/input.tsx

@@ -24,12 +24,12 @@ const inputStyles = tv({
   slots: {
     root: [
       focusInput(),
-      "border-border-field bg-bg text-fg-muted inline-flex w-full cursor-text items-center justify-start gap-2 rounded-md border px-2 text-base shadow-xs transition-colors sm:text-sm [&_svg]:size-4",
+      "border-border-field bg-bg text-fg-muted shadow-xs inline-flex w-full cursor-text items-center justify-start gap-2 rounded-md border px-2 text-base transition-colors sm:text-sm [&_svg]:size-4",
       "disabled:border-border-disabled disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-default",
       "invalid:border-border-danger focus-within:invalid:border-border",
     ],
     input: [
-      "text-fg placeholder:text-fg-muted disabled:text-fg-disabled h-full w-full bg-transparent outline-hidden disabled:cursor-default",
+      "text-fg placeholder:text-fg-muted disabled:text-fg-disabled outline-hidden h-full w-full bg-transparent disabled:cursor-default",
     ],
   },
   variants: {

www/src/registry/ui/default/core/list-box/list-box.tsx

@@ -18,7 +18,7 @@ import { CheckIcon, LoaderIcon } from "@/__icons__";
 const listBoxStyles = tv({
   base: [
     focusRing(),
-    "orientation-horizontal:flex-row orientation-horizontal:w-auto layout-grid:grid layout-grid:grid-cols-2 layout-grid:w-auto empty:text-fg-muted flex flex-col overflow-auto p-1 outline-hidden empty:min-h-24 empty:items-center empty:justify-center empty:text-sm empty:italic",
+    "orientation-horizontal:flex-row orientation-horizontal:w-auto layout-grid:grid layout-grid:grid-cols-2 layout-grid:w-auto empty:text-fg-muted outline-hidden flex flex-col overflow-auto p-1 empty:min-h-24 empty:items-center empty:justify-center empty:text-sm empty:italic",
     "[&_.separator]:-mx-1 [&_.separator]:my-1 [&_.separator]:w-auto",
   ],
   variants: {
@@ -31,7 +31,7 @@ const listBoxStyles = tv({
 
 const listBoxItemStyles = tv({
   base: [
-    "disabled:pointer-default hover:bg-bg-inverse/10 focus:bg-bg-inverse/10 pressed:bg-bg-inverse/15 disabled:text-fg-disabled flex cursor-pointer items-center rounded-sm px-3 py-1.5 text-sm outline-hidden transition-colors disabled:cursor-default",
+    "disabled:pointer-default hover:bg-bg-inverse/10 focus:bg-bg-inverse/10 pressed:bg-bg-inverse/15 disabled:text-fg-disabled outline-hidden flex cursor-pointer items-center rounded-sm px-3 py-1.5 text-sm transition-colors disabled:cursor-default",
     "selection-single:pl-0 selection-multiple:pl-0",
     "[&_svg]:size-4",
   ],

www/src/registry/ui/default/core/menu/menu.tsx

@@ -19,15 +19,15 @@ import { CheckIcon, ChevronRightIcon } from "@/__icons__";
 
 const menuStyles = tv({
   base: [
-    "max-h[inherit] rounded-[inherit] p-1 outline-hidden",
+    "max-h[inherit] outline-hidden rounded-[inherit] p-1",
     "group-data-[type=drawer]/overlay:p-2",
     "[&_.separator]:-mx-1 [&_.separator]:my-1 [&_.separator]:w-auto",
   ],
 });
 
 const menuItemStyles = tv({
   base: [
-    "focus:bg-bg-inverse/10 disabled:text-fg-disabled flex cursor-pointer items-center gap-2 rounded-sm px-3 py-1.5 text-sm outline-hidden transition-colors disabled:pointer-events-none",
+    "focus:bg-bg-inverse/10 disabled:text-fg-disabled outline-hidden flex cursor-pointer items-center gap-2 rounded-sm px-3 py-1.5 text-sm transition-colors disabled:pointer-events-none",
     "selection-single:pl-0 selection-multiple:pl-0",
     "group-data-[type=drawer]/overlay:text-md group-data-[type=drawer]/overlay:py-3",
     "group-data-[type=modal]/overlay:text-md group-data-[type=modal]/overlay:py-2",

www/src/registry/ui/default/core/overlay/overlay.tsx

@@ -81,7 +81,7 @@ Overlay.displayName = "Overlay";
 const modalVariants = tv({
   slots: {
     backdrop: [
-      "fixed left-0 top-0 z-50 flex h-(--visual-viewport-height) w-[100vw] items-center justify-center bg-black/40 backdrop-blur-sm",
+      "h-(--visual-viewport-height) fixed left-0 top-0 z-50 flex w-[100vw] items-center justify-center bg-black/40 backdrop-blur-sm",
       "entering:animate-in entering:fade-in-0 entering:zoom-in-95 exiting:animate-out exiting:fade-out-0 exiting:zoom-out-95 entering:duration-200 exiting:duration-150",
     ],
     overlay: [
@@ -139,7 +139,7 @@ ModalOverlay.displayName = "ModalOverlay";
 const popoverOverlayVariants = tv({
   slots: {
     overlay:
-      "group/overlay bg-bg text-fg z-50 rounded-md border shadow-md data-[trigger=ComboBox]:min-w-(--trigger-width) data-[trigger=Select]:min-w-(--trigger-width)",
+      "group/overlay bg-bg text-fg data-[trigger=ComboBox]:min-w-(--trigger-width) data-[trigger=Select]:min-w-(--trigger-width) z-50 rounded-md border shadow-md",
     arrow: [
       "fill-bg stroke-border block stroke-1",
       "group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180",
@@ -202,7 +202,7 @@ const drawerVariants = tv({
   slots: {
     backdrop: ["fixed inset-0 z-50 bg-black/60 backdrop-blur-sm", "opacity-0"],
     overlay: [
-      "group/overlay bg-bg fixed z-50 flex flex-col outline-hidden",
+      "group/overlay bg-bg outline-hidden fixed z-50 flex flex-col",
       "inset-0",
       "placement-bottom:top-auto placement-top:bottom-auto placement-left:right-auto placement-right:left-auto",
       "placement-bottom:mt-24 placement-bottom:rounded-t-[10px] placement-bottom:border-t",

www/src/registry/ui/default/core/scroll-area/scroll-area.tsx

@@ -7,7 +7,7 @@ import { type VariantProps, tv } from "tailwind-variants";
 const scrollAreaStyles = tv({
   slots: {
     root: "flex h-full w-full flex-col overflow-hidden",
-    viewport: "flex h-full w-full flex-col *:block! *:w-fit *:grow",
+    viewport: "*:block! flex h-full w-full flex-col *:w-fit *:grow",
     scrollbar:
       "my-0 flex touch-none select-none flex-col rounded-full bg-gray-800 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col", // TODO: remove my-0, it was my-1
     thumb:

www/src/registry/ui/default/core/slider/slider.tsx

@@ -38,7 +38,7 @@ const sliderStyles = tv({
     thumb: [
       focusRing(),
       "rounded-full bg-white shadow-md transition-[width,height]",
-      "absolute left-[50%] top-[50%] block -translate-x-1/2! -translate-y-1/2!",
+      "-translate-x-1/2! -translate-y-1/2! absolute left-[50%] top-[50%] block",
       "disabled:bg-bg-disabled disabled:border-bg disabled:border",
     ],
     valueLabel: "text-fg-muted text-sm",

www/src/registry/ui/default/core/tabs/tabs.tsx

@@ -20,7 +20,7 @@ const tabsStyles = tv({
     root: "orientation-vertical:flex-row flex flex-col",
     list: "orientation-horizontal:overflow-x-auto orientation-horizontal:whitespace-nowrap orientation-horizontal:items-center orientation-horizontal:border-b orientation-vertical:flex-col orientation-vertical:border-r orientation-horizontal:[&_[role=tab]]:border-b-[3px] orientation-vertical:[&_[role=tab]]:border-r-[3px] flex",
     tab: [
-      "text-fg-muted selected:border-border-focus selected:text-fg disabled:text-fg-disabled disabled:selected:border-border-disabled -mb-px cursor-pointer border-transparent px-2 py-2 text-center text-sm font-medium outline-hidden transition-colors disabled:cursor-default",
+      "text-fg-muted selected:border-border-focus selected:text-fg disabled:text-fg-disabled disabled:selected:border-border-disabled outline-hidden -mb-px cursor-pointer border-transparent px-2 py-2 text-center text-sm font-medium transition-colors disabled:cursor-default",
       "focus-visible:[&>span]:border-border-focus [&>span]:rounded-md [&>span]:border-2 [&>span]:border-transparent [&>span]:px-1.5 [&>span]:py-1",
     ],
     panel: [focusRing(), "rounded"],

www/tailwind.config.ts

@@ -1,5 +1,4 @@
 import type { Config } from "tailwindcss";
-import defaultTheme from "tailwindcss/defaultTheme";
 
 const config = {
   content: ["src/**/*.{ts,tsx}", "content/**/*.{ts,tsx,mdx}"],