@edux-design/buttons 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/package.json +1 -1
- package/src/demo/ButtonCounter.stories.jsx +101 -0
- package/src/elements/Button.jsx +4 -4
- package/src/elements/Button.test.jsx +3 -3
- package/src/elements/ButtonCounter.jsx +341 -0
- package/src/elements/ButtonCounter.test.jsx +100 -0
- package/src/elements/IconButton.jsx +1 -1
- package/src/index.js +1 -0
- package/dist/chevron-EVM4GL6D.svg +0 -4
- package/dist/chunk-M47FNL4P.mjs +0 -10
- package/dist/elements/Button.js +0 -39
- package/dist/elements/Button.mjs +0 -6
- package/dist/index.d.mts +0 -164
- package/dist/index.d.ts +0 -164
- package/dist/index.js +0 -536
- package/dist/index.mjs +0 -504
package/dist/elements/Button.mjs
DELETED
package/dist/index.d.mts
DELETED
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as react from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Props for the IconButton component.
|
|
6
|
-
*
|
|
7
|
-
* Extends all native HTML `<button>` attributes and accepts an icon prop.
|
|
8
|
-
* Designed for circular icon-only buttons that follow the same
|
|
9
|
-
* design-system patterns as the regular Button.
|
|
10
|
-
*
|
|
11
|
-
* @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
12
|
-
* icon: React.ReactNode,
|
|
13
|
-
* size?: "small"|"medium"|"large",
|
|
14
|
-
* isSecondary?: boolean,
|
|
15
|
-
* isDanger?: boolean,
|
|
16
|
-
* isBare?: boolean,
|
|
17
|
-
* disabled?: boolean,
|
|
18
|
-
* className?: string
|
|
19
|
-
* }} IconButtonProps
|
|
20
|
-
*/
|
|
21
|
-
/**
|
|
22
|
-
* IconButton component.
|
|
23
|
-
*
|
|
24
|
-
* Provides a circular button used for icon-only actions, matching
|
|
25
|
-
* the design-system variants and states of the main Button component.
|
|
26
|
-
*
|
|
27
|
-
* @component
|
|
28
|
-
* @type {React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>}
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* ```jsx
|
|
32
|
-
* <IconButton icon={<XIcon />} aria-label="Close" />
|
|
33
|
-
* <IconButton icon={<EditIcon />} isSecondary />
|
|
34
|
-
* <IconButton icon={<TrashIcon />} isDanger disabled />
|
|
35
|
-
* ```
|
|
36
|
-
*/
|
|
37
|
-
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
38
|
-
/**
|
|
39
|
-
* Props for the IconButton component.
|
|
40
|
-
*
|
|
41
|
-
* Extends all native HTML `<button>` attributes and accepts an icon prop.
|
|
42
|
-
* Designed for circular icon-only buttons that follow the same
|
|
43
|
-
* design-system patterns as the regular Button.
|
|
44
|
-
*/
|
|
45
|
-
type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
46
|
-
icon: React.ReactNode;
|
|
47
|
-
size?: "small" | "medium" | "large";
|
|
48
|
-
isSecondary?: boolean;
|
|
49
|
-
isDanger?: boolean;
|
|
50
|
-
isBare?: boolean;
|
|
51
|
-
disabled?: boolean;
|
|
52
|
-
className?: string;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Props for the Button component.
|
|
57
|
-
*
|
|
58
|
-
* Extends all native HTML `<button>` attributes, while adding
|
|
59
|
-
* design-system variants and state controls.
|
|
60
|
-
*
|
|
61
|
-
* @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
62
|
-
* children?: React.ReactNode,
|
|
63
|
-
* startIcon?: React.ReactNode,
|
|
64
|
-
* endIcon?: React.ReactNode,
|
|
65
|
-
* size?: "small"|"medium"|"large",
|
|
66
|
-
* isSecondary?: boolean,
|
|
67
|
-
* isDanger?: boolean,
|
|
68
|
-
* isBare?: boolean,
|
|
69
|
-
* isStretched?: boolean,
|
|
70
|
-
* disabled?: boolean,
|
|
71
|
-
* className?: string
|
|
72
|
-
* }} ButtonProps
|
|
73
|
-
*/
|
|
74
|
-
/**
|
|
75
|
-
* Button component.
|
|
76
|
-
*
|
|
77
|
-
* Provides design-system styled button with support for
|
|
78
|
-
* multiple visual variants, sizing, and states.
|
|
79
|
-
*
|
|
80
|
-
* @component
|
|
81
|
-
* @type {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
|
|
82
|
-
*
|
|
83
|
-
* @example
|
|
84
|
-
* ```jsx
|
|
85
|
-
* <Button size="small">Save</Button>
|
|
86
|
-
* <Button isSecondary>Cancel</Button>
|
|
87
|
-
* <Button isDanger disabled>Delete</Button>
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
|
-
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
91
|
-
/**
|
|
92
|
-
* Props for the Button component.
|
|
93
|
-
*
|
|
94
|
-
* Extends all native HTML `<button>` attributes, while adding
|
|
95
|
-
* design-system variants and state controls.
|
|
96
|
-
*/
|
|
97
|
-
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
98
|
-
children?: React.ReactNode;
|
|
99
|
-
startIcon?: React.ReactNode;
|
|
100
|
-
endIcon?: React.ReactNode;
|
|
101
|
-
size?: "small" | "medium" | "large";
|
|
102
|
-
isSecondary?: boolean;
|
|
103
|
-
isDanger?: boolean;
|
|
104
|
-
isBare?: boolean;
|
|
105
|
-
isStretched?: boolean;
|
|
106
|
-
disabled?: boolean;
|
|
107
|
-
className?: string;
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* Props for the MenuButton component.
|
|
112
|
-
*
|
|
113
|
-
* @typedef {Object} MenuButtonProps
|
|
114
|
-
* @property {React.ReactNode} [children] - Content to display inside the button (usually label or icon).
|
|
115
|
-
* @property {"small"|"medium"} [size="medium"] - Size variant controlling button height.
|
|
116
|
-
*/
|
|
117
|
-
/**
|
|
118
|
-
* MenuButton component.
|
|
119
|
-
*
|
|
120
|
-
* Provides a styled menu trigger button with optional sizing.
|
|
121
|
-
* It uses a `MenuButtonContext` provider to share internal state
|
|
122
|
-
* with child menu items.
|
|
123
|
-
*
|
|
124
|
-
* @component
|
|
125
|
-
* @type {React.FC<MenuButtonProps>}
|
|
126
|
-
*
|
|
127
|
-
* @example
|
|
128
|
-
* ```jsx
|
|
129
|
-
* <MenuButton size="small">Options</MenuButton>
|
|
130
|
-
* ```
|
|
131
|
-
*/
|
|
132
|
-
declare function MenuButton({ children, size }: {
|
|
133
|
-
children: any;
|
|
134
|
-
size: any;
|
|
135
|
-
}): react_jsx_runtime.JSX.Element;
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* @typedef {Object} ButtonGroupOption
|
|
139
|
-
* @property {React.ReactNode} [label] - Main label for the option.
|
|
140
|
-
* @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
|
|
141
|
-
* @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
|
|
142
|
-
* @property {React.ReactNode} [endAdornment] - Optional trailing element.
|
|
143
|
-
* @property {string|number} [value] - Unique value used for selection.
|
|
144
|
-
* @property {boolean} [disabled] - Whether the option is disabled.
|
|
145
|
-
*/
|
|
146
|
-
/**
|
|
147
|
-
* Segmented button group with animated active state.
|
|
148
|
-
*
|
|
149
|
-
* @typedef {React.HTMLAttributes<HTMLDivElement> & {
|
|
150
|
-
* value?: string|number,
|
|
151
|
-
* defaultValue?: string|number,
|
|
152
|
-
* onChange?: (value: string|number, option: ButtonGroupOption) => void,
|
|
153
|
-
* size?: "small"|"medium"|"large",
|
|
154
|
-
* isStretched?: boolean,
|
|
155
|
-
* }} ButtonGroupProps
|
|
156
|
-
*/
|
|
157
|
-
declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
|
|
158
|
-
|
|
159
|
-
declare function ButtonGroupItem(_props: any): any;
|
|
160
|
-
declare namespace ButtonGroupItem {
|
|
161
|
-
let displayName: string;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
export { Button, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };
|
package/dist/index.d.ts
DELETED
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as react from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Props for the IconButton component.
|
|
6
|
-
*
|
|
7
|
-
* Extends all native HTML `<button>` attributes and accepts an icon prop.
|
|
8
|
-
* Designed for circular icon-only buttons that follow the same
|
|
9
|
-
* design-system patterns as the regular Button.
|
|
10
|
-
*
|
|
11
|
-
* @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
12
|
-
* icon: React.ReactNode,
|
|
13
|
-
* size?: "small"|"medium"|"large",
|
|
14
|
-
* isSecondary?: boolean,
|
|
15
|
-
* isDanger?: boolean,
|
|
16
|
-
* isBare?: boolean,
|
|
17
|
-
* disabled?: boolean,
|
|
18
|
-
* className?: string
|
|
19
|
-
* }} IconButtonProps
|
|
20
|
-
*/
|
|
21
|
-
/**
|
|
22
|
-
* IconButton component.
|
|
23
|
-
*
|
|
24
|
-
* Provides a circular button used for icon-only actions, matching
|
|
25
|
-
* the design-system variants and states of the main Button component.
|
|
26
|
-
*
|
|
27
|
-
* @component
|
|
28
|
-
* @type {React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>}
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* ```jsx
|
|
32
|
-
* <IconButton icon={<XIcon />} aria-label="Close" />
|
|
33
|
-
* <IconButton icon={<EditIcon />} isSecondary />
|
|
34
|
-
* <IconButton icon={<TrashIcon />} isDanger disabled />
|
|
35
|
-
* ```
|
|
36
|
-
*/
|
|
37
|
-
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
38
|
-
/**
|
|
39
|
-
* Props for the IconButton component.
|
|
40
|
-
*
|
|
41
|
-
* Extends all native HTML `<button>` attributes and accepts an icon prop.
|
|
42
|
-
* Designed for circular icon-only buttons that follow the same
|
|
43
|
-
* design-system patterns as the regular Button.
|
|
44
|
-
*/
|
|
45
|
-
type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
46
|
-
icon: React.ReactNode;
|
|
47
|
-
size?: "small" | "medium" | "large";
|
|
48
|
-
isSecondary?: boolean;
|
|
49
|
-
isDanger?: boolean;
|
|
50
|
-
isBare?: boolean;
|
|
51
|
-
disabled?: boolean;
|
|
52
|
-
className?: string;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Props for the Button component.
|
|
57
|
-
*
|
|
58
|
-
* Extends all native HTML `<button>` attributes, while adding
|
|
59
|
-
* design-system variants and state controls.
|
|
60
|
-
*
|
|
61
|
-
* @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
62
|
-
* children?: React.ReactNode,
|
|
63
|
-
* startIcon?: React.ReactNode,
|
|
64
|
-
* endIcon?: React.ReactNode,
|
|
65
|
-
* size?: "small"|"medium"|"large",
|
|
66
|
-
* isSecondary?: boolean,
|
|
67
|
-
* isDanger?: boolean,
|
|
68
|
-
* isBare?: boolean,
|
|
69
|
-
* isStretched?: boolean,
|
|
70
|
-
* disabled?: boolean,
|
|
71
|
-
* className?: string
|
|
72
|
-
* }} ButtonProps
|
|
73
|
-
*/
|
|
74
|
-
/**
|
|
75
|
-
* Button component.
|
|
76
|
-
*
|
|
77
|
-
* Provides design-system styled button with support for
|
|
78
|
-
* multiple visual variants, sizing, and states.
|
|
79
|
-
*
|
|
80
|
-
* @component
|
|
81
|
-
* @type {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
|
|
82
|
-
*
|
|
83
|
-
* @example
|
|
84
|
-
* ```jsx
|
|
85
|
-
* <Button size="small">Save</Button>
|
|
86
|
-
* <Button isSecondary>Cancel</Button>
|
|
87
|
-
* <Button isDanger disabled>Delete</Button>
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
|
-
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
91
|
-
/**
|
|
92
|
-
* Props for the Button component.
|
|
93
|
-
*
|
|
94
|
-
* Extends all native HTML `<button>` attributes, while adding
|
|
95
|
-
* design-system variants and state controls.
|
|
96
|
-
*/
|
|
97
|
-
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
98
|
-
children?: React.ReactNode;
|
|
99
|
-
startIcon?: React.ReactNode;
|
|
100
|
-
endIcon?: React.ReactNode;
|
|
101
|
-
size?: "small" | "medium" | "large";
|
|
102
|
-
isSecondary?: boolean;
|
|
103
|
-
isDanger?: boolean;
|
|
104
|
-
isBare?: boolean;
|
|
105
|
-
isStretched?: boolean;
|
|
106
|
-
disabled?: boolean;
|
|
107
|
-
className?: string;
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* Props for the MenuButton component.
|
|
112
|
-
*
|
|
113
|
-
* @typedef {Object} MenuButtonProps
|
|
114
|
-
* @property {React.ReactNode} [children] - Content to display inside the button (usually label or icon).
|
|
115
|
-
* @property {"small"|"medium"} [size="medium"] - Size variant controlling button height.
|
|
116
|
-
*/
|
|
117
|
-
/**
|
|
118
|
-
* MenuButton component.
|
|
119
|
-
*
|
|
120
|
-
* Provides a styled menu trigger button with optional sizing.
|
|
121
|
-
* It uses a `MenuButtonContext` provider to share internal state
|
|
122
|
-
* with child menu items.
|
|
123
|
-
*
|
|
124
|
-
* @component
|
|
125
|
-
* @type {React.FC<MenuButtonProps>}
|
|
126
|
-
*
|
|
127
|
-
* @example
|
|
128
|
-
* ```jsx
|
|
129
|
-
* <MenuButton size="small">Options</MenuButton>
|
|
130
|
-
* ```
|
|
131
|
-
*/
|
|
132
|
-
declare function MenuButton({ children, size }: {
|
|
133
|
-
children: any;
|
|
134
|
-
size: any;
|
|
135
|
-
}): react_jsx_runtime.JSX.Element;
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* @typedef {Object} ButtonGroupOption
|
|
139
|
-
* @property {React.ReactNode} [label] - Main label for the option.
|
|
140
|
-
* @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
|
|
141
|
-
* @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
|
|
142
|
-
* @property {React.ReactNode} [endAdornment] - Optional trailing element.
|
|
143
|
-
* @property {string|number} [value] - Unique value used for selection.
|
|
144
|
-
* @property {boolean} [disabled] - Whether the option is disabled.
|
|
145
|
-
*/
|
|
146
|
-
/**
|
|
147
|
-
* Segmented button group with animated active state.
|
|
148
|
-
*
|
|
149
|
-
* @typedef {React.HTMLAttributes<HTMLDivElement> & {
|
|
150
|
-
* value?: string|number,
|
|
151
|
-
* defaultValue?: string|number,
|
|
152
|
-
* onChange?: (value: string|number, option: ButtonGroupOption) => void,
|
|
153
|
-
* size?: "small"|"medium"|"large",
|
|
154
|
-
* isStretched?: boolean,
|
|
155
|
-
* }} ButtonGroupProps
|
|
156
|
-
*/
|
|
157
|
-
declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
|
|
158
|
-
|
|
159
|
-
declare function ButtonGroupItem(_props: any): any;
|
|
160
|
-
declare namespace ButtonGroupItem {
|
|
161
|
-
let displayName: string;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
export { Button, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };
|