@multicomma/arkcn 0.1.0

package/src/components/ui/table.tsx

@@ -0,0 +1,72 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground has-[[role=checkbox]]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption data-slot="table-caption" className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  )
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

package/src/components/ui/tabs.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { Tabs as TabsPrimitive } from "@ark-ui/react"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      orientation={orientation}
+      lazyMount={lazyMount}
+      unmountOnExit={unmountOnExit}
+      className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsContext({ ...props }: React.ComponentProps<typeof TabsPrimitive.Context>) {
+  return <TabsPrimitive.Context {...props} />
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent",
+        "data-selected:bg-background data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 dark:data-selected:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsIndicator({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Indicator>) {
+  return (
+    <TabsPrimitive.Indicator
+      data-slot="tabs-indicator"
+      className={cn(
+        "z-0 rounded-md bg-background shadow-sm transition-[left,top,width,height] duration-200",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsContent, TabsContext, TabsIndicator, TabsList, TabsTrigger, tabsListVariants }

package/src/components/ui/tags-input.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { TagsInput as TagsInputPrimitive } from "@ark-ui/react"
+import { XIcon } from "lucide-react"
+
+function TagsInput({ className, ...props }: React.ComponentProps<typeof TagsInputPrimitive.Root>) {
+  return (
+    <TagsInputPrimitive.Root
+      data-slot="tags-input"
+      className={cn("flex w-full flex-col gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function TagsInputContext({ ...props }: React.ComponentProps<typeof TagsInputPrimitive.Context>) {
+  return <TagsInputPrimitive.Context {...props} />
+}
+
+function TagsInputLabel({ className, ...props }: React.ComponentProps<typeof TagsInputPrimitive.Label>) {
+  return (
+    <TagsInputPrimitive.Label
+      data-slot="tags-input-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function TagsInputControl({ className, ...props }: React.ComponentProps<typeof TagsInputPrimitive.Control>) {
+  return (
+    <TagsInputPrimitive.Control
+      data-slot="tags-input-control"
+      className={cn(
+        "flex min-h-8 w-full flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent px-1.5 py-1 text-sm transition-colors has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:bg-input/30 data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function TagsInputInput({ className, ...props }: Omit<React.ComponentProps<typeof TagsInputPrimitive.Input>, "id">) {
+  return (
+    <TagsInputPrimitive.Input
+      data-slot="tags-input-input"
+      className={cn(
+        "min-w-16 flex-1 bg-transparent px-1 text-sm outline-none placeholder:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TagsInputItem({ className, ...props }: React.ComponentProps<typeof TagsInputPrimitive.Item>) {
+  return <TagsInputPrimitive.Item data-slot="tags-input-item" className={cn("inline-flex", className)} {...props} />
+}
+
+function TagsInputItemContext({ ...props }: React.ComponentProps<typeof TagsInputPrimitive.ItemContext>) {
+  return <TagsInputPrimitive.ItemContext {...props} />
+}
+
+function TagsInputItemPreview({ className, ...props }: React.ComponentProps<typeof TagsInputPrimitive.ItemPreview>) {
+  return (
+    <TagsInputPrimitive.ItemPreview
+      data-slot="tags-input-item-preview"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] items-center gap-1 rounded-sm bg-muted pr-0 pl-1.5 text-xs font-medium whitespace-nowrap text-foreground data-highlighted:ring-2 data-highlighted:ring-ring/50 data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TagsInputItemText({ ...props }: React.ComponentProps<typeof TagsInputPrimitive.ItemText>) {
+  return <TagsInputPrimitive.ItemText data-slot="tags-input-item-text" {...props} />
+}
+
+function TagsInputItemDeleteTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TagsInputPrimitive.ItemDeleteTrigger>) {
+  return (
+    <TagsInputPrimitive.ItemDeleteTrigger
+      data-slot="tags-input-item-delete-trigger"
+      className={cn(
+        "inline-flex size-5 items-center justify-center rounded-sm opacity-50 hover:opacity-100 [&_svg]:size-3",
+        className
+      )}
+      {...props}
+    >
+      {children ?? <XIcon />}
+    </TagsInputPrimitive.ItemDeleteTrigger>
+  )
+}
+
+function TagsInputItemInput({ className, ...props }: React.ComponentProps<typeof TagsInputPrimitive.ItemInput>) {
+  return (
+    <TagsInputPrimitive.ItemInput
+      data-slot="tags-input-item-input"
+      className={cn(
+        "h-[calc(--spacing(5.25))] rounded-sm bg-muted px-1.5 text-xs ring-2 ring-ring/50 outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TagsInputClearTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TagsInputPrimitive.ClearTrigger>) {
+  return (
+    <TagsInputPrimitive.ClearTrigger
+      data-slot="tags-input-clear-trigger"
+      className={cn(
+        "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children ?? <XIcon />}
+    </TagsInputPrimitive.ClearTrigger>
+  )
+}
+
+function TagsInputHiddenInput({ ...props }: React.ComponentProps<typeof TagsInputPrimitive.HiddenInput>) {
+  return <TagsInputPrimitive.HiddenInput {...props} />
+}
+
+export {
+  TagsInput,
+  TagsInputClearTrigger,
+  TagsInputContext,
+  TagsInputControl,
+  TagsInputHiddenInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemContext,
+  TagsInputItemDeleteTrigger,
+  TagsInputItemInput,
+  TagsInputItemPreview,
+  TagsInputItemText,
+  TagsInputLabel,
+}

package/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui/timer.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Timer as TimerPrimitive } from "@ark-ui/react"
+
+import { Button } from "@/components/ui/button"
+
+function Timer({ className, ...props }: React.ComponentProps<typeof TimerPrimitive.Root>) {
+  return (
+    <TimerPrimitive.Root data-slot="timer" className={cn("flex flex-col items-center gap-3", className)} {...props} />
+  )
+}
+
+function TimerContext({ ...props }: React.ComponentProps<typeof TimerPrimitive.Context>) {
+  return <TimerPrimitive.Context {...props} />
+}
+
+function TimerArea({ className, ...props }: React.ComponentProps<typeof TimerPrimitive.Area>) {
+  return (
+    <TimerPrimitive.Area
+      data-slot="timer-area"
+      className={cn("flex items-center gap-1 font-mono text-2xl font-medium tabular-nums", className)}
+      {...props}
+    />
+  )
+}
+
+function TimerItem({ className, ...props }: React.ComponentProps<typeof TimerPrimitive.Item>) {
+  return (
+    <TimerPrimitive.Item
+      data-slot="timer-item"
+      className={cn("flex min-w-10 items-center justify-center rounded-lg bg-muted px-2 py-1", className)}
+      {...props}
+    />
+  )
+}
+
+function TimerSeparator({ className, children, ...props }: React.ComponentProps<typeof TimerPrimitive.Separator>) {
+  return (
+    <TimerPrimitive.Separator data-slot="timer-separator" className={cn("text-muted-foreground", className)} {...props}>
+      {children ?? ":"}
+    </TimerPrimitive.Separator>
+  )
+}
+
+function TimerControl({ className, ...props }: React.ComponentProps<typeof TimerPrimitive.Control>) {
+  return (
+    <TimerPrimitive.Control data-slot="timer-control" className={cn("flex items-center gap-2", className)} {...props} />
+  )
+}
+
+function TimerActionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TimerPrimitive.ActionTrigger>) {
+  return (
+    <TimerPrimitive.ActionTrigger data-slot="timer-action-trigger" className={cn(className)} asChild {...props}>
+      <Button variant="outline" size="sm">
+        {children}
+      </Button>
+    </TimerPrimitive.ActionTrigger>
+  )
+}
+
+export { Timer, TimerActionTrigger, TimerArea, TimerContext, TimerControl, TimerItem, TimerSeparator }

package/src/components/ui/toc.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Toc as TocPrimitive } from "@ark-ui/react"
+
+function Toc({ className, ...props }: React.ComponentProps<typeof TocPrimitive.Root>) {
+  return <TocPrimitive.Root data-slot="toc" className={cn("w-full text-sm", className)} {...props} />
+}
+
+function TocContext({ ...props }: React.ComponentProps<typeof TocPrimitive.Context>) {
+  return <TocPrimitive.Context {...props} />
+}
+
+function TocNav({ className, ...props }: React.ComponentProps<typeof TocPrimitive.Nav>) {
+  return <TocPrimitive.Nav data-slot="toc-nav" className={cn("flex flex-col gap-2", className)} {...props} />
+}
+
+function TocTitle({ className, ...props }: React.ComponentProps<typeof TocPrimitive.Title>) {
+  return (
+    <TocPrimitive.Title
+      data-slot="toc-title"
+      className={cn("text-xs font-medium text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function TocContent({ className, ...props }: React.ComponentProps<typeof TocPrimitive.Content>) {
+  return <TocPrimitive.Content data-slot="toc-content" className={cn("relative", className)} {...props} />
+}
+
+function TocList({ className, ...props }: React.ComponentProps<typeof TocPrimitive.List>) {
+  return <TocPrimitive.List data-slot="toc-list" className={cn("flex flex-col border-l", className)} {...props} />
+}
+
+function TocItem({ className, ...props }: React.ComponentProps<typeof TocPrimitive.Item>) {
+  return <TocPrimitive.Item data-slot="toc-item" className={cn("flex", className)} {...props} />
+}
+
+function TocLink({ className, ...props }: React.ComponentProps<typeof TocPrimitive.Link>) {
+  return (
+    <TocPrimitive.Link
+      data-slot="toc-link"
+      className={cn(
+        "-ml-px flex-1 border-l border-transparent py-1 pl-[calc(var(--depth,1)*(--spacing(3)))] text-muted-foreground transition-colors hover:text-foreground data-active:border-foreground data-active:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TocIndicator({ className, ...props }: React.ComponentProps<typeof TocPrimitive.Indicator>) {
+  return (
+    <TocPrimitive.Indicator
+      data-slot="toc-indicator"
+      className={cn("w-px bg-foreground transition-all", className)}
+      {...props}
+    />
+  )
+}
+
+export { Toc, TocContent, TocContext, TocIndicator, TocItem, TocLink, TocList, TocNav, TocTitle }

package/src/components/ui/toggle-group.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { ToggleGroup as ToggleGroupPrimitive } from "@ark-ui/react"
+
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupVariantContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupVariantContext.Provider value={{ variant, size, spacing, orientation }}>
+        {children}
+      </ToggleGroupVariantContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupContext({ ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Context>) {
+  return <ToggleGroupPrimitive.Context {...props} />
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupVariantContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupContext, ToggleGroupItem }

package/src/components/ui/toggle.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { Toggle as TogglePrimitive } from "@ark-ui/react"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
+  )
+}
+
+function ToggleIndicator({ ...props }: React.ComponentProps<typeof TogglePrimitive.Indicator>) {
+  return <TogglePrimitive.Indicator data-slot="toggle-indicator" {...props} />
+}
+
+function ToggleContext({ ...props }: React.ComponentProps<typeof TogglePrimitive.Context>) {
+  return <TogglePrimitive.Context {...props} />
+}
+
+export { Toggle, ToggleContext, ToggleIndicator, toggleVariants }