@edux-design/buttons 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @edux-design/buttons
 
+## 0.0.4
+
+### Patch Changes
+
+- b9d0d32: Added documentation
+- Updated dependencies [b9d0d32]
+- Updated dependencies
+  - @edux-design/utils@0.0.3
+
+## 0.0.3
+
+### Patch Changes
+
+- Popovers
+
 ## 0.0.2
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,110 @@
+# @edux-design/buttons
+
+Headless-ish button primitives wired to the Edux design tokens. The package ships four components:
+
+- `Button` – primary action button with size + variant helpers.
+- `IconButton` – circular/square icon surface that reuses the same states.
+- `MenuButton` – trigger wrapper that pairs nicely with popovers/menus.
+- `ButtonGroup` – segmented control with a sliding active state meant for contextual filters.
+
+Everything is built with Tailwind utilities via the shared `cx` helper so styling stays consistent with the rest of the system.
+
+---
+
+## Installation
+
+```bash
+pnpm add @edux-design/buttons @edux-design/utils
+# or
+npm install @edux-design/buttons @edux-design/utils
+```
+
+Peer deps: `react@^19.1.0`, `react-dom@^19.1.0`.
+
+---
+
+## Usage
+
+```jsx
+import { Button, IconButton, MenuButton } from "@edux-design/buttons";
+import { Close, Chevron } from "@edux-design/icons";
+
+export function Actions() {
+  return (
+    <div className="flex gap-4">
+      <Button size="small">Save</Button>
+      <Button isSecondary isStretched>
+        Cancel
+      </Button>
+      <Button isDanger disabled>
+        Delete
+      </Button>
+      <IconButton icon={<Close />} aria-label="Close dialog" />
+      <MenuButton caret={<Chevron />} onClick={() => null}>
+        Options
+      </MenuButton>
+    </div>
+  );
+}
+```
+
+### ButtonGroup
+
+```jsx
+import React from "react";
+import { ButtonGroup } from "@edux-design/buttons";
+import { Warning } from "@edux-design/icons";
+
+export function SegmentedFilter() {
+  const [value, setValue] = React.useState("inbox");
+
+  return (
+    <ButtonGroup
+      value={value}
+      onChange={(nextValue) => setValue(nextValue)}
+      options={[
+        { value: "inbox", label: "Label (11)" },
+        { value: "drafts", label: "Label (11)" },
+        {
+          value: "alerts",
+          label: "Label",
+          endAdornment: <Warning className="h-4 w-4 text-warning-600" />,
+        },
+      ]}
+    />
+  );
+}
+```
+
+Provide `options` as strings or objects (`{ value, label, startAdornment, endAdornment, disabled }`). The active pill animates over the newly selected option and the group behaves like an accessible radiogroup (arrow keys + home/end). Use `isStretched` when the control should fill the parent width.
+
+### Key props
+
+| Component     | Important props |
+| ------------- | --------------- |
+| `Button`      | `size="small"|"medium"|"large"`, `isSecondary`, `isDanger`, `isBare`, `isStretched`, `disabled` |
+| `IconButton`  | `icon`, `size`, `isBare`, `isDanger`, `disabled` |
+| `MenuButton`  | Accepts all `Button` props plus caret slot and ARIA attributes for menu triggers |
+| `ButtonGroup` | `options`, `value` / `defaultValue`, `onChange`, `size`, `isStretched`, per-option `startAdornment` / `endAdornment`, `disabled` |
+
+Buttons warn in development if you pass conflicting variant booleans so you know which style wins.
+
+---
+
+## Development
+
+```bash
+pnpm --filter @edux-design/buttons lint
+pnpm --filter @edux-design/buttons check-types
+pnpm --filter @edux-design/buttons build
+```
+
+Stories live under `src/demo` (e.g. `Button.stories.jsx`, `ButtonGroup.stories.jsx`) for quick visual verification.
+
+---
+
+## Notes
+
+- Variants map directly to the design tokens defined in `@edux-design/tokens`.
+- Hover/focus styles are already applied; avoid overriding unless you have a matching token.
+- If you need new variants (ghost, link, destructive-secondary, etc.), add them in `Button.jsx` and update the stories + README accordingly.

package/dist/index.d.mts

@@ -0,0 +1,159 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+
+/**
+ * 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 />
+ * ```
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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.
+ */
+type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * 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>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the Button component.
+ *
+ * Extends all native HTML `<button>` attributes, while adding
+ * design-system variants and state controls.
+ */
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    isStretched?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * 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>
+ * ```
+ */
+declare function MenuButton({ children, size }: {
+    children: any;
+    size: any;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * @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
+ */
+declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+declare function ButtonGroupItem(_props: any): any;
+declare namespace ButtonGroupItem {
+    let displayName: string;
+}
+
+export { Button, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };

package/dist/index.d.ts

@@ -0,0 +1,159 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+
+/**
+ * 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 />
+ * ```
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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.
+ */
+type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * 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>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the Button component.
+ *
+ * Extends all native HTML `<button>` attributes, while adding
+ * design-system variants and state controls.
+ */
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    isStretched?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * 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>
+ * ```
+ */
+declare function MenuButton({ children, size }: {
+    children: any;
+    size: any;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * @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
+ */
+declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+declare function ButtonGroupItem(_props: any): any;
+declare namespace ButtonGroupItem {
+    let displayName: string;
+}
+
+export { Button, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };