@particle-academy/react-fancy 5.51.2 → 5.52.0

package/dist/{chunk-QW66UHWO.cjs.map → chunk-KE4XURZD.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AudioViewer/AudioViewer.tsx"],"names":["forwardRef","useState","jsxs","cn","jsx"],"mappings":";;;;;;AAYO,IAAM,WAAA,GAAcA,gBAAA;AAAA,EACzB,CACE;AAAA,IACE,GAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW,IAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,IAAA,GAAO,KAAA;AAAA,IACP,OAAA,GAAU,UAAA;AAAA,IACV,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE5C,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,+BAAA,EAA8B,EAAA;AAAA,QAC9B,SAAA,EAAWC,oBAAA;AAAA,UACT,0GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+DAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,0BACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EAA2C,kCAE1D,CAAA,mBAEAA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,OAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAS,MAAM;AACb,gBAAA,UAAA,CAAW,IAAI,CAAA;AACf,gBAAA,OAAA,IAAU;AAAA,cACZ,CAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-QW66UHWO.cjs","sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AudioViewerProps } from \"./AudioViewer.types\";\n\n/**\n * A standalone audio viewer — a themed card wrapping the native audio player,\n * with an optional title. Renders for audio sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <AudioViewer src=\"/track.mp3\" title=\"track.mp3\" />\n * ```\n */\nexport const AudioViewer = forwardRef<HTMLDivElement, AudioViewerProps>(\n  (\n    {\n      src,\n      title,\n      controls = true,\n      autoPlay = false,\n      loop = false,\n      preload = \"metadata\",\n      onError,\n      className,\n      style,\n    },\n    ref,\n  ) => {\n    const [errored, setErrored] = useState(false);\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-audio-viewer=\"\"\n        className={cn(\n          \"flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900\",\n          className,\n        )}\n        style={style}\n      >\n        {title && (\n          <div className=\"truncate text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n            {title}\n          </div>\n        )}\n        {errored ? (\n          <div className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n            Couldn&apos;t load audio.\n          </div>\n        ) : (\n          <audio\n            src={src}\n            preload={preload}\n            controls={controls}\n            autoPlay={autoPlay}\n            loop={loop}\n            onError={() => {\n              setErrored(true);\n              onError?.();\n            }}\n            className=\"w-full\"\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAudioViewer.displayName = \"AudioViewer\";\n"]}
+{"version":3,"sources":["../src/components/AudioViewer/AudioViewer.tsx"],"names":["forwardRef","useState","jsxs","cn","jsx"],"mappings":";;;;;;AAYO,IAAM,WAAA,GAAcA,gBAAA;AAAA,EACzB,CACE;AAAA,IACE,GAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW,IAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,IAAA,GAAO,KAAA;AAAA,IACP,OAAA,GAAU,UAAA;AAAA,IACV,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE5C,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,+BAAA,EAA8B,EAAA;AAAA,QAC9B,SAAA,EAAWC,oBAAA;AAAA,UACT,0RAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+DAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,0BACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yIAAA,EAA0I,kCAEzJ,CAAA,mBAEAA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,OAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAS,MAAM;AACb,gBAAA,UAAA,CAAW,IAAI,CAAA;AACf,gBAAA,OAAA,IAAU;AAAA,cACZ,CAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-KE4XURZD.cjs","sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AudioViewerProps } from \"./AudioViewer.types\";\n\n/**\n * A standalone audio viewer — a themed card wrapping the native audio player,\n * with an optional title. Renders for audio sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <AudioViewer src=\"/track.mp3\" title=\"track.mp3\" />\n * ```\n */\nexport const AudioViewer = forwardRef<HTMLDivElement, AudioViewerProps>(\n  (\n    {\n      src,\n      title,\n      controls = true,\n      autoPlay = false,\n      loop = false,\n      preload = \"metadata\",\n      onError,\n      className,\n      style,\n    },\n    ref,\n  ) => {\n    const [errored, setErrored] = useState(false);\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-audio-viewer=\"\"\n        className={cn(\n          \"flex flex-col gap-2 rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n        style={style}\n      >\n        {title && (\n          <div className=\"truncate text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n            {title}\n          </div>\n        )}\n        {errored ? (\n          <div className=\"text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">\n            Couldn&apos;t load audio.\n          </div>\n        ) : (\n          <audio\n            src={src}\n            preload={preload}\n            controls={controls}\n            autoPlay={autoPlay}\n            loop={loop}\n            onError={() => {\n              setErrored(true);\n              onError?.();\n            }}\n            className=\"w-full\"\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAudioViewer.displayName = \"AudioViewer\";\n"]}

package/dist/{chunk-JFOORUUD.cjs → chunk-KNKOSMOQ.cjs}

@@ -18,7 +18,7 @@ function BreadcrumbsItem({
 }) {
   const baseClass = chunkZU5Q77OT_cjs.cn(
     "text-sm",
-    active ? "font-medium text-zinc-900 dark:text-white" : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300",
+    active ? "font-medium text-zinc-900 dark:text-white" : "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]",
     className
   );
   if ((href || As) && !active) {
@@ -62,17 +62,17 @@ function BreadcrumbsDropdown({ items, activeLabel }) {
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
-        className: "flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-800",
+        className: "flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-white dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
         children: [
           activeLabel,
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14, className: chunkZU5Q77OT_cjs.cn("transition-transform", open && "rotate-180") })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900", children: items.map((item, i) => {
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]", children: items.map((item, i) => {
       const cls = chunkZU5Q77OT_cjs.cn(
         "block w-full px-3 py-1.5 text-left text-sm",
-        item.active ? "font-medium text-zinc-900 dark:text-white" : "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+        item.active ? "font-medium text-zinc-900 dark:text-white" : "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]"
       );
       if (item.href && !item.active) {
         return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, onClick: () => setOpen(false), children: item.label }, i);
@@ -137,5 +137,5 @@ var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
 });
 
 exports.Breadcrumbs = Breadcrumbs;
-//# sourceMappingURL=chunk-JFOORUUD.cjs.map
-//# sourceMappingURL=chunk-JFOORUUD.cjs.map
+//# sourceMappingURL=chunk-KNKOSMOQ.cjs.map
+//# sourceMappingURL=chunk-KNKOSMOQ.cjs.map

package/dist/chunk-KNKOSMOQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumbs/BreadcrumbsItem.tsx","../src/components/Breadcrumbs/BreadcrumbsDropdown.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["cn","jsx","useState","useRef","useOutsideClick","useEscapeKey","jsxs","ChevronDown","Children","ChevronRight","Fragment"],"mappings":"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","file":"chunk-KNKOSMOQ.cjs","sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nexport function BreadcrumbsItem({\n  children,\n  href,\n  as: As,\n  active = false,\n  onClick,\n  className,\n  ...rest\n}: BreadcrumbsItemProps) {\n  const baseClass = cn(\n    \"text-sm\",\n    active\n      ? \"font-medium text-zinc-900 dark:text-white\"\n      : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n    className,\n  );\n\n  // The CURRENT crumb stays a <span> even with `as`: it is the page you are on,\n  // so a link to it is a link to nowhere, and `aria-current=\"page\"` is the point.\n  if ((href || As) && !active) {\n    const Link = (As ?? \"a\") as ElementType;\n\n    return (\n      <Link\n        data-react-fancy-breadcrumbs-item=\"\"\n        {...(href ? { href } : {})}\n        onClick={onClick}\n        className={baseClass}\n        {...rest}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  // A crumb that navigates through a callback rather than a URL. Controlled\n  // components own their navigation and have no href to give — a repository\n  // browser walking directories, a wizard stepping back — and until this\n  // existed the only way to make such a crumb clickable was to nest a button\n  // inside the span below, which is interactive content inside a non-\n  // interactive element.\n  if (onClick && !active) {\n    return (\n      <button\n        type=\"button\"\n        data-react-fancy-breadcrumbs-item=\"\"\n        onClick={onClick}\n        className={cn(baseClass, \"cursor-pointer border-0 bg-transparent p-0\")}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n\n  return (\n    <span data-react-fancy-breadcrumbs-item=\"\" className={baseClass} aria-current={active ? \"page\" : undefined} {...rest}>\n      {children}\n    </span>\n  );\n}\n\nBreadcrumbsItem.displayName = \"BreadcrumbsItem\";\n","import { useState, useRef, type ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\n\ninterface BreadcrumbsDropdownItem {\n  label: ReactNode;\n  href?: string;\n  active?: boolean;\n}\n\ninterface BreadcrumbsDropdownProps {\n  items: BreadcrumbsDropdownItem[];\n  activeLabel: ReactNode;\n}\n\nexport function BreadcrumbsDropdown({ items, activeLabel }: BreadcrumbsDropdownProps) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useOutsideClick(ref, () => setOpen(false), open);\n  useEscapeKey(() => setOpen(false), open);\n\n  return (\n    <div ref={ref} data-react-fancy-breadcrumbs-dropdown=\"\" className=\"relative flex md:hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-white dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n      >\n        {activeLabel}\n        <ChevronDown size={14} className={cn(\"transition-transform\", open && \"rotate-180\")} />\n      </button>\n      {open && (\n        <div className=\"absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n          {items.map((item, i) => {\n            const cls = cn(\n              \"block w-full px-3 py-1.5 text-left text-sm\",\n              item.active\n                ? \"font-medium text-zinc-900 dark:text-white\"\n                : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n            );\n\n            if (item.href && !item.active) {\n              return (\n                <a key={i} href={item.href} className={cls} onClick={() => setOpen(false)}>\n                  {item.label}\n                </a>\n              );\n            }\n\n            return (\n              <span key={i} className={cls}>\n                {item.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nBreadcrumbsDropdown.displayName = \"BreadcrumbsDropdown\";\n","import { Children, Fragment, useState, type ReactElement } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { BreadcrumbsItem } from \"./BreadcrumbsItem\";\nimport { BreadcrumbsDropdown } from \"./BreadcrumbsDropdown\";\nimport type { BreadcrumbsProps, BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nfunction BreadcrumbsRoot({\n  children,\n  separator,\n  shrink,\n  className,\n}: BreadcrumbsProps) {\n  const items = Children.toArray(children);\n  const [expanded, setExpanded] = useState(false);\n\n  const sep = separator ?? (\n    <ChevronRight size={12} className=\"text-zinc-400\" />\n  );\n\n  const lastItem = items[items.length - 1];\n\n  // Extract info from children for mobile dropdown\n  const dropdownItems = items.map((child) => {\n    const el = child as ReactElement<BreadcrumbsItemProps>;\n    return {\n      label: el.props?.children,\n      href: el.props?.href,\n      active: el.props?.active,\n    };\n  });\n\n  const activeLabel = dropdownItems[dropdownItems.length - 1]?.label ?? \"Menu\";\n\n  const showShrunk = shrink && !expanded && items.length > 1;\n\n  return (\n    <>\n      {/* Desktop trail */}\n      <nav\n        data-react-fancy-breadcrumbs=\"\"\n        aria-label=\"Breadcrumb\"\n        className={cn(\"hidden items-center gap-2 md:flex\", className)}\n        onMouseLeave={() => shrink && setExpanded(false)}\n      >\n        {showShrunk ? (\n          <>\n            <button\n              type=\"button\"\n              onClick={() => setExpanded(true)}\n              onMouseEnter={() => setExpanded(true)}\n              className=\"text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n            >\n              ...\n            </button>\n            <span aria-hidden=\"true\">{sep}</span>\n            {lastItem}\n          </>\n        ) : (\n          items.map((child, i) => (\n            <Fragment key={i}>\n              {i > 0 && <span aria-hidden=\"true\">{sep}</span>}\n              {child}\n            </Fragment>\n          ))\n        )}\n      </nav>\n\n      {/* Mobile dropdown */}\n      <BreadcrumbsDropdown items={dropdownItems} activeLabel={activeLabel} />\n    </>\n  );\n}\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item: BreadcrumbsItem,\n});\n"]}

package/dist/{chunk-LLA33GKC.cjs → chunk-KSU6RYWU.cjs}

@@ -53,7 +53,7 @@ var Pillbox = react.forwardRef(
         "data-react-fancy-pillbox": "",
         ref,
         className: chunkZU5Q77OT_cjs.cn(
-          "flex flex-wrap items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 py-2 transition-[border-color,box-shadow] duration-150 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20",
+          "flex flex-wrap items-center gap-1.5 rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-input,var(--color-white))] px-3 py-2 transition-[border-color,box-shadow] duration-150 focus-within:border-[color:var(--fancy-focus,var(--color-blue-500))] focus-within:ring-2 focus-within:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-input-dark,#1e1e24)] dark:text-zinc-100 dark:focus-within:border-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus-within:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -62,7 +62,7 @@ var Pillbox = react.forwardRef(
           items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              className: "inline-flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-0.5 text-sm dark:bg-zinc-800",
+              className: "inline-flex items-center gap-1 rounded-md bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] px-2 py-0.5 text-sm dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
               children: [
                 item,
                 !disabled && /* @__PURE__ */ jsxRuntime.jsx(
@@ -103,5 +103,5 @@ var Pillbox = react.forwardRef(
 Pillbox.displayName = "Pillbox";
 
 exports.Pillbox = Pillbox;
-//# sourceMappingURL=chunk-LLA33GKC.cjs.map
-//# sourceMappingURL=chunk-LLA33GKC.cjs.map
+//# sourceMappingURL=chunk-KSU6RYWU.cjs.map
+//# sourceMappingURL=chunk-KSU6RYWU.cjs.map

package/dist/chunk-KSU6RYWU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Pillbox/Pillbox.tsx"],"names":["forwardRef","Pillbox","useControllableState","useState","useRef","useCallback","jsxs","cn","jsx","X"],"mappings":"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","file":"chunk-KSU6RYWU.cjs","sourcesContent":["import { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { PillboxProps } from \"./Pillbox.types\";\n\nexport const Pillbox = forwardRef<HTMLDivElement, PillboxProps>(\n  function Pillbox(\n    {\n      value: controlledValue,\n      defaultValue = [],\n      onChange,\n      placeholder = \"Type and press Enter...\",\n      maxItems,\n      disabled = false,\n      className,\n    },\n    ref,\n  ) {\n    const [items, setItems] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const [input, setInput] = useState(\"\");\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const addItem = useCallback(\n      (text: string) => {\n        const trimmed = text.trim();\n        if (!trimmed || items.includes(trimmed)) return;\n        if (maxItems && items.length >= maxItems) return;\n        setItems([...items, trimmed]);\n        setInput(\"\");\n      },\n      [items, setItems, maxItems],\n    );\n\n    const removeItem = useCallback(\n      (index: number) => {\n        setItems(items.filter((_, i) => i !== index));\n      },\n      [items, setItems],\n    );\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n        addItem(input);\n      } else if (e.key === \"Backspace\" && !input && items.length > 0) {\n        removeItem(items.length - 1);\n      }\n    };\n\n    return (\n      <div\n        data-react-fancy-pillbox=\"\"\n        ref={ref}\n        className={cn(\n          \"flex flex-wrap items-center gap-1.5 rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-input,var(--color-white))] px-3 py-2 transition-[border-color,box-shadow] duration-150 focus-within:border-[color:var(--fancy-focus,var(--color-blue-500))] focus-within:ring-2 focus-within:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-input-dark,#1e1e24)] dark:text-zinc-100 dark:focus-within:border-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus-within:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        onClick={() => inputRef.current?.focus()}\n      >\n        {items.map((item, i) => (\n          <span\n            key={`${item}-${i}`}\n            className=\"inline-flex items-center gap-1 rounded-md bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] px-2 py-0.5 text-sm dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n          >\n            {item}\n            {!disabled && (\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  removeItem(i);\n                }}\n                className=\"text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n                aria-label={`Remove ${item}`}\n              >\n                <X size={12} />\n              </button>\n            )}\n          </span>\n        ))}\n        <input\n          ref={inputRef}\n          type=\"text\"\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={items.length === 0 ? placeholder : \"\"}\n          disabled={disabled}\n          className=\"min-w-[80px] flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-400\"\n        />\n      </div>\n    );\n  },\n);\n\nPillbox.displayName = \"Pillbox\";\n"]}

package/dist/{chunk-PWEZCMIY.js → chunk-KXYMMNNV.js}

@@ -15,7 +15,7 @@ var insidePaddingRight = {
   lg: "[&_input]:pr-10 [&_select]:pr-10 [&_textarea]:pr-10",
   xl: "[&_input]:pr-11 [&_select]:pr-11 [&_textarea]:pr-11"
 };
-var affixOutsideClasses = "inline-flex items-center border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400";
+var affixOutsideClasses = "inline-flex items-center border border-[color:var(--fancy-border-strong,var(--color-zinc-300))] bg-zinc-50 px-3 text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))] dark:bg-zinc-800 dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]";
 function InputWrapper({
   children,
   prefix,
@@ -43,7 +43,7 @@ function InputWrapper({
             hasInsidePrefix && "relative"
           ),
           children: [
-            hasInsidePrefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 z-10 text-zinc-400 dark:text-zinc-500", children: prefix }),
+            hasInsidePrefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: prefix }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -57,7 +57,7 @@ function InputWrapper({
                 children
               }
             ),
-            hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 z-10 text-zinc-400 dark:text-zinc-500", children: suffix })
+            hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: suffix })
           ]
         }
       ),
@@ -65,7 +65,7 @@ function InputWrapper({
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { "data-react-fancy-input-wrapper": "", className: "relative flex items-center", children: [
-    hasInsidePrefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 z-10 text-zinc-400 dark:text-zinc-500", children: prefix }),
+    hasInsidePrefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: prefix }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -77,10 +77,10 @@ function InputWrapper({
         children
       }
     ),
-    hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 z-10 text-zinc-400 dark:text-zinc-500", children: suffix })
+    hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: suffix })
   ] });
 }
 
 export { InputWrapper };
-//# sourceMappingURL=chunk-PWEZCMIY.js.map
-//# sourceMappingURL=chunk-PWEZCMIY.js.map
+//# sourceMappingURL=chunk-KXYMMNNV.js.map
+//# sourceMappingURL=chunk-KXYMMNNV.js.map

package/dist/chunk-KXYMMNNV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/InputWrapper.tsx"],"names":[],"mappings":"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","file":"chunk-KXYMMNNV.js","sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AffixPosition } from \"./inputs.types\";\nimport type { Size } from \"../../utils/types\";\n\ninterface InputWrapperProps {\n  children: ReactNode;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  prefixPosition?: AffixPosition;\n  suffixPosition?: AffixPosition;\n  size?: Size;\n  /** Extra padding className to apply to the input when affixes are \"inside\" */\n  insidePrefixPadding?: string;\n  insideSuffixPadding?: string;\n}\n\n// NOTE: these must be COMPLETE, static class strings. Tailwind only detects\n// utilities it can see verbatim in the source — building the arbitrary variant\n// at runtime (e.g. `[&_input]:${\"pl-9\"}`) means `[&_input]:pl-9` is never\n// emitted to CSS, so the inside affix gets no padding and overlaps the text\n// (issue #6). Keep input/select/textarea spelled out here.\nconst insidePaddingLeft: Record<Size, string> = {\n  xs: \"[&_input]:pl-7 [&_select]:pl-7 [&_textarea]:pl-7\",\n  sm: \"[&_input]:pl-8 [&_select]:pl-8 [&_textarea]:pl-8\",\n  md: \"[&_input]:pl-9 [&_select]:pl-9 [&_textarea]:pl-9\",\n  lg: \"[&_input]:pl-10 [&_select]:pl-10 [&_textarea]:pl-10\",\n  xl: \"[&_input]:pl-11 [&_select]:pl-11 [&_textarea]:pl-11\",\n};\n\nconst insidePaddingRight: Record<Size, string> = {\n  xs: \"[&_input]:pr-7 [&_select]:pr-7 [&_textarea]:pr-7\",\n  sm: \"[&_input]:pr-8 [&_select]:pr-8 [&_textarea]:pr-8\",\n  md: \"[&_input]:pr-9 [&_select]:pr-9 [&_textarea]:pr-9\",\n  lg: \"[&_input]:pr-10 [&_select]:pr-10 [&_textarea]:pr-10\",\n  xl: \"[&_input]:pr-11 [&_select]:pr-11 [&_textarea]:pr-11\",\n};\n\nconst affixOutsideClasses =\n  \"inline-flex items-center border border-[color:var(--fancy-border-strong,var(--color-zinc-300))] bg-zinc-50 px-3 text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))] dark:bg-zinc-800 dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\";\n\nexport function InputWrapper({\n  children,\n  prefix,\n  suffix,\n  prefixPosition = \"inside\",\n  suffixPosition = \"inside\",\n  size = \"md\",\n}: InputWrapperProps) {\n  const hasInsidePrefix = prefix && prefixPosition === \"inside\";\n  const hasInsideSuffix = suffix && suffixPosition === \"inside\";\n  const hasOutsidePrefix = prefix && prefixPosition === \"outside\";\n  const hasOutsideSuffix = suffix && suffixPosition === \"outside\";\n  const hasOutside = hasOutsidePrefix || hasOutsideSuffix;\n\n  if (!prefix && !suffix) {\n    return <>{children}</>;\n  }\n\n  if (hasOutside) {\n    return (\n      <div data-react-fancy-input-wrapper=\"\" className=\"flex\">\n        {hasOutsidePrefix && (\n          <span className={cn(affixOutsideClasses, \"rounded-l-lg border-r-0\")}>\n            {prefix}\n          </span>\n        )}\n        <div\n          className={cn(\n            \"relative flex flex-1 items-center\",\n            hasInsidePrefix && \"relative\",\n          )}\n        >\n          {hasInsidePrefix && (\n            <span className=\"pointer-events-none absolute left-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n              {prefix}\n            </span>\n          )}\n          <div\n            className={cn(\n              \"w-full [&>*]:w-full\",\n              hasOutsidePrefix && !hasOutsideSuffix && \"[&_input]:rounded-l-none [&_select]:rounded-l-none [&_textarea]:rounded-l-none\",\n              !hasOutsidePrefix && hasOutsideSuffix && \"[&_input]:rounded-r-none [&_select]:rounded-r-none [&_textarea]:rounded-r-none\",\n              hasOutsidePrefix && hasOutsideSuffix && \"[&_input]:rounded-none [&_select]:rounded-none [&_textarea]:rounded-none\",\n              hasInsidePrefix && insidePaddingLeft[size],\n            )}\n          >\n            {children}\n          </div>\n          {hasInsideSuffix && (\n            <span className=\"pointer-events-none absolute right-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n              {suffix}\n            </span>\n          )}\n        </div>\n        {hasOutsideSuffix && (\n          <span className={cn(affixOutsideClasses, \"rounded-r-lg border-l-0\")}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  // Both inside\n  return (\n    <div data-react-fancy-input-wrapper=\"\" className=\"relative flex items-center\">\n      {hasInsidePrefix && (\n        <span className=\"pointer-events-none absolute left-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n          {prefix}\n        </span>\n      )}\n      <div\n        className={cn(\n          \"w-full\",\n          hasInsidePrefix && insidePaddingLeft[size],\n          hasInsideSuffix && insidePaddingRight[size],\n        )}\n      >\n        {children}\n      </div>\n      {hasInsideSuffix && (\n        <span className=\"pointer-events-none absolute right-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n          {suffix}\n        </span>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-SUCBR6L5.cjs → chunk-L4JIBKFW.cjs}

@@ -25,7 +25,7 @@ var Kbd = react.forwardRef(
             className: chunkZU5Q77OT_cjs.cn("inline-flex items-center gap-1 font-mono not-italic", className),
             ...props,
             children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-              i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-zinc-400 dark:text-zinc-500", children: separator }),
+              i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: separator }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkZU5Q77OT_cjs.cn(capClasses, sizeClasses[size]), children: k })
             ] }, i))
           }
@@ -47,5 +47,5 @@ var Kbd = react.forwardRef(
 Kbd.displayName = "Kbd";
 
 exports.Kbd = Kbd;
-//# sourceMappingURL=chunk-SUCBR6L5.cjs.map
-//# sourceMappingURL=chunk-SUCBR6L5.cjs.map
+//# sourceMappingURL=chunk-L4JIBKFW.cjs.map
+//# sourceMappingURL=chunk-L4JIBKFW.cjs.map

package/dist/{chunk-SUCBR6L5.cjs.map → chunk-L4JIBKFW.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Kbd/Kbd.tsx"],"names":["forwardRef","jsx","cn","Fragment"],"mappings":";;;;;;AAIA,IAAM,WAAA,GAA6D;AAAA,EACjE,EAAA,EAAI,uCAAA;AAAA,EACJ,EAAA,EAAI,wCAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GACJ,wKAAA;AAgBK,IAAM,GAAA,GAAMA,gBAAA;AAAA,EACjB,CAAC,EAAE,IAAA,EAAM,SAAA,GAAY,GAAA,EAAK,IAAA,GAAO,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC9E,IAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,MAAA;AAAA;AAAA;AAAA;AAAA,wBAIEC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,sBAAA,EAAqB,EAAA;AAAA,YACrB,SAAA,EAAWC,oBAAA,CAAG,qDAAA,EAAuD,SAAS,CAAA;AAAA,YAC7E,GAAG,KAAA;AAAA,YAEH,eAAK,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qCACXC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,CAAA,GAAI,qBACHF,cAAA,CAAC,MAAA,EAAA,EAAK,eAAW,IAAA,EAAC,SAAA,EAAU,oCACzB,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,8BAEFA,cAAA,CAAC,UAAK,SAAA,EAAWC,oBAAA,CAAG,YAAY,WAAA,CAAY,IAAI,CAAC,CAAA,EAAI,QAAA,EAAA,CAAA,EAAE;AAAA,aAAA,EAAA,EAN1C,CAOf,CACD;AAAA;AAAA;AACH;AAAA,IAEJ;AAEA,IAAA,uBACED,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,sBAAA,EAAqB,EAAA;AAAA,QACrB,WAAWC,oBAAA,CAAG,UAAA,EAAY,YAAY,IAAI,CAAA,EAAG,cAAc,SAAS,CAAA;AAAA,QACnE,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,GAAA,CAAI,WAAA,GAAc,KAAA","file":"chunk-SUCBR6L5.cjs","sourcesContent":["import { forwardRef, Fragment } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { KbdProps } from \"./Kbd.types\";\n\nconst sizeClasses: Record<NonNullable<KbdProps[\"size\"]>, string> = {\n  xs: \"min-w-[1.25rem] px-1 py-px text-[9px]\",\n  sm: \"min-w-[1.4rem] px-1 py-0.5 text-[10px]\",\n  md: \"min-w-[1.6rem] px-1.5 py-0.5 text-xs\",\n};\n\nconst capClasses =\n  \"inline-grid place-items-center rounded border border-zinc-300 bg-zinc-50 \" +\n  \"font-mono leading-none text-zinc-700 \" +\n  \"dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300\";\n\n/**\n * A keyboard key cap — `<Kbd>K</Kbd>`, or a chord via `<Kbd keys={[\"Cmd\",\"K\"]} />`.\n *\n * Twenty `<kbd>` elements across this suite's own showcase carried six\n * different className recipes for the same thing: rounded, bordered, mono,\n * small, with a dark-mode counterpart. None of them disagreed on intent; they\n * disagreed on which greys.\n *\n * `min-w` is the detail worth having in one place: without it a `K` cap is\n * visibly narrower than an `Esc` cap beside it, and a row of single letters\n * reads as ragged rather than as keys.\n */\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(\n  ({ keys, separator = \"+\", size = \"sm\", className, children, ...props }, ref) => {\n    if (keys?.length) {\n      return (\n        // The chord is ONE <kbd> containing per-key caps: a screen reader\n        // announces \"Cmd + K\" as a unit, which is what it is, rather than as\n        // two unrelated keys.\n        <kbd\n          ref={ref}\n          data-react-fancy-kbd=\"\"\n          className={cn(\"inline-flex items-center gap-1 font-mono not-italic\", className)}\n          {...props}\n        >\n          {keys.map((k, i) => (\n            <Fragment key={i}>\n              {i > 0 && (\n                <span aria-hidden className=\"text-zinc-400 dark:text-zinc-500\">\n                  {separator}\n                </span>\n              )}\n              <span className={cn(capClasses, sizeClasses[size])}>{k}</span>\n            </Fragment>\n          ))}\n        </kbd>\n      );\n    }\n\n    return (\n      <kbd\n        ref={ref}\n        data-react-fancy-kbd=\"\"\n        className={cn(capClasses, sizeClasses[size], \"not-italic\", className)}\n        {...props}\n      >\n        {children}\n      </kbd>\n    );\n  },\n);\n\nKbd.displayName = \"Kbd\";\n"]}
+{"version":3,"sources":["../src/components/Kbd/Kbd.tsx"],"names":["forwardRef","jsx","cn","Fragment"],"mappings":";;;;;;AAIA,IAAM,WAAA,GAA6D;AAAA,EACjE,EAAA,EAAI,uCAAA;AAAA,EACJ,EAAA,EAAI,wCAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GACJ,wKAAA;AAgBK,IAAM,GAAA,GAAMA,gBAAA;AAAA,EACjB,CAAC,EAAE,IAAA,EAAM,SAAA,GAAY,GAAA,EAAK,IAAA,GAAO,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC9E,IAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,MAAA;AAAA;AAAA;AAAA;AAAA,wBAIEC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,sBAAA,EAAqB,EAAA;AAAA,YACrB,SAAA,EAAWC,oBAAA,CAAG,qDAAA,EAAuD,SAAS,CAAA;AAAA,YAC7E,GAAG,KAAA;AAAA,YAEH,eAAK,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qCACXC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,CAAA,GAAI,qBACHF,cAAA,CAAC,MAAA,EAAA,EAAK,eAAW,IAAA,EAAC,SAAA,EAAU,mIACzB,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,8BAEFA,cAAA,CAAC,UAAK,SAAA,EAAWC,oBAAA,CAAG,YAAY,WAAA,CAAY,IAAI,CAAC,CAAA,EAAI,QAAA,EAAA,CAAA,EAAE;AAAA,aAAA,EAAA,EAN1C,CAOf,CACD;AAAA;AAAA;AACH;AAAA,IAEJ;AAEA,IAAA,uBACED,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,sBAAA,EAAqB,EAAA;AAAA,QACrB,WAAWC,oBAAA,CAAG,UAAA,EAAY,YAAY,IAAI,CAAA,EAAG,cAAc,SAAS,CAAA;AAAA,QACnE,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,GAAA,CAAI,WAAA,GAAc,KAAA","file":"chunk-L4JIBKFW.cjs","sourcesContent":["import { forwardRef, Fragment } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { KbdProps } from \"./Kbd.types\";\n\nconst sizeClasses: Record<NonNullable<KbdProps[\"size\"]>, string> = {\n  xs: \"min-w-[1.25rem] px-1 py-px text-[9px]\",\n  sm: \"min-w-[1.4rem] px-1 py-0.5 text-[10px]\",\n  md: \"min-w-[1.6rem] px-1.5 py-0.5 text-xs\",\n};\n\nconst capClasses =\n  \"inline-grid place-items-center rounded border border-zinc-300 bg-zinc-50 \" +\n  \"font-mono leading-none text-zinc-700 \" +\n  \"dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300\";\n\n/**\n * A keyboard key cap — `<Kbd>K</Kbd>`, or a chord via `<Kbd keys={[\"Cmd\",\"K\"]} />`.\n *\n * Twenty `<kbd>` elements across this suite's own showcase carried six\n * different className recipes for the same thing: rounded, bordered, mono,\n * small, with a dark-mode counterpart. None of them disagreed on intent; they\n * disagreed on which greys.\n *\n * `min-w` is the detail worth having in one place: without it a `K` cap is\n * visibly narrower than an `Esc` cap beside it, and a row of single letters\n * reads as ragged rather than as keys.\n */\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(\n  ({ keys, separator = \"+\", size = \"sm\", className, children, ...props }, ref) => {\n    if (keys?.length) {\n      return (\n        // The chord is ONE <kbd> containing per-key caps: a screen reader\n        // announces \"Cmd + K\" as a unit, which is what it is, rather than as\n        // two unrelated keys.\n        <kbd\n          ref={ref}\n          data-react-fancy-kbd=\"\"\n          className={cn(\"inline-flex items-center gap-1 font-mono not-italic\", className)}\n          {...props}\n        >\n          {keys.map((k, i) => (\n            <Fragment key={i}>\n              {i > 0 && (\n                <span aria-hidden className=\"text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n                  {separator}\n                </span>\n              )}\n              <span className={cn(capClasses, sizeClasses[size])}>{k}</span>\n            </Fragment>\n          ))}\n        </kbd>\n      );\n    }\n\n    return (\n      <kbd\n        ref={ref}\n        data-react-fancy-kbd=\"\"\n        className={cn(capClasses, sizeClasses[size], \"not-italic\", className)}\n        {...props}\n      >\n        {children}\n      </kbd>\n    );\n  },\n);\n\nKbd.displayName = \"Kbd\";\n"]}

package/dist/{chunk-VGBZWDMM.cjs → chunk-LIVC3WUU.cjs}

@@ -12,7 +12,7 @@ var Eyebrow = react.forwardRef(
         ref,
         "data-react-fancy-eyebrow": "",
         className: chunkZU5Q77OT_cjs.cn(
-          "flex items-baseline gap-3 font-mono text-[11.5px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400",
+          "flex items-baseline gap-3 font-mono text-[11.5px] uppercase tracking-wider text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
           rule && "border-b border-zinc-200 pb-2 dark:border-zinc-800",
           className
         ),
@@ -20,7 +20,7 @@ var Eyebrow = react.forwardRef(
         children: [
           children ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             num != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: num }),
+              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "font-medium text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]", children: num }),
               label != null && " \u2014 "
             ] }),
             label
@@ -34,5 +34,5 @@ var Eyebrow = react.forwardRef(
 Eyebrow.displayName = "Eyebrow";
 
 exports.Eyebrow = Eyebrow;
-//# sourceMappingURL=chunk-VGBZWDMM.cjs.map
-//# sourceMappingURL=chunk-VGBZWDMM.cjs.map
+//# sourceMappingURL=chunk-LIVC3WUU.cjs.map
+//# sourceMappingURL=chunk-LIVC3WUU.cjs.map

package/dist/{chunk-VGBZWDMM.cjs.map → chunk-LIVC3WUU.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Eyebrow/Eyebrow.tsx"],"names":["forwardRef","jsxs","cn","Fragment","jsx"],"mappings":";;;;;;AAkBO,IAAM,OAAA,GAAUA,gBAAA;AAAA,EACrB,CAAC,EAAE,GAAA,EAAK,KAAA,EAAO,KAAA,EAAO,IAAA,GAAO,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC3E,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,0BAAA,EAAyB,EAAA;AAAA,QACzB,SAAA,EAAWC,oBAAA;AAAA,UACT,6GAAA;AAAA,UACA,IAAA,IAAQ,oDAAA;AAAA,UACR;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA,oCACE,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,YAAA,GAAA,IAAO,wBACND,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAAC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,QAAA,EAAA,GAAA,EAAI,CAAA;AAAA,cAChE,SAAS,IAAA,IAAQ;AAAA,aAAA,EACpB,CAAA;AAAA,YAED;AAAA,WAAA,EACH,CAAA;AAAA,UAKD,SAAS,IAAA,oBAAQA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAW,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KACrD;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-VGBZWDMM.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { EyebrowProps } from \"./Eyebrow.types\";\n\n/**\n * The mono running head that opens a section — `01 — SELECTED WORK`, optionally\n * over a hairline rule, with a second item pushed to the far end.\n *\n * Thirty-six surfaces in the Inspiration Gallery carry some version of this. It\n * is a small component for a reason: what they share is the STRUCTURE (a\n * numbered marker, a label, an optional trailing aside, an optional rule) while\n * every one of them restyles the type. So this owns the arrangement and the\n * uppercase mono default, and gets out of the way of `className`.\n *\n * `num` is emphasised rather than styled a fixed colour, because in half the\n * designs it is the only part of the line that is not muted — and expressing\n * that with a `<b>` keeps it meaningful when the styling is replaced wholesale.\n */\nexport const Eyebrow = forwardRef<HTMLDivElement, EyebrowProps>(\n  ({ num, label, aside, rule = false, className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-eyebrow=\"\"\n        className={cn(\n          \"flex items-baseline gap-3 font-mono text-[11.5px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400\",\n          rule && \"border-b border-zinc-200 pb-2 dark:border-zinc-800\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <span>\n            {num != null && (\n              <>\n                <b className=\"font-medium text-zinc-900 dark:text-zinc-100\">{num}</b>\n                {label != null && \" — \"}\n              </>\n            )}\n            {label}\n          </span>\n        )}\n\n        {/* `ml-auto` rather than `justify-between`, so a single-item eyebrow\n            still sits flush left instead of being centred by the gap. */}\n        {aside != null && <span className=\"ml-auto\">{aside}</span>}\n      </div>\n    );\n  },\n);\n\nEyebrow.displayName = \"Eyebrow\";\n"]}
+{"version":3,"sources":["../src/components/Eyebrow/Eyebrow.tsx"],"names":["forwardRef","jsxs","cn","Fragment","jsx"],"mappings":";;;;;;AAkBO,IAAM,OAAA,GAAUA,gBAAA;AAAA,EACrB,CAAC,EAAE,GAAA,EAAK,KAAA,EAAO,KAAA,EAAO,IAAA,GAAO,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC3E,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,0BAAA,EAAyB,EAAA;AAAA,QACzB,SAAA,EAAWC,oBAAA;AAAA,UACT,4MAAA;AAAA,UACA,IAAA,IAAQ,oDAAA;AAAA,UACR;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA,oCACE,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,YAAA,GAAA,IAAO,wBACND,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAAC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iIAAA,EAAmI,QAAA,EAAA,GAAA,EAAI,CAAA;AAAA,cACnJ,SAAS,IAAA,IAAQ;AAAA,aAAA,EACpB,CAAA;AAAA,YAED;AAAA,WAAA,EACH,CAAA;AAAA,UAKD,SAAS,IAAA,oBAAQA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAW,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KACrD;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-LIVC3WUU.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { EyebrowProps } from \"./Eyebrow.types\";\n\n/**\n * The mono running head that opens a section — `01 — SELECTED WORK`, optionally\n * over a hairline rule, with a second item pushed to the far end.\n *\n * Thirty-six surfaces in the Inspiration Gallery carry some version of this. It\n * is a small component for a reason: what they share is the STRUCTURE (a\n * numbered marker, a label, an optional trailing aside, an optional rule) while\n * every one of them restyles the type. So this owns the arrangement and the\n * uppercase mono default, and gets out of the way of `className`.\n *\n * `num` is emphasised rather than styled a fixed colour, because in half the\n * designs it is the only part of the line that is not muted — and expressing\n * that with a `<b>` keeps it meaningful when the styling is replaced wholesale.\n */\nexport const Eyebrow = forwardRef<HTMLDivElement, EyebrowProps>(\n  ({ num, label, aside, rule = false, className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-eyebrow=\"\"\n        className={cn(\n          \"flex items-baseline gap-3 font-mono text-[11.5px] uppercase tracking-wider text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n          rule && \"border-b border-zinc-200 pb-2 dark:border-zinc-800\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <span>\n            {num != null && (\n              <>\n                <b className=\"font-medium text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\">{num}</b>\n                {label != null && \" — \"}\n              </>\n            )}\n            {label}\n          </span>\n        )}\n\n        {/* `ml-auto` rather than `justify-between`, so a single-item eyebrow\n            still sits flush left instead of being centred by the gap. */}\n        {aside != null && <span className=\"ml-auto\">{aside}</span>}\n      </div>\n    );\n  },\n);\n\nEyebrow.displayName = \"Eyebrow\";\n"]}

package/dist/{chunk-YF2EHBTV.js → chunk-LKN7FYW6.js}

@@ -42,7 +42,7 @@ function Pagination({
   );
   if (totalPages <= 1) return null;
   const btnBase = "inline-flex h-9 min-w-9 items-center justify-center rounded-lg border text-sm transition-colors";
-  const btnDefault = "border-zinc-200 bg-white hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:bg-zinc-800";
+  const btnDefault = "border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] hover:bg-zinc-50 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:hover:bg-zinc-800";
   const btnActive = "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900";
   const btnDisabled = "cursor-not-allowed opacity-50";
   return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", "data-react-fancy-pagination": "", className: cn("flex items-center gap-1", className), children: [
@@ -95,5 +95,5 @@ function Pagination({
 Pagination.displayName = "Pagination";
 
 export { Pagination };
-//# sourceMappingURL=chunk-YF2EHBTV.js.map
-//# sourceMappingURL=chunk-YF2EHBTV.js.map
+//# sourceMappingURL=chunk-LKN7FYW6.js.map
+//# sourceMappingURL=chunk-LKN7FYW6.js.map

package/dist/{chunk-YF2EHBTV.js.map → chunk-LKN7FYW6.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"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","file":"chunk-YF2EHBTV.js","sourcesContent":["import { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { PaginationProps } from \"./Pagination.types\";\n\nfunction range(start: number, end: number): number[] {\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n}\n\nfunction getPages(\n  page: number,\n  totalPages: number,\n  siblings: number,\n): (number | \"ellipsis\")[] {\n  const totalSlots = siblings * 2 + 5; // siblings + boundaries + ellipses + current\n  if (totalPages <= totalSlots) return range(1, totalPages);\n\n  const leftSibling = Math.max(page - siblings, 1);\n  const rightSibling = Math.min(page + siblings, totalPages);\n\n  const showLeftEllipsis = leftSibling > 2;\n  const showRightEllipsis = rightSibling < totalPages - 1;\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRange = range(1, 3 + siblings * 2);\n    return [...leftRange, \"ellipsis\", totalPages];\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightRange = range(totalPages - (2 + siblings * 2), totalPages);\n    return [1, \"ellipsis\", ...rightRange];\n  }\n\n  return [\n    1,\n    \"ellipsis\",\n    ...range(leftSibling, rightSibling),\n    \"ellipsis\",\n    totalPages,\n  ];\n}\n\nexport function Pagination({\n  page,\n  onPageChange,\n  totalPages,\n  siblingCount = 1,\n  className,\n}: PaginationProps) {\n  const pages = useMemo(\n    () => getPages(page, totalPages, siblingCount),\n    [page, totalPages, siblingCount],\n  );\n\n  if (totalPages <= 1) return null;\n\n  const btnBase =\n    \"inline-flex h-9 min-w-9 items-center justify-center rounded-lg border text-sm transition-colors\";\n  const btnDefault =\n    \"border-zinc-200 bg-white hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:bg-zinc-800\";\n  const btnActive =\n    \"border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900\";\n  const btnDisabled = \"cursor-not-allowed opacity-50\";\n\n  return (\n    <nav aria-label=\"Pagination\" data-react-fancy-pagination=\"\" className={cn(\"flex items-center gap-1\", className)}>\n      <button\n        type=\"button\"\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(btnBase, btnDefault, page <= 1 && btnDisabled, \"px-2\")}\n        aria-label=\"Previous page\"\n      >\n        <ChevronLeft size={16} />\n      </button>\n\n      {pages.map((p, i) =>\n        p === \"ellipsis\" ? (\n          <span key={`e-${i}`} className=\"px-1 text-zinc-400\">\n            ...\n          </span>\n        ) : (\n          <button\n            key={p}\n            type=\"button\"\n            onClick={() => onPageChange(p)}\n            aria-current={p === page ? \"page\" : undefined}\n            className={cn(\n              btnBase,\n              p === page ? btnActive : btnDefault,\n              \"px-2\",\n            )}\n          >\n            {p}\n          </button>\n        ),\n      )}\n\n      <button\n        type=\"button\"\n        disabled={page >= totalPages}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(\n          btnBase,\n          btnDefault,\n          page >= totalPages && btnDisabled,\n          \"px-2\",\n        )}\n        aria-label=\"Next page\"\n      >\n        <ChevronRight size={16} />\n      </button>\n    </nav>\n  );\n}\n\nPagination.displayName = \"Pagination\";\n"]}
+{"version":3,"sources":["../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"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","file":"chunk-LKN7FYW6.js","sourcesContent":["import { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { PaginationProps } from \"./Pagination.types\";\n\nfunction range(start: number, end: number): number[] {\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n}\n\nfunction getPages(\n  page: number,\n  totalPages: number,\n  siblings: number,\n): (number | \"ellipsis\")[] {\n  const totalSlots = siblings * 2 + 5; // siblings + boundaries + ellipses + current\n  if (totalPages <= totalSlots) return range(1, totalPages);\n\n  const leftSibling = Math.max(page - siblings, 1);\n  const rightSibling = Math.min(page + siblings, totalPages);\n\n  const showLeftEllipsis = leftSibling > 2;\n  const showRightEllipsis = rightSibling < totalPages - 1;\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRange = range(1, 3 + siblings * 2);\n    return [...leftRange, \"ellipsis\", totalPages];\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightRange = range(totalPages - (2 + siblings * 2), totalPages);\n    return [1, \"ellipsis\", ...rightRange];\n  }\n\n  return [\n    1,\n    \"ellipsis\",\n    ...range(leftSibling, rightSibling),\n    \"ellipsis\",\n    totalPages,\n  ];\n}\n\nexport function Pagination({\n  page,\n  onPageChange,\n  totalPages,\n  siblingCount = 1,\n  className,\n}: PaginationProps) {\n  const pages = useMemo(\n    () => getPages(page, totalPages, siblingCount),\n    [page, totalPages, siblingCount],\n  );\n\n  if (totalPages <= 1) return null;\n\n  const btnBase =\n    \"inline-flex h-9 min-w-9 items-center justify-center rounded-lg border text-sm transition-colors\";\n  const btnDefault =\n    \"border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] hover:bg-zinc-50 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:hover:bg-zinc-800\";\n  const btnActive =\n    \"border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900\";\n  const btnDisabled = \"cursor-not-allowed opacity-50\";\n\n  return (\n    <nav aria-label=\"Pagination\" data-react-fancy-pagination=\"\" className={cn(\"flex items-center gap-1\", className)}>\n      <button\n        type=\"button\"\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(btnBase, btnDefault, page <= 1 && btnDisabled, \"px-2\")}\n        aria-label=\"Previous page\"\n      >\n        <ChevronLeft size={16} />\n      </button>\n\n      {pages.map((p, i) =>\n        p === \"ellipsis\" ? (\n          <span key={`e-${i}`} className=\"px-1 text-zinc-400\">\n            ...\n          </span>\n        ) : (\n          <button\n            key={p}\n            type=\"button\"\n            onClick={() => onPageChange(p)}\n            aria-current={p === page ? \"page\" : undefined}\n            className={cn(\n              btnBase,\n              p === page ? btnActive : btnDefault,\n              \"px-2\",\n            )}\n          >\n            {p}\n          </button>\n        ),\n      )}\n\n      <button\n        type=\"button\"\n        disabled={page >= totalPages}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(\n          btnBase,\n          btnDefault,\n          page >= totalPages && btnDisabled,\n          \"px-2\",\n        )}\n        aria-label=\"Next page\"\n      >\n        <ChevronRight size={16} />\n      </button>\n    </nav>\n  );\n}\n\nPagination.displayName = \"Pagination\";\n"]}

package/dist/{chunk-RPVCMW64.cjs → chunk-LX23ZJDM.cjs}

@@ -43,7 +43,7 @@ function MenuItem({
         "flex items-center gap-2 rounded-md text-sm font-medium transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
         isVertical ? "w-full px-3 py-2" : "px-3 py-2",
-        active ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100" : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100",
+        active ? "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]" : "text-zinc-600 hover:bg-zinc-50 hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]",
         disabled && "pointer-events-none opacity-50",
         className
       ),
@@ -96,7 +96,7 @@ function MenuSubmenu({
                 "invisible absolute left-0 top-full z-50 min-w-[180px] pt-1 opacity-0 transition-all",
                 "group-hover:visible group-hover:opacity-100"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900", children })
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]", children })
             }
           )
         ]
@@ -136,7 +136,7 @@ function MenuSubmenu({
           "grid transition-[grid-template-rows] duration-200",
           open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 border-l border-zinc-200 pl-2 pt-1 dark:border-zinc-700", children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 border-l border-[color:var(--fancy-border,var(--color-zinc-200))] pl-2 pt-1 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]", children }) })
       }
     )
   ] });
@@ -144,7 +144,7 @@ function MenuSubmenu({
 MenuSubmenu.displayName = "MenuSubmenu";
 function MenuGroup({ children, label, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-menu-group": "", className: chunkZU5Q77OT_cjs.cn("py-1", className), children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500", children: label }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: label }),
     children
   ] });
 }
@@ -173,5 +173,5 @@ var Menu = Object.assign(MenuRoot, {
 
 exports.Menu = Menu;
 exports.useMenu = useMenu;
-//# sourceMappingURL=chunk-RPVCMW64.cjs.map
-//# sourceMappingURL=chunk-RPVCMW64.cjs.map
+//# sourceMappingURL=chunk-LX23ZJDM.cjs.map
+//# sourceMappingURL=chunk-LX23ZJDM.cjs.map

package/dist/chunk-LX23ZJDM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Menu/Menu.context.ts","../src/components/Menu/MenuItem.tsx","../src/components/Menu/MenuSubmenu.tsx","../src/components/Menu/MenuGroup.tsx","../src/components/Menu/Menu.tsx"],"names":["createContext","useContext","jsxs","cn","jsx","useState","ChevronDown"],"mappings":"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","file":"chunk-LX23ZJDM.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MenuContextValue } from \"./Menu.types\";\n\nexport const MenuContext = createContext<MenuContextValue | null>(null);\n\nexport function useMenu(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) {\n    throw new Error(\"useMenu must be used within a <Menu> component\");\n  }\n  return ctx;\n}\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuItemProps } from \"./Menu.types\";\n\nexport function MenuItem({\n  children,\n  href,\n  as: As,\n  icon,\n  active = false,\n  disabled = false,\n  badge,\n  onClick,\n  className,\n  ...rest\n}: MenuItemProps) {\n  const { orientation } = useMenu();\n  const isVertical = orientation === \"vertical\";\n\n  // See NavigableProps: link mode engages on `href` OR `as`, and `onClick`\n  // survives into it rather than being dropped.\n  const isLink = Boolean(href || As);\n  const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n  const tagProps = isLink\n    ? { ...(href ? { href } : {}), onClick }\n    : { type: \"button\" as const, onClick };\n\n  return (\n    <Tag\n      {...tagProps}\n      {...rest}\n      data-react-fancy-menu-item=\"\"\n      data-active={active || undefined}\n      aria-current={active ? \"page\" : undefined}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        \"flex items-center gap-2 rounded-md text-sm font-medium transition-colors\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n        isVertical ? \"w-full px-3 py-2\" : \"px-3 py-2\",\n        active\n          ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\"\n          : \"text-zinc-600 hover:bg-zinc-50 hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n      <span className=\"flex-1 truncate text-left\">{children}</span>\n      {badge && <span className=\"shrink-0\">{badge}</span>}\n    </Tag>\n  );\n}\n\nMenuItem.displayName = \"MenuItem\";\n","import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuSubmenuProps } from \"./Menu.types\";\n\nexport function MenuSubmenu({\n  children,\n  label,\n  icon,\n  defaultOpen = false,\n  className,\n}: MenuSubmenuProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  const { orientation } = useMenu();\n  const isVertical = orientation === \"vertical\";\n\n  if (!isVertical) {\n    // Horizontal submenus use a hover-based dropdown\n    return (\n      <div\n        data-react-fancy-menu-submenu=\"\"\n        className={cn(\"group relative\", className)}\n      >\n        <button\n          type=\"button\"\n          className={cn(\n            \"flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n            \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n            \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n          )}\n        >\n          {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n          <span>{label}</span>\n          <ChevronDown className=\"h-3.5 w-3.5 opacity-60\" />\n        </button>\n        <div\n          className={cn(\n            \"invisible absolute left-0 top-full z-50 min-w-[180px] pt-1 opacity-0 transition-all\",\n            \"group-hover:visible group-hover:opacity-100\",\n          )}\n        >\n          <div className=\"rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Vertical submenus use accordion-style expand/collapse\n  return (\n    <div data-react-fancy-menu-submenu=\"\" className={className}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className={cn(\n          \"flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n          \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n          \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n        )}\n      >\n        {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n        <span className=\"flex-1 text-left\">{label}</span>\n        <ChevronDown\n          className={cn(\n            \"h-3.5 w-3.5 opacity-60 transition-transform duration-200\",\n            open && \"rotate-180\",\n          )}\n        />\n      </button>\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows] duration-200\",\n          open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"ml-4 border-l border-[color:var(--fancy-border,var(--color-zinc-200))] pl-2 pt-1 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\">\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nMenuSubmenu.displayName = \"MenuSubmenu\";\n","import { cn } from \"../../utils/cn\";\nimport type { MenuGroupProps } from \"./Menu.types\";\n\nexport function MenuGroup({ children, label, className }: MenuGroupProps) {\n  return (\n    <div data-react-fancy-menu-group=\"\" className={cn(\"py-1\", className)}>\n      {label && (\n        <p className=\"mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n          {label}\n        </p>\n      )}\n      {children}\n    </div>\n  );\n}\n\nMenuGroup.displayName = \"MenuGroup\";\n","import { cn } from \"../../utils/cn\";\nimport { MenuContext } from \"./Menu.context\";\nimport { MenuItem } from \"./MenuItem\";\nimport { MenuSubmenu } from \"./MenuSubmenu\";\nimport { MenuGroup } from \"./MenuGroup\";\nimport type { MenuProps } from \"./Menu.types\";\n\nfunction MenuRoot({ children, orientation = \"vertical\", className }: MenuProps) {\n  const isVertical = orientation === \"vertical\";\n\n  return (\n    <MenuContext.Provider value={{ orientation }}>\n      <nav\n        data-react-fancy-menu=\"\"\n        data-orientation={orientation}\n        className={cn(\n          \"flex gap-0.5\",\n          isVertical ? \"flex-col\" : \"flex-row items-center\",\n          className,\n        )}\n      >\n        {children}\n      </nav>\n    </MenuContext.Provider>\n  );\n}\n\nexport const Menu = Object.assign(MenuRoot, {\n  Item: MenuItem,\n  Submenu: MenuSubmenu,\n  Group: MenuGroup,\n});\n"]}

package/dist/{chunk-RU6ZTA4M.cjs → chunk-M5SEYDSS.cjs}

@@ -95,7 +95,7 @@ var FauxClient = react.forwardRef(
         className: chunkZU5Q77OT_cjs.cn(
           "pointer-events-auto flex shrink-0 items-center gap-px opacity-0 transition-opacity duration-150",
           "group-hover/faux-client:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100",
-          isBrowser ? "-my-1 text-zinc-400 dark:text-zinc-500" : "rounded-full bg-zinc-900/60 px-1 py-0.5 text-white/80 shadow-sm backdrop-blur-sm"
+          isBrowser ? "-my-1 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]" : "rounded-full bg-zinc-900/60 px-1 py-0.5 text-white/80 shadow-sm backdrop-blur-sm"
         ),
         children: [
           showZoom && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -164,7 +164,7 @@ var FauxClient = react.forwardRef(
         "data-react-fancy-faux-client": "",
         "data-fullscreen": showFullscreen ? String(fullscreen) : void 0,
         className: chunkZU5Q77OT_cjs.cn(
-          "group/faux-client relative overflow-hidden bg-white dark:bg-zinc-900",
+          "group/faux-client relative overflow-hidden bg-[color:var(--fancy-surface,var(--color-white))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
           isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
           isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
           variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
@@ -181,13 +181,13 @@ var FauxClient = react.forwardRef(
             "div",
             {
               className: chunkZU5Q77OT_cjs.cn(
-                "flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400",
+                "flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-zinc-800 dark:bg-zinc-950 dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
                 barClassName
               ),
               children: [
                 dots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkZU5Q77OT_cjs.cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
                 url != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
-                meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta }),
+                meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: meta }),
                 hasControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkZU5Q77OT_cjs.cn(url == null && meta == null && "ml-auto"), children: controlsBar })
               ]
             }
@@ -280,5 +280,5 @@ function ExitFullscreenIcon() {
 }
 
 exports.FauxClient = FauxClient;
-//# sourceMappingURL=chunk-RU6ZTA4M.cjs.map
-//# sourceMappingURL=chunk-RU6ZTA4M.cjs.map
+//# sourceMappingURL=chunk-M5SEYDSS.cjs.map
+//# sourceMappingURL=chunk-M5SEYDSS.cjs.map