@emporix/component-library 1.3.2 → 1.4.0
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/README.md +89 -1
- package/dist/components/buttons/PrimaryButton.d.ts +29 -0
- package/dist/components/buttons/PrimaryButton.d.ts.map +1 -0
- package/dist/components/buttons/SecondaryButton.d.ts +25 -0
- package/dist/components/buttons/SecondaryButton.d.ts.map +1 -0
- package/dist/components/dropdown/Dropdown.d.ts +107 -0
- package/dist/components/dropdown/Dropdown.d.ts.map +1 -0
- package/dist/components/input/InputText.d.ts +29 -0
- package/dist/components/input/InputText.d.ts.map +1 -0
- package/dist/components/selectbutton/SelectButton.d.ts +63 -0
- package/dist/components/selectbutton/SelectButton.d.ts.map +1 -0
- package/dist/components/tabs/Tabs.d.ts +39 -0
- package/dist/components/tabs/Tabs.d.ts.map +1 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.es.js +1284 -0
- package/dist/index.umd.js +30 -0
- package/dist/style.css +1 -0
- package/dist/styles.d.ts +4 -0
- package/package.json +1 -1
- package/dist/assets/index-Cwlji1gR.js +0 -79
- package/dist/assets/index-DJ_u_WEd.css +0 -1
- package/dist/index.html +0 -14
package/README.md
CHANGED
|
@@ -93,6 +93,86 @@ import { PrimaryButton } from '@emporix/component-library'
|
|
|
93
93
|
| className | string | - | Additional CSS class |
|
|
94
94
|
| data-testid | string | - | Test ID for testing |
|
|
95
95
|
|
|
96
|
+
### InputText
|
|
97
|
+
|
|
98
|
+
A text input with optional label and tooltip. Hover and focus styles match the Dropdown component.
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import { InputText } from '@emporix/component-library'
|
|
102
|
+
|
|
103
|
+
// With label and info tooltip
|
|
104
|
+
<InputText
|
|
105
|
+
label="Id"
|
|
106
|
+
tooltip="Unique identifier for this record"
|
|
107
|
+
placeholder="Enter id"
|
|
108
|
+
/>
|
|
109
|
+
|
|
110
|
+
// Required field
|
|
111
|
+
<InputText label="Name" required placeholder="Enter name" />
|
|
112
|
+
|
|
113
|
+
// Disabled
|
|
114
|
+
<InputText label="Id" placeholder="Enter id" disabled />
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
#### Props
|
|
118
|
+
|
|
119
|
+
| Prop | Type | Default | Description |
|
|
120
|
+
| ----------- | --------- | ------- | -------------------------------------------- |
|
|
121
|
+
| label | ReactNode | - | Label text above the input |
|
|
122
|
+
| tooltip | string | - | If set, shows info icon with this tooltip |
|
|
123
|
+
| required | boolean | false | Shows asterisk on label |
|
|
124
|
+
| inputId | string | - | id for the input (for label association) |
|
|
125
|
+
| disabled | boolean | false | Whether the input is disabled |
|
|
126
|
+
| className | string | - | Additional CSS class for the root |
|
|
127
|
+
| data-testid | string | - | Test ID for root and input (suffix `-input`) |
|
|
128
|
+
|
|
129
|
+
All standard HTML input attributes (placeholder, value, onChange, etc.) are supported.
|
|
130
|
+
|
|
131
|
+
### SelectButton
|
|
132
|
+
|
|
133
|
+
Choose single or multiple options using buttons. API inspired by [PrimeReact SelectButton](https://primereact.org/selectbutton/). Selected state uses project primary colors.
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
import { SelectButton } from '@emporix/component-library'
|
|
137
|
+
|
|
138
|
+
const options = [
|
|
139
|
+
{ label: 'Off', value: 'off' },
|
|
140
|
+
{ label: 'On', value: 'on' },
|
|
141
|
+
]
|
|
142
|
+
|
|
143
|
+
// Single selection
|
|
144
|
+
<SelectButton
|
|
145
|
+
value={value}
|
|
146
|
+
onChange={(e) => setValue(e.value)}
|
|
147
|
+
options={options}
|
|
148
|
+
/>
|
|
149
|
+
|
|
150
|
+
// Multiple selection
|
|
151
|
+
<SelectButton
|
|
152
|
+
value={selected}
|
|
153
|
+
onChange={(e) => setSelected(e.value)}
|
|
154
|
+
options={options}
|
|
155
|
+
multiple
|
|
156
|
+
/>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
#### Props
|
|
160
|
+
|
|
161
|
+
| Prop | Type | Default | Description |
|
|
162
|
+
| -------------- | ------------------------ | ------- | --------------------------------------- |
|
|
163
|
+
| value | unknown | - | Selected value (or array when multiple) |
|
|
164
|
+
| onChange | (e: ChangeEvent) => void | - | Callback when selection changes |
|
|
165
|
+
| options | T[] | - | Array of options |
|
|
166
|
+
| optionLabel | string | "label" | Property name for option label |
|
|
167
|
+
| optionValue | string | "value" | Property name for option value |
|
|
168
|
+
| optionDisabled | string | - | Property name for disabled flag |
|
|
169
|
+
| multiple | boolean | false | Allow multiple selection |
|
|
170
|
+
| itemTemplate | (option) => ReactNode | - | Custom render for each option |
|
|
171
|
+
| disabled | boolean | false | Disable the whole component |
|
|
172
|
+
| invalid | boolean | false | Validation invalid state |
|
|
173
|
+
| className | string | - | Additional CSS class |
|
|
174
|
+
| data-testid | string | - | Test ID for root and option buttons |
|
|
175
|
+
|
|
96
176
|
### Tabs
|
|
97
177
|
|
|
98
178
|
A flexible tabs component for organizing content into multiple panels.
|
|
@@ -194,6 +274,14 @@ The component library provides a minimal set of CSS variables that are actually
|
|
|
194
274
|
--color-border-light: #e9ecef;
|
|
195
275
|
```
|
|
196
276
|
|
|
277
|
+
#### Focus Ring
|
|
278
|
+
|
|
279
|
+
Reusable focus outline for inputs, dropdowns, SelectButton, etc. Override to change focus appearance globally.
|
|
280
|
+
|
|
281
|
+
```css
|
|
282
|
+
--focus-ring-box-shadow: 0 0 0 2px rgba(38, 101, 183, 0.35);
|
|
283
|
+
```
|
|
284
|
+
|
|
197
285
|
#### Spacing
|
|
198
286
|
|
|
199
287
|
```css
|
|
@@ -217,7 +305,7 @@ The component library provides a minimal set of CSS variables that are actually
|
|
|
217
305
|
|
|
218
306
|
```css
|
|
219
307
|
--font-size-sm: 0.875rem; /* 14px */
|
|
220
|
-
--font-size-base:
|
|
308
|
+
--font-size-base: 0.875rem; /* 14px */
|
|
221
309
|
--font-size-lg: 1.125rem; /* 18px */
|
|
222
310
|
```
|
|
223
311
|
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface PrimaryButtonProps {
|
|
3
|
+
/**
|
|
4
|
+
* The content of the button
|
|
5
|
+
*/
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Whether the button is disabled
|
|
9
|
+
*/
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the button is loading
|
|
13
|
+
*/
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Click handler
|
|
17
|
+
*/
|
|
18
|
+
onClick?: () => void;
|
|
19
|
+
/**
|
|
20
|
+
* Additional CSS class name
|
|
21
|
+
*/
|
|
22
|
+
className?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Test ID for testing
|
|
25
|
+
*/
|
|
26
|
+
'data-testid'?: string;
|
|
27
|
+
}
|
|
28
|
+
export declare const PrimaryButton: ({ children, disabled, loading, onClick, className, "data-testid": testId, ...props }: PrimaryButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
//# sourceMappingURL=PrimaryButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../src/components/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,aAAa,GAAI,sFAQ3B,kBAAkB,4CAsBpB,CAAA"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface SecondaryButtonProps {
|
|
3
|
+
/**
|
|
4
|
+
* The content of the button
|
|
5
|
+
*/
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Whether the button is disabled
|
|
9
|
+
*/
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Click handler
|
|
13
|
+
*/
|
|
14
|
+
onClick?: () => void;
|
|
15
|
+
/**
|
|
16
|
+
* Additional CSS class name
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Test ID for testing
|
|
21
|
+
*/
|
|
22
|
+
'data-testid'?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const SecondaryButton: ({ children, disabled, onClick, className, "data-testid": testId, ...props }: SecondaryButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
//# sourceMappingURL=SecondaryButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../src/components/buttons/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,eAAe,GAAI,6EAO7B,oBAAoB,4CAqBtB,CAAA"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface DropdownOption {
|
|
3
|
+
label?: string;
|
|
4
|
+
value?: string;
|
|
5
|
+
[key: string]: unknown;
|
|
6
|
+
}
|
|
7
|
+
export interface DropdownChangeEvent {
|
|
8
|
+
value: DropdownOption['value'] | null;
|
|
9
|
+
originalEvent: React.SyntheticEvent;
|
|
10
|
+
}
|
|
11
|
+
export interface DropdownEditEndEvent {
|
|
12
|
+
/** Trimmed value that was in the input when Enter was pressed */
|
|
13
|
+
value: string;
|
|
14
|
+
/** Selected option value if a matching option was found and selected; null otherwise */
|
|
15
|
+
selectedValue: DropdownOption['value'] | null;
|
|
16
|
+
originalEvent: React.KeyboardEvent;
|
|
17
|
+
}
|
|
18
|
+
export interface DropdownProps<T = DropdownOption> {
|
|
19
|
+
/**
|
|
20
|
+
* Selected value (controlled). Must match optionValue of the selected option.
|
|
21
|
+
*/
|
|
22
|
+
value?: unknown;
|
|
23
|
+
/**
|
|
24
|
+
* Callback when selection changes
|
|
25
|
+
*/
|
|
26
|
+
onChange?: (e: DropdownChangeEvent) => void;
|
|
27
|
+
/**
|
|
28
|
+
* Array of options
|
|
29
|
+
*/
|
|
30
|
+
options: T[];
|
|
31
|
+
/**
|
|
32
|
+
* Property name for the option label (default: "label")
|
|
33
|
+
*/
|
|
34
|
+
optionLabel?: keyof T | string;
|
|
35
|
+
/**
|
|
36
|
+
* Property name for the option value (default: "value")
|
|
37
|
+
*/
|
|
38
|
+
optionValue?: keyof T | string;
|
|
39
|
+
/**
|
|
40
|
+
* Name of the property in the option object that indicates whether the option is disabled.
|
|
41
|
+
* When set (e.g. optionDisabled="disabled"), options with a truthy value for that key
|
|
42
|
+
* are disabled and cannot be selected. Matches PrimeReact Dropdown optionDisabled API.
|
|
43
|
+
* @see https://primereact.org/dropdown/#api.Dropdown.props.optionDisabled
|
|
44
|
+
*/
|
|
45
|
+
optionDisabled?: keyof T | string;
|
|
46
|
+
/**
|
|
47
|
+
* Placeholder when no value selected
|
|
48
|
+
*/
|
|
49
|
+
placeholder?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Enable filter (search) in the overlay
|
|
52
|
+
*/
|
|
53
|
+
filter?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* When true, the trigger is an editable input: user can type to filter options
|
|
56
|
+
* and select from the list. Matches PrimeReact Dropdown editable behavior.
|
|
57
|
+
* @see https://primereact.org/dropdown/#editable
|
|
58
|
+
*/
|
|
59
|
+
editable?: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Called when the user ends editing by pressing Enter in the editable input.
|
|
62
|
+
* Fires with the trimmed input value and the selected option value (if a match was found).
|
|
63
|
+
*/
|
|
64
|
+
onEditEnd?: (e: DropdownEditEndEvent) => void;
|
|
65
|
+
/**
|
|
66
|
+
* Whether the dropdown is disabled
|
|
67
|
+
*/
|
|
68
|
+
disabled?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Whether the field is required (shows asterisk on label)
|
|
71
|
+
*/
|
|
72
|
+
required?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Label text displayed above the input
|
|
75
|
+
*/
|
|
76
|
+
label?: React.ReactNode;
|
|
77
|
+
/**
|
|
78
|
+
* Input element id for label association
|
|
79
|
+
*/
|
|
80
|
+
inputId?: string;
|
|
81
|
+
/**
|
|
82
|
+
* Additional CSS class name for the root
|
|
83
|
+
*/
|
|
84
|
+
className?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Additional CSS class name for the overlay panel
|
|
87
|
+
*/
|
|
88
|
+
panelClassName?: string;
|
|
89
|
+
/**
|
|
90
|
+
* Template for the selected value displayed in the trigger.
|
|
91
|
+
* Receives the selected option object or null when no value is selected.
|
|
92
|
+
* @see https://primereact.org/dropdown/#template
|
|
93
|
+
*/
|
|
94
|
+
valueTemplate?: (option: T | null) => React.ReactNode;
|
|
95
|
+
/**
|
|
96
|
+
* Template for each option in the dropdown list.
|
|
97
|
+
* Receives the option object.
|
|
98
|
+
* @see https://primereact.org/dropdown/#template
|
|
99
|
+
*/
|
|
100
|
+
itemTemplate?: (option: T) => React.ReactNode;
|
|
101
|
+
/**
|
|
102
|
+
* Test ID for testing
|
|
103
|
+
*/
|
|
104
|
+
'data-testid'?: string;
|
|
105
|
+
}
|
|
106
|
+
export declare const Dropdown: <T extends Record<string, unknown>>({ value, onChange, onEditEnd, options, optionLabel, optionValue, optionDisabled, placeholder, filter, editable, disabled, required, label, inputId, className, panelClassName, valueTemplate, itemTemplate, "data-testid": testId, }: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
107
|
+
//# sourceMappingURL=Dropdown.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAI1D,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;IACrC,aAAa,EAAE,KAAK,CAAC,cAAc,CAAA;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,aAAa,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;IAC7C,aAAa,EAAE,KAAK,CAAC,aAAa,CAAA;CACnC;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,cAAc;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA4BD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,sOAoBzD,aAAa,CAAC,CAAC,CAAC,4CAgYlB,CAAA"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface InputTextProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> {
|
|
3
|
+
/**
|
|
4
|
+
* Label text displayed above the input
|
|
5
|
+
*/
|
|
6
|
+
label?: React.ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* When set, an info icon is shown next to the label with this string as tooltip
|
|
9
|
+
*/
|
|
10
|
+
tooltip?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the field is required (shows asterisk on label)
|
|
13
|
+
*/
|
|
14
|
+
required?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Input element id for label association
|
|
17
|
+
*/
|
|
18
|
+
inputId?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Additional CSS class name for the root
|
|
21
|
+
*/
|
|
22
|
+
className?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Test ID for testing
|
|
25
|
+
*/
|
|
26
|
+
'data-testid'?: string;
|
|
27
|
+
}
|
|
28
|
+
export declare const InputText: ({ label, tooltip, required, inputId: inputIdProp, className, "data-testid": testId, disabled, ...inputProps }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
//# sourceMappingURL=InputText.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputText.d.ts","sourceRoot":"","sources":["../../../src/components/input/InputText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,WAAW,CACrB;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,+GASvB,cAAc,4CA2DhB,CAAA"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface SelectButtonOption {
|
|
3
|
+
label?: string;
|
|
4
|
+
value?: string;
|
|
5
|
+
[key: string]: unknown;
|
|
6
|
+
}
|
|
7
|
+
export interface SelectButtonChangeEvent {
|
|
8
|
+
value: SelectButtonOption['value'] | SelectButtonOption['value'][] | null;
|
|
9
|
+
originalEvent: React.SyntheticEvent;
|
|
10
|
+
}
|
|
11
|
+
export interface SelectButtonProps<T = SelectButtonOption> {
|
|
12
|
+
/**
|
|
13
|
+
* Selected value (controlled). Single value or array when multiple.
|
|
14
|
+
*/
|
|
15
|
+
value?: unknown;
|
|
16
|
+
/**
|
|
17
|
+
* Callback when selection changes
|
|
18
|
+
*/
|
|
19
|
+
onChange?: (e: SelectButtonChangeEvent) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Array of options
|
|
22
|
+
*/
|
|
23
|
+
options: T[];
|
|
24
|
+
/**
|
|
25
|
+
* Property name for the option label (default: "label")
|
|
26
|
+
*/
|
|
27
|
+
optionLabel?: keyof T | string;
|
|
28
|
+
/**
|
|
29
|
+
* Property name for the option value (default: "value")
|
|
30
|
+
*/
|
|
31
|
+
optionValue?: keyof T | string;
|
|
32
|
+
/**
|
|
33
|
+
* Name of the property that indicates whether an option is disabled.
|
|
34
|
+
* @see https://primereact.org/selectbutton/
|
|
35
|
+
*/
|
|
36
|
+
optionDisabled?: keyof T | string;
|
|
37
|
+
/**
|
|
38
|
+
* When true, allows multiple selection (value is an array).
|
|
39
|
+
*/
|
|
40
|
+
multiple?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Template for each option. Receives the option object.
|
|
43
|
+
*/
|
|
44
|
+
itemTemplate?: (option: T) => React.ReactNode;
|
|
45
|
+
/**
|
|
46
|
+
* Whether the component is disabled
|
|
47
|
+
*/
|
|
48
|
+
disabled?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Invalid state for validation styling
|
|
51
|
+
*/
|
|
52
|
+
invalid?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Additional CSS class name for the root
|
|
55
|
+
*/
|
|
56
|
+
className?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Test ID for testing
|
|
59
|
+
*/
|
|
60
|
+
'data-testid'?: string;
|
|
61
|
+
}
|
|
62
|
+
export declare const SelectButton: <T extends Record<string, unknown>>({ value, onChange, options, optionLabel, optionValue, optionDisabled, multiple, itemTemplate, disabled, invalid, className, "data-testid": testId, }: SelectButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
//# sourceMappingURL=SelectButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectButton.d.ts","sourceRoot":"","sources":["../../../src/components/selectbutton/SelectButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,EAAE,GAAG,IAAI,CAAA;IACzE,aAAa,EAAE,KAAK,CAAC,cAAc,CAAA;CACpC;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,kBAAkB;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAC/C;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA4BD,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,sJAa7D,iBAAiB,CAAC,CAAC,CAAC,4CAyFtB,CAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface TabItem {
|
|
3
|
+
/**
|
|
4
|
+
* Unique identifier for the tab
|
|
5
|
+
*/
|
|
6
|
+
id: string;
|
|
7
|
+
/**
|
|
8
|
+
* Display label for the tab
|
|
9
|
+
*/
|
|
10
|
+
label: string;
|
|
11
|
+
/**
|
|
12
|
+
* Content to display when tab is active
|
|
13
|
+
*/
|
|
14
|
+
content: ReactNode;
|
|
15
|
+
}
|
|
16
|
+
export interface TabsProps {
|
|
17
|
+
/**
|
|
18
|
+
* Array of tab items to display
|
|
19
|
+
*/
|
|
20
|
+
tabs: TabItem[];
|
|
21
|
+
/**
|
|
22
|
+
* ID of the currently active tab
|
|
23
|
+
*/
|
|
24
|
+
activeTabId: string;
|
|
25
|
+
/**
|
|
26
|
+
* Callback function when tab is changed
|
|
27
|
+
*/
|
|
28
|
+
onTabChange: (tabId: string) => void;
|
|
29
|
+
/**
|
|
30
|
+
* Additional CSS class name
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Test ID for testing
|
|
35
|
+
*/
|
|
36
|
+
'data-testid'?: string;
|
|
37
|
+
}
|
|
38
|
+
export declare const Tabs: ({ tabs, activeTabId, onTabChange, className, "data-testid": testId, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAA;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,IAAI,GAAI,gFAOlB,SAAS,4CAsCX,CAAA"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Emporix Component Library
|
|
3
|
+
*
|
|
4
|
+
* For components to render with correct layout and styles in your app,
|
|
5
|
+
* import the library styles once (e.g. in your root entry or App):
|
|
6
|
+
*
|
|
7
|
+
* import '@emporix/component-library/styles'
|
|
8
|
+
*
|
|
9
|
+
* Or in CSS: @import '@emporix/component-library/styles';
|
|
10
|
+
*/
|
|
11
|
+
export { PrimaryButton } from './components/buttons/PrimaryButton';
|
|
12
|
+
export type { PrimaryButtonProps } from './components/buttons/PrimaryButton';
|
|
13
|
+
export { SecondaryButton } from './components/buttons/SecondaryButton';
|
|
14
|
+
export type { SecondaryButtonProps } from './components/buttons/SecondaryButton';
|
|
15
|
+
export { Tabs } from './components/tabs/Tabs';
|
|
16
|
+
export type { TabsProps, TabItem } from './components/tabs/Tabs';
|
|
17
|
+
export { Dropdown } from './components/dropdown/Dropdown';
|
|
18
|
+
export type { DropdownProps, DropdownOption, DropdownChangeEvent, DropdownEditEndEvent, } from './components/dropdown/Dropdown';
|
|
19
|
+
export { InputText } from './components/input/InputText';
|
|
20
|
+
export type { InputTextProps } from './components/input/InputText';
|
|
21
|
+
export { SelectButton } from './components/selectbutton/SelectButton';
|
|
22
|
+
export type { SelectButtonProps, SelectButtonOption, SelectButtonChangeEvent, } from './components/selectbutton/SelectButton';
|
|
23
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,YAAY,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAA;AAG/C,OAAO,qBAAqB,CAAA"}
|