@invergent/ui-sdk 0.0.0-stage → 2.19.0

package/dist/chip.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-LZGII7SX.js';
+import { cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TONE = {
+  ok: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
+  warn: "bg-amber-500/14 text-amber-700 dark:text-amber-300",
+  bad: "bg-red-500/12 text-red-700 dark:text-red-300",
+  muted: "bg-foreground/[0.06] text-muted-foreground"
+};
+var chipVariants = cva(
+  "inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      tone: TONE,
+      size: {
+        sm: "px-2 py-0.5 text-[11.5px]",
+        default: "px-2 py-0.5 text-xs",
+        lg: "px-2.5 py-0.5 text-sm"
+      }
+    },
+    defaultVariants: { tone: "muted", size: "default" }
+  }
+);
+function Chip({
+  tone = "muted",
+  size = "default",
+  onRemove,
+  removeLabel = "Remove",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "chip",
+      "data-tone": tone,
+      className: cn(chipVariants({ tone, size }), onRemove && "pr-1", className),
+      ...props,
+      children: [
+        children,
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: onRemove,
+            "aria-label": removeLabel,
+            className: "relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-2.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function TonePill({
+  tone,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Chip, { tone, size: "sm", className, children });
+}
+function TagPill({
+  label,
+  onRemove,
+  size = "xs",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      size: size === "xs" ? "default" : "lg",
+      onRemove,
+      removeLabel: `Remove tag ${label}`,
+      className: cn("font-normal", className),
+      children: label
+    }
+  );
+}
+
+export { Chip, TONE, TagPill, TonePill, chipVariants };
+//# sourceMappingURL=chip.js.map
+//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip.tsx"],"names":[],"mappings":";;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,2BACG,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAK,WACzB,QAAA,EACH,CAAA;AAEJ;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.js","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  className,\n  children,\n}: {\n  tone?: Tone\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <Chip tone={tone} size=\"sm\" className={className}>\n      {children}\n    </Chip>\n  )\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}

package/dist/choice-card.cjs

@@ -0,0 +1,127 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var choiceCardVariants = classVarianceAuthority.cva(
+  "group/choice-card flex border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        default: "flex-col gap-3 rounded-[12px] p-4",
+        sm: "flex-row items-start gap-3 rounded-[10px] p-3.5 sm:flex-col sm:gap-2"
+      },
+      selected: { true: "", false: "" }
+    },
+    compoundVariants: [
+      { size: "default", selected: true, className: "border-amber-500 bg-amber-500/[0.06]" },
+      {
+        size: "default",
+        selected: false,
+        className: "border-foreground/[0.08] bg-foreground/[0.02] hover:border-foreground/20 hover:bg-foreground/[0.04]"
+      },
+      {
+        size: "sm",
+        selected: true,
+        className: "border-amber-500/70 bg-amber-500/[0.08] ring-1 ring-amber-500/70"
+      },
+      {
+        size: "sm",
+        selected: false,
+        className: "border-foreground/[0.08] bg-foreground/[0.02] pointer-fine:hover:border-foreground/20"
+      }
+    ],
+    defaultVariants: { size: "default", selected: false }
+  }
+);
+function ChoiceCard({
+  title,
+  description,
+  meta,
+  icon,
+  selected,
+  size = "default",
+  className,
+  children,
+  ...props
+}) {
+  if (size === "sm") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "choice-card",
+        "data-size": size,
+        "aria-pressed": selected,
+        className: chunk6YHDDRIM_cjs.cn(choiceCardVariants({ size, selected }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunk6YHDDRIM_cjs.cn(
+                "flex size-7 shrink-0 items-center justify-center rounded-[7px] [&_svg:not([class*='size-'])]:size-4",
+                selected ? "bg-amber-500 text-black" : "bg-foreground/[0.07] text-muted-foreground"
+              ),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-1 sm:contents", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunk6YHDDRIM_cjs.cn(
+                  "text-[14px] font-medium sm:text-[13px]",
+                  selected ? "text-foreground" : "text-foreground/85"
+                ),
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12.5px] leading-[1.4] text-muted-foreground sm:text-[12px]", children: description }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "choice-card",
+      "data-size": size,
+      "aria-pressed": selected,
+      className: chunk6YHDDRIM_cjs.cn(choiceCardVariants({ size, selected }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full items-start gap-3", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-[9px] border border-foreground/10 bg-foreground/[0.04] text-[13px] font-semibold text-foreground [&_svg:not([class*='size-'])]:size-4", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[14px] font-semibold text-foreground", children: title }),
+            meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block truncate font-mono text-[11px] text-muted-foreground/70", children: meta })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: chunk6YHDDRIM_cjs.cn(
+                "flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors",
+                selected ? "border-amber-500 bg-amber-500 text-black" : "border-foreground/20 text-transparent"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3", strokeWidth: 3 })
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 text-[12.5px] leading-relaxed text-muted-foreground", children: description }),
+        children
+      ]
+    }
+  );
+}
+
+exports.ChoiceCard = ChoiceCard;
+exports.choiceCardVariants = choiceCardVariants;
+//# sourceMappingURL=choice-card.cjs.map
+//# sourceMappingURL=choice-card.cjs.map

package/dist/choice-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choice-card.tsx"],"names":["cva","jsxs","cn","jsx","CheckIcon"],"mappings":"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","file":"choice-card.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's selectable option cards.\n//   default — the library pickers (skills, knowledge bases): a 12px card with\n//             an icon tile, title, description and a round check; picked, it\n//             takes an amber border and wash.\n//   sm      — the exclusive mode cards (pricing model): tighter, the icon\n//             tile itself turns amber, the border gets an amber ring; on a\n//             phone each lies as a row, from `sm` up as a column.\n// A toggle button (aria-pressed): pressing picks or unpicks it. For a set\n// where exactly one is picked, have onClick select it and leave it pressed.\nconst choiceCardVariants = cva(\n  \"group/choice-card flex border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-70\",\n  {\n    variants: {\n      size: {\n        default: \"flex-col gap-3 rounded-[12px] p-4\",\n        sm: \"flex-row items-start gap-3 rounded-[10px] p-3.5 sm:flex-col sm:gap-2\",\n      },\n      selected: { true: \"\", false: \"\" },\n    },\n    compoundVariants: [\n      { size: \"default\", selected: true, className: \"border-amber-500 bg-amber-500/[0.06]\" },\n      {\n        size: \"default\",\n        selected: false,\n        className:\n          \"border-foreground/[0.08] bg-foreground/[0.02] hover:border-foreground/20 hover:bg-foreground/[0.04]\",\n      },\n      {\n        size: \"sm\",\n        selected: true,\n        className: \"border-amber-500/70 bg-amber-500/[0.08] ring-1 ring-amber-500/70\",\n      },\n      {\n        size: \"sm\",\n        selected: false,\n        className: \"border-foreground/[0.08] bg-foreground/[0.02] pointer-fine:hover:border-foreground/20\",\n      },\n    ],\n    defaultVariants: { size: \"default\", selected: false },\n  }\n)\n\nfunction ChoiceCard({\n  title,\n  description,\n  meta,\n  icon,\n  selected,\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"button\">, \"title\"> & {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** A line under the title (an id, a trigger), in mono. */\n  meta?: React.ReactNode\n  /** The tile's content: an icon, or an initial. */\n  icon?: React.ReactNode\n  selected: boolean\n  size?: \"default\" | \"sm\"\n}) {\n  if (size === \"sm\") {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"choice-card\"\n        data-size={size}\n        aria-pressed={selected}\n        className={cn(choiceCardVariants({ size, selected }), className)}\n        {...props}\n      >\n        {icon && (\n          <span\n            className={cn(\n              \"flex size-7 shrink-0 items-center justify-center rounded-[7px] [&_svg:not([class*='size-'])]:size-4\",\n              selected\n                ? \"bg-amber-500 text-black\"\n                : \"bg-foreground/[0.07] text-muted-foreground\"\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <span className=\"flex min-w-0 flex-col gap-1 sm:contents\">\n          <span\n            className={cn(\n              \"text-[14px] font-medium sm:text-[13px]\",\n              selected ? \"text-foreground\" : \"text-foreground/85\"\n            )}\n          >\n            {title}\n          </span>\n          {description && (\n            <span className=\"text-[12.5px] leading-[1.4] text-muted-foreground sm:text-[12px]\">\n              {description}\n            </span>\n          )}\n          {children}\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"choice-card\"\n      data-size={size}\n      aria-pressed={selected}\n      className={cn(choiceCardVariants({ size, selected }), className)}\n      {...props}\n    >\n      <span className=\"flex w-full items-start gap-3\">\n        {icon && (\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-[9px] border border-foreground/10 bg-foreground/[0.04] text-[13px] font-semibold text-foreground [&_svg:not([class*='size-'])]:size-4\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-[14px] font-semibold text-foreground\">\n            {title}\n          </span>\n          {meta && (\n            <span className=\"mt-0.5 block truncate font-mono text-[11px] text-muted-foreground/70\">\n              {meta}\n            </span>\n          )}\n        </span>\n        <span\n          aria-hidden={true}\n          className={cn(\n            \"flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors\",\n            selected\n              ? \"border-amber-500 bg-amber-500 text-black\"\n              : \"border-foreground/20 text-transparent\"\n          )}\n        >\n          <CheckIcon className=\"size-3\" strokeWidth={3} />\n        </span>\n      </span>\n      {description && (\n        <span className=\"line-clamp-2 text-[12.5px] leading-relaxed text-muted-foreground\">\n          {description}\n        </span>\n      )}\n      {children}\n    </button>\n  )\n}\n\nexport { ChoiceCard, choiceCardVariants }\n"]}

package/dist/choice-card.d.cts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+declare const choiceCardVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ChoiceCard({ title, description, meta, icon, selected, size, className, children, ...props }: Omit<React.ComponentProps<"button">, "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** A line under the title (an id, a trigger), in mono. */
+    meta?: React.ReactNode;
+    /** The tile's content: an icon, or an initial. */
+    icon?: React.ReactNode;
+    selected: boolean;
+    size?: "default" | "sm";
+}): react_jsx_runtime.JSX.Element;
+
+export { ChoiceCard, choiceCardVariants };

package/dist/choice-card.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+declare const choiceCardVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ChoiceCard({ title, description, meta, icon, selected, size, className, children, ...props }: Omit<React.ComponentProps<"button">, "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** A line under the title (an id, a trigger), in mono. */
+    meta?: React.ReactNode;
+    /** The tile's content: an icon, or an initial. */
+    icon?: React.ReactNode;
+    selected: boolean;
+    size?: "default" | "sm";
+}): react_jsx_runtime.JSX.Element;
+
+export { ChoiceCard, choiceCardVariants };

package/dist/choice-card.js

@@ -0,0 +1,124 @@
+import { cn } from './chunk-LZGII7SX.js';
+import { cva } from 'class-variance-authority';
+import { CheckIcon } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var choiceCardVariants = cva(
+  "group/choice-card flex border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        default: "flex-col gap-3 rounded-[12px] p-4",
+        sm: "flex-row items-start gap-3 rounded-[10px] p-3.5 sm:flex-col sm:gap-2"
+      },
+      selected: { true: "", false: "" }
+    },
+    compoundVariants: [
+      { size: "default", selected: true, className: "border-amber-500 bg-amber-500/[0.06]" },
+      {
+        size: "default",
+        selected: false,
+        className: "border-foreground/[0.08] bg-foreground/[0.02] hover:border-foreground/20 hover:bg-foreground/[0.04]"
+      },
+      {
+        size: "sm",
+        selected: true,
+        className: "border-amber-500/70 bg-amber-500/[0.08] ring-1 ring-amber-500/70"
+      },
+      {
+        size: "sm",
+        selected: false,
+        className: "border-foreground/[0.08] bg-foreground/[0.02] pointer-fine:hover:border-foreground/20"
+      }
+    ],
+    defaultVariants: { size: "default", selected: false }
+  }
+);
+function ChoiceCard({
+  title,
+  description,
+  meta,
+  icon,
+  selected,
+  size = "default",
+  className,
+  children,
+  ...props
+}) {
+  if (size === "sm") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "choice-card",
+        "data-size": size,
+        "aria-pressed": selected,
+        className: cn(choiceCardVariants({ size, selected }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex size-7 shrink-0 items-center justify-center rounded-[7px] [&_svg:not([class*='size-'])]:size-4",
+                selected ? "bg-amber-500 text-black" : "bg-foreground/[0.07] text-muted-foreground"
+              ),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-1 sm:contents", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[14px] font-medium sm:text-[13px]",
+                  selected ? "text-foreground" : "text-foreground/85"
+                ),
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsx("span", { className: "text-[12.5px] leading-[1.4] text-muted-foreground sm:text-[12px]", children: description }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "choice-card",
+      "data-size": size,
+      "aria-pressed": selected,
+      className: cn(choiceCardVariants({ size, selected }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex w-full items-start gap-3", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-[9px] border border-foreground/10 bg-foreground/[0.04] text-[13px] font-semibold text-foreground [&_svg:not([class*='size-'])]:size-4", children: icon }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-[14px] font-semibold text-foreground", children: title }),
+            meta && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate font-mono text-[11px] text-muted-foreground/70", children: meta })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors",
+                selected ? "border-amber-500 bg-amber-500 text-black" : "border-foreground/20 text-transparent"
+              ),
+              children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3 })
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-[12.5px] leading-relaxed text-muted-foreground", children: description }),
+        children
+      ]
+    }
+  );
+}
+
+export { ChoiceCard, choiceCardVariants };
+//# sourceMappingURL=choice-card.js.map
+//# sourceMappingURL=choice-card.js.map

package/dist/choice-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choice-card.tsx"],"names":[],"mappings":"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","file":"choice-card.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's selectable option cards.\n//   default — the library pickers (skills, knowledge bases): a 12px card with\n//             an icon tile, title, description and a round check; picked, it\n//             takes an amber border and wash.\n//   sm      — the exclusive mode cards (pricing model): tighter, the icon\n//             tile itself turns amber, the border gets an amber ring; on a\n//             phone each lies as a row, from `sm` up as a column.\n// A toggle button (aria-pressed): pressing picks or unpicks it. For a set\n// where exactly one is picked, have onClick select it and leave it pressed.\nconst choiceCardVariants = cva(\n  \"group/choice-card flex border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-70\",\n  {\n    variants: {\n      size: {\n        default: \"flex-col gap-3 rounded-[12px] p-4\",\n        sm: \"flex-row items-start gap-3 rounded-[10px] p-3.5 sm:flex-col sm:gap-2\",\n      },\n      selected: { true: \"\", false: \"\" },\n    },\n    compoundVariants: [\n      { size: \"default\", selected: true, className: \"border-amber-500 bg-amber-500/[0.06]\" },\n      {\n        size: \"default\",\n        selected: false,\n        className:\n          \"border-foreground/[0.08] bg-foreground/[0.02] hover:border-foreground/20 hover:bg-foreground/[0.04]\",\n      },\n      {\n        size: \"sm\",\n        selected: true,\n        className: \"border-amber-500/70 bg-amber-500/[0.08] ring-1 ring-amber-500/70\",\n      },\n      {\n        size: \"sm\",\n        selected: false,\n        className: \"border-foreground/[0.08] bg-foreground/[0.02] pointer-fine:hover:border-foreground/20\",\n      },\n    ],\n    defaultVariants: { size: \"default\", selected: false },\n  }\n)\n\nfunction ChoiceCard({\n  title,\n  description,\n  meta,\n  icon,\n  selected,\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"button\">, \"title\"> & {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** A line under the title (an id, a trigger), in mono. */\n  meta?: React.ReactNode\n  /** The tile's content: an icon, or an initial. */\n  icon?: React.ReactNode\n  selected: boolean\n  size?: \"default\" | \"sm\"\n}) {\n  if (size === \"sm\") {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"choice-card\"\n        data-size={size}\n        aria-pressed={selected}\n        className={cn(choiceCardVariants({ size, selected }), className)}\n        {...props}\n      >\n        {icon && (\n          <span\n            className={cn(\n              \"flex size-7 shrink-0 items-center justify-center rounded-[7px] [&_svg:not([class*='size-'])]:size-4\",\n              selected\n                ? \"bg-amber-500 text-black\"\n                : \"bg-foreground/[0.07] text-muted-foreground\"\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <span className=\"flex min-w-0 flex-col gap-1 sm:contents\">\n          <span\n            className={cn(\n              \"text-[14px] font-medium sm:text-[13px]\",\n              selected ? \"text-foreground\" : \"text-foreground/85\"\n            )}\n          >\n            {title}\n          </span>\n          {description && (\n            <span className=\"text-[12.5px] leading-[1.4] text-muted-foreground sm:text-[12px]\">\n              {description}\n            </span>\n          )}\n          {children}\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"choice-card\"\n      data-size={size}\n      aria-pressed={selected}\n      className={cn(choiceCardVariants({ size, selected }), className)}\n      {...props}\n    >\n      <span className=\"flex w-full items-start gap-3\">\n        {icon && (\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-[9px] border border-foreground/10 bg-foreground/[0.04] text-[13px] font-semibold text-foreground [&_svg:not([class*='size-'])]:size-4\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-[14px] font-semibold text-foreground\">\n            {title}\n          </span>\n          {meta && (\n            <span className=\"mt-0.5 block truncate font-mono text-[11px] text-muted-foreground/70\">\n              {meta}\n            </span>\n          )}\n        </span>\n        <span\n          aria-hidden={true}\n          className={cn(\n            \"flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors\",\n            selected\n              ? \"border-amber-500 bg-amber-500 text-black\"\n              : \"border-foreground/20 text-transparent\"\n          )}\n        >\n          <CheckIcon className=\"size-3\" strokeWidth={3} />\n        </span>\n      </span>\n      {description && (\n        <span className=\"line-clamp-2 text-[12.5px] leading-relaxed text-muted-foreground\">\n          {description}\n        </span>\n      )}\n      {children}\n    </button>\n  )\n}\n\nexport { ChoiceCard, choiceCardVariants }\n"]}

package/dist/chunk-2UHRDVPT.cjs

@@ -0,0 +1,183 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var React = require('react');
+var radixUi = require('radix-ui');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var SidebarContext = React__namespace.createContext({ collapsed: false });
+function useSidebar() {
+  return React__namespace.useContext(SidebarContext);
+}
+function Sidebar({
+  pinned: pinnedProp,
+  onPinnedChange,
+  className,
+  children,
+  ...props
+}) {
+  const [ownPinned, setOwnPinned] = React__namespace.useState(true);
+  const pinned = pinnedProp ?? ownPinned;
+  const [hoverOpen, setHoverOpen] = React__namespace.useState(false);
+  const collapsed = !pinned && !hoverOpen;
+  const context = React__namespace.useMemo(() => ({ collapsed }), [collapsed]);
+  function togglePinned() {
+    if (pinned) setHoverOpen(false);
+    setOwnPinned(!pinned);
+    onPinnedChange?.(!pinned);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      "data-slot": "sidebar",
+      "data-collapsed": collapsed ? "" : void 0,
+      onMouseEnter: () => setHoverOpen(true),
+      onMouseLeave: () => setHoverOpen(false),
+      className: chunk6YHDDRIM_cjs.cn(
+        "hidden h-full w-[295px] shrink-0 flex-col overflow-hidden border-r border-line bg-surface transition-[width] duration-200 ease-out data-collapsed:w-[50px] md:flex",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: togglePinned,
+            "aria-label": pinned ? "Collapse sidebar" : "Expand sidebar",
+            className: "flex w-full shrink-0 cursor-pointer items-center justify-center border-t border-line py-2.5 text-faint transition-colors hover:text-foreground",
+            children: pinned ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4", strokeWidth: 1.75 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4", strokeWidth: 1.75 })
+          }
+        )
+      ]
+    }
+  ) });
+}
+function SidebarBrand({
+  title,
+  subtitle,
+  imageSrc = "/login.svg",
+  link,
+  className,
+  children,
+  ...props
+}) {
+  const { collapsed } = useSidebar();
+  const Comp = link ? radixUi.Slot.Root : "div";
+  return (
+    // With a cursor the brand and its children share one line; on touch the
+    // children get a row of their own.
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "sidebar-brand",
+        className: chunk6YHDDRIM_cjs.cn(
+          "flex shrink-0 flex-col gap-3 pt-5 pb-3 pointer-fine:flex-row pointer-fine:items-start pointer-fine:gap-2",
+          collapsed ? "px-1.5" : "px-4",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Comp,
+            {
+              className: chunk6YHDDRIM_cjs.cn(
+                "flex min-w-0 items-center gap-2.5 text-foreground no-underline pointer-coarse:pe-12",
+                collapsed && "flex-1 justify-center gap-0"
+              ),
+              children: [
+                link && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Slot.Slottable, { children: link }),
+                /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageSrc, alt: title, className: "size-9 shrink-0 rounded-full" }),
+                !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 whitespace-nowrap", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[15px] leading-tight font-semibold", children: title }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: subtitle })
+                ] })
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    )
+  );
+}
+function SidebarUserBar({
+  avatar,
+  name,
+  className,
+  children,
+  ...props
+}) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-user-bar",
+      className: chunk6YHDDRIM_cjs.cn(
+        "flex shrink-0 items-center gap-2.5 border-t border-line pt-3 pb-1 pointer-coarse:gap-1.5 pointer-coarse:pt-2 pointer-coarse:pb-0",
+        // The left-weighted padding lines the avatar up with the rows above.
+        collapsed ? "justify-center gap-0 px-1.5" : "pl-2 pr-1.5",
+        className
+      ),
+      ...props,
+      children: [
+        avatar,
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-foreground pointer-coarse:text-[14px]", children: name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children })
+        ] })
+      ]
+    }
+  );
+}
+function SidebarAction({
+  label,
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? radixUi.Slot.Root : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-action",
+      "aria-label": label,
+      ...asChild ? {} : { type: "button" },
+      className: chunk6YHDDRIM_cjs.cn(
+        "inline-flex cursor-pointer items-center justify-center rounded p-1 text-muted-foreground hover:bg-input hover:text-foreground pointer-coarse:size-11 pointer-coarse:rounded-xl pointer-coarse:p-0 pointer-coarse:active:bg-input [&_svg:not([class*='size-'])]:size-[18px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Sidebar = Sidebar;
+exports.SidebarAction = SidebarAction;
+exports.SidebarBrand = SidebarBrand;
+exports.SidebarUserBar = SidebarUserBar;
+exports.useSidebar = useSidebar;
+//# sourceMappingURL=chunk-2UHRDVPT.cjs.map
+//# sourceMappingURL=chunk-2UHRDVPT.cjs.map

package/dist/chunk-2UHRDVPT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sidebar.tsx"],"names":["React","jsx","jsxs","cn","ChevronLeft","ChevronRight","Slot","Fragment"],"mappings":"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","file":"chunk-2UHRDVPT.cjs","sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nconst SidebarContext = React.createContext({ collapsed: false })\n\n/**\n * Whether the enclosing rail is collapsed to its icons. Outside a `Sidebar`\n * (a phone drawer, a page) nothing is collapsed, so the same parts draw open\n * there.\n */\nfunction useSidebar() {\n  return React.useContext(SidebarContext)\n}\n\ntype SidebarProps = Omit<\n  React.ComponentProps<\"aside\">,\n  \"onMouseEnter\" | \"onMouseLeave\"\n> & {\n  /** Pinned, the sidebar stays open; unpinned, it is an icon rail that opens\n   *  while the pointer is over it. Kept here when not passed. */\n  pinned?: boolean\n  onPinnedChange?: (pinned: boolean) => void\n}\n\n/**\n * The ops console's desktop sidebar: 295px open, a 50px icon rail collapsed,\n * with the pin toggle along its bottom. Hidden below `md`, where navigation\n * belongs in a drawer: render the same parts there, outside a `Sidebar`.\n * `ListRow` and `SectionLabel` inside it shrink to their icon and rule.\n */\nfunction Sidebar({\n  pinned: pinnedProp,\n  onPinnedChange,\n  className,\n  children,\n  ...props\n}: SidebarProps) {\n  const [ownPinned, setOwnPinned] = React.useState(true)\n  const pinned = pinnedProp ?? ownPinned\n  const [hoverOpen, setHoverOpen] = React.useState(false)\n  const collapsed = !pinned && !hoverOpen\n  const context = React.useMemo(() => ({ collapsed }), [collapsed])\n\n  function togglePinned() {\n    // The toggle is under the pointer: unpinning closes the rail now rather\n    // than leaving it hover-open until the pointer leaves.\n    if (pinned) setHoverOpen(false)\n    setOwnPinned(!pinned)\n    onPinnedChange?.(!pinned)\n  }\n\n  return (\n    <SidebarContext.Provider value={context}>\n      <aside\n        data-slot=\"sidebar\"\n        data-collapsed={collapsed ? \"\" : undefined}\n        onMouseEnter={() => setHoverOpen(true)}\n        onMouseLeave={() => setHoverOpen(false)}\n        className={cn(\n          \"hidden h-full w-[295px] shrink-0 flex-col overflow-hidden border-r border-line bg-surface transition-[width] duration-200 ease-out data-collapsed:w-[50px] md:flex\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex min-h-0 flex-1 flex-col\">{children}</div>\n        <button\n          type=\"button\"\n          onClick={togglePinned}\n          aria-label={pinned ? \"Collapse sidebar\" : \"Expand sidebar\"}\n          className=\"flex w-full shrink-0 cursor-pointer items-center justify-center border-t border-line py-2.5 text-faint transition-colors hover:text-foreground\"\n        >\n          {pinned ? (\n            <ChevronLeft className=\"size-4\" strokeWidth={1.75} />\n          ) : (\n            <ChevronRight className=\"size-4\" strokeWidth={1.75} />\n          )}\n        </button>\n      </aside>\n    </SidebarContext.Provider>\n  )\n}\n\ntype SidebarBrandProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  title: string\n  subtitle?: React.ReactNode\n  imageSrc?: string\n  /** What the mark and title link through (a router `Link`); they are placed\n   *  inside it. */\n  link?: React.ReactElement\n}\n\n/**\n * The sidebar's brand strip: the mark, a title and a muted subtitle; in the\n * rail the mark alone, centred. Children (a mode switch) follow it.\n */\nfunction SidebarBrand({\n  title,\n  subtitle,\n  imageSrc = \"/login.svg\",\n  link,\n  className,\n  children,\n  ...props\n}: SidebarBrandProps) {\n  const { collapsed } = useSidebar()\n  const Comp = link ? Slot.Root : \"div\"\n\n  return (\n    // With a cursor the brand and its children share one line; on touch the\n    // children get a row of their own.\n    <div\n      data-slot=\"sidebar-brand\"\n      className={cn(\n        \"flex shrink-0 flex-col gap-3 pt-5 pb-3 pointer-fine:flex-row pointer-fine:items-start pointer-fine:gap-2\",\n        collapsed ? \"px-1.5\" : \"px-4\",\n        className\n      )}\n      {...props}\n    >\n      {/* A drawer's close button floats over the end of this line; the\n          inset keeps the title clear of it. */}\n      <Comp\n        className={cn(\n          \"flex min-w-0 items-center gap-2.5 text-foreground no-underline pointer-coarse:pe-12\",\n          collapsed && \"flex-1 justify-center gap-0\"\n        )}\n      >\n        {link && <Slot.Slottable>{link}</Slot.Slottable>}\n        <img src={imageSrc} alt={title} className=\"size-9 shrink-0 rounded-full\" />\n        {!collapsed && (\n          <div className=\"min-w-0 whitespace-nowrap\">\n            <div className=\"text-[15px] leading-tight font-semibold\">{title}</div>\n            {subtitle && <div className=\"text-xs text-muted-foreground\">{subtitle}</div>}\n          </div>\n        )}\n      </Comp>\n      {children}\n    </div>\n  )\n}\n\ntype SidebarUserBarProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  avatar: React.ReactNode\n  name: React.ReactNode\n  /** The bar's `SidebarAction`s: theme, settings, sign out. */\n  children?: React.ReactNode\n}\n\n/**\n * The sidebar's bottom bar: the user's avatar and name, then the global\n * controls. In the rail the avatar alone.\n */\nfunction SidebarUserBar({\n  avatar,\n  name,\n  className,\n  children,\n  ...props\n}: SidebarUserBarProps) {\n  const { collapsed } = useSidebar()\n\n  return (\n    <div\n      data-slot=\"sidebar-user-bar\"\n      className={cn(\n        \"flex shrink-0 items-center gap-2.5 border-t border-line pt-3 pb-1 pointer-coarse:gap-1.5 pointer-coarse:pt-2 pointer-coarse:pb-0\",\n        // The left-weighted padding lines the avatar up with the rows above.\n        collapsed ? \"justify-center gap-0 px-1.5\" : \"pl-2 pr-1.5\",\n        className\n      )}\n      {...props}\n    >\n      {avatar}\n      {!collapsed && (\n        <>\n          <span className=\"min-w-0 flex-1 truncate text-[13px] text-foreground pointer-coarse:text-[14px]\">\n            {name}\n          </span>\n          <div className=\"flex items-center gap-1.5\">{children}</div>\n        </>\n      )}\n    </div>\n  )\n}\n\n/**\n * An icon control in the user bar. 26px with a cursor, the 44px floor on\n * touch. A button, or a router link via `asChild`.\n */\nfunction SidebarAction({\n  label,\n  asChild = false,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & { label: string; asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-action\"\n      aria-label={label}\n      {...(asChild ? {} : { type: \"button\" as const })}\n      className={cn(\n        \"inline-flex cursor-pointer items-center justify-center rounded p-1 text-muted-foreground hover:bg-input hover:text-foreground pointer-coarse:size-11 pointer-coarse:rounded-xl pointer-coarse:p-0 pointer-coarse:active:bg-input [&_svg:not([class*='size-'])]:size-[18px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Sidebar, SidebarBrand, SidebarUserBar, SidebarAction, useSidebar }\n"]}