@epilot/spark-ui 1.0.0-alpha.3 → 1.0.0-alpha.5

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

@@ -1 +1 @@
-{"version":3,"file":"schedule-list.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props} />\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-2xl 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 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\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    return (\n      <div\n        ref={ref}\n        role={interactive ? 'button' : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={\n          interactive\n            ? (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault()\n                  onClick()\n                }\n              }\n            : undefined\n        }\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-slate-a3 focus-visible:ring 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    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-circle text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\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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"}
+{"version":3,"file":"schedule-list.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props} />\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-2xl 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 ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\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    return (\n      <div\n        ref={ref}\n        role={interactive ? 'button' : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={\n          interactive\n            ? (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault()\n                  onClick()\n                }\n              }\n            : undefined\n        }\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer 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    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-circle 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 ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\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/schedule-list.js

@@ -19,7 +19,7 @@ ScheduleListEmpty.displayName = "ScheduleListEmpty";
 const ScheduleListAdd = React$1.forwardRef(({ children, className, icon, type = "button", ...props }, ref) => /* @__PURE__ */ jsxs("button", {
 	ref,
 	type,
-	className: cn("inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-2xl 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 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+	className: cn("inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-2xl 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__ */ jsx(MaterialSymbol, {
 		className: "text-[14px]",
@@ -41,7 +41,7 @@ const ScheduleEntry = React$1.forwardRef(({ children, className, disabled, onCli
 			}
 		} : void 0,
 		"aria-disabled": disabled || void 0,
-		className: cn("flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors", interactive && "cursor-pointer hover:bg-slate-a3 focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", disabled && "cursor-not-allowed opacity-50", className),
+		className: cn("flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors", interactive && "cursor-pointer 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
 	});
@@ -85,7 +85,7 @@ const ScheduleEntryDelete = React$1.forwardRef(({ "aria-label": ariaLabel = "Del
 		event.stopPropagation();
 		onClick?.(event);
 	},
-	className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-circle text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+	className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-circle 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__ */ jsx(MaterialSymbol, {
 		className: "text-[14px]",

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

@@ -1 +1 @@
-{"version":3,"file":"schedule-list.js","names":["React"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props} />\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-2xl 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 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\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    return (\n      <div\n        ref={ref}\n        role={interactive ? 'button' : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={\n          interactive\n            ? (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault()\n                  onClick()\n                }\n              }\n            : undefined\n        }\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-slate-a3 focus-visible:ring 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    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-circle text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\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,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,uBAAuB,UAAU;CAAE,GAAI;CAAS,CAAA,CAC7E;AAEF,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,QAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACO;CACL,WAAW,GAAG,qCAAqC,UAAU;CAC7D,GAAI;CACJ,CAAA,CACF;AAEF,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,qBAAC,UAAD;CACO;CACC;CACN,WAAW,GACT,gWACA,UACD;CACD,GAAI;WAPN,CASG,QAAQ,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;EAAQ,CAAA,EAC7D,SACM;GACT;AAEF,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBA,QAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;AAC9C,QACE,oBAAC,OAAD;EACO;EACL,MAAM,cAAc,WAAW,KAAA;EAC/B,UAAU,cAAc,IAAI,KAAA;EAC5B,SAAS,cAAc,UAAU,KAAA;EACjC,WACE,eACK,UAAU;AACT,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,gBAAgB;AACtB,aAAS;;MAGb,KAAA;EAEN,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,uFACA,eACE,gHACF,YAAY,iCACZ,UACD;EACD,GAAI;EAEH;EACG,CAAA;EAGX;AAED,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,wCAAwC,UAAU;CAChE,GAAI;CACJ,CAAA,CACF;AAEF,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,QAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,0EACA,UACD;CACD,GAAI;CACJ,CAAA,CACF;AAEF,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,QAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACO;CACL,WAAW,GAAG,oCAAoC,UAAU;CAC5D,GAAI;CACJ,CAAA,CACF;AAEF,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,oBAAC,OAAD;CACO;CACL,UAAU,UAAU;AAClB,QAAM,iBAAiB;AACvB,YAAU,MAAM;;CAElB,WAAW,GAAG,sCAAsC,UAAU;CAC9D,GAAI;CACJ,CAAA,CACF;AAEF,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,QAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,oBAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;AAClB,QAAM,iBAAiB;AACvB,YAAU,MAAM;;CAElB,WAAW,GACT,kRACA,UACD;CACD,GAAI;WAEH,YAAY,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;EAAW,CAAA;CAC9D,CAAA,CAEZ;AAED,oBAAoB,cAAc"}
+{"version":3,"file":"schedule-list.js","names":["React"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props} />\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-2xl 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 ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\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    return (\n      <div\n        ref={ref}\n        role={interactive ? 'button' : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={\n          interactive\n            ? (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault()\n                  onClick()\n                }\n              }\n            : undefined\n        }\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer 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    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-circle 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 ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\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,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,uBAAuB,UAAU;CAAE,GAAI;CAAS,CAAA,CAC7E;AAEF,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,QAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACO;CACL,WAAW,GAAG,qCAAqC,UAAU;CAC7D,GAAI;CACJ,CAAA,CACF;AAEF,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,qBAAC,UAAD;CACO;CACC;CACN,WAAW,GACT,kWACA,UACD;CACD,GAAI;WAPN,CASG,QAAQ,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;EAAQ,CAAA,EAC7D,SACM;GACT;AAEF,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBA,QAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;AAC9C,QACE,oBAAC,OAAD;EACO;EACL,MAAM,cAAc,WAAW,KAAA;EAC/B,UAAU,cAAc,IAAI,KAAA;EAC5B,SAAS,cAAc,UAAU,KAAA;EACjC,WACE,eACK,UAAU;AACT,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,gBAAgB;AACtB,aAAS;;MAGb,KAAA;EAEN,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,uFACA,eACE,iHACF,YAAY,iCACZ,UACD;EACD,GAAI;EAEH;EACG,CAAA;EAGX;AAED,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,wCAAwC,UAAU;CAChE,GAAI;CACJ,CAAA,CACF;AAEF,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,QAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,0EACA,UACD;CACD,GAAI;CACJ,CAAA,CACF;AAEF,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,QAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACO;CACL,WAAW,GAAG,oCAAoC,UAAU;CAC5D,GAAI;CACJ,CAAA,CACF;AAEF,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,oBAAC,OAAD;CACO;CACL,UAAU,UAAU;AAClB,QAAM,iBAAiB;AACvB,YAAU,MAAM;;CAElB,WAAW,GAAG,sCAAsC,UAAU;CAC9D,GAAI;CACJ,CAAA,CACF;AAEF,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,QAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,oBAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;AAClB,QAAM,iBAAiB;AACvB,YAAU,MAAM;;CAElB,WAAW,GACT,oRACA,UACD;CACD,GAAI;WAEH,YAAY,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;EAAW,CAAA;CAC9D,CAAA,CAEZ;AAED,oBAAoB,cAAc"}

package/dist/components/segmented-control.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+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");
+//#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, {
+		"data-slot": "segmented-control",
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_tabs.Tabs.List, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"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),
+			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-[var(--active-tab-top)] left-[var(--active-tab-left)] z-0 h-[var(--active-tab-height)] w-[var(--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(--spark-9))", "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]
+		})
+	});
+}
+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", "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(--spark-contrast))", "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
+	});
+}
+//#endregion
+exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlItem = SegmentedControlItem;
+
+//# sourceMappingURL=segmented-control.cjs.map

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

@@ -0,0 +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-[var(--active-tab-top)] left-[var(--active-tab-left)] z-0 h-[var(--active-tab-height)] w-[var(--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(--spark-9))',\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        '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(--spark-contrast))',\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;AACxB,QACE,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,UACD;aAtBH,CAyBE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,YAAA,GAAA,OAAA,IACE,uJACA,oEACA,6BACA,2EACA,8HACA,0FAEA,2CACD;IACD,CAAA,EACD,SACkB;;EACF,CAAA;;AAMzB,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;AAC5B,QACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,KAAf;EACE,aAAU;EACL;EACL,YAAA,GAAA,OAAA,IACE,gJACA,oEACA,iEACA,sCACA,6DAGA,iFACA,gEACA,gDAGA,0KACA,mLACA,+KACA,UACD;EACD,GAAI;EAEH;EACiB,CAAA"}

package/dist/components/segmented-control.d.cts

@@ -0,0 +1,33 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-BwSJKdsB.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/segmented-control.d.ts
+type SegmentedControlSize = 'small' | 'default' | 'medium';
+type SegmentedControlProps = Omit<React$1.ComponentProps<typeof Tabs.Root>, 'orientation'> & {
+  /** Visual weight of the selected segment, following the Spark style axis. */styleVariant?: Exclude<SparkStyle, 'ghost'>; /** Control height, padding, and typography. Matches the Button size scale. */
+  size?: SegmentedControlSize;
+};
+declare function SegmentedControl({
+  className,
+  styleVariant,
+  size,
+  children,
+  ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  ...props
+}: SegmentedControlProps): _$react_jsx_runtime0.JSX.Element;
+type SegmentedControlItemProps = React$1.ComponentProps<typeof Tabs.Tab>;
+declare function SegmentedControlItem({
+  className,
+  children,
+  ref,
+  ...props
+}: SegmentedControlItemProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSize };
+//# sourceMappingURL=segmented-control.d.cts.map

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-BDdoRxXa.js";
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/segmented-control.d.ts
+type SegmentedControlSize = 'small' | 'default' | 'medium';
+type SegmentedControlProps = Omit<React$1.ComponentProps<typeof Tabs.Root>, 'orientation'> & {
+  /** Visual weight of the selected segment, following the Spark style axis. */styleVariant?: Exclude<SparkStyle, 'ghost'>; /** Control height, padding, and typography. Matches the Button size scale. */
+  size?: SegmentedControlSize;
+};
+declare function SegmentedControl({
+  className,
+  styleVariant,
+  size,
+  children,
+  ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  ...props
+}: SegmentedControlProps): _$react_jsx_runtime0.JSX.Element;
+type SegmentedControlItemProps = React$1.ComponentProps<typeof Tabs.Tab>;
+declare function SegmentedControlItem({
+  className,
+  children,
+  ref,
+  ...props
+}: SegmentedControlItemProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSize };
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control.js

@@ -0,0 +1,40 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/segmented-control.tsx
+function SegmentedControl({ className, styleVariant = "solid", size = "default", children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "segmented-control",
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Tabs.List, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"data-size": size,
+			"data-slot": "segmented-control-track",
+			"data-style": styleVariant,
+			className: 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__ */ jsx(Tabs.Indicator, {
+				"data-slot": "segmented-control-indicator",
+				renderBeforeHydration: true,
+				className: cn("pointer-events-none absolute top-[var(--active-tab-top)] left-[var(--active-tab-left)] z-0 h-[var(--active-tab-height)] w-[var(--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(--spark-9))", "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]
+		})
+	});
+}
+function SegmentedControlItem({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "segmented-control-item",
+		ref,
+		className: 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", "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(--spark-contrast))", "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
+	});
+}
+//#endregion
+export { SegmentedControl, SegmentedControlItem };
+
+//# sourceMappingURL=segmented-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","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-[var(--active-tab-top)] left-[var(--active-tab-left)] z-0 h-[var(--active-tab-height)] w-[var(--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(--spark-9))',\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        '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(--spark-contrast))',\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;AACxB,QACE,oBAACA,KAAc,MAAf;EAAoB,aAAU;EAAyB;EAAK,GAAI;YAC9D,qBAACA,KAAc,MAAf;GAGE,cAAY;GACZ,mBAAiB;GACjB,aAAW;GACX,aAAU;GACV,cAAY;GACZ,WAAW,GAET,kEACA,oEAIA,8DACA,0HACA,0FACA,SAAS,WAAW,eACpB,SAAS,aAAa,kBACtB,SAAS,YAAY,kBACrB,UACD;aAtBH,CAyBE,oBAACA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,WAAW,GACT,uJACA,oEACA,6BACA,2EACA,8HACA,0FAEA,2CACD;IACD,CAAA,EACD,SACkB;;EACF,CAAA;;AAMzB,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;AAC5B,QACE,oBAACA,KAAc,KAAf;EACE,aAAU;EACL;EACL,WAAW,GACT,gJACA,oEACA,iEACA,sCACA,6DAGA,iFACA,gEACA,gDAGA,0KACA,mLACA,+KACA,UACD;EACD,GAAI;EAEH;EACiB,CAAA"}

package/dist/components/select.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_field = require("./field.cjs");
-const require_input_box_variants = require("../input-box-variants-BMDdwvqg.cjs");
+const require_input_box_variants = require("../input-box-variants-ZCtgs-1S.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/select.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle } from "../theme-types-r20EJfEC.cjs";
+import { i as SparkInputStyle } from "../theme-types-BwSJKdsB.cjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/select.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle } from "../theme-types-DoROIXpi.js";
+import { i as SparkInputStyle } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/select.js

@@ -3,7 +3,7 @@
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import { useFieldControl } from "./field.js";
-import { n as boxChrome } from "../input-box-variants-Dr1K7uYE.js";
+import { n as boxChrome } from "../input-box-variants-DcajYXvo.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/separator.cjs

@@ -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-t border-gray", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+		className: (0, cnfast.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-t border-gray',\n          orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\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;AAEpC,KAAI,SACF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,iCACA,gBAAgB,eAAe,gBAAgB,eAC/C,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,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;AAEpC,KAAI,SACF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,wBACA,gBAAgB,eACZ,yBACA,wBACJ,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,UAAU,cAAc"}

package/dist/components/separator.js

@@ -21,7 +21,7 @@ const Separator = React$1.forwardRef(({ className, orientation = "horizontal", d
 		]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("shrink-0 border-t border-gray", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+		className: 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.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","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-t border-gray',\n          orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\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,QAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;AAEpC,KAAI,SACF,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,oBAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,iCACA,gBAAgB,eAAe,gBAAgB,eAC/C,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,UAAU,cAAc"}
+{"version":3,"file":"separator.js","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,QAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;AAEpC,KAAI,SACF,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,oBAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,wBACA,gBAAgB,eACZ,yBACA,wBACJ,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,UAAU,cAAc"}

package/dist/components/series-legend.cjs

@@ -16,7 +16,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 cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", hidden && "opacity-40"),
+				className: (0, cnfast.cn)("flex 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", 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",

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 gap-y-1.5', 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              'flex cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden',\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-circle\"\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;AACpB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,oCAAoC,UAAU;YAE3D,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,GAAG;AACrC,UACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,GAAG;IAChC,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,YAAA,GAAA,OAAA,IACE,8LACA,UAAU,aACX;cATH,CAWG,KAAK,WAAW,gBACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,OAAO;KAClC,CAAA,GAEF,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,OAAO;KACtC,CAAA,EAEJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,YAAA,GAAA,OAAA,IAAc,UAAU,eAAe;eAAG,KAAK;KAAa,CAAA,CAC3D;MAxBF,KAAK,GAwBH;IAEX;EACE,CAAA"}
+{"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 gap-y-1.5', 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              'flex 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',\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-circle\"\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;AACpB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,oCAAoC,UAAU;YAE3D,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,GAAG;AACrC,UACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,GAAG;IAChC,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,YAAA,GAAA,OAAA,IACE,gMACA,UAAU,aACX;cATH,CAWG,KAAK,WAAW,gBACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,OAAO;KAClC,CAAA,GAEF,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,OAAO;KACtC,CAAA,EAEJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,YAAA,GAAA,OAAA,IAAc,UAAU,eAAe;eAAG,KAAK;KAAa,CAAA,CAC3D;MAxBF,KAAK,GAwBH;IAEX;EACE,CAAA"}

package/dist/components/series-legend.js

@@ -14,7 +14,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 				onClick: () => onToggle(item.id),
 				"aria-pressed": !hidden,
 				"aria-label": `${item.label}, ${hidden ? "hidden" : "shown"}`,
-				className: cn("flex cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", hidden && "opacity-40"),
+				className: cn("flex 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", hidden && "opacity-40"),
 				children: [item.marker === "dashed-line" ? /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					className: "w-3 shrink-0 border-t-2 border-dashed",

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

@@ -1 +1 @@
-{"version":3,"file":"series-legend.js","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 gap-y-1.5', 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              'flex cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden',\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-circle\"\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;AACpB,QACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,oCAAoC,UAAU;YAE3D,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,GAAG;AACrC,UACE,qBAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,GAAG;IAChC,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,WAAW,GACT,8LACA,UAAU,aACX;cATH,CAWG,KAAK,WAAW,gBACf,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,OAAO;KAClC,CAAA,GAEF,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,OAAO;KACtC,CAAA,EAEJ,oBAAC,QAAD;KAAM,WAAW,GAAG,UAAU,eAAe;eAAG,KAAK;KAAa,CAAA,CAC3D;MAxBF,KAAK,GAwBH;IAEX;EACE,CAAA"}
+{"version":3,"file":"series-legend.js","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 gap-y-1.5', 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              'flex 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',\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-circle\"\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;AACpB,QACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,oCAAoC,UAAU;YAE3D,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,GAAG;AACrC,UACE,qBAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,GAAG;IAChC,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,WAAW,GACT,gMACA,UAAU,aACX;cATH,CAWG,KAAK,WAAW,gBACf,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,OAAO;KAClC,CAAA,GAEF,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,OAAO;KACtC,CAAA,EAEJ,oBAAC,QAAD;KAAM,WAAW,GAAG,UAAU,eAAe;eAAG,KAAK;KAAa,CAAA,CAC3D;MAxBF,KAAK,GAwBH;IAEX;EACE,CAAA"}

package/dist/components/slider.cjs

@@ -102,7 +102,7 @@ Slider.displayName = "Slider";
 function SliderControl({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Control, {
 		"data-slot": "slider-control",
-		className: (0, cnfast.cn)("relative flex min-h-6 w-full touch-none items-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+		className: (0, cnfast.cn)("relative flex min-h-6 w-full touch-none items-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
 		...props
 	});
 }
@@ -111,7 +111,7 @@ SliderControl.displayName = "SliderControl";
 function SliderTrack({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Track, {
 		"data-slot": "slider-track",
-		className: (0, cnfast.cn)("relative h-3 w-full rounded-[var(--spark-rounded-sm)] bg-gray-a4", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3", className),
+		className: (0, cnfast.cn)("relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3", className),
 		...props
 	});
 }
@@ -120,7 +120,7 @@ SliderTrack.displayName = "SliderTrack";
 function SliderIndicator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Indicator, {
 		"data-slot": "slider-indicator",
-		className: (0, cnfast.cn)("rounded-[var(--spark-rounded-sm)] bg-[var(--spark-slider-range,var(--spark-9))]", className),
+		className: (0, cnfast.cn)("rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))", "transition-[width,height,inset-inline-start] duration-150 data-dragging:transition-none motion-reduce:transition-none", className),
 		...props
 	});
 }
@@ -152,34 +152,21 @@ function SliderTicks({ className, ...props }) {
 			const position = min + index * step;
 			const pct = (position - min) / (max - min) * 100;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, cnfast.cn)("absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", position >= bandLow && position <= bandHigh ? "bg-[var(--spark-slider-tick-on,var(--spark-on-solid,#fff))]" : "bg-gray-a8"),
+				className: (0, cnfast.cn)("absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", position >= bandLow && position <= bandHigh ? "bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))" : "bg-gray-a8"),
 				style: { left: `${pct}%` }
 			}, index);
 		})
 	});
 }
 SliderTicks.displayName = "SliderTicks";
-/**
-* The grab handle — a 16px accent knob. Corners follow the [data-radius] knob
-* (`--spark-rounded-lg`, matching the switch thumb): a circle at medium+, a
-* rounded square at small, a square at none. A background-colored separator ring
-* lifts it off the accent-filled range and a soft drop shadow adds depth; both
-* ride `--tw-shadow` so `focus-visible:ring` stays free. The invisible 24px hit
-* area meets the WCAG 2.5.8 target minimum.
-*/
 function SliderThumb({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Thumb, {
 		"data-slot": "slider-thumb",
-		className: (0, cnfast.cn)("block size-4 shrink-0 rounded-[var(--spark-rounded-lg)] bg-[var(--spark-slider-range,var(--spark-9))]", "shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-[dragging]:ring data-[dragging]:ring-offset-2", "disabled:pointer-events-none", className),
+		className: (0, cnfast.cn)("block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))", "shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2", "data-dragging:ring-2 data-dragging:ring-offset-2", "transition-[inset-inline-start,top,box-shadow] duration-150 data-dragging:transition-none motion-reduce:transition-none", "disabled:pointer-events-none", className),
 		...props
 	});
 }
 SliderThumb.displayName = "SliderThumb";
-/**
-* Read-only value readout (`<output>`). Reads Base UI's own slider context, so
-* it stays formatted per the Root's `format`/`locale`. Pass a render function
-* for custom output, e.g. `{(f) => `${f[0]} €`}`.
-*/
 function SliderValue({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Value, {
 		"data-slot": "slider-value",
@@ -253,7 +240,7 @@ function SliderInput({ className, index = 0, unit, disabled, onFocus, onBlur, on
 				if (event.key === "Enter") event.currentTarget.blur();
 				onKeyDown?.(event);
 			},
-			className: (0, cnfast.cn)("w-16 bg-transparent tabular-nums outline-hidden", "rounded-[var(--spark-rounded-sm)] focus-visible:ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"),
+			className: (0, cnfast.cn)("w-16 bg-transparent tabular-nums outline-hidden", "rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"),
 			...props
 		}), unit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "text-sm text-gray",