vector-prototype-components 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/Accordion/Accordion.js +79 -0
- package/Accordion/Accordion.js.map +1 -0
- package/Accordion/Accordion.module.css +1 -0
- package/Accordion/Accordion.module.css.js +36 -0
- package/Accordion/Accordion.module.css.js.map +1 -0
- package/ActionMenu/ActionMenu.js +49 -0
- package/ActionMenu/ActionMenu.js.map +1 -0
- package/ActionMenu/ActionMenu.module.css +1 -0
- package/ActionMenu/ActionMenu.module.css.js +16 -0
- package/ActionMenu/ActionMenu.module.css.js.map +1 -0
- package/Autocomplete/Autocomplete.js +226 -0
- package/Autocomplete/Autocomplete.js.map +1 -0
- package/Autocomplete/Autocomplete.module.css +1 -0
- package/Autocomplete/Autocomplete.module.css.js +46 -0
- package/Autocomplete/Autocomplete.module.css.js.map +1 -0
- package/Avatar/Avatar.js +66 -0
- package/Avatar/Avatar.js.map +1 -0
- package/Avatar/Avatar.module.css +1 -0
- package/Avatar/Avatar.module.css.js +26 -0
- package/Avatar/Avatar.module.css.js.map +1 -0
- package/Badge/Badge.js +40 -0
- package/Badge/Badge.js.map +1 -0
- package/Badge/Badge.module.css +1 -0
- package/Badge/Badge.module.css.js +24 -0
- package/Badge/Badge.module.css.js.map +1 -0
- package/BottomBar/BottomBar.js +19 -0
- package/BottomBar/BottomBar.js.map +1 -0
- package/BottomBar/BottomBar.module.css +1 -0
- package/BottomBar/BottomBar.module.css.js +10 -0
- package/BottomBar/BottomBar.module.css.js.map +1 -0
- package/Breadcrumbs/Breadcrumbs.js +40 -0
- package/Breadcrumbs/Breadcrumbs.js.map +1 -0
- package/Breadcrumbs/Breadcrumbs.module.css +1 -0
- package/Breadcrumbs/Breadcrumbs.module.css.js +18 -0
- package/Breadcrumbs/Breadcrumbs.module.css.js.map +1 -0
- package/Button/Button.js +53 -0
- package/Button/Button.js.map +1 -0
- package/Button/Button.module.css +1 -0
- package/Button/Button.module.css.js +24 -0
- package/Button/Button.module.css.js.map +1 -0
- package/Callout/Callout.js +66 -0
- package/Callout/Callout.js.map +1 -0
- package/Callout/Callout.module.css +1 -0
- package/Callout/Callout.module.css.js +28 -0
- package/Callout/Callout.module.css.js.map +1 -0
- package/Card/Card.js +39 -0
- package/Card/Card.js.map +1 -0
- package/Card/Card.module.css +1 -0
- package/Card/Card.module.css.js +18 -0
- package/Card/Card.module.css.js.map +1 -0
- package/Checkbox/Checkbox.js +90 -0
- package/Checkbox/Checkbox.js.map +1 -0
- package/Checkbox/Checkbox.module.css +1 -0
- package/Checkbox/Checkbox.module.css.js +22 -0
- package/Checkbox/Checkbox.module.css.js.map +1 -0
- package/Chip/Chip.js +62 -0
- package/Chip/Chip.js.map +1 -0
- package/Chip/Chip.module.css +1 -0
- package/Chip/Chip.module.css.js +24 -0
- package/Chip/Chip.module.css.js.map +1 -0
- package/DatePicker/DatePicker.js +157 -0
- package/DatePicker/DatePicker.js.map +1 -0
- package/DatePicker/DatePicker.module.css +1 -0
- package/DatePicker/DatePicker.module.css.js +48 -0
- package/DatePicker/DatePicker.module.css.js.map +1 -0
- package/DatePicker/DatePickerCalendar.js +94 -0
- package/DatePicker/DatePickerCalendar.js.map +1 -0
- package/DatePicker/DatePickerCalendar.module.css +1 -0
- package/DatePicker/DatePickerCalendar.module.css.js +32 -0
- package/DatePicker/DatePickerCalendar.module.css.js.map +1 -0
- package/Divider/Divider.js +22 -0
- package/Divider/Divider.js.map +1 -0
- package/Divider/Divider.module.css +1 -0
- package/Divider/Divider.module.css.js +12 -0
- package/Divider/Divider.module.css.js.map +1 -0
- package/Dropdown/Dropdown.js +100 -0
- package/Dropdown/Dropdown.js.map +1 -0
- package/Dropdown/Dropdown.module.css +1 -0
- package/Dropdown/Dropdown.module.css.js +20 -0
- package/Dropdown/Dropdown.module.css.js.map +1 -0
- package/Icon/Icon.js +8 -0
- package/Icon/Icon.js.map +1 -0
- package/IconButton/IconButton.js +42 -0
- package/IconButton/IconButton.js.map +1 -0
- package/IconButton/IconButton.module.css +1 -0
- package/IconButton/IconButton.module.css.js +20 -0
- package/IconButton/IconButton.module.css.js.map +1 -0
- package/InputNumber/InputNumber.js +106 -0
- package/InputNumber/InputNumber.js.map +1 -0
- package/InputNumber/InputNumber.module.css +1 -0
- package/InputNumber/InputNumber.module.css.js +30 -0
- package/InputNumber/InputNumber.module.css.js.map +1 -0
- package/Menu/Menu.js +182 -0
- package/Menu/Menu.js.map +1 -0
- package/Menu/Menu.module.css +1 -0
- package/Menu/Menu.module.css.js +56 -0
- package/Menu/Menu.module.css.js.map +1 -0
- package/Menu/menuData.js +188 -0
- package/Menu/menuData.js.map +1 -0
- package/Message/Message.js +88 -0
- package/Message/Message.js.map +1 -0
- package/Message/Message.module.css +1 -0
- package/Message/Message.module.css.js +32 -0
- package/Message/Message.module.css.js.map +1 -0
- package/Modal/Modal.js +186 -0
- package/Modal/Modal.js.map +1 -0
- package/Modal/Modal.module.css +1 -0
- package/Modal/Modal.module.css.js +44 -0
- package/Modal/Modal.module.css.js.map +1 -0
- package/Multiselect/Multiselect.js +249 -0
- package/Multiselect/Multiselect.js.map +1 -0
- package/Multiselect/Multiselect.module.css +1 -0
- package/Multiselect/Multiselect.module.css.js +64 -0
- package/Multiselect/Multiselect.module.css.js.map +1 -0
- package/Overlay/Overlay.js +18 -0
- package/Overlay/Overlay.js.map +1 -0
- package/Overlay/Overlay.module.css +1 -0
- package/Overlay/Overlay.module.css.js +8 -0
- package/Overlay/Overlay.module.css.js.map +1 -0
- package/Paginator/Paginator.js +118 -0
- package/Paginator/Paginator.js.map +1 -0
- package/Paginator/Paginator.module.css +1 -0
- package/Paginator/Paginator.module.css.js +22 -0
- package/Paginator/Paginator.module.css.js.map +1 -0
- package/Panel/Panel.js +38 -0
- package/Panel/Panel.js.map +1 -0
- package/Panel/Panel.module.css +1 -0
- package/Panel/Panel.module.css.js +16 -0
- package/Panel/Panel.module.css.js.map +1 -0
- package/ProgressSpinner/ProgressSpinner.js +64 -0
- package/ProgressSpinner/ProgressSpinner.js.map +1 -0
- package/ProgressSpinner/ProgressSpinner.module.css +1 -0
- package/ProgressSpinner/ProgressSpinner.module.css.js +16 -0
- package/ProgressSpinner/ProgressSpinner.module.css.js.map +1 -0
- package/Radio/Radio.js +44 -0
- package/Radio/Radio.js.map +1 -0
- package/Radio/Radio.module.css +1 -0
- package/Radio/Radio.module.css.js +18 -0
- package/Radio/Radio.module.css.js.map +1 -0
- package/SegmentControl/SegmentControl.js +74 -0
- package/SegmentControl/SegmentControl.js.map +1 -0
- package/SegmentControl/SegmentControl.module.css +1 -0
- package/SegmentControl/SegmentControl.module.css.js +16 -0
- package/SegmentControl/SegmentControl.module.css.js.map +1 -0
- package/Select/Select.js +153 -0
- package/Select/Select.js.map +1 -0
- package/Select/Select.module.css +1 -0
- package/Select/Select.module.css.js +46 -0
- package/Select/Select.module.css.js.map +1 -0
- package/Skeleton/Skeleton.js +78 -0
- package/Skeleton/Skeleton.js.map +1 -0
- package/Skeleton/Skeleton.module.css +1 -0
- package/Skeleton/Skeleton.module.css.js +18 -0
- package/Skeleton/Skeleton.module.css.js.map +1 -0
- package/Slider/Slider.js +116 -0
- package/Slider/Slider.js.map +1 -0
- package/Slider/Slider.module.css +1 -0
- package/Slider/Slider.module.css.js +24 -0
- package/Slider/Slider.module.css.js.map +1 -0
- package/Slot/Slot.js +25 -0
- package/Slot/Slot.js.map +1 -0
- package/Slot/Slot.module.css +1 -0
- package/Slot/Slot.module.css.js +16 -0
- package/Slot/Slot.module.css.js.map +1 -0
- package/Switch/Switch.js +42 -0
- package/Switch/Switch.js.map +1 -0
- package/Switch/Switch.module.css +1 -0
- package/Switch/Switch.module.css.js +11 -0
- package/Switch/Switch.module.css.js.map +1 -0
- package/Table/Table.js +268 -0
- package/Table/Table.js.map +1 -0
- package/Table/Table.module.css +1 -0
- package/Table/Table.module.css.js +64 -0
- package/Table/Table.module.css.js.map +1 -0
- package/TableTree/TableTree.js +139 -0
- package/TableTree/TableTree.js.map +1 -0
- package/TableTree/TableTree.module.css +1 -0
- package/TableTree/TableTree.module.css.js +62 -0
- package/TableTree/TableTree.module.css.js.map +1 -0
- package/Tabs/Tabs.js +92 -0
- package/Tabs/Tabs.js.map +1 -0
- package/Tabs/Tabs.module.css +1 -0
- package/Tabs/Tabs.module.css.js +18 -0
- package/Tabs/Tabs.module.css.js.map +1 -0
- package/Tag/Tag.js +48 -0
- package/Tag/Tag.js.map +1 -0
- package/Tag/Tag.module.css +1 -0
- package/Tag/Tag.module.css.js +30 -0
- package/Tag/Tag.module.css.js.map +1 -0
- package/TextField/TextField.js +93 -0
- package/TextField/TextField.js.map +1 -0
- package/TextField/TextField.module.css +1 -0
- package/TextField/TextField.module.css.js +36 -0
- package/TextField/TextField.module.css.js.map +1 -0
- package/Textarea/Textarea.js +52 -0
- package/Textarea/Textarea.js.map +1 -0
- package/Textarea/Textarea.module.css +1 -0
- package/Textarea/Textarea.module.css.js +32 -0
- package/Textarea/Textarea.module.css.js.map +1 -0
- package/Toast/Toast.js +82 -0
- package/Toast/Toast.js.map +1 -0
- package/Toast/Toast.module.css +1 -0
- package/Toast/Toast.module.css.js +28 -0
- package/Toast/Toast.module.css.js.map +1 -0
- package/Tooltip/Tooltip.js +61 -0
- package/Tooltip/Tooltip.js.map +1 -0
- package/Tooltip/Tooltip.module.css +1 -0
- package/Tooltip/Tooltip.module.css.js +26 -0
- package/Tooltip/Tooltip.module.css.js.map +1 -0
- package/TopBar/TopBar.js +87 -0
- package/TopBar/TopBar.js.map +1 -0
- package/TopBar/TopBar.module.css +1 -0
- package/TopBar/TopBar.module.css.js +30 -0
- package/TopBar/TopBar.module.css.js.map +1 -0
- package/index.js +90 -4157
- package/index.js.map +1 -1
- package/package.json +3 -4
- package/style.css +0 -1
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import './TableTree.module.css';const t = "_tableTree_13czp_2", e = "_tableBody_13czp_15 _scrollable_1rjtm_9", n = "_tableEl_13czp_26", o = "_thead_13czp_33", _ = "_th_13czp_33", c = "_thSortable_13czp_54", p = "_thExpand_13czp_70", d = "_thInner_13czp_77", a = "_thContent_13czp_83", r = "_thLabel_13czp_91", l = "_thSortIcon_13czp_103", s = "_tr_13czp_118", x = "_td_13czp_123", z = "_trSelected_13czp_127", h = "_trExpanded_13czp_136", f = "_tdExpanded_13czp_138", b = "_expandedContainer_13czp_143", E = "_tdSelected_13czp_161", I = "_tdExpand_13czp_138", S = "_expandBtn_13czp_182", B = "_expandBtnIcon_13czp_209", T = "_expandBtnIconOpen_13czp_213", i = "_cellText_13czp_218", C = "_footer_13czp_231", y = "_footerScrollWrap_13czp_240", g = "_footerInfo_13czp_248", L = "_footerText_13czp_257", O = "_footerPaginator_13czp_266", P = {
|
|
2
|
+
tableTree: t,
|
|
3
|
+
tableBody: e,
|
|
4
|
+
tableEl: n,
|
|
5
|
+
thead: o,
|
|
6
|
+
th: _,
|
|
7
|
+
thSortable: c,
|
|
8
|
+
thExpand: p,
|
|
9
|
+
thInner: d,
|
|
10
|
+
thContent: a,
|
|
11
|
+
thLabel: r,
|
|
12
|
+
thSortIcon: l,
|
|
13
|
+
tr: s,
|
|
14
|
+
td: x,
|
|
15
|
+
trSelected: z,
|
|
16
|
+
trExpanded: h,
|
|
17
|
+
tdExpanded: f,
|
|
18
|
+
expandedContainer: b,
|
|
19
|
+
tdSelected: E,
|
|
20
|
+
tdExpand: I,
|
|
21
|
+
expandBtn: S,
|
|
22
|
+
expandBtnIcon: B,
|
|
23
|
+
expandBtnIconOpen: T,
|
|
24
|
+
cellText: i,
|
|
25
|
+
footer: C,
|
|
26
|
+
footerScrollWrap: y,
|
|
27
|
+
footerInfo: g,
|
|
28
|
+
footerText: L,
|
|
29
|
+
footerPaginator: O
|
|
30
|
+
};
|
|
31
|
+
export {
|
|
32
|
+
i as cellText,
|
|
33
|
+
P as default,
|
|
34
|
+
S as expandBtn,
|
|
35
|
+
B as expandBtnIcon,
|
|
36
|
+
T as expandBtnIconOpen,
|
|
37
|
+
b as expandedContainer,
|
|
38
|
+
C as footer,
|
|
39
|
+
g as footerInfo,
|
|
40
|
+
O as footerPaginator,
|
|
41
|
+
y as footerScrollWrap,
|
|
42
|
+
L as footerText,
|
|
43
|
+
e as tableBody,
|
|
44
|
+
n as tableEl,
|
|
45
|
+
t as tableTree,
|
|
46
|
+
x as td,
|
|
47
|
+
I as tdExpand,
|
|
48
|
+
f as tdExpanded,
|
|
49
|
+
E as tdSelected,
|
|
50
|
+
_ as th,
|
|
51
|
+
a as thContent,
|
|
52
|
+
p as thExpand,
|
|
53
|
+
d as thInner,
|
|
54
|
+
r as thLabel,
|
|
55
|
+
l as thSortIcon,
|
|
56
|
+
c as thSortable,
|
|
57
|
+
o as thead,
|
|
58
|
+
s as tr,
|
|
59
|
+
h as trExpanded,
|
|
60
|
+
z as trSelected
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=TableTree.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableTree.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/Tabs/Tabs.js
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { jsxs as d, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import c, { useState as j } from "react";
|
|
3
|
+
import { Icon as N } from "../Icon/Icon.js";
|
|
4
|
+
import a from "./Tabs.module.css.js";
|
|
5
|
+
function V({
|
|
6
|
+
tabs: t,
|
|
7
|
+
value: u,
|
|
8
|
+
defaultValue: b,
|
|
9
|
+
onChange: i,
|
|
10
|
+
className: m,
|
|
11
|
+
"aria-label": p,
|
|
12
|
+
"aria-labelledby": y
|
|
13
|
+
}) {
|
|
14
|
+
var v;
|
|
15
|
+
const f = u !== void 0, [h, x] = j(
|
|
16
|
+
b ?? ((v = t.find((e) => !e.disabled)) == null ? void 0 : v.value) ?? ""
|
|
17
|
+
), r = f ? u : h;
|
|
18
|
+
function S(e) {
|
|
19
|
+
e.disabled || (f || x(e.value), i == null || i(e.value));
|
|
20
|
+
}
|
|
21
|
+
const n = c.useRef(null), [s, I] = c.useState(null);
|
|
22
|
+
c.useLayoutEffect(() => {
|
|
23
|
+
if (!n.current) return;
|
|
24
|
+
const e = n.current.querySelector('[aria-selected="true"]');
|
|
25
|
+
e && I({ x: e.offsetLeft, width: e.offsetWidth });
|
|
26
|
+
}, [r]);
|
|
27
|
+
const L = [a.tabList, m].filter(Boolean).join(" ");
|
|
28
|
+
return /* @__PURE__ */ d("div", { children: [
|
|
29
|
+
/* @__PURE__ */ d(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
role: "tablist",
|
|
33
|
+
"aria-label": p,
|
|
34
|
+
"aria-labelledby": y,
|
|
35
|
+
className: L,
|
|
36
|
+
ref: n,
|
|
37
|
+
children: [
|
|
38
|
+
t.map((e) => {
|
|
39
|
+
const l = e.value === r, $ = [a.tab, l ? a.tabSelected : void 0].filter(Boolean).join(" ");
|
|
40
|
+
return /* @__PURE__ */ d(
|
|
41
|
+
"button",
|
|
42
|
+
{
|
|
43
|
+
type: "button",
|
|
44
|
+
role: "tab",
|
|
45
|
+
id: `tab-${e.value}`,
|
|
46
|
+
"aria-selected": l,
|
|
47
|
+
"aria-controls": `tabpanel-${e.value}`,
|
|
48
|
+
"aria-disabled": e.disabled || void 0,
|
|
49
|
+
disabled: e.disabled,
|
|
50
|
+
tabIndex: l ? 0 : -1,
|
|
51
|
+
className: $,
|
|
52
|
+
onClick: () => S(e),
|
|
53
|
+
children: [
|
|
54
|
+
e.leadingIcon && /* @__PURE__ */ o(N, { as: e.leadingIcon, size: 12 }),
|
|
55
|
+
e.label
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
e.value
|
|
59
|
+
);
|
|
60
|
+
}),
|
|
61
|
+
s && /* @__PURE__ */ o(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
className: a.indicator,
|
|
65
|
+
style: { width: s.width, transform: `translateX(${s.x}px)` },
|
|
66
|
+
"aria-hidden": "true"
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
t.map((e) => {
|
|
73
|
+
const l = e.value === r;
|
|
74
|
+
return /* @__PURE__ */ o(
|
|
75
|
+
"div",
|
|
76
|
+
{
|
|
77
|
+
role: "tabpanel",
|
|
78
|
+
id: `tabpanel-${e.value}`,
|
|
79
|
+
"aria-labelledby": `tab-${e.value}`,
|
|
80
|
+
className: l ? a.tabPanel : a.tabPanelHidden,
|
|
81
|
+
hidden: !l,
|
|
82
|
+
children: e.content
|
|
83
|
+
},
|
|
84
|
+
e.value
|
|
85
|
+
);
|
|
86
|
+
})
|
|
87
|
+
] });
|
|
88
|
+
}
|
|
89
|
+
export {
|
|
90
|
+
V as Tabs
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=Tabs.js.map
|
package/Tabs/Tabs.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { Icon as PhosphorIcon } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport styles from './Tabs.module.css';\n\n/* ─── Types ─────────────────────────────────────────────────── */\n\nexport interface TabItem {\n /** Unique identifier for the tab */\n value: string;\n /** Visible label text */\n label: string;\n /** Optional leading icon */\n leadingIcon?: PhosphorIcon;\n /** Whether the tab is disabled */\n disabled?: boolean;\n /** Panel content to render when this tab is active */\n content?: React.ReactNode;\n}\n\nexport interface TabsProps {\n /** Array of tab definitions */\n tabs: TabItem[];\n /** Currently selected tab value (controlled) */\n value?: string;\n /** Default selected tab value (uncontrolled) */\n defaultValue?: string;\n /** Callback fired when the selected tab changes */\n onChange?: (value: string) => void;\n /** Additional class names for the tab list wrapper */\n className?: string;\n /** aria-label for the tablist */\n 'aria-label'?: string;\n /** aria-labelledby for the tablist */\n 'aria-labelledby'?: string;\n}\n\n/* ─── Component ─────────────────────────────────────────────── */\n\nexport function Tabs({\n tabs,\n value: controlledValue,\n defaultValue,\n onChange,\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n}: TabsProps) {\n const isControlled = controlledValue !== undefined;\n\n const [internalValue, setInternalValue] = useState<string>(\n defaultValue ?? tabs.find((t) => !t.disabled)?.value ?? ''\n );\n\n const activeValue = isControlled ? controlledValue : internalValue;\n\n function handleSelect(tab: TabItem) {\n if (tab.disabled) return;\n if (!isControlled) {\n setInternalValue(tab.value);\n }\n onChange?.(tab.value);\n }\n\n // Indicador deslizante: mede o tab ativo e posiciona a linha de 2px.\n // Mesmo padrão do SegmentControl — useLayoutEffect antes do paint.\n const tabListRef = React.useRef<HTMLDivElement>(null);\n const [indicator, setIndicator] = React.useState<{ x: number; width: number } | null>(null);\n\n React.useLayoutEffect(() => {\n if (!tabListRef.current) return;\n const btn = tabListRef.current.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n if (!btn) return;\n setIndicator({ x: btn.offsetLeft, width: btn.offsetWidth });\n }, [activeValue]);\n\n const tabListCls = [styles.tabList, className].filter(Boolean).join(' ');\n\n return (\n <div>\n {/* Tab list */}\n <div\n role=\"tablist\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={tabListCls}\n ref={tabListRef}\n >\n {tabs.map((tab) => {\n const isSelected = tab.value === activeValue;\n const tabCls = [styles.tab, isSelected ? styles.tabSelected : undefined]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n key={tab.value}\n type=\"button\"\n role=\"tab\"\n id={`tab-${tab.value}`}\n aria-selected={isSelected}\n aria-controls={`tabpanel-${tab.value}`}\n aria-disabled={tab.disabled || undefined}\n disabled={tab.disabled}\n tabIndex={isSelected ? 0 : -1}\n className={tabCls}\n onClick={() => handleSelect(tab)}\n >\n {tab.leadingIcon && <Icon as={tab.leadingIcon} size={12} />}\n {tab.label}\n </button>\n );\n })}\n\n {/* Linha deslizante — posicionada absolutamente no fundo do tablist */}\n {indicator && (\n <div\n className={styles.indicator}\n style={{ width: indicator.width, transform: `translateX(${indicator.x}px)` }}\n aria-hidden=\"true\"\n />\n )}\n </div>\n\n {/* Tab panels */}\n {tabs.map((tab) => {\n const isSelected = tab.value === activeValue;\n return (\n <div\n key={tab.value}\n role=\"tabpanel\"\n id={`tabpanel-${tab.value}`}\n aria-labelledby={`tab-${tab.value}`}\n className={isSelected ? styles.tabPanel : styles.tabPanelHidden}\n hidden={!isSelected}\n >\n {tab.content}\n </div>\n );\n })}\n </div>\n );\n}\n"],"names":["Tabs","tabs","controlledValue","defaultValue","onChange","className","ariaLabel","ariaLabelledBy","isControlled","internalValue","setInternalValue","useState","_a","t","activeValue","handleSelect","tab","tabListRef","React","indicator","setIndicator","btn","tabListCls","styles","jsxs","isSelected","tabCls","jsx","Icon"],"mappings":";;;;AAuCO,SAASA,EAAK;AAAA,EACnB,MAAAC;AAAA,EACA,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AACrB,GAAc;;AACZ,QAAMC,IAAeN,MAAoB,QAEnC,CAACO,GAAeC,CAAgB,IAAIC;AAAA,IACxCR,OAAgBS,IAAAX,EAAK,KAAK,CAACY,MAAM,CAACA,EAAE,QAAQ,MAA5B,gBAAAD,EAA+B,UAAS;AAAA,EAAA,GAGpDE,IAAcN,IAAeN,IAAkBO;AAErD,WAASM,EAAaC,GAAc;AAClC,IAAIA,EAAI,aACHR,KACHE,EAAiBM,EAAI,KAAK,GAE5BZ,KAAA,QAAAA,EAAWY,EAAI;AAAA,EACjB;AAIA,QAAMC,IAAaC,EAAM,OAAuB,IAAI,GAC9C,CAACC,GAAWC,CAAY,IAAIF,EAAM,SAA8C,IAAI;AAE1F,EAAAA,EAAM,gBAAgB,MAAM;AAC1B,QAAI,CAACD,EAAW,QAAS;AACzB,UAAMI,IAAMJ,EAAW,QAAQ,cAA2B,wBAAwB;AAClF,IAAKI,KACLD,EAAa,EAAE,GAAGC,EAAI,YAAY,OAAOA,EAAI,aAAa;AAAA,EAC5D,GAAG,CAACP,CAAW,CAAC;AAEhB,QAAMQ,IAAa,CAACC,EAAO,SAASlB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEvE,2BACG,OAAA,EAEC,UAAA;AAAA,IAAA,gBAAAmB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAYlB;AAAA,QACZ,mBAAiBC;AAAA,QACjB,WAAWe;AAAA,QACX,KAAKL;AAAA,QAEJ,UAAA;AAAA,UAAAhB,EAAK,IAAI,CAACe,MAAQ;AACjB,kBAAMS,IAAaT,EAAI,UAAUF,GAC3BY,IAAS,CAACH,EAAO,KAAKE,IAAaF,EAAO,cAAc,MAAS,EACpE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,mBACE,gBAAAC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,IAAI,OAAOR,EAAI,KAAK;AAAA,gBACpB,iBAAeS;AAAA,gBACf,iBAAe,YAAYT,EAAI,KAAK;AAAA,gBACpC,iBAAeA,EAAI,YAAY;AAAA,gBAC/B,UAAUA,EAAI;AAAA,gBACd,UAAUS,IAAa,IAAI;AAAA,gBAC3B,WAAWC;AAAA,gBACX,SAAS,MAAMX,EAAaC,CAAG;AAAA,gBAE9B,UAAA;AAAA,kBAAAA,EAAI,eAAe,gBAAAW,EAACC,GAAA,EAAK,IAAIZ,EAAI,aAAa,MAAM,IAAI;AAAA,kBACxDA,EAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,cAbAA,EAAI;AAAA,YAAA;AAAA,UAgBf,CAAC;AAAA,UAGAG,KACC,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWJ,EAAO;AAAA,cAClB,OAAO,EAAE,OAAOJ,EAAU,OAAO,WAAW,cAAcA,EAAU,CAAC,MAAA;AAAA,cACrE,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,IAKHlB,EAAK,IAAI,CAACe,MAAQ;AACjB,YAAMS,IAAaT,EAAI,UAAUF;AACjC,aACE,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,IAAI,YAAYX,EAAI,KAAK;AAAA,UACzB,mBAAiB,OAAOA,EAAI,KAAK;AAAA,UACjC,WAAWS,IAAaF,EAAO,WAAWA,EAAO;AAAA,UACjD,QAAQ,CAACE;AAAA,UAER,UAAAT,EAAI;AAAA,QAAA;AAAA,QAPAA,EAAI;AAAA,MAAA;AAAA,IAUf,CAAC;AAAA,EAAA,GACH;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._tabList_1lfnj_2{display:inline-flex;align-items:flex-end;gap:0;font-family:var(--font-family-base, system-ui, sans-serif);border-bottom:1px solid var(--color-stroke-neutral-default);position:relative}._tab_1lfnj_2{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:36px;padding:0 16px;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;font-family:var(--font-family-base, system-ui, sans-serif);font-size:var(--font-size-14);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);cursor:pointer;white-space:nowrap;flex-shrink:0;position:relative;z-index:1;transition:color .12s ease,font-weight .12s ease,box-shadow .12s ease}._tab_1lfnj_2:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._tab_1lfnj_2:hover:not(._tabSelected_1lfnj_45):not(:disabled):not([aria-disabled=true]){color:var(--color-text-brand-default)}._tabSelected_1lfnj_45{color:var(--color-text-brand-default);font-weight:var(--font-weight-semibold);cursor:default}._tab_1lfnj_2:disabled,._tab_1lfnj_2[aria-disabled=true]{opacity:.3;cursor:not-allowed;pointer-events:none}._indicator_1lfnj_68{position:absolute;bottom:-1px;left:0;height:2px;background-color:var(--color-fill-brand-default);border-radius:2px 2px 0 0;transition:transform .2s ease,width .2s ease;pointer-events:none;z-index:0}._tabPanel_1lfnj_81{display:block}._tabPanelHidden_1lfnj_85{display:none}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import './Tabs.module.css';const t = "_tabList_1lfnj_2", a = "_tab_1lfnj_2", n = "_tabSelected_1lfnj_45", e = "_indicator_1lfnj_68", _ = "_tabPanel_1lfnj_81", l = "_tabPanelHidden_1lfnj_85", b = {
|
|
2
|
+
tabList: t,
|
|
3
|
+
tab: a,
|
|
4
|
+
tabSelected: n,
|
|
5
|
+
indicator: e,
|
|
6
|
+
tabPanel: _,
|
|
7
|
+
tabPanelHidden: l
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
b as default,
|
|
11
|
+
e as indicator,
|
|
12
|
+
a as tab,
|
|
13
|
+
t as tabList,
|
|
14
|
+
_ as tabPanel,
|
|
15
|
+
l as tabPanelHidden,
|
|
16
|
+
n as tabSelected
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=Tabs.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/Tag/Tag.js
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import e from "./Tag.module.css.js";
|
|
3
|
+
const u = {
|
|
4
|
+
filled: e.styleFilled,
|
|
5
|
+
outline: e.styleOutline
|
|
6
|
+
}, c = {
|
|
7
|
+
xsmall: e.sizeXsmall,
|
|
8
|
+
small: e.sizeSmall,
|
|
9
|
+
medium: e.sizeMedium,
|
|
10
|
+
large: e.sizeLarge
|
|
11
|
+
}, S = {
|
|
12
|
+
danger: e.typeDanger,
|
|
13
|
+
success: e.typeSuccess,
|
|
14
|
+
warning: e.typeWarning,
|
|
15
|
+
neutral: e.typeNeutral,
|
|
16
|
+
brand: e.typeBrand
|
|
17
|
+
};
|
|
18
|
+
function y({
|
|
19
|
+
tagStyle: l = "filled",
|
|
20
|
+
size: s = "medium",
|
|
21
|
+
type: a = "neutral",
|
|
22
|
+
label: t = "Status",
|
|
23
|
+
disabled: i = !1,
|
|
24
|
+
className: n,
|
|
25
|
+
children: r,
|
|
26
|
+
...o
|
|
27
|
+
}) {
|
|
28
|
+
const m = [
|
|
29
|
+
e.tag,
|
|
30
|
+
u[l],
|
|
31
|
+
c[s],
|
|
32
|
+
S[a],
|
|
33
|
+
n
|
|
34
|
+
].filter(Boolean).join(" ");
|
|
35
|
+
return /* @__PURE__ */ d(
|
|
36
|
+
"span",
|
|
37
|
+
{
|
|
38
|
+
className: m,
|
|
39
|
+
"aria-disabled": i || void 0,
|
|
40
|
+
...o,
|
|
41
|
+
children: r ?? t
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
export {
|
|
46
|
+
y as Tag
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=Tag.js.map
|
package/Tag/Tag.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Tag.module.css';\n\nexport type TagStyle = 'filled' | 'outline';\nexport type TagSize = 'xsmall' | 'small' | 'medium' | 'large';\nexport type TagType = 'danger' | 'success' | 'warning' | 'neutral' | 'brand';\n\nexport interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Visual style of the tag */\n tagStyle?: TagStyle;\n /** Size of the tag */\n size?: TagSize;\n /** Semantic type/color of the tag */\n type?: TagType;\n /** Text label displayed inside the tag */\n label?: string;\n /** Whether the tag is disabled */\n disabled?: boolean;\n}\n\nconst STYLE_CLASS: Record<TagStyle, string> = {\n filled: styles.styleFilled,\n outline: styles.styleOutline,\n};\n\nconst SIZE_CLASS: Record<TagSize, string> = {\n xsmall: styles.sizeXsmall,\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n danger: styles.typeDanger,\n success: styles.typeSuccess,\n warning: styles.typeWarning,\n neutral: styles.typeNeutral,\n brand: styles.typeBrand,\n};\n\nexport function Tag({\n tagStyle = 'filled',\n size = 'medium',\n type = 'neutral',\n label = 'Status',\n disabled = false,\n className,\n children,\n ...props\n}: TagProps) {\n const cls = [\n styles.tag,\n STYLE_CLASS[tagStyle],\n SIZE_CLASS[size],\n TYPE_CLASS[type],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <span\n className={cls}\n aria-disabled={disabled || undefined}\n {...props}\n >\n {children ?? label}\n </span>\n );\n}\n"],"names":["STYLE_CLASS","styles","SIZE_CLASS","TYPE_CLASS","Tag","tagStyle","size","type","label","disabled","className","children","props","cls","jsx"],"mappings":";;AAoBA,MAAMA,IAAwC;AAAA,EAC5C,QAASC,EAAO;AAAA,EAChB,SAASA,EAAO;AAClB,GAEMC,IAAsC;AAAA,EAC1C,QAAQD,EAAO;AAAA,EACf,OAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,OAAQA,EAAO;AACjB,GAEME,IAAsC;AAAA,EAC1C,QAASF,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,OAASA,EAAO;AAClB;AAEO,SAASG,EAAI;AAAA,EAClB,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAa;AACX,QAAMC,IAAM;AAAA,IACVZ,EAAO;AAAA,IACPD,EAAYK,CAAQ;AAAA,IACpBH,EAAWI,CAAI;AAAA,IACfH,EAAWI,CAAI;AAAA,IACfG;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,MACX,iBAAeJ,KAAY;AAAA,MAC1B,GAAGG;AAAA,MAEH,UAAAD,KAAYH;AAAA,IAAA;AAAA,EAAA;AAGnB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._tag_1fg3c_2{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-family:var(--font-family-base, system-ui, sans-serif);font-weight:var(--font-weight-semibold);white-space:nowrap;flex-shrink:0;border:1px solid transparent}._sizeXsmall_1fg3c_15{height:24px;padding:4px 8px;font-size:var(--font-size-12);line-height:var(--font-line-height-12)}._sizeSmall_1fg3c_22{height:28px;padding:6px 10px;font-size:var(--font-size-12);line-height:var(--font-line-height-12)}._sizeMedium_1fg3c_29{height:32px;padding:8px 12px;font-size:var(--font-size-12);line-height:var(--font-line-height-12)}._sizeLarge_1fg3c_36{height:36px;padding:8px 14px;font-size:var(--font-size-14);line-height:var(--font-line-height-14)}._styleFilled_1fg3c_44{color:var(--color-text-neutral-inverse)}._styleFilled_1fg3c_44._typeDanger_1fg3c_48{background-color:var(--color-fill-feedback-danger-default);border-color:transparent}._styleFilled_1fg3c_44._typeSuccess_1fg3c_53{background-color:var(--color-fill-feedback-success-default);border-color:transparent}._styleFilled_1fg3c_44._typeWarning_1fg3c_58{background-color:var(--color-fill-feedback-warning-default);border-color:transparent}._styleFilled_1fg3c_44._typeNeutral_1fg3c_63{background-color:var(--color-fill-neutral-default);border-color:transparent}._styleFilled_1fg3c_44._typeBrand_1fg3c_68{background-color:var(--color-fill-brand-default);border-color:transparent}._styleOutline_1fg3c_74{background-color:transparent}._styleOutline_1fg3c_74._typeDanger_1fg3c_48{color:var(--color-text-feedback-danger-default);border-color:var(--color-stroke-feedback-danger-default)}._styleOutline_1fg3c_74._typeSuccess_1fg3c_53{color:var(--color-text-feedback-success-default);border-color:var(--color-stroke-feedback-success-default)}._styleOutline_1fg3c_74._typeWarning_1fg3c_58{color:var(--color-text-feedback-warning-default);border-color:var(--color-stroke-feedback-warning-default)}._styleOutline_1fg3c_74._typeNeutral_1fg3c_63{color:var(--color-fill-neutral-default);border-color:var(--color-fill-neutral-default)}._styleOutline_1fg3c_74._typeBrand_1fg3c_68{color:var(--color-text-brand-default);border-color:var(--color-stroke-brand-default)}._tag_1fg3c_2[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import './Tag.module.css';const e = "_tag_1fg3c_2", t = "_sizeXsmall_1fg3c_15", s = "_sizeSmall_1fg3c_22", _ = "_sizeMedium_1fg3c_29", l = "_sizeLarge_1fg3c_36", c = "_styleFilled_1fg3c_44", n = "_typeDanger_1fg3c_48", a = "_typeSuccess_1fg3c_53", g = "_typeWarning_1fg3c_58", i = "_typeNeutral_1fg3c_63", y = "_typeBrand_1fg3c_68", p = "_styleOutline_1fg3c_74", r = {
|
|
2
|
+
tag: e,
|
|
3
|
+
sizeXsmall: t,
|
|
4
|
+
sizeSmall: s,
|
|
5
|
+
sizeMedium: _,
|
|
6
|
+
sizeLarge: l,
|
|
7
|
+
styleFilled: c,
|
|
8
|
+
typeDanger: n,
|
|
9
|
+
typeSuccess: a,
|
|
10
|
+
typeWarning: g,
|
|
11
|
+
typeNeutral: i,
|
|
12
|
+
typeBrand: y,
|
|
13
|
+
styleOutline: p
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
r as default,
|
|
17
|
+
l as sizeLarge,
|
|
18
|
+
_ as sizeMedium,
|
|
19
|
+
s as sizeSmall,
|
|
20
|
+
t as sizeXsmall,
|
|
21
|
+
c as styleFilled,
|
|
22
|
+
p as styleOutline,
|
|
23
|
+
e as tag,
|
|
24
|
+
y as typeBrand,
|
|
25
|
+
n as typeDanger,
|
|
26
|
+
i as typeNeutral,
|
|
27
|
+
a as typeSuccess,
|
|
28
|
+
g as typeWarning
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=Tag.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsxs as c, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { useId as C } from "react";
|
|
3
|
+
import { CheckCircle as T, XCircle as v, Info as _ } from "@phosphor-icons/react";
|
|
4
|
+
import { Icon as t } from "../Icon/Icon.js";
|
|
5
|
+
import e from "./TextField.module.css.js";
|
|
6
|
+
const b = {
|
|
7
|
+
default: "",
|
|
8
|
+
danger: e.fieldDanger,
|
|
9
|
+
success: e.fieldSuccess
|
|
10
|
+
}, x = {
|
|
11
|
+
default: "",
|
|
12
|
+
danger: e.hintDanger,
|
|
13
|
+
success: e.hintSuccess
|
|
14
|
+
}, A = {
|
|
15
|
+
default: "",
|
|
16
|
+
danger: e.trailingIconDanger,
|
|
17
|
+
success: e.trailingIconSuccess
|
|
18
|
+
}, u = {
|
|
19
|
+
default: _,
|
|
20
|
+
danger: v,
|
|
21
|
+
success: T
|
|
22
|
+
};
|
|
23
|
+
function E({
|
|
24
|
+
label: o = "Label",
|
|
25
|
+
showLabel: r = !0,
|
|
26
|
+
hint: a,
|
|
27
|
+
state: i = "default",
|
|
28
|
+
id: f,
|
|
29
|
+
disabled: l = !1,
|
|
30
|
+
className: m,
|
|
31
|
+
...d
|
|
32
|
+
}) {
|
|
33
|
+
const I = C(), n = f ?? `text-field-${I}`, g = [
|
|
34
|
+
e.textField,
|
|
35
|
+
l ? e.textFieldDisabled : "",
|
|
36
|
+
m
|
|
37
|
+
].filter(Boolean).join(" "), h = [
|
|
38
|
+
e.field,
|
|
39
|
+
b[i]
|
|
40
|
+
].filter(Boolean).join(" "), S = i === "danger" || i === "success", N = u[i], p = u[i];
|
|
41
|
+
return /* @__PURE__ */ c("div", { className: g, children: [
|
|
42
|
+
/* @__PURE__ */ c("div", { className: e.topGroup, children: [
|
|
43
|
+
r && /* @__PURE__ */ s("label", { className: e.label, htmlFor: n, children: o }),
|
|
44
|
+
/* @__PURE__ */ c("div", { className: h, children: [
|
|
45
|
+
/* @__PURE__ */ s(
|
|
46
|
+
"input",
|
|
47
|
+
{
|
|
48
|
+
id: n,
|
|
49
|
+
className: e.input,
|
|
50
|
+
disabled: l,
|
|
51
|
+
"aria-disabled": l,
|
|
52
|
+
"aria-label": r ? void 0 : d["aria-label"] ?? o,
|
|
53
|
+
"aria-describedby": a ? `${n}-hint` : void 0,
|
|
54
|
+
"aria-invalid": i === "danger" ? !0 : void 0,
|
|
55
|
+
...d
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
S && /* @__PURE__ */ s(
|
|
59
|
+
t,
|
|
60
|
+
{
|
|
61
|
+
as: N,
|
|
62
|
+
size: 20,
|
|
63
|
+
className: `${e.trailingIcon} ${A[i]}`,
|
|
64
|
+
weight: "bold"
|
|
65
|
+
}
|
|
66
|
+
)
|
|
67
|
+
] })
|
|
68
|
+
] }),
|
|
69
|
+
a && /* @__PURE__ */ c(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
id: `${n}-hint`,
|
|
73
|
+
className: `${e.hint} ${x[i]}`,
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ s(
|
|
76
|
+
t,
|
|
77
|
+
{
|
|
78
|
+
as: p,
|
|
79
|
+
size: 16,
|
|
80
|
+
className: e.hintIcon,
|
|
81
|
+
weight: "bold"
|
|
82
|
+
}
|
|
83
|
+
),
|
|
84
|
+
/* @__PURE__ */ s("span", { children: a })
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
)
|
|
88
|
+
] });
|
|
89
|
+
}
|
|
90
|
+
export {
|
|
91
|
+
E as TextField
|
|
92
|
+
};
|
|
93
|
+
//# sourceMappingURL=TextField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextField.js","sources":["../../src/TextField/TextField.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { Info, XCircle, CheckCircle } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport styles from './TextField.module.css';\n\nexport type TextFieldState = 'default' | 'danger' | 'success';\n\nexport interface TextFieldProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'> {\n /** Field label text */\n label?: string;\n /** Whether the label is visible */\n showLabel?: boolean;\n /** Hint / helper text displayed below the field */\n hint?: string;\n /** Visual validation state */\n state?: TextFieldState;\n /** ID for the input element (auto-generated if omitted) */\n id?: string;\n /** Additional class name for the root element */\n className?: string;\n}\n\nconst FIELD_STATE_CLASS: Record<TextFieldState, string> = {\n default: '',\n danger: styles.fieldDanger,\n success: styles.fieldSuccess,\n};\n\nconst HINT_STATE_CLASS: Record<TextFieldState, string> = {\n default: '',\n danger: styles.hintDanger,\n success: styles.hintSuccess,\n};\n\nconst TRAILING_ICON_STATE_CLASS: Record<TextFieldState, string> = {\n default: '',\n danger: styles.trailingIconDanger,\n success: styles.trailingIconSuccess,\n};\n\nconst HINT_ICON = {\n default: Info,\n danger: XCircle,\n success: CheckCircle,\n} as const;\n\nexport function TextField({\n label = 'Label',\n showLabel = true,\n hint,\n state = 'default',\n id: idProp,\n disabled = false,\n className,\n ...inputProps\n}: TextFieldProps) {\n const generatedId = useId();\n const inputId = idProp ?? `text-field-${generatedId}`;\n\n const rootClasses = [\n styles.textField,\n disabled ? styles.textFieldDisabled : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const fieldClasses = [\n styles.field,\n FIELD_STATE_CLASS[state],\n ]\n .filter(Boolean)\n .join(' ');\n\n const showStatusIcon = state === 'danger' || state === 'success';\n const StatusIcon = HINT_ICON[state];\n const HintIcon = HINT_ICON[state];\n\n return (\n <div className={rootClasses}>\n <div className={styles.topGroup}>\n {showLabel && (\n <label className={styles.label} htmlFor={inputId}>\n {label}\n </label>\n )}\n\n <div className={fieldClasses}>\n <input\n id={inputId}\n className={styles.input}\n disabled={disabled}\n aria-disabled={disabled}\n aria-label={!showLabel ? (inputProps['aria-label'] ?? label) : undefined}\n aria-describedby={hint ? `${inputId}-hint` : undefined}\n aria-invalid={state === 'danger' ? true : undefined}\n {...inputProps}\n />\n\n {showStatusIcon && (\n <Icon\n as={StatusIcon}\n size={20}\n className={`${styles.trailingIcon} ${TRAILING_ICON_STATE_CLASS[state]}`}\n weight=\"bold\"\n />\n )}\n </div>\n </div>\n\n {hint && (\n <div\n id={`${inputId}-hint`}\n className={`${styles.hint} ${HINT_STATE_CLASS[state]}`}\n >\n <Icon\n as={HintIcon}\n size={16}\n className={styles.hintIcon}\n weight=\"bold\"\n />\n <span>{hint}</span>\n </div>\n )}\n </div>\n );\n}\n"],"names":["FIELD_STATE_CLASS","styles","HINT_STATE_CLASS","TRAILING_ICON_STATE_CLASS","HINT_ICON","Info","XCircle","CheckCircle","TextField","label","showLabel","hint","state","idProp","disabled","className","inputProps","generatedId","useId","inputId","rootClasses","fieldClasses","showStatusIcon","StatusIcon","HintIcon","jsxs","jsx","Icon"],"mappings":";;;;;AAuBA,MAAMA,IAAoD;AAAA,EACxD,SAAS;AAAA,EACT,QAAQC,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEMC,IAAmD;AAAA,EACvD,SAAS;AAAA,EACT,QAAQD,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEME,IAA4D;AAAA,EAChE,SAAS;AAAA,EACT,QAAQF,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEMG,IAAY;AAAA,EAChB,SAASC;AAAA,EACT,QAAQC;AAAA,EACR,SAASC;AACX;AAEO,SAASC,EAAU;AAAA,EACxB,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,IAAIC;AAAA,EACJ,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,GAAGC;AACL,GAAmB;AACjB,QAAMC,IAAcC,EAAA,GACdC,IAAUN,KAAU,cAAcI,CAAW,IAE7CG,IAAc;AAAA,IAClBnB,EAAO;AAAA,IACPa,IAAWb,EAAO,oBAAoB;AAAA,IACtCc;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELM,IAAe;AAAA,IACnBpB,EAAO;AAAA,IACPD,EAAkBY,CAAK;AAAA,EAAA,EAEtB,OAAO,OAAO,EACd,KAAK,GAAG,GAELU,IAAiBV,MAAU,YAAYA,MAAU,WACjDW,IAAanB,EAAUQ,CAAK,GAC5BY,IAAWpB,EAAUQ,CAAK;AAEhC,SACE,gBAAAa,EAAC,OAAA,EAAI,WAAWL,GACd,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWxB,EAAO,UACpB,UAAA;AAAA,MAAAS,uBACE,SAAA,EAAM,WAAWT,EAAO,OAAO,SAASkB,GACtC,UAAAV,EAAA,CACH;AAAA,MAGF,gBAAAgB,EAAC,OAAA,EAAI,WAAWJ,GACd,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAIP;AAAA,YACJ,WAAWlB,EAAO;AAAA,YAClB,UAAAa;AAAA,YACA,iBAAeA;AAAA,YACf,cAAaJ,IAAkD,SAArCM,EAAW,YAAY,KAAKP;AAAA,YACtD,oBAAkBE,IAAO,GAAGQ,CAAO,UAAU;AAAA,YAC7C,gBAAcP,MAAU,WAAW,KAAO;AAAA,YACzC,GAAGI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGLM,KACC,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIJ;AAAA,YACJ,MAAM;AAAA,YACN,WAAW,GAAGtB,EAAO,YAAY,IAAIE,EAA0BS,CAAK,CAAC;AAAA,YACrE,QAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACT,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IAECD,KACC,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAGN,CAAO;AAAA,QACd,WAAW,GAAGlB,EAAO,IAAI,IAAIC,EAAiBU,CAAK,CAAC;AAAA,QAEpD,UAAA;AAAA,UAAA,gBAAAc;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,IAAIH;AAAA,cACJ,MAAM;AAAA,cACN,WAAWvB,EAAO;AAAA,cAClB,QAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UAET,gBAAAyB,EAAC,UAAM,UAAAf,EAAA,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,GAEJ;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._textField_14gq1_2{display:flex;flex-direction:column;gap:4px;align-items:flex-start;width:100%;font-family:var(--font-family-base, system-ui, sans-serif)}._topGroup_14gq1_12{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}._label_14gq1_21{display:flex;gap:4px;align-items:center;font-size:var(--font-size-14);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle)}._field_14gq1_32{display:flex;gap:8px;height:42px;align-items:center;padding:4px 12px;border-radius:8px;width:100%;border:1px solid transparent;background-color:var(--color-fill-neutral-muted);transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,opacity .12s ease}._input_14gq1_50{flex:1 0 0;min-width:1px;border:none;background:transparent;outline:none;font-family:var(--font-family-base, system-ui, sans-serif);font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._input_14gq1_50::placeholder{color:var(--color-text-neutral-subtlest);font-weight:var(--font-weight-regular)}._trailingIcon_14gq1_72{flex-shrink:0;color:var(--color-icon-neutral-default);pointer-events:none}._hint_14gq1_79{display:flex;gap:4px;align-items:center;width:100%;font-size:var(--font-size-12);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-12);color:var(--color-text-neutral-mudle)}._hintIcon_14gq1_90{flex-shrink:0}._field_14gq1_32:hover:not(:focus-within):not(._fieldDanger_14gq1_96):not(._fieldSuccess_14gq1_96){background-color:var(--color-fill-interaction-neutral-muted-hover)}._field_14gq1_32:focus-within{background-color:var(--color-canvas-neutral-white);border-color:var(--color-stroke-brand-default);box-shadow:var(--shadow-focus)}._fieldDanger_14gq1_96{background-color:var(--color-fill-feedback-danger-subtle);border-color:var(--color-stroke-feedback-danger-default)}._fieldDanger_14gq1_96:focus-within{box-shadow:var(--shadow-focus)}._hintDanger_14gq1_119{color:var(--color-text-feedback-danger-default)}._trailingIconDanger_14gq1_123{color:var(--color-icon-feedback-danger-default)}._fieldSuccess_14gq1_96{background-color:var(--color-fill-feedback-success-subtle)}._fieldSuccess_14gq1_96:focus-within{box-shadow:var(--shadow-focus)}._hintSuccess_14gq1_137{color:var(--color-text-feedback-success-default)}._trailingIconSuccess_14gq1_141{color:var(--color-icon-feedback-success-default)}._textFieldDisabled_14gq1_147{opacity:.5;cursor:not-allowed;pointer-events:none}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import './TextField.module.css';const n = "_textField_14gq1_2", t = "_topGroup_14gq1_12", i = "_label_14gq1_21", e = "_field_14gq1_32", c = "_input_14gq1_50", _ = "_trailingIcon_14gq1_72", s = "_hint_14gq1_79", l = "_hintIcon_14gq1_90", o = "_fieldDanger_14gq1_96", g = "_fieldSuccess_14gq1_96", a = "_hintDanger_14gq1_119", r = "_trailingIconDanger_14gq1_123", d = "_hintSuccess_14gq1_137", u = "_trailingIconSuccess_14gq1_141", q = "_textFieldDisabled_14gq1_147", h = {
|
|
2
|
+
textField: n,
|
|
3
|
+
topGroup: t,
|
|
4
|
+
label: i,
|
|
5
|
+
field: e,
|
|
6
|
+
input: c,
|
|
7
|
+
trailingIcon: _,
|
|
8
|
+
hint: s,
|
|
9
|
+
hintIcon: l,
|
|
10
|
+
fieldDanger: o,
|
|
11
|
+
fieldSuccess: g,
|
|
12
|
+
hintDanger: a,
|
|
13
|
+
trailingIconDanger: r,
|
|
14
|
+
hintSuccess: d,
|
|
15
|
+
trailingIconSuccess: u,
|
|
16
|
+
textFieldDisabled: q
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
h as default,
|
|
20
|
+
e as field,
|
|
21
|
+
o as fieldDanger,
|
|
22
|
+
g as fieldSuccess,
|
|
23
|
+
s as hint,
|
|
24
|
+
a as hintDanger,
|
|
25
|
+
l as hintIcon,
|
|
26
|
+
d as hintSuccess,
|
|
27
|
+
c as input,
|
|
28
|
+
i as label,
|
|
29
|
+
n as textField,
|
|
30
|
+
q as textFieldDisabled,
|
|
31
|
+
t as topGroup,
|
|
32
|
+
_ as trailingIcon,
|
|
33
|
+
r as trailingIconDanger,
|
|
34
|
+
u as trailingIconSuccess
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=TextField.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextField.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { jsxs as r, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { XCircle as v, CheckCircle as N, Info as C } from "@phosphor-icons/react";
|
|
3
|
+
import { Icon as g } from "../Icon/Icon.js";
|
|
4
|
+
import e from "./Textarea.module.css.js";
|
|
5
|
+
function S({
|
|
6
|
+
state: t = "default",
|
|
7
|
+
label: c,
|
|
8
|
+
hint: o,
|
|
9
|
+
showHint: l = !0,
|
|
10
|
+
showLabel: d = !0,
|
|
11
|
+
className: f,
|
|
12
|
+
disabled: s,
|
|
13
|
+
...m
|
|
14
|
+
}) {
|
|
15
|
+
const a = t === "danger", n = t === "success", h = [
|
|
16
|
+
e.textarea,
|
|
17
|
+
s ? e.textareaDisabled : "",
|
|
18
|
+
f ?? ""
|
|
19
|
+
].filter(Boolean).join(" "), u = [
|
|
20
|
+
e.field,
|
|
21
|
+
a ? e.fieldDanger : "",
|
|
22
|
+
n ? e.fieldSuccess : "",
|
|
23
|
+
s ? e.fieldDisabled : ""
|
|
24
|
+
].filter(Boolean).join(" "), p = [
|
|
25
|
+
e.hint,
|
|
26
|
+
a ? e.hintDanger : "",
|
|
27
|
+
n ? e.hintSuccess : ""
|
|
28
|
+
].filter(Boolean).join(" "), x = a ? v : n ? N : C;
|
|
29
|
+
return /* @__PURE__ */ r("div", { className: h, children: [
|
|
30
|
+
/* @__PURE__ */ r("div", { className: e.topGroup, children: [
|
|
31
|
+
d && c && /* @__PURE__ */ i("span", { className: e.label, children: c }),
|
|
32
|
+
/* @__PURE__ */ i("div", { className: u, children: /* @__PURE__ */ i(
|
|
33
|
+
"textarea",
|
|
34
|
+
{
|
|
35
|
+
className: e.nativeTextarea,
|
|
36
|
+
disabled: s,
|
|
37
|
+
"aria-disabled": s,
|
|
38
|
+
"aria-invalid": a ? !0 : void 0,
|
|
39
|
+
...m
|
|
40
|
+
}
|
|
41
|
+
) })
|
|
42
|
+
] }),
|
|
43
|
+
l && o && /* @__PURE__ */ r("div", { className: p, children: [
|
|
44
|
+
/* @__PURE__ */ i("span", { className: e.hintIcon, children: /* @__PURE__ */ i(g, { as: x, size: 16, weight: "bold" }) }),
|
|
45
|
+
/* @__PURE__ */ i("span", { children: o })
|
|
46
|
+
] })
|
|
47
|
+
] });
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
S as Textarea
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=Textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\nimport { Info, XCircle, CheckCircle } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport styles from './Textarea.module.css';\n\nexport type TextareaState = 'default' | 'danger' | 'success';\n\nexport interface TextareaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {\n /** Visual / validation state */\n state?: TextareaState;\n /** Label rendered above the field */\n label?: string;\n /** Hint text rendered below the field */\n hint?: string;\n /** Whether to show the hint row */\n showHint?: boolean;\n /** Whether to show the label row */\n showLabel?: boolean;\n /** Extra className applied to the root wrapper */\n className?: string;\n}\n\nexport function Textarea({\n state = 'default',\n label,\n hint,\n showHint = true,\n showLabel = true,\n className,\n disabled,\n ...props\n}: TextareaProps) {\n const isDanger = state === 'danger';\n const isSuccess = state === 'success';\n\n const rootCls = [\n styles.textarea,\n disabled ? styles.textareaDisabled : '',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const fieldCls = [\n styles.field,\n isDanger ? styles.fieldDanger : '',\n isSuccess ? styles.fieldSuccess : '',\n disabled ? styles.fieldDisabled : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const hintCls = [\n styles.hint,\n isDanger ? styles.hintDanger : '',\n isSuccess ? styles.hintSuccess : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const HintIcon = isDanger ? XCircle : isSuccess ? CheckCircle : Info;\n\n return (\n <div className={rootCls}>\n <div className={styles.topGroup}>\n {showLabel && label && (\n <span className={styles.label}>{label}</span>\n )}\n <div className={fieldCls}>\n <textarea\n className={styles.nativeTextarea}\n disabled={disabled}\n aria-disabled={disabled}\n aria-invalid={isDanger ? true : undefined}\n {...props}\n />\n </div>\n </div>\n\n {showHint && hint && (\n <div className={hintCls}>\n <span className={styles.hintIcon}>\n <Icon as={HintIcon} size={16} weight=\"bold\" />\n </span>\n <span>{hint}</span>\n </div>\n )}\n </div>\n );\n}\n"],"names":["Textarea","state","label","hint","showHint","showLabel","className","disabled","props","isDanger","isSuccess","rootCls","styles","fieldCls","hintCls","HintIcon","XCircle","CheckCircle","Info","jsxs","jsx","Icon"],"mappings":";;;;AAuBO,SAASA,EAAS;AAAA,EACvB,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAYR,MAAU,UACtBS,IAAYT,MAAU,WAEtBU,IAAU;AAAA,IACdC,EAAO;AAAA,IACPL,IAAWK,EAAO,mBAAmB;AAAA,IACrCN,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,GAELO,IAAW;AAAA,IACfD,EAAO;AAAA,IACPH,IAAYG,EAAO,cAAgB;AAAA,IACnCF,IAAYE,EAAO,eAAgB;AAAA,IACnCL,IAAYK,EAAO,gBAAgB;AAAA,EAAA,EAElC,OAAO,OAAO,EACd,KAAK,GAAG,GAELE,IAAU;AAAA,IACdF,EAAO;AAAA,IACPH,IAAYG,EAAO,aAAe;AAAA,IAClCF,IAAYE,EAAO,cAAe;AAAA,EAAA,EAEjC,OAAO,OAAO,EACd,KAAK,GAAG,GAELG,IAAWN,IAAWO,IAAUN,IAAYO,IAAcC;AAEhE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWR,GACd,UAAA;AAAA,IAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAWP,EAAO,UACpB,UAAA;AAAA,MAAAP,KAAaH,KACZ,gBAAAkB,EAAC,QAAA,EAAK,WAAWR,EAAO,OAAQ,UAAAV,GAAM;AAAA,MAExC,gBAAAkB,EAAC,OAAA,EAAI,WAAWP,GACd,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWR,EAAO;AAAA,UAClB,UAAAL;AAAA,UACA,iBAAeA;AAAA,UACf,gBAAcE,IAAW,KAAO;AAAA,UAC/B,GAAGD;AAAA,QAAA;AAAA,MAAA,EACN,CACF;AAAA,IAAA,GACF;AAAA,IAECJ,KAAYD,KACX,gBAAAgB,EAAC,OAAA,EAAI,WAAWL,GACd,UAAA;AAAA,MAAA,gBAAAM,EAAC,QAAA,EAAK,WAAWR,EAAO,UACtB,UAAA,gBAAAQ,EAACC,GAAA,EAAK,IAAIN,GAAU,MAAM,IAAI,QAAO,OAAA,CAAO,GAC9C;AAAA,MACA,gBAAAK,EAAC,UAAM,UAAAjB,EAAA,CAAK;AAAA,IAAA,EAAA,CACd;AAAA,EAAA,GAEJ;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._textarea_1tcwd_2{display:flex;flex-direction:column;gap:4px;align-items:flex-start;width:100%;font-family:var(--font-family-base, system-ui, sans-serif)}._topGroup_1tcwd_12{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}._label_1tcwd_21{display:flex;gap:4px;align-items:center;font-size:var(--font-size-14);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle)}._field_1tcwd_32{display:flex;align-items:flex-start;min-height:100px;padding:8px 12px;border-radius:8px;width:100%;border:1px solid transparent;background-color:var(--color-fill-neutral-muted);transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,opacity .12s ease;cursor:text;box-sizing:border-box}._nativeTextarea_1tcwd_51{flex:1 0 0;min-width:1px;width:100%;border:none;background:transparent;outline:none;resize:vertical;font-family:var(--font-family-base, system-ui, sans-serif);font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);cursor:text;min-height:84px;padding:0}._nativeTextarea_1tcwd_51::placeholder{color:var(--color-text-neutral-subtlest);font-weight:var(--font-weight-regular)}._hint_1tcwd_75{display:flex;gap:4px;align-items:center;width:100%;font-size:var(--font-size-12);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-12);color:var(--color-text-neutral-mudle)}._hintIcon_1tcwd_86{flex-shrink:0}._field_1tcwd_32:hover:not(._fieldDisabled_1tcwd_91):not(._fieldDanger_1tcwd_91):not(._fieldSuccess_1tcwd_91):not(._fieldFocused_1tcwd_91):not(:focus-within){background-color:var(--color-fill-interaction-neutral-muted-hover)}._field_1tcwd_32:focus-within:not(._fieldDisabled_1tcwd_91):not(._fieldDanger_1tcwd_91):not(._fieldSuccess_1tcwd_91),._fieldFocused_1tcwd_91:not(._fieldDisabled_1tcwd_91){background-color:var(--color-canvas-neutral-white);border-color:var(--color-stroke-brand-default);box-shadow:var(--shadow-focus)}._fieldDanger_1tcwd_91{background-color:var(--color-fill-feedback-danger-subtle);border-color:var(--color-stroke-feedback-danger-default)}._fieldDanger_1tcwd_91:focus-within{box-shadow:var(--shadow-focus)}._hintDanger_1tcwd_113{color:var(--color-text-feedback-danger-default)}._fieldSuccess_1tcwd_91{background-color:var(--color-fill-feedback-success-subtle);border-color:transparent}._fieldSuccess_1tcwd_91:focus-within{box-shadow:var(--shadow-focus)}._hintSuccess_1tcwd_127{color:var(--color-text-feedback-success-default)}._textareaDisabled_1tcwd_132{opacity:.5;cursor:not-allowed;pointer-events:none}._fieldDisabled_1tcwd_91,._fieldDisabled_1tcwd_91 ._nativeTextarea_1tcwd_51{cursor:not-allowed}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import './Textarea.module.css';const t = "_textarea_1tcwd_2", e = "_topGroup_1tcwd_12", c = "_label_1tcwd_21", _ = "_field_1tcwd_32", a = "_nativeTextarea_1tcwd_51", n = "_hint_1tcwd_75", s = "_hintIcon_1tcwd_86", i = "_fieldDisabled_1tcwd_91", d = "_fieldDanger_1tcwd_91", l = "_fieldSuccess_1tcwd_91", o = "_hintDanger_1tcwd_113", r = "_hintSuccess_1tcwd_127", f = "_textareaDisabled_1tcwd_132", w = {
|
|
2
|
+
textarea: t,
|
|
3
|
+
topGroup: e,
|
|
4
|
+
label: c,
|
|
5
|
+
field: _,
|
|
6
|
+
nativeTextarea: a,
|
|
7
|
+
hint: n,
|
|
8
|
+
hintIcon: s,
|
|
9
|
+
fieldDisabled: i,
|
|
10
|
+
fieldDanger: d,
|
|
11
|
+
fieldSuccess: l,
|
|
12
|
+
hintDanger: o,
|
|
13
|
+
hintSuccess: r,
|
|
14
|
+
textareaDisabled: f
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
w as default,
|
|
18
|
+
_ as field,
|
|
19
|
+
d as fieldDanger,
|
|
20
|
+
i as fieldDisabled,
|
|
21
|
+
l as fieldSuccess,
|
|
22
|
+
n as hint,
|
|
23
|
+
o as hintDanger,
|
|
24
|
+
s as hintIcon,
|
|
25
|
+
r as hintSuccess,
|
|
26
|
+
c as label,
|
|
27
|
+
a as nativeTextarea,
|
|
28
|
+
t as textarea,
|
|
29
|
+
f as textareaDisabled,
|
|
30
|
+
e as topGroup
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=Textarea.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|
package/Toast/Toast.js
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { XCircle as f, WarningCircle as g, CheckCircle as m, X as v } from "@phosphor-icons/react";
|
|
3
|
+
import { Icon as i } from "../Icon/Icon.js";
|
|
4
|
+
import a from "./Toast.module.css.js";
|
|
5
|
+
const h = {
|
|
6
|
+
success: a.variantSuccess,
|
|
7
|
+
warning: a.variantWarning,
|
|
8
|
+
danger: a.variantDanger
|
|
9
|
+
}, C = {
|
|
10
|
+
success: m,
|
|
11
|
+
warning: g,
|
|
12
|
+
danger: f
|
|
13
|
+
}, b = {
|
|
14
|
+
success: "var(--color-icon-feedback-success-default)",
|
|
15
|
+
warning: "var(--color-icon-feedback-warning-default)",
|
|
16
|
+
danger: "var(--color-icon-feedback-danger-default)"
|
|
17
|
+
}, N = {
|
|
18
|
+
success: "var(--color-icon-feedback-success-default)",
|
|
19
|
+
warning: "var(--color-icon-feedback-warning-default)",
|
|
20
|
+
danger: "var(--color-icon-feedback-danger-default)"
|
|
21
|
+
};
|
|
22
|
+
function T({
|
|
23
|
+
type: c = "success",
|
|
24
|
+
title: o,
|
|
25
|
+
description: n,
|
|
26
|
+
onClose: s,
|
|
27
|
+
leaving: t = !1,
|
|
28
|
+
className: l
|
|
29
|
+
}) {
|
|
30
|
+
const d = C[c], u = [a.toast, h[c], t ? a.toastLeaving : "", l].filter(Boolean).join(" ");
|
|
31
|
+
return /* @__PURE__ */ r(
|
|
32
|
+
"div",
|
|
33
|
+
{
|
|
34
|
+
className: u,
|
|
35
|
+
role: "alert",
|
|
36
|
+
"aria-live": "assertive",
|
|
37
|
+
"aria-atomic": "true",
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ e("div", { className: a.accent, "aria-hidden": "true" }),
|
|
40
|
+
/* @__PURE__ */ r("div", { className: a.container, children: [
|
|
41
|
+
/* @__PURE__ */ e(
|
|
42
|
+
i,
|
|
43
|
+
{
|
|
44
|
+
as: d,
|
|
45
|
+
size: 24,
|
|
46
|
+
weight: "regular",
|
|
47
|
+
color: b[c],
|
|
48
|
+
"aria-hidden": "true"
|
|
49
|
+
}
|
|
50
|
+
),
|
|
51
|
+
/* @__PURE__ */ r("div", { className: a.content, children: [
|
|
52
|
+
/* @__PURE__ */ e("span", { className: a.title, children: o }),
|
|
53
|
+
n && /* @__PURE__ */ e("span", { className: a.description, children: n })
|
|
54
|
+
] })
|
|
55
|
+
] }),
|
|
56
|
+
s && /* @__PURE__ */ e(
|
|
57
|
+
"button",
|
|
58
|
+
{
|
|
59
|
+
type: "button",
|
|
60
|
+
className: a.closeBtn,
|
|
61
|
+
onClick: s,
|
|
62
|
+
"aria-label": "Close notification",
|
|
63
|
+
children: /* @__PURE__ */ e(
|
|
64
|
+
i,
|
|
65
|
+
{
|
|
66
|
+
as: v,
|
|
67
|
+
size: 16,
|
|
68
|
+
weight: "bold",
|
|
69
|
+
color: N[c],
|
|
70
|
+
"aria-hidden": "true"
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
export {
|
|
80
|
+
T as Toast
|
|
81
|
+
};
|
|
82
|
+
//# sourceMappingURL=Toast.js.map
|