@1doc/1ds-react 0.0.2 → 2.7.1

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.
Files changed (101) hide show
  1. package/CHANGELOG.md +659 -0
  2. package/README.md +137 -6
  3. package/package.json +43 -28
  4. package/src/index.ts +161 -16
  5. package/src/teste/AttachmentCard.test.tsx +161 -0
  6. package/src/teste/Chart.test.tsx +233 -0
  7. package/src/teste/Combobox.test.tsx +251 -0
  8. package/src/teste/DataTable.test.tsx +70 -0
  9. package/src/teste/DatePicker.test.tsx +86 -0
  10. package/src/teste/Drawer.test.tsx +265 -0
  11. package/src/teste/Dropdown.test.tsx +217 -0
  12. package/src/teste/Input.test.tsx +64 -0
  13. package/src/teste/Kanban.test.tsx +333 -0
  14. package/src/teste/MultiSelect.test.tsx +73 -0
  15. package/src/teste/Podium.test.tsx +107 -0
  16. package/src/teste/Popover.test.tsx +221 -0
  17. package/src/teste/SegmentedControl.test.tsx +183 -0
  18. package/src/teste/Timeline.test.tsx +100 -0
  19. package/src/teste/Tree.test.tsx +74 -0
  20. package/src/teste/setup.ts +7 -0
  21. package/src/utils/bandeiras.ts +22 -0
  22. package/src/utils/chart.ts +682 -0
  23. package/src/utils/density.ts +27 -0
  24. package/src/utils/overlay-stack.ts +26 -0
  25. package/src/utils/theme.ts +63 -47
  26. package/src/utils/toast.ts +89 -0
  27. package/vitest.config.ts +28 -0
  28. package/dist/components/Alert/Alert.css +0 -188
  29. package/dist/components/Alert/Alert.d.ts +0 -65
  30. package/dist/components/Alert/Alert.js +0 -56
  31. package/dist/components/Avatar/Avatar.css +0 -88
  32. package/dist/components/Avatar/Avatar.d.ts +0 -34
  33. package/dist/components/Avatar/Avatar.js +0 -16
  34. package/dist/components/Avatar/AvatarGroup.d.ts +0 -12
  35. package/dist/components/Avatar/AvatarGroup.js +0 -8
  36. package/dist/components/Badge/Badge.css +0 -155
  37. package/dist/components/Badge/Badge.d.ts +0 -46
  38. package/dist/components/Badge/Badge.js +0 -17
  39. package/dist/components/Button/Button.css +0 -199
  40. package/dist/components/Button/Button.d.ts +0 -23
  41. package/dist/components/Button/Button.js +0 -62
  42. package/dist/components/Checkbox/Checkbox.css +0 -122
  43. package/dist/components/Checkbox/Checkbox.d.ts +0 -21
  44. package/dist/components/Checkbox/Checkbox.js +0 -49
  45. package/dist/components/Divider/Divider.css +0 -81
  46. package/dist/components/Divider/Divider.d.ts +0 -18
  47. package/dist/components/Divider/Divider.js +0 -26
  48. package/dist/components/Grid/Grid.css +0 -154
  49. package/dist/components/Grid/Grid.d.ts +0 -21
  50. package/dist/components/Grid/Grid.js +0 -53
  51. package/dist/components/Icon/Icon.css +0 -55
  52. package/dist/components/Icon/Icon.d.ts +0 -13
  53. package/dist/components/Icon/Icon.js +0 -41
  54. package/dist/components/Input/Input.css +0 -190
  55. package/dist/components/Input/Input.d.ts +0 -32
  56. package/dist/components/Input/Input.js +0 -58
  57. package/dist/components/Link/Link.css +0 -76
  58. package/dist/components/Link/Link.d.ts +0 -15
  59. package/dist/components/Link/Link.js +0 -19
  60. package/dist/components/Logo/Logo.css +0 -32
  61. package/dist/components/Logo/Logo.d.ts +0 -10
  62. package/dist/components/Logo/Logo.js +0 -16
  63. package/dist/components/Modal/Modal.css +0 -155
  64. package/dist/components/Modal/Modal.d.ts +0 -36
  65. package/dist/components/Modal/Modal.js +0 -55
  66. package/dist/components/Radio/Radio.css +0 -114
  67. package/dist/components/Radio/Radio.d.ts +0 -19
  68. package/dist/components/Radio/Radio.js +0 -39
  69. package/dist/components/Select/Select.css +0 -291
  70. package/dist/components/Select/Select.d.ts +0 -38
  71. package/dist/components/Select/Select.js +0 -246
  72. package/dist/components/Spinner/Spinner.css +0 -60
  73. package/dist/components/Spinner/Spinner.d.ts +0 -16
  74. package/dist/components/Spinner/Spinner.js +0 -16
  75. package/dist/components/Switch/Switch.css +0 -127
  76. package/dist/components/Switch/Switch.d.ts +0 -18
  77. package/dist/components/Switch/Switch.js +0 -57
  78. package/dist/components/Tabs/Tab.d.ts +0 -19
  79. package/dist/components/Tabs/Tab.js +0 -76
  80. package/dist/components/Tabs/TabContent.d.ts +0 -15
  81. package/dist/components/Tabs/TabContent.js +0 -11
  82. package/dist/components/Tabs/Tabs.css +0 -124
  83. package/dist/components/Tabs/Tabs.d.ts +0 -20
  84. package/dist/components/Tabs/Tabs.js +0 -14
  85. package/dist/components/Tabs/TabsContent.d.ts +0 -16
  86. package/dist/components/Tabs/TabsContent.js +0 -12
  87. package/dist/components/Tabs/tabs.context.d.ts +0 -2
  88. package/dist/components/Tabs/tabs.context.js +0 -2
  89. package/dist/components/Tag/Tag.css +0 -140
  90. package/dist/components/Tag/Tag.d.ts +0 -63
  91. package/dist/components/Tag/Tag.js +0 -48
  92. package/dist/components/Text/Text.css +0 -1213
  93. package/dist/components/Text/Text.d.ts +0 -70
  94. package/dist/components/Text/Text.js +0 -89
  95. package/dist/components/Textarea/Textarea.css +0 -133
  96. package/dist/components/Textarea/Textarea.d.ts +0 -28
  97. package/dist/components/Textarea/Textarea.js +0 -72
  98. package/dist/index.d.ts +0 -25
  99. package/dist/index.js +0 -27
  100. package/dist/utils/theme.d.ts +0 -30
  101. package/dist/utils/theme.js +0 -106
@@ -1,246 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import './Select.css';
3
- "use client";
4
- import { useState, useRef, useEffect } from "react";
5
- import Text from "../Text/Text";
6
- import Icon from "../Icon/Icon";
7
- import Spinner from "../Spinner/Spinner";
8
- import Checkbox from "../Checkbox/Checkbox";
9
- import Tag from "../Tag/Tag";
10
- function Select(props) {
11
- const selectRef = useRef(null);
12
- const searchInputRef = useRef(null);
13
- const [isOpen, setIsOpen] = useState(() => false);
14
- const [searchTerm, setSearchTerm] = useState(() => "");
15
- const [internalSelected, setInternalSelected] = useState(() => Array());
16
- const [searchTimeout, setSearchTimeout] = useState(() => null);
17
- const [shouldFocusSearch, setShouldFocusSearch] = useState(() => false);
18
- function selectedOptionsList() {
19
- const currentVal = props.value !== undefined
20
- ? Array.isArray(props.value)
21
- ? props.value
22
- : props.value === null
23
- ? []
24
- : [props.value]
25
- : internalSelected || [];
26
- if (props.options && props.options.length > 0) {
27
- return currentVal.map((v) => {
28
- const found = props.options?.find((opt) => opt.value === v);
29
- return (found || {
30
- label: String(v),
31
- value: v,
32
- });
33
- });
34
- }
35
- return (currentVal || []).map((v) => ({
36
- label: String(v),
37
- value: v,
38
- }));
39
- }
40
- function displayLabelText() {
41
- const currentVal = props.value !== undefined
42
- ? Array.isArray(props.value)
43
- ? props.value
44
- : props.value === null
45
- ? []
46
- : [props.value]
47
- : internalSelected || [];
48
- if (currentVal.length === 0)
49
- return props.placeholder || "Selecione...";
50
- if (props.multiple) {
51
- if (props.selectionDisplay === "tags")
52
- return "";
53
- if (currentVal.length === 1) {
54
- const found = props.options?.find((opt) => opt.value === currentVal[0]);
55
- return found ? found.label : String(currentVal[0]);
56
- }
57
- return `${currentVal.length} selecionado(s)`;
58
- }
59
- // For single select, find label
60
- if (props.options) {
61
- const found = props.options.find((opt) => opt.value === currentVal[0]);
62
- if (found)
63
- return found.label;
64
- }
65
- return String(currentVal[0]);
66
- }
67
- function isPlaceholder() {
68
- const currentVal = props.value !== undefined
69
- ? Array.isArray(props.value)
70
- ? props.value
71
- : props.value === null
72
- ? []
73
- : [props.value]
74
- : internalSelected || [];
75
- return currentVal.length === 0;
76
- }
77
- function filteredOptionsList() {
78
- if (!props.options)
79
- return [];
80
- // If it's remote search (onSearchChange provided), we don't filter locally
81
- if (!props.searchable || !searchTerm || props.onSearchChange)
82
- return props.options;
83
- const term = searchTerm.toLowerCase();
84
- return props.options.filter((opt) => opt.label.toLowerCase().includes(term));
85
- }
86
- function wrapperClassesList() {
87
- return [
88
- "umds-select",
89
- `umds-select--${props.size || "medium"}`,
90
- props.fullWidth ? "umds-select--full-width" : "",
91
- props.disabled ? "umds-select--disabled" : "",
92
- props.invalid ? "umds-select--invalid" : "",
93
- isOpen ? "umds-select--open" : "",
94
- props.searchVariant === "inline" ? "umds-select--search-inline" : "",
95
- props.multiple &&
96
- props.selectionDisplay === "tags" &&
97
- selectedOptionsList().length > 0
98
- ? "umds-select--has-tags"
99
- : "",
100
- props.className,
101
- ]
102
- .filter(Boolean)
103
- .join(" ");
104
- }
105
- function toggle() {
106
- if (props.disabled)
107
- return;
108
- setIsOpen(!isOpen);
109
- if (isOpen &&
110
- props.searchable &&
111
- (props.autoFocusSearch || props.searchVariant === "inline")) {
112
- setShouldFocusSearch(true);
113
- }
114
- }
115
- function handleSearch(event) {
116
- const val = event.target.value;
117
- setSearchTerm(val);
118
- if (props.onSearchChange) {
119
- if (searchTimeout) {
120
- clearTimeout(searchTimeout);
121
- }
122
- const debounceTime = props.searchDebounce ?? 300;
123
- setSearchTimeout(setTimeout(() => {
124
- props.onSearchChange(val);
125
- }, debounceTime));
126
- }
127
- }
128
- function clearSearch() {
129
- setSearchTerm("");
130
- if (props.onSearchChange) {
131
- props.onSearchChange("");
132
- }
133
- if (searchInputRef.current) {
134
- searchInputRef.current.focus();
135
- }
136
- }
137
- function closeSearch() {
138
- setIsOpen(false);
139
- setSearchTerm("");
140
- if (props.onSearchChange) {
141
- props.onSearchChange("");
142
- }
143
- }
144
- function selectOption(option) {
145
- if (props.disabled)
146
- return;
147
- let newValue;
148
- if (props.multiple) {
149
- const currentVal = props.value !== undefined
150
- ? Array.isArray(props.value)
151
- ? props.value
152
- : props.value === null
153
- ? []
154
- : [props.value]
155
- : internalSelected || [];
156
- if (currentVal.includes(option.value)) {
157
- newValue = currentVal.filter((v) => v !== option.value);
158
- }
159
- else {
160
- newValue = [...currentVal, option.value];
161
- }
162
- setInternalSelected(newValue);
163
- }
164
- else {
165
- newValue = option.value;
166
- setInternalSelected([newValue]);
167
- setIsOpen(false);
168
- }
169
- if (props.onChange) {
170
- props.onChange(newValue);
171
- }
172
- }
173
- function removeValue(val, event) {
174
- if (event)
175
- event.stopPropagation();
176
- if (props.disabled)
177
- return;
178
- const currentVal = props.value !== undefined
179
- ? Array.isArray(props.value)
180
- ? props.value
181
- : [props.value]
182
- : internalSelected || [];
183
- const newValue = currentVal.filter((v) => v !== val);
184
- setInternalSelected(newValue);
185
- if (props.onChange) {
186
- props.onChange(newValue);
187
- }
188
- }
189
- function onScrollList(event) {
190
- if (!props.pagination ||
191
- !props.onLoadMore ||
192
- props.loading ||
193
- !props.hasMore)
194
- return;
195
- const { scrollTop, scrollHeight, clientHeight } = event.target;
196
- if (scrollHeight - scrollTop <= clientHeight + 10) {
197
- props.onLoadMore();
198
- }
199
- }
200
- function isOptionSelected(val) {
201
- const currentVal = props.value !== undefined
202
- ? Array.isArray(props.value)
203
- ? props.value
204
- : props.value === null
205
- ? []
206
- : [props.value]
207
- : internalSelected || [];
208
- return currentVal.includes(val);
209
- }
210
- useEffect(() => {
211
- const handleClickOutside = (event) => {
212
- if (selectRef.current &&
213
- !selectRef.current.contains(event.target)) {
214
- setIsOpen(false);
215
- }
216
- };
217
- document.addEventListener("mousedown", handleClickOutside);
218
- }, []);
219
- useEffect(() => {
220
- if (isOpen && shouldFocusSearch) {
221
- // Retry a few times if ref is not yet ready (though onUpdate usually implies rendered)
222
- // We use a small timeout to ensure browser paints or simply check ref
223
- if (searchInputRef.current) {
224
- searchInputRef.current.focus();
225
- setShouldFocusSearch(false);
226
- }
227
- }
228
- });
229
- return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", weight: "semibold", className: "umds-select__label", children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(isOpen && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", className: "umds-select__trigger", onClick: (event) => toggle(), "aria-expanded": isOpen, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [displayLabelText() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
230
- props.selectionDisplay === "tags" &&
231
- selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { variant: "outlined", size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, { size: "sm", name: isOpen ? "nav-arrow-up" : "nav-arrow-down" }) })] })] })) : null, isOpen ? (_jsxs("div", { className: "umds-select__dropdown", style: props.searchVariant === "inline"
232
- ? {
233
- top: "0",
234
- }
235
- : {}, children: [props.searchable ? (_jsxs("div", { className: "umds-select__search-container", children: [_jsx("div", { className: "umds-select__search-icon", children: _jsx(Icon, { name: "search", size: "sm" }) }), _jsx("input", { type: "text", placeholder: "Buscar...", className: "umds-select__search-input", ref: searchInputRef, value: searchTerm, onInput: (e) => handleSearch(e) }), props.searchVariant === "inline" ? (_jsx("div", { className: "umds-select__search-close", onClick: (event) => closeSearch(), children: _jsx(Icon, { name: "xmark", size: "sm" }) })) : null] })) : null, _jsxs("div", { className: "umds-select__options", onScroll: (e) => onScrollList(e), children: [filteredOptionsList().length === 0 && !props.loading ? (_jsx("div", { className: "umds-select__no-options", children: _jsx(Text, { variant: "body2", color: "secondary", children: "Nenhum item encontrado" }) })) : null, filteredOptionsList()?.map((option) => (_jsxs("div", { onClick: (event) => selectOption(option), className: [
236
- "umds-select__option",
237
- isOptionSelected(option.value)
238
- ? "umds-select__option--selected"
239
- : "",
240
- ]
241
- .filter(Boolean)
242
- .join(" "), children: [props.multiple ? (_jsx("div", { className: "umds-select__option-checkbox", children: _jsx(Checkbox, { checked: isOptionSelected(option.value), readOnly: true }) })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { name: "check", size: "sm" }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: "Carregando mais..." })] })) : null] })] })) : null] }), props.errorMessage ? (_jsx(Text, { variant: "caption", color: "error", className: "umds-select__error-message", children: props.errorMessage })) : null, props.description && !props.errorMessage ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", children: props.description })) : null, props.multiple &&
243
- props.selectionDisplay === "list" &&
244
- selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__selected-list", children: selectedOptionsList()?.map((opt) => (_jsxs("div", { className: "umds-select__selected-list-item", children: [_jsx(Text, { variant: "body2", children: opt.label }), _jsx("span", { className: "umds-select__list-remove", onClick: (e) => removeValue(opt.value, e), children: _jsx(Icon, { name: "trash", size: "sm" }) })] }, opt.value))) })) : null] }));
245
- }
246
- export default Select;
@@ -1,60 +0,0 @@
1
- .umds-spinner {
2
- display: inline-flex;
3
- align-items: center;
4
- justify-content: center;
5
- }
6
-
7
- .umds-spinner__circle {
8
- display: block;
9
- border-radius: 50%;
10
- border-style: solid;
11
- border-top-color: transparent;
12
- border-right-color: transparent;
13
- animation: umds-spinner-rotate 0.8s linear infinite;
14
- }
15
-
16
- /* Sizes */
17
- .umds-spinner--sm .umds-spinner__circle {
18
- width: 16px;
19
- height: 16px;
20
- border-width: 2px;
21
- }
22
-
23
- .umds-spinner--md .umds-spinner__circle {
24
- width: 24px;
25
- height: 24px;
26
- border-width: 3px;
27
- }
28
-
29
- .umds-spinner--lg .umds-spinner__circle {
30
- width: 32px;
31
- height: 32px;
32
- border-width: 4px;
33
- }
34
-
35
- /* Variants */
36
- .umds-spinner--primary .umds-spinner__circle {
37
- border-bottom-color: var(--umds-semantic-color-primary-pure);
38
- border-left-color: var(--umds-semantic-color-primary-pure);
39
- }
40
-
41
- .umds-spinner--secondary .umds-spinner__circle {
42
- border-bottom-color: var(--umds-semantic-color-primary-dark);
43
- border-left-color: var(--umds-semantic-color-primary-dark);
44
- }
45
-
46
- .umds-spinner--neutral .umds-spinner__circle {
47
- border-bottom-color: var(--umds-semantic-color-neutral-dark-medium);
48
- border-left-color: var(--umds-semantic-color-neutral-dark-medium);
49
- }
50
-
51
- /* Animation */
52
- @keyframes umds-spinner-rotate {
53
- from {
54
- transform: rotate(0deg);
55
- }
56
-
57
- to {
58
- transform: rotate(360deg);
59
- }
60
- }
@@ -1,16 +0,0 @@
1
- import './Spinner.css';
2
- /**
3
- * Spinner component for loading states
4
- * @property {string} size - Tamanho do spinner: 'sm' (16px), 'md' (24px), 'lg' (32px)
5
- * @property {string} variant - Variante de cor: 'primary', 'secondary', 'neutral'
6
- * @property {string} label - Label acessível para leitores de tela
7
- */
8
- export interface SpinnerProps {
9
- size?: "sm" | "md" | "lg";
10
- variant?: "primary" | "secondary" | "neutral";
11
- label?: string;
12
- className?: string;
13
- [key: string]: any;
14
- }
15
- declare function Spinner(props: SpinnerProps): import("react/jsx-runtime").JSX.Element;
16
- export default Spinner;
@@ -1,16 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import './Spinner.css';
3
- function Spinner(props) {
4
- function classes() {
5
- return [
6
- "umds-spinner",
7
- `umds-spinner--${props.size || "md"}`,
8
- `umds-spinner--${props.variant || "primary"}`,
9
- props.className,
10
- ]
11
- .filter(Boolean)
12
- .join(" ");
13
- }
14
- return (_jsx("span", { role: "status", "aria-label": props.label || "Carregando", ...props, className: classes(), children: _jsx("span", { className: "umds-spinner__circle" }) }));
15
- }
16
- export default Spinner;
@@ -1,127 +0,0 @@
1
- .umds-switch {
2
- appearance: none;
3
- background-color: var(--umds-semantic-color-neutral-light-down);
4
- /* Off state */
5
- border: none;
6
- border-radius: var(--umds-primitive-border-radius-pill);
7
- cursor: pointer;
8
- display: inline-flex;
9
- padding: 2px;
10
- position: relative;
11
- transition: background-color 0.2s ease;
12
- vertical-align: middle;
13
- box-sizing: border-box;
14
- }
15
-
16
- .umds-switch:focus-visible {
17
- outline: 2px solid var(--umds-semantic-color-neutral-dark-down);
18
- outline-offset: 2px;
19
- box-shadow: none;
20
- }
21
-
22
- .umds-switch[aria-checked="true"] {
23
- background-color: var(--umds-semantic-color-primary-pure);
24
- }
25
-
26
- .umds-switch:disabled {
27
- opacity: 0.5;
28
- cursor: not-allowed;
29
- }
30
-
31
- /* Thumb */
32
- .umds-switch__thumb {
33
- background-color: var(--umds-semantic-color-neutral-light-pure, white);
34
- border-radius: var(--umds-primitive-border-radius-circular);
35
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.06);
36
- display: flex;
37
- align-items: center;
38
- justify-content: center;
39
- transition: transform 0.2s ease;
40
- transform: translateX(0);
41
-
42
- /* Icon styles inherited from thumb */
43
- pointer-events: none;
44
- color: var(--umds-semantic-color-neutral-pure);
45
- }
46
-
47
- .umds-switch[aria-checked="true"] .umds-switch__thumb {
48
- color: var(--umds-semantic-color-primary-pure);
49
- }
50
-
51
- /* Sizes */
52
- /* Large */
53
- .umds-switch--large {
54
- width: 66px;
55
- height: 36px;
56
- padding: 2px;
57
- }
58
-
59
- .umds-switch--large .umds-switch__thumb {
60
- width: var(--umds-primitive-spacing-xs);
61
- height: var(--umds-primitive-spacing-xs);
62
- }
63
-
64
- .umds-switch--large[aria-checked="true"] .umds-switch__thumb {
65
- transform: translateX(30px);
66
- /* 66 - 2 - 32 - 2 = 30 */
67
- }
68
-
69
- /* Medium */
70
- .umds-switch--medium {
71
- width: 52px;
72
- height: 28px;
73
- padding: 2px;
74
- /* Assuming 2px */
75
- }
76
-
77
- .umds-switch--medium .umds-switch__thumb {
78
- width: var(--umds-primitive-spacing-xxs);
79
- height: var(--umds-primitive-spacing-xxs);
80
- }
81
-
82
- .umds-switch--medium[aria-checked="true"] .umds-switch__thumb {
83
- transform: translateX(24px);
84
- /* 52 - 2 - 24 - 2 = 24 */
85
- }
86
-
87
- /* Small */
88
- .umds-switch--small {
89
- width: 44px;
90
- height: var(--umds-primitive-spacing-xxs);
91
- padding: 1.5px;
92
- }
93
-
94
- .umds-switch--small .umds-switch__thumb {
95
- width: 21px;
96
- height: 21px;
97
- }
98
-
99
- .umds-switch--small[aria-checked="true"] .umds-switch__thumb {
100
- transform: translateX(20px);
101
- /* 44 - 1.5 - 21 - 1.5 = 20 */
102
- }
103
-
104
- /* Wrapper (Layout) */
105
- .umds-switch-wrapper {
106
- display: flex;
107
- justify-content: flex-start;
108
- align-items: flex-start;
109
- gap: var(--umds-primitive-spacing-xxxs);
110
- width: 100%;
111
- box-sizing: border-box;
112
- }
113
-
114
- /* Wrapper (Background Style) */
115
- .umds-switch-wrapper--background {
116
- background-color: var(--umds-semantic-color-neutral-light-pure, white);
117
- padding: var(--umds-primitive-spacing-xxxs);
118
- border-radius: var(--umds-primitive-border-radius-sm);
119
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06);
120
- }
121
-
122
- .umds-switch-text {
123
- display: flex;
124
- flex-direction: column;
125
- gap: var(--umds-primitive-spacing-quarck);
126
- flex-grow: 1;
127
- }
@@ -1,18 +0,0 @@
1
- import './Switch.css';
2
- export interface SwitchProps {
3
- checked?: any;
4
- defaultChecked?: boolean;
5
- disabled?: boolean;
6
- size?: "small" | "medium" | "large";
7
- name?: string;
8
- value?: string;
9
- id?: string;
10
- label?: string;
11
- description?: string;
12
- background?: boolean;
13
- className?: string;
14
- onChange?: (checked: boolean) => void;
15
- [key: string]: any;
16
- }
17
- declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
18
- export default Switch;
@@ -1,57 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import './Switch.css';
3
- "use client";
4
- import { useState } from "react";
5
- import Icon from "../Icon/Icon";
6
- import Text from "../Text/Text";
7
- function Switch(props) {
8
- const [internalChecked, setInternalChecked] = useState(() => props.defaultChecked || false);
9
- function isChecked() {
10
- return props.checked !== undefined ? props.checked : internalChecked;
11
- }
12
- function toggle() {
13
- if (props.disabled)
14
- return;
15
- // Workaround for Mitosis Vue generation issue with getters
16
- const current = props.checked !== undefined ? props.checked : internalChecked;
17
- const newValue = !current;
18
- setInternalChecked(newValue);
19
- props.onChange?.(newValue);
20
- }
21
- function classes() {
22
- return [
23
- "umds-switch",
24
- `umds-switch--${props.size || "large"}`,
25
- props.disabled ? "umds-switch--disabled" : "",
26
- !isWrapper() ? props.className : "",
27
- ]
28
- .filter(Boolean)
29
- .join(" ");
30
- }
31
- function classesWrapper() {
32
- return [
33
- "umds-switch-wrapper",
34
- props.background ? "umds-switch-wrapper--background" : "",
35
- props.className,
36
- ]
37
- .filter(Boolean)
38
- .join(" ");
39
- }
40
- function isWrapper() {
41
- return !!(props.background || props.label || props.description);
42
- }
43
- function iconSize() {
44
- if (props.size === "small" || props.size === "medium") {
45
- return "sm";
46
- }
47
- return "lg"; // default is large (24px)
48
- }
49
- return (_jsxs(_Fragment, { children: [isWrapper() ? (_jsxs("div", { ...props, className: classesWrapper(), children: [_jsx("button", { type: "button", role: "switch", "aria-checked": isChecked(), disabled: props.disabled, onClick: (event) => {
50
- event.preventDefault();
51
- toggle();
52
- }, name: props.name, value: props.value, id: props.id, className: classes(), children: _jsxs("span", { className: "umds-switch__thumb", children: [isChecked() ? (_jsx(_Fragment, { children: props.iconChecked || _jsx(Icon, { name: "check", size: iconSize() }) })) : null, !isChecked() ? (_jsx(_Fragment, { children: props.iconNotChecked || (_jsx(Icon, { name: "xmark", size: iconSize() })) })) : null] }) }), _jsxs("div", { className: "umds-switch-text", children: [props.label ? (_jsx(Text, { as: "span", weight: "semibold", variant: props.size === "small" ? "body2" : "body1", children: props.label })) : null, props.description ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: props.description })) : null] })] })) : null, !isWrapper() ? (_jsx("button", { type: "button", role: "switch", "aria-checked": isChecked(), disabled: props.disabled, onClick: (event) => {
53
- event.preventDefault();
54
- toggle();
55
- }, ...props, className: classes(), children: _jsxs("span", { className: "umds-switch__thumb", children: [isChecked() ? (_jsx(_Fragment, { children: props.iconChecked || _jsx(Icon, { name: "check", size: iconSize() }) })) : null, !isChecked() ? (_jsx(_Fragment, { children: props.iconNotChecked || (_jsx(Icon, { name: "xmark", size: iconSize() })) })) : null] }) })) : null] }));
56
- }
57
- export default Switch;
@@ -1,19 +0,0 @@
1
- /**
2
- * Propriedades do componente Tab.
3
- * @description Representa uma aba individual dentro do componente Tabs.
4
- */
5
- export interface TabProps {
6
- /** Texto exibido na tab */
7
- label: string;
8
- /** Identificador único da tab. Deve corresponder ao index do TabContent */
9
- index: string;
10
- /** Nome do ícone Iconoir a ser exibido (opcional) */
11
- icon?: string;
12
- /** Se a tab está desabilitada */
13
- disabled?: boolean;
14
- /** Classes CSS adicionais */
15
- className?: string;
16
- [key: string]: any;
17
- }
18
- declare function Tab(props: TabProps): import("react/jsx-runtime").JSX.Element;
19
- export default Tab;
@@ -1,76 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useContext } from "react";
4
- import TabsContext from "./tabs.context";
5
- import Icon from "../Icon/Icon";
6
- function Tab(props) {
7
- function isSelected() {
8
- return tabsContext.value === props.index;
9
- }
10
- function classes() {
11
- return [
12
- "umds-tabs__tab",
13
- isSelected() ? "umds-tabs__tab--selected" : "",
14
- props.disabled ? "umds-tabs__tab--disabled" : "",
15
- props.className,
16
- ]
17
- .filter(Boolean)
18
- .join(" ");
19
- }
20
- function labelClasses() {
21
- return [
22
- "umds-tabs__label",
23
- isSelected() ? "umds-tabs__label--selected" : "",
24
- ]
25
- .filter(Boolean)
26
- .join(" ");
27
- }
28
- function handleClick() {
29
- if (props.disabled)
30
- return;
31
- if (typeof tabsContext.onChange === "function") {
32
- tabsContext.onChange(props.index);
33
- }
34
- }
35
- function handleKeyDown(event) {
36
- if (props.disabled)
37
- return;
38
- if (event.key === "Enter" || event.key === " ") {
39
- event.preventDefault();
40
- handleClick();
41
- return;
42
- }
43
- const tablist = event.target.closest('[role="tablist"]');
44
- if (!tablist)
45
- return;
46
- const tabs = tablist.querySelectorAll('[role="tab"]:not([disabled])');
47
- const currentIndex = Array.from(tabs).indexOf(event.target);
48
- let targetIndex = -1;
49
- if (event.key === "ArrowRight") {
50
- event.preventDefault();
51
- targetIndex = (currentIndex + 1) % tabs.length;
52
- }
53
- if (event.key === "ArrowLeft") {
54
- event.preventDefault();
55
- targetIndex = (currentIndex - 1 + tabs.length) % tabs.length;
56
- }
57
- if (event.key === "Home") {
58
- event.preventDefault();
59
- targetIndex = 0;
60
- }
61
- if (event.key === "End") {
62
- event.preventDefault();
63
- targetIndex = tabs.length - 1;
64
- }
65
- if (targetIndex >= 0 && tabs[targetIndex]) {
66
- tabs[targetIndex].focus();
67
- const tabIndex = tabs[targetIndex].getAttribute("data-tab-index");
68
- if (tabIndex && typeof tabsContext.onChange === "function") {
69
- tabsContext.onChange(tabIndex);
70
- }
71
- }
72
- }
73
- const tabsContext = useContext(TabsContext);
74
- return (_jsxs("button", { role: "tab", "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { size: "md", variant: "inherit", className: "umds-tabs__icon", name: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label })] }));
75
- }
76
- export default Tab;
@@ -1,15 +0,0 @@
1
- /**
2
- * Propriedades do componente TabContent.
3
- * @description Painel de conteúdo individual associado a uma tab via index.
4
- */
5
- export interface TabContentProps {
6
- /** Identificador da tab. Deve corresponder ao index do Tab associado */
7
- index: string;
8
- /** Classes CSS adicionais */
9
- className?: string;
10
- /** Conteúdo do painel */
11
- children?: any;
12
- [key: string]: any;
13
- }
14
- declare function TabContent(props: TabContentProps): import("react/jsx-runtime").JSX.Element;
15
- export default TabContent;
@@ -1,11 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { useContext } from "react";
4
- import TabsContext from "./tabs.context";
5
- function TabContent(props) {
6
- const tabsContext = useContext(TabsContext);
7
- return (_jsx(_Fragment, { children: tabsContext.value === props.index ? (_jsx(_Fragment, { children: _jsx("div", { role: "tabpanel", "data-tab-index": props.index, className: ["umds-tabs__content", props.className]
8
- .filter(Boolean)
9
- .join(" "), children: props.children }) })) : null }));
10
- }
11
- export default TabContent;