@cognite/aura 0.1.6 → 0.2.0

package/dist/components/ui/core/breadcrumb/breadcrumb.js

@@ -0,0 +1,190 @@
+import { jsx as a, jsxs as u, Fragment as c } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { mergeProps as m } from "@base-ui/react/merge-props";
+import { useRender as l } from "@base-ui/react/use-render";
+import { IconDots as i, IconSlash as p } from "@tabler/icons-react";
+import { cn as n } from "../../../../lib/utils.js";
+const b = o(
+  ({ ...e }, t) => /* @__PURE__ */ a(
+    "nav",
+    {
+      ref: t,
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      ...e
+    }
+  )
+);
+b.displayName = "Breadcrumb";
+const g = o(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a(
+    "ol",
+    {
+      ref: r,
+      "data-slot": "breadcrumb-list",
+      className: n(
+        "flex items-center text-sm tracking-tight flex-wrap wrap-break-word",
+        e
+      ),
+      ...t
+    }
+  )
+);
+g.displayName = "BreadcrumbList";
+const f = o(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a(
+    "li",
+    {
+      ref: r,
+      "data-slot": "breadcrumb-item",
+      className: n(
+        "inline-flex items-center text-muted-foreground text-sm tracking-tight",
+        "has-[button[data-popup-open]]:bg-accent-background has-[button[data-popup-open]]:text-foreground has-[button[data-popup-open]]:rounded-sm",
+        e
+      ),
+      ...t
+    }
+  )
+);
+f.displayName = "BreadcrumbItem";
+const x = o(({ className: e, render: t, children: r, ...s }, d) => l({
+  defaultTagName: "a",
+  ref: d,
+  props: m(
+    {
+      ...{
+        "data-slot": "breadcrumb-link"
+      },
+      className: n(
+        "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
+        "text-muted-foreground text-sm leading-[18px] tracking-tight font-normal",
+        "transition-colors hover:bg-accent-background hover:text-foreground",
+        "aria-[current=page]:font-medium aria-[current=page]:text-foreground",
+        e
+      )
+    },
+    { ...s, children: r }
+  ),
+  render: t,
+  state: {
+    slot: "breadcrumb-link"
+  }
+}));
+x.displayName = "BreadcrumbLink";
+const h = o(({ className: e, ...t }, r) => /* @__PURE__ */ a(
+  "span",
+  {
+    ref: r,
+    "data-slot": "breadcrumb-page",
+    role: "link",
+    "aria-disabled": "true",
+    "aria-current": "page",
+    tabIndex: -1,
+    className: n(
+      "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
+      "cursor-default hover:bg-transparent dark:hover:bg-transparent",
+      "text-sm leading-[18px] tracking-tight font-medium text-foreground",
+      e
+    ),
+    ...t
+  }
+));
+h.displayName = "BreadcrumbPage";
+const N = o(({ className: e, ...t }, r) => /* @__PURE__ */ a(
+  "button",
+  {
+    ref: r,
+    "data-slot": "breadcrumb-page-button",
+    type: "button",
+    "aria-current": "page",
+    className: n(
+      "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
+      "text-sm leading-[18px] tracking-tight font-medium text-foreground",
+      "transition-colors hover:bg-accent-background",
+      e
+    ),
+    ...t
+  }
+));
+N.displayName = "BreadcrumbPageButton";
+const y = o(({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a(
+  "button",
+  {
+    ref: s,
+    "data-slot": "breadcrumb-ellipsis-button",
+    type: "button",
+    className: n(
+      "flex size-7 items-center justify-center rounded-md",
+      "text-muted-foreground transition-colors hover:bg-accent-background hover:text-foreground",
+      "data-[popup-open]:bg-accent-background data-[popup-open]:text-foreground",
+      e
+    ),
+    ...r,
+    children: t ?? /* @__PURE__ */ u(c, { children: [
+      /* @__PURE__ */ a(i, { className: "size-3" }),
+      /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+    ] })
+  }
+));
+y.displayName = "BreadcrumbEllipsisButton";
+const B = o(({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a(
+  "li",
+  {
+    ref: s,
+    "data-slot": "breadcrumb-separator",
+    role: "presentation",
+    "aria-hidden": "true",
+    className: n(
+      "flex size-4 items-center justify-center [&>svg]:size-4",
+      t
+    ),
+    ...r,
+    children: e ?? /* @__PURE__ */ a(p, { className: "size-4 text-muted-foreground" })
+  }
+));
+B.displayName = "BreadcrumbSeparator";
+const k = o(
+  ({ children: e, className: t, ...r }, s) => {
+    const d = e != null;
+    return /* @__PURE__ */ a(
+      "li",
+      {
+        ref: s,
+        "data-slot": "breadcrumb-ellipsis",
+        role: d ? void 0 : "presentation",
+        "aria-hidden": d ? void 0 : !0,
+        className: n(
+          "inline-flex items-center",
+          "has-[button[data-popup-open]]:bg-accent-background has-[button[data-popup-open]]:text-foreground has-[button[data-popup-open]]:rounded-sm",
+          t
+        ),
+        ...r,
+        children: e ?? /* @__PURE__ */ u(
+          "span",
+          {
+            className: n(
+              "flex size-7 items-center justify-center rounded-md",
+              "cursor-default text-muted-foreground hover:bg-transparent dark:hover:bg-transparent"
+            ),
+            children: [
+              /* @__PURE__ */ a(i, { className: "size-3" }),
+              /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+k.displayName = "BreadcrumbEllipsis";
+export {
+  b as Breadcrumb,
+  k as BreadcrumbEllipsis,
+  y as BreadcrumbEllipsisButton,
+  f as BreadcrumbItem,
+  x as BreadcrumbLink,
+  g as BreadcrumbList,
+  h as BreadcrumbPage,
+  N as BreadcrumbPageButton,
+  B as BreadcrumbSeparator
+};

package/dist/components/ui/core/breadcrumb/breadcrumb.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const BreadcrumbMetadata: ComponentMeta;

package/dist/components/ui/core/breadcrumb/breadcrumb.metadata.js

@@ -0,0 +1,9 @@
+const e = {
+  name: "Breadcrumb",
+  status: "in-progress-code-review",
+  description: "A navigation component showing the users location in a hierarchy.",
+  llmUsage: 'Use `<Breadcrumb>` with `<BreadcrumbList>`, `<BreadcrumbItem>`, `<BreadcrumbLink>`, and `<BreadcrumbPage>`. Use `<BreadcrumbPage>` for non-clickable current page text; for a clickable current page, use `<BreadcrumbLink aria-current="page">`.'
+};
+export {
+  e as BreadcrumbMetadata
+};

package/dist/components/ui/core/button/button.d.ts

@@ -2,7 +2,7 @@ import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
     variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants>;
 declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;

package/dist/components/ui/core/card/card.d.ts

@@ -1,17 +1,20 @@
 import { ReactNode } from 'react';
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 declare const Card: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardIcon: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardHeaderStart: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const CardTitle: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & {
     as?: HeadingElement;
 }, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
 declare const CardDescription: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
-declare const CardHeaderRight: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardHeaderEnd: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardHeaderCenter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const CardActions: import('react').ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuRoot.Props<unknown>, "children"> & {
     children?: ReactNode;
     align?: "start" | "center" | "end";
 } & import('react').RefAttributes<HTMLElement>>;
 declare const CardContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const CardFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { Card, CardHeader, CardIcon, CardHeaderRight, CardFooter, CardTitle, CardActions, CardDescription, CardContent, };
+declare const CardFooterStart: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardFooterEnd: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardHeaderCenter, CardHeaderStart, CardHeaderEnd, CardFooter, CardFooterStart, CardFooterEnd, CardTitle, CardActions, CardDescription, CardContent, };

package/dist/components/ui/core/card/card.js

@@ -1,143 +1,187 @@
-import { jsx as d, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import { IconDotsVertical as n } from "@tabler/icons-react";
-import { cn as o } from "../../../../lib/utils.js";
-import { Button as i } from "../button/button.js";
-import { DropdownMenu as l, DropdownMenuTrigger as m, DropdownMenuContent as p } from "../dropdown-menu/dropdown-menu.js";
-const u = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { IconDotsVertical as l } from "@tabler/icons-react";
+import { cn as s } from "../../../../lib/utils.js";
+import { Button as c } from "../button/button.js";
+import { DropdownMenu as i, DropdownMenuTrigger as m, DropdownMenuContent as f } from "../dropdown-menu/dropdown-menu.js";
+const p = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
+      ref: a,
       "data-slot": "card",
-      className: o(
-        "bg-card-background text-foreground flex flex-col rounded-lg",
-        a
+      className: s(
+        "bg-card-background text-foreground flex flex-col rounded-xl p-4 gap-4",
+        t
       ),
       ...r
     }
   )
 );
-u.displayName = "Card";
-const h = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+p.displayName = "Card";
+const u = d(
+  ({ className: t, children: r, ...a }, o) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
-      "data-slot": "card-header",
-      className: o(
-        "@container/card-header group/card-header grid auto-rows-min items-start gap-1.5 px-4 pt-4 [.border-b]:pb-6",
-        "grid-cols-[1fr]",
-        "has-data-[slot=card-icon]:grid-cols-[auto_1fr]",
-        "has-data-[slot=card-header-right]:grid-cols-[1fr_auto]",
-        "has-data-[slot=card-icon]:has-data-[slot=card-header-right]:grid-cols-[auto_1fr_auto]",
-        a
+      ref: o,
+      "data-slot": "card-header-start",
+      className: s(
+        "col-start-1 row-start-1 h-12 self-stretch pt-1.5",
+        t
       ),
-      ...r
+      ...a,
+      children: /* @__PURE__ */ e("div", { className: "flex items-start h-full", children: r })
     }
   )
 );
-h.displayName = "CardHeader";
-const f = e(
-  ({ className: a, children: r, ...t }, s) => /* @__PURE__ */ d(
-    "div",
-    {
-      ref: s,
-      "data-slot": "card-icon",
-      className: o("col-start-1 row-start-1 h-full", a),
-      ...t,
-      children: /* @__PURE__ */ d("div", { className: "flex items-center h-full", children: r })
-    }
-  )
-);
-f.displayName = "CardIcon";
-const g = e(({ className: a, as: r = "h3", ...t }, s) => /* @__PURE__ */ d(
+u.displayName = "CardHeaderStart";
+const C = d(({ className: t, as: r = "h3", ...a }, o) => /* @__PURE__ */ e(
   r,
   {
-    ref: s,
+    ref: o,
     "data-slot": "card-title",
-    className: o(
-      "tracking-tightest text-foreground font-medium text-lg row-start-1",
-      "group-has-data-[slot=card-icon]/card-header:col-start-2",
-      a
+    className: s(
+      "tracking-tightest text-foreground font-medium text-lg leading-6 line-clamp-2 overflow-hidden",
+      t
     ),
-    ...t
+    ...a
   }
 ));
-g.displayName = "CardTitle";
-const C = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+C.displayName = "CardTitle";
+const g = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "p",
     {
-      ref: t,
+      ref: a,
       "data-slot": "card-description",
-      className: o(
-        "text-muted-foreground text-sm row-start-2",
-        "group-has-data-[slot=card-icon]/card-header:col-start-2",
-        a
+      className: s(
+        "text-muted-foreground text-sm font-normal leading-5 tracking-tight line-clamp-2 overflow-hidden",
+        t
       ),
       ...r
     }
   )
 );
-C.displayName = "CardDescription";
-const N = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+g.displayName = "CardDescription";
+const x = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      "data-slot": "card-header-end",
+      className: s(
+        "col-start-3 row-start-1 self-start justify-self-end flex justify-end items-start gap-1",
+        t
+      ),
+      ...r
+    }
+  )
+);
+x.displayName = "CardHeaderEnd";
+const N = d(
+  ({ className: t, children: r, ...a }, o) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      "data-slot": "card-header",
+      className: s(
+        "group/card-header @container/card-header grid items-center gap-x-3 grid-cols-[auto_minmax(0,1fr)_auto]",
+        t
+      ),
+      ...a,
+      children: r
+    }
+  )
+);
+N.displayName = "CardHeader";
+const h = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
-      "data-slot": "card-header-right",
-      className: o(
-        "row-span-2 row-start-1 self-start justify-self-end",
-        a
+      ref: a,
+      "data-slot": "card-header-center",
+      className: s(
+        "col-start-1 row-start-1 min-w-0 flex flex-col justify-center",
+        "group-has-data-[slot=card-header-start]/card-header:col-start-2",
+        t
       ),
       ...r
     }
   )
 );
-N.displayName = "CardHeaderRight";
-const x = e(({ children: a, align: r = "end", ...t }, s) => /* @__PURE__ */ c(l, { ...t, children: [
-  /* @__PURE__ */ d(
+h.displayName = "CardHeaderCenter";
+const y = d(({ children: t, align: r = "end", ...a }, o) => /* @__PURE__ */ n(i, { ...a, children: [
+  /* @__PURE__ */ e(
     m,
     {
-      render: /* @__PURE__ */ d(i, { variant: "ghost", size: "icon-sm", ref: s, children: /* @__PURE__ */ d(n, {}) })
+      render: /* @__PURE__ */ e(c, { variant: "ghost", size: "icon-sm", ref: o, children: /* @__PURE__ */ e(l, {}) })
     }
   ),
-  /* @__PURE__ */ d(p, { align: r, children: a })
+  /* @__PURE__ */ e(f, { align: r, children: t })
 ] }));
-x.displayName = "CardActions";
-const w = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+y.displayName = "CardActions";
+const v = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
+      ref: a,
       "data-slot": "card-content",
-      className: o("p-4", a),
+      className: s(
+        "text-secondary-foreground flex flex-col items-start gap-4 self-stretch",
+        t
+      ),
       ...r
     }
   )
 );
-w.displayName = "CardContent";
-const y = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+v.displayName = "CardContent";
+const w = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
+      ref: a,
       "data-slot": "card-footer",
-      className: o("flex px-4 pb-4", a),
+      className: s("flex items-center gap-4 self-stretch", t),
+      ...r
+    }
+  )
+);
+w.displayName = "CardFooter";
+const H = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      "data-slot": "card-footer-start",
+      className: s("flex-1 flex items-start justify-start gap-2", t),
+      ...r
+    }
+  )
+);
+H.displayName = "CardFooterStart";
+const j = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      "data-slot": "card-footer-end",
+      className: s("flex items-center justify-end", t),
       ...r
     }
   )
 );
-y.displayName = "CardFooter";
+j.displayName = "CardFooterEnd";
 export {
-  u as Card,
-  x as CardActions,
-  w as CardContent,
-  C as CardDescription,
-  y as CardFooter,
-  h as CardHeader,
-  N as CardHeaderRight,
-  f as CardIcon,
-  g as CardTitle
+  p as Card,
+  y as CardActions,
+  v as CardContent,
+  g as CardDescription,
+  w as CardFooter,
+  j as CardFooterEnd,
+  H as CardFooterStart,
+  N as CardHeader,
+  h as CardHeaderCenter,
+  x as CardHeaderEnd,
+  u as CardHeaderStart,
+  C as CardTitle
 };

package/dist/components/ui/core/card/card.metadata.js

@@ -2,7 +2,7 @@ const e = {
   name: "Card",
   status: "in-progress-code-review",
   description: "A flexible card layout with header, content, action, and footer slots.",
-  llmUsage: "Use `<Card>` with `<CardHeader>`, `<CardTitle>`, `<CardDescription>`, `<CardContent>`, and `<CardFooter>` for structured content containers."
+  llmUsage: "Use `<Card>` with `<CardHeader>`, `<CardHeaderCenter>`, `<CardTitle>`, `<CardDescription>`, `<CardContent>`, and `<CardFooter>` for structured content containers."
 };
 export {
   e as CardMetadata

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+type Orientation = 'horizontal' | 'vertical';
+declare const CheckboxGroup: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    orientation?: Orientation;
+} & import('react').RefAttributes<HTMLDivElement>>;
+declare const CheckboxItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLabelElement> & VariantProps<(props?: ({
+    variant?: "default" | "card" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLLabelElement>>;
+declare const CheckboxItemControl: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').CheckboxRootProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare const CheckboxItemLabel: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import('react').RefAttributes<HTMLSpanElement>>;
+declare const CheckboxItemDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import('react').RefAttributes<HTMLSpanElement>>;
+export { CheckboxGroup, CheckboxItem, CheckboxItemControl, CheckboxItemDescription, CheckboxItemLabel, };

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

@@ -0,0 +1,129 @@
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { Checkbox as i } from "@base-ui/react/checkbox";
+import { IconCheck as l, IconMinus as b } from "@tabler/icons-react";
+import { cva as m } from "class-variance-authority";
+import { cn as d, selectionItemBase as h, selectionItemCard as k, selectionItemDefault as u, invalidState as x, focusState as p, selectionItemLabel as g, selectionItemDescription as f } from "../../../../lib/utils.js";
+const I = r(
+  ({ className: a, orientation: e = "vertical", role: t = "group", ...c }, n) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: n,
+      role: t,
+      "data-slot": "checkbox-group",
+      "data-orientation": e,
+      className: d(
+        e === "horizontal" ? "flex items-center gap-2" : "grid has-[[data-variant=card]]:gap-2",
+        a
+      ),
+      ...c
+    }
+  )
+);
+I.displayName = "CheckboxGroup";
+const C = m(d("group/checkbox-item", h), {
+  variants: {
+    variant: {
+      default: u,
+      card: k
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), v = r(
+  ({ className: a, variant: e, ...t }, c) => /* @__PURE__ */ o(
+    "label",
+    {
+      ref: c,
+      "data-slot": "checkbox-item",
+      "data-variant": e ?? "default",
+      className: d(C({ variant: e }), a),
+      ...t
+    }
+  )
+);
+v.displayName = "CheckboxItem";
+const N = r(({ className: a, ...e }, t) => /* @__PURE__ */ o(
+  i.Root,
+  {
+    ref: t,
+    "data-slot": "checkbox-item-control",
+    className: d(
+      "peer relative size-4 shrink-0 rounded-sm border-[1.5px] border-inactive-foreground bg-transparent text-foreground-on-primary outline-none transition-colors",
+      "[&:is([data-checked],[data-indeterminate]):not([data-disabled])]:border-transparent [&:is([data-checked],[data-indeterminate]):not([data-disabled])]:bg-primary-background",
+      "data-unchecked:not-data-disabled:hover:border-secondary-foreground group-hover/checkbox-item:data-unchecked:not-data-disabled:border-secondary-foreground",
+      "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-transparent data-disabled:bg-disabled-background data-disabled:text-disabled-foreground data-disabled:data-unchecked:border-border",
+      "[&[data-checked]_[data-slot=checkbox-check]]:block [&[data-indeterminate]_[data-slot=checkbox-dash]]:block",
+      p,
+      x,
+      a
+    ),
+    ...e,
+    children: /* @__PURE__ */ s(
+      i.Indicator,
+      {
+        "data-slot": "checkbox-indicator",
+        className: "grid size-full place-content-center text-current transition-none",
+        children: [
+          /* @__PURE__ */ o(
+            l,
+            {
+              "aria-hidden": "true",
+              "data-slot": "checkbox-check",
+              className: "hidden size-3",
+              stroke: 3
+            }
+          ),
+          /* @__PURE__ */ o(
+            b,
+            {
+              "aria-hidden": "true",
+              "data-slot": "checkbox-dash",
+              className: "hidden size-3",
+              stroke: 3.5
+            }
+          )
+        ]
+      }
+    )
+  }
+));
+N.displayName = "CheckboxItemControl";
+const y = r(({ className: a, ...e }, t) => /* @__PURE__ */ o(
+  "span",
+  {
+    ref: t,
+    "data-slot": "checkbox-item-label",
+    className: d(
+      g,
+      "group-has-[[data-checked]]/checkbox-item:text-foreground",
+      "group-has-[[data-indeterminate]]/checkbox-item:text-foreground",
+      "group-has-[[data-disabled]]/checkbox-item:text-disabled-foreground",
+      a
+    ),
+    ...e
+  }
+));
+y.displayName = "CheckboxItemLabel";
+const z = r(({ className: a, ...e }, t) => /* @__PURE__ */ o(
+  "span",
+  {
+    ref: t,
+    "data-slot": "checkbox-item-description",
+    className: d(
+      f,
+      "group-has-[[data-disabled]]/checkbox-item:text-disabled-foreground",
+      a
+    ),
+    ...e
+  }
+));
+z.displayName = "CheckboxItemDescription";
+export {
+  I as CheckboxGroup,
+  v as CheckboxItem,
+  N as CheckboxItemControl,
+  z as CheckboxItemDescription,
+  y as CheckboxItemLabel
+};