@spark-ui/components 10.17.13 → 10.18.1

package/dist/stepper/index.mjs

@@ -1,230 +1,166 @@
-import {
-  Input,
-  InputGroup
-} from "../chunk-QAUHPTZ2.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 "../chunk-6QCEPQ3U.mjs";
-
-// src/stepper/Stepper.tsx
-import { useFormFieldControl } from "@spark-ui/components/form-field";
-import { createContext, useContext, useRef } from "react";
+import {
+  Slot
+} from "../chunk-6QCEPQ3U.mjs";
 
-// 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(
-    {
-      isWheelDisabled: false,
-      ...rest,
-      isDisabled: rest.disabled,
-      isReadOnly: rest.readOnly,
-      isRequired: rest.required
-    },
-    state,
-    inputRef
-  );
-  return {
-    groupProps,
-    inputProps,
-    incrementButtonProps,
-    decrementButtonProps
-  };
-};
+// 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";
 
-// src/stepper/Stepper.tsx
+// src/stepper/useRenderSlot.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
+function useRenderSlot(asChild, defaultTag) {
+  const Component = asChild ? Slot : defaultTag;
+  return asChild ? ({ ...props }) => /* @__PURE__ */ jsx(Component, { ...props }) : void 0;
+}
+
+// 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"
+      }
     }
-  };
-  const { onValueChange: _, ...remainingStepperProps } = stepperProps;
-  return /* @__PURE__ */ jsx(
-    StepperContext.Provider,
+  }
+);
+var Decrement = ({ children, className, asChild = false, ...props }) => {
+  const render = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ jsx2(
+    NumberField.Decrement,
     {
-      value: { incrementButtonProps, decrementButtonProps, inputProps, inputRef },
-      children: /* @__PURE__ */ jsx(
-        InputGroup,
-        {
-          ...remainingStepperProps,
-          ...groupProps,
-          "data-spark-component": "stepper",
-          ref: forwardedRef,
-          children
-        }
-      )
+      "data-spark-component": "stepper-decrement-button",
+      className: styles({
+        placement: "left",
+        className
+      }),
+      render,
+      ...props,
+      children: children || /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2(Minus, {}) })
     }
   );
 };
-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/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,
+var Increment = ({ children, className, asChild = false, ...props }) => {
+  const render = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ jsx2(
+    NumberField.Increment,
     {
-      ref,
-      design,
-      intent,
-      className,
-      "aria-label": buttonProps["aria-label"],
-      ...buttonProps,
-      disabled: rest.disabled || buttonProps.disabled,
+      "data-spark-component": "stepper-increment-button",
+      className: styles({
+        placement: "right",
+        className
+      }),
+      render,
+      ...props,
       children: children || /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2(Plus, {}) })
     }
-  ) });
+  );
 };
-var DecrementButton = ({
-  children,
-  design = "ghost",
-  intent = "neutral",
-  className,
-  ref: forwardedRef,
-  ...rest
-}) => {
-  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,
+Decrement.displayName = "Stepper.DecrementButton";
+Increment.displayName = "Stepper.IncrementButton";
+
+// 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,
     {
-      ref,
-      design,
-      intent,
-      className,
-      "aria-label": buttonProps["aria-label"],
-      ...buttonProps,
-      disabled: rest.disabled || buttonProps.disabled,
-      children: children || /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2(Minus, {}) })
+      "data-spark-component": "stepper-input",
+      className: cx(
+        // Base styles
+        "bg-surface text-on-surface h-sz-44 border-y-sm border-outline 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
     }
-  ) });
+  );
 };
-var StepperIncrementButton = Object.assign(IncrementButton, {
-  id: "TrailingAddon"
-});
-var StepperDecrementButton = Object.assign(DecrementButton, {
-  id: "LeadingAddon"
-});
-IncrementButton.displayName = "Stepper.DecrementButton";
-DecrementButton.displayName = "Stepper.DecrementButton";
+Input.displayName = "Stepper.InputButton";
 
-// 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,
+// 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 = ({
+  children,
+  allowWheelScrub = true,
+  state: stateProp,
+  minValue,
+  maxValue,
+  formatOptions,
+  step: stepProp,
+  className,
+  ...props
+}) => {
+  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,
     {
-      ref,
-      ...remainingProps,
-      ...inputProps,
-      className: `min-w-sz-56 text-center ${className}`
+      "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 flex", className), "data-field-state": state, children })
     }
   );
 };
-var StepperInput = Object.assign(Input2, {
-  id: "Input"
-});
-Input2.displayName = "Stepper.Input";
+Root.displayName = "Stepper";
 
 // src/stepper/index.ts
-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";
+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";
 export {
-  Stepper2 as Stepper
+  Stepper
 };
 //# sourceMappingURL=index.mjs.map

package/dist/stepper/index.mjs.map

@@ -1 +1 @@
-{"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"]}
+{"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 h-sz-44 border-y-sm border-outline 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 className={cx('group flex', className)} data-field-state={state}>\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"]}

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 InputProps } from '../Input-N8AWWSmt.mjs';
-import { I as InputLeadingIconProps, a as InputTrailingIconProps } from '../InputTrailingIcon-BBp7sE6D.mjs';
+import { I as InputGroupProps, a as InputLeadingIconProps, b as InputTrailingIconProps } from '../InputTrailingIcon-DzmwLGtX.mjs';
+import { I as InputProps } from '../Input-g0LpWuv0.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 InputProps } from '../Input-N8AWWSmt.js';
-import { I as InputLeadingIconProps, a as InputTrailingIconProps } from '../InputTrailingIcon-ZZx8PoJy.js';
+import { I as InputGroupProps, a as InputLeadingIconProps, b as InputTrailingIconProps } from '../InputTrailingIcon-CZD9hydv.js';
+import { I as InputProps } from '../Input-g0LpWuv0.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.17.13",
+  "version": "10.18.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -49,13 +49,11 @@
   "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.17.13",
-    "@spark-ui/icons": "^10.17.13",
-    "@spark-ui/internal-utils": "^10.17.13",
+    "@spark-ui/hooks": "^10.18.1",
+    "@spark-ui/icons": "^10.18.1",
+    "@spark-ui/internal-utils": "^10.18.1",
     "@zag-js/pagination": "1.25.0",
     "@zag-js/react": "1.25.0",
     "class-variance-authority": "0.7.1",
@@ -82,5 +80,5 @@
     "url": "https://github.com/leboncoin/spark-web/issues?q=is%3Aopen+label%3A%22Component%3A+button%22"
   },
   "homepage": "https://sparkui.vercel.app",
-  "gitHead": "b76422c5079d9e1827a446cc6fac4df7a0b45e29"
+  "gitHead": "ae59cad6c7182d318131ea4e66dfe06b7be7a5fb"
 }

package/dist/InputTrailingIcon-BBp7sE6D.d.mts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IconProps } from './icon/index.mjs';
-
-type InputIconProps = IconProps;
-
-type InputLeadingIconProps = InputIconProps;
-declare const InputLeadingIcon: {
-    ({ className, ...others }: InputLeadingIconProps): react_jsx_runtime.JSX.Element;
-    id: string;
-    displayName: string;
-};
-
-type InputTrailingIconProps = InputIconProps;
-declare const InputTrailingIcon: {
-    ({ className, ...others }: InputTrailingIconProps): react_jsx_runtime.JSX.Element;
-    id: string;
-    displayName: string;
-};
-
-export { type InputLeadingIconProps as I, type InputTrailingIconProps as a, InputLeadingIcon as b, InputTrailingIcon as c };

package/dist/InputTrailingIcon-ZZx8PoJy.d.ts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IconProps } from './icon/index.js';
-
-type InputIconProps = IconProps;
-
-type InputLeadingIconProps = InputIconProps;
-declare const InputLeadingIcon: {
-    ({ className, ...others }: InputLeadingIconProps): react_jsx_runtime.JSX.Element;
-    id: string;
-    displayName: string;
-};
-
-type InputTrailingIconProps = InputIconProps;
-declare const InputTrailingIcon: {
-    ({ className, ...others }: InputTrailingIconProps): react_jsx_runtime.JSX.Element;
-    id: string;
-    displayName: string;
-};
-
-export { type InputLeadingIconProps as I, type InputTrailingIconProps as a, InputLeadingIcon as b, InputTrailingIcon as c };