@arcadeai/design-system 1.1.0 → 1.2.0

package/README.md

@@ -45,7 +45,7 @@ npm install react react-dom tailwindcss lucide-react
 Import the design system styles in your main CSS file or at the root of your application:
 
 ```css
-@import '@arcadeai/design-system/dist/index.css';
+@import '@arcadeai/design-system/dist/assets/index.css';
 ```
 
 ### 2. Configure Tailwind CSS

package/dist/components/index.js

@@ -2,39 +2,40 @@ import { Accordion as r, AccordionContent as t, AccordionItem as a, AccordionTri
 import { Alert as l, AlertDescription as p, AlertTitle as d } from "./ui/atoms/alert.js";
 import { Avatar as b, AvatarFallback as S, AvatarImage as u } from "./ui/atoms/avatar.js";
 import { Badge as g, badgeVariants as c } from "./ui/atoms/badge.js";
-import { Breadcrumb as x, BreadcrumbEllipsis as f, BreadcrumbItem as s, BreadcrumbLink as D, BreadcrumbList as M, BreadcrumbPage as h, BreadcrumbSeparator as B } from "./ui/atoms/breadcrumb.js";
+import { Breadcrumb as T, BreadcrumbEllipsis as f, BreadcrumbItem as s, BreadcrumbLink as D, BreadcrumbList as M, BreadcrumbPage as h, BreadcrumbSeparator as B } from "./ui/atoms/breadcrumb.js";
 import { Button as F, buttonVariants as I } from "./ui/atoms/button.js";
 import { ByocBadge as v } from "./ui/atoms/byoc-badge.js";
 import { Card as G, CardAction as L, CardContent as H, CardDescription as R, CardFooter as k, CardHeader as y, CardTitle as V } from "./ui/atoms/card.js";
 import { ChartContainer as E, ChartLegend as O, ChartLegendContent as U, ChartStyle as j, ChartTooltip as q, ChartTooltipContent as J } from "./ui/atoms/chart.js";
-import { Collapsible as N, CollapsibleContent as Q, CollapsibleTrigger as W } from "./ui/atoms/collapsible.js";
-import { Command as Y, CommandDialog as Z, CommandEmpty as _, CommandGroup as $, CommandInput as ee, CommandItem as oe, CommandList as re, CommandSeparator as te, CommandShortcut as ae } from "./ui/atoms/command.js";
-import { Dialog as ie, DialogClose as le, DialogContent as pe, DialogDescription as de, DialogFooter as me, DialogHeader as be, DialogOverlay as Se, DialogPortal as ue, DialogTitle as Ce, DialogTrigger as ge } from "./ui/atoms/dialog.js";
-import { DropdownMenu as Te, DropdownMenuCheckboxItem as xe, DropdownMenuContent as fe, DropdownMenuGroup as se, DropdownMenuItem as De, DropdownMenuLabel as Me, DropdownMenuPortal as he, DropdownMenuRadioGroup as Be, DropdownMenuRadioItem as we, DropdownMenuSeparator as Fe, DropdownMenuShortcut as Ie, DropdownMenuSub as Ae, DropdownMenuSubContent as ve, DropdownMenuSubTrigger as Pe, DropdownMenuTrigger as Ge } from "./ui/atoms/dropdown-menu.js";
-import { Form as He, FormControl as Re, FormDescription as ke, FormField as ye, FormItem as Ve, FormLabel as ze, FormMessage as Ee, useFormField as Oe } from "./ui/atoms/form.js";
-import { HoverCard as je, HoverCardContent as qe, HoverCardTrigger as Je } from "./ui/atoms/hover-card.js";
-import { Input as Ne } from "./ui/atoms/input.js";
-import { Label as We } from "./ui/atoms/label.js";
-import { MobileTooltip as Ye, MobileTooltipContent as Ze, MobileTooltipProvider as _e, MobileTooltipTrigger as $e } from "./ui/atoms/mobile-tooltip.js";
-import { Popover as oo, PopoverAnchor as ro, PopoverContent as to, PopoverTrigger as ao } from "./ui/atoms/popover.js";
-import { ProBadge as io } from "./ui/atoms/pro-badge.js";
-import { Progress as po } from "./ui/atoms/progress.js";
-import { RadioGroup as bo, RadioGroupItem as So } from "./ui/atoms/radio-group.js";
-import { ResizableHandle as Co, ResizablePanel as go, ResizablePanelGroup as co } from "./ui/atoms/resizable.js";
-import { ScrollArea as xo, ScrollBar as fo } from "./ui/atoms/scroll-area.js";
-import { Select as Do, SelectContent as Mo, SelectGroup as ho, SelectItem as Bo, SelectLabel as wo, SelectScrollDownButton as Fo, SelectScrollUpButton as Io, SelectSeparator as Ao, SelectTrigger as vo, SelectValue as Po } from "./ui/atoms/select.js";
-import { Separator as Lo } from "./ui/atoms/separator.js";
-import { Sheet as Ro, SheetClose as ko, SheetContent as yo, SheetDescription as Vo, SheetFooter as zo, SheetHeader as Eo, SheetTitle as Oo, SheetTrigger as Uo } from "./ui/atoms/sheet.js";
-import { Sidebar as qo, SidebarContent as Jo, SidebarFooter as Ko, SidebarGroup as No, SidebarGroupAction as Qo, SidebarGroupContent as Wo, SidebarGroupLabel as Xo, SidebarHeader as Yo, SidebarInput as Zo, SidebarInset as _o, SidebarMenu as $o, SidebarMenuAction as er, SidebarMenuBadge as or, SidebarMenuButton as rr, SidebarMenuItem as tr, SidebarMenuSkeleton as ar, SidebarMenuSub as nr, SidebarMenuSubButton as ir, SidebarMenuSubItem as lr, SidebarProvider as pr, SidebarRail as dr, SidebarSeparator as mr, SidebarTrigger as br, useSidebar as Sr } from "./ui/atoms/sidebar.js";
-import { Skeleton as Cr } from "./ui/atoms/skeleton.js";
-import { Slider as cr } from "./ui/atoms/slider.js";
-import { Switch as xr } from "./ui/atoms/switch.js";
-import { Table as sr, TableBody as Dr, TableCaption as Mr, TableCell as hr, TableFooter as Br, TableHead as wr, TableHeader as Fr, TableRow as Ir } from "./ui/atoms/table.js";
-import { Tabs as vr, TabsContent as Pr, TabsList as Gr, TabsTrigger as Lr } from "./ui/atoms/tabs.js";
-import { Textarea as Rr } from "./ui/atoms/textarea.js";
-import { Toggle as yr, toggleVariants as Vr } from "./ui/atoms/toggle.js";
-import { Tooltip as Er, TooltipContent as Or, TooltipProvider as Ur, TooltipTrigger as jr } from "./ui/atoms/tooltip.js";
-import { useFormContext as Jr } from "react-hook-form";
+import { Checkbox as N } from "./ui/atoms/checkbox.js";
+import { Collapsible as W, CollapsibleContent as X, CollapsibleTrigger as Y } from "./ui/atoms/collapsible.js";
+import { Command as _, CommandDialog as $, CommandEmpty as ee, CommandGroup as oe, CommandInput as re, CommandItem as te, CommandList as ae, CommandSeparator as ne, CommandShortcut as ie } from "./ui/atoms/command.js";
+import { Dialog as pe, DialogClose as de, DialogContent as me, DialogDescription as be, DialogFooter as Se, DialogHeader as ue, DialogOverlay as Ce, DialogPortal as ge, DialogTitle as ce, DialogTrigger as xe } from "./ui/atoms/dialog.js";
+import { DropdownMenu as fe, DropdownMenuCheckboxItem as se, DropdownMenuContent as De, DropdownMenuGroup as Me, DropdownMenuItem as he, DropdownMenuLabel as Be, DropdownMenuPortal as we, DropdownMenuRadioGroup as Fe, DropdownMenuRadioItem as Ie, DropdownMenuSeparator as Ae, DropdownMenuShortcut as ve, DropdownMenuSub as Pe, DropdownMenuSubContent as Ge, DropdownMenuSubTrigger as Le, DropdownMenuTrigger as He } from "./ui/atoms/dropdown-menu.js";
+import { Form as ke, FormControl as ye, FormDescription as Ve, FormField as ze, FormItem as Ee, FormLabel as Oe, FormMessage as Ue, useFormField as je } from "./ui/atoms/form.js";
+import { HoverCard as Je, HoverCardContent as Ke, HoverCardTrigger as Ne } from "./ui/atoms/hover-card.js";
+import { Input as We } from "./ui/atoms/input.js";
+import { Label as Ye } from "./ui/atoms/label.js";
+import { MobileTooltip as _e, MobileTooltipContent as $e, MobileTooltipProvider as eo, MobileTooltipTrigger as oo } from "./ui/atoms/mobile-tooltip.js";
+import { Popover as to, PopoverAnchor as ao, PopoverContent as no, PopoverTrigger as io } from "./ui/atoms/popover.js";
+import { ProBadge as po } from "./ui/atoms/pro-badge.js";
+import { Progress as bo } from "./ui/atoms/progress.js";
+import { RadioGroup as uo, RadioGroupItem as Co } from "./ui/atoms/radio-group.js";
+import { ResizableHandle as co, ResizablePanel as xo, ResizablePanelGroup as To } from "./ui/atoms/resizable.js";
+import { ScrollArea as so, ScrollBar as Do } from "./ui/atoms/scroll-area.js";
+import { Select as ho, SelectContent as Bo, SelectGroup as wo, SelectItem as Fo, SelectLabel as Io, SelectScrollDownButton as Ao, SelectScrollUpButton as vo, SelectSeparator as Po, SelectTrigger as Go, SelectValue as Lo } from "./ui/atoms/select.js";
+import { Separator as Ro } from "./ui/atoms/separator.js";
+import { Sheet as yo, SheetClose as Vo, SheetContent as zo, SheetDescription as Eo, SheetFooter as Oo, SheetHeader as Uo, SheetTitle as jo, SheetTrigger as qo } from "./ui/atoms/sheet.js";
+import { Sidebar as Ko, SidebarContent as No, SidebarFooter as Qo, SidebarGroup as Wo, SidebarGroupAction as Xo, SidebarGroupContent as Yo, SidebarGroupLabel as Zo, SidebarHeader as _o, SidebarInput as $o, SidebarInset as er, SidebarMenu as or, SidebarMenuAction as rr, SidebarMenuBadge as tr, SidebarMenuButton as ar, SidebarMenuItem as nr, SidebarMenuSkeleton as ir, SidebarMenuSub as lr, SidebarMenuSubButton as pr, SidebarMenuSubItem as dr, SidebarProvider as mr, SidebarRail as br, SidebarSeparator as Sr, SidebarTrigger as ur, useSidebar as Cr } from "./ui/atoms/sidebar.js";
+import { Skeleton as cr } from "./ui/atoms/skeleton.js";
+import { Slider as Tr } from "./ui/atoms/slider.js";
+import { Switch as sr } from "./ui/atoms/switch.js";
+import { Table as Mr, TableBody as hr, TableCaption as Br, TableCell as wr, TableFooter as Fr, TableHead as Ir, TableHeader as Ar, TableRow as vr } from "./ui/atoms/table.js";
+import { Tabs as Gr, TabsContent as Lr, TabsList as Hr, TabsTrigger as Rr } from "./ui/atoms/tabs.js";
+import { Textarea as yr } from "./ui/atoms/textarea.js";
+import { Toggle as zr, toggleVariants as Er } from "./ui/atoms/toggle.js";
+import { Tooltip as Ur, TooltipContent as jr, TooltipProvider as qr, TooltipTrigger as Jr } from "./ui/atoms/tooltip.js";
+import { useFormContext as Nr } from "react-hook-form";
 export {
   r as Accordion,
   t as AccordionContent,
@@ -47,7 +48,7 @@ export {
   S as AvatarFallback,
   u as AvatarImage,
   g as Badge,
-  x as Breadcrumb,
+  T as Breadcrumb,
   f as BreadcrumbEllipsis,
   s as BreadcrumbItem,
   D as BreadcrumbLink,
@@ -69,139 +70,140 @@ export {
   j as ChartStyle,
   q as ChartTooltip,
   J as ChartTooltipContent,
-  N as Collapsible,
-  Q as CollapsibleContent,
-  W as CollapsibleTrigger,
-  Y as Command,
-  Z as CommandDialog,
-  _ as CommandEmpty,
-  $ as CommandGroup,
-  ee as CommandInput,
-  oe as CommandItem,
-  re as CommandList,
-  te as CommandSeparator,
-  ae as CommandShortcut,
-  ie as Dialog,
-  le as DialogClose,
-  pe as DialogContent,
-  de as DialogDescription,
-  me as DialogFooter,
-  be as DialogHeader,
-  Se as DialogOverlay,
-  ue as DialogPortal,
-  Ce as DialogTitle,
-  ge as DialogTrigger,
-  Te as DropdownMenu,
-  xe as DropdownMenuCheckboxItem,
-  fe as DropdownMenuContent,
-  se as DropdownMenuGroup,
-  De as DropdownMenuItem,
-  Me as DropdownMenuLabel,
-  he as DropdownMenuPortal,
-  Be as DropdownMenuRadioGroup,
-  we as DropdownMenuRadioItem,
-  Fe as DropdownMenuSeparator,
-  Ie as DropdownMenuShortcut,
-  Ae as DropdownMenuSub,
-  ve as DropdownMenuSubContent,
-  Pe as DropdownMenuSubTrigger,
-  Ge as DropdownMenuTrigger,
-  He as Form,
-  Re as FormControl,
-  ke as FormDescription,
-  ye as FormField,
-  Ve as FormItem,
-  ze as FormLabel,
-  Ee as FormMessage,
-  je as HoverCard,
-  qe as HoverCardContent,
-  Je as HoverCardTrigger,
-  Ne as Input,
-  We as Label,
-  Ye as MobileTooltip,
-  Ze as MobileTooltipContent,
-  _e as MobileTooltipProvider,
-  $e as MobileTooltipTrigger,
-  oo as Popover,
-  ro as PopoverAnchor,
-  to as PopoverContent,
-  ao as PopoverTrigger,
-  io as ProBadge,
-  po as Progress,
-  bo as RadioGroup,
-  So as RadioGroupItem,
-  Co as ResizableHandle,
-  go as ResizablePanel,
-  co as ResizablePanelGroup,
-  xo as ScrollArea,
-  fo as ScrollBar,
-  Do as Select,
-  Mo as SelectContent,
-  ho as SelectGroup,
-  Bo as SelectItem,
-  wo as SelectLabel,
-  Fo as SelectScrollDownButton,
-  Io as SelectScrollUpButton,
-  Ao as SelectSeparator,
-  vo as SelectTrigger,
-  Po as SelectValue,
-  Lo as Separator,
-  Ro as Sheet,
-  ko as SheetClose,
-  yo as SheetContent,
-  Vo as SheetDescription,
-  zo as SheetFooter,
-  Eo as SheetHeader,
-  Oo as SheetTitle,
-  Uo as SheetTrigger,
-  qo as Sidebar,
-  Jo as SidebarContent,
-  Ko as SidebarFooter,
-  No as SidebarGroup,
-  Qo as SidebarGroupAction,
-  Wo as SidebarGroupContent,
-  Xo as SidebarGroupLabel,
-  Yo as SidebarHeader,
-  Zo as SidebarInput,
-  _o as SidebarInset,
-  $o as SidebarMenu,
-  er as SidebarMenuAction,
-  or as SidebarMenuBadge,
-  rr as SidebarMenuButton,
-  tr as SidebarMenuItem,
-  ar as SidebarMenuSkeleton,
-  nr as SidebarMenuSub,
-  ir as SidebarMenuSubButton,
-  lr as SidebarMenuSubItem,
-  pr as SidebarProvider,
-  dr as SidebarRail,
-  mr as SidebarSeparator,
-  br as SidebarTrigger,
-  Cr as Skeleton,
-  cr as Slider,
-  xr as Switch,
-  sr as Table,
-  Dr as TableBody,
-  Mr as TableCaption,
-  hr as TableCell,
-  Br as TableFooter,
-  wr as TableHead,
-  Fr as TableHeader,
-  Ir as TableRow,
-  vr as Tabs,
-  Pr as TabsContent,
-  Gr as TabsList,
-  Lr as TabsTrigger,
-  Rr as Textarea,
-  yr as Toggle,
-  Er as Tooltip,
-  Or as TooltipContent,
-  Ur as TooltipProvider,
-  jr as TooltipTrigger,
+  N as Checkbox,
+  W as Collapsible,
+  X as CollapsibleContent,
+  Y as CollapsibleTrigger,
+  _ as Command,
+  $ as CommandDialog,
+  ee as CommandEmpty,
+  oe as CommandGroup,
+  re as CommandInput,
+  te as CommandItem,
+  ae as CommandList,
+  ne as CommandSeparator,
+  ie as CommandShortcut,
+  pe as Dialog,
+  de as DialogClose,
+  me as DialogContent,
+  be as DialogDescription,
+  Se as DialogFooter,
+  ue as DialogHeader,
+  Ce as DialogOverlay,
+  ge as DialogPortal,
+  ce as DialogTitle,
+  xe as DialogTrigger,
+  fe as DropdownMenu,
+  se as DropdownMenuCheckboxItem,
+  De as DropdownMenuContent,
+  Me as DropdownMenuGroup,
+  he as DropdownMenuItem,
+  Be as DropdownMenuLabel,
+  we as DropdownMenuPortal,
+  Fe as DropdownMenuRadioGroup,
+  Ie as DropdownMenuRadioItem,
+  Ae as DropdownMenuSeparator,
+  ve as DropdownMenuShortcut,
+  Pe as DropdownMenuSub,
+  Ge as DropdownMenuSubContent,
+  Le as DropdownMenuSubTrigger,
+  He as DropdownMenuTrigger,
+  ke as Form,
+  ye as FormControl,
+  Ve as FormDescription,
+  ze as FormField,
+  Ee as FormItem,
+  Oe as FormLabel,
+  Ue as FormMessage,
+  Je as HoverCard,
+  Ke as HoverCardContent,
+  Ne as HoverCardTrigger,
+  We as Input,
+  Ye as Label,
+  _e as MobileTooltip,
+  $e as MobileTooltipContent,
+  eo as MobileTooltipProvider,
+  oo as MobileTooltipTrigger,
+  to as Popover,
+  ao as PopoverAnchor,
+  no as PopoverContent,
+  io as PopoverTrigger,
+  po as ProBadge,
+  bo as Progress,
+  uo as RadioGroup,
+  Co as RadioGroupItem,
+  co as ResizableHandle,
+  xo as ResizablePanel,
+  To as ResizablePanelGroup,
+  so as ScrollArea,
+  Do as ScrollBar,
+  ho as Select,
+  Bo as SelectContent,
+  wo as SelectGroup,
+  Fo as SelectItem,
+  Io as SelectLabel,
+  Ao as SelectScrollDownButton,
+  vo as SelectScrollUpButton,
+  Po as SelectSeparator,
+  Go as SelectTrigger,
+  Lo as SelectValue,
+  Ro as Separator,
+  yo as Sheet,
+  Vo as SheetClose,
+  zo as SheetContent,
+  Eo as SheetDescription,
+  Oo as SheetFooter,
+  Uo as SheetHeader,
+  jo as SheetTitle,
+  qo as SheetTrigger,
+  Ko as Sidebar,
+  No as SidebarContent,
+  Qo as SidebarFooter,
+  Wo as SidebarGroup,
+  Xo as SidebarGroupAction,
+  Yo as SidebarGroupContent,
+  Zo as SidebarGroupLabel,
+  _o as SidebarHeader,
+  $o as SidebarInput,
+  er as SidebarInset,
+  or as SidebarMenu,
+  rr as SidebarMenuAction,
+  tr as SidebarMenuBadge,
+  ar as SidebarMenuButton,
+  nr as SidebarMenuItem,
+  ir as SidebarMenuSkeleton,
+  lr as SidebarMenuSub,
+  pr as SidebarMenuSubButton,
+  dr as SidebarMenuSubItem,
+  mr as SidebarProvider,
+  br as SidebarRail,
+  Sr as SidebarSeparator,
+  ur as SidebarTrigger,
+  cr as Skeleton,
+  Tr as Slider,
+  sr as Switch,
+  Mr as Table,
+  hr as TableBody,
+  Br as TableCaption,
+  wr as TableCell,
+  Fr as TableFooter,
+  Ir as TableHead,
+  Ar as TableHeader,
+  vr as TableRow,
+  Gr as Tabs,
+  Lr as TabsContent,
+  Hr as TabsList,
+  Rr as TabsTrigger,
+  yr as Textarea,
+  zr as Toggle,
+  Ur as Tooltip,
+  jr as TooltipContent,
+  qr as TooltipProvider,
+  Jr as TooltipTrigger,
   c as badgeVariants,
   I as buttonVariants,
-  Vr as toggleVariants,
-  Jr as useFormContext,
-  Oe as useFormField,
-  Sr as useSidebar
+  Er as toggleVariants,
+  Nr as useFormContext,
+  je as useFormField,
+  Cr as useSidebar
 };

package/dist/components/ui/atoms/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import type * as React from 'react';
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/components/ui/atoms/checkbox.js

@@ -0,0 +1,268 @@
+import { jsx as s, jsxs as L, Fragment as O } from "react/jsx-runtime";
+import * as i from "react";
+import { u as S } from "../../../index-5Bhkapwi.js";
+import { c as H } from "../../../index-DFZozV_h.js";
+import { c as N } from "../../../index-B695uy69.js";
+import { u as G } from "../../../index-437EL2iq.js";
+import { u as K } from "../../../index-BZPx6jYI.js";
+import { u as U } from "../../../index-BGQepRFJ.js";
+import { P as X } from "../../../index-C8_QusYl.js";
+import { P as _ } from "../../../index-CpDnqHCm.js";
+import { CheckIcon as $ } from "lucide-react";
+import { c as J } from "../../../utils-CRiPKpXj.js";
+var y = "Checkbox", [Q, ue] = H(y), [V, E] = Q(y);
+function W(t) {
+  const {
+    __scopeCheckbox: o,
+    checked: a,
+    children: l,
+    defaultChecked: n,
+    disabled: e,
+    form: f,
+    name: b,
+    onCheckedChange: d,
+    required: m,
+    value: k = "on",
+    // @ts-expect-error
+    internal_do_not_use_render: u
+  } = t, [p, v] = G({
+    prop: a,
+    defaultProp: n ?? !1,
+    onChange: d,
+    caller: y
+  }), [C, x] = i.useState(null), [g, r] = i.useState(null), c = i.useRef(!1), P = C ? !!f || !!C.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    !0
+  ), R = {
+    checked: p,
+    disabled: e,
+    setChecked: v,
+    control: C,
+    setControl: x,
+    name: b,
+    form: f,
+    value: k,
+    hasConsumerStoppedPropagationRef: c,
+    required: m,
+    defaultChecked: h(n) ? !1 : n,
+    isFormControl: P,
+    bubbleInput: g,
+    setBubbleInput: r
+  };
+  return /* @__PURE__ */ s(
+    V,
+    {
+      scope: o,
+      ...R,
+      children: Y(u) ? u(R) : l
+    }
+  );
+}
+var w = "CheckboxTrigger", B = i.forwardRef(
+  ({ __scopeCheckbox: t, onKeyDown: o, onClick: a, ...l }, n) => {
+    const {
+      control: e,
+      value: f,
+      disabled: b,
+      checked: d,
+      required: m,
+      setControl: k,
+      setChecked: u,
+      hasConsumerStoppedPropagationRef: p,
+      isFormControl: v,
+      bubbleInput: C
+    } = E(w, t), x = S(n, k), g = i.useRef(d);
+    return i.useEffect(() => {
+      const r = e?.form;
+      if (r) {
+        const c = () => u(g.current);
+        return r.addEventListener("reset", c), () => r.removeEventListener("reset", c);
+      }
+    }, [e, u]), /* @__PURE__ */ s(
+      _.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": h(d) ? "mixed" : d,
+        "aria-required": m,
+        "data-state": z(d),
+        "data-disabled": b ? "" : void 0,
+        disabled: b,
+        value: f,
+        ...l,
+        ref: x,
+        onKeyDown: N(o, (r) => {
+          r.key === "Enter" && r.preventDefault();
+        }),
+        onClick: N(a, (r) => {
+          u((c) => h(c) ? !0 : !c), C && v && (p.current = r.isPropagationStopped(), p.current || r.stopPropagation());
+        })
+      }
+    );
+  }
+);
+B.displayName = w;
+var M = i.forwardRef(
+  (t, o) => {
+    const {
+      __scopeCheckbox: a,
+      name: l,
+      checked: n,
+      defaultChecked: e,
+      required: f,
+      disabled: b,
+      value: d,
+      onCheckedChange: m,
+      form: k,
+      ...u
+    } = t;
+    return /* @__PURE__ */ s(
+      W,
+      {
+        __scopeCheckbox: a,
+        checked: n,
+        defaultChecked: e,
+        disabled: b,
+        required: f,
+        onCheckedChange: m,
+        name: l,
+        form: k,
+        value: d,
+        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ L(O, { children: [
+          /* @__PURE__ */ s(
+            B,
+            {
+              ...u,
+              ref: o,
+              __scopeCheckbox: a
+            }
+          ),
+          p && /* @__PURE__ */ s(
+            j,
+            {
+              __scopeCheckbox: a
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+M.displayName = y;
+var T = "CheckboxIndicator", q = i.forwardRef(
+  (t, o) => {
+    const { __scopeCheckbox: a, forceMount: l, ...n } = t, e = E(T, a);
+    return /* @__PURE__ */ s(
+      X,
+      {
+        present: l || h(e.checked) || e.checked === !0,
+        children: /* @__PURE__ */ s(
+          _.span,
+          {
+            "data-state": z(e.checked),
+            "data-disabled": e.disabled ? "" : void 0,
+            ...n,
+            ref: o,
+            style: { pointerEvents: "none", ...t.style }
+          }
+        )
+      }
+    );
+  }
+);
+q.displayName = T;
+var A = "CheckboxBubbleInput", j = i.forwardRef(
+  ({ __scopeCheckbox: t, ...o }, a) => {
+    const {
+      control: l,
+      hasConsumerStoppedPropagationRef: n,
+      checked: e,
+      defaultChecked: f,
+      required: b,
+      disabled: d,
+      name: m,
+      value: k,
+      form: u,
+      bubbleInput: p,
+      setBubbleInput: v
+    } = E(A, t), C = S(a, v), x = K(e), g = U(l);
+    i.useEffect(() => {
+      const c = p;
+      if (!c) return;
+      const P = window.HTMLInputElement.prototype, I = Object.getOwnPropertyDescriptor(
+        P,
+        "checked"
+      ).set, D = !n.current;
+      if (x !== e && I) {
+        const F = new Event("click", { bubbles: D });
+        c.indeterminate = h(e), I.call(c, h(e) ? !1 : e), c.dispatchEvent(F);
+      }
+    }, [p, x, e, n]);
+    const r = i.useRef(h(e) ? !1 : e);
+    return /* @__PURE__ */ s(
+      _.input,
+      {
+        type: "checkbox",
+        "aria-hidden": !0,
+        defaultChecked: f ?? r.current,
+        required: b,
+        disabled: d,
+        name: m,
+        value: k,
+        form: u,
+        ...o,
+        tabIndex: -1,
+        ref: C,
+        style: {
+          ...o.style,
+          ...g,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+j.displayName = A;
+function Y(t) {
+  return typeof t == "function";
+}
+function h(t) {
+  return t === "indeterminate";
+}
+function z(t) {
+  return h(t) ? "indeterminate" : t ? "checked" : "unchecked";
+}
+function le({
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ s(
+    M,
+    {
+      className: J(
+        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
+        t
+      ),
+      "data-slot": "checkbox",
+      ...o,
+      children: /* @__PURE__ */ s(
+        q,
+        {
+          className: "flex items-center justify-center text-current transition-none",
+          "data-slot": "checkbox-indicator",
+          children: /* @__PURE__ */ s($, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+export {
+  le as Checkbox
+};

package/dist/components/ui/atoms/index.d.ts

@@ -7,6 +7,7 @@ export * from './button';
 export * from './byoc-badge';
 export * from './card';
 export * from './chart';
+export * from './checkbox';
 export * from './collapsible';
 export * from './command';
 export * from './dialog';