@edux-design/buttons 0.2.0 → 0.3.0

package/src/elements/ButtonGroup.jsx

@@ -1,404 +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 selectedIndex = normalizedOptions.findIndex(
-    (option) => option.value === selectedValue && !option.disabled
-  );
-  const firstEnabledIndex = normalizedOptions.findIndex(
-    (option) => !option.disabled
-  );
-  const activeTabStopIndex =
-    selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
-
-  const rootClasses = cx(
-    "inline-flex h-control-md 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-control-sm 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"
-      aria-orientation="horizontal"
-      className={rootClasses}
-    >
-      <div className={trackClasses}>
-        <span
-          aria-hidden="true"
-          className={cx(
-            "pointer-events-none h-control-md 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, ${indicator.y - 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={
-                option.disabled
-                  ? -1
-                  : index === activeTabStopIndex
-                    ? 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,130 +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("uses the shared control size contract", () => {
-    const { container } = render(
-      <ButtonGroup defaultValue="first">
-        <ButtonGroupItem value="first">First</ButtonGroupItem>
-        <ButtonGroupItem value="second">Second</ButtonGroupItem>
-      </ButtonGroup>,
-    );
-
-    expect(screen.getByRole("radiogroup")).toHaveClass("h-control-md");
-    expect(screen.getAllByRole("radio")[0]).toHaveClass("h-control-sm");
-    expect(container.querySelector('[aria-hidden="true"]')).toHaveClass(
-      "h-control-md",
-    );
-  });
-
-  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");
-  });
-
-  it("uses roving tabindex for keyboard navigation", () => {
-    render(
-      <ButtonGroup defaultValue="second">
-        <ButtonGroupItem value="first">First</ButtonGroupItem>
-        <ButtonGroupItem value="second">Second</ButtonGroupItem>
-        <ButtonGroupItem value="third">Third</ButtonGroupItem>
-      </ButtonGroup>,
-    );
-
-    expect(screen.getByRole("radio", { name: "Second" })).toHaveAttribute(
-      "tabindex",
-      "0",
-    );
-    expect(screen.getByRole("radio", { name: "First" })).toHaveAttribute(
-      "tabindex",
-      "-1",
-    );
-    expect(screen.getByRole("radio", { name: "Third" })).toHaveAttribute(
-      "tabindex",
-      "-1",
-    );
-  });
-
-  it("moves focus and selection with arrow keys", () => {
-    const handleChange = vi.fn();
-    render(
-      <ButtonGroup defaultValue="first" onChange={handleChange}>
-        <ButtonGroupItem value="first">First</ButtonGroupItem>
-        <ButtonGroupItem value="second">Second</ButtonGroupItem>
-        <ButtonGroupItem value="third">Third</ButtonGroupItem>
-      </ButtonGroup>,
-    );
-
-    const first = screen.getByRole("radio", { name: "First" });
-    fireEvent.keyDown(first, { key: "ArrowRight" });
-
-    const second = screen.getByRole("radio", { name: "Second" });
-    expect(second).toHaveFocus();
-    expect(second).toHaveAttribute("aria-checked", "true");
-    expect(handleChange).toHaveBeenCalledWith(
-      "second",
-      expect.objectContaining({ value: "second" }),
-    );
-  });
-
-});

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,115 +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.
- *
- * Provide an accessible name with `aria-label` or `aria-labelledby`.
- *
- * @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 aria-label="Edit" />
- * <IconButton icon={<TrashIcon />} isDanger disabled aria-label="Delete" />
- * ```
- */
-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 hasAccessibleName = Boolean(
-        props["aria-label"] || props["aria-labelledby"]
-      );
-      if (!hasAccessibleName) {
-        console.warn(
-          "[IconButton]: Provide an accessible name with aria-label or aria-labelledby."
-        );
-      }
-    }
-
-    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: "size-control-sm text-sm",
-      medium: "size-control-md text-base",
-      large: "size-control-lg text-lg",
-    };
-
-    const variants = {
-      primary:
-        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
-      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>
-    );
-  }
-);