@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/number-picker/number-picker.js

@@ -1,344 +1,3 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import $dbSRa$react__default, { forwardRef, useRef, createContext } from "react";
-import "../../default-i18n-CnQeC5Pl.js";
-import { a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $3985021b0ad6602f$export$37fb8590cf2c088c, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BG9DaxYN.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-DtRmB6b8.js";
-import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$df3a06d6289f983e } from "../../utils-Cr3pLd9c.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-BPG0hKfB.js";
-import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-CjFEHSfr.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-iUFQCK8m.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CsygZKz9.js";
-import { ButtonGroup, Button } from "../button/button.js";
-import { icons } from "../../icons/icons.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { BaseControl } from "../base-control/base-control.js";
-import { c as cva } from "../../index-BHpUy2Ix.js";
-const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
-const $b91743d66a0ed188$export$6cc906c6cff9bec5 = /* @__PURE__ */ createContext(null);
-const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(function NumberField(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b91743d66a0ed188$export$b414a48cf5dcbc11);
-  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
-  var _props_validationBehavior, _ref;
-  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
-  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  let state = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
-    ...props,
-    locale,
-    validationBehavior
-  });
-  let inputRef = useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  let { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, ...validation } = $81397a9303501bda$export$23f548e970bdf099({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    label,
-    validationBehavior
-  }, state, inputRef);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: {
-      state,
-      isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid || false,
-      isRequired: props.isRequired || false
-    },
-    defaultClassName: "react-aria-NumberField"
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.id;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $b91743d66a0ed188$export$6cc906c6cff9bec5,
-        state
-      ],
-      [
-        $a049562f99e7db0e$export$f9c6924e160136d1,
-        groupProps
-      ],
-      [
-        $3985021b0ad6602f$export$37fb8590cf2c088c,
-        {
-          ...inputProps,
-          ref: inputRef
-        }
-      ],
-      [
-        $01b77f81d0f07f68$export$75b6ee27786ba447,
-        {
-          ...labelProps,
-          ref: labelRef
-        }
-      ],
-      [
-        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
-        {
-          slots: {
-            increment: incrementButtonProps,
-            decrement: decrementButtonProps
-          }
-        }
-      ],
-      [
-        $514c0188e459b4c0$export$9afb8bc826b033ea,
-        {
-          slots: {
-            description: descriptionProps,
-            errorMessage: errorMessageProps
-          }
-        }
-      ],
-      [
-        $ee014567cb39d3f0$export$ff05c3ac10437e03,
-        validation
-      ]
-    ]
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ...DOMProps,
-    ...renderProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-disabled": props.isDisabled || void 0,
-    "data-required": props.isRequired || void 0,
-    "data-invalid": validation.isInvalid || void 0
-  }), props.name && /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
-    type: "hidden",
-    name: props.name,
-    form: props.form,
-    value: isNaN(state.numberValue) ? "" : state.numberValue,
-    disabled: props.isDisabled || void 0
-  }));
-});
-/**
- * A number picker component.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {number} props.value - The current value of the number picker.
- * @param {Function} props.onChange - Function to run when the value changes.
- * @param {number} [props.min=0] - The minimum value of the number picker.
- * @param {number} [props.max] - The maximum value of the number picker.
- * @param {number} [props.step=1] - The step value of the number picker.
- * @param {string} [props.label] - The label of the number picker.
- * @param {JSX.Element} [props.icon] - Icon to display within the number picker.
- * @param {string} [props.subtitle] - The subtitle of the number picker.
- * @param {string} [props.help] - The help text shown below the number picker.
- * @param {boolean} [props.readOnly] - If `true`, the number picker is read-only.
- * @param {boolean} [props.disabled] - If `true`, the number picker is disabled.
- * @param {string} [props.placeholder] - Placeholder text to display in the number picker.
- * @param {JSX.Element} [props.prefix] - Element to display to the left of the number picker.
- * @param {JSX.Element} [props.suffix] - Element to display to the right of the number picker.
- * @param {number} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values.
- * @param {boolean} [props.inline] - If `true`, the number picker is displayed inline.
- * @param {boolean} [props.noScrollToChange=false] - If `true`, the number picker does not change value when scrolling.
- * @param {InputSize} [props.size='default'] - Determines the input field size.
- * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The NumberPicker component.
- *
- * @typedef {'small' | 'medium' | 'default' | 'large'} InputSize
- *
- * @example
- * <NumberPicker
- * 	value={value}
- * 	onChange={setValue}
- * />
- *
- * @preserve
- */
-const NumberPicker = ({
-  value,
-  onChange,
-  min = 0,
-  max,
-  step = 1,
-  label,
-  icon,
-  subtitle,
-  help,
-  readOnly,
-  disabled,
-  placeholder,
-  prefix,
-  fixedWidth = null,
-  suffix,
-  children,
-  inline,
-  noScrollToChange = false,
-  size = "default",
-  flat,
-  className,
-  hidden,
-  ...props
-}) => {
-  if (hidden) {
-    return null;
-  }
-  const inputClass = cva(
-    [
-      "es:group",
-      "es:overflow-clip",
-      "es:flex es:items-center",
-      "es:leading-none",
-      "es:w-fit",
-      "es:rounded-lg es:focus-within:rounded-xl",
-      "es:transition-plus",
-      "es:inset-ring",
-      "es:focus-visible-within:ring-2 es:focus-visible-within:ring-accent-500/30",
-      "es:focus-visible-within:text-accent-950 es:focus-visible-within:inset-ring-accent-500",
-      "es:focus:placeholder:text-surface-400",
-      "es:text-13",
-      className
-    ],
-    {
-      variants: {
-        size: {
-          small: ["es:min-h-8", "es:px-2.5 es:py-1"],
-          medium: ["es:min-h-9", "es:px-3 es:py-1"],
-          default: ["es:min-h-10", "es:px-3 es:py-1.5"],
-          large: ["es:min-h-12", "es:px-4 es:py-1.5"]
-        },
-        disabled: {
-          false: "es:selection:bg-surface-100 es:selection:text-accent-800",
-          true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
-        }
-      },
-      compoundVariants: [
-        {
-          flat: false,
-          disabled: false,
-          readOnly: false,
-          class: [
-            "es:bg-white",
-            "es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
-            "es:hover:from-surface-100/0 es:hover:to-surface-100/50",
-            "es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus-within:inset-ring-surface-400",
-            "es:inset-shadow-sm es:inset-shadow-secondary-100/50",
-            "es:hover:placeholder:text-surface-400",
-            "es:placeholder:text-secondary-400",
-            "es:shadow-xs es:shadow-black/5"
-          ]
-        },
-        {
-          flat: true,
-          disabled: false,
-          readOnly: false,
-          class: [
-            "es:inset-ring-secondary-100",
-            "es:focus-within:text-accent-950",
-            "es:placeholder:text-secondary-500/80",
-            "es:bg-secondary-100 es:focus-within:bg-surface-50",
-            "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus-within:inset-ring-surface-200"
-          ]
-        },
-        { disabled: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-200 es:text-secondary-400"] },
-        { readOnly: true, flat: false, class: ["es:bg-secondary-50 es:inset-ring-secondary-300 es:text-secondary-400"] },
-        { readOnly: true, flat: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-300/60 es:text-secondary-400"] }
-      ],
-      defaultVariants: { disabled: false, flat: false, size: "default", readOnly: false }
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    $b91743d66a0ed188$export$63c5fa0b2fdccd2e,
-    {
-      value,
-      onChange,
-      isDisabled: disabled,
-      isReadOnly: readOnly,
-      minValue: min,
-      maxValue: max,
-      step,
-      isWheelDisabled: noScrollToChange,
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        BaseControl,
-        {
-          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-          icon,
-          label,
-          subtitle,
-          help,
-          inline,
-          children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
-            /* @__PURE__ */ jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: inputClass({ disabled, flat, size, readOnly }), children: [
-              prefix && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  slot: "prefix",
-                  className: 'es:mr-1 es:-translate-y-px es:select-none es:leading-none es:text-current/65 es:font-variation-["wdth"_76,"wght"_325,"slnt"_-2,"ROND"_100] es:group-focus-within:text-surface-500',
-                  children: prefix
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                $3985021b0ad6602f$export$f5b8910cec6cf069,
-                {
-                  className: 'es:font-variation-["wdth"_80,"wght"_325,"slnt"_0,"ROND"_100] es:placeholder-shown:font-variation-["wdth"_60,"wght"_300,"slnt"_-10,"ROND"_0] es:any-focus:outline-hidden! es:p-px! es:border-none! es:shadow-none! es:bg-transparent es:text-13!',
-                  placeholder,
-                  style: {
-                    width: fixedWidth ? `calc(${fixedWidth}ch + 2px)` : `calc(${min < 0 ? "1ch + " : "0.75ch + "}${Math.max((max ?? 1e3)?.toString()?.length, (placeholder ?? "")?.length)} * 1ch)`
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                ButtonGroup,
-                {
-                  className: clsx(
-                    "es:hidden es:transition-discrete es:gap-0! es:transition es:pl-0.5 es:ease-spring-smooth es:duration-300 es:origin-left",
-                    "es:starting:opacity-0 es:starting:blur-[2px] es:starting:translate-x-2",
-                    "es:opacity-100 es:blur-none es:translate-x-0",
-                    !disabled && !readOnly && "es:group-hover:flex es:group-focus-within:flex",
-                    disabled && "es:hidden"
-                  ),
-                  vertical: true,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "ghost",
-                        className: clsx(
-                          "es:col-start-4 es:w-4 es:disabled:opacity-40 es:text-current/80 es:group-focus-within:text-surface-500 es:icon:size-[0.65rem] es:icon:stroke-2",
-                          size === "small" ? "es:h-3" : "es:h-3.5"
-                        ),
-                        slot: "increment",
-                        icon: icons.chevronUp
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "ghost",
-                        className: clsx(
-                          "es:col-start-4 es:w-4 es:disabled:opacity-40 es:text-current/80 es:group-focus-within:text-surface-500 es:icon:size-[0.65rem] es:icon:stroke-2",
-                          size === "small" ? "es:h-3" : "es:h-3.5"
-                        ),
-                        slot: "decrement",
-                        icon: icons.chevronDown
-                      }
-                    )
-                  ]
-                }
-              ),
-              suffix && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  slot: "suffix",
-                  className: 'es:ml-1 es:-translate-y-px es:select-none es:leading-none es:text-current/60 es:font-variation-["wdth"_76,"wght"_325,"slnt"_-2,"ROND"_100] es:group-focus-within:text-surface-500',
-                  children: suffix
-                }
-              )
-            ] }),
-            children
-          ] })
-        }
-      )
-    }
-  );
-};
-export {
-  NumberPicker
-};
+import { t as NumberPicker } from "../../number-picker-CkA1iJNZ.js";
+import "../../build-module-sxK3nxOK.js";
+export { NumberPicker };