@spark-ui/components 17.5.6-beta.3 → 17.5.6-beta.4

package/dist/src/stepper/types.d.ts

@@ -22,8 +22,9 @@ export interface UseStepperArgs extends Omit<ComponentProps<typeof NumberField.R
     formatOptions?: Intl.NumberFormatOptions;
     /**
      * Callback fired when the value changes.
+     * The value is null when the input is cleared.
      */
-    onValueChange?: (value: number) => void;
+    onValueChange?: (value: number | null) => void;
     /**
      * The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale.
      * @default 'fr'

package/dist/stepper/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.js`),n=require(`../input-Cx5cfgE8.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@spark-ui/icons/Minus`),l=require(`@base-ui/react/number-field`),u=require(`@spark-ui/icons/Plus`);var d=(0,i.createContext)(null),f=({children:e,formatOptions:t,minValue:o,maxValue:c,ref:u,onValueChange:f,locale:p=`fr`,name:m,...h})=>{let g=(0,i.useRef)(null),_=(0,s.useFormFieldControl)(),v=(0,i.useRef)(null),y=_.name??m,b=_.disabled??h.disabled,x=_.readOnly??h.readOnly,S=_.isRequired??h.required,C=e=>{f&&e!==null&&e!==v.current&&(v.current=e,f(e))},{"aria-label":w,...T}=h;return(0,a.jsx)(d.Provider,{value:{inputRef:g,fieldId:_.id,fieldLabelId:_.labelId,fieldIsInvalid:_.isInvalid,fieldIsRequired:S,state:h.state,ariaLabel:w},children:(0,a.jsx)(l.NumberField.Root,{...T,format:t,min:o,max:c,locale:p,disabled:b,readOnly:x,required:S,name:y,inputRef:g,onValueCommitted:C,"aria-describedby":_.description,children:(0,a.jsx)(`div`,{"data-spark-component":`stepper`,ref:u,className:(0,r.cx)(n.r({disabled:b,readOnly:x}),h.className),children:e})})})};f.displayName=`Stepper`;var p=()=>{let e=(0,i.useContext)(d);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},m=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:c,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Increment,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-r-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-increment-button`,children:(0,a.jsx)(t.t,{ref:c,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-l-0! -ml-px rounded-r-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(u.Plus,{})})})})}})},h=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:u,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Decrement,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-l-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-decrement-button`,children:(0,a.jsx)(t.t,{ref:u,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-r-0! -mr-px rounded-l-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(c.Minus,{})})})})}})},g=m,_=h;m.displayName=`Stepper.IncrementButton`,h.displayName=`Stepper.DecrementButton`;var v=({ref:e,...t})=>{let{inputRef:r,fieldId:i,fieldLabelId:s,fieldIsInvalid:c,fieldIsRequired:u,ariaLabel:d}=p(),f=(0,o.useMergeRefs)(e,r),{className:m=``,...h}=t,g=!!s;return(0,a.jsx)(`div`,{className:`relative inline-flex w-full`,children:(0,a.jsx)(l.NumberField.Input,{render:e=>{let t;u===void 0?`required`in e&&(t=e.required):t=u;let r=c===void 0?e[`aria-invalid`]:c;return(0,a.jsx)(n.n,{ref:f,...e,...h,id:i||e.id,required:t,"aria-invalid":r,"aria-label":g?void 0:d,className:`min-w-sz-56 text-center rounded-none! ${m}`})}})})},y=v;v.displayName=`Stepper.Input`;var b=Object.assign(f,{IncrementButton:g,DecrementButton:_,Input:y});b.displayName=`Stepper`,g.displayName=`Stepper.IncrementButton`,_.displayName=`Stepper.DecrementButton`,y.displayName=`Stepper.Input`,exports.Stepper=b;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.js`),n=require(`../input-Cx5cfgE8.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@spark-ui/icons/Minus`),l=require(`@base-ui/react/number-field`),u=require(`@spark-ui/icons/Plus`);var d=(0,i.createContext)(null),f=({children:e,formatOptions:t,minValue:o,maxValue:c,ref:u,onValueChange:f,locale:p=`fr`,name:m,...h})=>{let g=(0,i.useRef)(null),_=(0,s.useFormFieldControl)(),v=(0,i.useRef)(h.value??h.defaultValue??null),y=_.name??m,b=_.disabled??h.disabled,x=_.readOnly??h.readOnly,S=_.isRequired??h.required,C=e=>{f&&e!==v.current&&(v.current=e,f(e))},{"aria-label":w,...T}=h;return(0,a.jsx)(d.Provider,{value:{inputRef:g,fieldId:_.id,fieldLabelId:_.labelId,fieldIsInvalid:_.isInvalid,fieldIsRequired:S,state:h.state,ariaLabel:w},children:(0,a.jsx)(l.NumberField.Root,{...T,format:t,min:o,max:c,locale:p,disabled:b,readOnly:x,required:S,name:y,inputRef:g,onValueCommitted:C,"aria-describedby":_.description,children:(0,a.jsx)(`div`,{"data-spark-component":`stepper`,ref:u,className:(0,r.cx)(n.r({disabled:b,readOnly:x}),h.className),children:e})})})};f.displayName=`Stepper`;var p=()=>{let e=(0,i.useContext)(d);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},m=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:c,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Increment,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-r-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-increment-button`,children:(0,a.jsx)(t.t,{ref:c,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-l-0! -ml-px rounded-r-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(u.Plus,{})})})})}})},h=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:u,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Decrement,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-l-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-decrement-button`,children:(0,a.jsx)(t.t,{ref:u,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-r-0! -mr-px rounded-l-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(c.Minus,{})})})})}})},g=m,_=h;m.displayName=`Stepper.IncrementButton`,h.displayName=`Stepper.DecrementButton`;var v=({ref:e,...t})=>{let{inputRef:r,fieldId:i,fieldLabelId:s,fieldIsInvalid:c,fieldIsRequired:u,ariaLabel:d}=p(),f=(0,o.useMergeRefs)(e,r),{className:m=``,...h}=t,g=!!s;return(0,a.jsx)(`div`,{className:`relative inline-flex w-full`,children:(0,a.jsx)(l.NumberField.Input,{render:e=>{let t;u===void 0?`required`in e&&(t=e.required):t=u;let r=c===void 0?e[`aria-invalid`]:c;return(0,a.jsx)(n.n,{ref:f,...e,...h,id:i||e.id,required:t,"aria-invalid":r,"aria-label":g?void 0:d,className:`min-w-sz-56 text-center rounded-none! ${m}`})}})})},y=v;v.displayName=`Stepper.Input`;var b=Object.assign(f,{IncrementButton:g,DecrementButton:_,Input:y});b.displayName=`Stepper`,g.displayName=`Stepper.IncrementButton`,_.displayName=`Stepper.DecrementButton`,y.displayName=`Stepper.Input`,exports.Stepper=b;
 //# sourceMappingURL=index.js.map

package/dist/stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { inputGroupStyles } from '../input/InputGroup.styles'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n  inputRef: RefObject<HTMLInputElement | null>\n  fieldId?: string\n  fieldLabelId?: string\n  fieldIsInvalid?: boolean\n  fieldIsRequired?: boolean\n  state?: 'error' | 'alert' | 'success'\n  ariaLabel?: string\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nexport const Stepper = ({\n  children,\n  formatOptions,\n  minValue,\n  maxValue,\n  ref: forwardedRef,\n  onValueChange,\n  locale = 'fr',\n  name: nameProp,\n  ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const formFieldControlProps = useFormFieldControl()\n  const lastCommittedValueRef = useRef<number | null>(null)\n\n  const name = formFieldControlProps.name ?? nameProp\n  const disabled = formFieldControlProps.disabled ?? stepperProps.disabled\n  const readOnly = formFieldControlProps.readOnly ?? stepperProps.readOnly\n  const required = formFieldControlProps.isRequired ?? stepperProps.required\n\n  // Base UI calls onValueChange on every keystroke, but react-aria only called it on blur.\n  // We use onValueCommitted to preserve the old behavior where onValueChange is only called on blur for input changes,\n  // but immediately for button clicks.\n  const handleValueCommit = (value: number | null) => {\n    if (onValueChange && value !== null && value !== lastCommittedValueRef.current) {\n      lastCommittedValueRef.current = value\n      onValueChange(value)\n    }\n  }\n\n  // Extract aria-label to pass to input, not to NumberField.Root\n  const { 'aria-label': ariaLabel, ...restStepperProps } = stepperProps\n\n  return (\n    <StepperContext.Provider\n      value={{\n        inputRef,\n        fieldId: formFieldControlProps.id,\n        fieldLabelId: formFieldControlProps.labelId,\n        fieldIsInvalid: formFieldControlProps.isInvalid,\n        fieldIsRequired: required,\n        state: stepperProps.state,\n        ariaLabel,\n      }}\n    >\n      <NumberField.Root\n        {...restStepperProps}\n        format={formatOptions}\n        min={minValue}\n        max={maxValue}\n        locale={locale}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        name={name}\n        inputRef={inputRef}\n        onValueCommitted={handleValueCommit}\n        aria-describedby={formFieldControlProps.description}\n      >\n        <div\n          data-spark-component=\"stepper\"\n          ref={forwardedRef}\n          className={cx(inputGroupStyles({ disabled, readOnly }), stepperProps.className)}\n        >\n          {children}\n        </div>\n      </NumberField.Root>\n    </StepperContext.Provider>\n  )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n  const context = useContext(StepperContext)\n\n  if (!context) {\n    throw Error('useStepperContext must be used within a Stepper provider')\n  }\n\n  return context\n}\n","import { NumberField } from '@base-ui/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cx } from 'class-variance-authority'\nimport { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  disabled,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const { fieldId, state } = useStepperContext()\n\n  return (\n    <NumberField.Increment\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n        const isInactive = isDisabled || isReadOnly\n\n        return (\n          <div\n            className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n            data-spark-component=\"stepper-increment-button\"\n          >\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={cx(\n                'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n                'rounded-l-0! -ml-px rounded-r-lg',\n                state === 'error' && 'border-error',\n                state === 'alert' && 'border-alert',\n                state === 'success' && 'border-success',\n                !state && 'border-outline',\n                className\n              )}\n              {...rest}\n              {...buttonProps}\n              aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n              aria-controls={fieldId}\n              disabled={isDisabled}\n            >\n              {children || (\n                <Icon>\n                  <Plus />\n                </Icon>\n              )}\n            </IconButton>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\nconst DecrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  disabled,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const { fieldId, state } = useStepperContext()\n\n  return (\n    <NumberField.Decrement\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n        const isInactive = isDisabled || isReadOnly\n\n        return (\n          <div\n            className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n            data-spark-component=\"stepper-decrement-button\"\n          >\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={cx(\n                'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n                'rounded-r-0! -mr-px rounded-l-lg',\n                state === 'error' && 'border-error',\n                state === 'alert' && 'border-alert',\n                state === 'success' && 'border-success',\n                !state && 'border-outline',\n                className\n              )}\n              {...rest}\n              {...buttonProps}\n              aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n              aria-controls={fieldId}\n              disabled={isDisabled}\n            >\n              {children || (\n                <Icon>\n                  <Minus />\n                </Icon>\n              )}\n            </IconButton>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\nexport const StepperIncrementButton = IncrementButton\n\nexport const StepperDecrementButton = DecrementButton\n\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { NumberField } from '@base-ui/react/number-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n  const { inputRef, fieldId, fieldLabelId, fieldIsInvalid, fieldIsRequired, ariaLabel } =\n    useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  // Only use aria-label if not wrapped in a FormField with a label (fieldLabelId would be set by FormField.Label)\n  const hasFormFieldLabel = !!fieldLabelId\n\n  return (\n    <div className=\"relative inline-flex w-full\">\n      <NumberField.Input\n        render={inputProps => {\n          // Determine required attribute\n          let required: boolean | undefined = undefined\n          if (fieldIsRequired !== undefined) {\n            required = fieldIsRequired\n          } else if ('required' in inputProps) {\n            required = (inputProps as any).required\n          }\n\n          // Determine aria-invalid attribute\n          const ariaInvalid =\n            fieldIsInvalid !== undefined ? fieldIsInvalid : inputProps['aria-invalid']\n\n          return (\n            <SparkInput\n              ref={ref}\n              {...inputProps}\n              {...remainingProps}\n              id={fieldId || inputProps.id}\n              required={required}\n              aria-invalid={ariaInvalid}\n              aria-label={hasFormFieldLabel ? undefined : ariaLabel}\n              className={`min-w-sz-56 text-center rounded-none! ${className}`}\n            />\n          )\n        }}\n      />\n    </div>\n  )\n}\n\nexport const StepperInput = Input\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n  StepperDecrementButton as DecrementButton,\n  StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\n/**\n * A numeric input component with increment and decrement buttons for adjusting values.\n */\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { inputGroupStyles } from '../input/InputGroup.styles'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n  inputRef: RefObject<HTMLInputElement | null>\n  fieldId?: string\n  fieldLabelId?: string\n  fieldIsInvalid?: boolean\n  fieldIsRequired?: boolean\n  state?: 'error' | 'alert' | 'success'\n  ariaLabel?: string\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nexport const Stepper = ({\n  children,\n  formatOptions,\n  minValue,\n  maxValue,\n  ref: forwardedRef,\n  onValueChange,\n  locale = 'fr',\n  name: nameProp,\n  ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const formFieldControlProps = useFormFieldControl()\n  const lastCommittedValueRef = useRef<number | null>(\n    stepperProps.value ?? stepperProps.defaultValue ?? null\n  )\n\n  const name = formFieldControlProps.name ?? nameProp\n  const disabled = formFieldControlProps.disabled ?? stepperProps.disabled\n  const readOnly = formFieldControlProps.readOnly ?? stepperProps.readOnly\n  const required = formFieldControlProps.isRequired ?? stepperProps.required\n\n  // Base UI calls onValueChange on every keystroke, but react-aria only called it on blur.\n  // We use onValueCommitted to preserve the old behavior where onValueChange is only called on blur for input changes,\n  // but immediately for button clicks.\n  const handleValueCommit = (value: number | null) => {\n    // Allow null values to be propagated (when input is cleared)\n    // This is necessary for controlled mode and React Hook Form validation\n    if (onValueChange && value !== lastCommittedValueRef.current) {\n      lastCommittedValueRef.current = value\n      onValueChange(value)\n    }\n  }\n\n  // Extract aria-label to pass to input, not to NumberField.Root\n  const { 'aria-label': ariaLabel, ...restStepperProps } = stepperProps\n\n  return (\n    <StepperContext.Provider\n      value={{\n        inputRef,\n        fieldId: formFieldControlProps.id,\n        fieldLabelId: formFieldControlProps.labelId,\n        fieldIsInvalid: formFieldControlProps.isInvalid,\n        fieldIsRequired: required,\n        state: stepperProps.state,\n        ariaLabel,\n      }}\n    >\n      <NumberField.Root\n        {...restStepperProps}\n        format={formatOptions}\n        min={minValue}\n        max={maxValue}\n        locale={locale}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        name={name}\n        inputRef={inputRef}\n        onValueCommitted={handleValueCommit}\n        aria-describedby={formFieldControlProps.description}\n      >\n        <div\n          data-spark-component=\"stepper\"\n          ref={forwardedRef}\n          className={cx(inputGroupStyles({ disabled, readOnly }), stepperProps.className)}\n        >\n          {children}\n        </div>\n      </NumberField.Root>\n    </StepperContext.Provider>\n  )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n  const context = useContext(StepperContext)\n\n  if (!context) {\n    throw Error('useStepperContext must be used within a Stepper provider')\n  }\n\n  return context\n}\n","import { NumberField } from '@base-ui/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cx } from 'class-variance-authority'\nimport { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  disabled,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const { fieldId, state } = useStepperContext()\n\n  return (\n    <NumberField.Increment\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n        const isInactive = isDisabled || isReadOnly\n\n        return (\n          <div\n            className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n            data-spark-component=\"stepper-increment-button\"\n          >\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={cx(\n                'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n                'rounded-l-0! -ml-px rounded-r-lg',\n                state === 'error' && 'border-error',\n                state === 'alert' && 'border-alert',\n                state === 'success' && 'border-success',\n                !state && 'border-outline',\n                className\n              )}\n              {...rest}\n              {...buttonProps}\n              aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n              aria-controls={fieldId}\n              disabled={isDisabled}\n            >\n              {children || (\n                <Icon>\n                  <Plus />\n                </Icon>\n              )}\n            </IconButton>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\nconst DecrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  disabled,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const { fieldId, state } = useStepperContext()\n\n  return (\n    <NumberField.Decrement\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n        const isInactive = isDisabled || isReadOnly\n\n        return (\n          <div\n            className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n            data-spark-component=\"stepper-decrement-button\"\n          >\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={cx(\n                'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n                'rounded-r-0! -mr-px rounded-l-lg',\n                state === 'error' && 'border-error',\n                state === 'alert' && 'border-alert',\n                state === 'success' && 'border-success',\n                !state && 'border-outline',\n                className\n              )}\n              {...rest}\n              {...buttonProps}\n              aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n              aria-controls={fieldId}\n              disabled={isDisabled}\n            >\n              {children || (\n                <Icon>\n                  <Minus />\n                </Icon>\n              )}\n            </IconButton>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\nexport const StepperIncrementButton = IncrementButton\n\nexport const StepperDecrementButton = DecrementButton\n\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { NumberField } from '@base-ui/react/number-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n  const { inputRef, fieldId, fieldLabelId, fieldIsInvalid, fieldIsRequired, ariaLabel } =\n    useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  // Only use aria-label if not wrapped in a FormField with a label (fieldLabelId would be set by FormField.Label)\n  const hasFormFieldLabel = !!fieldLabelId\n\n  return (\n    <div className=\"relative inline-flex w-full\">\n      <NumberField.Input\n        render={inputProps => {\n          // Determine required attribute\n          let required: boolean | undefined = undefined\n          if (fieldIsRequired !== undefined) {\n            required = fieldIsRequired\n          } else if ('required' in inputProps) {\n            required = (inputProps as any).required\n          }\n\n          // Determine aria-invalid attribute\n          const ariaInvalid =\n            fieldIsInvalid !== undefined ? fieldIsInvalid : inputProps['aria-invalid']\n\n          return (\n            <SparkInput\n              ref={ref}\n              {...inputProps}\n              {...remainingProps}\n              id={fieldId || inputProps.id}\n              required={required}\n              aria-invalid={ariaInvalid}\n              aria-label={hasFormFieldLabel ? undefined : ariaLabel}\n              className={`min-w-sz-56 text-center rounded-none! ${className}`}\n            />\n          )\n        }}\n      />\n    </div>\n  )\n}\n\nexport const StepperInput = Input\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n  StepperDecrementButton as DecrementButton,\n  StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\n/**\n * A numeric input component with increment and decrement buttons for adjusting values.\n */\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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"}

package/dist/stepper/index.mjs

@@ -11,8 +11,8 @@ import { NumberField as f } from "@base-ui/react/number-field";
 import { Plus as p } from "@spark-ui/icons/Plus";
 //#region src/stepper/Stepper.tsx
 var m = a(null), h = ({ children: e, formatOptions: t, minValue: n, maxValue: a, ref: o, onValueChange: l, locale: d = "fr", name: p, ...h }) => {
-	let g = s(null), _ = u(), v = s(null), y = _.name ?? p, b = _.disabled ?? h.disabled, x = _.readOnly ?? h.readOnly, S = _.isRequired ?? h.required, C = (e) => {
-		l && e !== null && e !== v.current && (v.current = e, l(e));
+	let g = s(null), _ = u(), v = s(h.value ?? h.defaultValue ?? null), y = _.name ?? p, b = _.disabled ?? h.disabled, x = _.readOnly ?? h.readOnly, S = _.isRequired ?? h.required, C = (e) => {
+		l && e !== v.current && (v.current = e, l(e));
 	}, { "aria-label": w, ...T } = h;
 	return /* @__PURE__ */ c(m.Provider, {
 		value: {

package/dist/stepper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { inputGroupStyles } from '../input/InputGroup.styles'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n  inputRef: RefObject<HTMLInputElement | null>\n  fieldId?: string\n  fieldLabelId?: string\n  fieldIsInvalid?: boolean\n  fieldIsRequired?: boolean\n  state?: 'error' | 'alert' | 'success'\n  ariaLabel?: string\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nexport const Stepper = ({\n  children,\n  formatOptions,\n  minValue,\n  maxValue,\n  ref: forwardedRef,\n  onValueChange,\n  locale = 'fr',\n  name: nameProp,\n  ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const formFieldControlProps = useFormFieldControl()\n  const lastCommittedValueRef = useRef<number | null>(null)\n\n  const name = formFieldControlProps.name ?? nameProp\n  const disabled = formFieldControlProps.disabled ?? stepperProps.disabled\n  const readOnly = formFieldControlProps.readOnly ?? stepperProps.readOnly\n  const required = formFieldControlProps.isRequired ?? stepperProps.required\n\n  // Base UI calls onValueChange on every keystroke, but react-aria only called it on blur.\n  // We use onValueCommitted to preserve the old behavior where onValueChange is only called on blur for input changes,\n  // but immediately for button clicks.\n  const handleValueCommit = (value: number | null) => {\n    if (onValueChange && value !== null && value !== lastCommittedValueRef.current) {\n      lastCommittedValueRef.current = value\n      onValueChange(value)\n    }\n  }\n\n  // Extract aria-label to pass to input, not to NumberField.Root\n  const { 'aria-label': ariaLabel, ...restStepperProps } = stepperProps\n\n  return (\n    <StepperContext.Provider\n      value={{\n        inputRef,\n        fieldId: formFieldControlProps.id,\n        fieldLabelId: formFieldControlProps.labelId,\n        fieldIsInvalid: formFieldControlProps.isInvalid,\n        fieldIsRequired: required,\n        state: stepperProps.state,\n        ariaLabel,\n      }}\n    >\n      <NumberField.Root\n        {...restStepperProps}\n        format={formatOptions}\n        min={minValue}\n        max={maxValue}\n        locale={locale}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        name={name}\n        inputRef={inputRef}\n        onValueCommitted={handleValueCommit}\n        aria-describedby={formFieldControlProps.description}\n      >\n        <div\n          data-spark-component=\"stepper\"\n          ref={forwardedRef}\n          className={cx(inputGroupStyles({ disabled, readOnly }), stepperProps.className)}\n        >\n          {children}\n        </div>\n      </NumberField.Root>\n    </StepperContext.Provider>\n  )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n  const context = useContext(StepperContext)\n\n  if (!context) {\n    throw Error('useStepperContext must be used within a Stepper provider')\n  }\n\n  return context\n}\n","import { NumberField } from '@base-ui/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cx } from 'class-variance-authority'\nimport { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  disabled,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const { fieldId, state } = useStepperContext()\n\n  return (\n    <NumberField.Increment\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n        const isInactive = isDisabled || isReadOnly\n\n        return (\n          <div\n            className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n            data-spark-component=\"stepper-increment-button\"\n          >\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={cx(\n                'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n                'rounded-l-0! -ml-px rounded-r-lg',\n                state === 'error' && 'border-error',\n                state === 'alert' && 'border-alert',\n                state === 'success' && 'border-success',\n                !state && 'border-outline',\n                className\n              )}\n              {...rest}\n              {...buttonProps}\n              aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n              aria-controls={fieldId}\n              disabled={isDisabled}\n            >\n              {children || (\n                <Icon>\n                  <Plus />\n                </Icon>\n              )}\n            </IconButton>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\nconst DecrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  disabled,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const { fieldId, state } = useStepperContext()\n\n  return (\n    <NumberField.Decrement\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n        const isInactive = isDisabled || isReadOnly\n\n        return (\n          <div\n            className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n            data-spark-component=\"stepper-decrement-button\"\n          >\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={cx(\n                'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n                'rounded-r-0! -mr-px rounded-l-lg',\n                state === 'error' && 'border-error',\n                state === 'alert' && 'border-alert',\n                state === 'success' && 'border-success',\n                !state && 'border-outline',\n                className\n              )}\n              {...rest}\n              {...buttonProps}\n              aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n              aria-controls={fieldId}\n              disabled={isDisabled}\n            >\n              {children || (\n                <Icon>\n                  <Minus />\n                </Icon>\n              )}\n            </IconButton>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\nexport const StepperIncrementButton = IncrementButton\n\nexport const StepperDecrementButton = DecrementButton\n\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { NumberField } from '@base-ui/react/number-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n  const { inputRef, fieldId, fieldLabelId, fieldIsInvalid, fieldIsRequired, ariaLabel } =\n    useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  // Only use aria-label if not wrapped in a FormField with a label (fieldLabelId would be set by FormField.Label)\n  const hasFormFieldLabel = !!fieldLabelId\n\n  return (\n    <div className=\"relative inline-flex w-full\">\n      <NumberField.Input\n        render={inputProps => {\n          // Determine required attribute\n          let required: boolean | undefined = undefined\n          if (fieldIsRequired !== undefined) {\n            required = fieldIsRequired\n          } else if ('required' in inputProps) {\n            required = (inputProps as any).required\n          }\n\n          // Determine aria-invalid attribute\n          const ariaInvalid =\n            fieldIsInvalid !== undefined ? fieldIsInvalid : inputProps['aria-invalid']\n\n          return (\n            <SparkInput\n              ref={ref}\n              {...inputProps}\n              {...remainingProps}\n              id={fieldId || inputProps.id}\n              required={required}\n              aria-invalid={ariaInvalid}\n              aria-label={hasFormFieldLabel ? undefined : ariaLabel}\n              className={`min-w-sz-56 text-center rounded-none! ${className}`}\n            />\n          )\n        }}\n      />\n    </div>\n  )\n}\n\nexport const StepperInput = Input\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n  StepperDecrementButton as DecrementButton,\n  StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\n/**\n * A numeric input component with increment and decrement buttons for adjusting values.\n */\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { inputGroupStyles } from '../input/InputGroup.styles'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n  inputRef: RefObject<HTMLInputElement | null>\n  fieldId?: string\n  fieldLabelId?: string\n  fieldIsInvalid?: boolean\n  fieldIsRequired?: boolean\n  state?: 'error' | 'alert' | 'success'\n  ariaLabel?: string\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nexport const Stepper = ({\n  children,\n  formatOptions,\n  minValue,\n  maxValue,\n  ref: forwardedRef,\n  onValueChange,\n  locale = 'fr',\n  name: nameProp,\n  ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const formFieldControlProps = useFormFieldControl()\n  const lastCommittedValueRef = useRef<number | null>(\n    stepperProps.value ?? stepperProps.defaultValue ?? null\n  )\n\n  const name = formFieldControlProps.name ?? nameProp\n  const disabled = formFieldControlProps.disabled ?? stepperProps.disabled\n  const readOnly = formFieldControlProps.readOnly ?? stepperProps.readOnly\n  const required = formFieldControlProps.isRequired ?? stepperProps.required\n\n  // Base UI calls onValueChange on every keystroke, but react-aria only called it on blur.\n  // We use onValueCommitted to preserve the old behavior where onValueChange is only called on blur for input changes,\n  // but immediately for button clicks.\n  const handleValueCommit = (value: number | null) => {\n    // Allow null values to be propagated (when input is cleared)\n    // This is necessary for controlled mode and React Hook Form validation\n    if (onValueChange && value !== lastCommittedValueRef.current) {\n      lastCommittedValueRef.current = value\n      onValueChange(value)\n    }\n  }\n\n  // Extract aria-label to pass to input, not to NumberField.Root\n  const { 'aria-label': ariaLabel, ...restStepperProps } = stepperProps\n\n  return (\n    <StepperContext.Provider\n      value={{\n        inputRef,\n        fieldId: formFieldControlProps.id,\n        fieldLabelId: formFieldControlProps.labelId,\n        fieldIsInvalid: formFieldControlProps.isInvalid,\n        fieldIsRequired: required,\n        state: stepperProps.state,\n        ariaLabel,\n      }}\n    >\n      <NumberField.Root\n        {...restStepperProps}\n        format={formatOptions}\n        min={minValue}\n        max={maxValue}\n        locale={locale}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        name={name}\n        inputRef={inputRef}\n        onValueCommitted={handleValueCommit}\n        aria-describedby={formFieldControlProps.description}\n      >\n        <div\n          data-spark-component=\"stepper\"\n          ref={forwardedRef}\n          className={cx(inputGroupStyles({ disabled, readOnly }), stepperProps.className)}\n        >\n          {children}\n        </div>\n      </NumberField.Root>\n    </StepperContext.Provider>\n  )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n  const context = useContext(StepperContext)\n\n  if (!context) {\n    throw Error('useStepperContext must be used within a Stepper provider')\n  }\n\n  return context\n}\n","import { NumberField } from '@base-ui/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cx } from 'class-variance-authority'\nimport { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  disabled,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const { fieldId, state } = useStepperContext()\n\n  return (\n    <NumberField.Increment\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n        const isInactive = isDisabled || isReadOnly\n\n        return (\n          <div\n            className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n            data-spark-component=\"stepper-increment-button\"\n          >\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={cx(\n                'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n                'rounded-l-0! -ml-px rounded-r-lg',\n                state === 'error' && 'border-error',\n                state === 'alert' && 'border-alert',\n                state === 'success' && 'border-success',\n                !state && 'border-outline',\n                className\n              )}\n              {...rest}\n              {...buttonProps}\n              aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n              aria-controls={fieldId}\n              disabled={isDisabled}\n            >\n              {children || (\n                <Icon>\n                  <Plus />\n                </Icon>\n              )}\n            </IconButton>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\nconst DecrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  disabled,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const { fieldId, state } = useStepperContext()\n\n  return (\n    <NumberField.Decrement\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        const isReadOnly = 'readOnly' in buttonProps && (buttonProps as any).readOnly\n        const isInactive = isDisabled || isReadOnly\n\n        return (\n          <div\n            className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}\n            data-spark-component=\"stepper-decrement-button\"\n          >\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={cx(\n                'overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0',\n                'rounded-r-0! -mr-px rounded-l-lg',\n                state === 'error' && 'border-error',\n                state === 'alert' && 'border-alert',\n                state === 'success' && 'border-success',\n                !state && 'border-outline',\n                className\n              )}\n              {...rest}\n              {...buttonProps}\n              aria-label={rest['aria-label'] || (buttonProps['aria-label'] as string)}\n              aria-controls={fieldId}\n              disabled={isDisabled}\n            >\n              {children || (\n                <Icon>\n                  <Minus />\n                </Icon>\n              )}\n            </IconButton>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\nexport const StepperIncrementButton = IncrementButton\n\nexport const StepperDecrementButton = DecrementButton\n\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { NumberField } from '@base-ui/react/number-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n  const { inputRef, fieldId, fieldLabelId, fieldIsInvalid, fieldIsRequired, ariaLabel } =\n    useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  // Only use aria-label if not wrapped in a FormField with a label (fieldLabelId would be set by FormField.Label)\n  const hasFormFieldLabel = !!fieldLabelId\n\n  return (\n    <div className=\"relative inline-flex w-full\">\n      <NumberField.Input\n        render={inputProps => {\n          // Determine required attribute\n          let required: boolean | undefined = undefined\n          if (fieldIsRequired !== undefined) {\n            required = fieldIsRequired\n          } else if ('required' in inputProps) {\n            required = (inputProps as any).required\n          }\n\n          // Determine aria-invalid attribute\n          const ariaInvalid =\n            fieldIsInvalid !== undefined ? fieldIsInvalid : inputProps['aria-invalid']\n\n          return (\n            <SparkInput\n              ref={ref}\n              {...inputProps}\n              {...remainingProps}\n              id={fieldId || inputProps.id}\n              required={required}\n              aria-invalid={ariaInvalid}\n              aria-label={hasFormFieldLabel ? undefined : ariaLabel}\n              className={`min-w-sz-56 text-center rounded-none! ${className}`}\n            />\n          )\n        }}\n      />\n    </div>\n  )\n}\n\nexport const StepperInput = Input\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n  StepperDecrementButton as DecrementButton,\n  StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\n/**\n * A numeric input component with increment and decrement buttons for adjusting values.\n */\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.5.6-beta.3",
+  "version": "17.5.6-beta.4",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "1.0.0",
-    "@spark-ui/hooks": "17.5.6-beta.3",
-    "@spark-ui/icons": "17.5.6-beta.3",
-    "@spark-ui/internal-utils": "17.5.6-beta.3",
+    "@spark-ui/hooks": "17.5.6-beta.4",
+    "@spark-ui/icons": "17.5.6-beta.4",
+    "@spark-ui/internal-utils": "17.5.6-beta.4",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -62,7 +62,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.5.6-beta.3",
+    "@spark-ui/theme-utils": "17.5.6-beta.4",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"