@spark-ui/components 17.1.0 → 17.2.0

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

@@ -1,7 +1,7 @@
-import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { RadioGroup } from '@base-ui/react/radio-group';
 import { ComponentProps, Ref } from 'react';
 import { SegmentedControlStylesProps } from './SegmentedControl.styles';
-export interface SegmentedControlProps extends Omit<ComponentProps<typeof ToggleGroup>, 'multiple' | 'value' | 'defaultValue' | 'onValueChange'>, SegmentedControlStylesProps {
+export interface SegmentedControlProps extends Omit<ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'>, SegmentedControlStylesProps {
     /**
      * The controlled selected value.
      */
@@ -13,10 +13,10 @@ export interface SegmentedControlProps extends Omit<ComponentProps<typeof Toggle
     /**
      * Callback fired when the selected value changes.
      */
-    onValueChange?: (value: string | null) => void;
+    onValueChange?: (value: string) => void;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const SegmentedControl: {
-    ({ value, defaultValue, onValueChange, size, className, children, ref, ...rest }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, defaultValue, onValueChange, className, children, ref, ...rest }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/segmented-control/SegmentedControl.styles.d.ts

@@ -1,7 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const rootStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export declare const itemStyles: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const itemStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const indicatorStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export type SegmentedControlStylesProps = VariantProps<typeof itemStyles>;

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

@@ -1,7 +1,6 @@
 import { RefObject } from 'react';
-import { SegmentedControlStylesProps } from './SegmentedControl.styles';
-export interface SegmentedControlContextInterface extends Required<Pick<SegmentedControlStylesProps, 'size'>> {
-    pressedValue: string | null;
+export interface SegmentedControlContextInterface {
+    checkedValue: string | null;
     containerRef: RefObject<HTMLDivElement | null>;
 }
 export declare const SegmentedControlContext: import('react').Context<SegmentedControlContextInterface>;

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

@@ -1,6 +1,6 @@
-import { Toggle } from '@base-ui/react/toggle';
+import { Radio } from '@base-ui/react/radio';
 import { ComponentProps, Ref } from 'react';
-export interface SegmentedControlItemProps extends Omit<ComponentProps<typeof Toggle>, 'value'> {
+export interface SegmentedControlItemProps extends Omit<ComponentProps<typeof Radio.Root>, 'value'> {
     /**
      * A unique value that identifies this item within the segmented control.
      */
@@ -10,7 +10,7 @@ export interface SegmentedControlItemProps extends Omit<ComponentProps<typeof To
      * @default false
      */
     disabled?: boolean;
-    ref?: Ref<HTMLButtonElement>;
+    ref?: Ref<HTMLElement>;
 }
 export declare const SegmentedControlItem: {
     ({ value, disabled, children, className, ref, ...rest }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/segmented-control/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),I=require("@base-ui/react/toggle-group"),N=require("@spark-ui/hooks/use-merge-refs"),s=require("react"),f=require("class-variance-authority"),j=require("@base-ui/react/toggle"),q=f.cva(["group inline-grid grid-flow-col auto-cols-fr","relative items-stretch min-w-max","rounded-xl","bg-surface border-md border-outline","p-sz-2"]),E=f.cva(["relative z-raised min-h-sz-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset","flex flex-none items-center justify-center flex-col","px-lg","rounded-xl","cursor-pointer select-none","font-medium","transition-colors duration-150","outline-none","focus-visible:u-outline","disabled:cursor-not-allowed disabled:opacity-dim-3","not-disabled:hover:text-on-surface","aria-pressed:text-on-support-container","aria-pressed:font-bold"],{variants:{size:{sm:["h-sz-32 min-w-sz-32 text-caption"],md:["h-sz-36 min-w-sz-36 text-body-2"],lg:["h-sz-40 min-w-sz-40 text-body-1"]}},defaultVariants:{size:"md"}}),k=f.cva(["absolute z-base","rounded-xl","bg-support-container border-md border-support","transition-[left,top,width,height] duration-200 ease-in-out","pointer-events-none"]),b=s.createContext({}),v=()=>{const e=s.useContext(b);if(!e)throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");return e},M=e=>{let o=null;return s.Children.forEach(e,t=>{o===null&&s.isValidElement(t)&&typeof t.props.value=="string"&&(o=t.props.value)}),o},S=({value:e,defaultValue:o,onValueChange:t,size:r="md",className:l,children:n,ref:a,...p})=>{const d=s.useRef(null),[m,g]=s.useState(()=>o??M(n)),i=e!==void 0,c=i?e??null:m,w=V=>{const C=V[0]??null;i||g(C),t?.(C)},z=N.useMergeRefs(d,a),R=c!=null?[c]:[];return u.jsx(b.Provider,{value:{pressedValue:c,containerRef:d,size:r??"md"},children:u.jsx(I.ToggleGroup,{ref:z,multiple:!1,value:R,onValueChange:w,"data-spark-component":"segmented-control",className:q({className:l}),...p,children:n})})};S.displayName="SegmentedControl";const h=({className:e,ref:o,...t})=>{const{pressedValue:r,containerRef:l}=v(),[n,a]=s.useState(null);if(s.useEffect(()=>{const d=l.current;if(!d)return;const m=r?d.querySelector(`[data-value="${r}"]`):null;if(!m){a(null);return}const g=d.getBoundingClientRect(),i=m.getBoundingClientRect(),c=2;a({left:i.left-g.left-c,top:i.top-g.top-c,width:i.width,height:i.height})},[r,l]),!n)return null;const p={left:n.left,top:n.top,width:n.width,height:n.height};return u.jsx("span",{ref:o,"data-spark-component":"segmented-control-indicator","aria-hidden":!0,className:k({className:e}),style:p,...t})};h.displayName="SegmentedControl.Indicator";const x=({value:e,disabled:o=!1,children:t,className:r,ref:l,...n})=>{const{size:a}=v();return u.jsxs(j.Toggle,{ref:l,"data-spark-component":"segmented-control-item","data-value":e,value:e,disabled:o,className:E({size:a,className:r}),...n,children:[t,u.jsx("span",{"aria-hidden":"true",className:"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']",children:t})]})};x.displayName="SegmentedControl.Item";const y=Object.assign(S,{Item:x,Indicator:h});y.displayName="SegmentedControl";x.displayName="SegmentedControl.Item";h.displayName="SegmentedControl.Indicator";exports.SegmentedControl=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),k=require("@base-ui/react/radio-group"),E=require("@spark-ui/components/form-field"),F=require("@spark-ui/hooks/use-merge-refs"),r=require("react"),g=require("class-variance-authority"),z=require("@base-ui/react/radio"),B=g.cva(["default:self-start","group inline-grid grid-flow-col auto-cols-fr","relative items-stretch min-w-max","rounded-xl p-sm","bg-surface border-sm border-outline"]),M=g.cva(["relative z-raised min-h-sz-44 focus-visible:outline-none","flex flex-none items-center justify-center flex-col","default:px-lg default:py-md","rounded-[20px]","cursor-pointer select-none","font-medium","transition-colors duration-150","outline-none","focus-visible:u-outline","data-disabled:cursor-not-allowed data-disabled:opacity-dim-3","data-checked:text-on-support-container","data-checked:font-bold"]),P=g.cva(["absolute z-base","rounded-[20px]","bg-support-container border-md border-support","group-has-focus-visible:border-focus","transition-[left,top,width,height] duration-200 ease-in-out","pointer-events-none"]),v=r.createContext({}),G=()=>{const e=r.useContext(v);if(!e)throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");return e},O=e=>{let t=null;return r.Children.forEach(e,o=>{t===null&&r.isValidElement(o)&&typeof o.props.value=="string"&&(t=o.props.value)}),t},x=({value:e,defaultValue:t,onValueChange:o,className:s,children:i,ref:n,...m})=>{const f=r.useRef(null),d=F.useMergeRefs(f,n),c=O(i),a=e!==void 0,[l,p]=r.useState(()=>t??c),y=a?e??null:l,R=j=>{const b=j;a||p(b),o?.(b)},{labelId:I,description:w,isRequired:V,isInvalid:q,name:N}=E.useFormFieldControl();return u.jsx(v.Provider,{value:{checkedValue:y,containerRef:f},children:u.jsx(k.RadioGroup,{ref:d,value:a?e:void 0,defaultValue:a?void 0:t??c??void 0,onValueChange:R,"data-spark-component":"segmented-control",className:B({className:s}),"aria-labelledby":I,"aria-describedby":w,"aria-required":V||void 0,"aria-invalid":q||void 0,name:N,...m,children:i})})};x.displayName="SegmentedControl";const h=({className:e,ref:t,...o})=>{const{checkedValue:s,containerRef:i}=G(),[n,m]=r.useState(null);if(r.useEffect(()=>{const d=i.current;if(!d)return;const c=s?d.querySelector(`[data-value="${s}"]`):null;if(!c){m(null);return}const a=d.getBoundingClientRect(),l=c.getBoundingClientRect(),p=1;m({left:l.left-a.left-p,top:l.top-a.top-p,width:l.width,height:l.height})},[s,i]),!n)return null;const f={left:n.left,top:n.top,width:n.width,height:n.height};return u.jsx("span",{ref:t,"data-spark-component":"segmented-control-indicator","aria-hidden":!0,className:P({className:e}),style:f,...o})};h.displayName="SegmentedControl.Indicator";const C=({value:e,disabled:t=!1,children:o,className:s,ref:i,...n})=>u.jsxs(z.Radio.Root,{ref:i,"data-spark-component":"segmented-control-item","data-value":e,value:e,disabled:t,className:M({className:s}),...n,children:[o,u.jsx("span",{"aria-hidden":"true",className:"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']",children:o})]});C.displayName="SegmentedControl.Item";const S=Object.assign(x,{Item:C,Indicator:h});S.displayName="SegmentedControl";C.displayName="SegmentedControl.Item";h.displayName="SegmentedControl.Indicator";exports.SegmentedControl=S;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/segmented-control/SegmentedControl.styles.ts","../../src/segmented-control/SegmentedControlContext.tsx","../../src/segmented-control/SegmentedControl.tsx","../../src/segmented-control/SegmentedControlIndicator.tsx","../../src/segmented-control/SegmentedControlItem.tsx","../../src/segmented-control/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl',\n  'bg-surface border-md border-outline',\n  'p-sz-2',\n])\n\nexport const itemStyles = cva(\n  [\n    'relative z-raised min-h-sz-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset',\n    'flex flex-none items-center justify-center flex-col',\n    'px-lg',\n    'rounded-xl',\n    'cursor-pointer select-none',\n    'font-medium',\n    'transition-colors duration-150',\n    'outline-none',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'not-disabled:hover:text-on-surface',\n    'aria-pressed:text-on-support-container',\n    'aria-pressed:font-bold',\n  ],\n  {\n    variants: {\n      /**\n       * Change the size of the segmented control\n       * @default md\n       */\n      size: {\n        sm: ['h-sz-32 min-w-sz-32 text-caption'],\n        md: ['h-sz-36 min-w-sz-36 text-body-2'],\n        lg: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-xl',\n  'bg-support-container border-md border-support',\n  'transition-[left,top,width,height] duration-200 ease-in-out',\n  'pointer-events-none',\n])\n\nexport type SegmentedControlStylesProps = VariantProps<typeof itemStyles>\n","import { createContext, RefObject, useContext } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\n\nexport interface SegmentedControlContextInterface\n  extends Required<Pick<SegmentedControlStylesProps, 'size'>> {\n  pressedValue: string | null\n  containerRef: RefObject<HTMLDivElement | null>\n}\n\nexport const SegmentedControlContext = createContext<SegmentedControlContextInterface>(\n  {} as SegmentedControlContextInterface\n)\n\nexport const useSegmentedControlContext = () => {\n  const context = useContext(SegmentedControlContext)\n\n  if (!context) {\n    throw Error('useSegmentedControlContext must be used within a SegmentedControlContext Provider')\n  }\n\n  return context\n}\n","import { ToggleGroup } from '@base-ui/react/toggle-group'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Children, type ComponentProps, isValidElement, Ref, useRef, useState } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\nimport { rootStyles } from './SegmentedControl.styles'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlProps\n  extends Omit<\n      ComponentProps<typeof ToggleGroup>,\n      'multiple' | 'value' | 'defaultValue' | 'onValueChange'\n    >,\n    SegmentedControlStylesProps {\n  /**\n   * The controlled selected value.\n   */\n  value?: string\n  /**\n   * The uncontrolled default selected value.\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onValueChange?: (value: string | null) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nconst getFirstItemValue = (children: React.ReactNode): string | null => {\n  let firstValue: string | null = null\n\n  Children.forEach(children, child => {\n    if (firstValue !== null) return\n    if (isValidElement(child) && typeof (child.props as { value?: string }).value === 'string') {\n      firstValue = (child.props as { value: string }).value\n    }\n  })\n\n  return firstValue\n}\n\nexport const SegmentedControl = ({\n  value,\n  defaultValue,\n  onValueChange,\n  size = 'md',\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? getFirstItemValue(children)\n  )\n\n  const isControlled = value !== undefined\n  const pressedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValues: unknown[]) => {\n    const next = (newValues[0] as string) ?? null\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const mergedRef = useMergeRefs(containerRef, ref)\n  const groupValue = pressedValue != null ? [pressedValue] : []\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        pressedValue,\n        containerRef,\n        size: size ?? 'md',\n      }}\n    >\n      <ToggleGroup\n        ref={mergedRef}\n        multiple={false}\n        value={groupValue}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        {...rest}\n      >\n        {children}\n      </ToggleGroup>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nSegmentedControl.displayName = 'SegmentedControl'\n","import { type ComponentProps, type CSSProperties, Ref, useEffect, useState } from 'react'\n\nimport { indicatorStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\ninterface IndicatorRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SegmentedControlIndicator = ({\n  className,\n  ref,\n  ...rest\n}: SegmentedControlIndicatorProps) => {\n  const { pressedValue, containerRef } = useSegmentedControlContext()\n  const [rect, setRect] = useState<IndicatorRect | null>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = pressedValue\n      ? container.querySelector<HTMLElement>(`[data-value=\"${pressedValue}\"]`)\n      : null\n\n    if (!selectedItem) {\n      setRect(null)\n\n      return\n    }\n\n    const containerRect = container.getBoundingClientRect()\n    const itemRect = selectedItem.getBoundingClientRect()\n\n    const borderWidth = 2\n\n    setRect({\n      left: itemRect.left - containerRect.left - borderWidth,\n      top: itemRect.top - containerRect.top - borderWidth,\n      width: itemRect.width,\n      height: itemRect.height,\n    })\n  }, [pressedValue, containerRef])\n\n  if (!rect) return null\n\n  const style: CSSProperties = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n    height: rect.height,\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"segmented-control-indicator\"\n      aria-hidden\n      className={indicatorStyles({ className })}\n      style={style}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator'\n","import { Toggle } from '@base-ui/react/toggle'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlItemProps extends Omit<ComponentProps<typeof Toggle>, 'value'> {\n  /**\n   * A unique value that identifies this item within the segmented control.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with this item.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  const { size } = useSegmentedControlContext()\n\n  return (\n    <Toggle\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ size, className })}\n      {...rest}\n    >\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']\"\n      >\n        {children}\n      </span>\n    </Toggle>\n  )\n}\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item'\n","import { SegmentedControl as Root } from './SegmentedControl'\nimport { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator'\nimport { SegmentedControlItem as Item } from './SegmentedControlItem'\n\nexport const SegmentedControl: typeof Root & {\n  Item: typeof Item\n  Indicator: typeof Indicator\n} = Object.assign(Root, {\n  Item,\n  Indicator,\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\nItem.displayName = 'SegmentedControl.Item'\nIndicator.displayName = 'SegmentedControl.Indicator'\n\nexport type { SegmentedControlProps } from './SegmentedControl'\nexport type { SegmentedControlItemProps } from './SegmentedControlItem'\nexport type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator'\n"],"names":["rootStyles","cva","itemStyles","indicatorStyles","SegmentedControlContext","createContext","useSegmentedControlContext","context","useContext","getFirstItemValue","children","firstValue","Children","child","isValidElement","SegmentedControl","value","defaultValue","onValueChange","size","className","ref","rest","containerRef","useRef","internalValue","setInternalValue","useState","isControlled","pressedValue","handleValueChange","newValues","next","mergedRef","useMergeRefs","groupValue","jsx","ToggleGroup","SegmentedControlIndicator","rect","setRect","useEffect","container","selectedItem","containerRect","itemRect","borderWidth","style","SegmentedControlItem","disabled","jsxs","Toggle","Root","Item","Indicator"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/segmented-control/SegmentedControl.styles.ts","../../src/segmented-control/SegmentedControlContext.tsx","../../src/segmented-control/SegmentedControl.tsx","../../src/segmented-control/SegmentedControlIndicator.tsx","../../src/segmented-control/SegmentedControlItem.tsx","../../src/segmented-control/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'default:self-start',\n  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl p-sm',\n  'bg-surface border-sm border-outline',\n])\n\nexport const itemStyles = cva([\n  'relative z-raised min-h-sz-44 focus-visible:outline-none',\n  'flex flex-none items-center justify-center flex-col',\n  'default:px-lg default:py-md',\n  'rounded-[20px]',\n  'cursor-pointer select-none',\n  'font-medium',\n  'transition-colors duration-150',\n  'outline-none',\n  'focus-visible:u-outline',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n  'data-checked:text-on-support-container',\n  'data-checked:font-bold',\n])\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-[20px]',\n  'bg-support-container border-md border-support',\n  'group-has-focus-visible:border-focus',\n  'transition-[left,top,width,height] duration-200 ease-in-out',\n  'pointer-events-none',\n])\n\nexport type SegmentedControlStylesProps = VariantProps<typeof itemStyles>\n","import { createContext, RefObject, useContext } from 'react'\n\nexport interface SegmentedControlContextInterface {\n  checkedValue: string | null\n  containerRef: RefObject<HTMLDivElement | null>\n}\n\nexport const SegmentedControlContext = createContext<SegmentedControlContextInterface>(\n  {} as SegmentedControlContextInterface\n)\n\nexport const useSegmentedControlContext = () => {\n  const context = useContext(SegmentedControlContext)\n\n  if (!context) {\n    throw Error('useSegmentedControlContext must be used within a SegmentedControlContext Provider')\n  }\n\n  return context\n}\n","import { RadioGroup } from '@base-ui/react/radio-group'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Children, type ComponentProps, isValidElement, Ref, useRef, useState } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\nimport { rootStyles } from './SegmentedControl.styles'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlProps\n  extends Omit<ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'>,\n    SegmentedControlStylesProps {\n  /**\n   * The controlled selected value.\n   */\n  value?: string\n  /**\n   * The uncontrolled default selected value.\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nconst getFirstItemValue = (children: React.ReactNode): string | null => {\n  let firstValue: string | null = null\n\n  Children.forEach(children, child => {\n    if (firstValue !== null) return\n    if (isValidElement(child) && typeof (child.props as { value?: string }).value === 'string') {\n      firstValue = (child.props as { value: string }).value\n    }\n  })\n\n  return firstValue\n}\n\nexport const SegmentedControl = ({\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const mergedRef = useMergeRefs(containerRef, ref)\n\n  const firstValue = getFirstItemValue(children)\n\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? firstValue\n  )\n  const checkedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValue: unknown) => {\n    const next = newValue as string\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const { labelId, description, isRequired, isInvalid, name } = useFormFieldControl()\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        checkedValue,\n        containerRef,\n      }}\n    >\n      <RadioGroup\n        ref={mergedRef}\n        value={isControlled ? value : undefined}\n        defaultValue={!isControlled ? (defaultValue ?? firstValue ?? undefined) : undefined}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        aria-required={isRequired || undefined}\n        aria-invalid={isInvalid || undefined}\n        name={name}\n        {...rest}\n      >\n        {children}\n      </RadioGroup>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nSegmentedControl.displayName = 'SegmentedControl'\n","import { type ComponentProps, type CSSProperties, Ref, useEffect, useState } from 'react'\n\nimport { indicatorStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\ninterface IndicatorRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SegmentedControlIndicator = ({\n  className,\n  ref,\n  ...rest\n}: SegmentedControlIndicatorProps) => {\n  const { checkedValue, containerRef } = useSegmentedControlContext()\n  const [rect, setRect] = useState<IndicatorRect | null>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = checkedValue\n      ? container.querySelector<HTMLElement>(`[data-value=\"${checkedValue}\"]`)\n      : null\n\n    if (!selectedItem) {\n      setRect(null)\n\n      return\n    }\n\n    const containerRect = container.getBoundingClientRect()\n    const itemRect = selectedItem.getBoundingClientRect()\n\n    const rootBorderWidth = 1\n\n    setRect({\n      left: itemRect.left - containerRect.left - rootBorderWidth,\n      top: itemRect.top - containerRect.top - rootBorderWidth,\n      width: itemRect.width,\n      height: itemRect.height,\n    })\n  }, [checkedValue, containerRef])\n\n  if (!rect) return null\n\n  const style: CSSProperties = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n    height: rect.height,\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"segmented-control-indicator\"\n      aria-hidden\n      className={indicatorStyles({ className })}\n      style={style}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator'\n","import { Radio } from '@base-ui/react/radio'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\n\nexport interface SegmentedControlItemProps\n  extends Omit<ComponentProps<typeof Radio.Root>, 'value'> {\n  /**\n   * A unique value that identifies this item within the segmented control.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with this item.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  return (\n    <Radio.Root\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ className })}\n      {...rest}\n    >\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']\"\n      >\n        {children}\n      </span>\n    </Radio.Root>\n  )\n}\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item'\n","import { SegmentedControl as Root } from './SegmentedControl'\nimport { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator'\nimport { SegmentedControlItem as Item } from './SegmentedControlItem'\n\nexport const SegmentedControl: typeof Root & {\n  Item: typeof Item\n  Indicator: typeof Indicator\n} = Object.assign(Root, {\n  Item,\n  Indicator,\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\nItem.displayName = 'SegmentedControl.Item'\nIndicator.displayName = 'SegmentedControl.Indicator'\n\nexport type { SegmentedControlProps } from './SegmentedControl'\nexport type { SegmentedControlItemProps } from './SegmentedControlItem'\nexport type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator'\n"],"names":["rootStyles","cva","itemStyles","indicatorStyles","SegmentedControlContext","createContext","useSegmentedControlContext","context","useContext","getFirstItemValue","children","firstValue","Children","child","isValidElement","SegmentedControl","value","defaultValue","onValueChange","className","ref","rest","containerRef","useRef","mergedRef","useMergeRefs","isControlled","internalValue","setInternalValue","useState","checkedValue","handleValueChange","newValue","next","labelId","description","isRequired","isInvalid","name","useFormFieldControl","jsx","RadioGroup","SegmentedControlIndicator","rect","setRect","useEffect","container","selectedItem","containerRect","itemRect","rootBorderWidth","style","SegmentedControlItem","disabled","jsxs","Radio","Root","Item","Indicator"],"mappings":"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"}

package/dist/segmented-control/index.mjs

@@ -1,190 +1,173 @@
-import { jsx as m, jsxs as V } from "react/jsx-runtime";
-import { ToggleGroup as N } from "@base-ui/react/toggle-group";
-import { useMergeRefs as R } from "@spark-ui/hooks/use-merge-refs";
-import { createContext as j, useContext as E, useRef as k, useState as x, Children as B, isValidElement as P, useEffect as T } from "react";
-import { cva as f } from "class-variance-authority";
-import { Toggle as $ } from "@base-ui/react/toggle";
-const q = f([
+import { jsx as f, jsxs as j } from "react/jsx-runtime";
+import { RadioGroup as E } from "@base-ui/react/radio-group";
+import { useFormFieldControl as q } from "@spark-ui/components/form-field";
+import { useMergeRefs as z } from "@spark-ui/hooks/use-merge-refs";
+import { createContext as B, useContext as F, useRef as P, useState as b, Children as $, isValidElement as G, useEffect as M } from "react";
+import { cva as p } from "class-variance-authority";
+import { Radio as O } from "@base-ui/react/radio";
+const W = p([
+  "default:self-start",
   "group inline-grid grid-flow-col auto-cols-fr",
   "relative items-stretch min-w-max",
-  "rounded-xl",
-  "bg-surface border-md border-outline",
-  "p-sz-2"
-]), F = f(
-  [
-    "relative z-raised min-h-sz-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset",
-    "flex flex-none items-center justify-center flex-col",
-    "px-lg",
-    "rounded-xl",
-    "cursor-pointer select-none",
-    "font-medium",
-    "transition-colors duration-150",
-    "outline-none",
-    "focus-visible:u-outline",
-    "disabled:cursor-not-allowed disabled:opacity-dim-3",
-    "not-disabled:hover:text-on-surface",
-    "aria-pressed:text-on-support-container",
-    "aria-pressed:font-bold"
-  ],
-  {
-    variants: {
-      /**
-       * Change the size of the segmented control
-       * @default md
-       */
-      size: {
-        sm: ["h-sz-32 min-w-sz-32 text-caption"],
-        md: ["h-sz-36 min-w-sz-36 text-body-2"],
-        lg: ["h-sz-40 min-w-sz-40 text-body-1"]
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-), G = f([
+  "rounded-xl p-sm",
+  "bg-surface border-sm border-outline"
+]), A = p([
+  "relative z-raised min-h-sz-44 focus-visible:outline-none",
+  "flex flex-none items-center justify-center flex-col",
+  "default:px-lg default:py-md",
+  "rounded-[20px]",
+  "cursor-pointer select-none",
+  "font-medium",
+  "transition-colors duration-150",
+  "outline-none",
+  "focus-visible:u-outline",
+  "data-disabled:cursor-not-allowed data-disabled:opacity-dim-3",
+  "data-checked:text-on-support-container",
+  "data-checked:font-bold"
+]), D = p([
   "absolute z-base",
-  "rounded-xl",
+  "rounded-[20px]",
   "bg-support-container border-md border-support",
+  "group-has-focus-visible:border-focus",
   "transition-[left,top,width,height] duration-200 ease-in-out",
   "pointer-events-none"
-]), b = j(
+]), v = B(
   {}
-), v = () => {
-  const e = E(b);
+), H = () => {
+  const e = F(v);
   if (!e)
     throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");
   return e;
-}, M = (e) => {
-  let o = null;
-  return B.forEach(e, (t) => {
-    o === null && P(t) && typeof t.props.value == "string" && (o = t.props.value);
-  }), o;
-}, S = ({
+}, J = (e) => {
+  let t = null;
+  return $.forEach(e, (o) => {
+    t === null && G(o) && typeof o.props.value == "string" && (t = o.props.value);
+  }), t;
+}, x = ({
   value: e,
-  defaultValue: o,
-  onValueChange: t,
-  size: r = "md",
-  className: i,
-  children: n,
-  ref: l,
-  ...p
+  defaultValue: t,
+  onValueChange: o,
+  className: r,
+  children: i,
+  ref: n,
+  ...c
 }) => {
-  const a = k(null), [c, u] = x(
-    () => o ?? M(n)
-  ), s = e !== void 0, d = s ? e ?? null : c, y = (I) => {
-    const C = I[0] ?? null;
-    s || u(C), t?.(C);
-  }, w = R(a, l), z = d != null ? [d] : [];
-  return /* @__PURE__ */ m(
-    b.Provider,
+  const u = P(null), l = z(u, n), d = J(i), s = e !== void 0, [a, m] = b(
+    () => t ?? d
+  ), S = s ? e ?? null : a, y = (k) => {
+    const C = k;
+    s || m(C), o?.(C);
+  }, { labelId: R, description: I, isRequired: w, isInvalid: N, name: V } = q();
+  return /* @__PURE__ */ f(
+    v.Provider,
     {
       value: {
-        pressedValue: d,
-        containerRef: a,
-        size: r ?? "md"
+        checkedValue: S,
+        containerRef: u
       },
-      children: /* @__PURE__ */ m(
-        N,
+      children: /* @__PURE__ */ f(
+        E,
         {
-          ref: w,
-          multiple: !1,
-          value: z,
+          ref: l,
+          value: s ? e : void 0,
+          defaultValue: s ? void 0 : t ?? d ?? void 0,
           onValueChange: y,
           "data-spark-component": "segmented-control",
-          className: q({ className: i }),
-          ...p,
-          children: n
+          className: W({ className: r }),
+          "aria-labelledby": R,
+          "aria-describedby": I,
+          "aria-required": w || void 0,
+          "aria-invalid": N || void 0,
+          name: V,
+          ...c,
+          children: i
         }
       )
     }
   );
 };
-S.displayName = "SegmentedControl";
+x.displayName = "SegmentedControl";
 const g = ({
   className: e,
-  ref: o,
-  ...t
+  ref: t,
+  ...o
 }) => {
-  const { pressedValue: r, containerRef: i } = v(), [n, l] = x(null);
-  if (T(() => {
-    const a = i.current;
-    if (!a)
+  const { checkedValue: r, containerRef: i } = H(), [n, c] = b(null);
+  if (M(() => {
+    const l = i.current;
+    if (!l)
       return;
-    const c = r ? a.querySelector(`[data-value="${r}"]`) : null;
-    if (!c) {
-      l(null);
+    const d = r ? l.querySelector(`[data-value="${r}"]`) : null;
+    if (!d) {
+      c(null);
       return;
     }
-    const u = a.getBoundingClientRect(), s = c.getBoundingClientRect(), d = 2;
-    l({
-      left: s.left - u.left - d,
-      top: s.top - u.top - d,
-      width: s.width,
-      height: s.height
+    const s = l.getBoundingClientRect(), a = d.getBoundingClientRect(), m = 1;
+    c({
+      left: a.left - s.left - m,
+      top: a.top - s.top - m,
+      width: a.width,
+      height: a.height
     });
   }, [r, i]), !n) return null;
-  const p = {
+  const u = {
     left: n.left,
     top: n.top,
     width: n.width,
     height: n.height
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ f(
     "span",
     {
-      ref: o,
+      ref: t,
       "data-spark-component": "segmented-control-indicator",
       "aria-hidden": !0,
-      className: G({ className: e }),
-      style: p,
-      ...t
+      className: D({ className: e }),
+      style: u,
+      ...o
     }
   );
 };
 g.displayName = "SegmentedControl.Indicator";
 const h = ({
   value: e,
-  disabled: o = !1,
-  children: t,
+  disabled: t = !1,
+  children: o,
   className: r,
   ref: i,
   ...n
-}) => {
-  const { size: l } = v();
-  return /* @__PURE__ */ V(
-    $,
-    {
-      ref: i,
-      "data-spark-component": "segmented-control-item",
-      "data-value": e,
-      value: e,
-      disabled: o,
-      className: F({ size: l, className: r }),
-      ...n,
-      children: [
-        t,
-        /* @__PURE__ */ m(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']",
-            children: t
-          }
-        )
-      ]
-    }
-  );
-};
+}) => /* @__PURE__ */ j(
+  O.Root,
+  {
+    ref: i,
+    "data-spark-component": "segmented-control-item",
+    "data-value": e,
+    value: e,
+    disabled: t,
+    className: A({ className: r }),
+    ...n,
+    children: [
+      o,
+      /* @__PURE__ */ f(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']",
+          children: o
+        }
+      )
+    ]
+  }
+);
 h.displayName = "SegmentedControl.Item";
-const O = Object.assign(S, {
+const K = Object.assign(x, {
   Item: h,
   Indicator: g
 });
-O.displayName = "SegmentedControl";
+K.displayName = "SegmentedControl";
 h.displayName = "SegmentedControl.Item";
 g.displayName = "SegmentedControl.Indicator";
 export {
-  O as SegmentedControl
+  K as SegmentedControl
 };
 //# sourceMappingURL=index.mjs.map

package/dist/segmented-control/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/segmented-control/SegmentedControl.styles.ts","../../src/segmented-control/SegmentedControlContext.tsx","../../src/segmented-control/SegmentedControl.tsx","../../src/segmented-control/SegmentedControlIndicator.tsx","../../src/segmented-control/SegmentedControlItem.tsx","../../src/segmented-control/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl',\n  'bg-surface border-md border-outline',\n  'p-sz-2',\n])\n\nexport const itemStyles = cva(\n  [\n    'relative z-raised min-h-sz-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset',\n    'flex flex-none items-center justify-center flex-col',\n    'px-lg',\n    'rounded-xl',\n    'cursor-pointer select-none',\n    'font-medium',\n    'transition-colors duration-150',\n    'outline-none',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'not-disabled:hover:text-on-surface',\n    'aria-pressed:text-on-support-container',\n    'aria-pressed:font-bold',\n  ],\n  {\n    variants: {\n      /**\n       * Change the size of the segmented control\n       * @default md\n       */\n      size: {\n        sm: ['h-sz-32 min-w-sz-32 text-caption'],\n        md: ['h-sz-36 min-w-sz-36 text-body-2'],\n        lg: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-xl',\n  'bg-support-container border-md border-support',\n  'transition-[left,top,width,height] duration-200 ease-in-out',\n  'pointer-events-none',\n])\n\nexport type SegmentedControlStylesProps = VariantProps<typeof itemStyles>\n","import { createContext, RefObject, useContext } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\n\nexport interface SegmentedControlContextInterface\n  extends Required<Pick<SegmentedControlStylesProps, 'size'>> {\n  pressedValue: string | null\n  containerRef: RefObject<HTMLDivElement | null>\n}\n\nexport const SegmentedControlContext = createContext<SegmentedControlContextInterface>(\n  {} as SegmentedControlContextInterface\n)\n\nexport const useSegmentedControlContext = () => {\n  const context = useContext(SegmentedControlContext)\n\n  if (!context) {\n    throw Error('useSegmentedControlContext must be used within a SegmentedControlContext Provider')\n  }\n\n  return context\n}\n","import { ToggleGroup } from '@base-ui/react/toggle-group'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Children, type ComponentProps, isValidElement, Ref, useRef, useState } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\nimport { rootStyles } from './SegmentedControl.styles'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlProps\n  extends Omit<\n      ComponentProps<typeof ToggleGroup>,\n      'multiple' | 'value' | 'defaultValue' | 'onValueChange'\n    >,\n    SegmentedControlStylesProps {\n  /**\n   * The controlled selected value.\n   */\n  value?: string\n  /**\n   * The uncontrolled default selected value.\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onValueChange?: (value: string | null) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nconst getFirstItemValue = (children: React.ReactNode): string | null => {\n  let firstValue: string | null = null\n\n  Children.forEach(children, child => {\n    if (firstValue !== null) return\n    if (isValidElement(child) && typeof (child.props as { value?: string }).value === 'string') {\n      firstValue = (child.props as { value: string }).value\n    }\n  })\n\n  return firstValue\n}\n\nexport const SegmentedControl = ({\n  value,\n  defaultValue,\n  onValueChange,\n  size = 'md',\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? getFirstItemValue(children)\n  )\n\n  const isControlled = value !== undefined\n  const pressedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValues: unknown[]) => {\n    const next = (newValues[0] as string) ?? null\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const mergedRef = useMergeRefs(containerRef, ref)\n  const groupValue = pressedValue != null ? [pressedValue] : []\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        pressedValue,\n        containerRef,\n        size: size ?? 'md',\n      }}\n    >\n      <ToggleGroup\n        ref={mergedRef}\n        multiple={false}\n        value={groupValue}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        {...rest}\n      >\n        {children}\n      </ToggleGroup>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nSegmentedControl.displayName = 'SegmentedControl'\n","import { type ComponentProps, type CSSProperties, Ref, useEffect, useState } from 'react'\n\nimport { indicatorStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\ninterface IndicatorRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SegmentedControlIndicator = ({\n  className,\n  ref,\n  ...rest\n}: SegmentedControlIndicatorProps) => {\n  const { pressedValue, containerRef } = useSegmentedControlContext()\n  const [rect, setRect] = useState<IndicatorRect | null>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = pressedValue\n      ? container.querySelector<HTMLElement>(`[data-value=\"${pressedValue}\"]`)\n      : null\n\n    if (!selectedItem) {\n      setRect(null)\n\n      return\n    }\n\n    const containerRect = container.getBoundingClientRect()\n    const itemRect = selectedItem.getBoundingClientRect()\n\n    const borderWidth = 2\n\n    setRect({\n      left: itemRect.left - containerRect.left - borderWidth,\n      top: itemRect.top - containerRect.top - borderWidth,\n      width: itemRect.width,\n      height: itemRect.height,\n    })\n  }, [pressedValue, containerRef])\n\n  if (!rect) return null\n\n  const style: CSSProperties = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n    height: rect.height,\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"segmented-control-indicator\"\n      aria-hidden\n      className={indicatorStyles({ className })}\n      style={style}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator'\n","import { Toggle } from '@base-ui/react/toggle'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlItemProps extends Omit<ComponentProps<typeof Toggle>, 'value'> {\n  /**\n   * A unique value that identifies this item within the segmented control.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with this item.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  const { size } = useSegmentedControlContext()\n\n  return (\n    <Toggle\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ size, className })}\n      {...rest}\n    >\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']\"\n      >\n        {children}\n      </span>\n    </Toggle>\n  )\n}\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item'\n","import { SegmentedControl as Root } from './SegmentedControl'\nimport { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator'\nimport { SegmentedControlItem as Item } from './SegmentedControlItem'\n\nexport const SegmentedControl: typeof Root & {\n  Item: typeof Item\n  Indicator: typeof Indicator\n} = Object.assign(Root, {\n  Item,\n  Indicator,\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\nItem.displayName = 'SegmentedControl.Item'\nIndicator.displayName = 'SegmentedControl.Indicator'\n\nexport type { SegmentedControlProps } from './SegmentedControl'\nexport type { SegmentedControlItemProps } from './SegmentedControlItem'\nexport type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator'\n"],"names":["rootStyles","cva","itemStyles","indicatorStyles","SegmentedControlContext","createContext","useSegmentedControlContext","context","useContext","getFirstItemValue","children","firstValue","Children","child","isValidElement","SegmentedControl","value","defaultValue","onValueChange","size","className","ref","rest","containerRef","useRef","internalValue","setInternalValue","useState","isControlled","pressedValue","handleValueChange","newValues","next","mergedRef","useMergeRefs","groupValue","jsx","ToggleGroup","SegmentedControlIndicator","rect","setRect","useEffect","container","selectedItem","containerRect","itemRect","borderWidth","style","SegmentedControlItem","disabled","jsxs","Toggle","Root","Item","Indicator"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/segmented-control/SegmentedControl.styles.ts","../../src/segmented-control/SegmentedControlContext.tsx","../../src/segmented-control/SegmentedControl.tsx","../../src/segmented-control/SegmentedControlIndicator.tsx","../../src/segmented-control/SegmentedControlItem.tsx","../../src/segmented-control/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'default:self-start',\n  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl p-sm',\n  'bg-surface border-sm border-outline',\n])\n\nexport const itemStyles = cva([\n  'relative z-raised min-h-sz-44 focus-visible:outline-none',\n  'flex flex-none items-center justify-center flex-col',\n  'default:px-lg default:py-md',\n  'rounded-[20px]',\n  'cursor-pointer select-none',\n  'font-medium',\n  'transition-colors duration-150',\n  'outline-none',\n  'focus-visible:u-outline',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n  'data-checked:text-on-support-container',\n  'data-checked:font-bold',\n])\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-[20px]',\n  'bg-support-container border-md border-support',\n  'group-has-focus-visible:border-focus',\n  'transition-[left,top,width,height] duration-200 ease-in-out',\n  'pointer-events-none',\n])\n\nexport type SegmentedControlStylesProps = VariantProps<typeof itemStyles>\n","import { createContext, RefObject, useContext } from 'react'\n\nexport interface SegmentedControlContextInterface {\n  checkedValue: string | null\n  containerRef: RefObject<HTMLDivElement | null>\n}\n\nexport const SegmentedControlContext = createContext<SegmentedControlContextInterface>(\n  {} as SegmentedControlContextInterface\n)\n\nexport const useSegmentedControlContext = () => {\n  const context = useContext(SegmentedControlContext)\n\n  if (!context) {\n    throw Error('useSegmentedControlContext must be used within a SegmentedControlContext Provider')\n  }\n\n  return context\n}\n","import { RadioGroup } from '@base-ui/react/radio-group'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Children, type ComponentProps, isValidElement, Ref, useRef, useState } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\nimport { rootStyles } from './SegmentedControl.styles'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlProps\n  extends Omit<ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'>,\n    SegmentedControlStylesProps {\n  /**\n   * The controlled selected value.\n   */\n  value?: string\n  /**\n   * The uncontrolled default selected value.\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nconst getFirstItemValue = (children: React.ReactNode): string | null => {\n  let firstValue: string | null = null\n\n  Children.forEach(children, child => {\n    if (firstValue !== null) return\n    if (isValidElement(child) && typeof (child.props as { value?: string }).value === 'string') {\n      firstValue = (child.props as { value: string }).value\n    }\n  })\n\n  return firstValue\n}\n\nexport const SegmentedControl = ({\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const mergedRef = useMergeRefs(containerRef, ref)\n\n  const firstValue = getFirstItemValue(children)\n\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? firstValue\n  )\n  const checkedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValue: unknown) => {\n    const next = newValue as string\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const { labelId, description, isRequired, isInvalid, name } = useFormFieldControl()\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        checkedValue,\n        containerRef,\n      }}\n    >\n      <RadioGroup\n        ref={mergedRef}\n        value={isControlled ? value : undefined}\n        defaultValue={!isControlled ? (defaultValue ?? firstValue ?? undefined) : undefined}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        aria-required={isRequired || undefined}\n        aria-invalid={isInvalid || undefined}\n        name={name}\n        {...rest}\n      >\n        {children}\n      </RadioGroup>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nSegmentedControl.displayName = 'SegmentedControl'\n","import { type ComponentProps, type CSSProperties, Ref, useEffect, useState } from 'react'\n\nimport { indicatorStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\ninterface IndicatorRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SegmentedControlIndicator = ({\n  className,\n  ref,\n  ...rest\n}: SegmentedControlIndicatorProps) => {\n  const { checkedValue, containerRef } = useSegmentedControlContext()\n  const [rect, setRect] = useState<IndicatorRect | null>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = checkedValue\n      ? container.querySelector<HTMLElement>(`[data-value=\"${checkedValue}\"]`)\n      : null\n\n    if (!selectedItem) {\n      setRect(null)\n\n      return\n    }\n\n    const containerRect = container.getBoundingClientRect()\n    const itemRect = selectedItem.getBoundingClientRect()\n\n    const rootBorderWidth = 1\n\n    setRect({\n      left: itemRect.left - containerRect.left - rootBorderWidth,\n      top: itemRect.top - containerRect.top - rootBorderWidth,\n      width: itemRect.width,\n      height: itemRect.height,\n    })\n  }, [checkedValue, containerRef])\n\n  if (!rect) return null\n\n  const style: CSSProperties = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n    height: rect.height,\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"segmented-control-indicator\"\n      aria-hidden\n      className={indicatorStyles({ className })}\n      style={style}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator'\n","import { Radio } from '@base-ui/react/radio'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\n\nexport interface SegmentedControlItemProps\n  extends Omit<ComponentProps<typeof Radio.Root>, 'value'> {\n  /**\n   * A unique value that identifies this item within the segmented control.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with this item.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  return (\n    <Radio.Root\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ className })}\n      {...rest}\n    >\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"bg-success pointer-events-none h-0 overflow-hidden font-bold content-[attr(data-text)/'']\"\n      >\n        {children}\n      </span>\n    </Radio.Root>\n  )\n}\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item'\n","import { SegmentedControl as Root } from './SegmentedControl'\nimport { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator'\nimport { SegmentedControlItem as Item } from './SegmentedControlItem'\n\nexport const SegmentedControl: typeof Root & {\n  Item: typeof Item\n  Indicator: typeof Indicator\n} = Object.assign(Root, {\n  Item,\n  Indicator,\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\nItem.displayName = 'SegmentedControl.Item'\nIndicator.displayName = 'SegmentedControl.Indicator'\n\nexport type { SegmentedControlProps } from './SegmentedControl'\nexport type { SegmentedControlItemProps } from './SegmentedControlItem'\nexport type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator'\n"],"names":["rootStyles","cva","itemStyles","indicatorStyles","SegmentedControlContext","createContext","useSegmentedControlContext","context","useContext","getFirstItemValue","children","firstValue","Children","child","isValidElement","SegmentedControl","value","defaultValue","onValueChange","className","ref","rest","containerRef","useRef","mergedRef","useMergeRefs","isControlled","internalValue","setInternalValue","useState","checkedValue","handleValueChange","newValue","next","labelId","description","isRequired","isInvalid","name","useFormFieldControl","jsx","RadioGroup","SegmentedControlIndicator","rect","setRect","useEffect","container","selectedItem","containerRect","itemRect","rootBorderWidth","style","SegmentedControlItem","disabled","jsxs","Radio","Root","Item","Indicator"],"mappings":"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"}

package/dist/slider/SliderValue.d.ts

@@ -1,6 +1,8 @@
 import { Slider as BaseSlider } from '@base-ui/react/slider';
-import { ComponentProps } from 'react';
-export type SliderValueProps = Omit<ComponentProps<typeof BaseSlider.Value>, 'render'>;
+import { ReactNode, ComponentProps } from 'react';
+export type SliderValueProps = Omit<ComponentProps<typeof BaseSlider.Value>, 'render' | 'children'> & {
+    children?: ReactNode | ((formatted: string, value: number) => ReactNode);
+};
 /**
  * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.
  */

package/dist/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n  fieldLabelId?: string\n  fieldId?: string\n  onLabelId?: (id: string | undefined) => void\n  hasValueInThumb: boolean\n  registerValueInThumb: () => () => void\n  controlRef: RefObject<HTMLElement | null>\n  thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      ComponentProps<typeof BaseSlider.Root>,\n      'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  intent = 'support',\n  children,\n  className,\n  ref,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n  const [valueInThumbCount, setValueInThumbCount] = useState(0)\n  const controlRef = useRef<HTMLElement | null>(null)\n  const thumbRef = useRef<HTMLElement | null>(null)\n\n  const handleLabelId = useCallback((id: string | undefined) => {\n    setLabelId(id)\n  }, [])\n\n  const registerValueInThumb = useCallback(() => {\n    setValueInThumbCount(c => c + 1)\n\n    return () => setValueInThumbCount(c => c - 1)\n  }, [])\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        min,\n        max,\n        fieldLabelId: field.labelId || labelId,\n        fieldId: field.id,\n        onLabelId: handleLabelId,\n        hasValueInThumb: valueInThumbCount > 0,\n        registerValueInThumb,\n        controlRef,\n        thumbRef,\n      }}\n    >\n      <BaseSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        className={rootStyles({ className })}\n        orientation=\"horizontal\"\n        disabled={disabled || readOnly}\n        thumbAlignment=\"edge\"\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        aria-disabled={disabled || readOnly ? true : undefined}\n        value={valueProp !== undefined ? [valueProp] : undefined}\n        defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n        onValueChange={\n          onValueChange\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueChange(v)\n              }\n            : undefined\n        }\n        onValueCommitted={\n          onValueCommit\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueCommit(v)\n              }\n            : undefined\n        }\n        min={min}\n        max={max}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n  const { hasValueInThumb, controlRef } = useSliderContext()\n  const mergedRef = useMergeRefs(controlRef, ref)\n\n  return (\n    <BaseSlider.Control\n      data-spark-component=\"slider-control\"\n      ref={mergedRef}\n      className={cx(\n        'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n        hasValueInThumb && 'mt-xl',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n  [\n    'absolute h-full rounded-sm',\n    // Disable transitions during drag to eliminate latency\n    'transition-none',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        accent: ['bg-accent'],\n        info: ['bg-info'],\n        neutral: ['bg-neutral'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        error: ['bg-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n  const { intent } = useSliderContext()\n\n  return (\n    <BaseSlider.Indicator\n      data-spark-component=\"slider-indicator\"\n      ref={ref}\n      className={rangeVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n  htmlFor: htmlForProp,\n  id: idProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: SliderLabelProps) => {\n  const field = useFormFieldControl()\n  const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n  // Generate an id if not provided and no FormField labelId is available\n  const internalId = useId()\n  const generatedId = `${ID_PREFIX}-${internalId}`\n  const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n  // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n  const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n  // Get disabled and required state from FormField if present\n  const disabled = field.disabled\n  const isRequired = field.isRequired\n\n  // Notify SliderContext of the label id if no FormField is present\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const mergedRef = useMergeRefs(ref, labelRef)\n\n  useEffect(() => {\n    if (onLabelId && !fieldLabelId && !field.labelId) {\n      onLabelId(labelId)\n    }\n  }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n  return (\n    <Label\n      ref={mergedRef}\n      id={labelId}\n      data-spark-component=\"slider-label\"\n      htmlFor={htmlFor}\n      className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n  ({ className, children }, ref) => {\n    const { max = 100 } = useSliderContext()\n\n    const content = children ? children(max) : max\n\n    return (\n      <div\n        data-spark-component=\"slider-max-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n  ({ className, children }, ref) => {\n    const { min = 0 } = useSliderContext()\n\n    const content = children ? children(min) : min\n\n    return (\n      <div\n        data-spark-component=\"slider-min-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n  isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'relative block size-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n    'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n    // visual thumb\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:size-sz-24 after:rounded-full',\n    // hover effect\n    'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n    'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n    'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n        support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n        accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n        info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n        neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n        success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n        alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n        error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { SliderThumbContext } from './SliderThumbContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport type SliderThumbProps = Omit<\n  ComponentProps<typeof BaseSlider.Thumb>,\n  'render' | 'index'\n> &\n  PropsWithChildren\n\nexport const SliderThumb = ({\n  className,\n  ref: forwardedRef,\n  children,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n  return (\n    <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n      <BaseSlider.Thumb\n        data-spark-component=\"slider-thumb\"\n        ref={ref}\n        id={fieldId}\n        className={thumbVariants({ intent, className })}\n        aria-labelledby={fieldLabelId}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Thumb>\n    </SliderThumbContext.Provider>\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n  return (\n    <BaseSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      className={trackVariants({ className })}\n      {...rest}\n    />\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n  controlRef: RefObject<HTMLElement | null>,\n  thumbRef: RefObject<HTMLElement | null>,\n  valueRef: RefObject<HTMLElement | null>,\n  value: number\n): number {\n  const [translateX, setTranslateX] = useState(0)\n  const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n  useLayoutEffect(() => {\n    const control = controlRef.current\n    const thumb = thumbRef.current\n    const valueEl = valueRef.current\n\n    if (!control || !thumb || !valueEl) {\n      setTranslateX(0)\n      // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n      if (!refsRetryScheduled) {\n        requestAnimationFrame(() => setRefsRetryScheduled(true))\n      }\n\n      return\n    }\n\n    let cancelled = false\n\n    const compute = () => {\n      if (cancelled) return\n\n      const controlRect = control.getBoundingClientRect()\n      const thumbRect = thumb.getBoundingClientRect()\n      const valueWidth = valueEl.scrollWidth\n\n      // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n      if (valueWidth === 0) {\n        requestAnimationFrame(compute)\n\n        return\n      }\n\n      const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n      const valueCenterMin = valueWidth / 2\n      const valueCenterMax = controlRect.width - valueWidth / 2\n\n      const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n      const nextTranslateX = clampedCenter - thumbCenterPx\n\n      setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n    }\n\n    compute()\n\n    const resizeObserver = new ResizeObserver(compute)\n    resizeObserver.observe(control)\n    resizeObserver.observe(valueEl)\n\n    return () => {\n      cancelled = true\n      resizeObserver.disconnect()\n    }\n  }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n  return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<ComponentProps<typeof BaseSlider.Value>, 'render'>\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n  const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n  const thumbContext = useSliderThumbContext()\n  const isInsideThumb = thumbContext !== null\n\n  const valueRef = useRef<HTMLOutputElement | null>(null)\n  const mergedRef = useMergeRefs(valueRef, ref)\n\n  const [currentValue, setCurrentValue] = useState(0)\n  const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n  useEffect(() => {\n    if (!isInsideThumb) return\n\n    return registerValueInThumb()\n  }, [isInsideThumb, registerValueInThumb])\n\n  const resolvedClassName = cx(\n    isInsideThumb\n      ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n      : 'default:text-body-1 col-start-2 text-right default:font-bold',\n    className\n  )\n\n  const normalizedChildren = useCallback(\n    (formattedValues: readonly string[], values: readonly number[]) => {\n      const formatted = formattedValues[0] ?? String(values[0] ?? '')\n      const value = values[0] ?? 0\n      setCurrentValue(value)\n      if (typeof children === 'function') {\n        return (children as unknown as (formatted: string, value: number) => ReactNode)(\n          formatted,\n          value\n        )\n      }\n\n      return formatted\n    },\n    [children]\n  )\n\n  const style = isInsideThumb\n    ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n    : undefined\n\n  return (\n    <BaseSlider.Value\n      data-spark-component=\"slider-value\"\n      ref={mergedRef}\n      className={resolvedClassName}\n      style={style}\n      {...rest}\n    >\n      {normalizedChildren}\n    </BaseSlider.Value>\n  )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\nexport const Slider: typeof Root & {\n  Control: typeof Control\n  Indicator: typeof Indicator\n  Label: typeof Label\n  MaxValue: typeof MaxValue\n  MinValue: typeof MinValue\n  Thumb: typeof Thumb\n  Track: typeof Track\n  Value: typeof Value\n} = Object.assign(Root, {\n  Control,\n  Indicator,\n  Label,\n  MaxValue,\n  MinValue,\n  Thumb,\n  Track,\n  Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n  SliderProps,\n  SliderControlProps,\n  SliderIndicatorProps,\n  SliderLabelProps,\n  SliderMaxValueProps,\n  SliderMinValueProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  SliderValueProps,\n}\n"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","intent","children","className","ref","valueProp","defaultValueProp","disabledProp","readOnlyProp","nameProp","onValueChange","onValueCommit","min","max","rest","field","useFormFieldControl","disabled","readOnly","name","labelId","setLabelId","useState","valueInThumbCount","setValueInThumbCount","controlRef","useRef","thumbRef","handleLabelId","useCallback","id","registerValueInThumb","c","jsx","BaseSlider","value","v","SliderControl","hasValueInThumb","mergedRef","useMergeRefs","cx","trackVariants","rangeVariants","SliderIndicator","ID_PREFIX","SliderLabel","htmlForProp","idProp","requiredIndicator","FormFieldRequiredIndicator","asChild","others","fieldLabelId","fieldId","onLabelId","internalId","useId","generatedId","htmlFor","isRequired","labelRef","useEffect","Label","jsxs","Fragment","Slottable","SliderMaxValue","forwardRef","content","SliderMinValue","SliderThumbContext","useSliderThumbContext","thumbVariants","SliderThumb","forwardedRef","contextThumbRef","innerRef","SliderTrack","useSliderValueBoundaries","valueRef","translateX","setTranslateX","refsRetryScheduled","setRefsRetryScheduled","useLayoutEffect","control","thumb","valueEl","cancelled","compute","controlRect","thumbRect","valueWidth","thumbCenterPx","valueCenterMin","valueCenterMax","nextTranslateX","prev","resizeObserver","SliderValue","isInsideThumb","currentValue","setCurrentValue","resolvedClassName","normalizedChildren","formattedValues","values","formatted","style","Root","Control","Indicator","MaxValue","MinValue","Thumb","Track","Value"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n  fieldLabelId?: string\n  fieldId?: string\n  onLabelId?: (id: string | undefined) => void\n  hasValueInThumb: boolean\n  registerValueInThumb: () => () => void\n  controlRef: RefObject<HTMLElement | null>\n  thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      ComponentProps<typeof BaseSlider.Root>,\n      'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  intent = 'support',\n  children,\n  className,\n  ref,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n  const [valueInThumbCount, setValueInThumbCount] = useState(0)\n  const controlRef = useRef<HTMLElement | null>(null)\n  const thumbRef = useRef<HTMLElement | null>(null)\n\n  const handleLabelId = useCallback((id: string | undefined) => {\n    setLabelId(id)\n  }, [])\n\n  const registerValueInThumb = useCallback(() => {\n    setValueInThumbCount(c => c + 1)\n\n    return () => setValueInThumbCount(c => c - 1)\n  }, [])\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        min,\n        max,\n        fieldLabelId: field.labelId || labelId,\n        fieldId: field.id,\n        onLabelId: handleLabelId,\n        hasValueInThumb: valueInThumbCount > 0,\n        registerValueInThumb,\n        controlRef,\n        thumbRef,\n      }}\n    >\n      <BaseSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        className={rootStyles({ className })}\n        orientation=\"horizontal\"\n        disabled={disabled || readOnly}\n        thumbAlignment=\"edge\"\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        aria-disabled={disabled || readOnly ? true : undefined}\n        value={valueProp !== undefined ? [valueProp] : undefined}\n        defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n        onValueChange={\n          onValueChange\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueChange(v)\n              }\n            : undefined\n        }\n        onValueCommitted={\n          onValueCommit\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueCommit(v)\n              }\n            : undefined\n        }\n        min={min}\n        max={max}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n  const { hasValueInThumb, controlRef } = useSliderContext()\n  const mergedRef = useMergeRefs(controlRef, ref)\n\n  return (\n    <BaseSlider.Control\n      data-spark-component=\"slider-control\"\n      ref={mergedRef}\n      className={cx(\n        'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n        hasValueInThumb && 'mt-xl',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n  [\n    'absolute h-full rounded-sm',\n    // Disable transitions during drag to eliminate latency\n    'transition-none',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        accent: ['bg-accent'],\n        info: ['bg-info'],\n        neutral: ['bg-neutral'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        error: ['bg-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n  const { intent } = useSliderContext()\n\n  return (\n    <BaseSlider.Indicator\n      data-spark-component=\"slider-indicator\"\n      ref={ref}\n      className={rangeVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n  htmlFor: htmlForProp,\n  id: idProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: SliderLabelProps) => {\n  const field = useFormFieldControl()\n  const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n  // Generate an id if not provided and no FormField labelId is available\n  const internalId = useId()\n  const generatedId = `${ID_PREFIX}-${internalId}`\n  const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n  // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n  const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n  // Get disabled and required state from FormField if present\n  const disabled = field.disabled\n  const isRequired = field.isRequired\n\n  // Notify SliderContext of the label id if no FormField is present\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const mergedRef = useMergeRefs(ref, labelRef)\n\n  useEffect(() => {\n    if (onLabelId && !fieldLabelId && !field.labelId) {\n      onLabelId(labelId)\n    }\n  }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n  return (\n    <Label\n      ref={mergedRef}\n      id={labelId}\n      data-spark-component=\"slider-label\"\n      htmlFor={htmlFor}\n      className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n  ({ className, children }, ref) => {\n    const { max = 100 } = useSliderContext()\n\n    const content = children ? children(max) : max\n\n    return (\n      <div\n        data-spark-component=\"slider-max-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n  ({ className, children }, ref) => {\n    const { min = 0 } = useSliderContext()\n\n    const content = children ? children(min) : min\n\n    return (\n      <div\n        data-spark-component=\"slider-min-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n  isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'relative block size-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n    'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n    // visual thumb\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:size-sz-24 after:rounded-full',\n    // hover effect\n    'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n    'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n    'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n        support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n        accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n        info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n        neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n        success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n        alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n        error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { SliderThumbContext } from './SliderThumbContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport type SliderThumbProps = Omit<\n  ComponentProps<typeof BaseSlider.Thumb>,\n  'render' | 'index'\n> &\n  PropsWithChildren\n\nexport const SliderThumb = ({\n  className,\n  ref: forwardedRef,\n  children,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n  return (\n    <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n      <BaseSlider.Thumb\n        data-spark-component=\"slider-thumb\"\n        ref={ref}\n        id={fieldId}\n        className={thumbVariants({ intent, className })}\n        aria-labelledby={fieldLabelId}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Thumb>\n    </SliderThumbContext.Provider>\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n  return (\n    <BaseSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      className={trackVariants({ className })}\n      {...rest}\n    />\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n  controlRef: RefObject<HTMLElement | null>,\n  thumbRef: RefObject<HTMLElement | null>,\n  valueRef: RefObject<HTMLElement | null>,\n  value: number\n): number {\n  const [translateX, setTranslateX] = useState(0)\n  const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n  useLayoutEffect(() => {\n    const control = controlRef.current\n    const thumb = thumbRef.current\n    const valueEl = valueRef.current\n\n    if (!control || !thumb || !valueEl) {\n      setTranslateX(0)\n      // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n      if (!refsRetryScheduled) {\n        requestAnimationFrame(() => setRefsRetryScheduled(true))\n      }\n\n      return\n    }\n\n    let cancelled = false\n\n    const compute = () => {\n      if (cancelled) return\n\n      const controlRect = control.getBoundingClientRect()\n      const thumbRect = thumb.getBoundingClientRect()\n      const valueWidth = valueEl.scrollWidth\n\n      // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n      if (valueWidth === 0) {\n        requestAnimationFrame(compute)\n\n        return\n      }\n\n      const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n      const valueCenterMin = valueWidth / 2\n      const valueCenterMax = controlRect.width - valueWidth / 2\n\n      const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n      const nextTranslateX = clampedCenter - thumbCenterPx\n\n      setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n    }\n\n    compute()\n\n    const resizeObserver = new ResizeObserver(compute)\n    resizeObserver.observe(control)\n    resizeObserver.observe(valueEl)\n\n    return () => {\n      cancelled = true\n      resizeObserver.disconnect()\n    }\n  }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n  return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<\n  ComponentProps<typeof BaseSlider.Value>,\n  'render' | 'children'\n> & {\n  children?: ReactNode | ((formatted: string, value: number) => ReactNode)\n}\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n  const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n  const thumbContext = useSliderThumbContext()\n  const isInsideThumb = thumbContext !== null\n\n  const valueRef = useRef<HTMLOutputElement | null>(null)\n  const mergedRef = useMergeRefs(valueRef, ref)\n\n  const [currentValue, setCurrentValue] = useState(0)\n  const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n  useEffect(() => {\n    if (!isInsideThumb) return\n\n    return registerValueInThumb()\n  }, [isInsideThumb, registerValueInThumb])\n\n  const resolvedClassName = cx(\n    isInsideThumb\n      ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n      : 'default:text-body-1 col-start-2 text-right default:font-bold',\n    className\n  )\n\n  const normalizedChildren = useCallback(\n    (formattedValues: readonly string[], values: readonly number[]) => {\n      const formatted = formattedValues[0] ?? String(values[0] ?? '')\n      const value = values[0] ?? 0\n      setCurrentValue(value)\n      if (typeof children === 'function') {\n        return children(formatted, value)\n      }\n\n      return formatted\n    },\n    [children]\n  )\n\n  const style = isInsideThumb\n    ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n    : undefined\n\n  return (\n    <BaseSlider.Value\n      data-spark-component=\"slider-value\"\n      ref={mergedRef}\n      className={resolvedClassName}\n      style={style}\n      {...rest}\n    >\n      {normalizedChildren}\n    </BaseSlider.Value>\n  )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\nexport const Slider: typeof Root & {\n  Control: typeof Control\n  Indicator: typeof Indicator\n  Label: typeof Label\n  MaxValue: typeof MaxValue\n  MinValue: typeof MinValue\n  Thumb: typeof Thumb\n  Track: typeof Track\n  Value: typeof Value\n} = Object.assign(Root, {\n  Control,\n  Indicator,\n  Label,\n  MaxValue,\n  MinValue,\n  Thumb,\n  Track,\n  Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n  SliderProps,\n  SliderControlProps,\n  SliderIndicatorProps,\n  SliderLabelProps,\n  SliderMaxValueProps,\n  SliderMinValueProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  SliderValueProps,\n}\n"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","intent","children","className","ref","valueProp","defaultValueProp","disabledProp","readOnlyProp","nameProp","onValueChange","onValueCommit","min","max","rest","field","useFormFieldControl","disabled","readOnly","name","labelId","setLabelId","useState","valueInThumbCount","setValueInThumbCount","controlRef","useRef","thumbRef","handleLabelId","useCallback","id","registerValueInThumb","c","jsx","BaseSlider","value","v","SliderControl","hasValueInThumb","mergedRef","useMergeRefs","cx","trackVariants","rangeVariants","SliderIndicator","ID_PREFIX","SliderLabel","htmlForProp","idProp","requiredIndicator","FormFieldRequiredIndicator","asChild","others","fieldLabelId","fieldId","onLabelId","internalId","useId","generatedId","htmlFor","isRequired","labelRef","useEffect","Label","jsxs","Fragment","Slottable","SliderMaxValue","forwardRef","content","SliderMinValue","SliderThumbContext","useSliderThumbContext","thumbVariants","SliderThumb","forwardedRef","contextThumbRef","innerRef","SliderTrack","useSliderValueBoundaries","valueRef","translateX","setTranslateX","refsRetryScheduled","setRefsRetryScheduled","useLayoutEffect","control","thumb","valueEl","cancelled","compute","controlRect","thumbRect","valueWidth","thumbCenterPx","valueCenterMin","valueCenterMax","nextTranslateX","prev","resizeObserver","SliderValue","isInsideThumb","currentValue","setCurrentValue","resolvedClassName","normalizedChildren","formattedValues","values","formatted","style","Root","Control","Indicator","MaxValue","MinValue","Thumb","Track","Value"],"mappings":"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"}

package/dist/slider/index.mjs

@@ -292,10 +292,7 @@ const B = ({ className: t, children: e, ref: r, ...a }) => {
   ), h = F(
     (y, S) => {
       const x = y[0] ?? String(S[0] ?? ""), V = S[0] ?? 0;
-      return m(V), typeof e == "function" ? e(
-        x,
-        V
-      ) : x;
+      return m(V), typeof e == "function" ? e(x, V) : x;
     },
     [e]
   ), p = n ? { transform: `translate(calc(0% + ${g}px), 0)` } : void 0;

package/dist/slider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n  fieldLabelId?: string\n  fieldId?: string\n  onLabelId?: (id: string | undefined) => void\n  hasValueInThumb: boolean\n  registerValueInThumb: () => () => void\n  controlRef: RefObject<HTMLElement | null>\n  thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      ComponentProps<typeof BaseSlider.Root>,\n      'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  intent = 'support',\n  children,\n  className,\n  ref,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n  const [valueInThumbCount, setValueInThumbCount] = useState(0)\n  const controlRef = useRef<HTMLElement | null>(null)\n  const thumbRef = useRef<HTMLElement | null>(null)\n\n  const handleLabelId = useCallback((id: string | undefined) => {\n    setLabelId(id)\n  }, [])\n\n  const registerValueInThumb = useCallback(() => {\n    setValueInThumbCount(c => c + 1)\n\n    return () => setValueInThumbCount(c => c - 1)\n  }, [])\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        min,\n        max,\n        fieldLabelId: field.labelId || labelId,\n        fieldId: field.id,\n        onLabelId: handleLabelId,\n        hasValueInThumb: valueInThumbCount > 0,\n        registerValueInThumb,\n        controlRef,\n        thumbRef,\n      }}\n    >\n      <BaseSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        className={rootStyles({ className })}\n        orientation=\"horizontal\"\n        disabled={disabled || readOnly}\n        thumbAlignment=\"edge\"\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        aria-disabled={disabled || readOnly ? true : undefined}\n        value={valueProp !== undefined ? [valueProp] : undefined}\n        defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n        onValueChange={\n          onValueChange\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueChange(v)\n              }\n            : undefined\n        }\n        onValueCommitted={\n          onValueCommit\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueCommit(v)\n              }\n            : undefined\n        }\n        min={min}\n        max={max}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n  const { hasValueInThumb, controlRef } = useSliderContext()\n  const mergedRef = useMergeRefs(controlRef, ref)\n\n  return (\n    <BaseSlider.Control\n      data-spark-component=\"slider-control\"\n      ref={mergedRef}\n      className={cx(\n        'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n        hasValueInThumb && 'mt-xl',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n  [\n    'absolute h-full rounded-sm',\n    // Disable transitions during drag to eliminate latency\n    'transition-none',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        accent: ['bg-accent'],\n        info: ['bg-info'],\n        neutral: ['bg-neutral'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        error: ['bg-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n  const { intent } = useSliderContext()\n\n  return (\n    <BaseSlider.Indicator\n      data-spark-component=\"slider-indicator\"\n      ref={ref}\n      className={rangeVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n  htmlFor: htmlForProp,\n  id: idProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: SliderLabelProps) => {\n  const field = useFormFieldControl()\n  const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n  // Generate an id if not provided and no FormField labelId is available\n  const internalId = useId()\n  const generatedId = `${ID_PREFIX}-${internalId}`\n  const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n  // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n  const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n  // Get disabled and required state from FormField if present\n  const disabled = field.disabled\n  const isRequired = field.isRequired\n\n  // Notify SliderContext of the label id if no FormField is present\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const mergedRef = useMergeRefs(ref, labelRef)\n\n  useEffect(() => {\n    if (onLabelId && !fieldLabelId && !field.labelId) {\n      onLabelId(labelId)\n    }\n  }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n  return (\n    <Label\n      ref={mergedRef}\n      id={labelId}\n      data-spark-component=\"slider-label\"\n      htmlFor={htmlFor}\n      className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n  ({ className, children }, ref) => {\n    const { max = 100 } = useSliderContext()\n\n    const content = children ? children(max) : max\n\n    return (\n      <div\n        data-spark-component=\"slider-max-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n  ({ className, children }, ref) => {\n    const { min = 0 } = useSliderContext()\n\n    const content = children ? children(min) : min\n\n    return (\n      <div\n        data-spark-component=\"slider-min-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n  isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'relative block size-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n    'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n    // visual thumb\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:size-sz-24 after:rounded-full',\n    // hover effect\n    'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n    'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n    'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n        support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n        accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n        info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n        neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n        success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n        alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n        error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { SliderThumbContext } from './SliderThumbContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport type SliderThumbProps = Omit<\n  ComponentProps<typeof BaseSlider.Thumb>,\n  'render' | 'index'\n> &\n  PropsWithChildren\n\nexport const SliderThumb = ({\n  className,\n  ref: forwardedRef,\n  children,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n  return (\n    <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n      <BaseSlider.Thumb\n        data-spark-component=\"slider-thumb\"\n        ref={ref}\n        id={fieldId}\n        className={thumbVariants({ intent, className })}\n        aria-labelledby={fieldLabelId}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Thumb>\n    </SliderThumbContext.Provider>\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n  return (\n    <BaseSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      className={trackVariants({ className })}\n      {...rest}\n    />\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n  controlRef: RefObject<HTMLElement | null>,\n  thumbRef: RefObject<HTMLElement | null>,\n  valueRef: RefObject<HTMLElement | null>,\n  value: number\n): number {\n  const [translateX, setTranslateX] = useState(0)\n  const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n  useLayoutEffect(() => {\n    const control = controlRef.current\n    const thumb = thumbRef.current\n    const valueEl = valueRef.current\n\n    if (!control || !thumb || !valueEl) {\n      setTranslateX(0)\n      // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n      if (!refsRetryScheduled) {\n        requestAnimationFrame(() => setRefsRetryScheduled(true))\n      }\n\n      return\n    }\n\n    let cancelled = false\n\n    const compute = () => {\n      if (cancelled) return\n\n      const controlRect = control.getBoundingClientRect()\n      const thumbRect = thumb.getBoundingClientRect()\n      const valueWidth = valueEl.scrollWidth\n\n      // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n      if (valueWidth === 0) {\n        requestAnimationFrame(compute)\n\n        return\n      }\n\n      const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n      const valueCenterMin = valueWidth / 2\n      const valueCenterMax = controlRect.width - valueWidth / 2\n\n      const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n      const nextTranslateX = clampedCenter - thumbCenterPx\n\n      setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n    }\n\n    compute()\n\n    const resizeObserver = new ResizeObserver(compute)\n    resizeObserver.observe(control)\n    resizeObserver.observe(valueEl)\n\n    return () => {\n      cancelled = true\n      resizeObserver.disconnect()\n    }\n  }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n  return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<ComponentProps<typeof BaseSlider.Value>, 'render'>\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n  const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n  const thumbContext = useSliderThumbContext()\n  const isInsideThumb = thumbContext !== null\n\n  const valueRef = useRef<HTMLOutputElement | null>(null)\n  const mergedRef = useMergeRefs(valueRef, ref)\n\n  const [currentValue, setCurrentValue] = useState(0)\n  const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n  useEffect(() => {\n    if (!isInsideThumb) return\n\n    return registerValueInThumb()\n  }, [isInsideThumb, registerValueInThumb])\n\n  const resolvedClassName = cx(\n    isInsideThumb\n      ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n      : 'default:text-body-1 col-start-2 text-right default:font-bold',\n    className\n  )\n\n  const normalizedChildren = useCallback(\n    (formattedValues: readonly string[], values: readonly number[]) => {\n      const formatted = formattedValues[0] ?? String(values[0] ?? '')\n      const value = values[0] ?? 0\n      setCurrentValue(value)\n      if (typeof children === 'function') {\n        return (children as unknown as (formatted: string, value: number) => ReactNode)(\n          formatted,\n          value\n        )\n      }\n\n      return formatted\n    },\n    [children]\n  )\n\n  const style = isInsideThumb\n    ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n    : undefined\n\n  return (\n    <BaseSlider.Value\n      data-spark-component=\"slider-value\"\n      ref={mergedRef}\n      className={resolvedClassName}\n      style={style}\n      {...rest}\n    >\n      {normalizedChildren}\n    </BaseSlider.Value>\n  )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\nexport const Slider: typeof Root & {\n  Control: typeof Control\n  Indicator: typeof Indicator\n  Label: typeof Label\n  MaxValue: typeof MaxValue\n  MinValue: typeof MinValue\n  Thumb: typeof Thumb\n  Track: typeof Track\n  Value: typeof Value\n} = Object.assign(Root, {\n  Control,\n  Indicator,\n  Label,\n  MaxValue,\n  MinValue,\n  Thumb,\n  Track,\n  Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n  SliderProps,\n  SliderControlProps,\n  SliderIndicatorProps,\n  SliderLabelProps,\n  SliderMaxValueProps,\n  SliderMinValueProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  SliderValueProps,\n}\n"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","intent","children","className","ref","valueProp","defaultValueProp","disabledProp","readOnlyProp","nameProp","onValueChange","onValueCommit","min","max","rest","field","useFormFieldControl","disabled","readOnly","name","labelId","setLabelId","useState","valueInThumbCount","setValueInThumbCount","controlRef","useRef","thumbRef","handleLabelId","useCallback","id","registerValueInThumb","c","jsx","BaseSlider","value","v","SliderControl","hasValueInThumb","mergedRef","useMergeRefs","cx","trackVariants","rangeVariants","SliderIndicator","ID_PREFIX","SliderLabel","htmlForProp","idProp","requiredIndicator","FormFieldRequiredIndicator","asChild","others","fieldLabelId","fieldId","onLabelId","internalId","useId","generatedId","htmlFor","isRequired","labelRef","useEffect","Label","jsxs","Fragment","Slottable","SliderMaxValue","forwardRef","content","SliderMinValue","SliderThumbContext","useSliderThumbContext","thumbVariants","SliderThumb","forwardedRef","contextThumbRef","innerRef","SliderTrack","useSliderValueBoundaries","valueRef","translateX","setTranslateX","refsRetryScheduled","setRefsRetryScheduled","useLayoutEffect","control","thumb","valueEl","cancelled","compute","controlRect","thumbRect","valueWidth","thumbCenterPx","valueCenterMin","valueCenterMax","nextTranslateX","prev","resizeObserver","SliderValue","isInsideThumb","currentValue","setCurrentValue","resolvedClassName","normalizedChildren","formattedValues","values","formatted","style","Root","Control","Indicator","MaxValue","MinValue","Thumb","Track","Value"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n  fieldLabelId?: string\n  fieldId?: string\n  onLabelId?: (id: string | undefined) => void\n  hasValueInThumb: boolean\n  registerValueInThumb: () => () => void\n  controlRef: RefObject<HTMLElement | null>\n  thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      ComponentProps<typeof BaseSlider.Root>,\n      'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  intent = 'support',\n  children,\n  className,\n  ref,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n  const [valueInThumbCount, setValueInThumbCount] = useState(0)\n  const controlRef = useRef<HTMLElement | null>(null)\n  const thumbRef = useRef<HTMLElement | null>(null)\n\n  const handleLabelId = useCallback((id: string | undefined) => {\n    setLabelId(id)\n  }, [])\n\n  const registerValueInThumb = useCallback(() => {\n    setValueInThumbCount(c => c + 1)\n\n    return () => setValueInThumbCount(c => c - 1)\n  }, [])\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        min,\n        max,\n        fieldLabelId: field.labelId || labelId,\n        fieldId: field.id,\n        onLabelId: handleLabelId,\n        hasValueInThumb: valueInThumbCount > 0,\n        registerValueInThumb,\n        controlRef,\n        thumbRef,\n      }}\n    >\n      <BaseSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        className={rootStyles({ className })}\n        orientation=\"horizontal\"\n        disabled={disabled || readOnly}\n        thumbAlignment=\"edge\"\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        aria-disabled={disabled || readOnly ? true : undefined}\n        value={valueProp !== undefined ? [valueProp] : undefined}\n        defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n        onValueChange={\n          onValueChange\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueChange(v)\n              }\n            : undefined\n        }\n        onValueCommitted={\n          onValueCommit\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueCommit(v)\n              }\n            : undefined\n        }\n        min={min}\n        max={max}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n  const { hasValueInThumb, controlRef } = useSliderContext()\n  const mergedRef = useMergeRefs(controlRef, ref)\n\n  return (\n    <BaseSlider.Control\n      data-spark-component=\"slider-control\"\n      ref={mergedRef}\n      className={cx(\n        'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n        hasValueInThumb && 'mt-xl',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n  [\n    'absolute h-full rounded-sm',\n    // Disable transitions during drag to eliminate latency\n    'transition-none',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        accent: ['bg-accent'],\n        info: ['bg-info'],\n        neutral: ['bg-neutral'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        error: ['bg-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n  const { intent } = useSliderContext()\n\n  return (\n    <BaseSlider.Indicator\n      data-spark-component=\"slider-indicator\"\n      ref={ref}\n      className={rangeVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n  htmlFor: htmlForProp,\n  id: idProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: SliderLabelProps) => {\n  const field = useFormFieldControl()\n  const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n  // Generate an id if not provided and no FormField labelId is available\n  const internalId = useId()\n  const generatedId = `${ID_PREFIX}-${internalId}`\n  const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n  // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n  const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n  // Get disabled and required state from FormField if present\n  const disabled = field.disabled\n  const isRequired = field.isRequired\n\n  // Notify SliderContext of the label id if no FormField is present\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const mergedRef = useMergeRefs(ref, labelRef)\n\n  useEffect(() => {\n    if (onLabelId && !fieldLabelId && !field.labelId) {\n      onLabelId(labelId)\n    }\n  }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n  return (\n    <Label\n      ref={mergedRef}\n      id={labelId}\n      data-spark-component=\"slider-label\"\n      htmlFor={htmlFor}\n      className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n  ({ className, children }, ref) => {\n    const { max = 100 } = useSliderContext()\n\n    const content = children ? children(max) : max\n\n    return (\n      <div\n        data-spark-component=\"slider-max-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n  ({ className, children }, ref) => {\n    const { min = 0 } = useSliderContext()\n\n    const content = children ? children(min) : min\n\n    return (\n      <div\n        data-spark-component=\"slider-min-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n  isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'relative block size-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n    'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n    // visual thumb\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:size-sz-24 after:rounded-full',\n    // hover effect\n    'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n    'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n    'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n        support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n        accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n        info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n        neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n        success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n        alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n        error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { SliderThumbContext } from './SliderThumbContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport type SliderThumbProps = Omit<\n  ComponentProps<typeof BaseSlider.Thumb>,\n  'render' | 'index'\n> &\n  PropsWithChildren\n\nexport const SliderThumb = ({\n  className,\n  ref: forwardedRef,\n  children,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n  return (\n    <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n      <BaseSlider.Thumb\n        data-spark-component=\"slider-thumb\"\n        ref={ref}\n        id={fieldId}\n        className={thumbVariants({ intent, className })}\n        aria-labelledby={fieldLabelId}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Thumb>\n    </SliderThumbContext.Provider>\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n  return (\n    <BaseSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      className={trackVariants({ className })}\n      {...rest}\n    />\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n  controlRef: RefObject<HTMLElement | null>,\n  thumbRef: RefObject<HTMLElement | null>,\n  valueRef: RefObject<HTMLElement | null>,\n  value: number\n): number {\n  const [translateX, setTranslateX] = useState(0)\n  const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n  useLayoutEffect(() => {\n    const control = controlRef.current\n    const thumb = thumbRef.current\n    const valueEl = valueRef.current\n\n    if (!control || !thumb || !valueEl) {\n      setTranslateX(0)\n      // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n      if (!refsRetryScheduled) {\n        requestAnimationFrame(() => setRefsRetryScheduled(true))\n      }\n\n      return\n    }\n\n    let cancelled = false\n\n    const compute = () => {\n      if (cancelled) return\n\n      const controlRect = control.getBoundingClientRect()\n      const thumbRect = thumb.getBoundingClientRect()\n      const valueWidth = valueEl.scrollWidth\n\n      // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n      if (valueWidth === 0) {\n        requestAnimationFrame(compute)\n\n        return\n      }\n\n      const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n      const valueCenterMin = valueWidth / 2\n      const valueCenterMax = controlRect.width - valueWidth / 2\n\n      const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n      const nextTranslateX = clampedCenter - thumbCenterPx\n\n      setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n    }\n\n    compute()\n\n    const resizeObserver = new ResizeObserver(compute)\n    resizeObserver.observe(control)\n    resizeObserver.observe(valueEl)\n\n    return () => {\n      cancelled = true\n      resizeObserver.disconnect()\n    }\n  }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n  return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<\n  ComponentProps<typeof BaseSlider.Value>,\n  'render' | 'children'\n> & {\n  children?: ReactNode | ((formatted: string, value: number) => ReactNode)\n}\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n  const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n  const thumbContext = useSliderThumbContext()\n  const isInsideThumb = thumbContext !== null\n\n  const valueRef = useRef<HTMLOutputElement | null>(null)\n  const mergedRef = useMergeRefs(valueRef, ref)\n\n  const [currentValue, setCurrentValue] = useState(0)\n  const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n  useEffect(() => {\n    if (!isInsideThumb) return\n\n    return registerValueInThumb()\n  }, [isInsideThumb, registerValueInThumb])\n\n  const resolvedClassName = cx(\n    isInsideThumb\n      ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n      : 'default:text-body-1 col-start-2 text-right default:font-bold',\n    className\n  )\n\n  const normalizedChildren = useCallback(\n    (formattedValues: readonly string[], values: readonly number[]) => {\n      const formatted = formattedValues[0] ?? String(values[0] ?? '')\n      const value = values[0] ?? 0\n      setCurrentValue(value)\n      if (typeof children === 'function') {\n        return children(formatted, value)\n      }\n\n      return formatted\n    },\n    [children]\n  )\n\n  const style = isInsideThumb\n    ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n    : undefined\n\n  return (\n    <BaseSlider.Value\n      data-spark-component=\"slider-value\"\n      ref={mergedRef}\n      className={resolvedClassName}\n      style={style}\n      {...rest}\n    >\n      {normalizedChildren}\n    </BaseSlider.Value>\n  )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\nexport const Slider: typeof Root & {\n  Control: typeof Control\n  Indicator: typeof Indicator\n  Label: typeof Label\n  MaxValue: typeof MaxValue\n  MinValue: typeof MinValue\n  Thumb: typeof Thumb\n  Track: typeof Track\n  Value: typeof Value\n} = Object.assign(Root, {\n  Control,\n  Indicator,\n  Label,\n  MaxValue,\n  MinValue,\n  Thumb,\n  Track,\n  Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n  SliderProps,\n  SliderControlProps,\n  SliderIndicatorProps,\n  SliderLabelProps,\n  SliderMaxValueProps,\n  SliderMinValueProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  SliderValueProps,\n}\n"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","intent","children","className","ref","valueProp","defaultValueProp","disabledProp","readOnlyProp","nameProp","onValueChange","onValueCommit","min","max","rest","field","useFormFieldControl","disabled","readOnly","name","labelId","setLabelId","useState","valueInThumbCount","setValueInThumbCount","controlRef","useRef","thumbRef","handleLabelId","useCallback","id","registerValueInThumb","c","jsx","BaseSlider","value","v","SliderControl","hasValueInThumb","mergedRef","useMergeRefs","cx","trackVariants","rangeVariants","SliderIndicator","ID_PREFIX","SliderLabel","htmlForProp","idProp","requiredIndicator","FormFieldRequiredIndicator","asChild","others","fieldLabelId","fieldId","onLabelId","internalId","useId","generatedId","htmlFor","isRequired","labelRef","useEffect","Label","jsxs","Fragment","Slottable","SliderMaxValue","forwardRef","content","SliderMinValue","SliderThumbContext","useSliderThumbContext","thumbVariants","SliderThumb","forwardedRef","contextThumbRef","innerRef","SliderTrack","useSliderValueBoundaries","valueRef","translateX","setTranslateX","refsRetryScheduled","setRefsRetryScheduled","useLayoutEffect","control","thumb","valueEl","cancelled","compute","controlRect","thumbRect","valueWidth","thumbCenterPx","valueCenterMin","valueCenterMax","nextTranslateX","prev","resizeObserver","SliderValue","isInsideThumb","currentValue","setCurrentValue","resolvedClassName","normalizedChildren","formattedValues","values","formatted","style","Root","Control","Indicator","MaxValue","MinValue","Thumb","Track","Value"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.1.0",
+  "version": "17.2.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -54,9 +54,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^17.1.0",
-    "@spark-ui/icons": "^17.1.0",
-    "@spark-ui/internal-utils": "^17.1.0",
+    "@spark-ui/hooks": "^17.2.0",
+    "@spark-ui/icons": "^17.2.0",
+    "@spark-ui/internal-utils": "^17.2.0",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",