@inshorts/glint-ui 0.5.3 → 0.6.0

package/dist/chunk-ASU6CUTZ.js

@@ -0,0 +1,85 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/segmented-control.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var TONES = {
+  emphasis: {
+    on: "bg-slate-950 text-white dark:bg-white dark:text-slate-950",
+    off: "text-muted-foreground hover:bg-muted"
+  },
+  primary: {
+    on: "bg-primary text-primary-foreground",
+    off: "text-muted-foreground hover:bg-muted"
+  }
+};
+var TRACKS = {
+  contained: "border-border inline-flex rounded-md border p-0.5",
+  loose: "flex flex-wrap gap-2"
+};
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  variant = "contained",
+  tone = "emphasis",
+  fill = false,
+  className
+}) {
+  const refs = React.useRef(/* @__PURE__ */ new Map());
+  function onKeyDown(event) {
+    const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+    if (step === 0) return;
+    const selectable = options.filter((option) => !option.disabled);
+    if (selectable.length < 2) return;
+    const current = selectable.findIndex((option) => option.value === value);
+    const next = selectable[(current + step + selectable.length) % selectable.length];
+    event.preventDefault();
+    onChange(next.value);
+    refs.current.get(next.value)?.focus();
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      onKeyDown,
+      className: cn(TRACKS[variant], className),
+      children: options.map((option) => {
+        const checked = option.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (node) => {
+              refs.current.set(option.value, node);
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            disabled: option.disabled,
+            title: option.title,
+            tabIndex: checked ? 0 : -1,
+            onClick: () => onChange(option.value),
+            className: cn(
+              "cursor-pointer rounded px-3 py-1 text-sm font-medium transition",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              fill && "flex-1",
+              checked ? TONES[tone].on : TONES[tone].off
+            ),
+            children: option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+export {
+  SegmentedControl
+};
+//# sourceMappingURL=chunk-ASU6CUTZ.js.map

package/dist/chunk-ASU6CUTZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The one-of-N picker seven panels were each drawing by hand.\n *\n * Not `Tabs`, which is a bottom-bordered strip sitting above the content it\n * switches. This is the inline version — a bordered track with the selected\n * option filled in — used for a filter or a setting that sits among other\n * controls rather than heading a panel.\n *\n * **Roles are the reason to use this.** The seven copies had three different\n * ideas about what they were: one said `tablist`/`tab`, one said\n * `group`/`aria-pressed`, and the other five said nothing at all — so on five\n * of seven a screen reader heard a row of unlabelled buttons with no\n * indication which one was active. None of the three was right. `tablist`\n * without a `tabpanel` is a promise the markup does not keep, and\n * `aria-pressed` describes independent toggles, not a choice of one. Picking a\n * value out of a fixed set is a radio group, so that is what this is, with the\n * roving tabindex and arrow keys that come with the role.\n *\n * `tone` keeps both active colours the panels had drifted into: `emphasis` is\n * the near-black/near-white fill five of them used, `primary` the violet\n * accent the other two did. They are genuinely different colours rather than\n * one spelled two ways, so collapsing them is a visual change to two panels\n * and belongs in its own reviewable diff — the same call `DataTable` makes\n * about its two header variants.\n */\nexport interface SegmentedOption<Value extends string> {\n  value: Value;\n  label: React.ReactNode;\n  disabled?: boolean;\n  /**\n   * Hover text. Worth setting on a disabled option — \"Everyone\" going grey\n   * says nothing about which permission would bring it back.\n   */\n  title?: string;\n}\n\nexport interface SegmentedControlProps<Value extends string> {\n  options: ReadonlyArray<SegmentedOption<Value>>;\n  value: Value;\n  onChange: (value: Value) => void;\n  /**\n   * Required: the group never has a visible label — the options name the\n   * choice between them, which tells you nothing about what is being chosen.\n   */\n  ariaLabel: string;\n  /**\n   * `contained` — one bordered track around the options (five panels).\n   * `loose` — free-standing pills with a gap between them (two panels).\n   */\n  variant?: \"contained\" | \"loose\";\n  /** See the note above: two real colours, not one spelled twice. */\n  tone?: \"emphasis\" | \"primary\";\n  /** Options share the width equally, for a control that fills its column. */\n  fill?: boolean;\n  className?: string;\n}\n\nconst TONES = {\n  emphasis: {\n    on: \"bg-slate-950 text-white dark:bg-white dark:text-slate-950\",\n    off: \"text-muted-foreground hover:bg-muted\",\n  },\n  primary: {\n    on: \"bg-primary text-primary-foreground\",\n    off: \"text-muted-foreground hover:bg-muted\",\n  },\n} as const;\n\nconst TRACKS = {\n  contained: \"border-border inline-flex rounded-md border p-0.5\",\n  loose: \"flex flex-wrap gap-2\",\n} as const;\n\nexport function SegmentedControl<Value extends string>({\n  options,\n  value,\n  onChange,\n  ariaLabel,\n  variant = \"contained\",\n  tone = \"emphasis\",\n  fill = false,\n  className,\n}: SegmentedControlProps<Value>) {\n  const refs = React.useRef(new Map<Value, HTMLButtonElement | null>());\n\n  function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    const step =\n      event.key === \"ArrowRight\" || event.key === \"ArrowDown\"\n        ? 1\n        : event.key === \"ArrowLeft\" || event.key === \"ArrowUp\"\n          ? -1\n          : 0;\n    if (step === 0) return;\n\n    const selectable = options.filter((option) => !option.disabled);\n    if (selectable.length < 2) return;\n\n    const current = selectable.findIndex((option) => option.value === value);\n    // Wraps, which is what a radio group is expected to do.\n    const next =\n      selectable[(current + step + selectable.length) % selectable.length];\n\n    event.preventDefault();\n    onChange(next.value);\n    // The newly checked option has to take focus, or the next arrow press is\n    // still measured from the old one.\n    refs.current.get(next.value)?.focus();\n  }\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      onKeyDown={onKeyDown}\n      className={cn(TRACKS[variant], className)}\n    >\n      {options.map((option) => {\n        const checked = option.value === value;\n        return (\n          <button\n            key={option.value}\n            ref={(node) => {\n              refs.current.set(option.value, node);\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={checked}\n            disabled={option.disabled}\n            title={option.title}\n            // Only the checked option is reachable by Tab; arrows move within\n            // the group. Without this a keyboard user pages through every\n            // option to get past the control.\n            tabIndex={checked ? 0 : -1}\n            onClick={() => onChange(option.value)}\n            className={cn(\n              \"cursor-pointer rounded px-3 py-1 text-sm font-medium transition\",\n              \"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              fill && \"flex-1\",\n              checked ? TONES[tone].on : TONES[tone].off,\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAEA,YAAY,WAAW;AA2Hb;AA9DV,IAAM,QAAQ;AAAA,EACZ,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,EACP;AACF;AAEA,IAAM,SAAS;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AACT;AAEO,SAAS,iBAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AACF,GAAiC;AAC/B,QAAM,OAAa,aAAO,oBAAI,IAAqC,CAAC;AAEpE,WAAS,UAAU,OAA4C;AAC7D,UAAM,OACJ,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,cACxC,IACA,MAAM,QAAQ,eAAe,MAAM,QAAQ,YACzC,KACA;AACR,QAAI,SAAS,EAAG;AAEhB,UAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,CAAC,OAAO,QAAQ;AAC9D,QAAI,WAAW,SAAS,EAAG;AAE3B,UAAM,UAAU,WAAW,UAAU,CAAC,WAAW,OAAO,UAAU,KAAK;AAEvE,UAAM,OACJ,YAAY,UAAU,OAAO,WAAW,UAAU,WAAW,MAAM;AAErE,UAAM,eAAe;AACrB,aAAS,KAAK,KAAK;AAGnB,SAAK,QAAQ,IAAI,KAAK,KAAK,GAAG,MAAM;AAAA,EACtC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA,WAAW,GAAG,OAAO,OAAO,GAAG,SAAS;AAAA,MAEvC,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,UAAU,OAAO,UAAU;AACjC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,mBAAK,QAAQ,IAAI,OAAO,OAAO,IAAI;AAAA,YACrC;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,OAAO,OAAO;AAAA,YAId,UAAU,UAAU,IAAI;AAAA,YACxB,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQ;AAAA,cACR,UAAU,MAAM,IAAI,EAAE,KAAK,MAAM,IAAI,EAAE;AAAA,YACzC;AAAA,YAEC,iBAAO;AAAA;AAAA,UAtBH,OAAO;AAAA,QAuBd;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-EWSBFU54.js

@@ -0,0 +1,53 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/collapsible.tsx
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CollapsibleSection({
+  title,
+  icon,
+  defaultOpen = true,
+  right,
+  className,
+  children
+}) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const bodyId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: cn("border-border rounded-lg border", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": bodyId,
+        onClick: () => setOpen((current) => !current),
+        className: "hover:bg-muted/50 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-semibold transition",
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: 14,
+              "aria-hidden": true,
+              className: cn(
+                "shrink-0 transition-transform",
+                open ? "" : "-rotate-90"
+              )
+            }
+          ),
+          icon,
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: title }),
+          right
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: bodyId, hidden: !open, className: "space-y-3 px-3 pt-1 pb-3", children })
+  ] });
+}
+
+export {
+  CollapsibleSection
+};
+//# sourceMappingURL=chunk-EWSBFU54.js.map

package/dist/chunk-EWSBFU54.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * A titled section that folds away.\n *\n * For sidebar panels that are long but not always in use — the body stays\n * mounted so its state (a loaded list, a half-filled filter) survives being\n * collapsed, rather than being thrown away and refetched on the way back.\n */\nexport function CollapsibleSection({\n  title,\n  icon,\n  defaultOpen = true,\n  right,\n  className,\n  children,\n}: {\n  title: string;\n  /** Optional leading glyph, shown between the chevron and the title. */\n  icon?: React.ReactNode;\n  defaultOpen?: boolean;\n  /** Optional trailing content in the header, e.g. a count. */\n  right?: React.ReactNode;\n  className?: string;\n  children: React.ReactNode;\n}) {\n  const [open, setOpen] = React.useState(defaultOpen);\n  const bodyId = React.useId();\n\n  return (\n    <div className={cn(\"border-border rounded-lg border\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        aria-controls={bodyId}\n        onClick={() => setOpen((current) => !current)}\n        className=\"hover:bg-muted/50 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-semibold transition\"\n      >\n        <ChevronDown\n          size={14}\n          aria-hidden\n          className={cn(\n            \"shrink-0 transition-transform\",\n            open ? \"\" : \"-rotate-90\",\n          )}\n        />\n        {icon}\n        <span className=\"flex-1\">{title}</span>\n        {right}\n      </button>\n      {/* Hidden rather than unmounted, so collapsing does not discard the\n          panel's state or refetch what it had already loaded. */}\n      <div id={bodyId} hidden={!open} className=\"space-y-3 px-3 pt-1 pb-3\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAEA,SAAS,mBAAmB;AAC5B,YAAY,WAAW;AAiCjB,SAOE,KAPF;AAtBC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,CAAC,MAAM,OAAO,IAAU,eAAS,WAAW;AAClD,QAAM,SAAe,YAAM;AAE3B,SACE,qBAAC,SAAI,WAAW,GAAG,mCAAmC,SAAS,GAC7D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,SAAS,MAAM,QAAQ,CAAC,YAAY,CAAC,OAAO;AAAA,QAC5C,WAAU;AAAA,QAEV;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,eAAW;AAAA,cACX,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO,KAAK;AAAA,cACd;AAAA;AAAA,UACF;AAAA,UACC;AAAA,UACD,oBAAC,UAAK,WAAU,UAAU,iBAAM;AAAA,UAC/B;AAAA;AAAA;AAAA,IACH;AAAA,IAGA,oBAAC,SAAI,IAAI,QAAQ,QAAQ,CAAC,MAAM,WAAU,4BACvC,UACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-G4ZQUSAJ.js

@@ -0,0 +1,38 @@
+import {
+  Spinner
+} from "./chunk-UE7JY7VR.js";
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/state-panel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatePanel({
+  loading,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: loading ? "status" : void 0,
+      "aria-live": loading ? "polite" : void 0,
+      className: cn(
+        "border-border bg-background/80 text-muted-foreground rounded-lg border px-4 py-6 text-center text-sm",
+        loading && "flex items-center justify-center gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: "md" }) : null,
+        children
+      ]
+    }
+  );
+}
+
+export {
+  StatePanel
+};
+//# sourceMappingURL=chunk-G4ZQUSAJ.js.map

package/dist/chunk-G4ZQUSAJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/state-panel.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { Spinner } from \"./spinner\";\nimport { cn } from \"./utils\";\n\n/**\n * The bordered block a list shows instead of rows: loading, or nothing found.\n *\n * Fourteen copies of the same\n * `border-border bg-background/80 … rounded-lg border px-4 py-6 text-center`\n * across the panels, each with its own wording — \"Loading users…\", \"Loading\n * taxonomy…\", \"Loading showcases…\". The wording is worth keeping (it says what\n * is loading), the markup is not.\n *\n * `loading` adds two things the hand-rolled versions did not have: a spinner,\n * so a slow panel does not look like an empty one, and `role=\"status\"` with\n * `aria-live=\"polite\"`, so a screen reader is told the list arrived instead of\n * silently finding rows on the next tab press.\n */\nexport interface StatePanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Shows a spinner and announces politely. */\n  loading?: boolean;\n}\n\nexport function StatePanel({\n  loading,\n  className,\n  children,\n  ...props\n}: StatePanelProps) {\n  return (\n    <div\n      role={loading ? \"status\" : undefined}\n      aria-live={loading ? \"polite\" : undefined}\n      className={cn(\n        \"border-border bg-background/80 text-muted-foreground rounded-lg border px-4 py-6 text-center text-sm\",\n        loading && \"flex items-center justify-center gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      {loading ? <Spinner size=\"md\" /> : null}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AA+BI,SAUa,KAVb;AAPG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,WAAW;AAAA,MAC3B,aAAW,UAAU,WAAW;AAAA,MAChC,WAAW;AAAA,QACT;AAAA,QACA,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,kBAAU,oBAAC,WAAQ,MAAK,MAAK,IAAK;AAAA,QAClC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-GMCUXEFI.js

@@ -0,0 +1,67 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/card.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "bg-card text-card-foreground rounded-xl border shadow",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("leading-none font-semibold tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter
+};
+//# sourceMappingURL=chunk-GMCUXEFI.js.map

package/dist/chunk-GMCUXEFI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * Surface container for grouped content. Prefer a bare section when there is\n * no need for border / padding chrome — cards are for interactive or\n * self-contained blocks, not every stack of text.\n */\nexport const Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"bg-card text-card-foreground rounded-xl border shadow\",\n      className,\n    )}\n    {...props}\n  />\n));\nCard.displayName = \"Card\";\n\nexport const CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nexport const CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"leading-none font-semibold tracking-tight\", className)}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nexport const CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-muted-foreground text-sm\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nexport const CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nexport const CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAarB;AAJK,IAAM,OAAa,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,KAAK,cAAc;AAEZ,IAAM,aAAmB,iBAG9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,WAAW,cAAc;AAElB,IAAM,YAAkB,iBAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,6CAA6C,SAAS;AAAA,IACnE,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAEjB,IAAM,kBAAwB,iBAGnC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,gBAAgB,cAAc;AAEvB,IAAM,cAAoB,iBAG/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,SAAI,KAAU,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO,CACjE;AACD,YAAY,cAAc;AAEnB,IAAM,aAAmB,iBAG9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA;AACN,CACD;AACD,WAAW,cAAc;","names":[]}

package/dist/chunk-HBBOR43A.js

@@ -0,0 +1,85 @@
+// src/dialogLayer.ts
+import * as React from "react";
+var layers = [];
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isVisible(element) {
+  if (element.closest("[hidden]")) return false;
+  if (element.getAttribute("aria-hidden") === "true") return false;
+  return typeof element.checkVisibility === "function" ? element.checkVisibility() : true;
+}
+function focusableWithin(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+    isVisible
+  );
+}
+function useDialogLayer({
+  active,
+  containerRef,
+  onEscape
+}) {
+  const escapeRef = React.useRef(onEscape);
+  React.useEffect(() => {
+    escapeRef.current = onEscape;
+  });
+  React.useEffect(() => {
+    if (!active) return;
+    const layer = /* @__PURE__ */ Symbol("dialog-layer");
+    layers.push(layer);
+    const isTopLayer = () => layers[layers.length - 1] === layer;
+    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const container = containerRef.current;
+    if (container && !container.contains(document.activeElement)) {
+      const [first] = focusableWithin(container);
+      (container.hasAttribute("tabindex") ? container : first)?.focus();
+    }
+    function handleKeyDown(event) {
+      if (!isTopLayer()) return;
+      if (event.key === "Escape") {
+        escapeRef.current?.();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const panel = containerRef.current;
+      if (!panel) return;
+      const items = focusableWithin(panel);
+      if (items.length === 0) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active2 = document.activeElement;
+      const outside = !panel.contains(active2);
+      if (event.shiftKey && (active2 === first || outside)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (active2 === last || outside)) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = previousOverflow;
+      const index = layers.indexOf(layer);
+      if (index !== -1) layers.splice(index, 1);
+      if (previouslyFocused?.isConnected) previouslyFocused.focus();
+    };
+  }, [active, containerRef]);
+}
+
+export {
+  useDialogLayer
+};
+//# sourceMappingURL=chunk-HBBOR43A.js.map

package/dist/chunk-HBBOR43A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialogLayer.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * The keyboard and focus behaviour every dialog needs, in one place.\n *\n * `Modal` and `SideDrawer` each had a copy of the scroll lock and an Escape\n * handler, and neither did anything about focus: opening a dialog left focus\n * on the button behind it, Tab walked the page underneath — through the\n * full-screen backdrop button, among other things — and closing left focus\n * wherever it had wandered. That is the whole keyboard story for thirty\n * dialogs, so it is fixed once here rather than thirty times.\n */\n\n/**\n * Open dialogs, innermost last.\n *\n * Nesting is real here — \"Create audience group\" opens on top of \"Send\n * notification\" — and without an ordering both would answer the same Escape\n * and fight over the same Tab. Only the top layer acts.\n */\nconst layers: symbol[] = [];\n\nconst FOCUSABLE = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(\",\");\n\n/**\n * Deliberately not `offsetParent` or `getClientRects`: the first is null for\n * anything `position: fixed`, which a dialog panel usually is, and the second\n * is empty for *everything* under a test renderer that does no layout — which\n * would collapse the trap to \"no focusable elements\" in every test.\n */\nfunction isVisible(element: HTMLElement): boolean {\n  if (element.closest(\"[hidden]\")) return false;\n  if (element.getAttribute(\"aria-hidden\") === \"true\") return false;\n  return typeof element.checkVisibility === \"function\"\n    ? element.checkVisibility()\n    : true;\n}\n\nfunction focusableWithin(container: HTMLElement): HTMLElement[] {\n  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n    isVisible,\n  );\n}\n\nexport function useDialogLayer({\n  active,\n  containerRef,\n  onEscape,\n}: {\n  active: boolean;\n  /** The panel. Focus is moved into it and kept inside it. */\n  containerRef: React.RefObject<HTMLElement | null>;\n  /** Called on Escape, only while this is the top layer. Omit to ignore it. */\n  onEscape?: () => void;\n}): void {\n  // Read through a ref so a caller passing a fresh closure every render does\n  // not tear the listener down and rebuild it on every keystroke.\n  const escapeRef = React.useRef(onEscape);\n  React.useEffect(() => {\n    escapeRef.current = onEscape;\n  });\n\n  React.useEffect(() => {\n    if (!active) return;\n\n    const layer = Symbol(\"dialog-layer\");\n    layers.push(layer);\n    const isTopLayer = () => layers[layers.length - 1] === layer;\n\n    const previouslyFocused =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : null;\n\n    const container = containerRef.current;\n    // Something inside may have claimed focus already — an `autoFocus` input —\n    // and that choice is better than any this could make.\n    if (container && !container.contains(document.activeElement)) {\n      const [first] = focusableWithin(container);\n      // The panel itself, not its first control: the first control is a Delete\n      // button often enough that focusing it would put a destructive action\n      // one Enter away from an accidental keypress.\n      (container.hasAttribute(\"tabindex\") ? container : first)?.focus();\n    }\n\n    function handleKeyDown(event: KeyboardEvent) {\n      if (!isTopLayer()) return;\n\n      if (event.key === \"Escape\") {\n        escapeRef.current?.();\n        return;\n      }\n\n      if (event.key !== \"Tab\") return;\n      const panel = containerRef.current;\n      if (!panel) return;\n\n      const items = focusableWithin(panel);\n      if (items.length === 0) {\n        event.preventDefault();\n        panel.focus();\n        return;\n      }\n\n      const first = items[0]!;\n      const last = items[items.length - 1]!;\n      const active = document.activeElement;\n      const outside = !panel.contains(active);\n\n      if (event.shiftKey && (active === first || outside)) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && (active === last || outside)) {\n        event.preventDefault();\n        first.focus();\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = previousOverflow;\n      const index = layers.indexOf(layer);\n      if (index !== -1) layers.splice(index, 1);\n      // Back where it came from, so closing a dialog opened by keyboard does\n      // not drop the caret at the top of the document.\n      if (previouslyFocused?.isConnected) previouslyFocused.focus();\n    };\n  }, [active, containerRef]);\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAoBvB,IAAM,SAAmB,CAAC;AAE1B,IAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAQV,SAAS,UAAU,SAA+B;AAChD,MAAI,QAAQ,QAAQ,UAAU,EAAG,QAAO;AACxC,MAAI,QAAQ,aAAa,aAAa,MAAM,OAAQ,QAAO;AAC3D,SAAO,OAAO,QAAQ,oBAAoB,aACtC,QAAQ,gBAAgB,IACxB;AACN;AAEA,SAAS,gBAAgB,WAAuC;AAC9D,SAAO,MAAM,KAAK,UAAU,iBAA8B,SAAS,CAAC,EAAE;AAAA,IACpE;AAAA,EACF;AACF;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAMS;AAGP,QAAM,YAAkB,aAAO,QAAQ;AACvC,EAAM,gBAAU,MAAM;AACpB,cAAU,UAAU;AAAA,EACtB,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AAEb,UAAM,QAAQ,uBAAO,cAAc;AACnC,WAAO,KAAK,KAAK;AACjB,UAAM,aAAa,MAAM,OAAO,OAAO,SAAS,CAAC,MAAM;AAEvD,UAAM,oBACJ,SAAS,yBAAyB,cAC9B,SAAS,gBACT;AAEN,UAAM,YAAY,aAAa;AAG/B,QAAI,aAAa,CAAC,UAAU,SAAS,SAAS,aAAa,GAAG;AAC5D,YAAM,CAAC,KAAK,IAAI,gBAAgB,SAAS;AAIzC,OAAC,UAAU,aAAa,UAAU,IAAI,YAAY,QAAQ,MAAM;AAAA,IAClE;AAEA,aAAS,cAAc,OAAsB;AAC3C,UAAI,CAAC,WAAW,EAAG;AAEnB,UAAI,MAAM,QAAQ,UAAU;AAC1B,kBAAU,UAAU;AACpB;AAAA,MACF;AAEA,UAAI,MAAM,QAAQ,MAAO;AACzB,YAAM,QAAQ,aAAa;AAC3B,UAAI,CAAC,MAAO;AAEZ,YAAM,QAAQ,gBAAgB,KAAK;AACnC,UAAI,MAAM,WAAW,GAAG;AACtB,cAAM,eAAe;AACrB,cAAM,MAAM;AACZ;AAAA,MACF;AAEA,YAAM,QAAQ,MAAM,CAAC;AACrB,YAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AACnC,YAAMA,UAAS,SAAS;AACxB,YAAM,UAAU,CAAC,MAAM,SAASA,OAAM;AAEtC,UAAI,MAAM,aAAaA,YAAW,SAAS,UAAU;AACnD,cAAM,eAAe;AACrB,aAAK,MAAM;AAAA,MACb,WAAW,CAAC,MAAM,aAAaA,YAAW,QAAQ,UAAU;AAC1D,cAAM,eAAe;AACrB,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAClD,UAAM,mBAAmB,SAAS,KAAK,MAAM;AAC7C,aAAS,KAAK,MAAM,WAAW;AAE/B,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AACrD,eAAS,KAAK,MAAM,WAAW;AAC/B,YAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,UAAI,UAAU,GAAI,QAAO,OAAO,OAAO,CAAC;AAGxC,UAAI,mBAAmB,YAAa,mBAAkB,MAAM;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAC3B;","names":["active"]}

package/dist/chunk-HCA5ODCD.js

@@ -0,0 +1,11 @@
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};
+//# sourceMappingURL=chunk-HCA5ODCD.js.map

package/dist/chunk-HCA5ODCD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/chunk-HYRJYUPI.js

@@ -0,0 +1,26 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/checkbox.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var checkboxClass = "accent-primary border-border focus-visible:ring-ring size-4 shrink-0 cursor-pointer rounded border focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+var Checkbox = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      className: cn(checkboxClass, className),
+      ...props
+    }
+  )
+);
+Checkbox.displayName = "Checkbox";
+
+export {
+  checkboxClass,
+  Checkbox
+};
+//# sourceMappingURL=chunk-HYRJYUPI.js.map

package/dist/chunk-HYRJYUPI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The native checkbox, sized and coloured once.\n *\n * Twenty-six of these were scattered across thirteen files and twenty of them\n * carried **no class at all** — browser defaults, so they were a different size\n * to the six that set `size-4` and drew their tick in the operating system's\n * accent rather than the panel's.\n *\n * This deliberately stays a native `<input type=\"checkbox\">` rather than an\n * `appearance-none` box with an SVG tick. Native gets indeterminate state,\n * form participation, platform focus behaviour and assistive-technology support\n * for free, and a custom one would have to re-earn all of it to look slightly\n * different.\n *\n * `border` and `rounded` mostly do not render on a native checkbox — they are\n * kept because the six styled copies had them and removing them would be a\n * silent change to those. `accent-primary` and `size-4` are what actually show.\n */\nexport const checkboxClass =\n  \"accent-primary border-border focus-visible:ring-ring size-4 shrink-0 cursor-pointer rounded border focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\";\n\nexport type CheckboxProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, ...props }, ref) => (\n    <input\n      ref={ref}\n      type=\"checkbox\"\n      className={cn(checkboxClass, className)}\n      {...props}\n    />\n  ),\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAgCnB;AAVG,IAAM,gBACX;AAOK,IAAM,WAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW,GAAG,eAAe,SAAS;AAAA,MACrC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc;","names":[]}

package/dist/chunk-IRCTGJQB.js

@@ -0,0 +1,26 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/textarea.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var textareaClass = "border-border bg-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+var Textarea = React.forwardRef(
+  ({ className, rows = 3, ...props }, ref) => /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      rows,
+      className: cn(textareaClass, className),
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+
+export {
+  textareaClass,
+  Textarea
+};
+//# sourceMappingURL=chunk-IRCTGJQB.js.map

package/dist/chunk-IRCTGJQB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The multi-line counterpart to `Input`.\n *\n * There was no shared textarea, so sixteen of them were styled individually\n * and no two agreed — different borders, different focus rings, some with no\n * focus ring at all, which is a keyboard user losing their place.\n *\n * Deliberately not `inputClass`: that fixes `h-9`, which is a one-line\n * control. Everything else is shared so a textarea and an input sitting in the\n * same form look related.\n */\nexport const textareaClass =\n  \"border-border bg-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\";\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, rows = 3, ...props }, ref) => (\n    <textarea\n      ref={ref}\n      rows={rows}\n      className={cn(textareaClass, className)}\n      {...props}\n    />\n  ),\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAsBnB;AAPG,IAAM,gBACX;AAIK,IAAM,WAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,OAAO,GAAG,GAAG,MAAM,GAAG,QAClC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,eAAe,SAAS;AAAA,MACrC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc;","names":[]}

package/dist/chunk-JDE5XYPT.js

@@ -0,0 +1,30 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/panel-brand-mark.tsx
+import { jsx } from "react/jsx-runtime";
+function PanelBrandMark({
+  children,
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-primary text-primary-foreground grid shrink-0 place-items-center rounded-lg",
+        size === "sm" ? "h-9 w-9" : "h-10 w-10",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+export {
+  PanelBrandMark
+};
+//# sourceMappingURL=chunk-JDE5XYPT.js.map

package/dist/chunk-JDE5XYPT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/panel-brand-mark.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type PanelBrandMarkProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Icon inside the mark (lucide, etc.). */\n  children: React.ReactNode;\n  size?: \"sm\" | \"md\";\n};\n\n/**\n * Quiet brand tile for sidebar / sign-in — solid primary, no decorative gradients.\n */\nexport function PanelBrandMark({\n  children,\n  size = \"md\",\n  className,\n  ...props\n}: PanelBrandMarkProps) {\n  return (\n    <div\n      className={cn(\n        \"bg-primary text-primary-foreground grid shrink-0 place-items-center rounded-lg\",\n        size === \"sm\" ? \"h-9 w-9\" : \"h-10 w-10\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAoBI;AAPG,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,OAAO,YAAY;AAAA,QAC5B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-JSJEEKR3.js

@@ -0,0 +1,59 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/breadcrumb.tsx
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Breadcrumb({ items, className }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("text-sm", className), children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const isInteractive = !isLast && (item.href || item.onClick);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center gap-1.5",
+        children: [
+          index > 0 && /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: "text-muted-foreground/70 size-3.5 shrink-0",
+              "aria-hidden": true
+            }
+          ),
+          isInteractive ? item.href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: item.href,
+              className: "text-muted-foreground hover:text-foreground transition",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: item.onClick,
+              className: "text-muted-foreground hover:text-foreground transition",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                isLast ? "text-foreground font-medium" : "text-muted-foreground"
+              ),
+              "aria-current": isLast ? "page" : void 0,
+              children: item.label
+            }
+          )
+        ]
+      },
+      `${item.label}-${index}`
+    );
+  }) }) });
+}
+
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=chunk-JSJEEKR3.js.map

package/dist/chunk-JSJEEKR3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type BreadcrumbItem = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\ninterface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn(\"text-sm\", className)}>\n      <ol className=\"flex flex-wrap items-center gap-1.5\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          const isInteractive = !isLast && (item.href || item.onClick);\n\n          return (\n            <li\n              key={`${item.label}-${index}`}\n              className=\"flex items-center gap-1.5\"\n            >\n              {index > 0 && (\n                <ChevronRight\n                  className=\"text-muted-foreground/70 size-3.5 shrink-0\"\n                  aria-hidden\n                />\n              )}\n              {isInteractive ? (\n                item.href ? (\n                  <a\n                    href={item.href}\n                    className=\"text-muted-foreground hover:text-foreground transition\"\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={item.onClick}\n                    className=\"text-muted-foreground hover:text-foreground transition\"\n                  >\n                    {item.label}\n                  </button>\n                )\n              ) : (\n                <span\n                  className={cn(\n                    isLast\n                      ? \"text-foreground font-medium\"\n                      : \"text-muted-foreground\",\n                  )}\n                  aria-current={isLast ? \"page\" : undefined}\n                >\n                  {item.label}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAS,oBAAoB;AAyBjB,SAKI,KALJ;AATL,SAAS,WAAW,EAAE,OAAO,UAAU,GAAoB;AAChE,SACE,oBAAC,SAAI,cAAW,cAAa,WAAW,GAAG,WAAW,SAAS,GAC7D,8BAAC,QAAG,WAAU,uCACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UAAM,gBAAgB,CAAC,WAAW,KAAK,QAAQ,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QAET;AAAA,kBAAQ,KACP;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAW;AAAA;AAAA,UACb;AAAA,UAED,gBACC,KAAK,OACH;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,KAAK;AAAA,cACX,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,KAAK;AAAA,cACd,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR,IAGF;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,SACI,gCACA;AAAA,cACN;AAAA,cACA,gBAAc,SAAS,SAAS;AAAA,cAE/B,eAAK;AAAA;AAAA,UACR;AAAA;AAAA;AAAA,MApCG,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,IAsC7B;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}