fix: format

Author: mehdibha

www/src/app/(app)/themes/[themeName]/theme-editor/components.tsx

@@ -106,7 +106,7 @@ const Section = ({
 }) => {
   return (
     <div className="rounded-sm border">
-      <div className="bg-bg-muted/50 flex items-center justify-between gap-2 border-b pl-4 p-2">
+      <div className="bg-bg-muted/50 flex items-center justify-between gap-2 border-b p-2 pl-4">
         <div>
           <h3 className="text-base font-medium">{title}</h3>
           {description && (
@@ -119,7 +119,12 @@ const Section = ({
           className="flex w-auto flex-row items-center"
         >
           <Label>style:</Label>
-          <Button variant="outline" suffix={<ChevronDownIcon />} size="sm" className="bg-bg-inverse/5">
+          <Button
+            variant="outline"
+            suffix={<ChevronDownIcon />}
+            size="sm"
+            className="bg-bg-inverse/5"
+          >
             <SelectValue />
           </Button>
           <Popover>

www/src/app/(app)/themes/[themeName]/theme-editor/index.tsx

@@ -23,12 +23,12 @@ import { useUserThemes } from "@/modules/themes/atoms/themes-atom";
 import { CreateThemeDialog } from "@/modules/themes/components/create-theme-dialog";
 import { Theme } from "@/modules/themes/types";
 import { PreviewContent } from "../../preview";
-import { ModeSwitch } from "./mode-switch";
 import { ThemeColors } from "./colors";
+import { ThemeComponents } from "./components";
 import { ThemeEditorContext } from "./context";
 import { ThemeIconography } from "./iconography";
+import { ModeSwitch } from "./mode-switch";
 import { ThemeTypography } from "./typography";
-import { ThemeComponents } from "./components";
 
 export function ThemeEditor({
   theme: themeProp,
@@ -75,7 +75,8 @@ export function ThemeEditor({
                 </CreateThemeDialog>
               }
             >
-              To adjust colors, fonts, radius, components and more, you need to clone the theme.
+              To adjust colors, fonts, radius, components and more, you need to
+              clone the theme.
             </Alert>
           )}
           <Section
@@ -102,7 +103,7 @@ export function ThemeEditor({
           <Section title="Iconography" description="Theme iconography">
             <ThemeIconography />
           </Section>
-          <Section title="Components" description="Theme components"> 
+          <Section title="Components" description="Theme components">
             <ThemeComponents />
           </Section>
         </ThemeEditorBody>

www/src/app/(app)/themes/preview.tsx

@@ -12,12 +12,12 @@ import {
 } from "lucide-react";
 import { motion } from "motion/react";
 import { cn } from "@/lib/utils";
+import { useDebounce } from "@/hooks/use-debounce";
 import { useMounted } from "@/hooks/use-mounted";
 import { Button } from "@/components/core/button";
+import { Skeleton } from "@/components/core/skeleton";
 import { useSidebarContext } from "@/components/sidebar";
 import { useCurrentTheme } from "@/modules/themes/atoms/themes-atom";
-import { Skeleton } from "@/components/core/skeleton";
-import { useDebounce } from "@/hooks/use-debounce";
 
 const PreviewContext = React.createContext<{
   isOpen: boolean;
@@ -128,8 +128,8 @@ export function PreviewContent({
   const iframeRef = React.useRef<HTMLIFrameElement>(null);
   const [isLoading, setLoading] = React.useState(false);
   const [currentPathname, setCurrentPathname] = React.useState("");
-  const isMounted = useMounted()
-  const debouncedIsMounted = useDebounce(isMounted, 1500)
+  const isMounted = useMounted();
+  const debouncedIsMounted = useDebounce(isMounted, 1500);
 
   const reload = () => {
     if (iframeRef.current) {
@@ -247,9 +247,12 @@ export function PreviewContent({
           )}
         </div>
       </div>
-      <Skeleton show={!debouncedIsMounted} className="size-full rounded-[inherit]">
+      <Skeleton
+        show={!debouncedIsMounted}
+        className="size-full rounded-[inherit]"
+      >
         <iframe
-          ref={iframeRef} 
+          ref={iframeRef}
           src={`/preview/${themeName}`}
           className="rounded-{inherit] size-full"
           onLoad={() => {

www/src/app/internal/page.tsx

@@ -30,17 +30,14 @@ export default function Demo() {
               onAnimationComplete={() => {
                 setAnimating(false);
               }}
-              
               style={{ overflow: show ? "visible" : "hidden" }}
             >
               <div className="size-10 bg-red-500" />
             </motion.div>
           )}
         </AnimatePresence>
       </div>
-      <p>
-        {isAnimating ? "animating" : "not animating"}
-      </p>
+      <p>{isAnimating ? "animating" : "not animating"}</p>
     </div>
   );
 }

www/src/components/dynamic-core/alert.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 import {
   Alert as _Alert,
   AlertRoot as _AlertRoot,
@@ -14,6 +13,7 @@ import type {
   AlertTitleProps,
   AlertContentProps,
 } from "@/registry/core/alert_basic";
+import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 
 export const Alert = createDynamicComponent<AlertProps>(
   "alert",

www/src/components/dynamic-core/breadcrumbs.tsx

@@ -1 +1 @@
-export * from "@/registry/core/breadcrumbs_basic"
+export * from "@/registry/core/breadcrumbs_basic";

www/src/components/dynamic-core/calendar.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import { type DateValue } from "react-aria-components";
-import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 import {
   Calendar as _Calendar,
   CalendarRoot as _CalendarRoot,
@@ -27,6 +26,7 @@ import type {
   CalendarGridBodyProps,
   CalendarCellProps,
 } from "@/registry/core/calendar_basic";
+import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 
 export const Calendar = createDynamicComponent<CalendarProps<DateValue>>(
   "calendar",

www/src/components/dynamic-core/drawer.tsx

@@ -1 +1 @@
-export * from "@/registry/core/drawer_basic";
+export * from "@/registry/core/drawer_basic";

www/src/components/dynamic-core/loader.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import React from "react";
-import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 import { LoaderProps } from "@/registry/core/loader_ring";
 import { Loader as _Loader } from "@/registry/core/loader_ring";
+import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 
 export const Loader = createDynamicComponent<LoaderProps>(
   "loader",

www/src/components/dynamic-core/modal.tsx

@@ -1 +1 @@
-export * from "@/registry/core/modal_basic";
+export * from "@/registry/core/modal_basic";

www/src/components/dynamic-core/popover.tsx

@@ -1 +1 @@
-export * from "@/registry/core/popover_basic"
+export * from "@/registry/core/popover_basic";

www/src/components/dynamic-core/tabs.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 import {
   Tabs as _Tabs,
   TabList as _TabList,
@@ -14,6 +13,7 @@ import type {
   TabProps,
   TabPanelProps,
 } from "@/registry/core/tabs_basic";
+import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 
 export const Tabs = createDynamicComponent<TabsProps>("tabs", "Tabs", _Tabs, {
   motion: React.lazy(() =>

www/src/components/logo.tsx

@@ -54,7 +54,9 @@ export const Logo = ({
           <div className="font-josefin group-data-collapsed/sidebar:opacity-0 mt-1.5 text-base font-bold leading-normal tracking-tighter transition-colors">
             {siteConfig.global.name}
           </div>
-          <Badge className="border mt-0.5 px-2 group-data-collapsed/sidebar:opacity-0">beta</Badge>
+          <Badge className="group-data-collapsed/sidebar:opacity-0 mt-0.5 border px-2">
+            beta
+          </Badge>
         </>
       )}
     </Link>

www/src/lib/colors.ts

@@ -2,7 +2,7 @@ import { contrast, type ColorTuple } from "@adobe/leonardo-contrast-colors";
 import { parseColor } from "react-aria-components";
 
 export const getContrastTextColor = (color: string): "white" | "black" => {
-  const colorValue = parseColor(color).toFormat("rgb")
+  const colorValue = parseColor(color).toFormat("rgb");
 
   const colorTuple: ColorTuple = [
     colorValue.getChannelValue("red"),
@@ -15,6 +15,6 @@ export const getContrastTextColor = (color: string): "white" | "black" => {
 
   const contrastText =
     contrastWithBlack > contrastWithWhite ? "black" : "white";
-    
+
   return contrastText;
 };