@sableui/react 0.6.1 → 0.7.0

package/dist/components/checkbox-card/checkbox-card.js

@@ -0,0 +1,94 @@
+// src/components/checkbox-card/checkbox-card.tsx
+import { Checkbox as Base } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseGroup } from "@base-ui/react/checkbox-group";
+import { cn } from "../../lib/cn.js";
+import {
+  CHECK_BOX,
+  SELECTION_CARD_GLYPH,
+  SELECTION_CARD_LAYOUT,
+  SELECTION_CARD_SHELL,
+  SELECTION_CARD_TILE_HEAD
+} from "../../lib/selection-card.js";
+import { CheckboxMark } from "../checkbox/checkbox-mark.js";
+import {
+  checkboxCardToneClasses
+} from "./checkbox-card.variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CheckboxGroup({
+  className,
+  children,
+  ...props
+}) {
+  const classes = cn("grid grid-cols-1 gap-2", className);
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    allValues,
+    disabled,
+    render,
+    style,
+    ...domProps
+  } = props;
+  const groupOwned = value !== void 0 || defaultValue !== void 0 || onValueChange !== void 0 || allValues !== void 0 || disabled !== void 0 || render !== void 0 || typeof style === "function";
+  if (!groupOwned) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        className: classes,
+        style: typeof style === "function" ? void 0 : style,
+        ...domProps,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(BaseGroup, { className: classes, ...props, children });
+}
+CheckboxGroup.displayName = "CheckboxGroup";
+function CheckboxCard({
+  className,
+  title,
+  description,
+  icon,
+  tone = "neutral",
+  ...props
+}) {
+  const t = checkboxCardToneClasses[tone];
+  const box = /* @__PURE__ */ jsx("span", { className: cn(CHECK_BOX, t.box), children: /* @__PURE__ */ jsx(CheckboxMark, { className: t.check }) });
+  return /* @__PURE__ */ jsxs(
+    Base.Root,
+    {
+      className: cn(
+        SELECTION_CARD_SHELL,
+        icon != null ? SELECTION_CARD_LAYOUT.tile : SELECTION_CARD_LAYOUT.row,
+        t.card,
+        className
+      ),
+      ...props,
+      children: [
+        icon != null ? (
+          // The tile, as RadioCard draws it (lib/selection-card).
+          /* @__PURE__ */ jsxs("span", { className: SELECTION_CARD_TILE_HEAD, children: [
+            /* @__PURE__ */ jsx("span", { className: cn(SELECTION_CARD_GLYPH, t.glyph), children: icon }),
+            box
+          ] })
+        ) : (
+          // The box sits on the title's first line — a box `1lh` tall in the
+          // title's tier, centred — rather than nudged down by a fixed margin
+          // that only matched one line height.
+          /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-title-sm", children: box })
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: title }),
+          description ? /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: description }) : null
+        ] })
+      ]
+    }
+  );
+}
+CheckboxCard.displayName = "CheckboxCard";
+export {
+  CheckboxCard,
+  CheckboxGroup
+};

package/dist/components/checkbox-card/checkbox-card.meta.js

@@ -0,0 +1,154 @@
+// src/components/checkbox-card/checkbox-card.meta.ts
+var checkboxCardMeta = {
+  name: "CheckboxCard",
+  summary: 'A multi-select selection card \u2014 a card-sized Base UI Checkbox with a checkbox box, title, and optional description. The checkbox twin of RadioCard (same tone table). CheckboxGroup lays a column out and can own the selection: give each card a `value` and the group holds the checked values as an array, with an optional parent "select all" Checkbox.',
+  status: "stable",
+  keywords: [
+    "checkbox card",
+    "select card",
+    "multi select",
+    "option card"
+  ],
+  usage: {
+    description: "Use CheckboxCard when an option needs more visual weight, supporting text, or iconography than a plain checkbox row.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for a small number of options where details help users compare choices."
+      },
+      {
+        guidance: "do",
+        description: "Keep the checked state visible across the full card, not only inside the indicator."
+      },
+      {
+        guidance: "do",
+        description: "Let CheckboxGroup own the selection when the cards answer one question: give each card a `value` and read one array from `onValueChange` instead of wiring a toggle per card."
+      },
+      {
+        guidance: "do",
+        description: 'Use a plain Checkbox with `parent` for "select all", and list every child value in the group\'s `allValues`. The group works out its checked and mixed states.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use CheckboxCard for long lists; use Checkbox rows or a Combobox with `multiple` instead."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put a link or a button inside the card. The whole card is the checkbox's label, so a nested interactive element is either unreachable or steals the click that should toggle it."
+      }
+    ],
+    anatomy: [
+      {
+        name: "CheckboxCard",
+        required: true,
+        description: "One card-shaped checkbox option."
+      },
+      {
+        name: "CheckboxGroup",
+        required: false,
+        description: 'A grouped set of related checkbox cards. Optionally owns the selected values and a parent "select all" checkbox.'
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Checkbox",
+      "RadioCard"
+    ]
+  },
+  props: [
+    {
+      name: "onCheckedChange",
+      type: "(checked: boolean, eventDetails) => void",
+      description: "Fires with the next checked state (Base UI passes eventDetails second). Pair with `checked` for a controlled card; omit both to let it manage its own state."
+    },
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "The card's primary label (text-title-sm)."
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "Optional supporting copy beneath the title (text-body-sm, muted)."
+    },
+    {
+      name: "icon",
+      type: "ReactNode",
+      description: "Optional glyph (a solid <Icon>) in the tone colour. Its presence switches to the two-dimensional card RadioCard uses \u2014 icon top-left, checkbox top-right, copy below \u2014 so the two cards match in one form."
+    },
+    {
+      name: "tone",
+      type: '"neutral" | "standard" | "collectible" | "edition" | "info" | "warning"',
+      default: '"neutral"',
+      description: "Semantic colour the checked state carries across the border, checkbox box, and icon."
+    },
+    {
+      name: "value",
+      type: "string",
+      description: "Names the card inside a group-owned CheckboxGroup: the card is checked when the group's value array includes it. Also the value submitted with a form. Inside a CheckboxGroup, `name` stands in for `value` when `value` is omitted."
+    },
+    {
+      name: "checked / onCheckedChange / defaultChecked / disabled",
+      type: "Base UI Checkbox.Root props",
+      description: "Standard checkbox state. Without a group-owned value, each card is independent \u2014 drive checked/onCheckedChange per item for multi-select."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "CheckboxGroup",
+      type: "{ className?: string; children: ReactNode; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; allValues?: string[]; disabled?: boolean }",
+      description: "Column wrapper (role=group) over Base UI's CheckboxGroup. With no group props it is layout only and each card stays independent. Pass value/defaultValue/onValueChange (string[]) and give each child a `value` to let the group own the selection \u2014 works for CheckboxCard and plain Checkbox children alike. Add allValues plus a `<Checkbox parent />` for a select-all box that turns mixed when only some are checked. `disabled` disables every child. onValueChange gets (value, eventDetails). Override the grid via className for multi-column layouts."
+    }
+  ],
+  variants: {
+    tone: ["neutral", "standard", "collectible", "edition", "info", "warning"]
+  },
+  tokensUsed: [
+    "input",
+    "card",
+    "ring",
+    "primary",
+    "primary-foreground",
+    "accent",
+    "foreground",
+    "muted-foreground",
+    "tone-standard",
+    "tone-standard-foreground",
+    "tone-collectible",
+    "tone-collectible-foreground",
+    "tone-edition",
+    "tone-edition-foreground",
+    "tone-info",
+    "tone-info-foreground",
+    "tone-warning",
+    "tone-warning-foreground"
+  ],
+  a11y: [
+    "Base UI provides the checkbox role, aria-checked, hidden native input, keyboard toggle, and data-[checked]/data-disabled state.",
+    "The whole card is the hit target; focus draws a 2px outline outside the card (not a ring, so the checked tone ring survives focus); Space toggles the focused card.",
+    "Selection never relies on colour alone \u2014 the filled checkbox box + check mark and the card border all shift.",
+    "A parent select-all Checkbox gets aria-checked=mixed and aria-controls pointing at its children from Base UI; give it a visible label."
+  ],
+  examples: [
+    {
+      label: "Group-owned selection",
+      code: "<CheckboxGroup value={selected} onValueChange={setSelected}>{REASONS.map((r) => (<CheckboxCard key={r} value={r} title={r} />))}</CheckboxGroup>"
+    },
+    {
+      label: "Select all",
+      code: '<CheckboxGroup allValues={REASONS} value={selected} onValueChange={setSelected}><Field label="All reasons" orientation="horizontal"><Checkbox parent /></Field>{REASONS.map((r) => (<CheckboxCard key={r} value={r} title={r} />))}</CheckboxGroup>'
+    },
+    {
+      label: "A single independent card",
+      code: '<CheckboxCard title="Email me a receipt" description="Sent when the mint settles" checked={receipt} onCheckedChange={setReceipt} />'
+    },
+    {
+      label: "Toned with description",
+      code: '<CheckboxCard tone="edition" title="Editions" description="Sell as numbered NFT editions" defaultChecked />'
+    }
+  ]
+};
+export {
+  checkboxCardMeta
+};

package/dist/components/checkbox-card/checkbox-card.variants.js

@@ -0,0 +1,43 @@
+// src/components/checkbox-card/checkbox-card.variants.ts
+import { SELECTION_CARD_CHECKED } from "../../lib/selection-card.js";
+var checkboxCardToneClasses = {
+  neutral: {
+    card: SELECTION_CARD_CHECKED.neutral,
+    box: "group-data-[checked]:border-primary group-data-[checked]:bg-primary group-data-[indeterminate]:border-primary group-data-[indeterminate]:bg-primary",
+    check: "text-primary-foreground",
+    glyph: "text-foreground"
+  },
+  standard: {
+    card: SELECTION_CARD_CHECKED.standard,
+    box: "group-data-[checked]:border-tone-standard group-data-[checked]:bg-tone-standard group-data-[indeterminate]:border-tone-standard group-data-[indeterminate]:bg-tone-standard",
+    check: "text-tone-standard-foreground",
+    glyph: "text-tone-standard"
+  },
+  collectible: {
+    card: SELECTION_CARD_CHECKED.collectible,
+    box: "group-data-[checked]:border-tone-collectible group-data-[checked]:bg-tone-collectible group-data-[indeterminate]:border-tone-collectible group-data-[indeterminate]:bg-tone-collectible",
+    check: "text-tone-collectible-foreground",
+    glyph: "text-tone-collectible"
+  },
+  edition: {
+    card: SELECTION_CARD_CHECKED.edition,
+    box: "group-data-[checked]:border-tone-edition group-data-[checked]:bg-tone-edition group-data-[indeterminate]:border-tone-edition group-data-[indeterminate]:bg-tone-edition",
+    check: "text-tone-edition-foreground",
+    glyph: "text-tone-edition"
+  },
+  info: {
+    card: SELECTION_CARD_CHECKED.info,
+    box: "group-data-[checked]:border-tone-info group-data-[checked]:bg-tone-info group-data-[indeterminate]:border-tone-info group-data-[indeterminate]:bg-tone-info",
+    check: "text-tone-info-foreground",
+    glyph: "text-tone-info"
+  },
+  warning: {
+    card: SELECTION_CARD_CHECKED.warning,
+    box: "group-data-[checked]:border-tone-warning group-data-[checked]:bg-tone-warning group-data-[indeterminate]:border-tone-warning group-data-[indeterminate]:bg-tone-warning",
+    check: "text-tone-warning-foreground",
+    glyph: "text-tone-warning"
+  }
+};
+export {
+  checkboxCardToneClasses
+};

package/dist/components/checkbox-card/index.js

@@ -0,0 +1,11 @@
+// src/components/checkbox-card/index.ts
+import {
+  CheckboxCard,
+  CheckboxGroup
+} from "./checkbox-card.js";
+import { checkboxCardMeta } from "./checkbox-card.meta.js";
+export {
+  CheckboxCard,
+  CheckboxGroup,
+  checkboxCardMeta
+};

package/dist/components/code/code.js

@@ -0,0 +1,19 @@
+// src/components/code/code.tsx
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function Code({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      className: cn(
+        "rounded-xs bg-muted px-[0.35em] py-[0.15em] font-mono text-[0.875em] tabular-nums text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+Code.displayName = "Code";
+export {
+  Code
+};

package/dist/components/code/code.meta.js

@@ -0,0 +1,71 @@
+// src/components/code/code.meta.ts
+var codeMeta = {
+  name: "Code",
+  summary: "Inline code. A styled `<code>` for code spans, keys, and identifiers inside running text \u2014 soft muted fill, monospace.",
+  status: "stable",
+  keywords: [
+    "code",
+    "inline code",
+    "token",
+    "monospace"
+  ],
+  usage: {
+    description: "Use Code for short inline identifiers, commands, tokens, props, and file names inside prose.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for brief technical literals that need to stand apart from body copy."
+      },
+      {
+        guidance: "do",
+        description: "Keep inline code short enough that it does not dominate the paragraph."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Code for multiline snippets; use CodeBlock instead."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put a value the reader needs to copy inside it. Code has no copy affordance, so they will select it by hand and catch the surrounding punctuation; use CodeBlock with a prompt."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "CodeBlock",
+      "Kbd"
+    ]
+  },
+  props: [
+    {
+      name: "...props",
+      type: 'ComponentPropsWithRef<"code">',
+      description: "All native `<code>` attributes (children, className, ref, \u2026) pass through."
+    }
+  ],
+  tokensUsed: ["muted", "foreground"],
+  a11y: [
+    "Renders a semantic `<code>` element so assistive tech announces it as code.",
+    "A `<code>` element is not announced distinctly by most screen readers \u2014 a code span in running prose is read as ordinary text. Where the exactness matters (a command to type verbatim, a case-sensitive identifier), say so in the sentence rather than relying on the styling to carry it."
+  ],
+  examples: [
+    {
+      label: "Inline",
+      code: "Run <Code>pnpm dev</Code> to start the server."
+    },
+    {
+      label: "Code vs CodeBlock",
+      code: `// Picking the wrong one is the usual mistake:
+//
+//   Code                   inline, inside a sentence       \u2192 \`useState\`
+//   CodeBlock              multi-line, read-only           \u2192 an example to study
+//   CodeBlock prompt="$"   one line, meant to be COPIED    \u2192 an install command
+
+Install with <Code>pnpm add @sableui/react</Code>          {/* \u2717 they will want to copy it */}
+<CodeBlock prompt="$" code="pnpm add @sableui/react" />   {/* \u2713 one line, with a copy button */}`
+    }
+  ]
+};
+export {
+  codeMeta
+};

package/dist/components/code/index.js

@@ -0,0 +1,7 @@
+// src/components/code/index.ts
+import { Code } from "./code.js";
+import { codeMeta } from "./code.meta.js";
+export {
+  Code,
+  codeMeta
+};

package/dist/components/code-block/code-block.js

@@ -0,0 +1,84 @@
+// src/components/code-block/code-block.tsx
+import { createContext, useContext, useRef } from "react";
+import { Icon } from "../../icon/index.js";
+import { useCopy } from "../../lib/use-copy.js";
+import { useEdgeFade } from "../../lib/use-edge-fade.js";
+import { Button } from "../button/button.js";
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeHighlightContext = createContext(null);
+function CodeHighlightProvider({ highlight, children }) {
+  return /* @__PURE__ */ jsx(CodeHighlightContext.Provider, { value: highlight, children });
+}
+function CodeBlock({
+  code,
+  filename,
+  showCopy = true,
+  highlight,
+  prompt,
+  className,
+  ...props
+}) {
+  const contextHighlight = useContext(CodeHighlightContext);
+  const highlighter = highlight === false ? null : highlight ?? contextHighlight;
+  const hasHeader = Boolean(filename);
+  const { copy, copied } = useCopy(code);
+  const preRef = useRef(null);
+  const fade = useEdgeFade(preRef, "horizontal");
+  if (prompt != null) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex items-center justify-between gap-3 rounded-md border border-border bg-muted/40 py-1 ps-3 pe-1", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("code", { className: "truncate text-mono-md text-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "select-none text-muted-foreground", children: [
+              prompt,
+              " "
+            ] }),
+            code
+          ] }),
+          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy command", onClick: copy, className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+        ]
+      }
+    );
+  }
+  const copyColumn = !hasHeader && showCopy;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-md border border-border bg-muted/40",
+        copyColumn && "flex items-start",
+        className
+      ),
+      ...props,
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-mono-caption text-muted-foreground", children: filename }),
+          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            ref: preRef,
+            onScroll: fade.sync,
+            style: fade.style,
+            className: cn(
+              "overflow-x-auto overscroll-x-contain p-4 text-mono-md text-foreground scrollbar-quiet",
+              copyColumn && "min-w-0 flex-1 pe-2"
+            ),
+            children: /* @__PURE__ */ jsx("code", { children: highlighter ? highlighter(code) : code })
+          }
+        ),
+        copyColumn ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "m-2 ms-0 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+      ]
+    }
+  );
+}
+CodeBlock.displayName = "CodeBlock";
+export {
+  CodeBlock,
+  CodeHighlightProvider
+};

package/dist/components/code-block/code-block.meta.js

@@ -0,0 +1,103 @@
+// src/components/code-block/code-block.meta.ts
+var codeBlockMeta = {
+  name: "CodeBlock",
+  summary: "Multi-line code surface. Optional header bar carries a filename and a copy affordance; the body is a horizontally scrollable monospace pre. Syntax highlighting is opt-in: pass a highlighter per block or once via CodeHighlightProvider (the package ships none).",
+  status: "stable",
+  keywords: [
+    "code block",
+    "snippet",
+    "pre",
+    "example"
+  ],
+  usage: {
+    description: "Use CodeBlock for multiline code samples that users may read, inspect, or copy.",
+    anatomy: [
+      { name: "CodeBlock", required: true, description: "The surface: optional filename header, copy affordance, scrollable pre." },
+      { name: "CodeHighlightProvider", required: false, description: "Optional app-level wrapper that supplies one highlighter to every CodeBlock inside it." }
+    ],
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Give the snippet a filename, or a sentence of surrounding copy, when it helps readers and agents place it."
+      },
+      {
+        guidance: "do",
+        description: "Keep examples complete enough to teach the intended pattern."
+      },
+      {
+        guidance: "do",
+        description: "Wire highlighting once with CodeHighlightProvider and map token colors to semantic tone tokens (keywords \u2192 tone-edition, strings \u2192 success, comments \u2192 muted-foreground), so code follows the theme instead of a fixed palette."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put short inline identifiers in a CodeBlock; use Code for those."
+      },
+      {
+        guidance: "dont",
+        description: "Do not paste code with the indentation the surrounding file had. A block indented to sit inside your JSX shows the reader leading whitespace that is not part of the example."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Code"
+    ]
+  },
+  props: [
+    {
+      name: "code",
+      type: "string",
+      description: "The code to display. Always what the copy button copies, whatever the highlighter renders."
+    },
+    {
+      name: "filename",
+      type: "string",
+      description: "Optional filename shown in the header bar."
+    },
+    {
+      name: "showCopy",
+      type: "boolean",
+      default: "true",
+      description: "Show the copy affordance \u2014 in the header bar with a filename, floating in the corner without one."
+    },
+    {
+      name: "highlight",
+      type: "((code: string) => ReactNode) | false",
+      description: "Highlighter for this block; overrides CodeHighlightProvider. false renders plain text inside a provider."
+    },
+    {
+      name: "prompt",
+      type: "string",
+      description: 'A shell prompt ("$", ">"). Makes it a one-line command: the prompt is dimmed and unselectable, the line truncates, and copy takes only code.'
+    }
+  ],
+  subcomponents: [
+    {
+      name: "CodeHighlightProvider",
+      type: "{ highlight: (code: string) => ReactNode; children: ReactNode }",
+      description: "Supplies one highlighter to every CodeBlock beneath it, so an app wires highlighting once. Map the highlighter's token colors to Sable tone tokens so code follows the theme."
+    }
+  ],
+  tokensUsed: ["border", "muted", "muted-foreground", "foreground"],
+  a11y: [
+    "Code renders inside a <pre><code> for correct semantics and screen-reader handling.",
+    "Copy is the ghost icon Button with `useCopy`, which guards clipboard access for SSR safety."
+  ],
+  examples: [
+    {
+      label: "With filename + copy",
+      code: '<CodeBlock filename="cn.ts" code={"import { clsx } from \\"clsx\\"\\nexport const cn = clsx"} />'
+    },
+    {
+      label: "With a highlighter for the whole app",
+      code: '<CodeHighlightProvider highlight={(code) => <span dangerouslySetInnerHTML={{ __html: highlightToHtml(code) }} />}><CodeBlock code={"const a = 1"} /></CodeHighlightProvider>'
+    },
+    {
+      label: "No header",
+      code: '<CodeBlock showCopy={false} code={"type Size = \\"sm\\" | \\"md\\"\\nconst size: Size = \\"md\\""} />'
+    }
+  ]
+};
+export {
+  codeBlockMeta
+};

package/dist/components/code-block/index.js

@@ -0,0 +1,8 @@
+// src/components/code-block/index.ts
+import { CodeBlock, CodeHighlightProvider } from "./code-block.js";
+import { codeBlockMeta } from "./code-block.meta.js";
+export {
+  CodeBlock,
+  CodeHighlightProvider,
+  codeBlockMeta
+};

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,38 @@
+// src/components/collapsible/collapsible.tsx
+import { Collapsible as Base } from "@base-ui/react/collapsible";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var Collapsible = Base.Root;
+var CollapsibleTrigger = Base.Trigger;
+function CollapsibleIndicator({ className }) {
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: "chevron-down",
+      className: cn(
+        "text-xs text-muted-foreground motion-interactive group-data-[panel-open]/collapsible:rotate-180",
+        className
+      )
+    }
+  );
+}
+function CollapsiblePanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Panel,
+    {
+      className: cn(
+        "h-[var(--collapsible-panel-height)] text-body-md text-foreground",
+        "motion-disclosure data-[ending-style]:h-0 data-[starting-style]:h-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Collapsible,
+  CollapsibleIndicator,
+  CollapsiblePanel,
+  CollapsibleTrigger
+};