@edux-design/buttons 0.1.4 → 0.2.0

package/dist/index.mjs

@@ -25,12 +25,20 @@ var IconButton = forwardRef(
           "[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: "h-[36px] w-[36px] text-sm",
-      medium: "h-[44px] w-[44px] text-base",
-      large: "h-[56px] w-[56px] text-lg"
+      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",
@@ -133,17 +141,11 @@ var Button = forwardRef2(
 );
 
 // src/elements/MenuButton.jsx
-import React4 from "react";
-
-// src/util/MenuButtonContext.jsx
-import React3, { createContext, useContext } from "react";
-var MenuButtonContext = createContext();
-
-// src/elements/MenuButton.jsx
+import React3, { forwardRef as forwardRef3 } from "react";
 import { cx as cx3 } from "@edux-design/utils";
 
 // ../icons/dist/index.mjs
-import { jsxs as jsxs2, jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var SvgChevron = (props) => /* @__PURE__ */ jsx3(
   "svg",
   {
@@ -168,23 +170,42 @@ var Chevron_default = SvgChevron;
 
 // src/elements/MenuButton.jsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function MenuButton({ children, size }) {
-  const SPLIT_BUTTON_STYLES = cx3(
-    "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
+var MenuButton = forwardRef3(function MenuButton2({
+  children,
+  caret,
+  size = "medium",
+  className,
+  type = "button",
+  "aria-haspopup": ariaHasPopup = "menu",
+  ...props
+}, ref) {
+  const styles = cx3(
+    "inline-flex items-center justify-center gap-8 rounded-lg border-2 border-border-primary-base bg-bg-base px-16 text-fg-primary-emphasis transition-all duration-300 ease-in-out outline-none focus:shadow-focus focus-visible:shadow-focus disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-bg-inactive disabled:text-fg-inactive",
     {
-      "h-[32px]": size === "small",
-      "h-[40px] py-2": size === "medium" || size === void 0
+      "min-h-control-sm text-sm": size === "small",
+      "min-h-control-md text-base": size === "medium"
+    },
+    className
+  );
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ...props,
+      ref,
+      type,
+      "aria-haspopup": ariaHasPopup,
+      className: styles,
+      children: [
+        children ? /* @__PURE__ */ jsx4("span", { children }) : null,
+        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "flex items-center text-current", children: caret ?? /* @__PURE__ */ jsx4(Chevron_default, {}) })
+      ]
     }
   );
-  return /* @__PURE__ */ jsxs3(MenuButtonContext.Provider, { value: true, children: [
-    /* @__PURE__ */ jsx4("div", { className: SPLIT_BUTTON_STYLES, children }),
-    /* @__PURE__ */ jsx4(Chevron_default, {})
-  ] });
-}
+});
 
 // src/elements/ButtonGroup.jsx
-import React5, {
-  forwardRef as forwardRef3,
+import React4, {
+  forwardRef as forwardRef4,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -207,7 +228,7 @@ var SIZE_STYLES = {
 };
 var isBrowser = typeof window !== "undefined";
 var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-var ButtonGroup = forwardRef3(function ButtonGroup2({
+var ButtonGroup = forwardRef4(function ButtonGroup2({
   value,
   defaultValue,
   onChange,
@@ -365,8 +386,15 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
     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 = cx4(
-    "inline-flex h-[44px] rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
+    "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
   );
@@ -375,7 +403,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
     !isStretched && "w-auto"
   );
   const buttonBaseClasses = cx4(
-    "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",
+    "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"
   );
@@ -385,6 +413,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
       ...rest,
       ref: setContainerRef,
       role: "radiogroup",
+      "aria-orientation": "horizontal",
       className: rootClasses,
       children: /* @__PURE__ */ jsxs4("div", { className: trackClasses, children: [
         /* @__PURE__ */ jsx5(
@@ -392,13 +421,13 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
           {
             "aria-hidden": "true",
             className: cx4(
-              "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",
+              "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 || void 0,
               height: indicator.height || void 0,
-              transform: `translate(${indicator.x - 4}px`
+              transform: `translate(${indicator.x - 4}px, ${indicator.y - 4}px)`
             }
           }
         ),
@@ -456,6 +485,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
               type: "button",
               role: "radio",
               "aria-checked": isActive,
+              tabIndex: option.disabled ? -1 : index === activeTabStopIndex ? 0 : -1,
               disabled: option.disabled,
               className: buttonClasses,
               onClick: () => handleSelect(option),
@@ -490,24 +520,25 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
 });
 
 // src/elements/ButtonGroupItem.jsx
-import React6 from "react";
+import React5 from "react";
 function ButtonGroupItem(_props) {
   return null;
 }
 ButtonGroupItem.displayName = "ButtonGroupItem";
 
 // src/elements/ButtonCounter.jsx
-import React7, {
-  forwardRef as forwardRef4,
+import React6, {
+  forwardRef as forwardRef5,
   useCallback as useCallback2,
   useEffect as useEffect2,
+  useId,
   useMemo as useMemo2,
   useRef as useRef2,
   useState as useState2
 } from "react";
 import { cx as cx5 } from "@edux-design/utils";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var ButtonCounter = forwardRef4(function ButtonCounter2({
+var ButtonCounter = forwardRef5(function ButtonCounter2({
   value,
   defaultValue = 1,
   onChange,
@@ -530,6 +561,7 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
   decrementButtonProps,
   incrementButtonProps,
   className,
+  "aria-label": ariaLabel,
   ...rest
 }, ref) {
   const isControlled = value !== void 0;
@@ -575,16 +607,16 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
   }
   const CONTROL_SIZES = {
     small: {
-      button: "h-[36px] w-[36px] text-sm",
-      display: "h-[36px] min-w-[48px] px-12 text-sm"
+      button: "size-control-sm text-sm",
+      display: "h-control-sm min-w-[48px] px-12 text-sm"
     },
     medium: {
-      button: "h-[44px] w-[44px] text-base",
-      display: "h-[44px] min-w-[56px] px-12 text-base"
+      button: "size-control-md text-base",
+      display: "h-control-md min-w-[56px] px-12 text-base"
     },
     large: {
-      button: "h-[56px] w-[56px] text-lg",
-      display: "h-[56px] min-w-[72px] px-16 text-lg"
+      button: "size-control-lg text-lg",
+      display: "h-control-lg min-w-[72px] px-16 text-lg"
     }
   };
   const defaultsButton = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
@@ -642,6 +674,9 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
   );
   const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
   const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
+  const generatedValueId = useId();
+  const valueElementId = (inputProps == null ? void 0 : inputProps.id) ?? generatedValueId;
+  const valueAriaLabel = (inputProps == null ? void 0 : inputProps["aria-label"]) ?? ariaLabel ?? "Value";
   const [draftValue, setDraftValue] = useState2(String(clampedValue));
   const [isEditing, setIsEditing] = useState2(false);
   const inputRef = useRef2(null);
@@ -675,6 +710,7 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
             ...decrementButtonProps,
             type: "button",
             "aria-label": (decrementButtonProps == null ? void 0 : decrementButtonProps["aria-label"]) ?? "Decrease",
+            "aria-controls": valueElementId,
             "aria-disabled": decrementDisabled,
             disabled: decrementDisabled,
             className: cx5(
@@ -698,8 +734,9 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
             ref: inputRef,
             type: "number",
             inputMode: "numeric",
+            id: valueElementId,
             disabled: !!disabled,
-            "aria-label": (inputProps == null ? void 0 : inputProps["aria-label"]) ?? "Value",
+            "aria-label": valueAriaLabel,
             className: cx5(
               displayStyles,
               "w-[44px] text-center outline-none bg-transparent text-fg-base",
@@ -740,13 +777,24 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
               }
             }
           }
-        ) : /* @__PURE__ */ jsx6("div", { className: cx5(displayStyles, "select-none"), children: children ?? clampedValue }),
+        ) : /* @__PURE__ */ jsx6(
+          "output",
+          {
+            id: valueElementId,
+            "aria-label": valueAriaLabel,
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            className: cx5(displayStyles, "select-none"),
+            children: children ?? clampedValue
+          }
+        ),
         /* @__PURE__ */ jsx6(
           "button",
           {
             ...incrementButtonProps,
             type: "button",
             "aria-label": (incrementButtonProps == null ? void 0 : incrementButtonProps["aria-label"]) ?? "Increase",
+            "aria-controls": valueElementId,
             "aria-disabled": incrementDisabled,
             disabled: incrementDisabled,
             className: cx5(

package/package.json

@@ -1,28 +1,22 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "private": false,
   "sideEffects": [
     "**/*.css"
   ],
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md"
-  ],
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "build": "tsup src/index.js --format esm,cjs --dts",
     "dev": "tsup src/index.js --watch --format esm,cjs --dts",
-    "prepack": "npm run build",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit"
   },
@@ -38,6 +32,7 @@
     "@edux-design/utils": "*"
   },
   "peerDependencies": {
+    "@edux-design/tokens": ">=0.2.0 <0.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   }

package/src/demo/Button.stories.jsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Button, IconButton } from "./../index";
+import { Close, External, Warning } from "@edux-design/icons";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    isSecondary: { control: "boolean" },
+    isDanger: { control: "boolean" },
+    isBare: { control: "boolean" },
+    isStretched: { control: "boolean" },
+    disabled: { control: "boolean" },
+    startIcon: { control: false },
+    endIcon: { control: false },
+    children: { control: "text" },
+  },
+};
+
+// Base template
+const Template = (args) => <Button {...args} />;
+
+// Default story
+export const Primary = Template.bind({});
+Primary.args = {
+  children: "Primary Button",
+  size: "medium",
+};
+
+// Variants
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children: "Secondary Button",
+  isSecondary: true,
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  children: "Delete",
+  isDanger: true,
+};
+
+export const Bare = Template.bind({});
+Bare.args = {
+  children: "Bare Button",
+  isBare: true,
+};
+
+export const DangerBare = Template.bind({});
+DangerBare.args = {
+  children: "Log out",
+  isBare: true,
+  isDanger: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: "Disabled",
+  disabled: true,
+};
+
+// Sizes
+export const Small = Template.bind({});
+Small.args = {
+  children: "Small",
+  size: "small",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  children: "Large",
+  size: "large",
+};
+
+// Stretched (full width)
+export const Stretched = Template.bind({});
+Stretched.args = {
+  children: "Full Width",
+  isStretched: true,
+};
+
+export const Default = () => (
+  <div className="flex gap-4 items-center">
+    <IconButton icon={<Close />} aria-label="Close" isBare />
+    <IconButton icon={<Close />} isSecondary aria-label="Close" />
+    <IconButton icon={<Close />} isDanger aria-label="Delete" />
+    <IconButton icon={<Close />} disabled aria-label="Disabled" />
+  </div>
+);
+
+export const WithIcons = () => (
+  <div className="flex gap-4 items-center">
+    <Button startIcon={<Warning />}>Start icon</Button>
+    <Button endIcon={<External />}>End icon</Button>
+    <Button isDanger isBare endIcon={<External />}>
+      Log out
+    </Button>
+  </div>
+);

package/src/demo/ButtonCompatibility.stories.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import {
+  Button,
+  ButtonCounter,
+  ButtonGroup,
+  ButtonGroupItem,
+  IconButton,
+  MenuButton,
+} from "./../index";
+
+const sizes = ["small", "medium", "large"];
+const variants = [
+  { label: "Primary", props: {} },
+  { label: "Secondary", props: { isSecondary: true } },
+  { label: "Bare", props: { isBare: true } },
+  { label: "Danger", props: { isDanger: true } },
+  { label: "Danger bare", props: { isDanger: true, isBare: true } },
+  { label: "Disabled", props: { disabled: true } },
+];
+
+function GroupExample() {
+  const [value, setValue] = useState("one");
+
+  return (
+    <ButtonGroup value={value} onChange={setValue}>
+      <ButtonGroupItem value="one">One</ButtonGroupItem>
+      <ButtonGroupItem value="two">Two</ButtonGroupItem>
+      <ButtonGroupItem value="three">Three</ButtonGroupItem>
+    </ButtonGroup>
+  );
+}
+
+function ControlMatrix() {
+  return (
+    <div className="space-y-24">
+      <section className="space-y-12">
+        <h3 className="text-lg font-semibold text-fg-emphasis">
+          Button variants
+        </h3>
+        <div className="grid gap-12">
+          {variants.map(({ label, props }) => (
+            <div key={label} className="flex flex-wrap items-center gap-12">
+              {sizes.map((size) => (
+                <Button key={size} size={size} {...props}>
+                  {label} {size}
+                </Button>
+              ))}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="space-y-12">
+        <h3 className="text-lg font-semibold text-fg-emphasis">
+          Related controls
+        </h3>
+        <div className="flex flex-wrap items-center gap-12">
+          {sizes.map((size) => (
+            <IconButton
+              key={size}
+              size={size}
+              icon={<span aria-hidden="true">×</span>}
+              aria-label={`Close ${size}`}
+            />
+          ))}
+          <MenuButton size="small" aria-expanded="false">
+            Small menu
+          </MenuButton>
+          <MenuButton size="medium" aria-expanded="false">
+            Medium menu
+          </MenuButton>
+        </div>
+        <div className="flex flex-wrap items-center gap-12">
+          {sizes.map((size) => (
+            <ButtonCounter
+              key={size}
+              size={size}
+              defaultValue={2}
+              aria-label={`${size} quantity`}
+            />
+          ))}
+        </div>
+        <GroupExample />
+      </section>
+    </div>
+  );
+}
+
+const themeCases = [
+  { label: "Light · Blue", className: "theme--light brand--blue" },
+  { label: "Light · Teal", className: "theme--light brand--teal" },
+  { label: "Dark · Blue", className: "theme--dark brand--blue" },
+  { label: "Dark · Teal", className: "theme--dark brand--teal" },
+];
+
+export default {
+  title: "Components/Button/Compatibility",
+  parameters: {
+    layout: "fullscreen",
+    chromatic: { disableSnapshot: false },
+  },
+};
+
+export const CompatibilityMatrix = {
+  render: () => (
+    <div className="grid grid-cols-1 2xl:grid-cols-2">
+      {themeCases.map(({ label, className }) => (
+        <div key={label} className={`${className} bg-bg-base p-24`}>
+          <h2 className="mb-16 text-xl font-bold text-fg-emphasis">{label}</h2>
+          <ControlMatrix />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/demo/ButtonCounter.stories.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { ButtonCounter } from "./../index";
+
+export default {
+  title: "Components/Button",
+  component: ButtonCounter,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    isSecondary: { control: "boolean" },
+    isDanger: { control: "boolean" },
+    isBare: { control: "boolean" },
+    isStretched: { control: "boolean" },
+    disabled: { control: "boolean" },
+    isEditable: { control: "boolean" },
+    inputProps: { control: false },
+    defaultValue: { control: "number" },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+    value: { control: false },
+    onChange: { control: false },
+    decrementIcon: { control: false },
+    incrementIcon: { control: false },
+    decrementButtonProps: { control: false },
+    incrementButtonProps: { control: false },
+    children: { control: false },
+  },
+};
+
+const Template = (args) => <ButtonCounter {...args} />;
+
+export const PrimaryCounter = Template.bind({});
+PrimaryCounter.args = {
+  defaultValue: 1,
+  size: "medium",
+};
+
+export const EditableCounter = Template.bind({});
+EditableCounter.args = {
+  defaultValue: 1,
+  isEditable: true,
+};
+
+export const SecondaryCounter = Template.bind({});
+SecondaryCounter.args = {
+  defaultValue: 1,
+  isSecondary: true,
+};
+
+export const DangerCounter = Template.bind({});
+DangerCounter.args = {
+  defaultValue: 1,
+  isDanger: true,
+};
+
+export const BareCounter = Template.bind({});
+BareCounter.args = {
+  defaultValue: 1,
+  isBare: true,
+};
+
+export const DangerBareCounter = Template.bind({});
+DangerBareCounter.args = {
+  defaultValue: 1,
+  isBare: true,
+  isDanger: true,
+};
+
+export const DisabledCounter = Template.bind({});
+DisabledCounter.args = {
+  defaultValue: 1,
+  disabled: true,
+};
+
+export const SmallCounter = Template.bind({});
+SmallCounter.args = {
+  defaultValue: 1,
+  size: "small",
+};
+
+export const LargeCounter = Template.bind({});
+LargeCounter.args = {
+  defaultValue: 1,
+  size: "large",
+};
+
+export const StretchedCounter = Template.bind({});
+StretchedCounter.args = {
+  defaultValue: 1,
+  isStretched: true,
+};
+
+export const WithBoundsCounter = Template.bind({});
+WithBoundsCounter.args = {
+  defaultValue: 2,
+  min: 0,
+  max: 3,
+};