@edux-design/buttons 0.0.2 → 0.0.4

package/src/demo/ButtonGroup.stories.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { ButtonGroup, ButtonGroupItem } from "./../index";
+import { Warning } from "@edux-design/icons";
+
+export default {
+  title: "Components/ButtonGroup",
+  component: ButtonGroup,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    isStretched: { control: "boolean" },
+  },
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState(args.value ?? args.defaultValue ?? "one");
+  return (
+    <ButtonGroup
+      {...args}
+      value={value}
+      onChange={(nextValue) => {
+        setValue(nextValue);
+        args.onChange?.(nextValue);
+      }}
+    >
+      <ButtonGroupItem value="one">Label (11)</ButtonGroupItem>
+      <ButtonGroupItem value="two">Label (11)</ButtonGroupItem>
+      <ButtonGroupItem
+        value="alert"
+        endIcon={<Warning className="h-4 w-4 text-warning-600" />}
+      >
+        Label
+      </ButtonGroupItem>
+    </ButtonGroup>
+  );
+};
+
+export const Playground = Template.bind({});
+Playground.args = { defaultValue: "one" };
+
+export const WithIconCounts = () => {
+  const [value, setValue] = useState("inbox");
+
+  return (
+    <div className="w-[360px]">
+      <ButtonGroup
+        isStretched
+        value={value}
+        onChange={(next) => setValue(next)}
+      >
+        <ButtonGroupItem value="inbox">Inbox (11)</ButtonGroupItem>
+        <ButtonGroupItem value="drafts">Drafts (11)</ButtonGroupItem>
+        <ButtonGroupItem
+          value="alerts"
+          endAdornment={<Warning className="h-3.5 w-3.5 text-warning-600" />}
+        >
+          Alerts
+        </ButtonGroupItem>
+      </ButtonGroup>
+    </div>
+  );
+};

package/src/elements/Button.jsx

@@ -1,6 +1,40 @@
 import React, { forwardRef } from "react";
 import { cx } from "@edux-design/utils";
 
+/**
+ * Props for the Button component.
+ *
+ * Extends all native HTML `<button>` attributes, while adding
+ * design-system variants and state controls.
+ *
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   children?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   className?: string
+ * }} ButtonProps
+ */
+
+/**
+ * Button component.
+ *
+ * Provides design-system styled button with support for
+ * multiple visual variants, sizing, and states.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
+ *
+ * @example
+ * ```jsx
+ * <Button size="small">Save</Button>
+ * <Button isSecondary>Cancel</Button>
+ * <Button isDanger disabled>Delete</Button>
+ * ```
+ */
 export const Button = forwardRef(
   (
     {
@@ -22,8 +56,7 @@ export const Button = forwardRef(
     if (isDanger) variant = "danger";
     if (disabled) variant = "disabled";
 
-    // handle conflicting props - the last bool wins. i.e. The priority we are accepting is isbare, isSecondary, isDanger, disabled
-
+    // handle conflicting props - the last bool wins
     if (process.env.NODE_ENV !== "production") {
       const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
       if (count > 1) {
@@ -39,7 +72,6 @@ export const Button = forwardRef(
     const fonts =
       "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
 
-    //FIX-ME - Remove hardcoded values
     const sizes = {
       small: "h-[36px] py-8 px-16 rounded-lg text-sm",
       medium: "h-[44px] py-8 px-16 rounded-lg text-base",

package/src/elements/ButtonGroup.jsx

@@ -0,0 +1,387 @@
+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.
+ * @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 hasendIcon =
+            option.endIcon !== undefined && option.endIcon !== 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>
+
+              {hasendIcon && (
+                <span
+                  aria-hidden="true"
+                  className="flex items-center text-current"
+                >
+                  {option.endIcon}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

package/src/elements/ButtonGroup.test.jsx

@@ -0,0 +1,69 @@
+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

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

package/src/elements/IconButton.jsx

@@ -0,0 +1,104 @@
+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";
+
+    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>
+    );
+  }
+);