@edux-design/buttons 0.1.3 → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,244 @@
+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.
+ *
+ * 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" />
+ * ```
+ */
+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.
+ *
+ * Provide an accessible name with `aria-label` or `aria-labelledby`.
+ */
+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,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: 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;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    isStretched?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * Props for the MenuButton component.
+ *
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   children?: React.ReactNode,
+ *   caret?: React.ReactNode,
+ *   size?: "small"|"medium",
+ *   className?: string,
+ * }} MenuButtonProps
+ */
+/**
+ * MenuButton component.
+ *
+ * Provides a styled button intended for menu triggers.
+ * Consumers should pass `aria-expanded`, `aria-controls`, and any
+ * custom labeling they need. `aria-haspopup="menu"` is applied by default.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>}
+ *
+ * @example
+ * ```jsx
+ * <MenuButton aria-expanded={open} onClick={() => setOpen((prev) => !prev)}>
+ *   Options
+ * </MenuButton>
+ * ```
+ */
+declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the MenuButton component.
+ */
+type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    caret?: React.ReactNode;
+    size?: "small" | "medium";
+    className?: string;
+};
+
+/**
+ * @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
+ */
+declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+declare function ButtonGroupItem(_props: any): any;
+declare namespace ButtonGroupItem {
+    let displayName: string;
+}
+
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   value?: number,
+ *   defaultValue?: number,
+ *   onChange?: (value: number) => void,
+ *   min?: number,
+ *   max?: number,
+ *   step?: number,
+ *   children?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   isEditable?: boolean,
+ *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
+ *   decrementIcon?: React.ReactNode,
+ *   incrementIcon?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
+ *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   className?: string,
+ * }} ButtonCounterProps
+ */
+/**
+ * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
+ */
+declare const ButtonCounter: React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ */
+type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    children?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    isSecondary?: boolean;
+    isDanger?: boolean;
+    isBare?: boolean;
+    isStretched?: boolean;
+    disabled?: boolean;
+    isEditable?: boolean;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
+    decrementIcon?: React.ReactNode;
+    incrementIcon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    className?: string;
+};
+
+export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };