@blurrow/ui 0.2.0 → 0.2.1

package/dist/Badge.js

@@ -0,0 +1,46 @@
+// ../../components/ui/Badge.tsx
+import { jsx } from "react/jsx-runtime";
+var variantStyles = {
+  default: "text-ink-inverse",
+  muted: "text-ink-body",
+  accent: "text-accent"
+};
+var variantSurfaces = {
+  default: {
+    background: "var(--face-inverse)",
+    boxShadow: "var(--badge-inverse-shadow)",
+    textShadow: "var(--emboss-inverse)"
+  },
+  muted: {
+    background: "var(--badge)",
+    boxShadow: "var(--badge-shadow)",
+    textShadow: "var(--emboss)"
+  },
+  accent: {
+    background: "var(--badge-accent)",
+    boxShadow: "var(--badge-accent-shadow)",
+    textShadow: "var(--emboss-soft)"
+  }
+};
+function Badge({
+  variant = "muted",
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: [
+        "inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium tracking-wide",
+        variantStyles[variant],
+        className
+      ].filter(Boolean).join(" "),
+      style: variantSurfaces[variant],
+      children
+    }
+  );
+}
+export {
+  Badge
+};
+//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Badge.tsx"],"sourcesContent":["import React from \"react\";\n\ntype BadgeVariant = \"default\" | \"muted\" | \"accent\";\n\ninterface BadgeProps {\n  variant?: BadgeVariant;\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  default: \"text-ink-inverse\",\n  muted: \"text-ink-body\",\n  accent: \"text-accent\",\n};\n\n/* Badges are small raised faces, lit from the same top edge as buttons. */\nconst variantSurfaces: Record<BadgeVariant, React.CSSProperties> = {\n  default: {\n    background: \"var(--face-inverse)\",\n    boxShadow: \"var(--badge-inverse-shadow)\",\n    textShadow: \"var(--emboss-inverse)\",\n  },\n  muted: {\n    background: \"var(--badge)\",\n    boxShadow: \"var(--badge-shadow)\",\n    textShadow: \"var(--emboss)\",\n  },\n  accent: {\n    background: \"var(--badge-accent)\",\n    boxShadow: \"var(--badge-accent-shadow)\",\n    textShadow: \"var(--emboss-soft)\",\n  },\n};\n\nexport function Badge({\n  variant = \"muted\",\n  children,\n  className = \"\",\n}: BadgeProps) {\n  return (\n    <span\n      className={[\n        \"inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium tracking-wide\",\n        variantStyles[variant],\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={variantSurfaces[variant]}\n    >\n      {children}\n    </span>\n  );\n}\n"],"mappings":";AAyCI;AA/BJ,IAAM,gBAA8C;AAAA,EAClD,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AACV;AAGA,IAAM,kBAA6D;AAAA,EACjE,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAEO,SAAS,MAAM;AAAA,EACpB,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AACd,GAAe;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,OAAO;AAAA,QACrB;AAAA,MACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAO,gBAAgB,OAAO;AAAA,MAE7B;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/Banner.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type BannerVariant = "default" | "accent" | "warning";
+declare function Banner({ variant, children, icon, dismissible, onDismiss, action, className, }: {
+    variant?: BannerVariant;
+    children: ReactNode;
+    icon?: ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    action?: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Banner };

package/dist/Banner.js

@@ -0,0 +1,68 @@
+"use client";
+
+// ../../components/ui/Banner.tsx
+import { CloseButton } from "./CloseButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  default: {
+    bezel: "var(--banner-bezel)",
+    bezelShadow: "var(--banner-bezel-shadow)",
+    face: "var(--banner-face)",
+    faceShadow: "var(--banner-face-shadow)",
+    text: "text-white",
+    tone: "dark"
+  },
+  accent: {
+    bezel: "var(--bezel-violet)",
+    bezelShadow: "var(--bezel-violet-shadow)",
+    face: "var(--face-violet)",
+    faceShadow: "var(--face-violet-shadow)",
+    text: "text-white",
+    tone: "dark"
+  },
+  warning: {
+    bezel: "var(--bezel-warning)",
+    bezelShadow: "var(--bezel-warning-shadow)",
+    face: "var(--face-warning)",
+    faceShadow: "var(--face-warning-shadow)",
+    text: "text-warning-ink",
+    tone: "light"
+  }
+};
+function Banner({
+  variant = "default",
+  children,
+  icon,
+  dismissible = false,
+  onDismiss,
+  action,
+  className = ""
+}) {
+  const s = variantStyles[variant];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Announcement",
+      className: `w-full rounded-[18px] p-1 ${className}`,
+      style: { background: s.bezel, boxShadow: s.bezelShadow },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `rounded-[14px] pl-4 pr-2 py-2.5 flex items-center gap-3 ${s.text}`,
+          style: { background: s.face, boxShadow: s.faceShadow },
+          children: [
+            icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex-shrink-0 opacity-80", children: icon }),
+            /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium flex-1 min-w-0 leading-relaxed", children }),
+            action && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: action }),
+            dismissible && /* @__PURE__ */ jsx(CloseButton, { size: "sm", tone: s.tone, label: "Dismiss announcement", onClick: onDismiss })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Banner
+};
+//# sourceMappingURL=Banner.js.map

package/dist/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { CloseButton } from \"./CloseButton\";\n\ntype BannerVariant = \"default\" | \"accent\" | \"warning\";\n\n/* A banner is a dark bezel holding a dark face — the same build as the\n   primary button, stretched to full width. On a dark page it stays a\n   dark strip (the mid material) rather than a full-width pale bar.    */\nconst variantStyles: Record<\n  BannerVariant,\n  { bezel: string; bezelShadow: string; face: string; faceShadow: string; text: string; tone: \"light\" | \"dark\" }\n> = {\n  default: {\n    bezel: \"var(--banner-bezel)\",\n    bezelShadow: \"var(--banner-bezel-shadow)\",\n    face: \"var(--banner-face)\",\n    faceShadow: \"var(--banner-face-shadow)\",\n    text: \"text-white\",\n    tone: \"dark\",\n  },\n  accent: {\n    bezel: \"var(--bezel-violet)\",\n    bezelShadow: \"var(--bezel-violet-shadow)\",\n    face: \"var(--face-violet)\",\n    faceShadow: \"var(--face-violet-shadow)\",\n    text: \"text-white\",\n    tone: \"dark\",\n  },\n  warning: {\n    bezel: \"var(--bezel-warning)\",\n    bezelShadow: \"var(--bezel-warning-shadow)\",\n    face: \"var(--face-warning)\",\n    faceShadow: \"var(--face-warning-shadow)\",\n    text: \"text-warning-ink\",\n    tone: \"light\",\n  },\n};\n\nexport function Banner({\n  variant = \"default\",\n  children,\n  icon,\n  dismissible = false,\n  onDismiss,\n  action,\n  className = \"\",\n}: {\n  variant?: BannerVariant;\n  children: ReactNode;\n  icon?: ReactNode;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  action?: ReactNode;\n  className?: string;\n}) {\n  const s = variantStyles[variant];\n\n  return (\n    <div\n      role=\"region\"\n      aria-label=\"Announcement\"\n      className={`w-full rounded-[18px] p-1 ${className}`}\n      style={{ background: s.bezel, boxShadow: s.bezelShadow }}\n    >\n      <div\n        className={`rounded-[14px] pl-4 pr-2 py-2.5 flex items-center gap-3 ${s.text}`}\n        style={{ background: s.face, boxShadow: s.faceShadow }}\n      >\n        {icon && <span aria-hidden className=\"flex-shrink-0 opacity-80\">{icon}</span>}\n\n        {/* Left-aligned so it reads in one sweep with the icon beside it */}\n        <span className=\"text-[13px] font-medium flex-1 min-w-0 leading-relaxed\">\n          {children}\n        </span>\n\n        {action && <span className=\"flex-shrink-0\">{action}</span>}\n\n        {dismissible && (\n          <CloseButton size=\"sm\" tone={s.tone} label=\"Dismiss announcement\" onClick={onDismiss} />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,mBAAmB;AA+DtB,SAIW,KAJX;AAxDN,IAAM,gBAGF;AAAA,EACF,SAAS;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEO,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAQG;AACD,QAAM,IAAI,cAAc,OAAO;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,6BAA6B,SAAS;AAAA,MACjD,OAAO,EAAE,YAAY,EAAE,OAAO,WAAW,EAAE,YAAY;AAAA,MAEvD;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,2DAA2D,EAAE,IAAI;AAAA,UAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,EAAE,WAAW;AAAA,UAEpD;AAAA,oBAAQ,oBAAC,UAAK,eAAW,MAAC,WAAU,4BAA4B,gBAAK;AAAA,YAGtE,oBAAC,UAAK,WAAU,0DACb,UACH;AAAA,YAEC,UAAU,oBAAC,UAAK,WAAU,iBAAiB,kBAAO;AAAA,YAElD,eACC,oBAAC,eAAY,MAAK,MAAK,MAAM,EAAE,MAAM,OAAM,wBAAuB,SAAS,WAAW;AAAA;AAAA;AAAA,MAE1F;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/Breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+declare function Breadcrumb({ items, className }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+export { Breadcrumb };

package/dist/Breadcrumb.js

@@ -0,0 +1,45 @@
+// ../../components/ui/Breadcrumb.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Breadcrumb({ items, className = "" }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1 flex-wrap", children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1 min-w-0", children: [
+      i > 0 && /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": true,
+          width: "12",
+          height: "12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          viewBox: "0 0 24 24",
+          className: "text-ink-ghost shrink-0",
+          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+        }
+      ),
+      isLast || !item.href ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-current": isLast ? "page" : void 0,
+          className: [
+            "text-[12.5px] px-1.5 py-0.5 truncate",
+            isLast ? "font-medium text-ink" : "text-ink-muted"
+          ].join(" "),
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "text-[12.5px] text-ink-muted hover:text-ink px-1.5 py-0.5 rounded-[6px] hover:bg-ink/[0.05] transition-colors truncate",
+          children: item.label
+        }
+      )
+    ] }, i);
+  }) }) });
+}
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Breadcrumb.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\ninterface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className = \"\" }: BreadcrumbProps) {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={className}>\n      <ol className=\"flex items-center gap-1 flex-wrap\">\n        {items.map((item, i) => {\n          const isLast = i === items.length - 1;\n\n          return (\n            <li key={i} className=\"flex items-center gap-1 min-w-0\">\n              {i > 0 && (\n                <svg\n                  aria-hidden\n                  width=\"12\"\n                  height=\"12\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  className=\"text-ink-ghost shrink-0\"\n                >\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n              )}\n              {isLast || !item.href ? (\n                <span\n                  aria-current={isLast ? \"page\" : undefined}\n                  className={[\n                    \"text-[12.5px] px-1.5 py-0.5 truncate\",\n                    isLast ? \"font-medium text-ink\" : \"text-ink-muted\",\n                  ].join(\" \")}\n                >\n                  {item.label}\n                </span>\n              ) : (\n                <a\n                  href={item.href}\n                  className=\"text-[12.5px] text-ink-muted hover:text-ink px-1.5 py-0.5 rounded-[6px] hover:bg-ink/[0.05] transition-colors truncate\"\n                >\n                  {item.label}\n                </a>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";AAoBY,SAYM,KAZN;AARL,SAAS,WAAW,EAAE,OAAO,YAAY,GAAG,GAAoB;AACrE,SACE,oBAAC,SAAI,cAAW,cAAa,WAC3B,8BAAC,QAAG,WAAU,qCACX,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,SAAS,MAAM,MAAM,SAAS;AAEpC,WACE,qBAAC,QAAW,WAAU,mCACnB;AAAA,UAAI,KACH;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,SAAQ;AAAA,UACR,WAAU;AAAA,UAEV,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,gBAAe;AAAA;AAAA,MACtE;AAAA,MAED,UAAU,CAAC,KAAK,OACf;AAAA,QAAC;AAAA;AAAA,UACC,gBAAc,SAAS,SAAS;AAAA,UAChC,WAAW;AAAA,YACT;AAAA,YACA,SAAS,yBAAyB;AAAA,UACpC,EAAE,KAAK,GAAG;AAAA,UAET,eAAK;AAAA;AAAA,MACR,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR;AAAA,SA/BK,CAiCT;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}

package/dist/Button.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "outline";
+type ButtonSize = "sm" | "md" | "lg" | "icon";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+    fullWidth?: boolean;
+    /** Surface the button sits on. On dark cards, secondary/outline switch to a
+        dark face so they don't glare against the card. */
+    tone?: "light" | "dark";
+    /** Equal width and height, for icon-only layered buttons. */
+    square?: boolean;
+}
+declare function Button({ variant, size, fullWidth, tone, square, className, children, disabled, onClick, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onPointerEnter, style, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button };

package/dist/Button.js

@@ -0,0 +1,282 @@
+"use client";
+
+// ../../components/ui/Button.tsx
+import { useState, useRef, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var shellConfig = {
+  primary: {
+    bezel: "var(--bezel-inverse)",
+    bezelShadow: "var(--bezel-inverse-shadow)",
+    face: "var(--face-inverse)",
+    faceShadow: "var(--face-inverse-shadow)",
+    faceHoverShadow: "var(--face-inverse-shadow-hover)",
+    facePressedShadow: "var(--face-inverse-pressed)",
+    text: "text-ink-inverse",
+    textShadow: "var(--emboss-inverse-deep)",
+    fill: "bg-ink-inverse/[0.05]"
+  },
+  secondary: {
+    bezel: "var(--bezel)",
+    bezelShadow: "var(--bezel-shadow)",
+    face: "var(--face)",
+    faceShadow: "var(--face-shadow)",
+    faceHoverShadow: "var(--face-shadow-hover)",
+    facePressedShadow: "var(--face-pressed)",
+    text: "text-ink-soft",
+    textShadow: "var(--emboss)",
+    fill: "bg-ink/[0.025]"
+  },
+  outline: {
+    bezel: "var(--outline-bezel)",
+    bezelShadow: "var(--outline-bezel-shadow)",
+    face: "var(--face)",
+    faceShadow: "var(--outline-face-shadow)",
+    faceHoverShadow: "var(--outline-face-shadow-hover)",
+    facePressedShadow: "var(--face-pressed)",
+    text: "text-ink-label",
+    textShadow: "var(--emboss)",
+    fill: "bg-ink/[0.025]"
+  }
+};
+var darkSecondary = {
+  bezel: "var(--bezel-mid)",
+  bezelShadow: "var(--bezel-mid-shadow)",
+  face: "var(--face-mid)",
+  faceShadow: "var(--face-mid-shadow)",
+  faceHoverShadow: "var(--face-mid-shadow-hover)",
+  facePressedShadow: "var(--face-dark-pressed)",
+  text: "text-neutral-100",
+  textShadow: "var(--emboss-inverse)",
+  fill: "bg-white/[0.04]"
+};
+var flatConfig = {
+  primary: {
+    bg: "text-ink-inverse",
+    background: "var(--face-inverse)",
+    fill: "bg-ink-inverse/[0.08]",
+    shadow: "var(--face-inverse-shadow)",
+    hoverShadow: "var(--face-inverse-float-shadow)",
+    pressedShadow: "var(--face-inverse-pressed)"
+  },
+  secondary: {
+    bg: "text-ink-soft",
+    background: "var(--face)",
+    fill: "bg-ink/[0.035]",
+    shadow: "var(--face-shadow)",
+    hoverShadow: "var(--face-float-shadow)",
+    pressedShadow: "var(--face-pressed)"
+  },
+  ghost: {
+    bg: "bg-transparent text-ink-muted hover:text-ink-soft",
+    fill: "bg-ink/[0.05]",
+    shadow: "none",
+    hoverShadow: "var(--ghost-shadow-hover)",
+    pressedShadow: "var(--ghost-shadow-pressed)"
+  },
+  outline: {
+    bg: "bg-transparent text-ink-label",
+    fill: "bg-ink/[0.035]",
+    shadow: "var(--outline-shadow)",
+    hoverShadow: "var(--outline-shadow-hover)",
+    pressedShadow: "var(--outline-shadow-pressed)"
+  }
+};
+var shellRadius = {
+  sm: "rounded-[12px] p-[3px]",
+  md: "rounded-[13px] p-[3px]",
+  lg: "rounded-[15px] p-[3.5px]",
+  icon: ""
+};
+var faceRadius = {
+  sm: "rounded-[9px]",
+  md: "rounded-[10px]",
+  lg: "rounded-[11.5px]",
+  icon: ""
+};
+var innerPadding = {
+  sm: "px-4 py-2 text-[13px]",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-7 py-3 text-[15px]",
+  icon: "w-7 h-7 p-0 text-[13px]"
+};
+var squarePadding = {
+  sm: "w-9 h-9 p-0 text-[13px]",
+  md: "w-10 h-10 p-0 text-sm",
+  lg: "w-12 h-12 p-0 text-[15px]",
+  icon: ""
+};
+var flatSizeStyles = {
+  sm: "px-4 py-2.5 text-[13px] rounded-[10px]",
+  md: "px-5 py-3 text-sm rounded-[10px]",
+  lg: "px-7 py-3.5 text-[15px] rounded-xl",
+  icon: "w-8 h-8 p-0 rounded-[10px] text-[13px]"
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  tone = "light",
+  square = false,
+  className = "",
+  children,
+  disabled,
+  onClick,
+  onPointerDown,
+  onPointerUp,
+  onPointerLeave,
+  onPointerCancel,
+  onPointerEnter,
+  style,
+  ...rest
+}) {
+  const [pressed, setPressed] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const timerRef = useRef(null);
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setPressed(true);
+      onPointerDown?.(e);
+    },
+    [onPointerDown]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      timerRef.current = setTimeout(() => setPressed(false), 150);
+      onPointerUp?.(e);
+    },
+    [onPointerUp]
+  );
+  const handlePointerCancel = useCallback(
+    (e) => {
+      timerRef.current = setTimeout(() => setPressed(false), 150);
+      onPointerCancel?.(e);
+    },
+    [onPointerCancel]
+  );
+  const handlePointerLeave = useCallback(
+    (e) => {
+      setHovered(false);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setPressed(false), 150);
+      onPointerLeave?.(e);
+    },
+    [onPointerLeave]
+  );
+  const layered = variant !== "ghost" && size !== "icon";
+  const handlers = {
+    onClick,
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp,
+    onPointerLeave: handlePointerLeave,
+    onPointerCancel: handlePointerCancel,
+    onPointerEnter: (e) => {
+      setHovered(true);
+      onPointerEnter?.(e);
+    }
+  };
+  if (layered) {
+    const cfg2 = tone === "dark" && (variant === "secondary" || variant === "outline") ? darkSecondary : shellConfig[variant];
+    const faceShadow = pressed ? cfg2.facePressedShadow : hovered ? cfg2.faceHoverShadow : cfg2.faceShadow;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-btn": true,
+        className: [
+          "group/btn relative inline-flex cursor-pointer select-none whitespace-nowrap",
+          shellRadius[size],
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+          "disabled:opacity-40 disabled:pointer-events-none",
+          fullWidth ? "w-full" : "",
+          className
+        ].filter(Boolean).join(" "),
+        style: {
+          background: cfg2.bezel,
+          boxShadow: cfg2.bezelShadow,
+          ...style
+        },
+        disabled,
+        ...handlers,
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: [
+              "btn-face relative overflow-hidden flex items-center justify-center gap-1.5 font-medium",
+              faceRadius[size],
+              cfg2.text,
+              square ? squarePadding[size] : ["w-full", innerPadding[size]].join(" ")
+            ].join(" "),
+            style: {
+              background: cfg2.face,
+              boxShadow: faceShadow,
+              textShadow: cfg2.textShadow,
+              transform: pressed ? "translateY(0.5px) scale(0.985)" : hovered ? "translateY(-0.5px)" : "none",
+              transition: "transform 240ms var(--ease-spring), box-shadow 200ms ease-out"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: [
+                    "pointer-events-none absolute inset-0 origin-bottom transition-transform duration-300 ease-out",
+                    pressed ? "scale-y-100" : "scale-y-0 group-hover/btn:scale-y-100",
+                    cfg2.fill
+                  ].join(" ")
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "btn-icon-nudge relative z-10 inline-flex items-center gap-1.5", children })
+            ]
+          }
+        )
+      }
+    );
+  }
+  const cfg = flatConfig[variant];
+  const currentShadow = pressed ? cfg.pressedShadow : hovered ? cfg.hoverShadow : cfg.shadow;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "data-btn": true,
+      className: [
+        "btn-face group/btn relative overflow-hidden inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer select-none whitespace-nowrap",
+        "transition-colors duration-200 ease-out",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+        "disabled:opacity-40 disabled:pointer-events-none",
+        cfg.bg,
+        flatSizeStyles[size],
+        fullWidth ? "w-full" : "",
+        className
+      ].filter(Boolean).join(" "),
+      style: {
+        background: cfg.background,
+        boxShadow: currentShadow,
+        transform: pressed ? "translateY(0.5px) scale(0.97)" : hovered && cfg.background ? "translateY(-0.5px)" : "none",
+        transition: "transform 240ms var(--ease-spring), box-shadow 200ms ease-out, color 200ms ease-out",
+        ...style
+      },
+      disabled,
+      ...handlers,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: [
+              "pointer-events-none absolute inset-0 origin-bottom transition-transform duration-300 ease-out",
+              pressed ? "scale-y-100" : "scale-y-0 group-hover/btn:scale-y-100",
+              cfg.fill
+            ].join(" ")
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex items-center gap-1.5", children })
+      ]
+    }
+  );
+}
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useCallback } from \"react\";\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"outline\";\ntype ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\";\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  children: React.ReactNode;\n  fullWidth?: boolean;\n  /** Surface the button sits on. On dark cards, secondary/outline switch to a\n      dark face so they don't glare against the card. */\n  tone?: \"light\" | \"dark\";\n  /** Equal width and height, for icon-only layered buttons. */\n  square?: boolean;\n}\n\n/* Layered buttons are a raised face seated in a machined bezel. The bezel\n   never moves; the face lifts on hover and sinks flush when pressed.      */\nconst shellConfig: Record<\n  string,\n  {\n    bezel: string;\n    bezelShadow: string;\n    face: string;\n    faceShadow: string;\n    faceHoverShadow: string;\n    facePressedShadow: string;\n    text: string;\n    textShadow: string;\n    fill: string;\n  }\n> = {\n  primary: {\n    bezel: \"var(--bezel-inverse)\",\n    bezelShadow: \"var(--bezel-inverse-shadow)\",\n    face: \"var(--face-inverse)\",\n    faceShadow: \"var(--face-inverse-shadow)\",\n    faceHoverShadow: \"var(--face-inverse-shadow-hover)\",\n    facePressedShadow: \"var(--face-inverse-pressed)\",\n    text: \"text-ink-inverse\",\n    textShadow: \"var(--emboss-inverse-deep)\",\n    fill: \"bg-ink-inverse/[0.05]\",\n  },\n  secondary: {\n    bezel: \"var(--bezel)\",\n    bezelShadow: \"var(--bezel-shadow)\",\n    face: \"var(--face)\",\n    faceShadow: \"var(--face-shadow)\",\n    faceHoverShadow: \"var(--face-shadow-hover)\",\n    facePressedShadow: \"var(--face-pressed)\",\n    text: \"text-ink-soft\",\n    textShadow: \"var(--emboss)\",\n    fill: \"bg-ink/[0.025]\",\n  },\n  outline: {\n    bezel: \"var(--outline-bezel)\",\n    bezelShadow: \"var(--outline-bezel-shadow)\",\n    face: \"var(--face)\",\n    faceShadow: \"var(--outline-face-shadow)\",\n    faceHoverShadow: \"var(--outline-face-shadow-hover)\",\n    facePressedShadow: \"var(--face-pressed)\",\n    text: \"text-ink-label\",\n    textShadow: \"var(--emboss)\",\n    fill: \"bg-ink/[0.025]\",\n  },\n};\n\n/* Secondary on a dark surface: a raised face a few steps lighter than the\n   card — present, but in the same family of tones. It's the mid material,\n   the same one secondary keys wear everywhere in the dark theme.        */\nconst darkSecondary = {\n  bezel: \"var(--bezel-mid)\",\n  bezelShadow: \"var(--bezel-mid-shadow)\",\n  face: \"var(--face-mid)\",\n  faceShadow: \"var(--face-mid-shadow)\",\n  faceHoverShadow: \"var(--face-mid-shadow-hover)\",\n  facePressedShadow: \"var(--face-dark-pressed)\",\n  text: \"text-neutral-100\",\n  textShadow: \"var(--emboss-inverse)\",\n  fill: \"bg-white/[0.04]\",\n};\n\n/* Flat buttons (ghost, icon) are a single face without a bezel. */\nconst flatConfig: Record<\n  ButtonVariant,\n  {\n    bg: string;\n    background?: string;\n    fill: string;\n    shadow: string;\n    hoverShadow: string;\n    pressedShadow: string;\n  }\n> = {\n  primary: {\n    bg: \"text-ink-inverse\",\n    background: \"var(--face-inverse)\",\n    fill: \"bg-ink-inverse/[0.08]\",\n    shadow: \"var(--face-inverse-shadow)\",\n    hoverShadow: \"var(--face-inverse-float-shadow)\",\n    pressedShadow: \"var(--face-inverse-pressed)\",\n  },\n  secondary: {\n    bg: \"text-ink-soft\",\n    background: \"var(--face)\",\n    fill: \"bg-ink/[0.035]\",\n    shadow: \"var(--face-shadow)\",\n    hoverShadow: \"var(--face-float-shadow)\",\n    pressedShadow: \"var(--face-pressed)\",\n  },\n  ghost: {\n    bg: \"bg-transparent text-ink-muted hover:text-ink-soft\",\n    fill: \"bg-ink/[0.05]\",\n    shadow: \"none\",\n    hoverShadow: \"var(--ghost-shadow-hover)\",\n    pressedShadow: \"var(--ghost-shadow-pressed)\",\n  },\n  outline: {\n    bg: \"bg-transparent text-ink-label\",\n    fill: \"bg-ink/[0.035]\",\n    shadow: \"var(--outline-shadow)\",\n    hoverShadow: \"var(--outline-shadow-hover)\",\n    pressedShadow: \"var(--outline-shadow-pressed)\",\n  },\n};\n\n/* Bezel radius minus bezel padding = face radius, so the curves stay concentric. */\nconst shellRadius: Record<ButtonSize, string> = {\n  sm: \"rounded-[12px] p-[3px]\",\n  md: \"rounded-[13px] p-[3px]\",\n  lg: \"rounded-[15px] p-[3.5px]\",\n  icon: \"\",\n};\n\nconst faceRadius: Record<ButtonSize, string> = {\n  sm: \"rounded-[9px]\",\n  md: \"rounded-[10px]\",\n  lg: \"rounded-[11.5px]\",\n  icon: \"\",\n};\n\nconst innerPadding: Record<ButtonSize, string> = {\n  sm: \"px-4 py-2 text-[13px]\",\n  md: \"px-5 py-2.5 text-sm\",\n  lg: \"px-7 py-3 text-[15px]\",\n  icon: \"w-7 h-7 p-0 text-[13px]\",\n};\n\nconst squarePadding: Record<ButtonSize, string> = {\n  sm: \"w-9 h-9 p-0 text-[13px]\",\n  md: \"w-10 h-10 p-0 text-sm\",\n  lg: \"w-12 h-12 p-0 text-[15px]\",\n  icon: \"\",\n};\n\nconst flatSizeStyles: Record<ButtonSize, string> = {\n  sm: \"px-4 py-2.5 text-[13px] rounded-[10px]\",\n  md: \"px-5 py-3 text-sm rounded-[10px]\",\n  lg: \"px-7 py-3.5 text-[15px] rounded-xl\",\n  icon: \"w-8 h-8 p-0 rounded-[10px] text-[13px]\",\n};\n\nexport function Button({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth = false,\n  tone = \"light\",\n  square = false,\n  className = \"\",\n  children,\n  disabled,\n  onClick,\n  onPointerDown,\n  onPointerUp,\n  onPointerLeave,\n  onPointerCancel,\n  onPointerEnter,\n  style,\n  ...rest\n}: ButtonProps) {\n  const [pressed, setPressed] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  /* The press state is the button's own; handlers passed in run alongside\n     it rather than replacing it                                        */\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent<HTMLButtonElement>) => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n      setPressed(true);\n      onPointerDown?.(e);\n    },\n    [onPointerDown],\n  );\n\n  const handlePointerUp = useCallback(\n    (e: React.PointerEvent<HTMLButtonElement>) => {\n      timerRef.current = setTimeout(() => setPressed(false), 150);\n      onPointerUp?.(e);\n    },\n    [onPointerUp],\n  );\n\n  const handlePointerCancel = useCallback(\n    (e: React.PointerEvent<HTMLButtonElement>) => {\n      timerRef.current = setTimeout(() => setPressed(false), 150);\n      onPointerCancel?.(e);\n    },\n    [onPointerCancel],\n  );\n\n  const handlePointerLeave = useCallback(\n    (e: React.PointerEvent<HTMLButtonElement>) => {\n      setHovered(false);\n      if (timerRef.current) clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => setPressed(false), 150);\n      onPointerLeave?.(e);\n    },\n    [onPointerLeave],\n  );\n\n  const layered = variant !== \"ghost\" && size !== \"icon\";\n\n  const handlers = {\n    onClick,\n    onPointerDown: handlePointerDown,\n    onPointerUp: handlePointerUp,\n    onPointerLeave: handlePointerLeave,\n    onPointerCancel: handlePointerCancel,\n    onPointerEnter: (e: React.PointerEvent<HTMLButtonElement>) => {\n      setHovered(true);\n      onPointerEnter?.(e);\n    },\n  };\n\n  if (layered) {\n    const cfg =\n      tone === \"dark\" && (variant === \"secondary\" || variant === \"outline\")\n        ? darkSecondary\n        : shellConfig[variant];\n    const faceShadow = pressed\n      ? cfg.facePressedShadow\n      : hovered\n        ? cfg.faceHoverShadow\n        : cfg.faceShadow;\n\n    return (\n      <button\n        data-btn\n        className={[\n          \"group/btn relative inline-flex cursor-pointer select-none whitespace-nowrap\",\n          shellRadius[size],\n          \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink\",\n          \"disabled:opacity-40 disabled:pointer-events-none\",\n          fullWidth ? \"w-full\" : \"\",\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={{\n          background: cfg.bezel,\n          boxShadow: cfg.bezelShadow,\n          ...style,\n        }}\n        disabled={disabled}\n        {...handlers}\n        {...rest}\n      >\n        <span\n          className={[\n            \"btn-face relative overflow-hidden flex items-center justify-center gap-1.5 font-medium\",\n            faceRadius[size],\n            cfg.text,\n            square ? squarePadding[size] : [\"w-full\", innerPadding[size]].join(\" \"),\n          ].join(\" \")}\n          style={{\n            background: cfg.face,\n            boxShadow: faceShadow,\n            textShadow: cfg.textShadow,\n            transform: pressed\n              ? \"translateY(0.5px) scale(0.985)\"\n              : hovered\n                ? \"translateY(-0.5px)\"\n                : \"none\",\n            transition:\n              \"transform 240ms var(--ease-spring), box-shadow 200ms ease-out\",\n          }}\n        >\n          <span\n            aria-hidden=\"true\"\n            className={[\n              \"pointer-events-none absolute inset-0 origin-bottom transition-transform duration-300 ease-out\",\n              pressed\n                ? \"scale-y-100\"\n                : \"scale-y-0 group-hover/btn:scale-y-100\",\n              cfg.fill,\n            ].join(\" \")}\n          />\n          <span className=\"btn-icon-nudge relative z-10 inline-flex items-center gap-1.5\">\n            {children}\n          </span>\n        </span>\n      </button>\n    );\n  }\n\n  const cfg = flatConfig[variant];\n  const currentShadow = pressed\n    ? cfg.pressedShadow\n    : hovered\n      ? cfg.hoverShadow\n      : cfg.shadow;\n\n  return (\n    <button\n      data-btn\n      className={[\n        \"btn-face group/btn relative overflow-hidden inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer select-none whitespace-nowrap\",\n        \"transition-colors duration-200 ease-out\",\n        \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink\",\n        \"disabled:opacity-40 disabled:pointer-events-none\",\n        cfg.bg,\n        flatSizeStyles[size],\n        fullWidth ? \"w-full\" : \"\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{\n        background: cfg.background,\n        boxShadow: currentShadow,\n        transform: pressed\n          ? \"translateY(0.5px) scale(0.97)\"\n          : hovered && cfg.background\n            ? \"translateY(-0.5px)\"\n            : \"none\",\n        transition:\n          \"transform 240ms var(--ease-spring), box-shadow 200ms ease-out, color 200ms ease-out\",\n        ...style,\n      }}\n      disabled={disabled}\n      {...handlers}\n      {...rest}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={[\n          \"pointer-events-none absolute inset-0 origin-bottom transition-transform duration-300 ease-out\",\n          pressed ? \"scale-y-100\" : \"scale-y-0 group-hover/btn:scale-y-100\",\n          cfg.fill,\n        ].join(\" \")}\n      />\n      <span className=\"relative z-10 inline-flex items-center gap-1.5\">\n        {children}\n      </span>\n    </button>\n  );\n}\n"],"mappings":"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","names":["cfg"]}

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface ButtonGroupItem {
+    label: string;
+    content: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    /** Sized to its content; otherwise a square key for a lone icon */
+    wide?: boolean;
+}
+interface ButtonGroupProps {
+    items: ButtonGroupItem[];
+    label: string;
+    className?: string;
+}
+declare function ButtonGroup({ items, label, className }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+export { ButtonGroup, type ButtonGroupItem };

package/dist/ButtonGroup.js

@@ -0,0 +1,62 @@
+// ../../components/ui/ButtonGroup.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ButtonGroup({ items, label, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      className: ["inline-flex w-fit rounded-[12px] p-[3px]", className].join(" "),
+      style: { background: "var(--bezel)", boxShadow: "var(--bezel-shadow)" },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex rounded-[9px] overflow-hidden",
+          style: { background: "var(--face)", boxShadow: "var(--face-shadow)" },
+          children: items.map((item, i) => {
+            const keyClass = [
+              "group/key relative h-9 inline-flex items-center justify-center gap-1.5 cursor-pointer",
+              "text-[13px] font-medium text-ink-soft outline-none",
+              "transition-[box-shadow,background] duration-150",
+              "active:bg-ink/[0.04] active:[box-shadow:var(--ghost-shadow-pressed)]",
+              "focus-visible:[box-shadow:var(--focus-ring-inset)]",
+              item.wide ? "px-4" : "w-10"
+            ].join(" ");
+            const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-0 origin-bottom scale-y-0 bg-ink/[0.025] transition-transform duration-300 ease-out group-hover/key:scale-y-100"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "relative inline-flex items-center gap-1.5", children: item.content })
+            ] });
+            const common = {
+              "aria-label": item.label,
+              title: item.wide ? void 0 : item.label,
+              className: keyClass,
+              style: { textShadow: "var(--emboss)" }
+            };
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "w-px self-stretch my-2 bg-groove",
+                  style: { boxShadow: "var(--groove-lip)" }
+                }
+              ),
+              item.href ? /* @__PURE__ */ jsx("a", { href: item.href, ...common, children: inner }) : /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onClick, ...common, children: inner })
+            ] }, item.label);
+          })
+        }
+      )
+    }
+  );
+}
+export {
+  ButtonGroup
+};
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/ButtonGroup.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface ButtonGroupItem {\n  label: string;\n  content: React.ReactNode;\n  onClick?: () => void;\n  href?: string;\n  /** Sized to its content; otherwise a square key for a lone icon */\n  wide?: boolean;\n}\n\ninterface ButtonGroupProps {\n  items: ButtonGroupItem[];\n  label: string;\n  className?: string;\n}\n\n/* One bezel, one face, several keys: a linked control in the same material\n   as Button (sm), split by grooves rather than gaps. Each key fills from the\n   bottom on hover and sinks when pressed, like a layered Button's face.   */\nexport function ButtonGroup({ items, label, className = \"\" }: ButtonGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={[\"inline-flex w-fit rounded-[12px] p-[3px]\", className].join(\" \")}\n      style={{ background: \"var(--bezel)\", boxShadow: \"var(--bezel-shadow)\" }}\n    >\n      <div\n        className=\"flex rounded-[9px] overflow-hidden\"\n        style={{ background: \"var(--face)\", boxShadow: \"var(--face-shadow)\" }}\n      >\n        {items.map((item, i) => {\n          const keyClass = [\n            \"group/key relative h-9 inline-flex items-center justify-center gap-1.5 cursor-pointer\",\n            \"text-[13px] font-medium text-ink-soft outline-none\",\n            \"transition-[box-shadow,background] duration-150\",\n            \"active:bg-ink/[0.04] active:[box-shadow:var(--ghost-shadow-pressed)]\",\n            \"focus-visible:[box-shadow:var(--focus-ring-inset)]\",\n            item.wide ? \"px-4\" : \"w-10\",\n          ].join(\" \");\n          const inner = (\n            <>\n              <span\n                aria-hidden\n                className=\"pointer-events-none absolute inset-0 origin-bottom scale-y-0 bg-ink/[0.025] transition-transform duration-300 ease-out group-hover/key:scale-y-100\"\n              />\n              <span className=\"relative inline-flex items-center gap-1.5\">{item.content}</span>\n            </>\n          );\n          const common = {\n            \"aria-label\": item.label,\n            title: item.wide ? undefined : item.label,\n            className: keyClass,\n            style: { textShadow: \"var(--emboss)\" },\n          };\n\n          return (\n            <React.Fragment key={item.label}>\n              {i > 0 && (\n                <span\n                  aria-hidden\n                  className=\"w-px self-stretch my-2 bg-groove\"\n                  style={{ boxShadow: \"var(--groove-lip)\" }}\n                />\n              )}\n              {item.href ? (\n                <a href={item.href} {...common}>\n                  {inner}\n                </a>\n              ) : (\n                <button type=\"button\" onClick={item.onClick} {...common}>\n                  {inner}\n                </button>\n              )}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAAA,OAAO,WAAW;AA0CN,mBACE,KADF;AAtBL,SAAS,YAAY,EAAE,OAAO,OAAO,YAAY,GAAG,GAAqB;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,CAAC,4CAA4C,SAAS,EAAE,KAAK,GAAG;AAAA,MAC3E,OAAO,EAAE,YAAY,gBAAgB,WAAW,sBAAsB;AAAA,MAEtE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,eAAe,WAAW,qBAAqB;AAAA,UAEnE,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,kBAAM,WAAW;AAAA,cACf;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,KAAK,OAAO,SAAS;AAAA,YACvB,EAAE,KAAK,GAAG;AACV,kBAAM,QACJ,iCACE;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAU;AAAA;AAAA,cACZ;AAAA,cACA,oBAAC,UAAK,WAAU,6CAA6C,eAAK,SAAQ;AAAA,eAC5E;AAEF,kBAAM,SAAS;AAAA,cACb,cAAc,KAAK;AAAA,cACnB,OAAO,KAAK,OAAO,SAAY,KAAK;AAAA,cACpC,WAAW;AAAA,cACX,OAAO,EAAE,YAAY,gBAAgB;AAAA,YACvC;AAEA,mBACE,qBAAC,MAAM,UAAN,EACE;AAAA,kBAAI,KACH;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAU;AAAA,kBACV,OAAO,EAAE,WAAW,oBAAoB;AAAA;AAAA,cAC1C;AAAA,cAED,KAAK,OACJ,oBAAC,OAAE,MAAM,KAAK,MAAO,GAAG,QACrB,iBACH,IAEA,oBAAC,YAAO,MAAK,UAAS,SAAS,KAAK,SAAU,GAAG,QAC9C,iBACH;AAAA,iBAfiB,KAAK,KAiB1B;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}