@codefast/ui 0.0.40 → 0.0.42

package/src/react/checkbox-group.tsx

@@ -1,53 +1,76 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { CheckIcon } from "@radix-ui/react-icons";
-import { cn } from "../lib/utils";
-import * as CheckboxGroupPrimitive from "./checkbox-group.primitive";
+import * as React from 'react';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { cn } from '../lib/utils';
+import * as CheckboxGroupPrimitive from './checkbox-group.primitive';
 
 /* -----------------------------------------------------------------------------
  * Component: CheckboxGroup
  * -------------------------------------------------------------------------- */
 
-type CheckboxGroupElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
-type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
+type CheckboxGroupElement = React.ElementRef<
+  typeof CheckboxGroupPrimitive.Root
+>;
+type CheckboxGroupProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxGroupPrimitive.Root
+>;
 
-const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(({ className, ...props }, ref) => {
-  return <CheckboxGroupPrimitive.Root ref={ref} className={cn("grid gap-2", className)} {...props} />;
+const CheckboxGroup = React.forwardRef<
+  CheckboxGroupElement,
+  CheckboxGroupProps
+>(({ className, ...props }, ref) => {
+  return (
+    <CheckboxGroupPrimitive.Root
+      ref={ref}
+      className={cn('grid gap-2', className)}
+      {...props}
+    />
+  );
 });
 
-CheckboxGroup.displayName = "CheckboxGroup";
+CheckboxGroup.displayName = 'CheckboxGroup';
 
 /* -----------------------------------------------------------------------------
  * Component: CheckboxGroupItem
  * -------------------------------------------------------------------------- */
 
-type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
-type CheckboxGroupItemProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item>;
-
-const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <CheckboxGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          "border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        {...props}
-      >
-        <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
-          <CheckIcon className="size-3.5" />
-        </CheckboxGroupPrimitive.CheckboxGroupIndicator>
-      </CheckboxGroupPrimitive.Item>
-    );
-  },
-);
-
-CheckboxGroupItem.displayName = "CheckboxGroupItem";
+type CheckboxGroupItemElement = React.ElementRef<
+  typeof CheckboxGroupPrimitive.Item
+>;
+type CheckboxGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxGroupPrimitive.Item
+>;
+
+const CheckboxGroupItem = React.forwardRef<
+  CheckboxGroupItemElement,
+  CheckboxGroupItemProps
+>(({ className, ...props }, ref) => {
+  return (
+    <CheckboxGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
+        <CheckIcon className="size-3.5" />
+      </CheckboxGroupPrimitive.CheckboxGroupIndicator>
+    </CheckboxGroupPrimitive.Item>
+  );
+});
+
+CheckboxGroupItem.displayName = 'CheckboxGroupItem';
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { CheckboxGroup, CheckboxGroupItem, type CheckboxGroupProps, type CheckboxGroupItemProps };
+export {
+  CheckboxGroup,
+  CheckboxGroupItem,
+  type CheckboxGroupProps,
+  type CheckboxGroupItemProps,
+};

package/src/react/checkbox.tsx

@@ -1,31 +1,35 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "@radix-ui/react-icons";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Checkbox
  * -------------------------------------------------------------------------- */
 
 type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
-type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxPrimitive.Root
+>;
 
-const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className="flex size-full items-center justify-center text-current">
-      <CheckIcon className="size-3.5" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(
+  ({ className, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        'border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex size-full items-center justify-center text-current">
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  ),
+);
 
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 

package/src/react/code.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 
 /* -----------------------------------------------------------------------------
  * Component: Code
@@ -11,13 +11,15 @@ interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Code = React.forwardRef<CodeElement, CodeProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot : "code";
+const Code = React.forwardRef<CodeElement, CodeProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot : 'code';
 
-  return <Component ref={ref} {...props} />;
-});
+    return <Component ref={ref} {...props} />;
+  },
+);
 
-Code.displayName = "Code";
+Code.displayName = 'Code';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/collapsible.tsx

@@ -1,44 +1,54 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Collapsible
  * -------------------------------------------------------------------------- */
 
-type CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
+type CollapsibleProps = React.ComponentPropsWithoutRef<
+  typeof CollapsiblePrimitive.Root
+>;
 const Collapsible = CollapsiblePrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: CollapsibleTrigger
  * -------------------------------------------------------------------------- */
 
-type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>;
+type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<
+  typeof CollapsiblePrimitive.CollapsibleTrigger
+>;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
 /* -----------------------------------------------------------------------------
  * Component: CollapsibleContent
  * -------------------------------------------------------------------------- */
 
-type CollapsibleContentElement = React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>;
-type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>;
-
-const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
-  ({ className, ...props }, ref) => (
-    <CollapsiblePrimitive.CollapsibleContent
-      ref={ref}
-      className={cn(
-        "data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-
-CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
+type CollapsibleContentElement = React.ElementRef<
+  typeof CollapsiblePrimitive.CollapsibleContent
+>;
+type CollapsibleContentProps = React.ComponentPropsWithoutRef<
+  typeof CollapsiblePrimitive.CollapsibleContent
+>;
+
+const CollapsibleContent = React.forwardRef<
+  CollapsibleContentElement,
+  CollapsibleContentProps
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden',
+      className,
+    )}
+    {...props}
+  />
+));
+
+CollapsibleContent.displayName =
+  CollapsiblePrimitive.CollapsibleContent.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/command.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { Command as CommandPrimitive } from "cmdk";
-import { cn } from "../lib/utils";
-import { Dialog, DialogContent } from "./dialog";
+import * as React from 'react';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Command as CommandPrimitive } from 'cmdk';
+import { cn } from '../lib/utils';
+import { Dialog, DialogContent } from './dialog';
 
 /* -----------------------------------------------------------------------------
  * Component: Command
@@ -13,16 +13,18 @@ import { Dialog, DialogContent } from "./dialog";
 type CommandElement = React.ElementRef<typeof CommandPrimitive>;
 type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
 
-const Command = React.forwardRef<CommandElement, CommandProps>(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-      className,
-    )}
-    {...props}
-  />
-));
+const Command = React.forwardRef<CommandElement, CommandProps>(
+  ({ className, ...props }, ref) => (
+    <CommandPrimitive
+      ref={ref}
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 Command.displayName = CommandPrimitive.displayName;
 
@@ -32,7 +34,10 @@ Command.displayName = CommandPrimitive.displayName;
 
 type CommandDialogProps = React.ComponentProps<typeof Dialog>;
 
-function CommandDialog({ children, ...props }: CommandDialogProps): React.JSX.Element {
+function CommandDialog({
+  children,
+  ...props
+}: CommandDialogProps): React.JSX.Element {
   return (
     <Dialog {...props}>
       <DialogContent className="p-0">
@@ -49,21 +54,28 @@ function CommandDialog({ children, ...props }: CommandDialogProps): React.JSX.El
  * -------------------------------------------------------------------------- */
 
 type CommandInputElement = React.ElementRef<typeof CommandPrimitive.Input>;
-type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;
+type CommandInputProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Input
+>;
 
-const CommandInput = React.forwardRef<CommandInputElement, CommandInputProps>(({ className, ...props }, ref) => (
-  <div className="flex items-center gap-2 border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="size-5 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
+const CommandInput = React.forwardRef<CommandInputElement, CommandInputProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      className="flex items-center gap-2 border-b px-3"
+      cmdk-input-wrapper=""
+    >
+      <MagnifyingGlassIcon className="size-5 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  ),
+);
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
@@ -72,11 +84,19 @@ CommandInput.displayName = CommandPrimitive.Input.displayName;
  * -------------------------------------------------------------------------- */
 
 type CommandListElement = React.ElementRef<typeof CommandPrimitive.List>;
-type CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
+type CommandListProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.List
+>;
 
-const CommandList = React.forwardRef<CommandListElement, CommandListProps>(({ className, ...props }, ref) => (
-  <CommandPrimitive.List ref={ref} className={cn("max-h-72 overflow-y-auto overflow-x-hidden", className)} {...props} />
-));
+const CommandList = React.forwardRef<CommandListElement, CommandListProps>(
+  ({ className, ...props }, ref) => (
+    <CommandPrimitive.List
+      ref={ref}
+      className={cn('max-h-72 overflow-y-auto overflow-x-hidden', className)}
+      {...props}
+    />
+  ),
+);
 
 CommandList.displayName = CommandPrimitive.List.displayName;
 
@@ -85,11 +105,19 @@ CommandList.displayName = CommandPrimitive.List.displayName;
  * -------------------------------------------------------------------------- */
 
 type CommandEmptyElement = React.ElementRef<typeof CommandPrimitive.Empty>;
-type CommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;
+type CommandEmptyProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Empty
+>;
 
-const CommandEmpty = React.forwardRef<CommandEmptyElement, CommandEmptyProps>((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
-));
+const CommandEmpty = React.forwardRef<CommandEmptyElement, CommandEmptyProps>(
+  (props, ref) => (
+    <CommandPrimitive.Empty
+      ref={ref}
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  ),
+);
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
@@ -98,18 +126,22 @@ CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
  * -------------------------------------------------------------------------- */
 
 type CommandGroupElement = React.ElementRef<typeof CommandPrimitive.Group>;
-type CommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;
+type CommandGroupProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Group
+>;
 
-const CommandGroup = React.forwardRef<CommandGroupElement, CommandGroupProps>(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-      className,
-    )}
-    {...props}
-  />
-));
+const CommandGroup = React.forwardRef<CommandGroupElement, CommandGroupProps>(
+  ({ className, ...props }, ref) => (
+    <CommandPrimitive.Group
+      ref={ref}
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
@@ -117,14 +149,23 @@ CommandGroup.displayName = CommandPrimitive.Group.displayName;
  * Component: CommandSeparator
  * -------------------------------------------------------------------------- */
 
-type CommandSeparatorElement = React.ElementRef<typeof CommandPrimitive.Separator>;
-type CommandSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;
-
-const CommandSeparator = React.forwardRef<CommandSeparatorElement, CommandSeparatorProps>(
-  ({ className, ...props }, ref) => (
-    <CommandPrimitive.Separator ref={ref} className={cn("bg-border -mx-1 h-px", className)} {...props} />
-  ),
-);
+type CommandSeparatorElement = React.ElementRef<
+  typeof CommandPrimitive.Separator
+>;
+type CommandSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Separator
+>;
+
+const CommandSeparator = React.forwardRef<
+  CommandSeparatorElement,
+  CommandSeparatorProps
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('bg-border -mx-1 h-px', className)}
+    {...props}
+  />
+));
 
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
@@ -133,18 +174,22 @@ CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
  * -------------------------------------------------------------------------- */
 
 type CommandItemElement = React.ElementRef<typeof CommandPrimitive.Item>;
-type CommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;
+type CommandItemProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Item
+>;
 
-const CommandItem = React.forwardRef<CommandItemElement, CommandItemProps>(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:outline-none",
-      className,
-    )}
-    {...props}
-  />
-));
+const CommandItem = React.forwardRef<CommandItemElement, CommandItemProps>(
+  ({ className, ...props }, ref) => (
+    <CommandPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
@@ -153,10 +198,19 @@ CommandItem.displayName = CommandPrimitive.Item.displayName;
  * -------------------------------------------------------------------------- */
 
 type CommandLoadingElement = React.ElementRef<typeof CommandPrimitive.Loading>;
-type CommandLoadingProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>;
-
-const CommandLoading = React.forwardRef<CommandLoadingElement, CommandLoadingProps>(({ className, ...props }, ref) => (
-  <CommandPrimitive.Loading ref={ref} className={cn("flex justify-center p-2", className)} {...props} />
+type CommandLoadingProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Loading
+>;
+
+const CommandLoading = React.forwardRef<
+  CommandLoadingElement,
+  CommandLoadingProps
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Loading
+    ref={ref}
+    className={cn('flex justify-center p-2', className)}
+    {...props}
+  />
 ));
 
 CommandLoading.displayName = CommandPrimitive.Loading.displayName;
@@ -167,8 +221,19 @@ CommandLoading.displayName = CommandPrimitive.Loading.displayName;
 
 type CommandShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
 
-function CommandShortcut({ className, ...props }: CommandShortcutProps): React.JSX.Element {
-  return <span className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...props} />;
+function CommandShortcut({
+  className,
+  ...props
+}: CommandShortcutProps): React.JSX.Element {
+  return (
+    <span
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 /* -----------------------------------------------------------------------------

package/src/react/container.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Container
@@ -12,13 +12,17 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   asChild?: boolean;
 }
 
-const Container = React.forwardRef<ContainerElement, ContainerProps>(({ className, asChild, ...props }, ref) => {
-  const Component = asChild ? Slot : "div";
+const Container = React.forwardRef<ContainerElement, ContainerProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Component = asChild ? Slot : 'div';
 
-  return <Component ref={ref} className={cn("container", className)} {...props} />;
-});
+    return (
+      <Component ref={ref} className={cn('container', className)} {...props} />
+    );
+  },
+);
 
-Container.displayName = "Container";
+Container.displayName = 'Container';
 
 /* -----------------------------------------------------------------------------
  * Exports