@spark-ui/components 17.5.6-beta.0 → 17.5.6-beta.1

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

@@ -1,9 +1,14 @@
 import { PropsWithChildren, RefObject } from 'react';
-import { StepperProps, UseStepperReturn } from './types';
+import { StepperProps } from './types';
+interface StepperContextValue {
+    inputRef: RefObject<HTMLInputElement | null>;
+    fieldId?: string;
+    fieldIsInvalid?: boolean;
+    fieldIsRequired?: boolean;
+}
 export declare const Stepper: {
-    ({ children, formatOptions, minValue, maxValue, ref: forwardedRef, ...stepperProps }: PropsWithChildren<StepperProps>): import("react/jsx-runtime").JSX.Element;
+    ({ children, formatOptions, minValue, maxValue, ref: forwardedRef, onValueChange, locale, name: nameProp, ...stepperProps }: PropsWithChildren<StepperProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export declare const useStepperContext: () => Omit<UseStepperReturn, "groupProps"> & {
-    inputRef: RefObject<HTMLInputElement | null>;
-};
+export declare const useStepperContext: () => StepperContextValue;
+export {};

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

@@ -1,13 +1,13 @@
 import { PropsWithChildren } from 'react';
 import { StepperButtonProps } from './types';
 export declare const StepperIncrementButton: {
-    ({ children, design, intent, className, ref: forwardedRef, ...rest }: PropsWithChildren<StepperButtonProps>): import("react/jsx-runtime").JSX.Element;
+    ({ children, design, intent, className, ref: forwardedRef, disabled, ...rest }: PropsWithChildren<StepperButtonProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     id: string;
 };
 export declare const StepperDecrementButton: {
-    ({ children, design, intent, className, ref: forwardedRef, ...rest }: PropsWithChildren<StepperButtonProps>): import("react/jsx-runtime").JSX.Element;
+    ({ children, design, intent, className, ref: forwardedRef, disabled, ...rest }: PropsWithChildren<StepperButtonProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     id: string;

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

@@ -1,46 +1,49 @@
-import { AriaButtonOptions } from '@react-aria/button';
-import { NumberFieldAria } from '@react-aria/numberfield';
-import { NumberFieldStateOptions } from '@react-stately/numberfield';
-import { AriaNumberFieldProps } from '@react-types/numberfield';
-import { Ref, RefObject } from 'react';
+import { NumberField } from '@base-ui/react/number-field';
+import { ComponentProps, Ref, RefObject } from 'react';
 import { IconButtonProps } from '../icon-button';
 import { InputGroupProps, InputProps } from '../input';
-/**
- * As we're using React Spectrum library to build this component, we also want
- * to build our typing uppon theirs.
- * Still, we have to adapt it to avoid exposing useless props.
- */
-export type StepperButtonProps = Omit<IconButtonProps, 'shape' | 'size' | 'disabled' | 'asChild' | 'isLoading' | 'loadingLabel'> & Omit<AriaButtonOptions<'button'>, 'elementType' | 'href' | 'target' | 'isDisabled' | 'excludeFromTabOrder' | 'aria-label' | 'preventFocusOnPress'> & {
+export type StepperButtonProps = Omit<IconButtonProps, 'shape' | 'size' | 'disabled' | 'asChild' | 'isLoading' | 'loadingLabel'> & {
     disabled?: boolean;
     ref?: Ref<HTMLButtonElement>;
 };
-type SpectrumNumberFieldPropsFilter = 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'validationState' | 'validationBehavior' | 'validate' | 'label' | 'description' | 'errorMessage' | 'isWheelDisabled' | 'id' | 'onCopy' | 'onCut' | 'onPaste' | 'onCompositionStart' | 'onCompositionEnd' | 'onCompositionUpdate' | 'onSelect' | 'onBeforeInput' | 'onInput';
-export interface UseStepperArgs extends Omit<Omit<NumberFieldStateOptions, 'locale'> & Omit<AriaNumberFieldProps, 'incrementAriaLabel' | 'decrementAriaLabel'>, SpectrumNumberFieldPropsFilter> {
+export interface UseStepperArgs extends Omit<ComponentProps<typeof NumberField.Root>, 'render' | 'children' | 'onValueChange' | 'onValueCommitted' | 'allowWheelScrub' | 'allowOutOfRange' | 'snapOnStep' | 'smallStep' | 'largeStep' | 'inputRef' | 'form' | 'min' | 'max' | 'format'> {
     inputRef: RefObject<HTMLInputElement | null>;
     /**
-     * Sets the component as interactive or not.
+     * The minimum allowed value.
      */
-    disabled?: boolean;
+    minValue?: number;
+    /**
+     * The maximum allowed value.
+     */
+    maxValue?: number;
     /**
-     * Sets the component as editable or not.
+     * Formatting options for number display.
      */
-    readOnly?: boolean;
+    formatOptions?: Intl.NumberFormatOptions;
     /**
-     * Sets the component as mandatory for form validation.
+     * Callback fired when the value changes.
      */
-    required?: boolean;
+    onValueChange?: (value: number) => void;
     /**
      * The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale.
      * @default 'fr'
      */
     locale?: string;
 }
-export type UseStepperReturn = Pick<NumberFieldAria, 'groupProps' | 'inputProps' | 'incrementButtonProps' | 'decrementButtonProps'>;
-export type StepperProps = Omit<Omit<UseStepperArgs, 'inputRef' | 'aria-label'> & Omit<InputGroupProps, 'onClear'>, 'onChange'> & {
-    onValueChange?: (e: number) => void;
+export interface UseStepperReturn {
+    groupProps: ComponentProps<typeof NumberField.Group>;
+    inputProps: ComponentProps<typeof NumberField.Input>;
+    incrementButtonProps: ComponentProps<typeof NumberField.Increment>;
+    decrementButtonProps: ComponentProps<typeof NumberField.Decrement>;
+}
+export type StepperProps = Omit<Omit<UseStepperArgs, 'inputRef'> & Omit<InputGroupProps, 'onClear'>, 'id' | 'name'> & {
     ref?: Ref<HTMLDivElement>;
+    /**
+     * The name of the stepper. Submitted with its owning form as part of a name/value pair.
+     * If wrapped with a FormField with a name, will be inherited from it.
+     */
+    name?: string;
 };
 export type StepperInputProps = Omit<InputProps, 'asChild'> & {
     ref?: Ref<HTMLInputElement>;
 };
-export {};

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

@@ -1,2 +1,2 @@
 import { UseStepperArgs, UseStepperReturn } from './types';
-export declare const useStepper: ({ inputRef, locale, ...rest }: UseStepperArgs) => UseStepperReturn;
+export declare const useStepper: (_args: UseStepperArgs) => UseStepperReturn;

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-DaShg4eE.js`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-merge-refs`),o=require(`@spark-ui/components/form-field`),s=require(`@spark-ui/icons/Minus`),c=require(`@react-aria/numberfield`),l=require(`@react-stately/numberfield`),u=require(`@react-aria/button`),d=require(`@spark-ui/icons/Plus`);var f=({inputRef:e,locale:t=`fr`,...n})=>{let r=(0,l.useNumberFieldState)({...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required,locale:t}),{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}=(0,c.useNumberField)({isWheelDisabled:!1,...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required},r,e);return{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}},p=(0,r.createContext)(null),m=({children:e,formatOptions:t,minValue:a,maxValue:s,ref:c,...l})=>{let u=(0,r.useRef)(null),{groupProps:d,inputProps:m,incrementButtonProps:h,decrementButtonProps:g}=f({...l,...`value`in l&&{value:l.value??NaN},onChange:l.onValueChange,formatOptions:t,minValue:a,maxValue:s,inputRef:u}),_=(0,o.useFormFieldControl)(),v=!!_.id,y={...h,...v&&{"aria-controls":_.id}},b={...g,...v&&{"aria-controls":_.id}},x={...m,...v&&{id:_.id,required:_.isRequired,"aria-invalid":_.isInvalid?!0:void 0}},{onValueChange:S,...C}=l;return(0,i.jsx)(p.Provider,{value:{incrementButtonProps:y,decrementButtonProps:b,inputProps:x,inputRef:u},children:(0,i.jsx)(n.t,{...C,...d,"data-spark-component":`stepper`,ref:c,children:e})})};m.displayName=`Stepper`;var h=()=>{let e=(0,r.useContext)(p);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},g=({children:a,design:o=`ghost`,intent:s=`neutral`,className:c,ref:l,...f})=>{let p=(0,r.useRef)(null),m=l&&typeof l!=`function`?l:p,{incrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.TrailingAddon,{asChild:!0,"data-spark-component":`stepper-increment-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:s,className:c,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(d.Plus,{})})})})},_=({children:a,design:o=`ghost`,intent:c=`neutral`,className:l,ref:d,...f})=>{let p=(0,r.useRef)(null),m=d&&typeof d!=`function`?d:p,{decrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.LeadingAddon,{asChild:!0,"data-spark-component":`stepper-decrement-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:c,className:l,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(s.Minus,{})})})})},v=Object.assign(g,{id:`TrailingAddon`}),y=Object.assign(_,{id:`LeadingAddon`});g.displayName=`Stepper.DecrementButton`,_.displayName=`Stepper.DecrementButton`;var b=({ref:e,...t})=>{let{inputRef:r,inputProps:o}=h(),s=(0,a.useMergeRefs)(e,r),{className:c=``,...l}=t;return(0,i.jsx)(n.n,{ref:s,...l,...o,className:`min-w-sz-56 text-center ${c}`})},x=Object.assign(b,{id:`Input`});b.displayName=`Stepper.Input`;var S=Object.assign(m,{IncrementButton:v,DecrementButton:y,Input:x});S.displayName=`Stepper`,v.displayName=`Stepper.IncrementButton`,y.displayName=`Stepper.DecrementButton`,x.displayName=`Stepper.Input`,exports.Stepper=S;
+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-DaShg4eE.js`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-merge-refs`),o=require(`@spark-ui/components/form-field`),s=require(`@spark-ui/icons/Minus`),c=require(`@base-ui/react/number-field`),l=require(`@spark-ui/icons/Plus`);var u=(0,r.createContext)(null),d=({children:e,formatOptions:t,minValue:a,maxValue:s,ref:l,onValueChange:d,locale:f=`fr`,name:p,...m})=>{let h=(0,r.useRef)(null),g=(0,o.useFormFieldControl)(),_=g.name??p,v=g.disabled??m.disabled,y=g.readOnly??m.readOnly,b=g.isRequired??m.required,x=e=>{d&&e!==null&&d(e)};return(0,i.jsx)(u.Provider,{value:{inputRef:h,fieldId:g.id,fieldIsInvalid:g.isInvalid,fieldIsRequired:b},children:(0,i.jsx)(c.NumberField.Root,{...m,format:t,min:a,max:s,locale:f,disabled:v,readOnly:y,required:b,name:_,inputRef:h,onValueChange:x,"aria-describedby":g.description,children:(0,i.jsx)(n.t,{"data-spark-component":`stepper`,ref:l,state:m.state,disabled:v,readOnly:y,children:(0,i.jsx)(c.NumberField.Group,{children:e})})})})};d.displayName=`Stepper`;var f=()=>{let e=(0,r.useContext)(u);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},p=({children:r,design:a=`ghost`,intent:o=`neutral`,className:s,ref:u,disabled:d,...p})=>{let{fieldId:m}=f();return(0,i.jsx)(c.NumberField.Increment,{render:c=>{let f=d||`disabled`in c&&c.disabled;return(0,i.jsx)(n.t.TrailingAddon,{asChild:!0,"data-spark-component":`stepper-increment-button`,children:(0,i.jsx)(t.t,{ref:u,design:a,intent:o,className:s,...p,...c,"aria-label":p[`aria-label`]||c[`aria-label`],"aria-controls":m,disabled:f,children:r||(0,i.jsx)(e.t,{children:(0,i.jsx)(l.Plus,{})})})})}})},m=({children:r,design:a=`ghost`,intent:o=`neutral`,className:l,ref:u,disabled:d,...p})=>{let{fieldId:m}=f();return(0,i.jsx)(c.NumberField.Decrement,{render:c=>{let f=d||`disabled`in c&&c.disabled;return(0,i.jsx)(n.t.LeadingAddon,{asChild:!0,"data-spark-component":`stepper-decrement-button`,children:(0,i.jsx)(t.t,{ref:u,design:a,intent:o,className:l,...p,...c,"aria-label":p[`aria-label`]||c[`aria-label`],"aria-controls":m,disabled:f,children:r||(0,i.jsx)(e.t,{children:(0,i.jsx)(s.Minus,{})})})})}})},h=Object.assign(p,{id:`TrailingAddon`}),g=Object.assign(m,{id:`LeadingAddon`});p.displayName=`Stepper.IncrementButton`,m.displayName=`Stepper.DecrementButton`;var _=({ref:e,...t})=>{let{inputRef:r,fieldId:o,fieldIsInvalid:s,fieldIsRequired:l}=f(),u=(0,a.useMergeRefs)(e,r),{className:d=``,...p}=t;return(0,i.jsx)(c.NumberField.Input,{render:e=>{let t;l===void 0?`required`in e&&(t=e.required):t=l;let r=s===void 0?e[`aria-invalid`]:s;return(0,i.jsx)(n.n,{ref:u,...e,...p,id:o||e.id,required:t,"aria-invalid":r,className:`min-w-sz-56 text-center ${d}`})}})},v=Object.assign(_,{id:`Input`});_.displayName=`Stepper.Input`;var y=Object.assign(d,{IncrementButton:h,DecrementButton:g,Input:v});y.displayName=`Stepper`,h.displayName=`Stepper.IncrementButton`,g.displayName=`Stepper.DecrementButton`,v.displayName=`Stepper.Input`,exports.Stepper=y;
 //# sourceMappingURL=index.js.map

package/dist/stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/stepper/useStepper.ts","../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { useNumberField } from '@react-aria/numberfield'\nimport { useNumberFieldState } from '@react-stately/numberfield'\n\nimport type { UseStepperArgs, UseStepperReturn } from './types'\n\nexport const useStepper = ({\n  inputRef,\n  locale = 'fr',\n  ...rest\n}: UseStepperArgs): UseStepperReturn => {\n  const state = useNumberFieldState({\n    ...rest,\n    isDisabled: rest.disabled,\n    isReadOnly: rest.readOnly,\n    isRequired: rest.required,\n    locale,\n  })\n\n  const { groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(\n    {\n      isWheelDisabled: false,\n      ...rest,\n      isDisabled: rest.disabled,\n      isReadOnly: rest.readOnly,\n      isRequired: rest.required,\n    },\n    state,\n    inputRef\n  )\n\n  return {\n    groupProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n  }\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { InputGroup } from '../input'\nimport type { StepperProps, UseStepperReturn } from './types'\nimport { useStepper } from './useStepper'\n\nconst StepperContext = createContext<\n  (Omit<UseStepperReturn, 'groupProps'> & { inputRef: RefObject<HTMLInputElement | null> }) | null\n>(null)\n\nexport const Stepper = ({\n  children,\n  formatOptions,\n  minValue,\n  maxValue,\n  ref: forwardedRef,\n  ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const {\n    groupProps,\n    inputProps: _inputProps,\n    incrementButtonProps: _incrementButtonProps,\n    decrementButtonProps: _decrementButtonProps,\n  } = useStepper({\n    ...{\n      ...stepperProps,\n      /**\n       * To enable the possibility to init the stepper with empty (undefined) value,\n       * we need to force the empty value to NaN.\n       * Cf. https://github.com/adobe/react-spectrum/issues/5524\n       */\n      ...('value' in stepperProps && { value: stepperProps.value ?? NaN }),\n      onChange: stepperProps.onValueChange,\n    },\n    formatOptions,\n    minValue,\n    maxValue,\n    inputRef,\n  })\n\n  const formFieldControlProps = useFormFieldControl()\n  const isWrappedInFormField = !!formFieldControlProps.id\n\n  const incrementButtonProps = {\n    ..._incrementButtonProps,\n    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),\n  }\n\n  const decrementButtonProps = {\n    ..._decrementButtonProps,\n    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),\n  }\n\n  const inputProps = {\n    ..._inputProps,\n    ...(isWrappedInFormField && {\n      id: formFieldControlProps.id,\n      required: formFieldControlProps.isRequired,\n      'aria-invalid': formFieldControlProps.isInvalid ? true : undefined,\n    }),\n  }\n\n  const { onValueChange: _, ...remainingStepperProps } = stepperProps\n\n  return (\n    <StepperContext.Provider\n      value={{ incrementButtonProps, decrementButtonProps, inputProps, inputRef }}\n    >\n      <InputGroup\n        {...remainingStepperProps}\n        {...groupProps}\n        data-spark-component=\"stepper\"\n        ref={forwardedRef}\n      >\n        {children}\n      </InputGroup>\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 { useButton } from '@react-aria/button'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { type PropsWithChildren, useRef } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { InputGroup } from '../input'\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  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const innerRef = useRef<HTMLButtonElement>(null)\n  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef\n\n  const { incrementButtonProps } = useStepperContext()\n  const { buttonProps } = useButton({ ...incrementButtonProps, ...rest }, ref)\n\n  return (\n    <InputGroup.TrailingAddon asChild data-spark-component=\"stepper-increment-button\">\n      <IconButton\n        ref={ref}\n        design={design}\n        intent={intent}\n        className={className}\n        aria-label={buttonProps['aria-label'] as string}\n        {...buttonProps}\n        disabled={rest.disabled || buttonProps.disabled}\n      >\n        {children || (\n          <Icon>\n            <Plus />\n          </Icon>\n        )}\n      </IconButton>\n    </InputGroup.TrailingAddon>\n  )\n}\n\nconst DecrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const innerRef = useRef<HTMLButtonElement>(null)\n  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef\n\n  const { decrementButtonProps } = useStepperContext()\n  const { buttonProps } = useButton({ ...decrementButtonProps, ...rest }, ref)\n\n  return (\n    <InputGroup.LeadingAddon asChild data-spark-component=\"stepper-decrement-button\">\n      <IconButton\n        ref={ref}\n        design={design}\n        intent={intent}\n        className={className}\n        aria-label={buttonProps['aria-label'] as string}\n        {...buttonProps}\n        disabled={rest.disabled || buttonProps.disabled}\n      >\n        {children || (\n          <Icon>\n            <Minus />\n          </Icon>\n        )}\n      </IconButton>\n    </InputGroup.LeadingAddon>\n  )\n}\n\nexport const StepperIncrementButton = Object.assign(IncrementButton, {\n  id: 'TrailingAddon',\n})\n\nexport const StepperDecrementButton = Object.assign(DecrementButton, {\n  id: 'LeadingAddon',\n})\n\nIncrementButton.displayName = 'Stepper.DecrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { 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, inputProps } = useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  return (\n    <SparkInput\n      ref={ref}\n      {...remainingProps}\n      {...inputProps}\n      className={`min-w-sz-56 text-center ${className}`}\n    />\n  )\n}\n\nexport const StepperInput = Object.assign(Input, {\n  id: 'Input',\n})\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 { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { InputGroup } from '../input'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n  inputRef: RefObject<HTMLInputElement | null>\n  fieldId?: string\n  fieldIsInvalid?: boolean\n  fieldIsRequired?: boolean\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\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  const handleValueChange = (value: number | null) => {\n    if (onValueChange && value !== null) {\n      onValueChange(value)\n    }\n  }\n\n  return (\n    <StepperContext.Provider\n      value={{\n        inputRef,\n        fieldId: formFieldControlProps.id,\n        fieldIsInvalid: formFieldControlProps.isInvalid,\n        fieldIsRequired: required,\n      }}\n    >\n      <NumberField.Root\n        {...stepperProps}\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        onValueChange={handleValueChange}\n        aria-describedby={formFieldControlProps.description}\n      >\n        <InputGroup\n          data-spark-component=\"stepper\"\n          ref={forwardedRef}\n          state={stepperProps.state}\n          disabled={disabled}\n          readOnly={readOnly}\n        >\n          <NumberField.Group>{children}</NumberField.Group>\n        </InputGroup>\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 { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { InputGroup } from '../input'\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 } = useStepperContext()\n\n  return (\n    <NumberField.Increment\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        return (\n          <InputGroup.TrailingAddon asChild data-spark-component=\"stepper-increment-button\">\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={className}\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          </InputGroup.TrailingAddon>\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 } = useStepperContext()\n\n  return (\n    <NumberField.Decrement\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        return (\n          <InputGroup.LeadingAddon asChild data-spark-component=\"stepper-decrement-button\">\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={className}\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          </InputGroup.LeadingAddon>\n        )\n      }}\n    />\n  )\n}\n\nexport const StepperIncrementButton = Object.assign(IncrementButton, {\n  id: 'TrailingAddon',\n})\n\nexport const StepperDecrementButton = Object.assign(DecrementButton, {\n  id: 'LeadingAddon',\n})\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, fieldIsInvalid, fieldIsRequired } = useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  return (\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            className={`min-w-sz-56 text-center ${className}`}\n          />\n        )\n      }}\n    />\n  )\n}\n\nexport const StepperInput = Object.assign(Input, {\n  id: 'Input',\n})\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":"idAcA,IAAM,GAAA,EAAA,EAAA,eAA2D,KAAK,CAEzD,GAAW,CACtB,WACA,gBACA,WACA,WACA,IAAK,EACL,gBACA,SAAS,KACT,KAAM,EACN,GAAG,KACkC,CACrC,IAAM,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,GAAA,EAAA,EAAA,sBAA6C,CAE7C,EAAO,EAAsB,MAAQ,EACrC,EAAW,EAAsB,UAAY,EAAa,SAC1D,EAAW,EAAsB,UAAY,EAAa,SAC1D,EAAW,EAAsB,YAAc,EAAa,SAE5D,EAAqB,GAAyB,CAC9C,GAAiB,IAAU,MAC7B,EAAc,EAAM,EAIxB,OACE,EAAA,EAAA,KAAC,EAAe,SAAhB,CACE,MAAO,CACL,WACA,QAAS,EAAsB,GAC/B,eAAgB,EAAsB,UACtC,gBAAiB,EAClB,WAED,EAAA,EAAA,KAAC,EAAA,YAAY,KAAb,CACE,GAAI,EACJ,OAAQ,EACR,IAAK,EACL,IAAK,EACG,SACE,WACA,WACA,WACJ,OACI,WACV,cAAe,EACf,mBAAkB,EAAsB,sBAExC,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,uBAAqB,UACrB,IAAK,EACL,MAAO,EAAa,MACV,WACA,qBAEV,EAAA,EAAA,KAAC,EAAA,YAAY,MAAb,CAAoB,WAA6B,CAAA,CACtC,CAAA,CACI,CAAA,CACK,CAAA,EAI9B,EAAQ,YAAc,UAEtB,IAAa,MAA0B,CACrC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAe,CAE1C,GAAI,CAAC,EACH,MAAM,MAAM,2DAA2D,CAGzE,OAAO,GC5EH,GAAmB,CACvB,WACA,SAAS,QACT,SAAS,UACT,YACA,IAAK,EACL,WACA,GAAG,KACwC,CAC3C,GAAM,CAAE,WAAY,GAAmB,CAEvC,OACE,EAAA,EAAA,KAAC,EAAA,YAAY,UAAb,CACE,OAAQ,GAAe,CACrB,IAAM,EAAa,GAAa,aAAc,GAAgB,EAAoB,SAClF,OACE,EAAA,EAAA,KAAC,EAAA,EAAW,cAAZ,CAA0B,QAAA,GAAQ,uBAAqB,qCACrD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,IAAK,EACG,SACA,SACG,YACX,GAAI,EACJ,GAAI,EACJ,aAAY,EAAK,eAAkB,EAAY,cAC/C,gBAAe,EACf,SAAU,WAET,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,KAAD,EAAQ,CAAA,CACH,CAAA,CAEE,CAAA,CACY,CAAA,EAG/B,CAAA,EAIA,GAAmB,CACvB,WACA,SAAS,QACT,SAAS,UACT,YACA,IAAK,EACL,WACA,GAAG,KACwC,CAC3C,GAAM,CAAE,WAAY,GAAmB,CAEvC,OACE,EAAA,EAAA,KAAC,EAAA,YAAY,UAAb,CACE,OAAQ,GAAe,CACrB,IAAM,EAAa,GAAa,aAAc,GAAgB,EAAoB,SAClF,OACE,EAAA,EAAA,KAAC,EAAA,EAAW,aAAZ,CAAyB,QAAA,GAAQ,uBAAqB,qCACpD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,IAAK,EACG,SACA,SACG,YACX,GAAI,EACJ,GAAI,EACJ,aAAY,EAAK,eAAkB,EAAY,cAC/C,gBAAe,EACf,SAAU,WAET,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,MAAD,EAAS,CAAA,CACJ,CAAA,CAEE,CAAA,CACW,CAAA,EAG9B,CAAA,EAIO,EAAyB,OAAO,OAAO,EAAiB,CACnE,GAAI,gBACL,CAAC,CAEW,EAAyB,OAAO,OAAO,EAAiB,CACnE,GAAI,eACL,CAAC,CAEF,EAAgB,YAAc,0BAC9B,EAAgB,YAAc,0BC/F9B,IAAM,GAAS,CAAE,IAAK,EAAc,GAAG,KAA+B,CACpE,GAAM,CAAE,WAAU,UAAS,iBAAgB,mBAAoB,GAAmB,CAC5E,GAAA,EAAA,EAAA,cAAmB,EAAc,EAAS,CAC1C,CAAE,YAAY,GAAI,GAAG,GAAmB,EAE9C,OACE,EAAA,EAAA,KAAC,EAAA,YAAY,MAAb,CACE,OAAQ,GAAc,CAEpB,IAAI,EACA,IAAoB,IAAA,GAEb,aAAc,IACvB,EAAY,EAAmB,UAF/B,EAAW,EAMb,IAAM,EACJ,IAAmB,IAAA,GAA6B,EAAW,gBAA5B,EAEjC,OACE,EAAA,EAAA,KAAC,EAAA,EAAD,CACO,MACL,GAAI,EACJ,GAAI,EACJ,GAAI,GAAW,EAAW,GAChB,WACV,eAAc,EACd,UAAW,2BAA2B,IACtC,CAAA,EAGN,CAAA,EAIO,EAAe,OAAO,OAAO,EAAO,CAC/C,GAAI,QACL,CAAC,CAEF,EAAM,YAAc,gBCrCpB,IAAa,EAIT,OAAO,OAAO,EAAM,CAAE,gBAAA,EAAiB,gBAAA,EAAiB,MAAA,EAAO,CAAC,CAEpE,EAAQ,YAAc,UACtB,EAAgB,YAAc,0BAC9B,EAAgB,YAAc,0BAC9B,EAAM,YAAc"}

package/dist/stepper/index.mjs

@@ -6,136 +6,122 @@ import { jsx as s } from "react/jsx-runtime";
 import { useMergeRefs as c } from "@spark-ui/hooks/use-merge-refs";
 import { useFormFieldControl as l } from "@spark-ui/components/form-field";
 import { Minus as u } from "@spark-ui/icons/Minus";
-import { useNumberField as d } from "@react-aria/numberfield";
-import { useNumberFieldState as f } from "@react-stately/numberfield";
-import { useButton as p } from "@react-aria/button";
-import { Plus as m } from "@spark-ui/icons/Plus";
-//#region src/stepper/useStepper.ts
-var h = ({ inputRef: e, locale: t = "fr", ...n }) => {
-	let r = f({
-		...n,
-		isDisabled: n.disabled,
-		isReadOnly: n.readOnly,
-		isRequired: n.required,
-		locale: t
-	}), { groupProps: i, inputProps: a, incrementButtonProps: o, decrementButtonProps: s } = d({
-		isWheelDisabled: !1,
-		...n,
-		isDisabled: n.disabled,
-		isReadOnly: n.readOnly,
-		isRequired: n.required
-	}, r, e);
-	return {
-		groupProps: i,
-		inputProps: a,
-		incrementButtonProps: o,
-		decrementButtonProps: s
+import { NumberField as d } from "@base-ui/react/number-field";
+import { Plus as f } from "@spark-ui/icons/Plus";
+//#region src/stepper/Stepper.tsx
+var p = i(null), m = ({ children: e, formatOptions: t, minValue: n, maxValue: i, ref: a, onValueChange: c, locale: u = "fr", name: f, ...m }) => {
+	let h = o(null), g = l(), _ = g.name ?? f, v = g.disabled ?? m.disabled, y = g.readOnly ?? m.readOnly, b = g.isRequired ?? m.required, x = (e) => {
+		c && e !== null && c(e);
 	};
-}, g = i(null), _ = ({ children: e, formatOptions: t, minValue: n, maxValue: i, ref: a, ...c }) => {
-	let u = o(null), { groupProps: d, inputProps: f, incrementButtonProps: p, decrementButtonProps: m } = h({
-		...c,
-		..."value" in c && { value: c.value ?? NaN },
-		onChange: c.onValueChange,
-		formatOptions: t,
-		minValue: n,
-		maxValue: i,
-		inputRef: u
-	}), _ = l(), v = !!_.id, y = {
-		...p,
-		...v && { "aria-controls": _.id }
-	}, b = {
-		...m,
-		...v && { "aria-controls": _.id }
-	}, x = {
-		...f,
-		...v && {
-			id: _.id,
-			required: _.isRequired,
-			"aria-invalid": _.isInvalid ? !0 : void 0
-		}
-	}, { onValueChange: S, ...C } = c;
-	return /* @__PURE__ */ s(g.Provider, {
+	return /* @__PURE__ */ s(p.Provider, {
 		value: {
-			incrementButtonProps: y,
-			decrementButtonProps: b,
-			inputProps: x,
-			inputRef: u
+			inputRef: h,
+			fieldId: g.id,
+			fieldIsInvalid: g.isInvalid,
+			fieldIsRequired: b
 		},
-		children: /* @__PURE__ */ s(r, {
-			...C,
-			...d,
-			"data-spark-component": "stepper",
-			ref: a,
-			children: e
+		children: /* @__PURE__ */ s(d.Root, {
+			...m,
+			format: t,
+			min: n,
+			max: i,
+			locale: u,
+			disabled: v,
+			readOnly: y,
+			required: b,
+			name: _,
+			inputRef: h,
+			onValueChange: x,
+			"aria-describedby": g.description,
+			children: /* @__PURE__ */ s(r, {
+				"data-spark-component": "stepper",
+				ref: a,
+				state: m.state,
+				disabled: v,
+				readOnly: y,
+				children: /* @__PURE__ */ s(d.Group, { children: e })
+			})
 		})
 	});
 };
-_.displayName = "Stepper";
-var v = () => {
-	let e = a(g);
+m.displayName = "Stepper";
+var h = () => {
+	let e = a(p);
 	if (!e) throw Error("useStepperContext must be used within a Stepper provider");
 	return e;
-}, y = ({ children: n, design: i = "ghost", intent: a = "neutral", className: c, ref: l, ...u }) => {
-	let d = o(null), f = l && typeof l != "function" ? l : d, { incrementButtonProps: h } = v(), { buttonProps: g } = p({
-		...h,
-		...u
-	}, f);
-	return /* @__PURE__ */ s(r.TrailingAddon, {
-		asChild: !0,
-		"data-spark-component": "stepper-increment-button",
-		children: /* @__PURE__ */ s(t, {
-			ref: f,
-			design: i,
-			intent: a,
-			className: c,
-			"aria-label": g["aria-label"],
-			...g,
-			disabled: u.disabled || g.disabled,
-			children: n || /* @__PURE__ */ s(e, { children: /* @__PURE__ */ s(m, {}) })
-		})
-	});
-}, b = ({ children: n, design: i = "ghost", intent: a = "neutral", className: c, ref: l, ...d }) => {
-	let f = o(null), m = l && typeof l != "function" ? l : f, { decrementButtonProps: h } = v(), { buttonProps: g } = p({
-		...h,
-		...d
-	}, m);
-	return /* @__PURE__ */ s(r.LeadingAddon, {
-		asChild: !0,
-		"data-spark-component": "stepper-decrement-button",
-		children: /* @__PURE__ */ s(t, {
-			ref: m,
-			design: i,
-			intent: a,
-			className: c,
-			"aria-label": g["aria-label"],
-			...g,
-			disabled: d.disabled || g.disabled,
-			children: n || /* @__PURE__ */ s(e, { children: /* @__PURE__ */ s(u, {}) })
-		})
-	});
-}, x = Object.assign(y, { id: "TrailingAddon" }), S = Object.assign(b, { id: "LeadingAddon" });
-y.displayName = "Stepper.DecrementButton", b.displayName = "Stepper.DecrementButton";
+}, g = ({ children: n, design: i = "ghost", intent: a = "neutral", className: o, ref: c, disabled: l, ...u }) => {
+	let { fieldId: p } = h();
+	return /* @__PURE__ */ s(d.Increment, { render: (d) => {
+		let m = l || "disabled" in d && d.disabled;
+		return /* @__PURE__ */ s(r.TrailingAddon, {
+			asChild: !0,
+			"data-spark-component": "stepper-increment-button",
+			children: /* @__PURE__ */ s(t, {
+				ref: c,
+				design: i,
+				intent: a,
+				className: o,
+				...u,
+				...d,
+				"aria-label": u["aria-label"] || d["aria-label"],
+				"aria-controls": p,
+				disabled: m,
+				children: n || /* @__PURE__ */ s(e, { children: /* @__PURE__ */ s(f, {}) })
+			})
+		});
+	} });
+}, _ = ({ children: n, design: i = "ghost", intent: a = "neutral", className: o, ref: c, disabled: l, ...f }) => {
+	let { fieldId: p } = h();
+	return /* @__PURE__ */ s(d.Decrement, { render: (d) => {
+		let m = l || "disabled" in d && d.disabled;
+		return /* @__PURE__ */ s(r.LeadingAddon, {
+			asChild: !0,
+			"data-spark-component": "stepper-decrement-button",
+			children: /* @__PURE__ */ s(t, {
+				ref: c,
+				design: i,
+				intent: a,
+				className: o,
+				...f,
+				...d,
+				"aria-label": f["aria-label"] || d["aria-label"],
+				"aria-controls": p,
+				disabled: m,
+				children: n || /* @__PURE__ */ s(e, { children: /* @__PURE__ */ s(u, {}) })
+			})
+		});
+	} });
+}, v = Object.assign(g, { id: "TrailingAddon" }), y = Object.assign(_, { id: "LeadingAddon" });
+g.displayName = "Stepper.IncrementButton", _.displayName = "Stepper.DecrementButton";
 //#endregion
 //#region src/stepper/StepperInput.tsx
-var C = ({ ref: e, ...t }) => {
-	let { inputRef: r, inputProps: i } = v(), a = c(e, r), { className: o = "", ...l } = t;
-	return /* @__PURE__ */ s(n, {
-		ref: a,
-		...l,
-		...i,
-		className: `min-w-sz-56 text-center ${o}`
-	});
-}, w = Object.assign(C, { id: "Input" });
-C.displayName = "Stepper.Input";
+var b = ({ ref: e, ...t }) => {
+	let { inputRef: r, fieldId: i, fieldIsInvalid: a, fieldIsRequired: o } = h(), l = c(e, r), { className: u = "", ...f } = t;
+	return /* @__PURE__ */ s(d.Input, { render: (e) => {
+		let t;
+		o === void 0 ? "required" in e && (t = e.required) : t = o;
+		let r = a === void 0 ? e["aria-invalid"] : a;
+		return /* @__PURE__ */ s(n, {
+			ref: l,
+			...e,
+			...f,
+			id: i || e.id,
+			required: t,
+			"aria-invalid": r,
+			className: `min-w-sz-56 text-center ${u}`
+		});
+	} });
+}, x = Object.assign(b, { id: "Input" });
+b.displayName = "Stepper.Input";
 //#endregion
 //#region src/stepper/index.ts
-var T = Object.assign(_, {
-	IncrementButton: x,
-	DecrementButton: S,
-	Input: w
+var S = Object.assign(m, {
+	IncrementButton: v,
+	DecrementButton: y,
+	Input: x
 });
-T.displayName = "Stepper", x.displayName = "Stepper.IncrementButton", S.displayName = "Stepper.DecrementButton", w.displayName = "Stepper.Input";
+S.displayName = "Stepper", v.displayName = "Stepper.IncrementButton", y.displayName = "Stepper.DecrementButton", x.displayName = "Stepper.Input";
 //#endregion
-export { T as Stepper };
+export { S as Stepper };
 
 //# sourceMappingURL=index.mjs.map

package/dist/stepper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/stepper/useStepper.ts","../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { useNumberField } from '@react-aria/numberfield'\nimport { useNumberFieldState } from '@react-stately/numberfield'\n\nimport type { UseStepperArgs, UseStepperReturn } from './types'\n\nexport const useStepper = ({\n  inputRef,\n  locale = 'fr',\n  ...rest\n}: UseStepperArgs): UseStepperReturn => {\n  const state = useNumberFieldState({\n    ...rest,\n    isDisabled: rest.disabled,\n    isReadOnly: rest.readOnly,\n    isRequired: rest.required,\n    locale,\n  })\n\n  const { groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(\n    {\n      isWheelDisabled: false,\n      ...rest,\n      isDisabled: rest.disabled,\n      isReadOnly: rest.readOnly,\n      isRequired: rest.required,\n    },\n    state,\n    inputRef\n  )\n\n  return {\n    groupProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n  }\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { InputGroup } from '../input'\nimport type { StepperProps, UseStepperReturn } from './types'\nimport { useStepper } from './useStepper'\n\nconst StepperContext = createContext<\n  (Omit<UseStepperReturn, 'groupProps'> & { inputRef: RefObject<HTMLInputElement | null> }) | null\n>(null)\n\nexport const Stepper = ({\n  children,\n  formatOptions,\n  minValue,\n  maxValue,\n  ref: forwardedRef,\n  ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const {\n    groupProps,\n    inputProps: _inputProps,\n    incrementButtonProps: _incrementButtonProps,\n    decrementButtonProps: _decrementButtonProps,\n  } = useStepper({\n    ...{\n      ...stepperProps,\n      /**\n       * To enable the possibility to init the stepper with empty (undefined) value,\n       * we need to force the empty value to NaN.\n       * Cf. https://github.com/adobe/react-spectrum/issues/5524\n       */\n      ...('value' in stepperProps && { value: stepperProps.value ?? NaN }),\n      onChange: stepperProps.onValueChange,\n    },\n    formatOptions,\n    minValue,\n    maxValue,\n    inputRef,\n  })\n\n  const formFieldControlProps = useFormFieldControl()\n  const isWrappedInFormField = !!formFieldControlProps.id\n\n  const incrementButtonProps = {\n    ..._incrementButtonProps,\n    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),\n  }\n\n  const decrementButtonProps = {\n    ..._decrementButtonProps,\n    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),\n  }\n\n  const inputProps = {\n    ..._inputProps,\n    ...(isWrappedInFormField && {\n      id: formFieldControlProps.id,\n      required: formFieldControlProps.isRequired,\n      'aria-invalid': formFieldControlProps.isInvalid ? true : undefined,\n    }),\n  }\n\n  const { onValueChange: _, ...remainingStepperProps } = stepperProps\n\n  return (\n    <StepperContext.Provider\n      value={{ incrementButtonProps, decrementButtonProps, inputProps, inputRef }}\n    >\n      <InputGroup\n        {...remainingStepperProps}\n        {...groupProps}\n        data-spark-component=\"stepper\"\n        ref={forwardedRef}\n      >\n        {children}\n      </InputGroup>\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 { useButton } from '@react-aria/button'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { type PropsWithChildren, useRef } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { InputGroup } from '../input'\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  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const innerRef = useRef<HTMLButtonElement>(null)\n  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef\n\n  const { incrementButtonProps } = useStepperContext()\n  const { buttonProps } = useButton({ ...incrementButtonProps, ...rest }, ref)\n\n  return (\n    <InputGroup.TrailingAddon asChild data-spark-component=\"stepper-increment-button\">\n      <IconButton\n        ref={ref}\n        design={design}\n        intent={intent}\n        className={className}\n        aria-label={buttonProps['aria-label'] as string}\n        {...buttonProps}\n        disabled={rest.disabled || buttonProps.disabled}\n      >\n        {children || (\n          <Icon>\n            <Plus />\n          </Icon>\n        )}\n      </IconButton>\n    </InputGroup.TrailingAddon>\n  )\n}\n\nconst DecrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const innerRef = useRef<HTMLButtonElement>(null)\n  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef\n\n  const { decrementButtonProps } = useStepperContext()\n  const { buttonProps } = useButton({ ...decrementButtonProps, ...rest }, ref)\n\n  return (\n    <InputGroup.LeadingAddon asChild data-spark-component=\"stepper-decrement-button\">\n      <IconButton\n        ref={ref}\n        design={design}\n        intent={intent}\n        className={className}\n        aria-label={buttonProps['aria-label'] as string}\n        {...buttonProps}\n        disabled={rest.disabled || buttonProps.disabled}\n      >\n        {children || (\n          <Icon>\n            <Minus />\n          </Icon>\n        )}\n      </IconButton>\n    </InputGroup.LeadingAddon>\n  )\n}\n\nexport const StepperIncrementButton = Object.assign(IncrementButton, {\n  id: 'TrailingAddon',\n})\n\nexport const StepperDecrementButton = Object.assign(DecrementButton, {\n  id: 'LeadingAddon',\n})\n\nIncrementButton.displayName = 'Stepper.DecrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { 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, inputProps } = useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  return (\n    <SparkInput\n      ref={ref}\n      {...remainingProps}\n      {...inputProps}\n      className={`min-w-sz-56 text-center ${className}`}\n    />\n  )\n}\n\nexport const StepperInput = Object.assign(Input, {\n  id: 'Input',\n})\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 { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { InputGroup } from '../input'\nimport type { StepperProps } from './types'\n\ninterface StepperContextValue {\n  inputRef: RefObject<HTMLInputElement | null>\n  fieldId?: string\n  fieldIsInvalid?: boolean\n  fieldIsRequired?: boolean\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\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  const handleValueChange = (value: number | null) => {\n    if (onValueChange && value !== null) {\n      onValueChange(value)\n    }\n  }\n\n  return (\n    <StepperContext.Provider\n      value={{\n        inputRef,\n        fieldId: formFieldControlProps.id,\n        fieldIsInvalid: formFieldControlProps.isInvalid,\n        fieldIsRequired: required,\n      }}\n    >\n      <NumberField.Root\n        {...stepperProps}\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        onValueChange={handleValueChange}\n        aria-describedby={formFieldControlProps.description}\n      >\n        <InputGroup\n          data-spark-component=\"stepper\"\n          ref={forwardedRef}\n          state={stepperProps.state}\n          disabled={disabled}\n          readOnly={readOnly}\n        >\n          <NumberField.Group>{children}</NumberField.Group>\n        </InputGroup>\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 { type PropsWithChildren } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { InputGroup } from '../input'\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 } = useStepperContext()\n\n  return (\n    <NumberField.Increment\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        return (\n          <InputGroup.TrailingAddon asChild data-spark-component=\"stepper-increment-button\">\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={className}\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          </InputGroup.TrailingAddon>\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 } = useStepperContext()\n\n  return (\n    <NumberField.Decrement\n      render={buttonProps => {\n        const isDisabled = disabled || ('disabled' in buttonProps && (buttonProps as any).disabled)\n        return (\n          <InputGroup.LeadingAddon asChild data-spark-component=\"stepper-decrement-button\">\n            <IconButton\n              ref={forwardedRef}\n              design={design}\n              intent={intent}\n              className={className}\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          </InputGroup.LeadingAddon>\n        )\n      }}\n    />\n  )\n}\n\nexport const StepperIncrementButton = Object.assign(IncrementButton, {\n  id: 'TrailingAddon',\n})\n\nexport const StepperDecrementButton = Object.assign(DecrementButton, {\n  id: 'LeadingAddon',\n})\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, fieldIsInvalid, fieldIsRequired } = useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  return (\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            className={`min-w-sz-56 text-center ${className}`}\n          />\n        )\n      }}\n    />\n  )\n}\n\nexport const StepperInput = Object.assign(Input, {\n  id: 'Input',\n})\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.0",
+  "version": "17.5.6-beta.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,29 +48,24 @@
   },
   "dependencies": {
     "@base-ui/react": "1.0.0",
-    "@react-aria/button": "3.13.0",
-    "@react-aria/numberfield": "3.11.13",
-    "@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.5.6-beta.0",
-    "@spark-ui/icons": "^17.5.6-beta.0",
-    "@spark-ui/internal-utils": "^17.5.6-beta.0",
+    "@spark-ui/hooks": "17.5.6-beta.1",
+    "@spark-ui/icons": "17.5.6-beta.1",
+    "@spark-ui/internal-utils": "17.5.6-beta.1",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
-    "downshift": "9.0.10",
-    "emulate-tab": "^1.2.1",
-    "motion": "^12.34.3",
+    "downshift": "9.0.13",
+    "emulate-tab": "1.2.1",
+    "motion": "12.34.5",
     "radix-ui": "1.4.3",
-    "react-aria-components": "^1.15.0",
-    "react-snap-carousel": "^0.5.1"
+    "react-aria-components": "1.15.1",
+    "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.5.6-beta.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "tailwindcss": "^4.1.13"
+    "@spark-ui/theme-utils": "17.5.6-beta.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwindcss": "4.1.18"
   },
   "devDependencies": {
     "jsdom-testing-mocks": "1.16.0"