@spark-ui/components/dist/stepper/index.mjs

Spark (Leboncoin design system) components.

import {
  Input,
  InputGroup
} from "../chunk-TUFNIIZE.mjs";
import {
  IconButton
} from "../chunk-QLOIAU3C.mjs";
import "../chunk-USSL4UZ5.mjs";
import "../chunk-MUNDKRAE.mjs";
import {
  Icon
} from "../chunk-AESXFMCC.mjs";
import "../chunk-NBZKMCHF.mjs";
import "../chunk-4F5DOL57.mjs";

// src/stepper/Stepper.tsx
import { useFormFieldControl } from "@spark-ui/components/form-field";
import { createContext, useContext, useRef } from "react";

// 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/Stepper.tsx
import { jsx } from "react/jsx-runtime";
var StepperContext = createContext(null);
var Stepper = ({
  children,
  formatOptions,
  minValue,
  maxValue,
  incrementAriaLabel,
  decrementAriaLabel,
  ref: forwardedRef,
  ...stepperProps
}) => {
  const inputRef = useRef(null);
  const {
    groupProps,
    inputProps: _inputProps,
    incrementButtonProps: _incrementButtonProps,
    decrementButtonProps: _decrementButtonProps
  } = useStepper({
    ...{
      ...stepperProps,
      onChange: stepperProps.onValueChange
    },
    formatOptions,
    minValue,
    maxValue,
    incrementAriaLabel,
    decrementAriaLabel,
    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,
    {
      value: { incrementButtonProps, decrementButtonProps, inputProps, inputRef },
      children: /* @__PURE__ */ jsx(
        InputGroup,
        {
          ...remainingStepperProps,
          ...groupProps,
          "data-spark-component": "stepper",
          ref: forwardedRef,
          children
        }
      )
    }
  );
};
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, children: /* @__PURE__ */ jsx2(
    IconButton,
    {
      ref,
      design,
      intent,
      className,
      "aria-label": buttonProps["aria-label"],
      ...buttonProps,
      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, children: /* @__PURE__ */ jsx2(
    IconButton,
    {
      ref,
      design,
      intent,
      className,
      "aria-label": buttonProps["aria-label"],
      ...buttonProps,
      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}`
    }
  );
};
var StepperInput = Object.assign(Input2, {
  id: "Input"
});
Input2.displayName = "Stepper.Input";

// 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";
export {
  Stepper2 as Stepper
};
//# sourceMappingURL=index.mjs.map