@epilot/spark-ui 0.22.1 → 0.23.1

package/dist/components/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,uBAAuBA,MAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,oBAIpB,GAAG;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,oBAAoB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,QAAlB;EAAoC;YAClC,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACJ;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,GAAA,IACE,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}
+{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    | 'align'\n    | 'alignOffset'\n    | 'side'\n    | 'sideOffset'\n    | 'anchor'\n    | 'collisionAvoidance'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  collisionAvoidance,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        collisionAvoidance={collisionAvoidance}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,uBAAuBA,MAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,oBAIpB,GAAG;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAcA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,oBACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,oBAAoB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,QAAlB;EAAoC;YAClC,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACU;GACd;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,GAAA,IACE,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}

package/dist/components/popover.d.cts

@@ -14,7 +14,7 @@ declare function PopoverAnchor({
   render,
   ...props
 }: useRender.ComponentProps<'div'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
-type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'> & Pick<Popover$1.Portal.Props, 'container'>;
+type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor' | 'collisionAvoidance'> & Pick<Popover$1.Portal.Props, 'container'>;
 declare function PopoverContent({
   className,
   align,
@@ -22,6 +22,7 @@ declare function PopoverContent({
   side,
   alignOffset,
   anchor,
+  collisionAvoidance,
   container,
   ...props
 }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover.d.ts

@@ -14,7 +14,7 @@ declare function PopoverAnchor({
   render,
   ...props
 }: useRender.ComponentProps<'div'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
-type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'> & Pick<Popover$1.Portal.Props, 'container'>;
+type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor' | 'collisionAvoidance'> & Pick<Popover$1.Portal.Props, 'container'>;
 declare function PopoverContent({
   className,
   align,
@@ -22,6 +22,7 @@ declare function PopoverContent({
   side,
   alignOffset,
   anchor,
+  collisionAvoidance,
   container,
   ...props
 }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover.js

@@ -40,7 +40,7 @@ function PopoverAnchor({ render, ...props }) {
 		props: mergeProps({ "data-slot": "popover-anchor" }, props)
 	});
 }
-function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, container, ...props }) {
+function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, collisionAvoidance, container, ...props }) {
 	const context = React$1.useContext(PopoverAnchorContext);
 	return /* @__PURE__ */ jsx(Popover$1.Portal, {
 		container,
@@ -49,6 +49,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
 			alignOffset,
 			anchor: anchor ?? context?.anchor ?? void 0,
 			className: "isolate z-50",
+			collisionAvoidance,
 			side,
 			sideOffset,
 			children: /* @__PURE__ */ jsx(Popover$1.Popup, {

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;AAQA,MAAM,uBAAuBA,QAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,UAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,oBAIpB,GAAG;EACd,OAAO,WACL,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,oBAAoB;CACrD,OACE,oBAACC,UAAiB,QAAlB;EAAoC;YAClC,oBAACA,UAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACJ;GACM;aAEZ,oBAACA,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}
+{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    | 'align'\n    | 'alignOffset'\n    | 'side'\n    | 'sideOffset'\n    | 'anchor'\n    | 'collisionAvoidance'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  collisionAvoidance,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        collisionAvoidance={collisionAvoidance}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;AAQA,MAAM,uBAAuBA,QAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,UAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,oBAIpB,GAAG;EACd,OAAO,WACL,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAcA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,oBACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,oBAAoB;CACrD,OACE,oBAACC,UAAiB,QAAlB;EAAoC;YAClC,oBAACA,UAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACU;GACd;GACM;aAEZ,oBAACA,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}

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

@@ -6,10 +6,10 @@ const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cj
 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_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

@@ -5,10 +5,10 @@ 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 { 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/progress.cjs

@@ -22,7 +22,7 @@ const Progress = react.forwardRef(({ className, value, max = 100, size = "defaul
 		role: "progressbar",
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300 motion-reduce:transition-none",
 			style: { width: `${percentage}%` }
 		})
 	});

package/dist/components/progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.cjs","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,MAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,YAAA,GAAA,GAAA,IACE,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"progress.cjs","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300 motion-reduce:transition-none\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,MAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,YAAA,GAAA,GAAA,IACE,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/components/progress.js

@@ -19,7 +19,7 @@ const Progress = React$1.forwardRef(({ className, value, max = 100, size = "defa
 		role: "progressbar",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300 motion-reduce:transition-none",
 			style: { width: `${percentage}%` }
 		})
 	});

package/dist/components/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,QAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,WAAW,GACT,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"progress.js","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300 motion-reduce:transition-none\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,QAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,WAAW,GACT,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

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/segmented-control.cjs

@@ -8,7 +8,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_tabs = require("@base-ui/react/tabs");
 let cn = require("cn");
 //#region src/components/segmented-control.tsx
-function SegmentedControl({ className, styleVariant = "solid", size = "default", children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+const SegmentedControl = react.forwardRef(function SegmentedControl({ className, styleVariant = "solid", size = "default", children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
 		"data-slot": "segmented-control",
 		ref,
@@ -27,8 +27,8 @@ function SegmentedControl({ className, styleVariant = "solid", size = "default",
 			}), children]
 		})
 	});
-}
-function SegmentedControlItem({ className, children, ref, ...props }) {
+});
+const SegmentedControlItem = react.forwardRef(function SegmentedControlItem({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
 		"data-slot": "segmented-control-item",
 		ref,
@@ -36,7 +36,7 @@ function SegmentedControlItem({ className, children, ref, ...props }) {
 		...props,
 		children
 	});
-}
+});
 //#endregion
 exports.SegmentedControl = SegmentedControl;
 exports.SegmentedControlItem = SegmentedControlItem;

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

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

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

@@ -10,23 +10,9 @@ type SegmentedControlProps = Omit<React$1.ComponentProps<typeof Tabs.Root>, 'ori
   /** 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): import("react/jsx-runtime").JSX.Element;
+declare const SegmentedControl: React$1.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 type SegmentedControlItemProps = React$1.ComponentProps<typeof Tabs.Tab>;
-declare function SegmentedControlItem({
-  className,
-  children,
-  ref,
-  ...props
-}: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare const SegmentedControlItem: React$1.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
 //#endregion
 export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSize };
 //# sourceMappingURL=segmented-control.d.cts.map

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

@@ -10,23 +10,9 @@ type SegmentedControlProps = Omit<React$1.ComponentProps<typeof Tabs.Root>, 'ori
   /** 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): import("react/jsx-runtime").JSX.Element;
+declare const SegmentedControl: React$1.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 type SegmentedControlItemProps = React$1.ComponentProps<typeof Tabs.Tab>;
-declare function SegmentedControlItem({
-  className,
-  children,
-  ref,
-  ...props
-}: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare const SegmentedControlItem: React$1.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
 //#endregion
 export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSize };
 //# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control.js

@@ -1,11 +1,11 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
-import "react";
+import * as React$1 from "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 }) {
+const SegmentedControl = React$1.forwardRef(function SegmentedControl({ className, styleVariant = "solid", size = "default", children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Tabs.Root, {
 		"data-slot": "segmented-control",
 		ref,
@@ -24,8 +24,8 @@ function SegmentedControl({ className, styleVariant = "solid", size = "default",
 			}), children]
 		})
 	});
-}
-function SegmentedControlItem({ className, children, ref, ...props }) {
+});
+const SegmentedControlItem = React$1.forwardRef(function SegmentedControlItem({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		"data-slot": "segmented-control-item",
 		ref,
@@ -33,7 +33,7 @@ function SegmentedControlItem({ className, children, ref, ...props }) {
 		...props,
 		children
 	});
-}
+});
 //#endregion
 export { SegmentedControl, SegmentedControlItem };
 

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

@@ -1 +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-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)',\n            'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n            'bg-gray-1 dark:bg-gray-a4',\n            'group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--color-primary))',\n            'shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n            'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none',\n            // suppress the corner-to-position slide on first mount\n            'data-starting-style:transition-none',\n          )}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  )\n}\n\ntype SegmentedControlItemProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction SegmentedControlItem({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"segmented-control-item\"\n      ref={ref}\n      className={cn(\n        'relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none',\n        // small/default tracks render 36/40px items; the overlay floors them to\n        // 44px on coarse pointers only (medium is already 44px and is untouched,\n        // since the overlay is max(100%, 2.75rem) and never shrinks)\n        'touch-target',\n        'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n        'text-gray-a11 transition-colors motion-reduce:transition-none',\n        'not-data-active:hover:text-gray-12',\n        'data-active:text-(--spark-style-fg,var(--color-primary-foreground))',\n        // ring-offset-1 floats the ring off the segment (a flush ring vanishes\n        // on the solid indicator; a full inset box reads heavy)\n        'focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        // size follows the Button scale (padding + icon size). Icon size is set\n        // via --spark-icon-size (font glyphs) plus size-* (raw svg).\n        'group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4',\n        'group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5',\n        'group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Tab>\n  )\n}\n\nexport { SegmentedControl, SegmentedControlItem }\nexport type {\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n  SegmentedControlSize,\n}\n"],"mappings":";;;;;;;AAmBA,SAAS,iBAAiB,EACxB,WACA,eAAe,SACf,OAAO,WACP,UACA,KACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACqB;CACxB,OACE,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,SACF;aAtBF,CAyBE,oBAACA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,WAAW,GACT,mIACA,oEACA,6BACA,iFACA,8HACA,0FAEA,qCACF;GACD,CAAA,GACA,QACiB;;CACF,CAAA;AAExB;AAIA,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;CAC5B,OACE,oBAACA,KAAc,KAAf;EACE,aAAU;EACL;EACL,WAAW,GACT,gJAIA,gBACA,oEACA,iEACA,sCACA,uEAGA,iFACA,gEACA,gDAGA,0KACA,mLACA,+KACA,SACF;EACA,GAAI;EAEH;CACgB,CAAA;AAEvB"}
+{"version":3,"file":"segmented-control.js","names":["React","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\nconst SegmentedControl = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Root>,\n  Omit<SegmentedControlProps, 'ref'>\n>(function SegmentedControl(\n  {\n    className,\n    styleVariant = 'solid',\n    size = 'default',\n    children,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <TabsPrimitive.Root data-slot=\"segmented-control\" ref={ref} {...props}>\n      <TabsPrimitive.List\n        // the group's accessible name belongs on role=tablist (the List), not\n        // the Root container\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-size={size}\n        data-slot=\"segmented-control-track\"\n        data-style={styleVariant}\n        className={cn(\n          // full-width control; segments share the width equally (flex-1 below)\n          'group/segmented relative isolate flex w-full items-stretch p-1',\n          'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          // the track chrome follows the style: a filled groove for solid/soft, a\n          // faintly-filled bordered surface, or a bare outline (all neutral — the\n          // accent lives on the selected segment)\n          'data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3',\n          'data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)',\n          'data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)',\n          size === 'small' && 'h-9 text-sm',\n          size === 'default' && 'h-10 text-base',\n          size === 'medium' && 'h-11 text-base',\n          className,\n        )}\n      >\n        {/* neutral like the switch thumb; solid alone fills with the accent below */}\n        <TabsPrimitive.Indicator\n          data-slot=\"segmented-control-indicator\"\n          renderBeforeHydration\n          className={cn(\n            'pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)',\n            'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n            'bg-gray-1 dark:bg-gray-a4',\n            'group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--color-primary))',\n            'shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n            'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none',\n            // suppress the corner-to-position slide on first mount\n            'data-starting-style:transition-none',\n          )}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  )\n})\n\ntype SegmentedControlItemProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Tab>,\n  Omit<SegmentedControlItemProps, 'ref'>\n>(function SegmentedControlItem({ className, children, ...props }, ref) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"segmented-control-item\"\n      ref={ref}\n      className={cn(\n        'relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none',\n        // small/default tracks render 36/40px items; the overlay floors them to\n        // 44px on coarse pointers only (medium is already 44px and is untouched,\n        // since the overlay is max(100%, 2.75rem) and never shrinks)\n        'touch-target',\n        'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n        'text-gray-a11 transition-colors motion-reduce:transition-none',\n        'not-data-active:hover:text-gray-12',\n        'data-active:text-(--spark-style-fg,var(--color-primary-foreground))',\n        // ring-offset-1 floats the ring off the segment (a flush ring vanishes\n        // on the solid indicator; a full inset box reads heavy)\n        'focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        // size follows the Button scale (padding + icon size). Icon size is set\n        // via --spark-icon-size (font glyphs) plus size-* (raw svg).\n        'group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4',\n        'group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5',\n        'group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Tab>\n  )\n})\n\nexport { SegmentedControl, SegmentedControlItem }\nexport type {\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n  SegmentedControlSize,\n}\n"],"mappings":";;;;;;;AAmBA,MAAM,mBAAmBA,QAAM,WAG7B,SAAS,iBACT,EACE,WACA,eAAe,SACf,OAAO,WACP,UACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SAEL,KACA;CACA,OACE,oBAACC,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,SACF;aAtBF,CAyBE,oBAACA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,WAAW,GACT,mIACA,oEACA,6BACA,iFACA,8HACA,0FAEA,qCACF;GACD,CAAA,GACA,QACiB;;CACF,CAAA;AAExB,CAAC;AAID,MAAM,uBAAuBD,QAAM,WAGjC,SAAS,qBAAqB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CACtE,OACE,oBAACC,KAAc,KAAf;EACE,aAAU;EACL;EACL,WAAW,GACT,gJAIA,gBACA,oEACA,iEACA,sCACA,uEAGA,iFACA,gEACA,gDAGA,0KACA,mLACA,+KACA,SACF;EACA,GAAI;EAEH;CACgB,CAAA;AAEvB,CAAC"}

package/dist/components/select.cjs

@@ -2,8 +2,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _epilot_spark_icons = require("@epilot/spark-icons");

package/dist/components/select.js

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

package/dist/components/switch.cjs

@@ -18,7 +18,7 @@ function Switch({ className, styleVariant, color, size: _size, variant: _variant
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Thumb, {
 			"data-slot": "switch-thumb",
-			className: (0, cn.cn)("pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform", "rounded-(--spark-rounded-lg)", "data-checked:translate-x-4 data-unchecked:translate-x-0")
+			className: (0, cn.cn)("pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform motion-reduce:transition-none", "rounded-(--spark-rounded-lg)", "data-checked:translate-x-4 data-unchecked:translate-x-0")
 		})
 	});
 }

package/dist/components/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  size: _size,\n  variant: _variant,\n  render,\n  nativeButton,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        'peer touch-target relative my-2 inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,QACA,cACA,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,GAAA,IACE,kLAGA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,GAAA,IACE,wHACA,gCACA,yDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}
+{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  // oxlint-disable-next-line typescript/no-deprecated -- strips deprecated back-compat prop before DOM spread\n  size: _size,\n  // oxlint-disable-next-line typescript/no-deprecated -- strips deprecated back-compat prop before DOM spread\n  variant: _variant,\n  render,\n  nativeButton,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        'peer touch-target relative my-2 inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform motion-reduce:transition-none',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OAEA,MAAM,OAEN,SAAS,UACT,QACA,cACA,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,GAAA,IACE,kLAGA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,GAAA,IACE,sJACA,gCACA,yDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}

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
@@ -17,7 +17,7 @@ function Switch({ className, styleVariant, color, size: _size, variant: _variant
 		...props,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn("pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform", "rounded-(--spark-rounded-lg)", "data-checked:translate-x-4 data-unchecked:translate-x-0")
+			className: cn("pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform motion-reduce:transition-none", "rounded-(--spark-rounded-lg)", "data-checked:translate-x-4 data-unchecked:translate-x-0")
 		})
 	});
 }

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  size: _size,\n  variant: _variant,\n  render,\n  nativeButton,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        'peer touch-target relative my-2 inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,QACA,cACA,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CACvD,OACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GACT,kLAGA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,SACF;EACA,GAAI;YAEJ,oBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT,wHACA,gCACA,yDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}
+{"version":3,"file":"switch.js","names":["SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  // oxlint-disable-next-line typescript/no-deprecated -- strips deprecated back-compat prop before DOM spread\n  size: _size,\n  // oxlint-disable-next-line typescript/no-deprecated -- strips deprecated back-compat prop before DOM spread\n  variant: _variant,\n  render,\n  nativeButton,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        'peer touch-target relative my-2 inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform motion-reduce:transition-none',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OAEA,MAAM,OAEN,SAAS,UACT,QACA,cACA,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CACvD,OACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GACT,kLAGA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,SACF;EACA,GAAI;YAEJ,oBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT,sJACA,gCACA,yDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}

package/dist/components/tabs.cjs

@@ -38,7 +38,7 @@ function Tabs(props) {
 }
 const REVEAL_PEEK = 40;
 const WORM_MS = 210;
-function TabsList({ className, style, variant = "underline", fill, ref, ...props }) {
+const TabsList = react.forwardRef(function TabsList({ className, style, variant = "underline", fill, ...props }, ref) {
 	const resolved = variant === "pill" ? "pill" : "underline";
 	const wrapperRef = react.useRef(null);
 	const scrollerRef = react.useRef(null);
@@ -144,7 +144,7 @@ function TabsList({ className, style, variant = "underline", fill, ref, ...props
 			chevron(1)
 		]
 	});
-}
+});
 function TabsTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
 		"data-slot": "tabs-trigger",