@epilot/spark-ui 0.17.0 → 0.18.0

package/dist/components/input-date.d.cts

@@ -0,0 +1,22 @@
+"use client";
+
+import { CalendarProps } from "./calendar.cjs";
+import * as React$1 from "react";
+
+//#region src/components/input-date.d.ts
+type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
+  calendarLabel: string;
+  calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>;
+  defaultOpen?: boolean;
+  defaultValue?: string;
+  onDateChange?: (date: Date | undefined) => void;
+  onOpenChange?: (open: boolean) => void;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  separator?: string;
+  value?: string;
+};
+declare const InputDate: React$1.ForwardRefExoticComponent<Omit<InputDateProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { InputDate, InputDateProps };
+//# sourceMappingURL=input-date.d.cts.map

package/dist/components/input-date.d.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import { CalendarProps } from "./calendar.js";
+import * as React$1 from "react";
+
+//#region src/components/input-date.d.ts
+type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
+  calendarLabel: string;
+  calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>;
+  defaultOpen?: boolean;
+  defaultValue?: string;
+  onDateChange?: (date: Date | undefined) => void;
+  onOpenChange?: (open: boolean) => void;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  separator?: string;
+  value?: string;
+};
+declare const InputDate: React$1.ForwardRefExoticComponent<Omit<InputDateProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { InputDate, InputDateProps };
+//# sourceMappingURL=input-date.d.ts.map

package/dist/components/input-date.js

@@ -0,0 +1,138 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
+import * as React$1 from "react";
+import { CalendarMonth } from "@epilot/spark-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { apply, formatDate, isDateMaskKey, parseDate } from "ictus";
+//#region src/components/input-date.tsx
+function useControllableState({ defaultProp, onChange, prop }) {
+	const [uncontrolled, setUncontrolled] = React$1.useState(defaultProp);
+	const isControlled = prop !== void 0;
+	return [isControlled ? prop : uncontrolled, React$1.useCallback((next) => {
+		if (!isControlled) setUncontrolled(next);
+		onChange?.(next);
+	}, [isControlled, onChange])];
+}
+const InputDate = React$1.forwardRef(function InputDate({ calendarLabel, calendarProps, className, defaultOpen = false, defaultValue = "", disabled, id, onDateChange, onKeyDown, onOpenChange, onValueChange, open: openProp, placeholder, readOnly, separator = ".", value: valueProp, ...props }, ref) {
+	const inputRef = React$1.useRef(null);
+	const [text, setText] = useControllableState({
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	const [open, setOpenState] = useControllableState({
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const selected = parseDate(text);
+	const [month, setMonth] = React$1.useState(() => selected ?? calendarProps?.month);
+	const setOpen = React$1.useCallback((next) => {
+		if (next && calendarProps?.month === void 0) setMonth(parseDate(text) ?? /* @__PURE__ */ new Date());
+		setOpenState(next);
+	}, [
+		calendarProps?.month,
+		setOpenState,
+		text
+	]);
+	const commit = React$1.useCallback((next) => {
+		if (next === text) return;
+		setText(next);
+		onDateChange?.(parseDate(next));
+	}, [
+		onDateChange,
+		setText,
+		text
+	]);
+	const setInputRef = React$1.useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		onOpenChange: setOpen,
+		open,
+		children: [/* @__PURE__ */ jsxs(PopoverAnchor, {
+			render: /* @__PURE__ */ jsx(InputGroup, { className }),
+			children: [/* @__PURE__ */ jsx(InputGroupInput, {
+				autoComplete: "off",
+				...props,
+				className: cn(readOnly && "cursor-pointer"),
+				disabled,
+				id,
+				inputMode: readOnly ? void 0 : "numeric",
+				onChange: () => {},
+				onClick: readOnly && !disabled ? (event) => {
+					props.onClick?.(event);
+					if (!event.defaultPrevented) setOpen(true);
+				} : props.onClick,
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.defaultPrevented) return;
+					if (event.key === "ArrowDown") {
+						event.preventDefault();
+						setOpen(true);
+						return;
+					}
+					if (readOnly || !isDateMaskKey(event.key)) return;
+					event.preventDefault();
+					const next = apply({
+						caret: event.currentTarget.selectionStart ?? 0,
+						key: event.key,
+						selectionEnd: event.currentTarget.selectionEnd ?? void 0,
+						separator,
+						value: event.currentTarget.value
+					});
+					commit(next.value);
+					const caret = next.caret;
+					const input = inputRef.current;
+					requestAnimationFrame(() => {
+						input?.setSelectionRange(caret, caret);
+					});
+				},
+				placeholder: placeholder ?? `DD${separator}MM${separator}YYYY`,
+				readOnly,
+				ref: setInputRef,
+				spellCheck: false,
+				value: text
+			}), /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-end",
+				children: /* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Button, {
+					"aria-label": calendarLabel,
+					color: "neutral",
+					disabled,
+					size: "icon-small",
+					styleVariant: "ghost",
+					children: /* @__PURE__ */ jsx(CalendarMonth, {})
+				}) })
+			})]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			"aria-label": calendarLabel,
+			className: "w-auto p-0",
+			children: /* @__PURE__ */ jsx(Calendar, {
+				...calendarProps,
+				mode: "single",
+				month: calendarProps?.month ?? month,
+				onMonthChange: (next) => {
+					calendarProps?.onMonthChange?.(next);
+					if (calendarProps?.month === void 0) setMonth(next);
+				},
+				onSelect: (next) => {
+					commit(next ? formatDate(next, separator) : "");
+					setOpen(false);
+				},
+				selected
+			})
+		})]
+	});
+});
+//#endregion
+export { InputDate };
+
+//# sourceMappingURL=input-date.js.map

package/dist/components/input-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-date.js","names":["React"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n  defaultProp,\n  onChange,\n  prop,\n}: {\n  defaultProp: T\n  onChange?: (value: T) => void\n  prop?: T\n}) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n  const isControlled = prop !== undefined\n  const value = isControlled ? prop : uncontrolled\n\n  const setValue = React.useCallback(\n    (next: T) => {\n      if (!isControlled) setUncontrolled(next)\n      onChange?.(next)\n    },\n    [isControlled, onChange],\n  )\n\n  return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n  React.ComponentProps<'input'>,\n  'children' | 'defaultValue' | 'onChange' | 'type' | 'value'\n> & {\n  calendarLabel: string\n  calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n  defaultOpen?: boolean\n  defaultValue?: string\n  onDateChange?: (date: Date | undefined) => void\n  onOpenChange?: (open: boolean) => void\n  onValueChange?: (value: string) => void\n  open?: boolean\n  separator?: string\n  value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n  function InputDate(\n    {\n      calendarLabel,\n      calendarProps,\n      className,\n      defaultOpen = false,\n      defaultValue = '',\n      disabled,\n      id,\n      onDateChange,\n      onKeyDown,\n      onOpenChange,\n      onValueChange,\n      open: openProp,\n      placeholder,\n      readOnly,\n      separator = '.',\n      value: valueProp,\n      ...props\n    },\n    ref,\n  ) {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [text, setText] = useControllableState({\n      defaultProp: defaultValue,\n      onChange: onValueChange,\n      prop: valueProp,\n    })\n    const [open, setOpenState] = useControllableState({\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n      prop: openProp,\n    })\n    const selected = parseDate(text)\n    const [month, setMonth] = React.useState<Date | undefined>(\n      () => selected ?? calendarProps?.month,\n    )\n    const setOpen = React.useCallback(\n      (next: boolean) => {\n        if (next && calendarProps?.month === undefined) {\n          setMonth(parseDate(text) ?? new Date())\n        }\n        setOpenState(next)\n      },\n      [calendarProps?.month, setOpenState, text],\n    )\n\n    const commit = React.useCallback(\n      (next: string) => {\n        if (next === text) return\n        setText(next)\n        onDateChange?.(parseDate(next))\n      },\n      [onDateChange, setText, text],\n    )\n\n    const setInputRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    return (\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverAnchor render={<InputGroup className={className} />}>\n          <InputGroupInput\n            autoComplete=\"off\"\n            {...props}\n            className={cn(readOnly && 'cursor-pointer')}\n            disabled={disabled}\n            id={id}\n            inputMode={readOnly ? undefined : 'numeric'}\n            onChange={() => {}}\n            onClick={\n              readOnly && !disabled\n                ? (event) => {\n                    props.onClick?.(event)\n                    if (!event.defaultPrevented) setOpen(true)\n                  }\n                : props.onClick\n            }\n            onKeyDown={(event) => {\n              onKeyDown?.(event)\n              if (event.defaultPrevented) return\n              if (event.key === 'ArrowDown') {\n                event.preventDefault()\n                setOpen(true)\n                return\n              }\n              if (readOnly || !isDateMaskKey(event.key)) return\n              event.preventDefault()\n              const next = apply({\n                caret: event.currentTarget.selectionStart ?? 0,\n                key: event.key,\n                selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n                separator,\n                value: event.currentTarget.value,\n              })\n              commit(next.value)\n              const caret = next.caret\n              const input = inputRef.current\n              requestAnimationFrame(() => {\n                input?.setSelectionRange(caret, caret)\n              })\n            }}\n            placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n            readOnly={readOnly}\n            ref={setInputRef}\n            spellCheck={false}\n            value={text}\n          />\n          <InputGroupAddon align=\"inline-end\">\n            <PopoverTrigger\n              render={\n                <Button\n                  aria-label={calendarLabel}\n                  color=\"neutral\"\n                  disabled={disabled}\n                  size=\"icon-small\"\n                  styleVariant=\"ghost\"\n                >\n                  <CalendarMonth />\n                </Button>\n              }\n            />\n          </InputGroupAddon>\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          aria-label={calendarLabel}\n          className=\"w-auto p-0\"\n        >\n          <Calendar\n            {...calendarProps}\n            mode=\"single\"\n            month={calendarProps?.month ?? month}\n            onMonthChange={(next) => {\n              calendarProps?.onMonthChange?.(next)\n              if (calendarProps?.month === undefined) setMonth(next)\n            }}\n            onSelect={(next) => {\n              commit(next ? formatDate(next, separator) : '')\n              setOpen(false)\n            }}\n            selected={selected}\n          />\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\n\nexport { InputDate }\n"],"mappings":"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"}

package/dist/components/line-chart.cjs

@@ -1,12 +1,12 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
-const require_components_chart = require("./chart.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
+const require_components_chart = require("./chart.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/line-chart.js

@@ -1,11 +1,11 @@
 "use client";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
-import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
-import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
+import { cn } from "../utils/cn.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import * as React$1 from "react";
 import { useCallback, useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/marker.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "default" | "separator" | "border" | null | undefined;
+  variant?: "separator" | "border" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/marker.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "default" | "separator" | "border" | null | undefined;
+  variant?: "separator" | "border" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/message-scroller.js

@@ -1,6 +1,6 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
 import { Button } from "./button.js";
 import * as React$1 from "react";

package/dist/components/pill.cjs

@@ -42,7 +42,7 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
 		...interaction,
 		ref,
-		className: (0, cnfast.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
+		className: (0, cnfast.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
@@ -54,7 +54,7 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 				event.stopPropagation();
 				onRemove?.(event);
 			},
-			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none",
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Close, { className: "[--spark-icon-size:14px]" })
 		})] }) : null]
 	});

package/dist/components/pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pill.cjs","names":["React","accentByColor","Close"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,YAAA,GAAA,OAAA,IACE,0FACA,sFACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAjBN,CAmBG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.cjs","names":["React","accentByColor","Close"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        // shared chip ink with Badge: solid leaves --spark-style-fg unset, so without the\n        // --spark-badge-fg link solid text falls through to a11 on the step-9 fill (fails AA)\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n        // surface/outline are defined by their edge; painted inset like Button's so it\n        // costs no layout, unlike Badge's real border\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,YAAA,GAAA,OAAA,IACE,0FAGA,4GAGA,kGACA,aACE,iIACF,aACE,sEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAvBN,CAyBG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/pill.js

@@ -1,6 +1,6 @@
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import * as React$1 from "react";
 import { Close } from "@epilot/spark-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -39,7 +39,7 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 		"data-accent-color": color ? accentByColor[color] : void 0,
 		...interaction,
 		ref,
-		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
+		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",
@@ -51,7 +51,7 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 				event.stopPropagation();
 				onRemove?.(event);
 			},
-			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none",
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none",
 			children: /* @__PURE__ */ jsx(Close, { className: "[--spark-icon-size:14px]" })
 		})] }) : null]
 	});

package/dist/components/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,WAAW,GACT,0FACA,sFACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAjBN,CAmBG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        // shared chip ink with Badge: solid leaves --spark-style-fg unset, so without the\n        // --spark-badge-fg link solid text falls through to a11 on the step-9 fill (fails AA)\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n        // surface/outline are defined by their edge; painted inset like Button's so it\n        // costs no layout, unlike Badge's real border\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,WAAW,GACT,0FAGA,4GAGA,kGACA,aACE,iIACF,aACE,sEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAvBN,CAyBG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/power-history-chart.cjs

@@ -1,15 +1,15 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
+const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
-const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/power-history-chart.js

@@ -1,14 +1,14 @@
 "use client";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
-import { cn } from "../utils/cn.js";
 import "../utils/chars.js";
 import { twoDecimalFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
+import { buildTimeTicks } from "../utils/chart-time-ticks.js";
+import { cn } from "../utils/cn.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
-import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/power-history.cjs

@@ -1,7 +1,7 @@
 "use client";
-const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
+const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_line_chart = require("./line-chart.cjs");

package/dist/components/power-history.js

@@ -1,7 +1,7 @@
 "use client";
-import { useContainerWidth } from "../hooks/use-container-width.js";
 import "../utils/chars.js";
 import { oneDecimalFormat } from "../utils/format.js";
+import { useContainerWidth } from "../hooks/use-container-width.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
 import { LineChart } from "./line-chart.js";

package/dist/components/power-network.js

@@ -1,6 +1,6 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { Skeleton } from "./skeleton.js";
 import { SectionTitle } from "./typography.js";
 import NumberFlow from "./number-flow.js";

package/dist/components/radio.js

@@ -1,6 +1,6 @@
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Radio as Radio$1 } from "@base-ui/react/radio";

package/dist/components/solar-forecast-chart.js

@@ -1,7 +1,7 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import "../utils/chars.js";
 import { oneDecimalFormat } from "../utils/format.js";
+import { cn } from "../utils/cn.js";
 import { LineChart } from "./line-chart.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/switch.js

@@ -1,6 +1,6 @@
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import { jsx } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/components/switch.tsx

package/dist/components/theme.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
+import { cn } from "../utils/cn.js";
 import { isSparkNeutralFamily } from "../lib/theme-types.js";
 import { CURATED_ACCENTS, accentSparkVars, appearanceForBackground, generateAccentScale, getMatchingNeutral, invertAccentScale, isParsableColor, neutralFamilyVars, neutralSparkVars, resolveAutoNeutral } from "../lib/accent-theme.js";
-import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";

package/dist/styles/spark-default.css

@@ -1146,6 +1146,10 @@
    * is unset — i.e. the solid style. High-contrast needs no badge rule: HC re-declares
    * --spark-style-fg (step-1 on the step-12 solid fill; a12 on the faint non-solid
    * fills), which wins the fallback chain outright.
+   *
+   * Pill reads this same token (it is "Badge, but interactive", with an identical fill
+   * chain and the same TEXT-on-solid contrast need). Keep it that way: a solid Pill that
+   * skips this link falls through to a11 ink on the step-9 fill and fails AA.
    */
   [data-style='solid'],
   :where([data-style='solid'] .spark-theme) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",
@@ -65,6 +65,7 @@
     "class-variance-authority": "^0.7.1",
     "cnfast": "^0.0.8",
     "colorjs.io": "^0.5.2",
+    "ictus": "^0.1.1",
     "vaul": "^1.1.2",
     "@epilot/spark-icons": "^0.0.2"
   },

package/dist/utils/date-mask.cjs

@@ -1,45 +0,0 @@
-"use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region src/utils/date-mask.ts
-function maskDateInput(value, { separator = ".", deleting = false } = {}) {
-	const digits = value.replace(/\D/g, "").slice(0, 8);
-	let out = digits.slice(0, 2);
-	if (digits.length > 2) out += separator + digits.slice(2, 4);
-	if (digits.length > 4) out += separator + digits.slice(4, 8);
-	const groupComplete = digits.length === 2 || digits.length === 4;
-	const keepTrailing = deleting ? /[./-]$/.test(value) : true;
-	if (groupComplete && keepTrailing) out += separator;
-	return out;
-}
-function parseTypedDate(value) {
-	const parts = value.trim().split(/[./-]/).map(Number);
-	if (parts.length !== 3 || parts.some(Number.isNaN)) return void 0;
-	const [day, month, year] = parts;
-	const parsed = new Date(year, month - 1, day);
-	return parsed.getFullYear() === year && parsed.getMonth() === month - 1 && parsed.getDate() === day ? parsed : void 0;
-}
-function maskedDateCaret(masked, digitsBefore) {
-	let digits = 0;
-	let index = 0;
-	while (index < masked.length && digits < digitsBefore) {
-		if (/\d/.test(masked[index])) digits++;
-		index++;
-	}
-	while (index < masked.length && /\D/.test(masked[index])) index++;
-	return index;
-}
-function formatTypedDate(date, separator = ".") {
-	const pad = (n) => String(n).padStart(2, "0");
-	return [
-		pad(date.getDate()),
-		pad(date.getMonth() + 1),
-		date.getFullYear()
-	].join(separator);
-}
-//#endregion
-exports.formatTypedDate = formatTypedDate;
-exports.maskDateInput = maskDateInput;
-exports.maskedDateCaret = maskedDateCaret;
-exports.parseTypedDate = parseTypedDate;
-
-//# sourceMappingURL=date-mask.cjs.map

package/dist/utils/date-mask.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-mask.cjs","names":[],"sources":["../../src/utils/date-mask.ts"],"sourcesContent":["// Helpers for a typeable date field: mask keystrokes into DD.MM.YYYY, parse the\n// masked value into a Date, and format a picked Date back into the masked value.\n\n// While typing, a completed group (2 or 4 digits) gets a trailing separator so\n// the next group flows. While deleting, the trailing separator is kept only if\n// the raw value still ends with one — so backspace lands on `DD.MM.` first, then\n// removes the separator on the next press, one character at a time.\nexport function maskDateInput(\n  value: string,\n  { separator = '.', deleting = false }: MaskOptions = {},\n): string {\n  const digits = value.replace(/\\D/g, '').slice(0, 8)\n  let out = digits.slice(0, 2)\n  if (digits.length > 2) out += separator + digits.slice(2, 4)\n  if (digits.length > 4) out += separator + digits.slice(4, 8)\n  const groupComplete = digits.length === 2 || digits.length === 4\n  const keepTrailing = deleting ? /[./-]$/.test(value) : true\n  if (groupComplete && keepTrailing) out += separator\n  return out\n}\n\n// Accepts any of `.` `/` `-` as separators; rejects impossible dates (32.01.2020).\nexport function parseTypedDate(value: string): Date | undefined {\n  const parts = value.trim().split(/[./-]/).map(Number)\n  if (parts.length !== 3 || parts.some(Number.isNaN)) return undefined\n  const [day, month, year] = parts as [number, number, number]\n  const parsed = new Date(year, month - 1, day)\n  const valid =\n    parsed.getFullYear() === year &&\n    parsed.getMonth() === month - 1 &&\n    parsed.getDate() === day\n  return valid ? parsed : undefined\n}\n\n// Caret position after TYPING: after the typed digit, flowing past a\n// separator into the next group. (For deletions, keep the raw caret instead —\n// the mask's separator positions are fixed, so it maps directly and backspace\n// can cross separators without looping.)\nexport function maskedDateCaret(masked: string, digitsBefore: number): number {\n  let digits = 0\n  let index = 0\n  while (index < masked.length && digits < digitsBefore) {\n    if (/\\d/.test(masked[index]!)) digits++\n    index++\n  }\n  while (index < masked.length && /\\D/.test(masked[index]!)) index++\n  return index\n}\n\nexport function formatTypedDate(date: Date, separator = '.'): string {\n  const pad = (n: number) => String(n).padStart(2, '0')\n  return [\n    pad(date.getDate()),\n    pad(date.getMonth() + 1),\n    date.getFullYear(),\n  ].join(separator)\n}\n\ninterface MaskOptions {\n  separator?: string\n  deleting?: boolean\n}\n"],"mappings":";;;AAOA,SAAgB,cACd,OACA,EAAE,YAAY,KAAK,WAAW,UAAuB,CAAC,GAC9C;CACR,MAAM,SAAS,MAAM,QAAQ,OAAO,EAAE,EAAE,MAAM,GAAG,CAAC;CAClD,IAAI,MAAM,OAAO,MAAM,GAAG,CAAC;CAC3B,IAAI,OAAO,SAAS,GAAG,OAAO,YAAY,OAAO,MAAM,GAAG,CAAC;CAC3D,IAAI,OAAO,SAAS,GAAG,OAAO,YAAY,OAAO,MAAM,GAAG,CAAC;CAC3D,MAAM,gBAAgB,OAAO,WAAW,KAAK,OAAO,WAAW;CAC/D,MAAM,eAAe,WAAW,SAAS,KAAK,KAAK,IAAI;CACvD,IAAI,iBAAiB,cAAc,OAAO;CAC1C,OAAO;AACT;AAGA,SAAgB,eAAe,OAAiC;CAC9D,MAAM,QAAQ,MAAM,KAAK,EAAE,MAAM,OAAO,EAAE,IAAI,MAAM;CACpD,IAAI,MAAM,WAAW,KAAK,MAAM,KAAK,OAAO,KAAK,GAAG,OAAO,KAAA;CAC3D,MAAM,CAAC,KAAK,OAAO,QAAQ;CAC3B,MAAM,SAAS,IAAI,KAAK,MAAM,QAAQ,GAAG,GAAG;CAK5C,OAHE,OAAO,YAAY,MAAM,QACzB,OAAO,SAAS,MAAM,QAAQ,KAC9B,OAAO,QAAQ,MAAM,MACR,SAAS,KAAA;AAC1B;AAMA,SAAgB,gBAAgB,QAAgB,cAA8B;CAC5E,IAAI,SAAS;CACb,IAAI,QAAQ;CACZ,OAAO,QAAQ,OAAO,UAAU,SAAS,cAAc;EACrD,IAAI,KAAK,KAAK,OAAO,MAAO,GAAG;EAC/B;CACF;CACA,OAAO,QAAQ,OAAO,UAAU,KAAK,KAAK,OAAO,MAAO,GAAG;CAC3D,OAAO;AACT;AAEA,SAAgB,gBAAgB,MAAY,YAAY,KAAa;CACnE,MAAM,OAAO,MAAc,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG;CACpD,OAAO;EACL,IAAI,KAAK,QAAQ,CAAC;EAClB,IAAI,KAAK,SAAS,IAAI,CAAC;EACvB,KAAK,YAAY;CACnB,EAAE,KAAK,SAAS;AAClB"}

package/dist/utils/date-mask.d.cts

@@ -1,17 +0,0 @@
-"use client";
-
-//#region src/utils/date-mask.d.ts
-declare function maskDateInput(value: string, {
-  separator,
-  deleting
-}?: MaskOptions): string;
-declare function parseTypedDate(value: string): Date | undefined;
-declare function maskedDateCaret(masked: string, digitsBefore: number): number;
-declare function formatTypedDate(date: Date, separator?: string): string;
-interface MaskOptions {
-  separator?: string;
-  deleting?: boolean;
-}
-//#endregion
-export { formatTypedDate, maskDateInput, maskedDateCaret, parseTypedDate };
-//# sourceMappingURL=date-mask.d.cts.map

package/dist/utils/date-mask.d.ts

@@ -1,17 +0,0 @@
-"use client";
-
-//#region src/utils/date-mask.d.ts
-declare function maskDateInput(value: string, {
-  separator,
-  deleting
-}?: MaskOptions): string;
-declare function parseTypedDate(value: string): Date | undefined;
-declare function maskedDateCaret(masked: string, digitsBefore: number): number;
-declare function formatTypedDate(date: Date, separator?: string): string;
-interface MaskOptions {
-  separator?: string;
-  deleting?: boolean;
-}
-//#endregion
-export { formatTypedDate, maskDateInput, maskedDateCaret, parseTypedDate };
-//# sourceMappingURL=date-mask.d.ts.map