@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/checkbox/checkbox.js

@@ -1,391 +1,2 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { b as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-CJ-HBf0L.js";
-import { b as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$fabf2dc03a41866e, k as $df56164dff5785e2$export$4338b53315abf666, l as $5dc95899b306f630$export$c9058316764c140e, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e } from "../../utils-Cr3pLd9c.js";
-import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import $dbSRa$react__default, { useEffect, useMemo, useRef, forwardRef, useContext, createContext } from "react";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-BrbMhS2N.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-Ck5xMtDr.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-Ddc7N8pR.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-H_lORSWO.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-B2glEZ25.js";
-import { y as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-DkmPQdGE.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DZnWrkn8.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { icons } from "../../icons/icons.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-import { c as cva } from "../../index-BHpUy2Ix.js";
-function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
-  let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
-    ...props,
-    value: state.isSelected
-  });
-  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
-  let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577({
-    ...props,
-    isInvalid
-  }, state, inputRef);
-  $e93e671b31057976$export$b8473d3665f3a75a(props, validationState, inputRef);
-  let { isIndeterminate, isRequired, validationBehavior = "aria" } = props;
-  useEffect(() => {
-    if (inputRef.current) inputRef.current.indeterminate = !!isIndeterminate;
-  });
-  let { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
-    isDisabled: isDisabled || isReadOnly,
-    onPress() {
-      let { [$e5be200c675c3b3a$export$a763b9476acd3eb]: groupValidationState } = props;
-      let { commitValidation } = groupValidationState ? groupValidationState : validationState;
-      commitValidation();
-    }
-  });
-  return {
-    labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, pressProps, useMemo(() => ({
-      // Prevent label from being focused when mouse down on it.
-      // Note, this does not prevent the input from being focused in the `click` event.
-      onMouseDown: (e) => e.preventDefault()
-    }), [])),
-    inputProps: {
-      ...inputProps,
-      checked: isSelected,
-      "aria-required": isRequired && validationBehavior === "aria" || void 0,
-      required: isRequired && validationBehavior === "native"
-    },
-    isSelected,
-    isPressed,
-    isDisabled,
-    isReadOnly,
-    isInvalid,
-    validationErrors,
-    validationDetails
-  };
-}
-const $1ae600c947479353$export$ec98120685d4f57d = /* @__PURE__ */ new WeakMap();
-function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
-  const toggleState = $3017fa7ffdddec74$export$8042c6c013fd5226({
-    isReadOnly: props.isReadOnly || state.isReadOnly,
-    isSelected: state.isSelected(props.value),
-    defaultSelected: state.defaultValue.includes(props.value),
-    onChange(isSelected) {
-      if (isSelected) state.addValue(props.value);
-      else state.removeValue(props.value);
-      if (props.onChange) props.onChange(isSelected);
-    }
-  });
-  let { name, form, descriptionId, errorMessageId, validationBehavior } = $1ae600c947479353$export$ec98120685d4f57d.get(state);
-  var _props_validationBehavior;
-  validationBehavior = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : validationBehavior;
-  let { realtimeValidation } = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
-    ...props,
-    value: toggleState.isSelected,
-    // Server validation is handled at the group level.
-    name: void 0,
-    validationBehavior: "aria"
-  });
-  let nativeValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let updateValidation = () => {
-    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
-  };
-  useEffect(updateValidation);
-  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
-  let displayValidation = validationBehavior === "native" ? state.displayValidation : combinedRealtimeValidation;
-  var _props_isRequired;
-  let res = $406796ff087fe49b$export$e375f10ce42261c5({
-    ...props,
-    isReadOnly: props.isReadOnly || state.isReadOnly,
-    isDisabled: props.isDisabled || state.isDisabled,
-    name: props.name || name,
-    form: props.form || form,
-    isRequired: (_props_isRequired = props.isRequired) !== null && _props_isRequired !== void 0 ? _props_isRequired : state.isRequired,
-    validationBehavior,
-    [$e5be200c675c3b3a$export$a763b9476acd3eb]: {
-      realtimeValidation: combinedRealtimeValidation,
-      displayValidation,
-      resetValidation: state.resetValidation,
-      commitValidation: state.commitValidation,
-      updateValidation(v) {
-        nativeValidation.current = v;
-        updateValidation();
-      }
-    }
-  }, toggleState, inputRef);
-  return {
-    ...res,
-    inputProps: {
-      ...res.inputProps,
-      "aria-describedby": [
-        props["aria-describedby"],
-        state.isInvalid ? errorMessageId : null,
-        descriptionId
-      ].filter(Boolean).join(" ") || void 0
-    }
-  };
-}
-const $bc237834342dbd75$export$139c5b8563afc1fc = /* @__PURE__ */ createContext(null);
-const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef(function Checkbox(props, ref) {
-  let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $4e85f108e88277b8$export$b085522c77523c51);
-  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 groupState = useContext($bc237834342dbd75$export$139c5b8563afc1fc);
-  let inputRef = $df56164dff5785e2$export$4338b53315abf666(useMemo(() => $5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null), [
-    userProvidedInputRef,
-    props.inputRef
-  ]));
-  let { labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid } = groupState ? $fba3e38d5ca8983f$export$353b32fc6898d37d({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
-    // it's passed explicitly here to avoid typescript error (requires ignore).
-    // @ts-ignore
-    value: props.value,
-    // ReactNode type doesn't allow function children.
-    children: typeof props.children === "function" ? true : props.children
-  }, groupState, inputRef) : $406796ff087fe49b$export$e375f10ce42261c5({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    children: typeof props.children === "function" ? true : props.children,
-    validationBehavior
-  }, $3017fa7ffdddec74$export$8042c6c013fd5226(props), inputRef);
-  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
-  let isInteractionDisabled = isDisabled || isReadOnly;
-  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
-    ...props,
-    isDisabled: isInteractionDisabled
-  });
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-Checkbox",
-    values: {
-      isSelected,
-      isIndeterminate: props.isIndeterminate || false,
-      isPressed,
-      isHovered,
-      isFocused,
-      isFocusVisible,
-      isDisabled,
-      isReadOnly,
-      isInvalid,
-      isRequired: props.isRequired || false
-    }
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.id;
-  delete DOMProps.onClick;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.label, {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
-    ref,
-    slot: props.slot || void 0,
-    "data-selected": isSelected || void 0,
-    "data-indeterminate": props.isIndeterminate || void 0,
-    "data-pressed": isPressed || void 0,
-    "data-hovered": isHovered || void 0,
-    "data-focused": isFocused || void 0,
-    "data-focus-visible": isFocusVisible || void 0,
-    "data-disabled": isDisabled || void 0,
-    "data-readonly": isReadOnly || void 0,
-    "data-invalid": isInvalid || void 0,
-    "data-required": props.isRequired || void 0
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
-    elementType: "span"
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
-    ref: inputRef
-  })), renderProps.children);
-});
-/**
- * A simple checkbox.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - The checkbox icon.
- * @param {string} [props.label] - The checkbox label.
- * @param {string} [props.subtitle] - The checkbox subtitle.
- * @param {boolean} props.checked - Whether the checkbox is checked.
- * @param {boolean} [props.disabled] - Whether the checkbox is disabled.
- * @param {boolean} [props.readOnly] - Whether the checkbox is read-only.
- * @param {boolean} [props.indeterminate] - Whether the checkbox is in an indeterminate state.
- * @param {Function} props.onChange - The function to call when the checkbox is changed.
- * @param {string} [props.className] - Additional classes to add to the checkbox container.
- * @param {string} [props.labelClassName] - Additional classes to add to the label container.
- * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
- * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
- * @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 Checkbox component.
- *
- * @example
- * <Checkbox
- *  label='My label'
- *  checked={myValue}
- *  onChange={(value) => setMyValue(value)}
- * />
- *
- * @preserve
- */
-const Checkbox2 = (props) => {
-  const {
-    icon,
-    label,
-    subtitle,
-    checked,
-    disabled,
-    readOnly,
-    indeterminate,
-    onChange,
-    className,
-    labelClassName,
-    inlineSubtitle,
-    flat,
-    alignEnd,
-    children,
-    hidden,
-    ...other
-  } = props;
-  if (hidden) {
-    return null;
-  }
-  const checkboxClasses = cva(
-    [
-      "es:size-5 es:shrink-0",
-      "es:grid es:place-items-center es:grid-cols-1 es:grid-rows-1",
-      "es:*:row-start-1 es:*:col-start-1",
-      "es:rounded-sm",
-      "es:transition-plus es:duration-300 es:ease-spring-smooth",
-      "es:inset-ring",
-      "es:any-focus:outline-hidden",
-      "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/30"
-    ],
-    {
-      variants: {
-        disabled: {
-          true: "es:cursor-not-allowed",
-          false: "es:inset-shadow-xs es:bg-linear-to-b es:from-25%"
-        }
-      },
-      compoundVariants: [
-        { flat: false, disabled: false, class: "es:shadow-xs es:shadow-black/5" },
-        //
-        {
-          active: false,
-          disabled: false,
-          class: [
-            "es:bg-secondary-50 es:inset-ring-secondary-300/80",
-            "es:from-black/1 es:to-black/5",
-            "es:hover:bg-surface-100 es:hover:inset-ring-surface-300/60",
-            "es:inset-shadow-white/50",
-            "es:group-focus-visible:inset-ring-accent-500"
-          ]
-        },
-        {
-          active: true,
-          disabled: false,
-          class: [
-            "es:bg-accent-600 es:inset-ring-accent-800/5 es:text-white",
-            "es:from-accent-50/10 es:to-accent-50/2",
-            "es:inset-shadow-accent-50/35",
-            "es:group-focus-visible:inset-ring-accent-950"
-          ]
-        },
-        //
-        {
-          active: true,
-          disabled: true,
-          class: ["es:bg-secondary-400 es:inset-ring-secondary-400 es:text-white"]
-        },
-        {
-          active: false,
-          disabled: true,
-          class: ["es:bg-white es:inset-ring-secondary-300 es:text-secondary-50", "es:bg-linear-to-b es:from-secondary-800/0 es:to-secondary-800/3"]
-        }
-      ],
-      defaultVariants: {
-        flat: false,
-        active: false,
-        indeterminate: false,
-        checked: false,
-        disabled: false
-      }
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    $bc237834342dbd75$export$48513f6b9f8ce62d,
-    {
-      isDisabled: disabled,
-      isIndeterminate: indeterminate,
-      isReadOnly: readOnly,
-      isSelected: checked ?? false,
-      onChange,
-      className: clsx("es:group es:flex es:w-full es:items-center es:gap-2", className),
-      ...other,
-      children: [
-        !alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
-          RichLabel,
-          {
-            icon,
-            label,
-            subtitle,
-            className: labelClassName,
-            inlineSubtitle,
-            fullSizeSubtitle: true,
-            fullWidth: true,
-            as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-            noColor: true
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: checkboxClasses({
-              active: checked || indeterminate,
-              indeterminate,
-              checked,
-              disabled,
-              flat
-            }),
-            children: [
-              /* @__PURE__ */ jsx(
-                AnimatedVisibility,
-                {
-                  transition: "scaleRotateFade",
-                  visible: indeterminate,
-                  className: "es:transition-none",
-                  children: /* @__PURE__ */ jsx("div", { className: clsx("es:h-0.5 es:w-3 es:rounded-full es:bg-white", !disabled && "es:shadow-xs es:shadow-accent-950/30") })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AnimatedVisibility,
-                {
-                  transition: "scaleRotateFade",
-                  visible: !indeterminate && checked,
-                  className: clsx("es:transition-none es:icon:size-3.5 es:icon:stroke-[2.5]", !disabled && "es:icon:drop-shadow-xs es:icon:drop-shadow-accent-950/30"),
-                  noInitial: true,
-                  children: icons.check
-                }
-              )
-            ]
-          }
-        ),
-        alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
-          RichLabel,
-          {
-            label,
-            subtitle,
-            className: clsx(subtitle && "es:mt-1.25", labelClassName),
-            inlineSubtitle,
-            fullSizeSubtitle: true,
-            as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-            noColor: true
-          }
-        ),
-        !(icon || label || subtitle) && children
-      ]
-    }
-  );
-};
-export {
-  Checkbox2 as Checkbox
-};
+import { t as Checkbox } from "../../checkbox-D0AWkLhp.js";
+export { Checkbox };