@eightshift/ui-components 3.0.1 → 5.0.0

package/dist/components/toggle/switch.js

@@ -1,155 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-DkCSC521.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import React__default, { forwardRef, createContext } from "react";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-CmQX3SoX.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-C0I3vs0g.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CV5l3lf6.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-DwDr6ozG.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-f9zX67a_.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
-  let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
-  return {
-    labelProps,
-    inputProps: {
-      ...inputProps,
-      role: "switch",
-      checked: isSelected
-    },
-    isSelected,
-    isPressed,
-    isDisabled,
-    isReadOnly
-  };
-}
-const $8e59e948500a8fe1$export$8699e3b644d5a28a = /* @__PURE__ */ createContext(null);
-const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef(function Switch(props, ref) {
-  let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $8e59e948500a8fe1$export$8699e3b644d5a28a);
-  let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
-  let state = $3017fa7ffdddec74$export$8042c6c013fd5226(props);
-  let { labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed } = $b418ec0c85c52f27$export$d853f7095ae95f88({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    // ReactNode type doesn't allow function children.
-    children: typeof props.children === "function" ? true : props.children
-  }, state, inputRef);
-  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
-  let isInteractionDisabled = props.isDisabled || props.isReadOnly;
-  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
-    ...props,
-    isDisabled: isInteractionDisabled
-  });
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-Switch",
-    values: {
-      isSelected,
-      isPressed,
-      isHovered,
-      isFocused,
-      isFocusVisible,
-      isDisabled,
-      isReadOnly,
-      state
-    }
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
-  delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("label", {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
-    ref,
-    slot: props.slot || void 0,
-    "data-selected": isSelected || 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
-  }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
-    elementType: "span"
-  }, /* @__PURE__ */ React__default.createElement("input", {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
-    ref: inputRef
-  })), renderProps.children);
-});
-/**
- * A toggle switch.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {boolean} props.checked - Whether the switch is checked.
- * @param {Function} props.onChange - Function to call when the switch is toggled.
- * @param {boolean} [props.disabled] - Whether the switch is disabled.
- * @param {string} [props.id] - The ID of the switch.
- * @param {string} [props.className] - Classes to pass to the switch.
- * @param {boolean} [props.isIndeterminate] - If `true`, the switch will render in an indeterminate state.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Switch component.
- *
- * @example
- * const [checked, setChecked] = useState(false);
- *
- * <Switch
- * 	checked={checked}
- * 	onChange={() => setChecked(!checked)}
- * />
- *
- * @preserve
- */
-const Switch2 = (props) => {
-  const { checked, onChange, disabled, id, children, className, isIndeterminate, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    $8e59e948500a8fe1$export$b5d5cf8927ab7262,
-    {
-      id,
-      isDisabled: disabled,
-      isSelected: checked ?? false,
-      onChange,
-      className: "es:group es:flex es:items-center es:justify-between es:gap-2 es:any-focus:outline-hidden",
-      children: [
-        children,
-        /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:shrink-0 es:items-center es:justify-center es:min-h-6.5", className), children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              "es:shrink-0 es:group-not-disabled:cursor-pointer es:no-webkit-highlight",
-              "es:h-5 es:w-9 es:p-[0.1875rem] es:rounded-full",
-              "es:bg-radial-[circle_at_75%_50%]",
-              "es:border es:inset-ring es:inset-shadow-xs",
-              "es:transition",
-              "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50 es:group-focus-visible:border-accent-600",
-              !checked && !disabled && "es:border-secondary-400 es:inset-ring-secondary-100 es:from-white es:to-secondary-100",
-              checked && !disabled && "es:border-accent-700/75 es:inset-ring-accent-500 es:to-accent-500 es:from-accent-600 es:shadow-accent-600/30",
-              disabled && "es:cursor-default es:border-secondary-300 es:from-white es:to-secondary-50 es:inset-ring-secondary-200/30 es:inset-shadow-secondary-100",
-              !disabled && "es:shadow-xs"
-            ),
-            children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: clsx(
-                  "es:block es:size-3 es:rounded-full es:border es:will-change-transform es:bg-radial",
-                  "es:transition es:motion-ease-spring-snappy es:ease-[var(--motion-spring-snappy)]",
-                  !checked && "es:scale-95",
-                  !checked && !disabled && "es:border-secondary-500 es:from-secondary-500 es:to-secondary-600",
-                  checked && "es:translate-x-4",
-                  checked && !disabled && "es:border-accent-600/20 es:from-white es:to-accent-500/30 es:from-40% es:bg-white es:shadow-xs es:shadow-accent-900/60",
-                  disabled && "es:border-secondary-400 es:bg-secondary-100",
-                  isIndeterminate && "es:translate-x-2 es:scale-100"
-                )
-              }
-            )
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  Switch2 as Switch
-};

package/dist/components/toggle/toggle.js

@@ -1,64 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-icmbmNdI.js";
-import { Switch } from "./switch.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-/**
- * A toggle switch with a label and optional icon and subtitle.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {boolean} props.checked - Whether the switch is checked.
- * @param {Function} props.onChange - Function to call when the switch is toggled.
- * @param {boolean} [props.disabled] - Whether the switch is disabled.
- * @param {JSX.Element} [props.icon] - Icon to display.
- * @param {string} props.label - Label to display.
- * @param {string} [props.subtitle] - Subtitle to display.
- * @param {string} [props.className] - Classes to pass to the toggle switch.
- * @param {string} [props.labelClassName] - Classes to pass to the label.
- * @param {boolean} [props.isIndeterminate] - If `true`, the switch will render in an indeterminate state.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Toggle component.
- *
- * @example
- * const [checked, setChecked] = useState(false);
- *
- * <Toggle
- * 	icon={icons.myIcon}
- * 	label='My toggle'
- * 	checked={checked}
- * 	onChange={() => setChecked(!checked)}
- * />
- *
- * @preserve
- */
-const Toggle = (props) => {
-  const { checked, onChange, icon, label, subtitle, disabled, className, labelClassName, isIndeterminate, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Switch,
-    {
-      checked,
-      onChange,
-      disabled,
-      className,
-      isIndeterminate,
-      children: /* @__PURE__ */ jsx(
-        RichLabel,
-        {
-          as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-          icon,
-          label,
-          subtitle,
-          className: labelClassName,
-          fullWidth: true
-        }
-      )
-    }
-  );
-};
-export {
-  Toggle
-};

package/dist/components/toggle-button/toggle-button.js

@@ -1,324 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { p as $ff5963eb1fccf552$export$e08e3b67e392101e, d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-DkCSC521.js";
-import React__default, { createContext, forwardRef, useContext } from "react";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-CmQX3SoX.js";
-import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-Cg474OYB.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CV5l3lf6.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-DwDr6ozG.js";
-import { c as cva } from "../../index-BKGQ6jGS.js";
-import { Tooltip } from "../tooltip/tooltip.js";
-function $55f54f7887471b58$export$51e84d46ca0bc451(props, state, ref) {
-  const { isSelected } = state;
-  const { isPressed, buttonProps } = $701a24aa0da5b062$export$ea18c227d4417cc3({
-    ...props,
-    onPress: $ff5963eb1fccf552$export$e08e3b67e392101e(state.toggle, props.onPress)
-  }, ref);
-  return {
-    isPressed,
-    isSelected,
-    isDisabled: props.isDisabled || false,
-    buttonProps: $3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, {
-      "aria-pressed": isSelected
-    })
-  };
-}
-function $4547d1bf40011fdf$export$bc53712daae3d6e6(props, state, ref) {
-  let toggleState = {
-    isSelected: state.selectedKeys.has(props.id),
-    setSelected(isSelected2) {
-      state.setSelected(props.id, isSelected2);
-    },
-    toggle() {
-      state.toggleKey(props.id);
-    }
-  };
-  let { isPressed, isSelected, isDisabled, buttonProps } = $55f54f7887471b58$export$51e84d46ca0bc451({
-    ...props,
-    id: void 0,
-    isDisabled: props.isDisabled || state.isDisabled
-  }, toggleState, ref);
-  if (state.selectionMode === "single") {
-    buttonProps.role = "radio";
-    buttonProps["aria-checked"] = toggleState.isSelected;
-    delete buttonProps["aria-pressed"];
-  }
-  return {
-    isPressed,
-    isSelected,
-    isDisabled,
-    buttonProps
-  };
-}
-const $84b7d8702d4ff4a8$export$a8a71863db173133 = /* @__PURE__ */ createContext(null);
-const $efde0372d7a700fe$export$43506d75ebd2e218 = /* @__PURE__ */ createContext({});
-const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(function ToggleButton(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $efde0372d7a700fe$export$43506d75ebd2e218);
-  let groupState = useContext($84b7d8702d4ff4a8$export$a8a71863db173133);
-  let state = $3017fa7ffdddec74$export$8042c6c013fd5226(groupState && props.id != null ? {
-    isSelected: groupState.selectedKeys.has(props.id),
-    onChange(isSelected2) {
-      groupState.setSelected(props.id, isSelected2);
-    }
-  } : props);
-  let { buttonProps, isPressed, isSelected, isDisabled } = groupState && props.id != null ? $4547d1bf40011fdf$export$bc53712daae3d6e6({
-    ...props,
-    id: props.id
-  }, groupState, ref) : $55f54f7887471b58$export$51e84d46ca0bc451({
-    ...props,
-    id: props.id != null ? String(props.id) : void 0
-  }, state, ref);
-  let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
-  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    id: void 0,
-    values: {
-      isHovered,
-      isPressed,
-      isFocused,
-      isSelected: state.isSelected,
-      isFocusVisible,
-      isDisabled,
-      state
-    },
-    defaultClassName: "react-aria-ToggleButton"
-  });
-  return /* @__PURE__ */ React__default.createElement("button", {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, focusProps, hoverProps),
-    ...renderProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-focused": isFocused || void 0,
-    "data-disabled": isDisabled || void 0,
-    "data-pressed": isPressed || void 0,
-    "data-selected": isSelected || void 0,
-    "data-hovered": isHovered || void 0,
-    "data-focus-visible": isFocusVisible || void 0
-  });
-});
-/**
- * A simple toggle button component.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display within the button.
- * @param {ButtonSize} [props.size='default'] - The size of the button.
- * @param {ButtonType} [props.type='default'] - The type of the button.
- * @param {boolean} [props.disabled] - If `true`, the button is disabled.
- * @param {string} [props.className] - Classes to pass to the button.
- * @param {string} [props.tooltip] - Tooltip text to display on hover.
- * @param {boolean} props.selected - Whether the button is selected.
- * @param {Function} [props.onChange] - Function to run when the toggle state changes.
- * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
- * @param {Object} [props.tooltipProps] - Props to pass to the tooltip.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Button component.
- *
- * @typedef {'small' | 'default' | 'large'} ButtonSize
- * @typedef {'default' | 'selected' | 'ghost' | 'danger'} ButtonType
- *
- * @example
- * const [selected, setSelected] = useState(false);
- *
- * <ToggleButton
- * 	selected={selected}
- * 	onChange={setSelected}
- * 	icon={icons.myIcon}
- * 	/>
- *
- * <ToggleButton
- * 		selected={selected}
- * 		onChange={setSelected}
- * 		icon={icons.myIcon}
- * >
- * 		My button
- * </ToggleButton>
- *
- * @preserve
- */
-const ToggleButton2 = (props) => {
-  const { children, icon, size = "default", type = "default", disabled, className, tooltip, selected, onChange, wrapperClassName, tooltipProps, hidden, ...other } = props;
-  if (hidden) {
-    return null;
-  }
-  const componentClasses = cva(
-    [
-      "es:flex es:items-center es:gap-1",
-      "es:transition es:duration-300 es:border es:text-sm",
-      "es:any-focus:outline-hidden es:focus-visible:z-10",
-      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-      "es:focus-visible:border-accent-500",
-      "es:btn-group-mid:rounded-none",
-      "es:btn-group-h-start:rounded-r-none es:btn-group-v-start:rounded-b-none",
-      "es:btn-group-h-end:rounded-l-none es:btn-group-v-end:rounded-t-none",
-      "es:cursor-pointer",
-      icon && children ? "es:justify-start" : "es:justify-center",
-      className
-    ],
-    {
-      variants: {
-        size: {
-          small: "es:icon:size-4.5 es:rounded-md",
-          default: "es:icon:size-5.5 es:rounded-lg",
-          large: "es:icon:size-6 es:rounded-lg"
-        },
-        type: {
-          default: ["es:bg-radial-[at_50%_125%]", "es:inset-ring es:inset-shadow-xs"],
-          ghost: ["es:border-transparent es:text-secondary-700", "es:hover:bg-secondary-100", "es:disabled:border-transparent!"]
-        }
-      },
-      compoundVariants: [
-        {
-          type: "default",
-          disabled: false,
-          selected: false,
-          class: [
-            "es:text-black",
-            "es:from-secondary-50 es:to-white",
-            "es:border-secondary-300",
-            "es:inset-ring-secondary-100",
-            "es:inset-shadow-secondary-100/50",
-            "es:shadow-xs",
-            "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
-            "es:hover:text-accent-950",
-            "es:focus-visible:text-accent-950"
-          ]
-        },
-        {
-          type: "default",
-          disabled: false,
-          selected: true,
-          class: [
-            "es:text-white es:accent-text-shadow",
-            "es:from-accent-500 es:to-accent-600",
-            "es:border-accent-700",
-            "es:inset-ring es:inset-ring-accent-600",
-            "es:inset-shadow-xs es:inset-shadow-accent-400/75",
-            "es:focus-visible:border-accent-700",
-            "es:focus-visible:inset-ring es:focus-visible:inset-ring-accent-600",
-            "es:focus-visible:inset-shadow-xs es:focus-visible:inset-shadow-accent-400",
-            "es:shadow-xs es:shadow-accent-600/30"
-          ]
-        },
-        {
-          disabled: true,
-          class: "es:disabled:border-secondary-300 es:disabled:text-secondary-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
-        },
-        {
-          type: "ghost",
-          disabled: false,
-          selected: true,
-          class: ["es:bg-accent-600 es:text-white es:border-accent-600 es:shadow-xs es:shadow-accent-500/25", "es:hover:shadow-accent-600/50"]
-        },
-        // Sizes.
-        {
-          size: "small",
-          iconOnly: false,
-          class: "es:h-7 es:min-w-7"
-        },
-        {
-          size: "small",
-          iconOnly: true,
-          class: "es:size-7"
-        },
-        {
-          size: "small",
-          hasIcon: false,
-          iconOnly: false,
-          class: "es:px-2"
-        },
-        {
-          size: "small",
-          hasIcon: true,
-          iconOnly: false,
-          class: "es:px-1"
-        },
-        {
-          size: "default",
-          iconOnly: false,
-          class: "es:h-9 es:min-w-9"
-        },
-        {
-          size: "default",
-          iconOnly: true,
-          class: "es:size-9"
-        },
-        {
-          size: "default",
-          hasIcon: false,
-          iconOnly: false,
-          class: "es:px-2"
-        },
-        {
-          size: "default",
-          hasIcon: true,
-          iconOnly: false,
-          class: "es:px-1.5"
-        },
-        {
-          size: "large",
-          iconOnly: false,
-          class: "es:h-10 es:min-w-10"
-        },
-        {
-          size: "large",
-          iconOnly: true,
-          class: "es:size-10"
-        },
-        {
-          size: "large",
-          hasIcon: false,
-          iconOnly: false,
-          class: "es:px-4"
-        },
-        {
-          size: "large",
-          hasIcon: true,
-          iconOnly: false,
-          class: "es:px-2"
-        }
-      ],
-      defaultVariants: {
-        selected: false,
-        disabled: false
-      }
-    }
-  );
-  const component = /* @__PURE__ */ jsxs(
-    $efde0372d7a700fe$export$d2b052e7b4be1756,
-    {
-      isSelected: selected,
-      onChange,
-      isDisabled: disabled,
-      className: componentClasses({
-        disabled,
-        selected,
-        hasIcon: Boolean(icon),
-        iconOnly: Boolean(icon && !children),
-        size,
-        type
-      }),
-      ...other,
-      children: [
-        icon,
-        children
-      ]
-    }
-  );
-  if (!tooltip) {
-    return component;
-  }
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      text: tooltip,
-      wrapperClassName,
-      ...tooltipProps,
-      children: component
-    }
-  );
-};
-export {
-  ToggleButton2 as ToggleButton
-};