@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/toggle/switch.js

@@ -0,0 +1,156 @@
+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-CZt7LCbO.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import React__default, { forwardRef, createContext } from "react";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-ibcBUHnB.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-CDa3YAZI.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-BYi0pekx.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, ...rest } = 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",
+      ...rest,
+      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

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.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

@@ -0,0 +1,343 @@
+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-CZt7LCbO.js";
+import React__default, { createContext, forwardRef, useContext } from "react";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-ibcBUHnB.js";
+import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-Bt3BffJm.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
+import { c as cva } from "../../index-BljRBEr_.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|boolean} [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: rawTooltip,
+    selected,
+    onChange,
+    wrapperClassName,
+    tooltipProps,
+    hidden,
+    "aria-label": ariaLabel,
+    ...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
+      }
+    }
+  );
+  let tooltip = rawTooltip;
+  if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
+    tooltip = ariaLabel;
+  }
+  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
+};