@spark-ui/components 10.19.3 → 10.20.0

package/dist/stepper/index.mjs

@@ -1,173 +1,230 @@
+import {
+  Input,
+  InputGroup
+} from "../chunk-VBX7BTNU.mjs";
+import {
+  IconButton
+} from "../chunk-XYK6V3JF.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
+import "../chunk-HEKSVWYW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
-import {
-  Slot
-} from "../chunk-6QCEPQ3U.mjs";
-
-// src/stepper/Buttons.tsx
-import { NumberField } from "@base-ui-components/react/number-field";
-import { Minus } from "@spark-ui/icons/Minus";
-import { Plus } from "@spark-ui/icons/Plus";
-import { cva } from "class-variance-authority";
+import "../chunk-6QCEPQ3U.mjs";
 
-// src/stepper/useRenderSlot.tsx
-import { jsx } from "react/jsx-runtime";
-function useRenderSlot(asChild, defaultTag) {
-  const Component = asChild ? Slot : defaultTag;
-  return asChild ? ({ ...props }) => /* @__PURE__ */ jsx(Component, { ...props }) : void 0;
-}
+// src/stepper/Stepper.tsx
+import { useFormFieldControl } from "@spark-ui/components/form-field";
+import { createContext, useContext, useRef } from "react";
 
-// src/stepper/Buttons.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var styles = cva(
-  [
-    // Base styles
-    "border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none",
-    "hover:bg-neutral/dim-5",
-    // Disabled and ReadOnly styles
-    "disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed",
-    "data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed",
-    "data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed",
-    // State styles
-    "group-data-[field-state=error]:border-error",
-    "group-data-[field-state=alert]:border-alert",
-    "group-data-[field-state=success]:border-success"
-  ],
-  {
-    variants: {
-      placement: {
-        left: "rounded-l-lg",
-        right: "rounded-r-lg"
-      }
-    }
-  }
-);
-var Decrement = ({ children, className, asChild = false, ...props }) => {
-  const render = useRenderSlot(asChild, "div");
-  return /* @__PURE__ */ jsx2(
-    NumberField.Decrement,
+// src/stepper/useStepper.ts
+import { useNumberField } from "@react-aria/numberfield";
+import { useNumberFieldState } from "@react-stately/numberfield";
+var useStepper = ({
+  inputRef,
+  locale = "fr",
+  ...rest
+}) => {
+  const state = useNumberFieldState({
+    ...rest,
+    isDisabled: rest.disabled,
+    isReadOnly: rest.readOnly,
+    isRequired: rest.required,
+    locale
+  });
+  const { groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(
     {
-      "data-spark-component": "stepper-decrement-button",
-      className: styles({
-        placement: "left",
-        className
-      }),
-      render,
-      ...props,
-      children: children || /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2(Minus, {}) })
-    }
+      isWheelDisabled: false,
+      ...rest,
+      isDisabled: rest.disabled,
+      isReadOnly: rest.readOnly,
+      isRequired: rest.required
+    },
+    state,
+    inputRef
   );
+  return {
+    groupProps,
+    inputProps,
+    incrementButtonProps,
+    decrementButtonProps
+  };
 };
-var Increment = ({ children, className, asChild = false, ...props }) => {
-  const render = useRenderSlot(asChild, "div");
-  return /* @__PURE__ */ jsx2(
-    NumberField.Increment,
+
+// src/stepper/Stepper.tsx
+import { jsx } from "react/jsx-runtime";
+var StepperContext = createContext(null);
+var Stepper = ({
+  children,
+  formatOptions,
+  minValue,
+  maxValue,
+  ref: forwardedRef,
+  ...stepperProps
+}) => {
+  const inputRef = useRef(null);
+  const {
+    groupProps,
+    inputProps: _inputProps,
+    incrementButtonProps: _incrementButtonProps,
+    decrementButtonProps: _decrementButtonProps
+  } = useStepper({
+    ...{
+      ...stepperProps,
+      /**
+       * To enable the possibility to init the stepper with empty (undefined) value,
+       * we need to force the empty value to NaN.
+       * Cf. https://github.com/adobe/react-spectrum/issues/5524
+       */
+      ..."value" in stepperProps && { value: stepperProps.value ?? NaN },
+      onChange: stepperProps.onValueChange
+    },
+    formatOptions,
+    minValue,
+    maxValue,
+    inputRef
+  });
+  const formFieldControlProps = useFormFieldControl();
+  const isWrappedInFormField = !!formFieldControlProps.id;
+  const incrementButtonProps = {
+    ..._incrementButtonProps,
+    ...isWrappedInFormField && { "aria-controls": formFieldControlProps.id }
+  };
+  const decrementButtonProps = {
+    ..._decrementButtonProps,
+    ...isWrappedInFormField && { "aria-controls": formFieldControlProps.id }
+  };
+  const inputProps = {
+    ..._inputProps,
+    ...isWrappedInFormField && {
+      id: formFieldControlProps.id,
+      required: formFieldControlProps.isRequired,
+      "aria-invalid": formFieldControlProps.isInvalid ? true : void 0
+    }
+  };
+  const { onValueChange: _, ...remainingStepperProps } = stepperProps;
+  return /* @__PURE__ */ jsx(
+    StepperContext.Provider,
     {
-      "data-spark-component": "stepper-increment-button",
-      className: styles({
-        placement: "right",
-        className
-      }),
-      render,
-      ...props,
-      children: children || /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2(Plus, {}) })
+      value: { incrementButtonProps, decrementButtonProps, inputProps, inputRef },
+      children: /* @__PURE__ */ jsx(
+        InputGroup,
+        {
+          ...remainingStepperProps,
+          ...groupProps,
+          "data-spark-component": "stepper",
+          ref: forwardedRef,
+          children
+        }
+      )
     }
   );
 };
-Decrement.displayName = "Stepper.DecrementButton";
-Increment.displayName = "Stepper.IncrementButton";
+Stepper.displayName = "Stepper";
+var useStepperContext = () => {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw Error("useStepperContext must be used within a Stepper provider");
+  }
+  return context;
+};
 
-// src/stepper/Input.tsx
-import { NumberField as NumberField2 } from "@base-ui-components/react/number-field";
-import { useFormFieldControl } from "@spark-ui/components/form-field";
-import { cx } from "class-variance-authority";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Input = ({ className, ...props }) => {
-  const field = useFormFieldControl();
-  return /* @__PURE__ */ jsx3(
-    NumberField2.Input,
+// src/stepper/StepperButton.tsx
+import { useButton } from "@react-aria/button";
+import { Minus } from "@spark-ui/icons/Minus";
+import { Plus } from "@spark-ui/icons/Plus";
+import { useRef as useRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IncrementButton = ({
+  children,
+  design = "ghost",
+  intent = "neutral",
+  className,
+  ref: forwardedRef,
+  ...rest
+}) => {
+  const innerRef = useRef2(null);
+  const ref = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef : innerRef;
+  const { incrementButtonProps } = useStepperContext();
+  const { buttonProps } = useButton({ ...incrementButtonProps, ...rest }, ref);
+  return /* @__PURE__ */ jsx2(InputGroup.TrailingAddon, { asChild: true, "data-spark-component": "stepper-increment-button", children: /* @__PURE__ */ jsx2(
+    IconButton,
     {
-      "data-spark-component": "stepper-input",
-      className: cx(
-        // Base styles
-        "bg-surface text-on-surface px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full text-center",
-        "first:border-l-sm first:rounded-l-lg",
-        "last:border-r-sm last:rounded-r-lg",
-        // State styles
-        "group-data-[field-state=error]:border-error",
-        "group-data-[field-state=alert]:border-alert",
-        "group-data-[field-state=success]:border-success",
-        "",
-        // Disabled and ReadOnly styles
-        "data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed",
-        "data-[readonly]:bg-on-surface/dim-5",
-        // Focus styles
-        "focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1",
-        className
-      ),
-      ...field.description && { "aria-describedby": field.description },
-      ...field.isRequired && { required: true },
-      ...field.state === "error" && { "aria-invalid": true },
-      ...props
+      ref,
+      design,
+      intent,
+      className,
+      "aria-label": buttonProps["aria-label"],
+      ...buttonProps,
+      disabled: rest.disabled || buttonProps.disabled,
+      children: children || /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2(Plus, {}) })
     }
-  );
+  ) });
 };
-Input.displayName = "Stepper.InputButton";
-
-// src/stepper/Root.tsx
-import { NumberField as NumberField3 } from "@base-ui-components/react/number-field";
-import { useFormFieldControl as useFormFieldControl2 } from "@spark-ui/components/form-field";
-import { cx as cx2 } from "class-variance-authority";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Root = ({
+var DecrementButton = ({
   children,
-  allowWheelScrub = true,
-  state: stateProp,
-  minValue,
-  maxValue,
-  formatOptions,
-  step: stepProp,
+  design = "ghost",
+  intent = "neutral",
   className,
-  ...props
+  ref: forwardedRef,
+  ...rest
 }) => {
-  const render = useRenderSlot(true, "div");
-  const field = useFormFieldControl2();
-  const state = field.state ?? stateProp;
-  const step = stepProp == null && formatOptions?.style === "percent" ? 0.01 : stepProp;
-  return /* @__PURE__ */ jsx4(
-    NumberField3.Root,
+  const innerRef = useRef2(null);
+  const ref = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef : innerRef;
+  const { decrementButtonProps } = useStepperContext();
+  const { buttonProps } = useButton({ ...decrementButtonProps, ...rest }, ref);
+  return /* @__PURE__ */ jsx2(InputGroup.LeadingAddon, { asChild: true, "data-spark-component": "stepper-decrement-button", children: /* @__PURE__ */ jsx2(
+    IconButton,
     {
-      "data-spark-component": "stepper",
-      allowWheelScrub,
-      render,
-      min: minValue,
-      max: maxValue,
-      format: formatOptions,
-      step,
-      ...field.id && { id: field.id },
-      ...props,
-      children: /* @__PURE__ */ jsx4(
-        NumberField3.Group,
-        {
-          className: cx2("group relative inline-flex w-full", className),
-          "data-field-state": state,
-          children
-        }
-      )
+      ref,
+      design,
+      intent,
+      className,
+      "aria-label": buttonProps["aria-label"],
+      ...buttonProps,
+      disabled: rest.disabled || buttonProps.disabled,
+      children: children || /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2(Minus, {}) })
+    }
+  ) });
+};
+var StepperIncrementButton = Object.assign(IncrementButton, {
+  id: "TrailingAddon"
+});
+var StepperDecrementButton = Object.assign(DecrementButton, {
+  id: "LeadingAddon"
+});
+IncrementButton.displayName = "Stepper.DecrementButton";
+DecrementButton.displayName = "Stepper.DecrementButton";
+
+// src/stepper/StepperInput.tsx
+import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input2 = ({ ref: forwardedRef, ...props }) => {
+  const { inputRef, inputProps } = useStepperContext();
+  const ref = useMergeRefs(forwardedRef, inputRef);
+  const { className = "", ...remainingProps } = props;
+  return /* @__PURE__ */ jsx3(
+    Input,
+    {
+      ref,
+      ...remainingProps,
+      ...inputProps,
+      className: `min-w-sz-56 text-center ${className}`
     }
   );
 };
-Root.displayName = "Stepper";
+var StepperInput = Object.assign(Input2, {
+  id: "Input"
+});
+Input2.displayName = "Stepper.Input";
 
 // src/stepper/index.ts
-var Stepper = Object.assign(Root, { IncrementButton: Increment, DecrementButton: Decrement, Input });
-Stepper.displayName = "Stepper";
-Increment.displayName = "Stepper.IncrementButton";
-Decrement.displayName = "Stepper.DecrementButton";
-Input.displayName = "Stepper.Input";
+var Stepper2 = Object.assign(Stepper, { IncrementButton: StepperIncrementButton, DecrementButton: StepperDecrementButton, Input: StepperInput });
+Stepper2.displayName = "Stepper";
+StepperIncrementButton.displayName = "Stepper.IncrementButton";
+StepperDecrementButton.displayName = "Stepper.DecrementButton";
+StepperInput.displayName = "Stepper.Input";
 export {
-  Stepper
+  Stepper2 as Stepper
 };
 //# sourceMappingURL=index.mjs.map

package/dist/stepper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/stepper/Buttons.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n  [\n    // Base styles\n    'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n    'hover:bg-neutral/dim-5',\n    // Disabled and ReadOnly styles\n    'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n    'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n    'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n    // State styles\n    'group-data-[field-state=error]:border-error',\n    'group-data-[field-state=alert]:border-alert',\n    'group-data-[field-state=success]:border-success',\n  ],\n  {\n    variants: {\n      placement: {\n        left: 'rounded-l-lg',\n        right: 'rounded-r-lg',\n      },\n    },\n  }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Decrement\n      data-spark-component=\"stepper-decrement-button\"\n      className={styles({\n        placement: 'left',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Minus />\n        </Icon>\n      )}\n    </NumberField.Decrement>\n  )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Increment\n      data-spark-component=\"stepper-increment-button\"\n      className={styles({\n        placement: 'right',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Plus />\n        </Icon>\n      )}\n    </NumberField.Increment>\n  )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n  children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n  const field = useFormFieldControl()\n\n  return (\n    <NumberField.Input\n      data-spark-component=\"stepper-input\"\n      className={cx(\n        // Base styles\n        'bg-surface text-on-surface px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full text-center',\n        'first:border-l-sm first:rounded-l-lg',\n        'last:border-r-sm last:rounded-r-lg',\n        // State styles\n        'group-data-[field-state=error]:border-error',\n        'group-data-[field-state=alert]:border-alert',\n        'group-data-[field-state=success]:border-success',\n        '',\n        // Disabled and ReadOnly styles\n        'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n        'data-[readonly]:bg-on-surface/dim-5',\n        // Focus styles\n        'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n        className\n      )}\n      {...(field.description && { 'aria-describedby': field.description })}\n      {...(field.isRequired && { required: true })}\n      {...(field.state === 'error' && { 'aria-invalid': true })}\n      {...props}\n    />\n  )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n  children,\n  allowWheelScrub = true,\n  state: stateProp,\n  minValue,\n  maxValue,\n  formatOptions,\n  step: stepProp,\n  className,\n  ...props\n}: StepperProps) => {\n  const render = useRenderSlot(true, 'div')\n\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n\n  /**\n   * By default, a percent format will increment in steps of 1 (100% on each increment)\n   */\n  const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n  return (\n    <NumberField.Root\n      data-spark-component=\"stepper\"\n      allowWheelScrub={allowWheelScrub}\n      render={render}\n      min={minValue}\n      max={maxValue}\n      format={formatOptions}\n      step={step}\n      {...(field.id && { id: field.id })}\n      {...props}\n    >\n      <NumberField.Group\n        className={cx('group relative inline-flex w-full', className)}\n        data-field-state={state}\n      >\n        {children}\n      </NumberField.Group>\n    </NumberField.Root>\n  )\n}\n\nRoot.displayName = 'Stepper'\n","import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\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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","names":["jsx","NumberField","jsx","NumberField","useFormFieldControl","cx","jsx","useFormFieldControl","NumberField","cx"]}
+{"version":3,"sources":["../../src/stepper/Stepper.tsx","../../src/stepper/useStepper.ts","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["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 { 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 { 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\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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","names":["useRef","jsx","useRef","jsx","Input","Stepper"]}

package/dist/textarea/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentPropsWithoutRef, Ref, PropsWithChildren } from 'react';
-import { I as InputGroupProps, a as InputLeadingIconProps, b as InputTrailingIconProps } from '../InputTrailingIcon-DzmwLGtX.mjs';
-import { I as InputProps } from '../Input-g0LpWuv0.mjs';
+import { I as InputGroupProps, a as InputProps } from '../Input-N8AWWSmt.mjs';
+import { I as InputLeadingIconProps, a as InputTrailingIconProps } from '../InputTrailingIcon-BBp7sE6D.mjs';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 import '../icon/index.mjs';

package/dist/textarea/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentPropsWithoutRef, Ref, PropsWithChildren } from 'react';
-import { I as InputGroupProps, a as InputLeadingIconProps, b as InputTrailingIconProps } from '../InputTrailingIcon-CZD9hydv.js';
-import { I as InputProps } from '../Input-g0LpWuv0.js';
+import { I as InputGroupProps, a as InputProps } from '../Input-N8AWWSmt.js';
+import { I as InputLeadingIconProps, a as InputTrailingIconProps } from '../InputTrailingIcon-ZZx8PoJy.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 import '../icon/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "10.19.3",
+  "version": "10.20.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -49,11 +49,13 @@
   "dependencies": {
     "@base-ui-components/react": "^1.0.0-beta.3",
     "@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": "^10.19.3",
-    "@spark-ui/icons": "^10.19.3",
-    "@spark-ui/internal-utils": "^10.19.3",
+    "@spark-ui/hooks": "^10.20.0",
+    "@spark-ui/icons": "^10.20.0",
+    "@spark-ui/internal-utils": "^10.20.0",
     "@zag-js/pagination": "1.25.0",
     "@zag-js/react": "1.25.0",
     "class-variance-authority": "0.7.1",
@@ -80,5 +82,5 @@
     "url": "https://github.com/leboncoin/spark-web/issues?q=is%3Aopen+label%3A%22Component%3A+button%22"
   },
   "homepage": "https://sparkui.vercel.app",
-  "gitHead": "2bf71247a88874257530eb1a926c3b5b757fca96"
+  "gitHead": "17a89ca6572d8f8969dc4dac32e6d180bee6c34f"
 }

package/dist/Input-g0LpWuv0.d.mts

@@ -1,17 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentPropsWithoutRef, Ref } from 'react';
-
-type InputPrimitiveProps = ComponentPropsWithoutRef<'input'>;
-interface InputProps extends InputPrimitiveProps {
-    asChild?: boolean;
-    onValueChange?: (value: string) => void;
-    ref?: Ref<HTMLInputElement>;
-}
-declare const Input: {
-    ({ className, asChild, onValueChange, onChange, onKeyDown, disabled: disabledProp, readOnly: readOnlyProp, ref, ...others }: InputProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-} & {
-    id: string;
-};
-
-export { type InputProps as I, Input as a };

package/dist/Input-g0LpWuv0.d.ts

@@ -1,17 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentPropsWithoutRef, Ref } from 'react';
-
-type InputPrimitiveProps = ComponentPropsWithoutRef<'input'>;
-interface InputProps extends InputPrimitiveProps {
-    asChild?: boolean;
-    onValueChange?: (value: string) => void;
-    ref?: Ref<HTMLInputElement>;
-}
-declare const Input: {
-    ({ className, asChild, onValueChange, onChange, onKeyDown, disabled: disabledProp, readOnly: readOnlyProp, ref, ...others }: InputProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-} & {
-    id: string;
-};
-
-export { type InputProps as I, Input as a };