@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/theme/tui-prefs.ts

@@ -0,0 +1,64 @@
+/**
+ * Shared terminal theme file. Web persists on `dt-theme` / `dt-palette`
+ * (same origin). TUIs share `~/.digithings/theme.json` so a palette picked
+ * in one terminal client shows up in the others.
+ *
+ * Auto follows COLORFGBG when the terminal publishes it (0–7 is a dark
+ * background). With no signal, auto is dark.
+ */
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { dirname, join } from "node:path";
+import {
+  isThemePreference,
+  normalizePalette,
+  type PaletteName,
+  type ThemePreference,
+} from "./apply-theme";
+
+export type TuiThemePrefs = {
+  mode: ThemePreference;
+  palette: PaletteName;
+};
+
+export const DEFAULT_TUI_PREFS: TuiThemePrefs = { mode: "auto", palette: "default" };
+
+export function themeFilePath(home = homedir()): string {
+  return join(home, ".digithings", "theme.json");
+}
+
+export function detectTerminalDark(env: NodeJS.ProcessEnv = process.env): boolean | null {
+  const raw = env.COLORFGBG;
+  if (!raw) return null;
+  const bg = Number(String(raw).split(";").pop());
+  if (!Number.isFinite(bg)) return null;
+  return bg < 8;
+}
+
+export function resolveTuiMode(
+  mode: ThemePreference,
+  terminalDark: boolean | null,
+): "dark" | "light" {
+  if (mode === "dark" || mode === "light") return mode;
+  if (terminalDark === null) return "dark";
+  return terminalDark ? "dark" : "light";
+}
+
+export function readTuiPrefs(path = themeFilePath()): TuiThemePrefs {
+  try {
+    const parsed = JSON.parse(readFileSync(path, "utf8")) as { mode?: unknown; palette?: unknown };
+    const mode =
+      typeof parsed.mode === "string" && isThemePreference(parsed.mode) ? parsed.mode : "auto";
+    const palette = normalizePalette(typeof parsed.palette === "string" ? parsed.palette : null);
+    return { mode, palette };
+  } catch {
+    return { ...DEFAULT_TUI_PREFS };
+  }
+}
+
+export function writeTuiPrefs(prefs: TuiThemePrefs, path = themeFilePath()): void {
+  const mode = isThemePreference(prefs.mode) ? prefs.mode : "auto";
+  const palette = normalizePalette(prefs.palette);
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, `${JSON.stringify({ mode, palette })}\n`, "utf8");
+}

package/src/ui/alert.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-none border px-2.5 py-2 text-start text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn(
+        "absolute top-[calc(--spacing(1.25))] end-[calc(--spacing(1.25))]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/src/ui/avatar.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+/**
+ * Avatar — the vendored stock shadcn avatar on Base UI (`base-lyra` preset),
+ * added to the kit in #4306 batch K2 (the kit had none). A profile picture
+ * that degrades to a fallback (initials or an icon) while the image loads or
+ * when it fails; the optional badge/group parts compose the same primitive.
+ *
+ * Local deltas stay limited to the kit's import conventions (`cn` from
+ * `../lib/utils`), token-backed ring/muted surfaces, and a logical
+ * `end-0` on the status badge so it mirrors under RTL. The avatar itself is
+ * not interactive — consumers that make it a trigger own the pointer cursor.
+ */
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "../lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full rounded-full object-cover", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-bg select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-bg",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground ring-2 ring-bg group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount }

package/src/ui/badge.tsx

@@ -0,0 +1,75 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        // Reference-dress tones (controls-layer Badge parity): hairline chip,
+        // token text/border only — no fill, no hardcoded colour.
+        neutral: "border-hair text-ink-mute",
+        accent: "border-accent-weak text-accent",
+        warn: "border-warn/40 text-warn",
+        up: "border-up/40 text-up",
+        down: "border-down/40 text-down",
+        // Semantic action/state roles. Distinct tokens (not --accent), so a
+        // row of OPEN / ADD / TRIM / EXIT / CLOSED badges stays readable
+        // instead of collapsing into one signal colour.
+        open: "border-(--status-open) text-(--status-open)",
+        add: "border-(--status-add) text-(--status-add)",
+        trim: "border-(--status-trim) text-(--status-trim)",
+        exit: "border-(--status-exit) text-(--status-exit)",
+        closed: "border-(--status-closed) text-(--status-closed)",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export type BadgeDress = "default" | "chat";
+
+function Badge({
+  className,
+  variant = "default",
+  dress = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { dress?: BadgeDress }) {
+  // dress="chat" emits the digichat chat-dress classes (styles/controls-core.css)
+  // instead of the kit utilities; the variant enum is identical.
+  const classes =
+    dress === "chat"
+      ? cn(`ctl-badge-chat ctl-badge-chat--${variant}`, className)
+      : cn(badgeVariants({ variant }), className);
+
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      { className: classes },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/ui/breadcrumb.tsx

@@ -0,0 +1,61 @@
+/**
+ * Breadcrumb — the wayfinding trail (`nav[aria-label] > ol`), promoted from the
+ * controls layer into the kit (#4306, batch K2). Items are `{ label, href }`;
+ * the last item without an `href` renders as the current page
+ * (`aria-current="page"`, not a link). Separators are `/` spans, `aria-hidden`.
+ *
+ * The `.ctl-crumbs*` dress is translated into token utilities here, so the
+ * controls CSS can retire. Prose, not controls: the trail is a navigation
+ * landmark, and each link is a pointer affordance with the canon focus ring.
+ */
+
+import type { ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+
+export type Crumb = {
+  label: ReactNode
+  href?: string
+}
+
+export type BreadcrumbProps = {
+  items: Crumb[]
+  ariaLabel?: string
+  className?: string
+}
+
+export function Breadcrumbs({ items, ariaLabel = "Breadcrumb", className }: BreadcrumbProps) {
+  return (
+    <nav aria-label={ariaLabel} data-slot="breadcrumbs" className={className}>
+      <ol className="m-0 flex list-none flex-wrap items-baseline gap-[0.45rem] p-0 font-mono text-[0.78rem]">
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1
+          const isCurrent = isLast && item.href == null
+          return (
+            <li key={i} className="inline-flex min-w-0 items-baseline gap-[0.45rem]">
+              {i > 0 ? (
+                <span aria-hidden="true" className="text-ink-mute">
+                  /
+                </span>
+              ) : null}
+              {isCurrent ? (
+                <span aria-current="page" className="text-ink">
+                  {item.label}
+                </span>
+              ) : item.href != null ? (
+                <a
+                  href={item.href}
+                  className="cursor-pointer text-ink-soft no-underline transition-colors hover:text-ink focus-visible:text-ink focus-visible:ring-[3px] focus-visible:ring-accent/30 focus-visible:outline-none"
+                >
+                  {item.label}
+                </a>
+              ) : (
+                <span className="text-ink-soft">{item.label}</span>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/ui/button.tsx

@@ -0,0 +1,67 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+        xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-none",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export type ButtonDress = "default" | "chat";
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  dress = "default",
+  ...props
+}: ButtonPrimitive.Props &
+  VariantProps<typeof buttonVariants> & { dress?: ButtonDress }) {
+  // dress="chat" emits the digichat chat-dress classes (styles/controls-core.css)
+  // instead of the kit utilities. The variant/size enums are identical, so the
+  // digichat wrapper can pin dress="chat" and keep its rendered look exactly.
+  const classes =
+    dress === "chat"
+      ? cn(`ctl-btn-chat ctl-btn-chat--${variant} ctl-btn-chat--size-${size}`, className)
+      : cn(buttonVariants({ variant, size, className }));
+
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={classes}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/ui/card.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export type CardDress = "default" | "chat";
+
+// The chat dress scopes its part rules under `.ctl-card-chat .ctl-card-*`
+// (styles/controls-core.css), so the parts must know the root's dress. The
+// digichat wrapper pins `dress="chat"` on the root and the parts inherit it.
+const CardDressContext = React.createContext<CardDress>("default")
+
+function useCardDress() {
+  return React.useContext(CardDressContext)
+}
+
+function Card({
+  className,
+  size = "default",
+  dress = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm"; dress?: CardDress }) {
+  return (
+    <CardDressContext.Provider value={dress}>
+      <div
+        data-slot="card"
+        data-size={size}
+        className={cn(
+          dress === "chat"
+            ? "ctl-card-chat"
+            : "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-none bg-card py-(--card-spacing) text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none",
+          className
+        )}
+        {...props}
+      />
+    </CardDressContext.Provider>
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  const dress = useCardDress()
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        dress === "chat"
+          ? "ctl-card-header"
+          : "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  const dress = useCardDress()
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        dress === "chat"
+          ? "ctl-card-title"
+          : "text-sm font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  const dress = useCardDress()
+  return (
+    <div
+      data-slot="card-description"
+      className={cn(
+        dress === "chat"
+          ? "ctl-card-description"
+          : "text-xs/relaxed text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  const dress = useCardDress()
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        dress === "chat"
+          ? "ctl-card-action"
+          : "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  const dress = useCardDress()
+  return (
+    <div
+      data-slot="card-content"
+      className={cn(dress === "chat" ? "ctl-card-content" : "px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  const dress = useCardDress()
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        dress === "chat"
+          ? "ctl-card-footer"
+          : "flex items-center rounded-none border-t p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { cn } from "../lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-none border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/ui/collapsible.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+import { cn } from "../lib/utils"
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  className,
+  ...props
+}: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      className={cn(
+        "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }