@edux-design/buttons 0.1.2 → 0.1.4

package/src/elements/ButtonGroup.jsx

@@ -1,389 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { cx, filterChildrenByDisplayName } from "@edux-design/utils";
-
-const 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",
-  },
-};
-
-const isBrowser = typeof window !== "undefined";
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-
-/**
- * @typedef {Object} ButtonGroupOption
- * @property {React.ReactNode} [label] - Main label for the option.
- * @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
- * @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
- * @property {React.ReactNode} [endAdornment] - Optional trailing element.
- * @property {string|number} [value] - Unique value used for selection.
- * @property {boolean} [disabled] - Whether the option is disabled.
- */
-
-/**
- * Segmented button group with animated active state.
- *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
- *   value?: string|number,
- *   defaultValue?: string|number,
- *   onChange?: (value: string|number, option: ButtonGroupOption) => void,
- *   size?: "small"|"medium"|"large",
- *   isStretched?: boolean,
- * }} ButtonGroupProps
- */
-export const ButtonGroup = forwardRef(function ButtonGroup(
-  {
-    value,
-    defaultValue,
-    onChange,
-    size = "medium",
-    isStretched = false,
-    className,
-    children,
-    ...rest
-  },
-  forwardedRef
-) {
-  const normalizedOptions = useMemo(() => {
-    const childItems = filterChildrenByDisplayName(children, "ButtonGroupItem");
-    return childItems.map((child, index) => {
-      const props = child.props || {};
-      const hasValue = props.value !== undefined;
-      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 : undefined);
-
-  const [internalValue, setInternalValue] = useState(initialValue);
-  const isControlled = value !== undefined;
-  const selectedValue = isControlled ? value : internalValue;
-
-  useEffect(() => {
-    if (!isControlled && defaultValue !== undefined) {
-      setInternalValue(defaultValue);
-    }
-  }, [defaultValue, isControlled]);
-
-  useEffect(() => {
-    if (isControlled) return;
-    if (
-      normalizedOptions.length &&
-      !normalizedOptions.some((option) => option.value === internalValue)
-    ) {
-      setInternalValue(normalizedOptions[0].value);
-    }
-  }, [internalValue, isControlled, normalizedOptions]);
-
-  const buttonRefs = useRef(new Map());
-  const containerRef = useRef(null);
-  const indicatorRef = useRef({ width: 0, height: 0, x: 0, y: 0 });
-  const [indicator, setIndicator] = useState({
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0,
-  });
-
-  const setContainerRef = useCallback(
-    (node) => {
-      containerRef.current = node;
-      if (typeof forwardedRef === "function") {
-        forwardedRef(node);
-      } else if (forwardedRef) {
-        forwardedRef.current = node;
-      }
-    },
-    [forwardedRef]
-  );
-
-  const registerButtonRef = useCallback((optionValue) => {
-    return (node) => {
-      if (!buttonRefs.current) return;
-      if (node) {
-        buttonRefs.current.set(optionValue, node);
-      } else {
-        buttonRefs.current.delete(optionValue);
-      }
-    };
-  }, []);
-
-  const updateIndicator = 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]);
-
-  useEffect(() => {
-    if (!isBrowser) return;
-    const handleResize = () => updateIndicator();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [updateIndicator]);
-
-  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 = useCallback((option) => {
-    const node = buttonRefs.current.get(option.value);
-    if (node) {
-      node.focus();
-    }
-  }, []);
-
-  const handleSelect = 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 = 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 = useCallback(() => {
-    return normalizedOptions.findIndex((option) => !option.disabled);
-  }, [normalizedOptions]);
-
-  const findLastEnabledIndex = 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 = 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 = cx(
-    "relative isolate flex w-full items-center gap-8",
-    !isStretched && "w-auto"
-  );
-
-  const buttonBaseClasses = 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 (
-    <div
-      {...rest}
-      ref={setContainerRef}
-      role="radiogroup"
-      className={rootClasses}
-    >
-      <div className={trackClasses}>
-        <span
-          aria-hidden="true"
-          className={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 || undefined,
-            height: indicator.height || undefined,
-            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] : undefined;
-              if (firstOption && firstOption !== option) {
-                focusOption(firstOption);
-                handleSelect(firstOption);
-              }
-            } else if (event.key === "End") {
-              event.preventDefault();
-              const lastIndex = findLastEnabledIndex();
-              const lastOption =
-                lastIndex >= 0 ? normalizedOptions[lastIndex] : undefined;
-              if (lastOption && lastOption !== option) {
-                focusOption(lastOption);
-                handleSelect(lastOption);
-              }
-            }
-          };
-
-          const buttonClasses = 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 !== undefined &&
-            option.startAdornment !== null;
-          const endAdornment = option.endAdornment ?? option.endIcon;
-          const hasEndAdornment =
-            endAdornment !== undefined && endAdornment !== null;
-
-          return (
-            <button
-              key={String(option.value)}
-              ref={registerButtonRef(option.value)}
-              type="button"
-              role="radio"
-              aria-checked={isActive}
-              // tabIndex={isActive ? 0 : -1}
-              disabled={option.disabled}
-              className={buttonClasses}
-              onClick={() => handleSelect(option)}
-              onKeyDown={handleKeyDown}
-              data-state={isActive ? "active" : "inactive"}
-            >
-              {hasStartAdornment && (
-                <span
-                  aria-hidden="true"
-                  className="flex items-center text-current"
-                >
-                  {option.startAdornment}
-                </span>
-              )}
-
-              <span className="flex items-center gap-1 leading-none text-current">
-                {option.label ?? `Option ${index + 1}`}
-              </span>
-
-              {hasEndAdornment && (
-                <span
-                  aria-hidden="true"
-                  className="flex items-center text-current"
-                >
-                  {endAdornment}
-                </span>
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-});

package/src/elements/ButtonGroup.test.jsx

@@ -1,69 +0,0 @@
-import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { ButtonGroup } from "./ButtonGroup";
-import { ButtonGroupItem } from "./ButtonGroupItem";
-
-describe("ButtonGroup", () => {
-  it("renders provided options and honors defaultValue", () => {
-    render(
-      <ButtonGroup defaultValue="second">
-        <ButtonGroupItem value="first">Label A (11)</ButtonGroupItem>
-        <ButtonGroupItem value="second">Label B (11)</ButtonGroupItem>
-        <ButtonGroupItem value="alert" endAdornment={<span>!</span>}>
-          Label C
-        </ButtonGroupItem>
-      </ButtonGroup>
-    );
-
-    expect(screen.getAllByRole("radio")).toHaveLength(3);
-
-    expect(
-      screen.getByRole("radio", { name: "Label B (11)" })
-    ).toHaveAttribute("aria-checked", "true");
-
-    expect(
-      screen.getByRole("radio", { name: "Label A (11)" })
-    ).toHaveAttribute("aria-checked", "false");
-
-    expect(screen.getByText("!")).toBeInTheDocument();
-  });
-
-  it("moves selection when clicking on an option", () => {
-    const handleChange = vi.fn();
-    render(
-      <ButtonGroup defaultValue="first" onChange={handleChange}>
-        <ButtonGroupItem value="first">Label A (11)</ButtonGroupItem>
-        <ButtonGroupItem value="second">Label B (11)</ButtonGroupItem>
-        <ButtonGroupItem value="alert">Label C</ButtonGroupItem>
-      </ButtonGroup>
-    );
-
-    const second = screen.getByRole("radio", { name: "Label B (11)" });
-
-    fireEvent.click(second);
-
-    expect(handleChange).toHaveBeenCalledWith(
-      "second",
-      expect.objectContaining({ value: "second" })
-    );
-    expect(second).toHaveAttribute("aria-checked", "true");
-  });
-
-  it("ignores clicks for disabled options", () => {
-    const handleChange = vi.fn();
-    render(
-      <ButtonGroup defaultValue="first" onChange={handleChange}>
-        <ButtonGroupItem value="first">First</ButtonGroupItem>
-        <ButtonGroupItem value="second" disabled>
-          Second
-        </ButtonGroupItem>
-      </ButtonGroup>
-    );
-
-    const disabled = screen.getByRole("radio", { name: "Second" });
-    fireEvent.click(disabled);
-
-    expect(handleChange).not.toHaveBeenCalled();
-    expect(disabled).toHaveAttribute("aria-checked", "false");
-  });
-});

package/src/elements/ButtonGroupItem.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-export function ButtonGroupItem(_props) {
-  return null;
-}
-
-ButtonGroupItem.displayName = "ButtonGroupItem";
-

package/src/elements/IconButton.jsx

@@ -1,104 +0,0 @@
-import React, { forwardRef } from "react";
-import { cx } from "@edux-design/utils";
-
-/**
- * Props for the IconButton component.
- *
- * Extends all native HTML `<button>` attributes and accepts an icon prop.
- * Designed for circular icon-only buttons that follow the same
- * design-system patterns as the regular Button.
- *
- * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   icon: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   disabled?: boolean,
- *   className?: string
- * }} IconButtonProps
- */
-
-/**
- * IconButton component.
- *
- * Provides a circular button used for icon-only actions, matching
- * the design-system variants and states of the main Button component.
- *
- * @component
- * @type {React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>}
- *
- * @example
- * ```jsx
- * <IconButton icon={<XIcon />} aria-label="Close" />
- * <IconButton icon={<EditIcon />} isSecondary />
- * <IconButton icon={<TrashIcon />} isDanger disabled />
- * ```
- */
-export const IconButton = 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 = cx(defaults, sizes[size], variants[variant], className);
-
-    return (
-      <button
-        role="button"
-        type="button"
-        aria-disabled={disabled}
-        disabled={disabled}
-        className={STYLES}
-        ref={ref}
-        {...props}
-      >
-        {icon}
-      </button>
-    );
-  }
-);

package/src/elements/MenuButton.jsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { MenuButtonContext } from "../util/MenuButtonContext";
-import { cx } from "@edux-design/utils";
-import { Chevron } from "@edux-design/icons";
-
-/**
- * Props for the MenuButton component.
- *
- * @typedef {Object} MenuButtonProps
- * @property {React.ReactNode} [children] - Content to display inside the button (usually label or icon).
- * @property {"small"|"medium"} [size="medium"] - Size variant controlling button height.
- */
-
-/**
- * MenuButton component.
- *
- * Provides a styled menu trigger button with optional sizing.
- * It uses a `MenuButtonContext` provider to share internal state
- * with child menu items.
- *
- * @component
- * @type {React.FC<MenuButtonProps>}
- *
- * @example
- * ```jsx
- * <MenuButton size="small">Options</MenuButton>
- * ```
- */
-export function MenuButton({ children, size }) {
-  const SPLIT_BUTTON_STYLES = 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 === undefined,
-    }
-  );
-
-  return (
-    <MenuButtonContext.Provider value>
-      <div className={SPLIT_BUTTON_STYLES}>{children}</div>
-      <Chevron />
-    </MenuButtonContext.Provider>
-  );
-}

package/src/index.js

@@ -1,6 +0,0 @@
-export { IconButton } from "./elements/IconButton";
-export { Button } from "./elements/Button";
-export { MenuButton } from "./elements/MenuButton";
-export { ButtonGroup } from "./elements/ButtonGroup";
-export { ButtonGroupItem } from "./elements/ButtonGroupItem";
-export { ButtonCounter } from "./elements/ButtonCounter";

package/src/util/MenuButtonContext.jsx

@@ -1,3 +0,0 @@
-import React, { createContext, useContext } from "react";
-
-export const MenuButtonContext = createContext();

package/tsconfig.json

@@ -1,12 +0,0 @@
-
-{
-
-    "compilerOptions": {
-        "allowJs": true,
-        "checkJs": false,            
-        "declaration": true,
-        "emitDeclarationOnly": true, 
-        "jsx": "react-jsx",
-        "outDir": "dist"
-    }
-}