@edux-design/buttons 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,536 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.js
-var index_exports = {};
-__export(index_exports, {
-  Button: () => Button,
-  ButtonGroup: () => ButtonGroup,
-  ButtonGroupItem: () => ButtonGroupItem,
-  IconButton: () => IconButton,
-  MenuButton: () => MenuButton
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/elements/IconButton.jsx
-var import_react = __toESM(require("react"));
-var import_utils = require("@edux-design/utils");
-var import_jsx_runtime = require("react/jsx-runtime");
-var IconButton = (0, import_react.forwardRef)(
-  ({
-    icon,
-    size = "medium",
-    isSecondary,
-    isDanger,
-    isBare,
-    disabled,
-    className,
-    ...props
-  }, ref) => {
-    let variant = "primary";
-    if (isBare) variant = "bare";
-    if (isSecondary) variant = "secondary";
-    if (isDanger) variant = "danger";
-    if (disabled) variant = "disabled";
-    if (process.env.NODE_ENV !== "production") {
-      const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
-      if (count > 1) {
-        console.warn(
-          "[IconButton]: Multiple variant props passed. Using the highest priority only."
-        );
-      }
-    }
-    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full cursor-pointer";
-    const sizes = {
-      small: "h-[36px] w-[36px] text-sm",
-      medium: "h-[44px] w-[44px] text-base",
-      large: "h-[56px] w-[56px] text-lg"
-    };
-    const variants = {
-      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
-      secondary: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
-      bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
-      danger: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
-      disabled: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline cursor-not-allowed"
-    };
-    const STYLES = (0, import_utils.cx)(defaults, sizes[size], variants[variant], className);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        role: "button",
-        type: "button",
-        "aria-disabled": disabled,
-        disabled,
-        className: STYLES,
-        ref,
-        ...props,
-        children: icon
-      }
-    );
-  }
-);
-
-// src/elements/Button.jsx
-var import_react2 = __toESM(require("react"));
-var import_utils2 = require("@edux-design/utils");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(
-  ({
-    children,
-    startIcon,
-    endIcon,
-    size = "medium",
-    isSecondary,
-    isDanger,
-    isBare,
-    isStretched,
-    disabled,
-    className,
-    ...props
-  }, ref) => {
-    let variant = "primary";
-    if (disabled) {
-      variant = "disabled";
-    } else if (isDanger && isBare) {
-      variant = "dangerBare";
-    } else if (isDanger) {
-      variant = "danger";
-    } else if (isSecondary) {
-      variant = "secondary";
-    } else if (isBare) {
-      variant = "bare";
-    }
-    if (process.env.NODE_ENV !== "production") {
-      const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
-      const hasAllowedCombo = isDanger && isBare && count === 2;
-      if (count > 1 && !hasAllowedCombo) {
-        console.warn(
-          "[Button]: Multiple variant props passed. Using the highest priority only."
-        );
-      }
-    }
-    const defaults = "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
-    const fonts = "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
-    const sizes = {
-      small: "h-[36px] py-8 px-16 rounded-lg text-sm",
-      medium: "h-[44px] py-8 px-16 rounded-lg text-base",
-      large: "h-[56px] py-8 px-16 rounded-lg text-lg"
-    };
-    const width = isStretched ? "w-full" : "w-fit-content";
-    const variants = {
-      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus  hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
-      secondary: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
-      bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
-      dangerBare: "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
-      danger: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
-      disabled: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline"
-    };
-    const STYLES = (0, import_utils2.cx)(defaults, sizes[size], width, fonts, variants[variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      "button",
-      {
-        role: "button",
-        type: "button",
-        "aria-disabled": disabled,
-        disabled,
-        className: STYLES,
-        ref,
-        ...props,
-        children: [
-          startIcon,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children }) : null,
-          endIcon
-        ]
-      }
-    );
-  }
-);
-
-// src/elements/MenuButton.jsx
-var import_react4 = __toESM(require("react"));
-
-// src/util/MenuButtonContext.jsx
-var import_react3 = __toESM(require("react"));
-var MenuButtonContext = (0, import_react3.createContext)();
-
-// src/elements/MenuButton.jsx
-var import_utils3 = require("@edux-design/utils");
-
-// ../icons/dist/index.mjs
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var SvgChevron = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "M13.586 12 9.293 7.707a1 1 0 0 1 1.414-1.414l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414z",
-        clipRule: "evenodd"
-      }
-    )
-  }
-);
-var Chevron_default = SvgChevron;
-
-// src/elements/MenuButton.jsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function MenuButton({ children, size }) {
-  const SPLIT_BUTTON_STYLES = (0, import_utils3.cx)(
-    "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
-    {
-      "h-[32px]": size === "small",
-      "h-[40px] py-2": size === "medium" || size === void 0
-    }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuButtonContext.Provider, { value: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: SPLIT_BUTTON_STYLES, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chevron_default, {})
-  ] });
-}
-
-// src/elements/ButtonGroup.jsx
-var import_react5 = __toESM(require("react"));
-var import_utils4 = require("@edux-design/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SIZE_STYLES = {
-  small: {
-    button: "text-xs px-12 py-6 rounded-md "
-  },
-  medium: {
-    button: "text-sm px-12 py-6 rounded-md "
-  },
-  large: {
-    button: "text-base px-12 py-6 rounded-md"
-  }
-};
-var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? import_react5.useLayoutEffect : import_react5.useEffect;
-var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
-  value,
-  defaultValue,
-  onChange,
-  size = "medium",
-  isStretched = false,
-  className,
-  children,
-  ...rest
-}, forwardedRef) {
-  const normalizedOptions = (0, import_react5.useMemo)(() => {
-    const childItems = (0, import_utils4.filterChildrenByDisplayName)(children, "ButtonGroupItem");
-    return childItems.map((child, index) => {
-      const props = child.props || {};
-      const hasValue = props.value !== void 0;
-      const safeValue = hasValue && props.value !== null ? props.value : index;
-      return {
-        ...props,
-        label: props.label ?? props.children ?? `Option ${index + 1}`,
-        value: safeValue
-      };
-    });
-  }, [children]);
-  const sizeStyles = SIZE_STYLES[size] ?? SIZE_STYLES.medium;
-  const initialValue = value ?? defaultValue ?? (normalizedOptions.length ? normalizedOptions[0].value : void 0);
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(initialValue);
-  const isControlled = value !== void 0;
-  const selectedValue = isControlled ? value : internalValue;
-  (0, import_react5.useEffect)(() => {
-    if (!isControlled && defaultValue !== void 0) {
-      setInternalValue(defaultValue);
-    }
-  }, [defaultValue, isControlled]);
-  (0, import_react5.useEffect)(() => {
-    if (isControlled) return;
-    if (normalizedOptions.length && !normalizedOptions.some((option) => option.value === internalValue)) {
-      setInternalValue(normalizedOptions[0].value);
-    }
-  }, [internalValue, isControlled, normalizedOptions]);
-  const buttonRefs = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
-  const containerRef = (0, import_react5.useRef)(null);
-  const indicatorRef = (0, import_react5.useRef)({ width: 0, height: 0, x: 0, y: 0 });
-  const [indicator, setIndicator] = (0, import_react5.useState)({
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0
-  });
-  const setContainerRef = (0, import_react5.useCallback)(
-    (node) => {
-      containerRef.current = node;
-      if (typeof forwardedRef === "function") {
-        forwardedRef(node);
-      } else if (forwardedRef) {
-        forwardedRef.current = node;
-      }
-    },
-    [forwardedRef]
-  );
-  const registerButtonRef = (0, import_react5.useCallback)((optionValue) => {
-    return (node) => {
-      if (!buttonRefs.current) return;
-      if (node) {
-        buttonRefs.current.set(optionValue, node);
-      } else {
-        buttonRefs.current.delete(optionValue);
-      }
-    };
-  }, []);
-  const updateIndicator = (0, import_react5.useCallback)(() => {
-    const container = containerRef.current;
-    const target = buttonRefs.current.get(selectedValue);
-    if (!container || !target) {
-      if (indicatorRef.current.width !== 0) {
-        indicatorRef.current = { width: 0, height: 0, x: 0, y: 0 };
-        setIndicator(indicatorRef.current);
-      }
-      return;
-    }
-    const containerRect = container.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-    const next = {
-      width: targetRect.width,
-      height: targetRect.height,
-      x: targetRect.left - containerRect.left,
-      y: targetRect.top - containerRect.top
-    };
-    const prev = indicatorRef.current;
-    if (prev.width !== next.width || prev.height !== next.height || prev.x !== next.x || prev.y !== next.y) {
-      indicatorRef.current = next;
-      setIndicator(next);
-    }
-  }, [selectedValue]);
-  useIsomorphicLayoutEffect(() => {
-    updateIndicator();
-  }, [updateIndicator, normalizedOptions.length, size]);
-  (0, import_react5.useEffect)(() => {
-    if (!isBrowser) return;
-    const handleResize = () => updateIndicator();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [updateIndicator]);
-  (0, import_react5.useEffect)(() => {
-    if (!isBrowser) return;
-    const node = containerRef.current;
-    if (!node || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      updateIndicator();
-    });
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [updateIndicator]);
-  const focusOption = (0, import_react5.useCallback)((option) => {
-    const node = buttonRefs.current.get(option.value);
-    if (node) {
-      node.focus();
-    }
-  }, []);
-  const handleSelect = (0, import_react5.useCallback)(
-    (option) => {
-      if (option.disabled || option.value === selectedValue) {
-        return;
-      }
-      if (!isControlled) {
-        setInternalValue(option.value);
-      }
-      if (typeof onChange === "function") {
-        onChange(option.value, option);
-      }
-    },
-    [isControlled, onChange, selectedValue]
-  );
-  const getNextEnabledIndex = (0, import_react5.useCallback)(
-    (startIndex, direction) => {
-      if (!normalizedOptions.length) return -1;
-      let nextIndex = startIndex;
-      for (let i = 0; i < normalizedOptions.length; i += 1) {
-        nextIndex = (nextIndex + direction + normalizedOptions.length) % normalizedOptions.length;
-        if (!normalizedOptions[nextIndex].disabled) {
-          return nextIndex;
-        }
-      }
-      return startIndex;
-    },
-    [normalizedOptions]
-  );
-  const findFirstEnabledIndex = (0, import_react5.useCallback)(() => {
-    return normalizedOptions.findIndex((option) => !option.disabled);
-  }, [normalizedOptions]);
-  const findLastEnabledIndex = (0, import_react5.useCallback)(() => {
-    for (let i = normalizedOptions.length - 1; i >= 0; i -= 1) {
-      if (!normalizedOptions[i].disabled) {
-        return i;
-      }
-    }
-    return -1;
-  }, [normalizedOptions]);
-  const indicatorVisible = indicator.width > 0 && indicator.height > 0;
-  const rootClasses = (0, import_utils4.cx)(
-    "inline-flex h-[44px] rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
-    isStretched ? "w-full" : "w-auto",
-    className
-  );
-  const trackClasses = (0, import_utils4.cx)(
-    "relative isolate flex w-full items-center gap-8",
-    !isStretched && "w-auto"
-  );
-  const buttonBaseClasses = (0, import_utils4.cx)(
-    "relative z-10 h-[36px] inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-tight transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:shadow-focus motion-reduce:duration-0",
-    sizeStyles.button,
-    isStretched ? "flex-1" : "w-auto"
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    {
-      ...rest,
-      ref: setContainerRef,
-      role: "radiogroup",
-      className: rootClasses,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: trackClasses, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: (0, import_utils4.cx)(
-              "pointer-events-none h-[44px] absolute rounded-md border-2 border-border-primary-emphasis bg-bg-base shadow-[0_8px_20px_rgb(22_92_131/0.18)] transition-[transform,width,height] duration-300 ease-out motion-reduce:duration-0",
-              !indicatorVisible && "opacity-0"
-            ),
-            style: {
-              width: indicator.width || void 0,
-              height: indicator.height || void 0,
-              transform: `translate(${indicator.x - 4}px`
-            }
-          }
-        ),
-        normalizedOptions.map((option, index) => {
-          const isActive = option.value === selectedValue;
-          const handleKeyDown = (event) => {
-            if (option.disabled) return;
-            if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-              event.preventDefault();
-              const nextIndex = getNextEnabledIndex(index, 1);
-              const nextOption = normalizedOptions[nextIndex];
-              if (nextOption && nextOption !== option) {
-                focusOption(nextOption);
-                handleSelect(nextOption);
-              }
-            } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-              event.preventDefault();
-              const prevIndex = getNextEnabledIndex(index, -1);
-              const prevOption = normalizedOptions[prevIndex];
-              if (prevOption && prevOption !== option) {
-                focusOption(prevOption);
-                handleSelect(prevOption);
-              }
-            } else if (event.key === "Home") {
-              event.preventDefault();
-              const firstIndex = findFirstEnabledIndex();
-              const firstOption = firstIndex >= 0 ? normalizedOptions[firstIndex] : void 0;
-              if (firstOption && firstOption !== option) {
-                focusOption(firstOption);
-                handleSelect(firstOption);
-              }
-            } else if (event.key === "End") {
-              event.preventDefault();
-              const lastIndex = findLastEnabledIndex();
-              const lastOption = lastIndex >= 0 ? normalizedOptions[lastIndex] : void 0;
-              if (lastOption && lastOption !== option) {
-                focusOption(lastOption);
-                handleSelect(lastOption);
-              }
-            }
-          };
-          const buttonClasses = (0, import_utils4.cx)(
-            buttonBaseClasses,
-            option.disabled ? "cursor-not-allowed text-fg-inactive opacity-60" : "cursor-pointer text-fg-subtle hover:text-fg-base",
-            isActive && "text-fg-primary-emphasis",
-            !isActive && "hover:bg-bg-minimal-5 active:bg-bg-inactive"
-          );
-          const hasStartAdornment = option.startAdornment !== void 0 && option.startAdornment !== null;
-          const endAdornment = option.endAdornment ?? option.endIcon;
-          const hasEndAdornment = endAdornment !== void 0 && endAdornment !== null;
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-            "button",
-            {
-              ref: registerButtonRef(option.value),
-              type: "button",
-              role: "radio",
-              "aria-checked": isActive,
-              disabled: option.disabled,
-              className: buttonClasses,
-              onClick: () => handleSelect(option),
-              onKeyDown: handleKeyDown,
-              "data-state": isActive ? "active" : "inactive",
-              children: [
-                hasStartAdornment && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "flex items-center text-current",
-                    children: option.startAdornment
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex items-center gap-1 leading-none text-current", children: option.label ?? `Option ${index + 1}` }),
-                hasEndAdornment && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "flex items-center text-current",
-                    children: endAdornment
-                  }
-                )
-              ]
-            },
-            String(option.value)
-          );
-        })
-      ] })
-    }
-  );
-});
-
-// src/elements/ButtonGroupItem.jsx
-var import_react6 = __toESM(require("react"));
-function ButtonGroupItem(_props) {
-  return null;
-}
-ButtonGroupItem.displayName = "ButtonGroupItem";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Button,
-  ButtonGroup,
-  ButtonGroupItem,
-  IconButton,
-  MenuButton
-});