chore: prettier

apps/docs-v2/app/lib/utils.ts

@@ -1,11 +1,11 @@
-import { type ClassValue, clsx } from "clsx"
-import { toast } from "sonner"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { toast } from "sonner";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export function showToastMessage(message: string) {
-  toast.success(message)
-}
+  toast.success(message);
+}

apps/docs-v2/app/ui/button.tsx

@@ -31,7 +31,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -42,7 +42,19 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, isLoading, children, disabled, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      isLoading,
+      children,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
@@ -53,9 +65,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
         {children}
-        </Comp>
+      </Comp>
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

apps/docs-v2/app/ui/dropdown-menu.tsx

@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -147,7 +147,7 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />

apps/docs-v2/app/ui/empty-state.tsx

@@ -2,6 +2,6 @@ export const EmptyState = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="flex items-center justify-center h-full text-muted-foreground">
       {children}
-      </div>
-  )
-}
+    </div>
+  );
+};

apps/docs-v2/app/ui/mdx/Prose.tsx

@@ -16,7 +16,7 @@ export function Prose<T extends React.ElementType = "div">({
         className,
         "prose dark:prose-invert",
         // `html :where(& > *)` is used to select all direct children without an increase in specificity like you'd get from just `& > *`
-        "[html_:where(&>*)]:mx-auto [html_:where(&>*)]:max-w-2xl [html_:where(&>*)]:lg:mx-[calc(50%-min(50%,theme(maxWidth.lg)))] [html_:where(&>*)]:lg:max-w-3xl"
+        "[html_:where(&>*)]:mx-auto [html_:where(&>*)]:max-w-2xl [html_:where(&>*)]:lg:mx-[calc(50%-min(50%,theme(maxWidth.lg)))] [html_:where(&>*)]:lg:max-w-3xl",
       )}
       {...props}
     />

apps/docs-v2/app/ui/sonner.tsx

@@ -1,10 +1,10 @@
-import { Toaster as Sonner } from "sonner"
-import { useThemeSelector } from "./theme/themeMachine"
+import { Toaster as Sonner } from "sonner";
+import { useThemeSelector } from "./theme/themeMachine";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const theme = useThemeSelector((state) => state.context.displayedTheme)
+  const theme = useThemeSelector((state) => state.context.displayedTheme);
 
   return (
     <Sonner
@@ -23,7 +23,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };

apps/docs/app/components/Button.tsx

@@ -16,12 +16,12 @@ const variantStyles = {
 
 const buttonStyles = (
   variant: keyof typeof variantStyles,
-  className?: string
+  className?: string,
 ) =>
   classNames(
     "button-base",
     variantStyles[variant],
-    className
+    className,
   );
 
 type BaseButtonProps = {
@@ -47,7 +47,7 @@ export const Button = forwardRef<
       rightIcon,
       ...rest
     },
-    ref
+    ref,
   ) => (
     <button
       className={buttonStyles(variant, className)}
@@ -64,7 +64,7 @@ export const Button = forwardRef<
           className: "h-4 w-4 ml-2",
         })}
     </button>
-  )
+  ),
 );
 
 export type ButtonLinkProps = BaseButtonProps &
@@ -83,7 +83,7 @@ export const ButtonLink = forwardRef<
       rightIcon,
       ...rest
     },
-    ref
+    ref,
   ) => (
     <a
       className={buttonStyles(variant, className)}
@@ -98,5 +98,5 @@ export const ButtonLink = forwardRef<
           className: "h-4 w-4 ml-2",
         })}
     </a>
-  )
+  ),
 );

apps/docs/app/components/Footer.tsx

@@ -26,7 +26,7 @@ export const Footer = ({
     <footer
       className={classNames(
         "flex items-center justify-between",
-        className
+        className,
       )}
     >
       {prev ? (

apps/docs/app/components/GithubIcon.tsx

@@ -1,5 +1,5 @@
 export const GithubIcon = (
-  props: JSX.IntrinsicElements["svg"]
+  props: JSX.IntrinsicElements["svg"],
 ) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

apps/docs/app/components/PropHeader.tsx

@@ -40,7 +40,7 @@ export const PropHeader = ({
             href={`#${prop}`}
             className={classNames(
               "-ml-6 flex items-center group",
-              focusedProp !== prop && "no-underline"
+              focusedProp !== prop && "no-underline",
             )}
           >
             <LinkIcon className="h-4 w-4 mr-2 invisible group-hover:visible" />
@@ -53,7 +53,7 @@ export const PropHeader = ({
           className={classNames(
             "text-zinc-500",
             "whitespace-pre-wrap",
-            variantTypeSizes[Variant]
+            variantTypeSizes[Variant],
           )}
         >
           {type}

apps/docs/app/components/Sidebar.tsx

@@ -49,7 +49,7 @@ export const Sidebar: SidebarType = ({
     <motion.div
       className={classNames(
         "flex-1 flex flex-col min-h-0 bg-zinc-900",
-        className
+        className,
       )}
       {...rest}
     >
@@ -94,7 +94,7 @@ const NavItem: SidebarType["NavItem"] = ({
           ? "bg-zinc-800 text-white font-bold"
           : "text-zinc-300 hover:bg-zinc-700 hover:text-white",
         "focus-visible:text-white focus-visible:bg-zinc-700",
-        className
+        className,
       )
     }
     prefetch="intent"
@@ -123,7 +123,7 @@ const ExternalLink: SidebarType["ExternalLink"] = ({
       "group flex items-center p-2 text-sm font-medium rounded-md w-min",
       "focus-visible:text-white focus-visible:bg-zinc-700",
       "text-zinc-300 hover:bg-zinc-700 hover:text-white",
-      className
+      className,
     )}
     {...rest}
   >
@@ -139,7 +139,7 @@ const Header: SidebarType["Header"] = ({ children }) => {
         "group flex items-center px-2 py-2 text-sm font-medium rounded-md",
         "text-white font-bold",
         "focus-visible:text-white focus-visible:bg-zinc-700",
-        "text-lg"
+        "text-lg",
       )}
     >
       {children}

apps/docs/app/components/Spinner.tsx

@@ -8,7 +8,7 @@ export const Spinner: FC<JSX.IntrinsicElements["svg"]> = ({
   <svg
     className={classNames(
       "animate-spin -ml-1 mr-3 h-5 w-5",
-      className ?? "text-teal-500"
+      className ?? "text-teal-500",
     )}
     xmlns="http://www.w3.org/2000/svg"
     fill="none"

apps/docs/app/components/Tabs.tsx

@@ -2,9 +2,8 @@ import { Tab } from "@headlessui/react";
 import classNames from "classnames";
 import { ComponentType, FC } from "react";
 
-type ExtractProps<T> = T extends ComponentType<infer P>
-  ? P
-  : T;
+type ExtractProps<T> =
+  T extends ComponentType<infer P> ? P : T;
 
 type TabsType = FC<ExtractProps<typeof Tab.Group>> & {
   List: FC<ExtractProps<typeof Tab.List>>;
@@ -29,7 +28,7 @@ const TabItem: TabsType["Item"] = ({
           : "text-gray-300 hover:text-indigo-300 hover:outline-indigo-3 hover:outline",
         "px-3 py-2 font-medium text-sm rounded-md",
         "flex-1",
-        className
+        className,
       )
     }
     {...rest}

apps/docs/app/entry.server.tsx

@@ -6,10 +6,13 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
 ) {
   const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
+    <RemixServer
+      context={remixContext}
+      url={request.url}
+    />,
   );
 
   responseHeaders.set("Content-Type", "text/html");

apps/docs/app/examples/usernameExists/db.ts

@@ -1,7 +1,7 @@
 export const db = {
   isUsernameAvailable: async (username: string) => {
     await new Promise((resolve) =>
-      setTimeout(resolve, 1000)
+      setTimeout(resolve, 1000),
     );
 
     if (

apps/docs/app/routes/integrate-your-components.mdx

@@ -86,7 +86,7 @@ export const validator = withZod(
       .string()
       .min(1, { message: "Email is required" })
       .email("Must be a valid email"),
-  })
+  }),
 );
 
 export default function MyPage() {

apps/docs/app/routes/reference/set-form-defaults.mdx

@@ -26,7 +26,7 @@ export const loader = (args: DataFunctionArgs) => {
     setFormDefaults("myForm", {
       firstName: "John",
       lastName: "Doe",
-    })
+    }),
   );
 };
 

apps/docs/app/routes/reference/use-control-field.mdx

@@ -140,7 +140,7 @@ this can be used on a case-to-case basis in your form.
 export const MyForm = () => {
   const [value, setValue] = useControlField(
     "myField",
-    "myForm"
+    "myForm",
   );
 
   useEffect(() => {

apps/docs/app/routes/reference/validation-error.mdx

@@ -19,7 +19,7 @@ Most of the time, your code will look like this:
 ```tsx
 const action = async ({ request }: DataFunctionArgs) => {
   const result = await validator.validate(
-    await request.formData()
+    await request.formData(),
   );
   if (result.error) return validationError(result.error);
   // do something with result.data
@@ -71,7 +71,7 @@ const action = async ({ request }: DataFunctionArgs) => {
   // We should check the correctness of the data first,
   // before doing our custom check
   const result = await validator.validate(
-    await request.formData()
+    await request.formData(),
   );
   if (result.error) return validationError(result.error);
 
@@ -94,7 +94,7 @@ const action = async ({ request }: DataFunctionArgs) => {
         // if your form has an `id` prop
         formId: result.formId,
       },
-      result.data
+      result.data,
     );
   }