@edux-design/buttons 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @edux-design/buttons
 
+## 0.3.0
+
+### Minor Changes
+
+- Add toolbar controls, toggles, groups and separators with native attributes, labelled keyboard navigation and compact semantic control sizing.
+
+  Correct primary Button, IconButton and ButtonCounter foregrounds in dark mode using the existing inverse foreground token; geometry and danger colours are unchanged.
+
+  Retain native ButtonGroup props, refs and typed selection callbacks in generated declarations.
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -120,3 +120,7 @@ pnpm --filter @edux-design/buttons build
 ```
 
 Stories live under `src/demo` (for example `Button.stories.jsx` and `ButtonGroup.stories.jsx`) for quick visual verification.
+
+## Additional components
+
+[Toolbar controls](./docs/toolbar.md).

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import React from 'react';
 
 /**
  * Props for the IconButton component.
@@ -160,7 +160,7 @@ type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 /**
  * Segmented button group with animated active state.
  *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ * @typedef {Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"|"defaultValue"> & {
  *   value?: string|number,
  *   defaultValue?: string|number,
  *   onChange?: (value: string|number, option: ButtonGroupOption) => void,
@@ -168,7 +168,44 @@ type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *   isStretched?: boolean,
  * }} ButtonGroupProps
  */
-declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+/** @type {React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+type ButtonGroupOption = {
+    /**
+     * - Main label for the option.
+     */
+    label?: React.ReactNode;
+    /**
+     * - Optional leading element (icon, badge, etc.).
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * - Optional trailing element (legacy alias).
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * - Optional trailing element.
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * - Unique value used for selection.
+     */
+    value?: string | number;
+    /**
+     * - Whether the option is disabled.
+     */
+    disabled?: boolean;
+};
+/**
+ * Segmented button group with animated active state.
+ */
+type ButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> & {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number, option: ButtonGroupOption) => void;
+    size?: "small" | "medium" | "large";
+    isStretched?: boolean;
+};
 
 declare function ButtonGroupItem(_props: any): any;
 declare namespace ButtonGroupItem {
@@ -241,4 +278,49 @@ type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
 };
 
-export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };
+interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Native Tab order is the default. Adopt roving arrow-key focus explicitly. */
+    keyboardNavigation?: "native" | "roving";
+    /** Arrow-key navigation follows this axis. It never activates an action. */
+    orientation?: "horizontal" | "vertical";
+    /** Whether arrow navigation wraps at the first and last enabled action. */
+    loop?: boolean;
+}
+/**
+ * A labelled action toolbar with native Tab order by default.
+ * Opt into roving navigation for one tab stop and arrow-key focus.
+ * Place ToolbarButton/ToolbarToggleButton children directly or in ToolbarGroup.
+ * Nested toolbars maintain independent focus. Editor command handling stays local.
+ */
+declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+/** A labelled, non-selecting action group. Selection state belongs to its buttons. */
+declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The separator line's orientation, perpendicular to a horizontal toolbar by default. */
+    orientation?: "horizontal" | "vertical";
+}
+declare const ToolbarSeparator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Compatibility visual state. Defaults aria-pressed to true; explicit native ARIA wins. */
+    active?: boolean;
+    size?: "small" | "medium" | "large";
+    variant?: "neutral" | "primary" | "danger";
+    icon?: React.ReactNode;
+    /** Square geometry. Provide aria-label or aria-labelledby when there is no visible text. */
+    iconOnly?: boolean;
+}
+/** Compact native action button; compose a Tooltip around it when an explanation is needed. */
+declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ToolbarToggleButtonProps extends Omit<ToolbarButtonProps, "aria-pressed" | "active"> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** A controlled or uncontrolled independent toggle, with native button keyboard activation. */
+declare const ToolbarToggleButton: React.ForwardRefExoticComponent<ToolbarToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, ToolbarToggleButton, type ToolbarToggleButtonProps };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import React from 'react';
 
 /**
  * Props for the IconButton component.
@@ -160,7 +160,7 @@ type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 /**
  * Segmented button group with animated active state.
  *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ * @typedef {Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"|"defaultValue"> & {
  *   value?: string|number,
  *   defaultValue?: string|number,
  *   onChange?: (value: string|number, option: ButtonGroupOption) => void,
@@ -168,7 +168,44 @@ type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *   isStretched?: boolean,
  * }} ButtonGroupProps
  */
-declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+/** @type {React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>} */
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+type ButtonGroupOption = {
+    /**
+     * - Main label for the option.
+     */
+    label?: React.ReactNode;
+    /**
+     * - Optional leading element (icon, badge, etc.).
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * - Optional trailing element (legacy alias).
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * - Optional trailing element.
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * - Unique value used for selection.
+     */
+    value?: string | number;
+    /**
+     * - Whether the option is disabled.
+     */
+    disabled?: boolean;
+};
+/**
+ * Segmented button group with animated active state.
+ */
+type ButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> & {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number, option: ButtonGroupOption) => void;
+    size?: "small" | "medium" | "large";
+    isStretched?: boolean;
+};
 
 declare function ButtonGroupItem(_props: any): any;
 declare namespace ButtonGroupItem {
@@ -241,4 +278,49 @@ type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
 };
 
-export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };
+interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Native Tab order is the default. Adopt roving arrow-key focus explicitly. */
+    keyboardNavigation?: "native" | "roving";
+    /** Arrow-key navigation follows this axis. It never activates an action. */
+    orientation?: "horizontal" | "vertical";
+    /** Whether arrow navigation wraps at the first and last enabled action. */
+    loop?: boolean;
+}
+/**
+ * A labelled action toolbar with native Tab order by default.
+ * Opt into roving navigation for one tab stop and arrow-key focus.
+ * Place ToolbarButton/ToolbarToggleButton children directly or in ToolbarGroup.
+ * Nested toolbars maintain independent focus. Editor command handling stays local.
+ */
+declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+/** A labelled, non-selecting action group. Selection state belongs to its buttons. */
+declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The separator line's orientation, perpendicular to a horizontal toolbar by default. */
+    orientation?: "horizontal" | "vertical";
+}
+declare const ToolbarSeparator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Compatibility visual state. Defaults aria-pressed to true; explicit native ARIA wins. */
+    active?: boolean;
+    size?: "small" | "medium" | "large";
+    variant?: "neutral" | "primary" | "danger";
+    icon?: React.ReactNode;
+    /** Square geometry. Provide aria-label or aria-labelledby when there is no visible text. */
+    iconOnly?: boolean;
+}
+/** Compact native action button; compose a Tooltip around it when an explanation is needed. */
+declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ToolbarToggleButtonProps extends Omit<ToolbarButtonProps, "aria-pressed" | "active"> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** A controlled or uncontrolled independent toggle, with native button keyboard activation. */
+declare const ToolbarToggleButton: React.ForwardRefExoticComponent<ToolbarToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, ToolbarToggleButton, type ToolbarToggleButtonProps };