@epilot/spark-ui 0.20.1 → 0.22.0

package/dist/components/schedule-editor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-editor.cjs","names":["React"],"sources":["../../src/components/schedule-editor.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst ScheduleEditor = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cn('flex flex-col gap-4 px-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditor.displayName = 'ScheduleEditor'\n\nconst ScheduleEditorHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    className={cn('flex flex-col gap-1', className)}\n    {...props}\n  />\n))\n\nScheduleEditorHeader.displayName = 'ScheduleEditorHeader'\n\nconst ScheduleEditorTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn('text-base font-bold text-gray', className)}\n    {...props}\n  />\n))\n\nScheduleEditorTitle.displayName = 'ScheduleEditorTitle'\n\nconst ScheduleEditorDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm leading-5 text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEditorDescription.displayName = 'ScheduleEditorDescription'\n\nconst ScheduleEditorBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*4)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEditorBody.displayName = 'ScheduleEditorBody'\n\n/** Footer slot. Default layout splits children into a `justify-between` row,\n *  which matches the common \"destructive on the left, primary on the right\"\n *  pattern. Override with `className` if you need a different arrangement. */\nconst ScheduleEditorFooter = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <footer\n    ref={ref}\n    className={cn('flex items-center justify-between gap-2 pt-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditorFooter.displayName = 'ScheduleEditorFooter'\n\n/** Right-aligned cluster of footer actions (e.g. Cancel + Save). */\nconst ScheduleEditorActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('ml-auto flex items-center gap-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditorActions.displayName = 'ScheduleEditorActions'\n\ninterface ScheduleEditorFieldProps extends Omit<\n  React.LabelHTMLAttributes<HTMLLabelElement>,\n  'children'\n> {\n  label: React.ReactNode\n  hint?: React.ReactNode\n  children: React.ReactNode\n}\n\nconst ScheduleEditorField = React.forwardRef<\n  HTMLLabelElement,\n  ScheduleEditorFieldProps\n>(({ children, className, hint, label, ...props }, ref) => (\n  <label\n    ref={ref}\n    className={cn('flex flex-col gap-1.5', className)}\n    {...props}\n  >\n    <span className=\"text-sm font-medium text-gray\">{label}</span>\n    {children}\n    {hint && <span className=\"text-xs text-gray-light\">{hint}</span>}\n  </label>\n))\n\nScheduleEditorField.displayName = 'ScheduleEditorField'\n\nexport {\n  ScheduleEditor,\n  ScheduleEditorActions,\n  ScheduleEditorBody,\n  ScheduleEditorDescription,\n  ScheduleEditorField,\n  ScheduleEditorFooter,\n  ScheduleEditorHeader,\n  ScheduleEditorTitle,\n}\n"],"mappings":";;;;;;;;AAGA,MAAM,iBAAiBA,MAAM,YAG1B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,WAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;CACnD,GAAI;AACL,CAAA,CACF;AAED,eAAe,cAAc;AAE7B,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,uBAAuB,SAAS;CAC9C,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,sBAAsBA,MAAM,YAG/B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,MAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;CACxD,GAAI;AACL,CAAA,CACF;AAED,oBAAoB,cAAc;AAElC,MAAM,4BAA4BA,MAAM,YAGrC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,0BAA0B,cAAc;AAExC,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;;;;AAKjC,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,gDAAgD,SAAS;CACvE,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;;AAGnC,MAAM,wBAAwBA,MAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,mCAAmC,SAAS;CAC1D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;AAWpC,MAAM,sBAAsBA,MAAM,YAG/B,EAAE,UAAU,WAAW,MAAM,OAAO,GAAG,SAAS,QACjD,iBAAA,GAAA,kBAAA,MAAC,SAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,yBAAyB,SAAS;CAChD,GAAI;WAHN;EAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAiC;EAAY,CAAA;EAC5D;EACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAA2B;EAAW,CAAA;CAC1D;EACR;AAED,oBAAoB,cAAc"}
+{"version":3,"file":"schedule-editor.cjs","names":["React"],"sources":["../../src/components/schedule-editor.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst ScheduleEditor = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cn('flex flex-col gap-4 px-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditor.displayName = 'ScheduleEditor'\n\nconst ScheduleEditorHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    className={cn('flex flex-col gap-1', className)}\n    {...props}\n  />\n))\n\nScheduleEditorHeader.displayName = 'ScheduleEditorHeader'\n\nconst ScheduleEditorTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn('text-base font-bold text-gray', className)}\n    {...props}\n  />\n))\n\nScheduleEditorTitle.displayName = 'ScheduleEditorTitle'\n\nconst ScheduleEditorDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm leading-5 text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEditorDescription.displayName = 'ScheduleEditorDescription'\n\nconst ScheduleEditorBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*4)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEditorBody.displayName = 'ScheduleEditorBody'\n\n/** Footer slot. Default layout splits children into a `justify-between` row,\n *  which matches the common \"destructive on the left, primary on the right\"\n *  pattern. Override with `className` if you need a different arrangement. */\nconst ScheduleEditorFooter = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <footer\n    ref={ref}\n    className={cn('flex items-center justify-between gap-2 pt-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditorFooter.displayName = 'ScheduleEditorFooter'\n\n/** Right-aligned cluster of footer actions (e.g. Cancel + Save). */\nconst ScheduleEditorActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('ml-auto flex items-center gap-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditorActions.displayName = 'ScheduleEditorActions'\n\ninterface ScheduleEditorFieldProps extends Omit<\n  React.LabelHTMLAttributes<HTMLLabelElement>,\n  'children'\n> {\n  label: React.ReactNode\n  hint?: React.ReactNode\n  children: React.ReactNode\n}\n\nconst ScheduleEditorField = React.forwardRef<\n  HTMLLabelElement,\n  ScheduleEditorFieldProps\n>(({ children, className, hint, label, ...props }, ref) => (\n  <label\n    ref={ref}\n    className={cn('flex flex-col gap-1.5', className)}\n    {...props}\n  >\n    <span className=\"text-sm font-medium text-gray\">{label}</span>\n    {children}\n    {hint && <span className=\"text-xs text-gray-light\">{hint}</span>}\n  </label>\n))\n\nScheduleEditorField.displayName = 'ScheduleEditorField'\n\nexport {\n  ScheduleEditor,\n  ScheduleEditorActions,\n  ScheduleEditorBody,\n  ScheduleEditorDescription,\n  ScheduleEditorField,\n  ScheduleEditorFooter,\n  ScheduleEditorHeader,\n  ScheduleEditorTitle,\n}\n"],"mappings":";;;;;;;;AAGA,MAAM,iBAAiBA,MAAM,YAG1B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,WAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,4BAA4B,SAAS;CACnD,GAAI;AACL,CAAA,CACF;AAED,eAAe,cAAc;AAE7B,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,uBAAuB,SAAS;CAC9C,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,sBAAsBA,MAAM,YAG/B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,MAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,iCAAiC,SAAS;CACxD,GAAI;AACL,CAAA,CACF;AAED,oBAAoB,cAAc;AAElC,MAAM,4BAA4BA,MAAM,YAGrC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,0BAA0B,cAAc;AAExC,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,GAAA,IACE,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;;;;AAKjC,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,gDAAgD,SAAS;CACvE,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;;AAGnC,MAAM,wBAAwBA,MAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,mCAAmC,SAAS;CAC1D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;AAWpC,MAAM,sBAAsBA,MAAM,YAG/B,EAAE,UAAU,WAAW,MAAM,OAAO,GAAG,SAAS,QACjD,iBAAA,GAAA,kBAAA,MAAC,SAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,yBAAyB,SAAS;CAChD,GAAI;WAHN;EAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAiC;EAAY,CAAA;EAC5D;EACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAA2B;EAAW,CAAA;CAC1D;EACR;AAED,oBAAoB,cAAc"}

package/dist/components/schedule-list.cjs

@@ -5,24 +5,24 @@ let react = require("react");
 react = require_chunk.__toESM(react);
 let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/schedule-list.tsx
 const ScheduleList = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	ref,
-	className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*2)]", className),
+	className: (0, cn.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*2)]", className),
 	...props
 }));
 ScheduleList.displayName = "ScheduleList";
 const ScheduleListEmpty = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 	ref,
-	className: (0, cnfast.cn)("px-3 py-2 text-sm text-gray-light", className),
+	className: (0, cn.cn)("px-3 py-2 text-sm text-gray-light", className),
 	...props
 }));
 ScheduleListEmpty.displayName = "ScheduleListEmpty";
 const ScheduleListAdd = react.forwardRef(({ children, className, icon, type = "button", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 	ref,
 	type,
-	className: (0, cnfast.cn)("inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+	className: (0, cn.cn)("inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 	...props,
 	children: [icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Add, { className: "[--spark-icon-size:14px]" }), children]
 }));
@@ -43,7 +43,7 @@ const ScheduleEntry = react.forwardRef(({ children, className, disabled, onClick
 			}
 		} : void 0,
 		"aria-disabled": disabled || void 0,
-		className: (0, cnfast.cn)("flex items-center gap-3 rounded-lg bg-base-gray-soft px-3 py-2.5 transition-colors motion-reduce:transition-none", interactive && "cursor-pointer touch-target-row hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", disabled && "cursor-not-allowed opacity-50", className),
+		className: (0, cn.cn)("flex items-center gap-3 rounded-lg bg-base-gray-soft px-3 py-2.5 transition-colors motion-reduce:transition-none", interactive && "cursor-pointer touch-target-row hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", disabled && "cursor-not-allowed opacity-50", className),
 		...props,
 		children
 	});
@@ -51,19 +51,19 @@ const ScheduleEntry = react.forwardRef(({ children, className, disabled, onClick
 ScheduleEntry.displayName = "ScheduleEntry";
 const ScheduleEntryContent = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	ref,
-	className: (0, cnfast.cn)("flex min-w-0 flex-1 flex-col gap-0.5", className),
+	className: (0, cn.cn)("flex min-w-0 flex-1 flex-col gap-0.5", className),
 	...props
 }));
 ScheduleEntryContent.displayName = "ScheduleEntryContent";
 const ScheduleEntryTitle = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	ref,
-	className: (0, cnfast.cn)("flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray", className),
+	className: (0, cn.cn)("flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray", className),
 	...props
 }));
 ScheduleEntryTitle.displayName = "ScheduleEntryTitle";
 const ScheduleEntrySubtitle = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	ref,
-	className: (0, cnfast.cn)("truncate text-xs text-gray-light", className),
+	className: (0, cn.cn)("truncate text-xs text-gray-light", className),
 	...props
 }));
 ScheduleEntrySubtitle.displayName = "ScheduleEntrySubtitle";
@@ -76,7 +76,7 @@ const ScheduleEntryActions = react.forwardRef(({ className, onClick, ...props },
 		event.stopPropagation();
 		onClick?.(event);
 	},
-	className: (0, cnfast.cn)("flex shrink-0 items-center gap-1.5", className),
+	className: (0, cn.cn)("flex shrink-0 items-center gap-1.5", className),
 	...props
 }));
 ScheduleEntryActions.displayName = "ScheduleEntryActions";
@@ -88,7 +88,7 @@ const ScheduleEntryDelete = react.forwardRef(({ "aria-label": ariaLabel = "Delet
 		event.stopPropagation();
 		onClick?.(event);
 	},
-	className: (0, cnfast.cn)("inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+	className: (0, cn.cn)("inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 	...props,
 	children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Delete, { className: "[--spark-icon-size:14px]" })
 }));

package/dist/components/schedule-list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-list.cjs","names":["React","Add","Delete"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import { Add, Delete } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <Add className=\"[--spark-icon-size:14px]\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    // role, tab stop and key handler travel together -- the row is never\n    // clickable without Enter/Space, and never focusable without a role\n    const interaction = interactive\n      ? {\n          role: 'button' as const,\n          tabIndex: 0,\n          onClick,\n          onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault()\n              onClick()\n            }\n          },\n        }\n      : undefined\n    return (\n      <div\n        ref={ref}\n        {...interaction}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-lg bg-base-gray-soft px-3 py-2.5 transition-colors motion-reduce:transition-none',\n          interactive &&\n            'cursor-pointer touch-target-row hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    // a layout wrapper, not a control: the handler only shields the inner\n    // buttons' clicks (keyboard activation included) from the parent row\n    role=\"presentation\"\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <Delete className=\"[--spark-icon-size:14px]\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":";;;;;;;;;AAIA,MAAM,eAAeA,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,MAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,MAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,iBAAA,GAAA,kBAAA,MAAC,UAAD;CACO;CACC;CACN,YAAA,GAAA,OAAA,IACE,iWACA,SACF;CACA,GAAI;WAPN,CASG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,KAAD,EAAK,WAAU,2BAA4B,CAAA,GACnD,QACK;EACT;AAED,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBD,MAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;CAgB9C,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACO;EACL,GAhBgB,cAChB;GACE,MAAM;GACN,UAAU;GACV;GACA,YAAY,UAA+C;IACzD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,QAAQ;IACV;GACF;EACF,IACA,KAAA;EAKA,iBAAe,YAAY,KAAA;EAC3B,YAAA,GAAA,OAAA,IACE,oHACA,eACE,kIACF,YAAY,iCACZ,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,0EACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,MAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;CAC3D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CAGL,MAAK;CACL,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,YAAA,GAAA,OAAA,IAAc,sCAAsC,SAAS;CAC7D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,MAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,YAAA,GAAA,OAAA,IACE,kRACA,SACF;CACA,GAAI;WAEH,YAAY,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,QAAD,EAAQ,WAAU,2BAA4B,CAAA;AACrD,CAAA,CAEZ;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"schedule-list.cjs","names":["React","Add","Delete"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import { Add, Delete } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <Add className=\"[--spark-icon-size:14px]\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    // role, tab stop and key handler travel together -- the row is never\n    // clickable without Enter/Space, and never focusable without a role\n    const interaction = interactive\n      ? {\n          role: 'button' as const,\n          tabIndex: 0,\n          onClick,\n          onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault()\n              onClick()\n            }\n          },\n        }\n      : undefined\n    return (\n      <div\n        ref={ref}\n        {...interaction}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-lg bg-base-gray-soft px-3 py-2.5 transition-colors motion-reduce:transition-none',\n          interactive &&\n            'cursor-pointer touch-target-row hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    // a layout wrapper, not a control: the handler only shields the inner\n    // buttons' clicks (keyboard activation included) from the parent row\n    role=\"presentation\"\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <Delete className=\"[--spark-icon-size:14px]\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":"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"}

package/dist/components/scroll-area.cjs

@@ -5,12 +5,12 @@ let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_scroll_area = require("@base-ui/react/scroll-area");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/scroll-area.tsx
 function ScrollArea({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_scroll_area.ScrollArea.Root, {
 		"data-slot": "scroll-area",
-		className: (0, cnfast.cn)("relative", className),
+		className: (0, cn.cn)("relative", className),
 		...props,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Viewport, {
@@ -28,7 +28,7 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 		"data-slot": "scroll-area-scrollbar",
 		"data-orientation": orientation,
 		orientation,
-		className: (0, cnfast.cn)("flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent", "opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none", className),
+		className: (0, cn.cn)("flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent", "opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Thumb, {
 			"data-slot": "scroll-area-thumb",

package/dist/components/scroll-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.cjs","names":["ScrollAreaPrimitive"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',\n        // radix type=\"hover\" behavior: fade in on hover/scroll, fade out 600ms later\n        'opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-gray-a8 [[data-high-contrast]_&]:bg-gray-a11\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\n// Radix primitives for consumers that need a custom composition (e.g. an\n// aria-labelled focusable viewport or a horizontal-only scroll area)\nconst ScrollAreaRoot = ScrollAreaPrimitive.Root\nconst ScrollAreaViewport = ScrollAreaPrimitive.Viewport\nconst ScrollAreaScrollbar = ScrollAreaPrimitive.Scrollbar\nconst ScrollAreaThumb = ScrollAreaPrimitive.Thumb\nconst ScrollAreaCorner = ScrollAreaPrimitive.Corner\n\nexport {\n  ScrollArea,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,MAACA,2BAAAA,WAAoB,MAArB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,YAAY,SAAS;EACnC,GAAI;YAHN;GAKE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;GAC2B,CAAA;GAC9B,iBAAA,GAAA,kBAAA,KAAC,WAAD,CAAY,CAAA;GACZ,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,WAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,YAAA,GAAA,OAAA,IACE,sXAEA,oNACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,OAArB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CAC4B,CAAA;AAEnC;AAIA,MAAM,iBAAiBA,2BAAAA,WAAoB;AAC3C,MAAM,qBAAqBA,2BAAAA,WAAoB;AAC/C,MAAM,sBAAsBA,2BAAAA,WAAoB;AAChD,MAAM,kBAAkBA,2BAAAA,WAAoB;AAC5C,MAAM,mBAAmBA,2BAAAA,WAAoB"}
+{"version":3,"file":"scroll-area.cjs","names":["ScrollAreaPrimitive"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',\n        // radix type=\"hover\" behavior: fade in on hover/scroll, fade out 600ms later\n        'opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-gray-a8 [[data-high-contrast]_&]:bg-gray-a11\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\n// Radix primitives for consumers that need a custom composition (e.g. an\n// aria-labelled focusable viewport or a horizontal-only scroll area)\nconst ScrollAreaRoot = ScrollAreaPrimitive.Root\nconst ScrollAreaViewport = ScrollAreaPrimitive.Viewport\nconst ScrollAreaScrollbar = ScrollAreaPrimitive.Scrollbar\nconst ScrollAreaThumb = ScrollAreaPrimitive.Thumb\nconst ScrollAreaCorner = ScrollAreaPrimitive.Corner\n\nexport {\n  ScrollArea,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,MAACA,2BAAAA,WAAoB,MAArB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,YAAY,SAAS;EACnC,GAAI;YAHN;GAKE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;GAC2B,CAAA;GAC9B,iBAAA,GAAA,kBAAA,KAAC,WAAD,CAAY,CAAA;GACZ,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,WAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,YAAA,GAAA,GAAA,IACE,sXAEA,oNACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,OAArB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CAC4B,CAAA;AAEnC;AAIA,MAAM,iBAAiBA,2BAAAA,WAAoB;AAC3C,MAAM,qBAAqBA,2BAAAA,WAAoB;AAC/C,MAAM,sBAAsBA,2BAAAA,WAAoB;AAChD,MAAM,kBAAkBA,2BAAAA,WAAoB;AAC5C,MAAM,mBAAmBA,2BAAAA,WAAoB"}

package/dist/components/segmented-control.cjs

@@ -6,7 +6,7 @@ let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_tabs = require("@base-ui/react/tabs");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/segmented-control.tsx
 function SegmentedControl({ className, styleVariant = "solid", size = "default", children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
@@ -19,11 +19,11 @@ function SegmentedControl({ className, styleVariant = "solid", size = "default",
 			"data-size": size,
 			"data-slot": "segmented-control-track",
 			"data-style": styleVariant,
-			className: (0, cnfast.cn)("group/segmented relative isolate flex w-full items-stretch p-1", "rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", "data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3", "data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)", "data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)", size === "small" && "h-9 text-sm", size === "default" && "h-10 text-base", size === "medium" && "h-11 text-base", className),
+			className: (0, cn.cn)("group/segmented relative isolate flex w-full items-stretch p-1", "rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", "data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3", "data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)", "data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)", size === "small" && "h-9 text-sm", size === "default" && "h-10 text-base", size === "medium" && "h-11 text-base", className),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Indicator, {
 				"data-slot": "segmented-control-indicator",
 				renderBeforeHydration: true,
-				className: (0, cnfast.cn)("pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "bg-gray-1 dark:bg-gray-a4", "group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--color-primary))", "shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", "transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none", "data-starting-style:transition-none")
+				className: (0, cn.cn)("pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "bg-gray-1 dark:bg-gray-a4", "group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--color-primary))", "shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", "transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none", "data-starting-style:transition-none")
 			}), children]
 		})
 	});
@@ -32,7 +32,7 @@ function SegmentedControlItem({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
 		"data-slot": "segmented-control-item",
 		ref,
-		className: (0, cnfast.cn)("relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none", "touch-target", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "text-gray-a11 transition-colors motion-reduce:transition-none", "not-data-active:hover:text-gray-12", "data-active:text-(--spark-style-fg,var(--color-primary-foreground))", "focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4", "group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5", "group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6", className),
+		className: (0, cn.cn)("relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none", "touch-target", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "text-gray-a11 transition-colors motion-reduce:transition-none", "not-data-active:hover:text-gray-12", "data-active:text-(--spark-style-fg,var(--color-primary-foreground))", "focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4", "group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5", "group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6", className),
 		...props,
 		children
 	});

package/dist/components/segmented-control.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.cjs","names":["TabsPrimitive"],"sources":["../../src/components/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype SegmentedControlSize = 'small' | 'default' | 'medium'\n\ntype SegmentedControlProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Root>,\n  'orientation'\n> & {\n  /** Visual weight of the selected segment, following the Spark style axis. */\n  styleVariant?: Exclude<SparkStyle, 'ghost'>\n  /** Control height, padding, and typography. Matches the Button size scale. */\n  size?: SegmentedControlSize\n}\n\nfunction SegmentedControl({\n  className,\n  styleVariant = 'solid',\n  size = 'default',\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SegmentedControlProps) {\n  return (\n    <TabsPrimitive.Root data-slot=\"segmented-control\" ref={ref} {...props}>\n      <TabsPrimitive.List\n        // the group's accessible name belongs on role=tablist (the List), not\n        // the Root container\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-size={size}\n        data-slot=\"segmented-control-track\"\n        data-style={styleVariant}\n        className={cn(\n          // full-width control; segments share the width equally (flex-1 below)\n          'group/segmented relative isolate flex w-full items-stretch p-1',\n          'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          // the track chrome follows the style: a filled groove for solid/soft, a\n          // faintly-filled bordered surface, or a bare outline (all neutral — the\n          // accent lives on the selected segment)\n          'data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3',\n          'data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)',\n          'data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)',\n          size === 'small' && 'h-9 text-sm',\n          size === 'default' && 'h-10 text-base',\n          size === 'medium' && 'h-11 text-base',\n          className,\n        )}\n      >\n        {/* neutral like the switch thumb; solid alone fills with the accent below */}\n        <TabsPrimitive.Indicator\n          data-slot=\"segmented-control-indicator\"\n          renderBeforeHydration\n          className={cn(\n            'pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)',\n            'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n            'bg-gray-1 dark:bg-gray-a4',\n            'group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--color-primary))',\n            'shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n            'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none',\n            // suppress the corner-to-position slide on first mount\n            'data-starting-style:transition-none',\n          )}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  )\n}\n\ntype SegmentedControlItemProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction SegmentedControlItem({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"segmented-control-item\"\n      ref={ref}\n      className={cn(\n        'relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none',\n        // small/default tracks render 36/40px items; the overlay floors them to\n        // 44px on coarse pointers only (medium is already 44px and is untouched,\n        // since the overlay is max(100%, 2.75rem) and never shrinks)\n        'touch-target',\n        'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n        'text-gray-a11 transition-colors motion-reduce:transition-none',\n        'not-data-active:hover:text-gray-12',\n        'data-active:text-(--spark-style-fg,var(--color-primary-foreground))',\n        // ring-offset-1 floats the ring off the segment (a flush ring vanishes\n        // on the solid indicator; a full inset box reads heavy)\n        'focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        // size follows the Button scale (padding + icon size). Icon size is set\n        // via --spark-icon-size (font glyphs) plus size-* (raw svg).\n        'group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4',\n        'group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5',\n        'group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Tab>\n  )\n}\n\nexport { SegmentedControl, SegmentedControlItem }\nexport type {\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n  SegmentedControlSize,\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAS,iBAAiB,EACxB,WACA,eAAe,SACf,OAAO,WACP,UACA,KACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACqB;CACxB,OACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,MAAf;EAAoB,aAAU;EAAyB;EAAK,GAAI;YAC9D,iBAAA,GAAA,kBAAA,MAACA,oBAAAA,KAAc,MAAf;GAGE,cAAY;GACZ,mBAAiB;GACjB,aAAW;GACX,aAAU;GACV,cAAY;GACZ,YAAA,GAAA,OAAA,IAEE,kEACA,oEAIA,8DACA,0HACA,0FACA,SAAS,WAAW,eACpB,SAAS,aAAa,kBACtB,SAAS,YAAY,kBACrB,SACF;aAtBF,CAyBE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,YAAA,GAAA,OAAA,IACE,mIACA,oEACA,6BACA,iFACA,8HACA,0FAEA,qCACF;GACD,CAAA,GACA,QACiB;;CACF,CAAA;AAExB;AAIA,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;CAC5B,OACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,KAAf;EACE,aAAU;EACL;EACL,YAAA,GAAA,OAAA,IACE,gJAIA,gBACA,oEACA,iEACA,sCACA,uEAGA,iFACA,gEACA,gDAGA,0KACA,mLACA,+KACA,SACF;EACA,GAAI;EAEH;CACgB,CAAA;AAEvB"}
+{"version":3,"file":"segmented-control.cjs","names":["TabsPrimitive"],"sources":["../../src/components/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype SegmentedControlSize = 'small' | 'default' | 'medium'\n\ntype SegmentedControlProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Root>,\n  'orientation'\n> & {\n  /** Visual weight of the selected segment, following the Spark style axis. */\n  styleVariant?: Exclude<SparkStyle, 'ghost'>\n  /** Control height, padding, and typography. Matches the Button size scale. */\n  size?: SegmentedControlSize\n}\n\nfunction SegmentedControl({\n  className,\n  styleVariant = 'solid',\n  size = 'default',\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SegmentedControlProps) {\n  return (\n    <TabsPrimitive.Root data-slot=\"segmented-control\" ref={ref} {...props}>\n      <TabsPrimitive.List\n        // the group's accessible name belongs on role=tablist (the List), not\n        // the Root container\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-size={size}\n        data-slot=\"segmented-control-track\"\n        data-style={styleVariant}\n        className={cn(\n          // full-width control; segments share the width equally (flex-1 below)\n          'group/segmented relative isolate flex w-full items-stretch p-1',\n          'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          // the track chrome follows the style: a filled groove for solid/soft, a\n          // faintly-filled bordered surface, or a bare outline (all neutral — the\n          // accent lives on the selected segment)\n          'data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3',\n          'data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)',\n          'data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)',\n          size === 'small' && 'h-9 text-sm',\n          size === 'default' && 'h-10 text-base',\n          size === 'medium' && 'h-11 text-base',\n          className,\n        )}\n      >\n        {/* neutral like the switch thumb; solid alone fills with the accent below */}\n        <TabsPrimitive.Indicator\n          data-slot=\"segmented-control-indicator\"\n          renderBeforeHydration\n          className={cn(\n            'pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)',\n            'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n            'bg-gray-1 dark:bg-gray-a4',\n            'group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--color-primary))',\n            'shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n            'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none',\n            // suppress the corner-to-position slide on first mount\n            'data-starting-style:transition-none',\n          )}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  )\n}\n\ntype SegmentedControlItemProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction SegmentedControlItem({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"segmented-control-item\"\n      ref={ref}\n      className={cn(\n        'relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none',\n        // small/default tracks render 36/40px items; the overlay floors them to\n        // 44px on coarse pointers only (medium is already 44px and is untouched,\n        // since the overlay is max(100%, 2.75rem) and never shrinks)\n        'touch-target',\n        'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n        'text-gray-a11 transition-colors motion-reduce:transition-none',\n        'not-data-active:hover:text-gray-12',\n        'data-active:text-(--spark-style-fg,var(--color-primary-foreground))',\n        // ring-offset-1 floats the ring off the segment (a flush ring vanishes\n        // on the solid indicator; a full inset box reads heavy)\n        'focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        // size follows the Button scale (padding + icon size). Icon size is set\n        // via --spark-icon-size (font glyphs) plus size-* (raw svg).\n        'group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4',\n        'group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5',\n        'group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Tab>\n  )\n}\n\nexport { SegmentedControl, SegmentedControlItem }\nexport type {\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n  SegmentedControlSize,\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAS,iBAAiB,EACxB,WACA,eAAe,SACf,OAAO,WACP,UACA,KACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACqB;CACxB,OACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,MAAf;EAAoB,aAAU;EAAyB;EAAK,GAAI;YAC9D,iBAAA,GAAA,kBAAA,MAACA,oBAAAA,KAAc,MAAf;GAGE,cAAY;GACZ,mBAAiB;GACjB,aAAW;GACX,aAAU;GACV,cAAY;GACZ,YAAA,GAAA,GAAA,IAEE,kEACA,oEAIA,8DACA,0HACA,0FACA,SAAS,WAAW,eACpB,SAAS,aAAa,kBACtB,SAAS,YAAY,kBACrB,SACF;aAtBF,CAyBE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,YAAA,GAAA,GAAA,IACE,mIACA,oEACA,6BACA,iFACA,8HACA,0FAEA,qCACF;GACD,CAAA,GACA,QACiB;;CACF,CAAA;AAExB;AAIA,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;CAC5B,OACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,KAAf;EACE,aAAU;EACL;EACL,YAAA,GAAA,GAAA,IACE,gJAIA,gBACA,oEACA,iEACA,sCACA,uEAGA,iFACA,gEACA,gDAGA,0KACA,mLACA,+KACA,SACF;EACA,GAAI;EAEH;CACgB,CAAA;AAEvB"}

package/dist/components/select.cjs

@@ -2,20 +2,20 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_components_field = require("./field.cjs");
 const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
+const require_components_field = require("./field.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_select = require("@base-ui/react/select");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/select.tsx
 const Select = _base_ui_react_select.Select.Root;
 function SelectGroup({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Group, {
 		"data-slot": "select-group",
-		className: (0, cnfast.cn)("scroll-my-1 p-1", className),
+		className: (0, cn.cn)("scroll-my-1 p-1", className),
 		...props
 	});
 }
@@ -41,7 +41,7 @@ function SelectTrigger({ className, size = "default", variant, id: idProp, child
 		"data-slot": "select-trigger",
 		"data-size": size,
 		id,
-		className: (0, cnfast.cn)(TRIGGER_BASE, field ? "w-full" : "w-fit", !isGhost && TRIGGER_SIZE[size], require_lib_input_box_variants.boxChrome[isGhost ? "ghost" : inputStyle][inputColor], className),
+		className: (0, cn.cn)(TRIGGER_BASE, field ? "w-full" : "w-fit", !isGhost && TRIGGER_SIZE[size], require_lib_input_box_variants.boxChrome[isGhost ? "ghost" : inputStyle][inputColor], className),
 		"aria-invalid": ariaInvalid,
 		...props,
 		"aria-describedby": ariaDescribedBy,
@@ -56,7 +56,7 @@ const CLEAR_BUTTON = "relative inline-flex size-6 min-h-[24px] min-w-[24px] shri
 function SelectTriggerGroup({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "select-trigger-group",
-		className: (0, cnfast.cn)("relative inline-flex w-fit items-center [&_[data-slot=select-chevron]]:absolute [&_[data-slot=select-chevron]]:right-3 has-[[data-slot=select-trigger][data-disabled]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-placeholder]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-readonly]]:[&_[data-slot=select-clear]]:hidden [&_[data-slot=select-trigger]]:pr-[calc(--spacing(8)+max(--spacing(6),24px))]", className),
+		className: (0, cn.cn)("relative inline-flex w-fit items-center [&_[data-slot=select-chevron]]:absolute [&_[data-slot=select-chevron]]:right-3 has-[[data-slot=select-trigger][data-disabled]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-placeholder]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-readonly]]:[&_[data-slot=select-clear]]:hidden [&_[data-slot=select-trigger]]:pr-[calc(--spacing(8)+max(--spacing(6),24px))]", className),
 		...props
 	});
 }
@@ -64,7 +64,7 @@ function SelectClear({ className, children, onClick, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		"data-slot": "select-clear",
 		type: "button",
-		className: (0, cnfast.cn)(CLEAR_BUTTON, "absolute right-8", className),
+		className: (0, cn.cn)(CLEAR_BUTTON, "absolute right-8", className),
 		onClick: (event) => {
 			onClick?.(event);
 			event.currentTarget.closest("[data-slot=\"select-trigger-group\"]")?.querySelector("[data-slot=\"select-trigger\"]")?.focus();
@@ -88,7 +88,7 @@ function SelectContent({ className, children, align = "start", alignOffset, side
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_select.Select.Popup, {
 				"data-slot": "select-content",
 				"data-align-trigger": alignItemWithTrigger,
-				className: (0, cnfast.cn)("relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg [[data-high-contrast]_&]:border-gray-a11", "transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-[align-trigger=true]:transition-none", className),
+				className: (0, cn.cn)("relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg [[data-high-contrast]_&]:border-gray-a11", "transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-[align-trigger=true]:transition-none", className),
 				...props,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollUpButton, {}),
@@ -102,14 +102,14 @@ function SelectContent({ className, children, align = "start", alignOffset, side
 function SelectLabel({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.GroupLabel, {
 		"data-slot": "select-label",
-		className: (0, cnfast.cn)("px-1.5 py-1 text-xs text-gray-light [[data-high-contrast]_&]:text-gray-a12", className),
+		className: (0, cn.cn)("px-1.5 py-1 text-xs text-gray-light [[data-high-contrast]_&]:text-gray-a12", className),
 		...props
 	});
 }
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_select.Select.Item, {
 		"data-slot": "select-item",
-		className: (0, cnfast.cn)("relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none touch-target-row data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		className: (0, cn.cn)("relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none touch-target-row data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
@@ -121,14 +121,14 @@ function SelectSeparator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"aria-hidden": "true",
 		"data-slot": "select-separator",
-		className: (0, cnfast.cn)("pointer-events-none -mx-1 my-1 h-px bg-gray-a3 [[data-high-contrast]_&]:bg-gray-a6", className),
+		className: (0, cn.cn)("pointer-events-none -mx-1 my-1 h-px bg-gray-a3 [[data-high-contrast]_&]:bg-gray-a6", className),
 		...props
 	});
 }
 function SelectScrollUpButton({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ScrollUpArrow, {
 		"data-slot": "select-scroll-up-button",
-		className: (0, cnfast.cn)("top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
+		className: (0, cn.cn)("top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.KeyboardArrowDown, { className: "rotate-180 [--spark-icon-size:14px]" })
 	});
@@ -136,7 +136,7 @@ function SelectScrollUpButton({ className, ...props }) {
 function SelectScrollDownButton({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ScrollDownArrow, {
 		"data-slot": "select-scroll-down-button",
-		className: (0, cnfast.cn)("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
+		className: (0, cn.cn)("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.KeyboardArrowDown, { className: "[--spark-icon-size:14px]" })
 	});

package/dist/components/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","KeyboardArrowDown","Close","Check"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport { Check, Close, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-md px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:data-placeholder:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      aria-invalid={ariaInvalid}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        className=\"pointer-events-none flex text-gray-light\"\n        data-slot=\"select-chevron\"\n      >\n        <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\n// px floor: axe target-size flags it below 24px at small scalings because it overlays\n// the trigger; autocomplete.tsx ICON_BUTTON sits in flow and does not need one\nconst CLEAR_BUTTON =\n  \"relative inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\"\n\n// wraps SelectTrigger since Base UI ships no Select.Clear and the trigger is a\n// native <button> — the clear sits beside it, not nested inside it\nfunction SelectTriggerGroup({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"select-trigger-group\"\n      className={cn(\n        'relative inline-flex w-fit items-center [&_[data-slot=select-chevron]]:absolute [&_[data-slot=select-chevron]]:right-3 has-[[data-slot=select-trigger][data-disabled]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-placeholder]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-readonly]]:[&_[data-slot=select-clear]]:hidden [&_[data-slot=select-trigger]]:pr-[calc(--spacing(8)+max(--spacing(6),24px))]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectClear({\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<'button'>) {\n  return (\n    <button\n      data-slot=\"select-clear\"\n      type=\"button\"\n      className={cn(CLEAR_BUTTON, 'absolute right-8', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        // clearing hides this button (data-placeholder returns), so keyboard\n        // focus would otherwise drop to <body> — return it to the trigger\n        event.currentTarget\n          .closest('[data-slot=\"select-trigger-group\"]')\n          ?.querySelector<HTMLElement>('[data-slot=\"select-trigger\"]')\n          ?.focus()\n      }}\n      {...props}\n    >\n      {children ?? <Close aria-hidden className=\"[--spark-icon-size:14px]\" />}\n    </button>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  > &\n  Pick<SelectPrimitive.Portal.Props, 'container'>\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg [[data-high-contrast]_&]:border-gray-a11',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        'px-1.5 py-1 text-xs text-gray-light [[data-high-contrast]_&]:text-gray-a12',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none touch-target-row data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"[--spark-icon-size:11px]\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3 [[data-high-contrast]_&]:bg-gray-a6',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <KeyboardArrowDown className=\"rotate-180 [--spark-icon-size:14px]\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectClear,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectTriggerGroup,\n  SelectValue,\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","KeyboardArrowDown","Close","Check"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport { Check, Close, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-md px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:data-placeholder:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      aria-invalid={ariaInvalid}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        className=\"pointer-events-none flex text-gray-light\"\n        data-slot=\"select-chevron\"\n      >\n        <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\n// px floor: axe target-size flags it below 24px at small scalings because it overlays\n// the trigger; autocomplete.tsx ICON_BUTTON sits in flow and does not need one\nconst CLEAR_BUTTON =\n  \"relative inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\"\n\n// wraps SelectTrigger since Base UI ships no Select.Clear and the trigger is a\n// native <button> — the clear sits beside it, not nested inside it\nfunction SelectTriggerGroup({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"select-trigger-group\"\n      className={cn(\n        'relative inline-flex w-fit items-center [&_[data-slot=select-chevron]]:absolute [&_[data-slot=select-chevron]]:right-3 has-[[data-slot=select-trigger][data-disabled]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-placeholder]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-readonly]]:[&_[data-slot=select-clear]]:hidden [&_[data-slot=select-trigger]]:pr-[calc(--spacing(8)+max(--spacing(6),24px))]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectClear({\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<'button'>) {\n  return (\n    <button\n      data-slot=\"select-clear\"\n      type=\"button\"\n      className={cn(CLEAR_BUTTON, 'absolute right-8', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        // clearing hides this button (data-placeholder returns), so keyboard\n        // focus would otherwise drop to <body> — return it to the trigger\n        event.currentTarget\n          .closest('[data-slot=\"select-trigger-group\"]')\n          ?.querySelector<HTMLElement>('[data-slot=\"select-trigger\"]')\n          ?.focus()\n      }}\n      {...props}\n    >\n      {children ?? <Close aria-hidden className=\"[--spark-icon-size:14px]\" />}\n    </button>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  > &\n  Pick<SelectPrimitive.Portal.Props, 'container'>\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg [[data-high-contrast]_&]:border-gray-a11',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        'px-1.5 py-1 text-xs text-gray-light [[data-high-contrast]_&]:text-gray-a12',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none touch-target-row data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"[--spark-icon-size:11px]\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3 [[data-high-contrast]_&]:bg-gray-a6',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <KeyboardArrowDown className=\"rotate-180 [--spark-icon-size:14px]\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectClear,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectTriggerGroup,\n  SelectValue,\n}\n"],"mappings":"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"}

package/dist/components/select.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
-import { useFieldControl } from "./field.js";
 import { boxChrome } from "../lib/input-box-variants.js";
+import { useFieldControl } from "./field.js";
 import "react";
 import { Check, Close, KeyboardArrowDown } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/separator.cjs

@@ -4,12 +4,12 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/separator.tsx
 const Separator = react.forwardRef(({ className, orientation = "horizontal", decorative, children, ...props }, ref) => {
 	const isDecorative = decorative ?? !children;
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, cnfast.cn)("flex items-center gap-4", className),
+		className: (0, cn.cn)("flex items-center gap-4", className),
 		"data-orientation": orientation,
 		ref,
 		role: isDecorative ? "none" : "separator",
@@ -24,7 +24,7 @@ const Separator = react.forwardRef(({ className, orientation = "horizontal", dec
 		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)("shrink-0 border-gray", orientation === "horizontal" ? "h-px w-full border-t" : "h-full w-px border-l", className),
+		className: (0, cn.cn)("shrink-0 border-gray", orientation === "horizontal" ? "h-px w-full border-t" : "h-full w-px border-l", className),
 		"data-orientation": orientation,
 		ref,
 		role: isDecorative ? "none" : "separator",

package/dist/components/separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-gray',\n          orientation === 'horizontal'\n            ? 'h-px w-full border-t'\n            : 'h-full w-px border-l',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAYA,MAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;CAEpC,IAAI,UACF,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;GACnD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;GAAe,CAAA;GACnE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;EAChD;;CAIT,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,wBACA,gBAAgB,eACZ,yBACA,wBACJ,SACF;EACA,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-gray',\n          orientation === 'horizontal'\n            ? 'h-px w-full border-t'\n            : 'h-full w-px border-l',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAYA,MAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;CAEpC,IAAI,UACF,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;GACnD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;GAAe,CAAA;GACnE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;EAChD;;CAIT,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IACE,wBACA,gBAAgB,eACZ,yBACA,wBACJ,SACF;EACA,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}

package/dist/components/series-legend.cjs

@@ -1,13 +1,13 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/series-legend.tsx
 function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds, items, onToggle }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "group",
 		"aria-label": ariaLabel,
-		className: (0, cnfast.cn)("flex flex-wrap gap-x-4", className),
+		className: (0, cn.cn)("flex flex-wrap gap-x-4", className),
 		children: items.map((item) => {
 			const hidden = hiddenIds.has(item.id);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -15,7 +15,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 				onClick: () => onToggle(item.id),
 				"aria-pressed": !hidden,
 				"aria-label": `${item.label}, ${hidden ? "hidden" : "shown"}`,
-				className: (0, cnfast.cn)("flex min-h-[1.5rem] min-w-[1.5rem] cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", hidden && "opacity-40"),
+				className: (0, cn.cn)("flex min-h-[1.5rem] min-w-[1.5rem] cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", hidden && "opacity-40"),
 				children: [item.marker === "dashed-line" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"aria-hidden": "true",
 					className: "w-3 shrink-0 border-t-2 border-dashed",
@@ -25,7 +25,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 					className: "size-2.5 shrink-0 rounded-full",
 					style: { backgroundColor: item.color }
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: (0, cnfast.cn)(hidden && "line-through"),
+					className: (0, cn.cn)(hidden && "line-through"),
 					children: item.label
 				})]
 			}, item.id);

package/dist/components/series-legend.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"series-legend.cjs","names":[],"sources":["../../src/components/series-legend.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport interface SeriesLegendItem {\n  id: string\n  label: string\n  /** CSS color value applied inline (e.g. `var(--orange-a9)` or `#f00`). */\n  color: string\n  /** Swatch shape: `dot` (default) for bar/area series, `dashed-line` for line overlays. */\n  marker?: 'dot' | 'dashed-line'\n}\n\ninterface SeriesLegendProps {\n  items: SeriesLegendItem[]\n  hiddenIds: ReadonlySet<string>\n  onToggle: (id: string) => void\n  className?: string\n  /** Accessible label announced for the legend group. */\n  ariaLabel?: string\n}\n\nexport function SeriesLegend({\n  ariaLabel = 'Filter data series',\n  className,\n  hiddenIds,\n  items,\n  onToggle,\n}: SeriesLegendProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex flex-wrap gap-x-4', className)}\n    >\n      {items.map((item) => {\n        const hidden = hiddenIds.has(item.id)\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            onClick={() => onToggle(item.id)}\n            aria-pressed={!hidden}\n            aria-label={`${item.label}, ${hidden ? 'hidden' : 'shown'}`}\n            className={cn(\n              // fixed rem, not min-h-6/min-w-6: the 24px floor must not shrink with [data-scaling]\n              'flex min-h-[1.5rem] min-w-[1.5rem] cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n              hidden && 'opacity-40',\n            )}\n          >\n            {item.marker === 'dashed-line' ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                style={{ borderColor: item.color }}\n              />\n            ) : (\n              <span\n                aria-hidden=\"true\"\n                className=\"size-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: item.color }}\n              />\n            )}\n            <span className={cn(hidden && 'line-through')}>{item.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAoBA,SAAgB,aAAa,EAC3B,YAAY,sBACZ,WACA,WACA,OACA,YACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,0BAA0B,SAAS;YAEhD,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,EAAE;GACpC,OACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,EAAE;IAC/B,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,YAAA,GAAA,OAAA,IAEE,4PACA,UAAU,YACZ;cAVF,CAYG,KAAK,WAAW,gBACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,MAAM;IAClC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,YAAA,GAAA,OAAA,IAAc,UAAU,cAAc;eAAI,KAAK;IAAY,CAAA,CAC3D;MAzBD,KAAK,EAyBJ;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"series-legend.cjs","names":[],"sources":["../../src/components/series-legend.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport interface SeriesLegendItem {\n  id: string\n  label: string\n  /** CSS color value applied inline (e.g. `var(--orange-a9)` or `#f00`). */\n  color: string\n  /** Swatch shape: `dot` (default) for bar/area series, `dashed-line` for line overlays. */\n  marker?: 'dot' | 'dashed-line'\n}\n\ninterface SeriesLegendProps {\n  items: SeriesLegendItem[]\n  hiddenIds: ReadonlySet<string>\n  onToggle: (id: string) => void\n  className?: string\n  /** Accessible label announced for the legend group. */\n  ariaLabel?: string\n}\n\nexport function SeriesLegend({\n  ariaLabel = 'Filter data series',\n  className,\n  hiddenIds,\n  items,\n  onToggle,\n}: SeriesLegendProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex flex-wrap gap-x-4', className)}\n    >\n      {items.map((item) => {\n        const hidden = hiddenIds.has(item.id)\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            onClick={() => onToggle(item.id)}\n            aria-pressed={!hidden}\n            aria-label={`${item.label}, ${hidden ? 'hidden' : 'shown'}`}\n            className={cn(\n              // fixed rem, not min-h-6/min-w-6: the 24px floor must not shrink with [data-scaling]\n              'flex min-h-[1.5rem] min-w-[1.5rem] cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n              hidden && 'opacity-40',\n            )}\n          >\n            {item.marker === 'dashed-line' ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                style={{ borderColor: item.color }}\n              />\n            ) : (\n              <span\n                aria-hidden=\"true\"\n                className=\"size-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: item.color }}\n              />\n            )}\n            <span className={cn(hidden && 'line-through')}>{item.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAoBA,SAAgB,aAAa,EAC3B,YAAY,sBACZ,WACA,WACA,OACA,YACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,GAAA,IAAc,0BAA0B,SAAS;YAEhD,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,EAAE;GACpC,OACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,EAAE;IAC/B,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,YAAA,GAAA,GAAA,IAEE,4PACA,UAAU,YACZ;cAVF,CAYG,KAAK,WAAW,gBACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,MAAM;IAClC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,YAAA,GAAA,GAAA,IAAc,UAAU,cAAc;eAAI,KAAK;IAAY,CAAA,CAC3D;MAzBD,KAAK,EAyBJ;EAEZ,CAAC;CACE,CAAA;AAET"}