@uisatin/ui 0.0.0-stage → 0.1.1

package/chunk-AN2RNJLR.js

@@ -0,0 +1,79 @@
+import { Button } from './chunk-HNQUX43Z.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Clock, DoubleCheck, ThumbsUp, ThumbsDown, Copy, Link } from 'iconoir-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var divider = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-3 w-px shrink-0 rounded-full bg-border-default" });
+function MessageActions({
+  timestamp,
+  status = "delivered",
+  feedback: feedbackProp = null,
+  showShare = true,
+  onFeedback,
+  onCopy,
+  onShare,
+  className,
+  ...props
+}) {
+  const [feedback, setFeedback] = React.useState(feedbackProp);
+  React.useEffect(() => setFeedback(feedbackProp), [feedbackProp]);
+  const toggle = (value) => {
+    const next = feedback === value ? null : value;
+    setFeedback(next);
+    onFeedback?.(next);
+  };
+  const thumb = "aria-pressed:bg-border-input aria-pressed:[&_svg]:text-text-subtle";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-2", className), ...props, children: [
+    timestamp && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex size-6 items-center justify-center text-text-muted", children: [
+          status === "sending" ? /* @__PURE__ */ jsx(Clock, { "aria-hidden": true, className: "size-icon-size [stroke-width:1.875]" }) : /* @__PURE__ */ jsx(DoubleCheck, { "aria-hidden": true, className: "size-icon-size [stroke-width:1.875]" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: status === "sending" ? "Sending" : "Delivered" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium whitespace-nowrap text-text-muted", children: timestamp })
+      ] }),
+      divider
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "xs",
+          iconOnly: true,
+          "aria-label": "Good response",
+          "aria-pressed": feedback === "like",
+          onClick: () => toggle("like"),
+          className: thumb,
+          children: /* @__PURE__ */ jsx(ThumbsUp, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "xs",
+          iconOnly: true,
+          "aria-label": "Bad response",
+          "aria-pressed": feedback === "dislike",
+          onClick: () => toggle("dislike"),
+          className: thumb,
+          children: /* @__PURE__ */ jsx(ThumbsDown, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": "Copy", onClick: onCopy, children: /* @__PURE__ */ jsx(Copy, {}) })
+    ] }),
+    showShare && /* @__PURE__ */ jsxs(Fragment, { children: [
+      divider,
+      /* @__PURE__ */ jsxs(Button, { variant: "tertiary", size: "xs", onClick: onShare, children: [
+        /* @__PURE__ */ jsx(Link, {}),
+        "Share"
+      ] })
+    ] })
+  ] });
+}
+
+export { MessageActions };
+//# sourceMappingURL=chunk-AN2RNJLR.js.map
+//# sourceMappingURL=chunk-AN2RNJLR.js.map

package/chunk-AN2RNJLR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/message-actions.tsx"],"names":[],"mappings":"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","file":"chunk-AN2RNJLR.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Clock, Copy, DoubleCheck, Link, ThumbsDown, ThumbsUp } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\n/**\n * MessageActions, 1:1 with uiKit `_chat/answerActions` (901:20164): the row under an assistant\n * reply. Delivery status (16px icon in a 24px box) and time in text/muted medium 13, then like,\n * dislike and copy as 24px tertiary icon buttons 2px apart, then Share (tertiary xs with a\n * label). Groups sit 8px apart with 1 × 12 border/default dividers between them.\n *\n * Feedback: a clicked thumb stays pressed (border/input fill, icon text/subtle) until the other\n * one is clicked or it is clicked again; `feedback` sets it, `onFeedback` reports it.\n * The status and time show only when there is a `timestamp`.\n */\nexport type MessageFeedback = 'like' | 'dislike' | null\n\nexport interface MessageActionsProps extends React.ComponentProps<'div'> {\n  /** \"20 minutes ago\". Leave it out to drop the status and time. */\n  timestamp?: string\n  status?: 'sending' | 'delivered'\n  /** The pressed thumb. Pass it with onFeedback to control it, or once to start from it. */\n  feedback?: MessageFeedback\n  showShare?: boolean\n  onFeedback?: (value: MessageFeedback) => void\n  onCopy?: () => void\n  onShare?: () => void\n}\n\nconst divider = <span aria-hidden className=\"h-3 w-px shrink-0 rounded-full bg-border-default\" />\n\nexport function MessageActions({\n  timestamp,\n  status = 'delivered',\n  feedback: feedbackProp = null,\n  showShare = true,\n  onFeedback,\n  onCopy,\n  onShare,\n  className,\n  ...props\n}: MessageActionsProps) {\n  const [feedback, setFeedback] = React.useState<MessageFeedback>(feedbackProp)\n  React.useEffect(() => setFeedback(feedbackProp), [feedbackProp])\n\n  const toggle = (value: 'like' | 'dislike') => {\n    const next = feedback === value ? null : value\n    setFeedback(next)\n    onFeedback?.(next)\n  }\n\n  const thumb = 'aria-pressed:bg-border-input aria-pressed:[&_svg]:text-text-subtle'\n\n  return (\n    <div data-slot=\"message-actions\" className={cn('flex items-center gap-2', className)} {...props}>\n      {timestamp && (\n        <>\n          <span className=\"flex items-center gap-0.5\">\n            <span className=\"flex size-6 items-center justify-center text-text-muted\">\n              {status === 'sending' ? (\n                <Clock aria-hidden className=\"size-icon-size [stroke-width:1.875]\" />\n              ) : (\n                <DoubleCheck aria-hidden className=\"size-icon-size [stroke-width:1.875]\" />\n              )}\n              <span className=\"sr-only\">{status === 'sending' ? 'Sending' : 'Delivered'}</span>\n            </span>\n            <span className=\"text-sm font-medium whitespace-nowrap text-text-muted\">{timestamp}</span>\n          </span>\n          {divider}\n        </>\n      )}\n      <span className=\"flex items-center gap-0.5\">\n        <Button\n          variant=\"tertiary\"\n          size=\"xs\"\n          iconOnly\n          aria-label=\"Good response\"\n          aria-pressed={feedback === 'like'}\n          onClick={() => toggle('like')}\n          className={thumb}\n        >\n          <ThumbsUp />\n        </Button>\n        <Button\n          variant=\"tertiary\"\n          size=\"xs\"\n          iconOnly\n          aria-label=\"Bad response\"\n          aria-pressed={feedback === 'dislike'}\n          onClick={() => toggle('dislike')}\n          className={thumb}\n        >\n          <ThumbsDown />\n        </Button>\n        <Button variant=\"tertiary\" size=\"xs\" iconOnly aria-label=\"Copy\" onClick={onCopy}>\n          <Copy />\n        </Button>\n      </span>\n      {showShare && (\n        <>\n          {divider}\n          <Button variant=\"tertiary\" size=\"xs\" onClick={onShare}>\n            <Link />\n            Share\n          </Button>\n        </>\n      )}\n    </div>\n  )\n}\n"]}

package/chunk-B2K45IUR.js

@@ -0,0 +1,36 @@
+import { cn } from './chunk-H63FYCMY.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var dotVariants = cva(
+  "block size-2 rounded-full",
+  {
+    variants: {
+      variant: {
+        solid: "bg-tone-fg",
+        outline: "border border-tone-fg"
+      }
+    },
+    defaultVariants: { variant: "solid" }
+  }
+);
+function Dot({ className, tone = "fuchsia", variant, label, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dot",
+      "data-tone": tone,
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn("inline-flex size-4 shrink-0 items-center justify-center", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: dotVariants({ variant }) })
+    }
+  );
+}
+
+export { Dot, dotVariants };
+//# sourceMappingURL=chunk-B2K45IUR.js.map
+//# sourceMappingURL=chunk-B2K45IUR.js.map

package/chunk-B2K45IUR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dot.tsx"],"names":[],"mappings":";;;;;AAgBA,IAAM,WAAA,GAAc,GAAA;AAAA,EAClB,2BAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,YAAA;AAAA,QACP,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,OAAA;AAAQ;AAExC;AAQO,SAAS,GAAA,CAAI,EAAE,SAAA,EAAW,IAAA,GAAO,WAAW,OAAA,EAAS,KAAA,EAAO,GAAG,KAAA,EAAM,EAAa;AACvF,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,KAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,MACtB,YAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAa,QAAQ,MAAA,GAAY,IAAA;AAAA,MACjC,SAAA,EAAW,EAAA,CAAG,yDAAA,EAA2D,SAAS,CAAA;AAAA,MACjF,GAAG,KAAA;AAAA,MAEJ,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAY,EAAE,OAAA,EAAS,CAAA,EAAG;AAAA;AAAA,GAC7C;AAEJ","file":"chunk-B2K45IUR.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../lib/utils'\n\nexport type DotTone = 'fuchsia' | 'sky' | 'plum' | 'green'\n\n/**\n * Dot, 1:1 with the uiKit `Dot` set (369:6759, page dotIndicator): a 16px box with an 8px\n * indicator in the middle, in the tone's `tone/fg` colour. Solid is a filled circle; outline\n * is the same 8px circle drawn with a 1px stroke inside it, nothing in the middle.\n *\n * With a `label` the dot is an image with that name; without one it is decorative and hidden\n * from assistive tech (pair it with visible text, as the docs ask).\n */\nconst dotVariants = cva(\n  'block size-2 rounded-full',\n  {\n    variants: {\n      variant: {\n        solid: 'bg-tone-fg',\n        outline: 'border border-tone-fg',\n      },\n    },\n    defaultVariants: { variant: 'solid' },\n  },\n)\n\nexport interface DotProps extends Omit<React.ComponentProps<'span'>, 'children'>, VariantProps<typeof dotVariants> {\n  tone?: DotTone\n  /** Accessible name, e.g. \"Running\". Leave it out when visible text already says it. */\n  label?: string\n}\n\nexport function Dot({ className, tone = 'fuchsia', variant, label, ...props }: DotProps) {\n  return (\n    <span\n      data-slot=\"dot\"\n      data-tone={tone}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      className={cn('inline-flex size-4 shrink-0 items-center justify-center', className)}\n      {...props}\n    >\n      <span className={dotVariants({ variant })} />\n    </span>\n  )\n}\n\nexport { dotVariants }\n"]}

package/chunk-B6V4VSGH.js

@@ -0,0 +1,82 @@
+import { KbdGroup } from './chunk-BKZBWPUH.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Tooltip as Tooltip$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TooltipBubble({
+  label,
+  shortcut,
+  shape = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "tooltip",
+      className: cn(
+        "flex items-center gap-2 bg-text-default py-1 pl-2.5 text-sm leading-(--text-sm--line-height) font-medium whitespace-nowrap text-bg-canvas",
+        "[box-shadow:0_8px_12px_0_var(--effect-shadow-md),0_1px_1.5px_0_var(--effect-shadow-ambient),inset_0_1px_0_0_var(--effect-highlight-top)]",
+        shape === "rounded" ? "rounded-pill" : "rounded-lg",
+        shortcut ? "pr-1.5" : "pr-2.5",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        shortcut && /* @__PURE__ */ jsx(KbdGroup, { keys: shortcut, tone: "inverse" })
+      ]
+    }
+  );
+}
+function Tooltip({
+  label,
+  shortcut,
+  shape = "default",
+  side = "top",
+  delay = 300,
+  closeDelay = 0,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  container,
+  className
+}) {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const open = openProp ?? inner;
+  const timer = React.useRef(void 0);
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  const change = (next) => {
+    clearTimeout(timer.current);
+    const apply = () => {
+      setInner(next);
+      onOpenChange?.(next);
+    };
+    if (!next && closeDelay > 0) timer.current = setTimeout(apply, closeDelay);
+    else apply();
+  };
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs(Tooltip$1.Root, { open, onOpenChange: change, children: [
+    /* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(Tooltip$1.Portal, { container, children: /* @__PURE__ */ jsx(
+      Tooltip$1.Content,
+      {
+        side,
+        sideOffset: 8,
+        collisionPadding: 8,
+        className: cn(
+          "z-50 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out)",
+          "starting:opacity-0",
+          "data-[side=top]:starting:translate-y-1 data-[side=bottom]:starting:-translate-y-1",
+          "data-[side=left]:starting:translate-x-1 data-[side=right]:starting:-translate-x-1"
+        ),
+        children: /* @__PURE__ */ jsx(TooltipBubble, { label, shortcut, shape, className })
+      }
+    ) })
+  ] }) });
+}
+
+export { Tooltip, TooltipBubble };
+//# sourceMappingURL=chunk-B6V4VSGH.js.map
+//# sourceMappingURL=chunk-B6V4VSGH.js.map

package/chunk-B6V4VSGH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tooltip.tsx"],"names":["TooltipPrimitive"],"mappings":";;;;;;AAyCO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmG;AACjG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,SAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,2IAAA;AAAA,QACA,0IAAA;AAAA,QACA,KAAA,KAAU,YAAY,cAAA,GAAiB,YAAA;AAAA,QACvC,WAAW,QAAA,GAAW,QAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACZ,4BAAY,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAM,QAAA,EAAU,MAAK,SAAA,EAAU;AAAA;AAAA;AAAA,GACxD;AAEJ;AAEO,SAAS,OAAA,CAAQ;AAAA,EACtB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,KAAA;AAAA,EACP,KAAA,GAAQ,GAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,QAAA;AAAA,EACA,IAAA,EAAM,QAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAiB;AAEf,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAU,eAAS,WAAW,CAAA;AACpD,EAAA,MAAM,OAAO,QAAA,IAAY,KAAA;AACzB,EAAA,MAAM,KAAA,GAAc,aAAsC,MAAS,CAAA;AACnE,EAAM,KAAA,CAAA,SAAA,CAAU,MAAM,MAAM,YAAA,CAAa,MAAM,OAAO,CAAA,EAAG,EAAE,CAAA;AAC3D,EAAA,MAAM,MAAA,GAAS,CAAC,IAAA,KAAkB;AAChC,IAAA,YAAA,CAAa,MAAM,OAAO,CAAA;AAC1B,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,QAAA,CAAS,IAAI,CAAA;AACb,MAAA,YAAA,GAAe,IAAI,CAAA;AAAA,IACrB,CAAA;AACA,IAAA,IAAI,CAAC,QAAQ,UAAA,GAAa,CAAA,QAAS,OAAA,GAAU,UAAA,CAAW,OAAO,UAAU,CAAA;AAAA,SACpE,KAAA,EAAM;AAAA,EACb,CAAA;AACA,EAAA,uBACE,GAAA,CAACA,SAAA,CAAiB,QAAA,EAAjB,EAA0B,aAAA,EAAe,KAAA,EACxC,QAAA,kBAAA,IAAA,CAACA,SAAA,CAAiB,IAAA,EAAjB,EAAsB,IAAA,EAAY,YAAA,EAAc,MAAA,EAC/C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAACA,SAAA,CAAiB,OAAA,EAAjB,EAAyB,OAAA,EAAO,MAAE,QAAA,EAAS,CAAA;AAAA,oBAC5C,GAAA,CAACA,SAAA,CAAiB,MAAA,EAAjB,EAAwB,SAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,MAACA,SAAA,CAAiB,OAAA;AAAA,MAAjB;AAAA,QACC,IAAA;AAAA,QACA,UAAA,EAAY,CAAA;AAAA,QACZ,gBAAA,EAAkB,CAAA;AAAA,QAClB,SAAA,EAAW,EAAA;AAAA,UACT,kFAAA;AAAA,UACA,oBAAA;AAAA,UACA,mFAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAc,QAAA,EAAoB,OAAc,SAAA,EAAsB;AAAA;AAAA,KACvF,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ","file":"chunk-B6V4VSGH.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Tooltip as TooltipPrimitive } from 'radix-ui'\nimport { cn } from '../lib/utils'\nimport { KbdGroup } from './kbd'\n\n/**\n * Tooltip, 1:1 with the uiKit `tooltip/shortcut` set (3306:17555): an inverse pill\n * (text/default fill, bg/canvas text, medium 13/19.5) with the action name and optional\n * keys: a KbdGroup of sm keys in the inverse tone, so they read on the dark pill in Light and\n * the light one in Dark. Padding 4 / 6 / 4 / 10, 8px between\n * label and keys. Shape default is radius-lg; rounded is a pill. Shadow md (0 8 12 shadow-md, 0 1 1.5 shadow-ambient) and the\n * 1px top highlight. Without a shortcut the right padding matches the left (10).\n *\n * Built on the Radix tooltip: it opens on hover after `delay` and at once on keyboard focus,\n * waits `closeDelay` after the pointer leaves before closing, closes on Escape, and links itself to the trigger with aria-describedby. It sits 8px from\n * the trigger and fades in from 4px towards it (`@starting-style`, ease-out, 150 ms).\n */\n\nexport interface TooltipProps {\n  /** The action, in one or two words. */\n  label: React.ReactNode\n  /** Keys that run the action, e.g. \"⌘K\" or \"⌃⇧V\". */\n  shortcut?: string\n  shape?: 'default' | 'rounded'\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Hover delay in ms before it opens. */\n  delay?: number\n  /** How long it stays after the pointer leaves, in ms, so a quick slip off the trigger doesn't flicker it. */\n  closeDelay?: number\n  /** The trigger. It must be focusable (a button, a link). */\n  children: React.ReactNode\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Portal target. Defaults to `document.body`. */\n  container?: HTMLElement | null\n  className?: string\n}\n\nexport function TooltipBubble({\n  label,\n  shortcut,\n  shape = 'default',\n  className,\n  ...props\n}: Pick<TooltipProps, 'label' | 'shortcut' | 'shape' | 'className'> & React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"tooltip\"\n      className={cn(\n        'flex items-center gap-2 bg-text-default py-1 pl-2.5 text-sm leading-(--text-sm--line-height) font-medium whitespace-nowrap text-bg-canvas',\n        '[box-shadow:0_8px_12px_0_var(--effect-shadow-md),0_1px_1.5px_0_var(--effect-shadow-ambient),inset_0_1px_0_0_var(--effect-highlight-top)]',\n        shape === 'rounded' ? 'rounded-pill' : 'rounded-lg',\n        shortcut ? 'pr-1.5' : 'pr-2.5',\n        className,\n      )}\n      {...props}\n    >\n      <span>{label}</span>\n      {shortcut && <KbdGroup keys={shortcut} tone=\"inverse\" />}\n    </div>\n  )\n}\n\nexport function Tooltip({\n  label,\n  shortcut,\n  shape = 'default',\n  side = 'top',\n  delay = 300,\n  closeDelay = 0,\n  children,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  container,\n  className,\n}: TooltipProps) {\n  // Open state lives here so closing can wait `closeDelay`; opening again cancels the wait.\n  const [inner, setInner] = React.useState(defaultOpen)\n  const open = openProp ?? inner\n  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined)\n  React.useEffect(() => () => clearTimeout(timer.current), [])\n  const change = (next: boolean) => {\n    clearTimeout(timer.current)\n    const apply = () => {\n      setInner(next)\n      onOpenChange?.(next)\n    }\n    if (!next && closeDelay > 0) timer.current = setTimeout(apply, closeDelay)\n    else apply()\n  }\n  return (\n    <TooltipPrimitive.Provider delayDuration={delay}>\n      <TooltipPrimitive.Root open={open} onOpenChange={change}>\n        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            side={side}\n            sideOffset={8}\n            collisionPadding={8}\n            className={cn(\n              'z-50 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out)',\n              'starting:opacity-0',\n              'data-[side=top]:starting:translate-y-1 data-[side=bottom]:starting:-translate-y-1',\n              'data-[side=left]:starting:translate-x-1 data-[side=right]:starting:-translate-x-1',\n            )}\n          >\n            <TooltipBubble label={label} shortcut={shortcut} shape={shape} className={className} />\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  )\n}\n"]}

package/chunk-BKZBWPUH.js

@@ -0,0 +1,59 @@
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var isSingle = (children) => typeof children === "string" ? [...children.trim()].length === 1 : React.isValidElement(children);
+function Kbd({ size = "sm", tone = "default", className, children, ...props }) {
+  const square = isSingle(children);
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      "data-slot": "kbd",
+      "data-square": square || void 0,
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-sm border-[0.75px] font-sans text-2xs leading-none font-medium tracking-normal whitespace-nowrap",
+        size === "sm" ? "h-[18px] min-w-[18px]" : "h-5 min-w-5",
+        // A single key is exactly square with nothing on the sides, so the glyph sits in the middle.
+        square ? size === "sm" ? "w-[18px] px-0" : "w-5 px-0" : size === "sm" ? "px-1" : "px-1.5",
+        tone === "default" ? "border-border-default bg-component-kbd-bg text-text-muted" : "border-action-inverse-border bg-action-inverse-bg-hover text-bg-canvas/72 dark:border-action-inverse-bg-pressed dark:bg-text-default",
+        // Glyph icons (arrows, return) take the key's colour at 10px.
+        "[&>svg]:size-2.5 [&>svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function keysOf(shortcut) {
+  if (/[\s+]/.test(shortcut.trim())) return shortcut.split(/[\s+]+/).filter(Boolean);
+  const keys = [];
+  let rest = "";
+  for (const ch of shortcut) {
+    if ("\u2318\u2303\u21E7\u2325".includes(ch)) keys.push(ch);
+    else rest += ch;
+  }
+  if (rest.trim()) keys.push(rest.trim());
+  return keys;
+}
+function KbdGroup({ keys, size, tone, className, ...props }) {
+  const list = typeof keys === "string" ? keysOf(keys) : keys;
+  return /* @__PURE__ */ jsx("span", { "data-slot": "kbd-group", className: cn("inline-flex shrink-0 items-center gap-0.5", className), ...props, children: list.map((k, i) => /* @__PURE__ */ jsx(Kbd, { size, tone, children: k }, i)) });
+}
+var glyph = { viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 0.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
+var KbdArrowUp = () => /* @__PURE__ */ jsx("svg", { ...glyph, children: /* @__PURE__ */ jsx("path", { d: "M5.00018 8.17963L5.00018 1.82037M8.00316 4.82335L5.00018 1.82037L1.9972 4.82335" }) });
+var KbdArrowDown = () => /* @__PURE__ */ jsx("svg", { ...glyph, children: /* @__PURE__ */ jsx("path", { d: "M4.99982 1.82037L4.99982 8.17963M1.99684 5.17665L4.99982 8.17963L8.0028 5.17665" }) });
+var KbdReturn = () => /* @__PURE__ */ jsxs("svg", { ...glyph, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4.27083 8.02083L2.8125 6.5625L4.27083 5.10417" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.8125 6.5625H5.3125C6.23296 6.5625 6.97917 5.81629 6.97917 4.89583V1.97917" })
+] });
+function KbdHint({ keys, label, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "kbd-hint", className: cn("flex items-center gap-1.5", className), ...props, children: [
+    /* @__PURE__ */ jsx(KbdGroup, { keys }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 tracking-normal whitespace-nowrap text-text-muted", children: label })
+  ] });
+}
+
+export { Kbd, KbdArrowDown, KbdArrowUp, KbdGroup, KbdHint, KbdReturn, keysOf };
+//# sourceMappingURL=chunk-BKZBWPUH.js.map
+//# sourceMappingURL=chunk-BKZBWPUH.js.map

package/chunk-BKZBWPUH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/kbd.tsx"],"names":[],"mappings":"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","file":"chunk-BKZBWPUH.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\n\n/**\n * Kbd, 1:1 with the uiKit `Kbd` set (4021:3415): one keyboard key. sm is 18px high with 4px\n * sides, md 20px with 6px; a single character or glyph makes it an exact square, radius-sm, a 0.75px border/default edge on\n * component/kbd/bg (bg/card in Light, bg/muted in Dark), the 11px medium Keycap glyph in\n * text/muted. Put keys of one shortcut 2px apart, or pass `keys` and let `KbdGroup` do it.\n *\n * `tone=\"inverse\"` is for keys on an inverse surface (a tooltip): a darker key on the dark pill\n * in Light, a lighter one on the light pill in Dark.\n */\nexport interface KbdProps extends React.ComponentProps<'kbd'> {\n  size?: 'sm' | 'md'\n  tone?: 'default' | 'inverse'\n}\n\n/** One character or one glyph icon: the key is a square. */\nconst isSingle = (children: React.ReactNode) =>\n  typeof children === 'string' ? [...children.trim()].length === 1 : React.isValidElement(children)\n\nexport function Kbd({ size = 'sm', tone = 'default', className, children, ...props }: KbdProps) {\n  const square = isSingle(children)\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      data-square={square || undefined}\n      className={cn(\n        'inline-flex shrink-0 items-center justify-center rounded-sm border-[0.75px] font-sans text-2xs leading-none font-medium tracking-normal whitespace-nowrap',\n        size === 'sm' ? 'h-[18px] min-w-[18px]' : 'h-5 min-w-5',\n        // A single key is exactly square with nothing on the sides, so the glyph sits in the middle.\n        square ? (size === 'sm' ? 'w-[18px] px-0' : 'w-5 px-0') : size === 'sm' ? 'px-1' : 'px-1.5',\n        tone === 'default'\n          ? 'border-border-default bg-component-kbd-bg text-text-muted'\n          : 'border-action-inverse-border bg-action-inverse-bg-hover text-bg-canvas/72 dark:border-action-inverse-bg-pressed dark:bg-text-default',\n        // Glyph icons (arrows, return) take the key's colour at 10px.\n        '[&>svg]:size-2.5 [&>svg]:shrink-0',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </kbd>\n  )\n}\n\n/**\n * Splits a shortcut into keys: modifier glyphs one by one, the rest as one key (\"Esc\", \"K\").\n * Spaces or \"+\" split it explicitly (\"Ctrl + K\").\n */\nexport function keysOf(shortcut: string) {\n  if (/[\\s+]/.test(shortcut.trim())) return shortcut.split(/[\\s+]+/).filter(Boolean)\n  const keys: string[] = []\n  let rest = ''\n  for (const ch of shortcut) {\n    if ('⌘⌃⇧⌥'.includes(ch)) keys.push(ch)\n    else rest += ch\n  }\n  if (rest.trim()) keys.push(rest.trim())\n  return keys\n}\n\nexport interface KbdGroupProps extends Omit<React.ComponentProps<'span'>, 'children'> {\n  /** A shortcut such as \"⌘K\" or \"⌃⇧V\", split into keys, or the keys themselves. */\n  keys: string | React.ReactNode[]\n  size?: KbdProps['size']\n  tone?: KbdProps['tone']\n}\n\n/** The keys of one shortcut, 2px apart. */\nexport function KbdGroup({ keys, size, tone, className, ...props }: KbdGroupProps) {\n  const list = typeof keys === 'string' ? keysOf(keys) : keys\n  return (\n    <span data-slot=\"kbd-group\" className={cn('inline-flex shrink-0 items-center gap-0.5', className)} {...props}>\n      {list.map((k, i) => (\n        <Kbd key={i} size={size} tone={tone}>\n          {k}\n        </Kbd>\n      ))}\n    </span>\n  )\n}\n\n/* ---------- glyphs for keys that have no character ---------- */\n\nconst glyph = { viewBox: '0 0 10 10', fill: 'none', stroke: 'currentColor', strokeWidth: 0.75, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true } as const\n\nexport const KbdArrowUp = () => (\n  <svg {...glyph}>\n    <path d=\"M5.00018 8.17963L5.00018 1.82037M8.00316 4.82335L5.00018 1.82037L1.9972 4.82335\" />\n  </svg>\n)\nexport const KbdArrowDown = () => (\n  <svg {...glyph}>\n    <path d=\"M4.99982 1.82037L4.99982 8.17963M1.99684 5.17665L4.99982 8.17963L8.0028 5.17665\" />\n  </svg>\n)\nexport const KbdReturn = () => (\n  <svg {...glyph}>\n    <path d=\"M4.27083 8.02083L2.8125 6.5625L4.27083 5.10417\" />\n    <path d=\"M2.8125 6.5625H5.3125C6.23296 6.5625 6.97917 5.81629 6.97917 4.89583V1.97917\" />\n  </svg>\n)\n\nexport interface KbdHintProps extends Omit<React.ComponentProps<'span'>, 'children'> {\n  keys: React.ReactNode[]\n  label: React.ReactNode\n}\n\n/** A key hint for a menu footer: keys, then what they do in 12px text/muted, 6px apart. */\nexport function KbdHint({ keys, label, className, ...props }: KbdHintProps) {\n  return (\n    <span data-slot=\"kbd-hint\" className={cn('flex items-center gap-1.5', className)} {...props}>\n      <KbdGroup keys={keys} />\n      <span className=\"text-xs leading-4 tracking-normal whitespace-nowrap text-text-muted\">{label}</span>\n    </span>\n  )\n}\n"]}

package/chunk-BNTPPZCK.js

@@ -0,0 +1,220 @@
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Slot, Tooltip, Collapsible } from 'radix-ui';
+import { NavArrowRight } from 'iconoir-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var rowFocus = "outline-none satin-focus:[box-shadow:inset_0_0_0_1px_var(--border-focus)]";
+function Sidebar({ className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", { "data-slot": "sidebar", className: cn("flex flex-col gap-0.5", className), ...props });
+}
+function SidebarItem({
+  className,
+  label,
+  icon,
+  active = false,
+  count,
+  iconOnly = false,
+  disabled = false,
+  asChild = false,
+  href,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+  const showCount = typeof count === "number" && count > 0;
+  const row = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-item",
+      "data-active": active || void 0,
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
+      "aria-label": iconOnly ? showCount ? `${label}, ${count}` : label : void 0,
+      href: disabled ? void 0 : href,
+      tabIndex: disabled ? -1 : void 0,
+      className: cn(
+        "flex h-8 shrink-0 items-center gap-2 rounded-lg px-2 text-sm leading-4 font-medium tracking-normal text-text-muted no-underline select-none",
+        "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+        "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
+        "not-data-active:satin-hover:bg-bg-muted",
+        rowFocus,
+        "data-active:bg-border-input data-active:text-text-default",
+        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        iconOnly && "relative size-8 justify-center px-0",
+        className
+      ),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        !iconOnly && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        showCount && !iconOnly && /* @__PURE__ */ jsx(SidebarCount, { count }),
+        showCount && iconOnly && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute top-1 right-1 size-1.5 rounded-full bg-action-destructive-bg" })
+      ] })
+    }
+  );
+  if (!iconOnly) return row;
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: row }),
+    /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(
+      Tooltip.Content,
+      {
+        side: "right",
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: "z-50 rounded-md bg-action-inverse-bg px-2 py-1 text-xs font-medium text-text-on-inverse [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        children: label
+      }
+    ) })
+  ] }) });
+}
+function SidebarCount({ count }) {
+  return (
+    // 11/12 has no type token in the kit; Figma uses it raw for this counter.
+    /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 min-w-[18px] shrink-0 items-center justify-center rounded-xs bg-action-destructive-bg px-1 text-[11px] leading-3 font-medium tracking-normal text-text-on-solid tabular-nums", children: count > 99 ? "99+" : count })
+  );
+}
+function SidebarGroup({
+  className,
+  label,
+  icon,
+  count,
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  children,
+  triggerProps,
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const regionId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    Collapsible.Root,
+    {
+      "data-slot": "sidebar-group",
+      open,
+      onOpenChange: (next) => {
+        if (openProp == null) setUncontrolled(next);
+        onOpenChange?.(next);
+      },
+      className: cn("group/sidebar-group flex flex-col gap-0.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Collapsible.Trigger,
+          {
+            "aria-controls": regionId,
+            ...triggerProps,
+            className: cn(
+              "flex h-8 w-full shrink-0 items-center gap-2 rounded-lg px-3 text-left text-text-muted",
+              "transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+              "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
+              "not-data-active:satin-hover:bg-bg-muted",
+              rowFocus,
+              triggerProps?.className
+            ),
+            children: [
+              icon,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm leading-4 font-medium tracking-normal text-text-default", children: label }),
+              typeof count === "number" && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 text-sm leading-4 font-medium tracking-normal text-tone-fg tabular-nums", children: count }),
+              /* @__PURE__ */ jsx(
+                NavArrowRight,
+                {
+                  "aria-hidden": true,
+                  className: "transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[state=open]/sidebar-group:rotate-90 motion-reduce:transition-none"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children }) })
+      ]
+    }
+  );
+}
+function SidebarSubItem({
+  className,
+  label,
+  active = false,
+  disabled = false,
+  asChild = false,
+  href,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-sub-item",
+      "data-active": active || void 0,
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
+      href: disabled ? void 0 : href,
+      tabIndex: disabled ? -1 : void 0,
+      className: cn(
+        "flex h-8 shrink-0 items-center rounded-lg pr-3 pl-[34px] text-sm font-normal text-text-muted no-underline select-none",
+        "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+        "not-data-active:satin-hover:bg-bg-muted not-data-active:satin-hover:text-text-default",
+        rowFocus,
+        "data-active:bg-bg-selected data-active:text-text-default",
+        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label })
+    }
+  );
+}
+function SidebarSubGroup({
+  className,
+  label,
+  children,
+  active = false,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? active);
+  const open = openProp ?? uncontrolled;
+  const regionId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-sub-group", "data-state": open ? "open" : "closed", className: cn("group/sub-group flex flex-col gap-0.5", className), ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": regionId,
+        "data-active": active || void 0,
+        onClick: () => {
+          if (openProp == null) setUncontrolled(!open);
+          onOpenChange?.(!open);
+        },
+        className: cn(
+          "flex h-8 w-full shrink-0 items-center gap-2 rounded-lg pr-3 pl-[34px] text-left text-sm font-normal text-text-muted select-none",
+          "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+          "satin-hover:bg-bg-muted satin-hover:text-text-default data-active:text-text-default",
+          "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
+          rowFocus
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+          /* @__PURE__ */ jsx(
+            NavArrowRight,
+            {
+              "aria-hidden": true,
+              className: "text-text-muted transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[state=open]/sub-group:rotate-90 motion-reduce:transition-none"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 [&>[data-slot=sidebar-sub-item]]:pl-[46px]", children }) })
+  ] });
+}
+
+export { Sidebar, SidebarGroup, SidebarItem, SidebarSubGroup, SidebarSubItem };
+//# sourceMappingURL=chunk-BNTPPZCK.js.map
+//# sourceMappingURL=chunk-BNTPPZCK.js.map

package/chunk-BNTPPZCK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sidebar.tsx"],"names":[],"mappings":";;;;;;AA6BA,IAAM,QAAA,GACJ,2EAAA;AAKK,SAAS,OAAA,CAAQ,EAAE,SAAA,EAAW,GAAG,OAAM,EAAiB;AAC7D,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,SAAA,EAAU,SAAA,EAAW,GAAG,uBAAA,EAAyB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAChG;AAiBO,SAAS,WAAA,CAAY;AAAA,EAC1B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,IAAA,GAAO,OAAA,GAAU,IAAA,CAAK,IAAA,GAAO,GAAA;AACnC,EAAA,MAAM,SAAA,GAAY,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,GAAQ,CAAA;AAEvD,EAAA,MAAM,GAAA,mBACJ,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,eAAa,MAAA,IAAU,MAAA;AAAA,MACvB,cAAA,EAAc,SAAS,MAAA,GAAS,MAAA;AAAA,MAChC,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,YAAA,EAAY,WAAY,SAAA,GAAY,CAAA,EAAG,KAAK,CAAA,EAAA,EAAK,KAAK,KAAK,KAAA,GAAS,MAAA;AAAA,MACpE,IAAA,EAAM,WAAW,MAAA,GAAY,IAAA;AAAA,MAC7B,QAAA,EAAU,WAAW,EAAA,GAAK,MAAA;AAAA,MAC1B,SAAA,EAAW,EAAA;AAAA,QACT,6IAAA;AAAA,QACA,6FAAA;AAAA,QACA,yEAAA;AAAA,QACA,yCAAA;AAAA,QACA,QAAA;AAAA,QACA,2DAAA;AAAA,QACA,4DAAA;AAAA,QACA,QAAA,IAAY,qCAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,OAAA,GACC,2BAEA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA,CAAC,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAA2B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC9D,SAAA,IAAa,CAAC,QAAA,oBAAY,GAAA,CAAC,gBAAa,KAAA,EAAc,CAAA;AAAA,QACtD,aAAa,QAAA,oBACZ,GAAA,CAAC,UAAK,aAAA,EAAW,IAAA,EAAC,WAAU,uEAAA,EAAwE;AAAA,OAAA,EAExG;AAAA;AAAA,GAEJ;AAGF,EAAA,IAAI,CAAC,UAAU,OAAO,GAAA;AACtB,EAAA,uBACE,GAAA,CAAC,QAAQ,QAAA,EAAR,EAAiB,eAAe,GAAA,EAC/B,QAAA,kBAAA,IAAA,CAAC,OAAA,CAAQ,IAAA,EAAR,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAgB,OAAA,EAAO,MAAE,QAAA,EAAA,GAAA,EAAI,CAAA;AAAA,oBAC9B,GAAA,CAAC,OAAA,CAAQ,MAAA,EAAR,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA,CAAQ,OAAA;AAAA,MAAR;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,UAAA,EAAY,CAAA;AAAA,QACZ,gBAAA,EAAkB,CAAA;AAAA,QAClB,SAAA,EAAU,0IAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA,KACH,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAGA,SAAS,YAAA,CAAa,EAAE,KAAA,EAAM,EAAsB;AAClD,EAAA;AAAA;AAAA,wBAEG,MAAA,EAAA,EAAK,SAAA,EAAU,gMACb,QAAA,EAAA,KAAA,GAAQ,EAAA,GAAK,QAAQ,KAAA,EACxB;AAAA;AAEJ;AAaO,SAAS,YAAA,CAAa;AAAA,EAC3B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA,GAAc,IAAA;AAAA,EACd,IAAA,EAAM,QAAA;AAAA,EACN,YAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsB;AAGpB,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,eAAS,WAAW,CAAA;AAClE,EAAA,MAAM,OAAO,QAAA,IAAY,YAAA;AACzB,EAAA,MAAM,WAAiB,KAAA,CAAA,KAAA,EAAM;AAC7B,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA,CAAY,IAAA;AAAA,IAAZ;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,IAAA,KAAS;AACtB,QAAA,IAAI,QAAA,IAAY,IAAA,EAAM,eAAA,CAAgB,IAAI,CAAA;AAC1C,QAAA,YAAA,GAAe,IAAI,CAAA;AAAA,MACrB,CAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA;AAAA,MACnE,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,WAAA,CAAY,OAAA;AAAA,UAAZ;AAAA,YACC,eAAA,EAAe,QAAA;AAAA,YACd,GAAG,YAAA;AAAA,YACJ,SAAA,EAAW,EAAA;AAAA,cACT,uFAAA;AAAA,cACA,uFAAA;AAAA,cACA,yEAAA;AAAA,cACA,yCAAA;AAAA,cACA,QAAA;AAAA,cACA,YAAA,EAAc;AAAA,aAChB;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,IAAA;AAAA,8BACD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yFAAA,EACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,cACC,OAAO,KAAA,KAAU,QAAA,wBACf,MAAA,EAAA,EAAK,SAAA,EAAU,kGACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,8BAEF,GAAA;AAAA,gBAAC,aAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,EAAA,EAAI,QAAA,EAAU,cAAY,IAAA,GAAO,MAAA,GAAS,QAAA,EAAU,SAAA,EAAU,gBACjE,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EAAyB,UAAS,CAAA,EACnD;AAAA;AAAA;AAAA,GACF;AAEJ;AAUO,SAAS,cAAA,CAAe;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,MAAM,IAAA,GAAO,OAAA,GAAU,IAAA,CAAK,IAAA,GAAO,GAAA;AACnC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,eAAa,MAAA,IAAU,MAAA;AAAA,MACvB,cAAA,EAAc,SAAS,MAAA,GAAS,MAAA;AAAA,MAChC,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,IAAA,EAAM,WAAW,MAAA,GAAY,IAAA;AAAA,MAC7B,QAAA,EAAU,WAAW,EAAA,GAAK,MAAA;AAAA,MAC1B,SAAA,EAAW,EAAA;AAAA,QACT,uHAAA;AAAA,QACA,6FAAA;AAAA,QACA,uFAAA;AAAA,QACA,QAAA;AAAA,QACA,0DAAA;AAAA,QACA,4DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,oBAAU,QAAA,mBAAW,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAA2B,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA,GACzE;AAEJ;AAaO,SAAS,eAAA,CAAgB;AAAA,EAC9B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,IAAA,EAAM,QAAA;AAAA,EACN,WAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,KAAA,CAAA,QAAA,CAAS,eAAe,MAAM,CAAA;AAC5E,EAAA,MAAM,OAAO,QAAA,IAAY,YAAA;AACzB,EAAA,MAAM,WAAiB,KAAA,CAAA,KAAA,EAAM;AAC7B,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,cAAY,IAAA,GAAO,MAAA,GAAS,QAAA,EAAU,SAAA,EAAW,EAAA,CAAG,uCAAA,EAAyC,SAAS,CAAA,EAAI,GAAG,KAAA,EAC9I,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,eAAA,EAAe,IAAA;AAAA,QACf,eAAA,EAAe,QAAA;AAAA,QACf,eAAa,MAAA,IAAU,MAAA;AAAA,QACvB,SAAS,MAAM;AACb,UAAA,IAAI,QAAA,IAAY,IAAA,EAAM,eAAA,CAAgB,CAAC,IAAI,CAAA;AAC3C,UAAA,YAAA,GAAe,CAAC,IAAI,CAAA;AAAA,QACtB,CAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iIAAA;AAAA,UACA,6FAAA;AAAA,UACA,qFAAA;AAAA,UACA,yEAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACjD,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAW,IAAA;AAAA,cACX,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,EAAA,EAAI,QAAA,EAAU,cAAY,IAAA,GAAO,MAAA,GAAS,QAAA,EAAU,SAAA,EAAU,gBACjE,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kEAAA,EAAoE,UAAS,CAAA,EAC9F;AAAA,GAAA,EACF,CAAA;AAEJ","file":"chunk-BNTPPZCK.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Collapsible, Slot, Tooltip } from 'radix-ui'\nimport { NavArrowRight } from 'iconoir-react'\nimport { cn } from '../lib/utils'\n\n/**\n * Sidebar, 1:1 with the uiKit sidebar sets: `sidebar/navigation` (0:3358), `sidebar/groupHeader`\n * (3468:18403) and `sidebar/subItem` (3468:18360).\n *\n * - `SidebarItem` is a 32px link row: 14px icon, medium 13/16 label in text/muted, radius-lg,\n *   8px padding. Hover fills bg/muted; the current page fills border/input and turns the label\n *   and icon text/default. `count` adds a red 16px counter; `iconOnly` is the 32 × 32 rail with\n *   the label in a tooltip.\n * - `SidebarGroup` is a collapsible group: the header row (12px padding, icon, label in\n *   text/default, a plain count, chevron right → down) and its `SidebarSubItem`s.\n * - `SidebarSubItem` is a regular 13px row whose text starts in line with the group label\n *   (34px in). Hover bg/muted, active bg/selected, disabled 50%.\n * - `SidebarSubGroup` is a sub-item that holds sub-items of its own (Chart → Bar chart,\n *   Channel chart): the same row with a chevron on the right, folding open and shut like the\n *   group (satin-expand, the chevron turning right → down). Its sub-items start 12px further\n *   in (46px). It opens on its own when one of them is the current page, and its label turns\n *   text/default while it holds the current page.\n *\n * Rows sit 2px apart. Focus draws the 1px border/focus outline Figma shows on the focus\n * variants, inset so the row doesn't move. Every state also answers to `data-force`.\n */\n\nconst rowFocus =\n  'outline-none satin-focus:[box-shadow:inset_0_0_0_1px_var(--border-focus)]'\n\nexport interface SidebarProps extends React.ComponentProps<'nav'> {}\n\n/** The navigation landmark. Name it with `aria-label` when a page has more than one nav. */\nexport function Sidebar({ className, ...props }: SidebarProps) {\n  return <nav data-slot=\"sidebar\" className={cn('flex flex-col gap-0.5', className)} {...props} />\n}\n\nexport interface SidebarItemProps extends Omit<React.ComponentProps<'a'>, 'children'> {\n  label: string\n  icon?: React.ReactNode\n  /** The current page. Sets `aria-current=\"page\"`. */\n  active?: boolean\n  /** Unread or pending work. Hidden at 0. */\n  count?: number\n  /** The collapsed rail: icon only, label in a tooltip. */\n  iconOnly?: boolean\n  disabled?: boolean\n  /** Render your router's link instead of `<a>`. */\n  asChild?: boolean\n  children?: React.ReactNode\n}\n\nexport function SidebarItem({\n  className,\n  label,\n  icon,\n  active = false,\n  count,\n  iconOnly = false,\n  disabled = false,\n  asChild = false,\n  href,\n  children,\n  ...props\n}: SidebarItemProps) {\n  const Comp = asChild ? Slot.Root : 'a'\n  const showCount = typeof count === 'number' && count > 0\n\n  const row = (\n    <Comp\n      data-slot=\"sidebar-item\"\n      data-active={active || undefined}\n      aria-current={active ? 'page' : undefined}\n      aria-disabled={disabled || undefined}\n      aria-label={iconOnly ? (showCount ? `${label}, ${count}` : label) : undefined}\n      href={disabled ? undefined : href}\n      tabIndex={disabled ? -1 : undefined}\n      className={cn(\n        'flex h-8 shrink-0 items-center gap-2 rounded-lg px-2 text-sm leading-4 font-medium tracking-normal text-text-muted no-underline select-none',\n        'transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n        '[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]',\n        'not-data-active:satin-hover:bg-bg-muted',\n        rowFocus,\n        'data-active:bg-border-input data-active:text-text-default',\n        'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n        iconOnly && 'relative size-8 justify-center px-0',\n        className,\n      )}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {icon}\n          {!iconOnly && <span className=\"min-w-0 flex-1 truncate\">{label}</span>}\n          {showCount && !iconOnly && <SidebarCount count={count} />}\n          {showCount && iconOnly && (\n            <span aria-hidden className=\"absolute top-1 right-1 size-1.5 rounded-full bg-action-destructive-bg\" />\n          )}\n        </>\n      )}\n    </Comp>\n  )\n\n  if (!iconOnly) return row\n  return (\n    <Tooltip.Provider delayDuration={300}>\n      <Tooltip.Root>\n        <Tooltip.Trigger asChild>{row}</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content\n            side=\"right\"\n            sideOffset={6}\n            collisionPadding={8}\n            className=\"z-50 rounded-md bg-action-inverse-bg px-2 py-1 text-xs font-medium text-text-on-inverse [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]\"\n          >\n            {label}\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </Tooltip.Provider>\n  )\n}\n\n/** The red counter from sidebar/navigation: 16 high, 18 wide at least, radius-xs. */\nfunction SidebarCount({ count }: { count: number }) {\n  return (\n    // 11/12 has no type token in the kit; Figma uses it raw for this counter.\n    <span className=\"inline-flex h-4 min-w-[18px] shrink-0 items-center justify-center rounded-xs bg-action-destructive-bg px-1 text-[11px] leading-3 font-medium tracking-normal text-text-on-solid tabular-nums\">\n      {count > 99 ? '99+' : count}\n    </span>\n  )\n}\n\nexport interface SidebarGroupProps\n  extends Omit<React.ComponentProps<typeof Collapsible.Root>, 'children'> {\n  label: string\n  icon?: React.ReactNode\n  /** How many items the group holds. */\n  count?: number\n  children?: React.ReactNode\n  /** Forwarded to the header button, e.g. `data-force=\"hover\"` on a state sheet. */\n  triggerProps?: React.ComponentProps<'button'> & { 'data-force'?: string }\n}\n\nexport function SidebarGroup({\n  className,\n  label,\n  icon,\n  count,\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange,\n  children,\n  triggerProps,\n  ...props\n}: SidebarGroupProps) {\n  // The group keeps its own open state and region, not Radix's Content: Content measures itself\n  // with transitions switched off on every toggle, which would cut the fold (satin-expand).\n  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen)\n  const open = openProp ?? uncontrolled\n  const regionId = React.useId()\n  return (\n    <Collapsible.Root\n      data-slot=\"sidebar-group\"\n      open={open}\n      onOpenChange={(next) => {\n        if (openProp == null) setUncontrolled(next)\n        onOpenChange?.(next)\n      }}\n      className={cn('group/sidebar-group flex flex-col gap-0.5', className)}\n      {...props}\n    >\n      <Collapsible.Trigger\n        aria-controls={regionId}\n        {...triggerProps}\n        className={cn(\n          'flex h-8 w-full shrink-0 items-center gap-2 rounded-lg px-3 text-left text-text-muted',\n          'transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n          '[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]',\n          'not-data-active:satin-hover:bg-bg-muted',\n          rowFocus,\n          triggerProps?.className,\n        )}\n      >\n        {icon}\n        <span className=\"min-w-0 flex-1 truncate text-sm leading-4 font-medium tracking-normal text-text-default\">\n          {label}\n        </span>\n        {typeof count === 'number' && (\n          <span className=\"shrink-0 px-1.5 py-0.5 text-sm leading-4 font-medium tracking-normal text-tone-fg tabular-nums\">\n            {count}\n          </span>\n        )}\n        <NavArrowRight\n          aria-hidden\n          className=\"transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[state=open]/sidebar-group:rotate-90 motion-reduce:transition-none\"\n        />\n      </Collapsible.Trigger>\n      {/* Always mounted so it can fold away: grows downwards from under the header (motion.css). */}\n      <div id={regionId} data-state={open ? 'open' : 'closed'} className=\"satin-expand\">\n        <div className=\"flex flex-col gap-0.5\">{children}</div>\n      </div>\n    </Collapsible.Root>\n  )\n}\n\nexport interface SidebarSubItemProps extends Omit<React.ComponentProps<'a'>, 'children'> {\n  label: string\n  active?: boolean\n  disabled?: boolean\n  asChild?: boolean\n  children?: React.ReactNode\n}\n\nexport function SidebarSubItem({\n  className,\n  label,\n  active = false,\n  disabled = false,\n  asChild = false,\n  href,\n  children,\n  ...props\n}: SidebarSubItemProps) {\n  const Comp = asChild ? Slot.Root : 'a'\n  return (\n    <Comp\n      data-slot=\"sidebar-sub-item\"\n      data-active={active || undefined}\n      aria-current={active ? 'page' : undefined}\n      aria-disabled={disabled || undefined}\n      href={disabled ? undefined : href}\n      tabIndex={disabled ? -1 : undefined}\n      className={cn(\n        'flex h-8 shrink-0 items-center rounded-lg pr-3 pl-[34px] text-sm font-normal text-text-muted no-underline select-none',\n        'transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n        'not-data-active:satin-hover:bg-bg-muted not-data-active:satin-hover:text-text-default',\n        rowFocus,\n        'data-active:bg-bg-selected data-active:text-text-default',\n        'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {asChild ? children : <span className=\"min-w-0 flex-1 truncate\">{label}</span>}\n    </Comp>\n  )\n}\n\nexport interface SidebarSubGroupProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  label: string\n  /** Its `SidebarSubItem`s; they sit 12px further in. */\n  children?: React.ReactNode\n  /** One of its sub-items is the current page: opens it by default and marks the label. */\n  active?: boolean\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n}\n\nexport function SidebarSubGroup({\n  className,\n  label,\n  children,\n  active = false,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: SidebarSubGroupProps) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? active)\n  const open = openProp ?? uncontrolled\n  const regionId = React.useId()\n  return (\n    <div data-slot=\"sidebar-sub-group\" data-state={open ? 'open' : 'closed'} className={cn('group/sub-group flex flex-col gap-0.5', className)} {...props}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        aria-controls={regionId}\n        data-active={active || undefined}\n        onClick={() => {\n          if (openProp == null) setUncontrolled(!open)\n          onOpenChange?.(!open)\n        }}\n        className={cn(\n          'flex h-8 w-full shrink-0 items-center gap-2 rounded-lg pr-3 pl-[34px] text-left text-sm font-normal text-text-muted select-none',\n          'transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n          'satin-hover:bg-bg-muted satin-hover:text-text-default data-active:text-text-default',\n          '[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]',\n          rowFocus,\n        )}\n      >\n        <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n        <NavArrowRight\n          aria-hidden\n          className=\"text-text-muted transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[state=open]/sub-group:rotate-90 motion-reduce:transition-none\"\n        />\n      </button>\n      <div id={regionId} data-state={open ? 'open' : 'closed'} className=\"satin-expand\">\n        <div className=\"flex flex-col gap-0.5 [&>[data-slot=sidebar-sub-item]]:pl-[46px]\">{children}</div>\n      </div>\n    </div>\n  )\n}\n"]}