@sbkbs/ui 1.0.2 → 1.0.4
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 +13 -10
- package/dist/components/Accordion/Accordion.d.ts +11 -0
- package/dist/components/Accordion/Accordion.js +56 -0
- package/dist/components/Accordion/Accordion.js.map +1 -0
- package/dist/components/Accordion/Accordion.stories.d.ts +7 -0
- package/dist/components/Alert/Alert.d.ts +6 -0
- package/dist/components/Alert/Alert.js +32 -0
- package/dist/components/Alert/Alert.js.map +1 -0
- package/dist/components/Alert/Alert.stories.d.ts +8 -0
- package/dist/components/Badge/Badge.d.ts +6 -0
- package/dist/components/Badge/Badge.js +35 -0
- package/dist/components/Badge/Badge.js.map +1 -0
- package/dist/components/Badge/Badge.stories.d.ts +8 -0
- package/dist/components/Breadcrumb/Breadcrumb.d.ts +10 -0
- package/dist/components/Breadcrumb/Breadcrumb.js +26 -0
- package/dist/components/Breadcrumb/Breadcrumb.js.map +1 -0
- package/dist/components/Breadcrumb/Breadcrumb.stories.d.ts +8 -0
- package/dist/components/Button/Button.js +122 -0
- package/dist/components/Button/Button.js.map +1 -0
- package/dist/components/Button/Button.stories.d.ts +7 -0
- package/dist/components/Card/Card.js +33 -0
- package/dist/components/Card/Card.js.map +1 -0
- package/dist/components/Card/Card.stories.d.ts +8 -0
- package/dist/components/Checkbox/Checkbox.d.ts +6 -0
- package/dist/components/Checkbox/Checkbox.js +36 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -0
- package/dist/components/Checkbox/Checkbox.stories.d.ts +7 -0
- package/dist/components/Chip/Chip.d.ts +5 -0
- package/dist/components/Chip/Chip.js +19 -0
- package/dist/components/Chip/Chip.js.map +1 -0
- package/dist/components/Combobox/Combobox.d.ts +17 -0
- package/dist/components/Combobox/Combobox.js +143 -0
- package/dist/components/Combobox/Combobox.js.map +1 -0
- package/dist/components/Combobox/Combobox.stories.d.ts +9 -0
- package/dist/components/Divider/Divider.d.ts +5 -0
- package/dist/components/Divider/Divider.js +22 -0
- package/dist/components/Divider/Divider.js.map +1 -0
- package/dist/components/EmptyState/EmptyState.d.ts +8 -0
- package/dist/components/EmptyState/EmptyState.js +29 -0
- package/dist/components/EmptyState/EmptyState.js.map +1 -0
- package/dist/components/Feedback/Feedback.stories.d.ts +5 -0
- package/dist/components/FileUpload/FileUpload.d.ts +13 -0
- package/dist/components/FileUpload/FileUpload.js +116 -0
- package/dist/components/FileUpload/FileUpload.js.map +1 -0
- package/dist/components/FileUpload/FileUpload.stories.d.ts +10 -0
- package/dist/components/Footer/Footer.js +54 -0
- package/dist/components/Footer/Footer.js.map +1 -0
- package/dist/components/Header/Header.js +114 -0
- package/dist/components/Header/Header.js.map +1 -0
- package/dist/components/Input/Input.d.ts +2 -2
- package/dist/components/Input/Input.js +78 -0
- package/dist/components/Input/Input.js.map +1 -0
- package/dist/components/Input/Input.stories.d.ts +9 -0
- package/dist/components/Layout/Layout.d.ts +14 -0
- package/dist/components/Layout/Layout.js +41 -0
- package/dist/components/Layout/Layout.js.map +1 -0
- package/dist/components/Modal/Modal.js +113 -0
- package/dist/components/Modal/Modal.js.map +1 -0
- package/dist/components/Modal/Modal.stories.d.ts +8 -0
- package/dist/components/Navigation/Navigation.d.ts +7 -0
- package/dist/components/Navigation/Navigation.js +26 -0
- package/dist/components/Navigation/Navigation.js.map +1 -0
- package/dist/components/NumberInput/NumberInput.d.ts +12 -0
- package/dist/components/NumberInput/NumberInput.js +135 -0
- package/dist/components/NumberInput/NumberInput.js.map +1 -0
- package/dist/components/NumberInput/NumberInput.stories.d.ts +8 -0
- package/dist/components/PageHeader/PageHeader.d.ts +7 -0
- package/dist/components/PageHeader/PageHeader.js +29 -0
- package/dist/components/PageHeader/PageHeader.js.map +1 -0
- package/dist/components/Pagination/Pagination.d.ts +7 -0
- package/dist/components/Pagination/Pagination.js +50 -0
- package/dist/components/Pagination/Pagination.js.map +1 -0
- package/dist/components/Pagination/Pagination.stories.d.ts +8 -0
- package/dist/components/Paragraph/Paragraph.js +41 -0
- package/dist/components/Paragraph/Paragraph.js.map +1 -0
- package/dist/components/Popover/Popover.d.ts +7 -0
- package/dist/components/Popover/Popover.js +57 -0
- package/dist/components/Popover/Popover.js.map +1 -0
- package/dist/components/Radio/Radio.d.ts +6 -0
- package/dist/components/Radio/Radio.js +36 -0
- package/dist/components/Radio/Radio.js.map +1 -0
- package/dist/components/Radio/Radio.stories.d.ts +7 -0
- package/dist/components/SectionHeader/SectionHeader.d.ts +7 -0
- package/dist/components/SectionHeader/SectionHeader.js +19 -0
- package/dist/components/SectionHeader/SectionHeader.js.map +1 -0
- package/dist/components/Select/Select.d.ts +13 -0
- package/dist/components/Select/Select.js +45 -0
- package/dist/components/Select/Select.js.map +1 -0
- package/dist/components/Select/Select.stories.d.ts +8 -0
- package/dist/components/Skeleton/Skeleton.d.ts +7 -0
- package/dist/components/Skeleton/Skeleton.js +25 -0
- package/dist/components/Skeleton/Skeleton.js.map +1 -0
- package/dist/components/Stepper/Stepper.d.ts +13 -0
- package/dist/components/Stepper/Stepper.js +97 -0
- package/dist/components/Stepper/Stepper.js.map +1 -0
- package/dist/components/Stepper/Stepper.stories.d.ts +8 -0
- package/dist/components/Subtitle/Subtitle.js +40 -0
- package/dist/components/Subtitle/Subtitle.js.map +1 -0
- package/dist/components/Switch/Switch.d.ts +7 -0
- package/dist/components/Switch/Switch.js +37 -0
- package/dist/components/Switch/Switch.js.map +1 -0
- package/dist/components/Switch/Switch.stories.d.ts +8 -0
- package/dist/components/Table/Table.d.ts +4 -0
- package/dist/components/Table/Table.js +17 -0
- package/dist/components/Table/Table.js.map +1 -0
- package/dist/components/Tabs/Tabs.d.ts +11 -0
- package/dist/components/Tabs/Tabs.js +62 -0
- package/dist/components/Tabs/Tabs.js.map +1 -0
- package/dist/components/Tabs/Tabs.stories.d.ts +8 -0
- package/dist/components/Tag/Tag.d.ts +5 -0
- package/dist/components/Tag/Tag.js +29 -0
- package/dist/components/Tag/Tag.js.map +1 -0
- package/dist/components/Textarea/Textarea.d.ts +7 -0
- package/dist/components/Textarea/Textarea.js +46 -0
- package/dist/components/Textarea/Textarea.js.map +1 -0
- package/dist/components/Textarea/Textarea.stories.d.ts +7 -0
- package/dist/components/Title/Title.js +47 -0
- package/dist/components/Title/Title.js.map +1 -0
- package/dist/components/Toast/Toast.d.ts +26 -0
- package/dist/components/Toast/Toast.js +110 -0
- package/dist/components/Toast/Toast.js.map +1 -0
- package/dist/components/Toast/Toast.stories.d.ts +8 -0
- package/dist/components/Tooltip/Tooltip.d.ts +7 -0
- package/dist/components/Tooltip/Tooltip.js +36 -0
- package/dist/components/Tooltip/Tooltip.js.map +1 -0
- package/dist/index.d.ts +31 -3
- package/dist/index.js +88 -0
- package/dist/index.js.map +1 -0
- package/dist/node_modules/clsx/dist/clsx.js +17 -0
- package/dist/node_modules/clsx/dist/clsx.js.map +1 -0
- package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js +2925 -0
- package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js.map +1 -0
- package/dist/oficios-ui.umd.cjs +1 -1
- package/dist/oficios-ui.umd.cjs.map +1 -1
- package/dist/theme/ThemeProvider.d.ts +1 -1
- package/dist/theme/ThemeProvider.js +22 -0
- package/dist/theme/ThemeProvider.js.map +1 -0
- package/dist/theme.css +60 -64
- package/dist/ui.css +1 -0
- package/dist/utils/cn.d.ts +7 -0
- package/dist/utils/cn.js +7 -0
- package/dist/utils/cn.js.map +1 -0
- package/package.json +54 -5
- package/dist/oficios-ui.css +0 -1
- package/dist/oficios-ui.js +0 -593
- package/dist/oficios-ui.js.map +0 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { cn as n } from "../../utils/cn.js";
|
|
3
|
+
const b = ({ selected: r = !1, className: e, children: o, ...t }) => /* @__PURE__ */ a(
|
|
4
|
+
"button",
|
|
5
|
+
{
|
|
6
|
+
className: n(
|
|
7
|
+
"inline-flex items-center rounded-full border px-3 py-1.5 text-sm transition",
|
|
8
|
+
r ? "border-[var(--md-primary)] bg-[color:color-mix(in_srgb,var(--md-primary)_16%,transparent)] text-[var(--md-on-surface)]" : "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
|
|
9
|
+
e
|
|
10
|
+
),
|
|
11
|
+
type: "button",
|
|
12
|
+
...t,
|
|
13
|
+
children: o
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
export {
|
|
17
|
+
b as Chip
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=Chip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n selected?: boolean;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ selected = false, className, children, ...props }) => {\n return (\n <button\n className={cn(\n 'inline-flex items-center rounded-full border px-3 py-1.5 text-sm transition',\n selected\n ? 'border-[var(--md-primary)] bg-[color:color-mix(in_srgb,var(--md-primary)_16%,transparent)] text-[var(--md-on-surface)]'\n : 'border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',\n className,\n )}\n type=\"button\"\n {...props}\n >\n {children}\n </button>\n );\n};\n"],"names":["Chip","selected","className","children","props","jsx","cn"],"mappings":";;AAOO,MAAMA,IAA4B,CAAC,EAAE,UAAAC,IAAW,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,QAElF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,IACI,2HACA;AAAA,MACJC;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACJ,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ComboboxOption {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
}
|
|
6
|
+
export interface ComboboxProps {
|
|
7
|
+
className?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
error?: string;
|
|
10
|
+
helperText?: string;
|
|
11
|
+
label?: string;
|
|
12
|
+
onChange?: (value: string) => void;
|
|
13
|
+
options: ComboboxOption[];
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
value?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const Combobox: React.FC<ComboboxProps>;
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { jsxs as $, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { useState as w, useRef as y, useEffect as R } from "react";
|
|
3
|
+
import { cn as c } from "../../utils/cn.js";
|
|
4
|
+
const S = ({
|
|
5
|
+
label: g,
|
|
6
|
+
helperText: m,
|
|
7
|
+
error: o,
|
|
8
|
+
options: v,
|
|
9
|
+
value: f,
|
|
10
|
+
onChange: p,
|
|
11
|
+
placeholder: z = "Selecione ou pesquise...",
|
|
12
|
+
disabled: E = !1,
|
|
13
|
+
className: L
|
|
14
|
+
}) => {
|
|
15
|
+
const [b, u] = w(""), [n, s] = w(!1), [l, i] = w(-1), x = y(null), N = y(null), I = y(null), h = v.find((e) => e.value === f), d = b ? v.filter((e) => e.label.toLowerCase().includes(b.toLowerCase())) : v, M = n ? b : (h == null ? void 0 : h.label) ?? "";
|
|
16
|
+
R(() => {
|
|
17
|
+
const e = (r) => {
|
|
18
|
+
x.current && !x.current.contains(r.target) && (s(!1), u(""));
|
|
19
|
+
};
|
|
20
|
+
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
21
|
+
}, []);
|
|
22
|
+
const k = (e) => {
|
|
23
|
+
var r;
|
|
24
|
+
p == null || p(e.value), u(""), s(!1), (r = N.current) == null || r.blur();
|
|
25
|
+
}, A = (e) => {
|
|
26
|
+
if (!n) {
|
|
27
|
+
(e.key === "ArrowDown" || e.key === "Enter") && (s(!0), i(0), e.preventDefault());
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
e.key === "ArrowDown" ? (e.preventDefault(), i((r) => Math.min(r + 1, d.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), i((r) => Math.max(r - 1, 0))) : e.key === "Enter" ? (e.preventDefault(), l >= 0 && d[l] && k(d[l])) : e.key === "Escape" && (s(!1), u(""));
|
|
31
|
+
}, a = `combobox-${Math.random().toString(36).slice(2, 9)}`, D = `${a}-list`;
|
|
32
|
+
return /* @__PURE__ */ $("div", { className: c("flex flex-col gap-[var(--spacing-xs)]", L), ref: x, children: [
|
|
33
|
+
g && /* @__PURE__ */ t(
|
|
34
|
+
"label",
|
|
35
|
+
{
|
|
36
|
+
className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
|
|
37
|
+
htmlFor: a,
|
|
38
|
+
children: g
|
|
39
|
+
}
|
|
40
|
+
),
|
|
41
|
+
/* @__PURE__ */ $("div", { className: "relative", children: [
|
|
42
|
+
/* @__PURE__ */ t(
|
|
43
|
+
"input",
|
|
44
|
+
{
|
|
45
|
+
ref: N,
|
|
46
|
+
"aria-activedescendant": l >= 0 ? `${a}-option-${l}` : void 0,
|
|
47
|
+
"aria-autocomplete": "list",
|
|
48
|
+
"aria-controls": D,
|
|
49
|
+
"aria-describedby": o ? `${a}-error` : m ? `${a}-helper` : void 0,
|
|
50
|
+
"aria-expanded": n,
|
|
51
|
+
"aria-invalid": o ? !0 : void 0,
|
|
52
|
+
autoComplete: "off",
|
|
53
|
+
className: c(
|
|
54
|
+
"w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--font-size-base)] text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:opacity-60",
|
|
55
|
+
o && "border-[var(--md-error)]"
|
|
56
|
+
),
|
|
57
|
+
disabled: E,
|
|
58
|
+
id: a,
|
|
59
|
+
placeholder: z,
|
|
60
|
+
role: "combobox",
|
|
61
|
+
type: "text",
|
|
62
|
+
value: M,
|
|
63
|
+
onChange: (e) => {
|
|
64
|
+
u(e.target.value), s(!0), i(0);
|
|
65
|
+
},
|
|
66
|
+
onFocus: () => s(!0),
|
|
67
|
+
onKeyDown: A
|
|
68
|
+
}
|
|
69
|
+
),
|
|
70
|
+
/* @__PURE__ */ t(
|
|
71
|
+
"span",
|
|
72
|
+
{
|
|
73
|
+
"aria-hidden": "true",
|
|
74
|
+
className: c(
|
|
75
|
+
"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] transition",
|
|
76
|
+
n && "rotate-180"
|
|
77
|
+
),
|
|
78
|
+
children: /* @__PURE__ */ t(
|
|
79
|
+
"svg",
|
|
80
|
+
{
|
|
81
|
+
className: "h-4 w-4",
|
|
82
|
+
fill: "none",
|
|
83
|
+
stroke: "currentColor",
|
|
84
|
+
strokeWidth: "2",
|
|
85
|
+
viewBox: "0 0 24 24",
|
|
86
|
+
children: /* @__PURE__ */ t("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
87
|
+
}
|
|
88
|
+
)
|
|
89
|
+
}
|
|
90
|
+
),
|
|
91
|
+
n && d.length > 0 && /* @__PURE__ */ t(
|
|
92
|
+
"ul",
|
|
93
|
+
{
|
|
94
|
+
ref: I,
|
|
95
|
+
className: "absolute z-[var(--z-index-dropdown)] mt-1 max-h-60 w-full overflow-auto rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] py-1 shadow-[var(--shadow-md)]",
|
|
96
|
+
id: D,
|
|
97
|
+
role: "listbox",
|
|
98
|
+
children: d.map((e, r) => /* @__PURE__ */ t(
|
|
99
|
+
"li",
|
|
100
|
+
{
|
|
101
|
+
"aria-selected": e.value === f,
|
|
102
|
+
className: c(
|
|
103
|
+
"cursor-pointer px-3.5 py-2 text-sm transition",
|
|
104
|
+
r === l ? "bg-[var(--md-primary)] text-[var(--md-on-primary)]" : e.value === f ? "bg-[var(--bg-tertiary)] text-[var(--text-primary)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]"
|
|
105
|
+
),
|
|
106
|
+
id: `${a}-option-${r}`,
|
|
107
|
+
role: "option",
|
|
108
|
+
onMouseDown: (C) => {
|
|
109
|
+
C.preventDefault(), k(e);
|
|
110
|
+
},
|
|
111
|
+
onMouseEnter: () => i(r),
|
|
112
|
+
children: e.label
|
|
113
|
+
},
|
|
114
|
+
e.value
|
|
115
|
+
))
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
n && d.length === 0 && /* @__PURE__ */ t("div", { className: "absolute z-[var(--z-index-dropdown)] mt-1 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-3 text-sm text-[var(--text-muted)] shadow-[var(--shadow-md)]", children: "Nenhum resultado encontrado." })
|
|
119
|
+
] }),
|
|
120
|
+
o && /* @__PURE__ */ t(
|
|
121
|
+
"span",
|
|
122
|
+
{
|
|
123
|
+
className: "text-[var(--font-size-xs)] text-[var(--md-error)]",
|
|
124
|
+
id: `${a}-error`,
|
|
125
|
+
role: "alert",
|
|
126
|
+
children: o
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
m && !o && /* @__PURE__ */ t(
|
|
130
|
+
"span",
|
|
131
|
+
{
|
|
132
|
+
className: "text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
|
|
133
|
+
id: `${a}-helper`,
|
|
134
|
+
children: m
|
|
135
|
+
}
|
|
136
|
+
)
|
|
137
|
+
] });
|
|
138
|
+
};
|
|
139
|
+
S.displayName = "Combobox";
|
|
140
|
+
export {
|
|
141
|
+
S as Combobox
|
|
142
|
+
};
|
|
143
|
+
//# sourceMappingURL=Combobox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ComboboxOption {\n label: string;\n value: string;\n}\n\nexport interface ComboboxProps {\n className?: string;\n disabled?: boolean;\n error?: string;\n helperText?: string;\n label?: string;\n onChange?: (value: string) => void;\n options: ComboboxOption[];\n placeholder?: string;\n value?: string;\n}\n\nexport const Combobox: React.FC<ComboboxProps> = ({\n label,\n helperText,\n error,\n options,\n value,\n onChange,\n placeholder = 'Selecione ou pesquise...',\n disabled = false,\n className,\n}) => {\n const [query, setQuery] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n\n const selectedOption = options.find((o) => o.value === value);\n\n const filtered = query\n ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n : options;\n\n const displayValue = isOpen ? query : (selectedOption?.label ?? '');\n\n // Fechar ao clicar fora\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n setIsOpen(false);\n setQuery('');\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n const handleSelect = (option: ComboboxOption) => {\n onChange?.(option.value);\n setQuery('');\n setIsOpen(false);\n inputRef.current?.blur();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!isOpen) {\n if (e.key === 'ArrowDown' || e.key === 'Enter') {\n setIsOpen(true);\n setActiveIndex(0);\n e.preventDefault();\n }\n return;\n }\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n setActiveIndex((i) => Math.max(i - 1, 0));\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (activeIndex >= 0 && filtered[activeIndex]) {\n handleSelect(filtered[activeIndex]);\n }\n } else if (e.key === 'Escape') {\n setIsOpen(false);\n setQuery('');\n }\n };\n\n const inputId = `combobox-${Math.random().toString(36).slice(2, 9)}`;\n const listId = `${inputId}-list`;\n\n return (\n <div className={cn('flex flex-col gap-[var(--spacing-xs)]', className)} ref={containerRef}>\n {label && (\n <label\n className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n htmlFor={inputId}\n >\n {label}\n </label>\n )}\n <div className=\"relative\">\n <input\n ref={inputRef}\n aria-activedescendant={activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : undefined}\n aria-autocomplete=\"list\"\n aria-controls={listId}\n aria-describedby={\n error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\n }\n aria-expanded={isOpen}\n aria-invalid={error ? true : undefined}\n autoComplete=\"off\"\n className={cn(\n 'w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--font-size-base)] text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:opacity-60',\n error && 'border-[var(--md-error)]',\n )}\n disabled={disabled}\n id={inputId}\n placeholder={placeholder}\n role=\"combobox\"\n type=\"text\"\n value={displayValue}\n onChange={(e) => {\n setQuery(e.target.value);\n setIsOpen(true);\n setActiveIndex(0);\n }}\n onFocus={() => setIsOpen(true)}\n onKeyDown={handleKeyDown}\n />\n {/* Chevron */}\n <span\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] transition',\n isOpen && 'rotate-180',\n )}\n >\n <svg\n className=\"h-4 w-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"m6 9 6 6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n\n {/* Dropdown */}\n {isOpen && filtered.length > 0 && (\n <ul\n ref={listRef}\n className=\"absolute z-[var(--z-index-dropdown)] mt-1 max-h-60 w-full overflow-auto rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] py-1 shadow-[var(--shadow-md)]\"\n id={listId}\n role=\"listbox\"\n >\n {filtered.map((option, index) => (\n <li\n aria-selected={option.value === value}\n className={cn(\n 'cursor-pointer px-3.5 py-2 text-sm transition',\n index === activeIndex\n ? 'bg-[var(--md-primary)] text-[var(--md-on-primary)]'\n : option.value === value\n ? 'bg-[var(--bg-tertiary)] text-[var(--text-primary)]'\n : 'text-[var(--text-primary)] hover:bg-[var(--bg-hover)]',\n )}\n id={`${inputId}-option-${index}`}\n key={option.value}\n role=\"option\"\n onMouseDown={(e) => {\n e.preventDefault();\n handleSelect(option);\n }}\n onMouseEnter={() => setActiveIndex(index)}\n >\n {option.label}\n </li>\n ))}\n </ul>\n )}\n {isOpen && filtered.length === 0 && (\n <div className=\"absolute z-[var(--z-index-dropdown)] mt-1 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-3 text-sm text-[var(--text-muted)] shadow-[var(--shadow-md)]\">\n Nenhum resultado encontrado.\n </div>\n )}\n </div>\n {error && (\n <span\n className=\"text-[var(--font-size-xs)] text-[var(--md-error)]\"\n id={`${inputId}-error`}\n role=\"alert\"\n >\n {error}\n </span>\n )}\n {helperText && !error && (\n <span\n className=\"text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]\"\n id={`${inputId}-helper`}\n >\n {helperText}\n </span>\n )}\n </div>\n );\n};\n\nCombobox.displayName = 'Combobox';\n"],"names":["Combobox","label","helperText","error","options","value","onChange","placeholder","disabled","className","query","setQuery","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","containerRef","useRef","inputRef","listRef","selectedOption","o","filtered","displayValue","useEffect","handleClickOutside","e","handleSelect","option","_a","handleKeyDown","i","inputId","listId","jsxs","cn","jsx","index"],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Combobox } from './Combobox';
|
|
3
|
+
declare const meta: Meta<typeof Combobox>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Combobox>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Controlled: Story;
|
|
8
|
+
export declare const WithError: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { cn as a } from "../../utils/cn.js";
|
|
3
|
+
const p = ({
|
|
4
|
+
orientation: r = "horizontal",
|
|
5
|
+
className: o,
|
|
6
|
+
...l
|
|
7
|
+
}) => /* @__PURE__ */ t(
|
|
8
|
+
"div",
|
|
9
|
+
{
|
|
10
|
+
className: a(
|
|
11
|
+
"bg-[var(--border-color)]",
|
|
12
|
+
r === "horizontal" ? "h-px w-full" : "h-full w-px",
|
|
13
|
+
o
|
|
14
|
+
),
|
|
15
|
+
role: "separator",
|
|
16
|
+
...l
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
export {
|
|
20
|
+
p as Divider
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=Divider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\n orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Divider: React.FC<DividerProps> = ({\n orientation = 'horizontal',\n className,\n ...props\n}) => {\n return (\n <div\n className={cn(\n 'bg-[var(--border-color)]',\n orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n className,\n )}\n role=\"separator\"\n {...props}\n />\n );\n};\n"],"names":["Divider","orientation","className","props","jsx","cn"],"mappings":";;AAOO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ,MAAgB,eAAe,gBAAgB;AAAA,MAC/CC;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACJ,GAAGC;AAAA,EAAA;AAAA;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
3
|
+
action?: React.ReactNode;
|
|
4
|
+
description?: React.ReactNode;
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
title: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const EmptyState: React.FC<EmptyStateProps>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { cn as c } from "../../utils/cn.js";
|
|
3
|
+
const i = ({
|
|
4
|
+
icon: r,
|
|
5
|
+
title: d,
|
|
6
|
+
description: t,
|
|
7
|
+
action: a,
|
|
8
|
+
className: s,
|
|
9
|
+
...m
|
|
10
|
+
}) => /* @__PURE__ */ o(
|
|
11
|
+
"div",
|
|
12
|
+
{
|
|
13
|
+
className: c(
|
|
14
|
+
"grid justify-items-center gap-3 rounded-[var(--border-radius-lg)] border border-dashed border-[var(--border-color)] bg-[var(--bg-secondary)] p-6 text-center",
|
|
15
|
+
s
|
|
16
|
+
),
|
|
17
|
+
...m,
|
|
18
|
+
children: [
|
|
19
|
+
r && /* @__PURE__ */ e("div", { className: "text-[var(--text-muted)]", children: r }),
|
|
20
|
+
/* @__PURE__ */ e("h3", { className: "m-0 text-lg font-semibold text-[var(--text-primary)]", children: d }),
|
|
21
|
+
t && /* @__PURE__ */ e("p", { className: "m-0 max-w-[30rem] text-sm text-[var(--text-secondary)]", children: t }),
|
|
22
|
+
a && /* @__PURE__ */ e("div", { className: "mt-1", children: a })
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
export {
|
|
27
|
+
i as EmptyState
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=EmptyState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n action?: React.ReactNode;\n description?: React.ReactNode;\n icon?: React.ReactNode;\n title: React.ReactNode;\n}\n\nexport const EmptyState: React.FC<EmptyStateProps> = ({\n icon,\n title,\n description,\n action,\n className,\n ...props\n}) => {\n return (\n <div\n className={cn(\n 'grid justify-items-center gap-3 rounded-[var(--border-radius-lg)] border border-dashed border-[var(--border-color)] bg-[var(--bg-secondary)] p-6 text-center',\n className,\n )}\n {...props}\n >\n {icon && <div className=\"text-[var(--text-muted)]\">{icon}</div>}\n <h3 className=\"m-0 text-lg font-semibold text-[var(--text-primary)]\">{title}</h3>\n {description && (\n <p className=\"m-0 max-w-[30rem] text-sm text-[var(--text-secondary)]\">{description}</p>\n )}\n {action && <div className=\"mt-1\">{action}</div>}\n </div>\n );\n};\n"],"names":["EmptyState","icon","title","description","action","className","props","jsxs","cn","jsx"],"mappings":";;AAUO,MAAMA,IAAwC,CAAC;AAAA,EACpD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAA;AAAA,MAAAL,KAAQ,gBAAAQ,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAR,GAAK;AAAA,MACzD,gBAAAQ,EAAC,MAAA,EAAG,WAAU,wDAAwD,UAAAP,GAAM;AAAA,MAC3EC,KACC,gBAAAM,EAAC,KAAA,EAAE,WAAU,0DAA0D,UAAAN,GAAY;AAAA,MAEpFC,KAAU,gBAAAK,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAL,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAAA;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface FileUploadProps {
|
|
3
|
+
accept?: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
error?: string;
|
|
7
|
+
helperText?: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
maxSizeBytes?: number;
|
|
10
|
+
multiple?: boolean;
|
|
11
|
+
onChange?: (files: File[]) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const FileUpload: React.FC<FileUploadProps>;
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { jsxs as a, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as q, useState as h } from "react";
|
|
3
|
+
import { cn as g } from "../../utils/cn.js";
|
|
4
|
+
const E = ({
|
|
5
|
+
label: v,
|
|
6
|
+
helperText: f,
|
|
7
|
+
error: y,
|
|
8
|
+
accept: i,
|
|
9
|
+
multiple: D = !1,
|
|
10
|
+
maxSizeBytes: n,
|
|
11
|
+
disabled: e = !1,
|
|
12
|
+
onChange: l,
|
|
13
|
+
className: N
|
|
14
|
+
}) => {
|
|
15
|
+
const c = q(null), [b, d] = h(!1), [k, u] = h(null), p = (r) => {
|
|
16
|
+
if (!r) return;
|
|
17
|
+
const o = Array.from(r);
|
|
18
|
+
if (n) {
|
|
19
|
+
const x = o.find((m) => m.size > n);
|
|
20
|
+
if (x) {
|
|
21
|
+
const m = (n / 1024 / 1024).toFixed(0);
|
|
22
|
+
u(`Arquivo "${x.name}" excede o tamanho máximo de ${m} MB.`);
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
u(null), l == null || l(o);
|
|
27
|
+
}, w = (r) => {
|
|
28
|
+
r.preventDefault(), e || d(!0);
|
|
29
|
+
}, F = () => d(!1), A = (r) => {
|
|
30
|
+
r.preventDefault(), d(!1), e || p(r.dataTransfer.files);
|
|
31
|
+
}, j = (r) => {
|
|
32
|
+
var o;
|
|
33
|
+
(r.key === "Enter" || r.key === " ") && (r.preventDefault(), (o = c.current) == null || o.click());
|
|
34
|
+
}, s = y ?? k;
|
|
35
|
+
return /* @__PURE__ */ a("div", { className: g("flex flex-col gap-[var(--spacing-xs)]", N), children: [
|
|
36
|
+
v && /* @__PURE__ */ t("span", { className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]", children: v }),
|
|
37
|
+
/* @__PURE__ */ a(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
"aria-disabled": e,
|
|
41
|
+
className: g(
|
|
42
|
+
"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-[var(--border-radius-lg)] border-2 border-dashed p-8 text-center transition",
|
|
43
|
+
b ? "border-[var(--md-primary)] bg-[var(--md-primary-container)]" : "border-[var(--md-outline-variant)] hover:border-[var(--md-primary)] hover:bg-[var(--bg-tertiary)]",
|
|
44
|
+
s && "border-[var(--md-error)]",
|
|
45
|
+
e && "pointer-events-none cursor-not-allowed opacity-60"
|
|
46
|
+
),
|
|
47
|
+
onClick: () => {
|
|
48
|
+
var r;
|
|
49
|
+
return !e && ((r = c.current) == null ? void 0 : r.click());
|
|
50
|
+
},
|
|
51
|
+
onDragLeave: F,
|
|
52
|
+
onDragOver: w,
|
|
53
|
+
onDrop: A,
|
|
54
|
+
onKeyDown: j,
|
|
55
|
+
role: "button",
|
|
56
|
+
tabIndex: e ? -1 : 0,
|
|
57
|
+
children: [
|
|
58
|
+
/* @__PURE__ */ t(
|
|
59
|
+
"svg",
|
|
60
|
+
{
|
|
61
|
+
className: "h-8 w-8 text-[var(--md-primary)]",
|
|
62
|
+
fill: "none",
|
|
63
|
+
stroke: "currentColor",
|
|
64
|
+
strokeWidth: "1.5",
|
|
65
|
+
viewBox: "0 0 24 24",
|
|
66
|
+
children: /* @__PURE__ */ t(
|
|
67
|
+
"path",
|
|
68
|
+
{
|
|
69
|
+
d: "M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5",
|
|
70
|
+
strokeLinecap: "round",
|
|
71
|
+
strokeLinejoin: "round"
|
|
72
|
+
}
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
/* @__PURE__ */ a("div", { children: [
|
|
77
|
+
/* @__PURE__ */ a("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: [
|
|
78
|
+
"Arraste arquivos aqui ou",
|
|
79
|
+
" ",
|
|
80
|
+
/* @__PURE__ */ t("span", { className: "text-[var(--md-primary)] underline", children: "clique para selecionar" })
|
|
81
|
+
] }),
|
|
82
|
+
i && /* @__PURE__ */ a("p", { className: "mt-0.5 text-xs text-[var(--text-muted)]", children: [
|
|
83
|
+
"Formatos aceitos: ",
|
|
84
|
+
i
|
|
85
|
+
] }),
|
|
86
|
+
n && /* @__PURE__ */ a("p", { className: "text-xs text-[var(--text-muted)]", children: [
|
|
87
|
+
"Tamanho máximo: ",
|
|
88
|
+
(n / 1024 / 1024).toFixed(0),
|
|
89
|
+
" MB"
|
|
90
|
+
] })
|
|
91
|
+
] })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ t(
|
|
96
|
+
"input",
|
|
97
|
+
{
|
|
98
|
+
ref: c,
|
|
99
|
+
accept: i,
|
|
100
|
+
className: "sr-only",
|
|
101
|
+
disabled: e,
|
|
102
|
+
multiple: D,
|
|
103
|
+
tabIndex: -1,
|
|
104
|
+
type: "file",
|
|
105
|
+
onChange: (r) => p(r.target.files)
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
s && /* @__PURE__ */ t("span", { className: "text-[var(--font-size-xs)] text-[var(--md-error)]", role: "alert", children: s }),
|
|
109
|
+
f && !s && /* @__PURE__ */ t("span", { className: "text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]", children: f })
|
|
110
|
+
] });
|
|
111
|
+
};
|
|
112
|
+
E.displayName = "FileUpload";
|
|
113
|
+
export {
|
|
114
|
+
E as FileUpload
|
|
115
|
+
};
|
|
116
|
+
//# sourceMappingURL=FileUpload.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUpload.js","sources":["../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface FileUploadProps {\n accept?: string;\n className?: string;\n disabled?: boolean;\n error?: string;\n helperText?: string;\n label?: string;\n maxSizeBytes?: number;\n multiple?: boolean;\n onChange?: (files: File[]) => void;\n}\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n label,\n helperText,\n error,\n accept,\n multiple = false,\n maxSizeBytes,\n disabled = false,\n onChange,\n className,\n}) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [sizeError, setSizeError] = useState<string | null>(null);\n\n const handleFiles = (fileList: FileList | null) => {\n if (!fileList) return;\n const files = Array.from(fileList);\n\n if (maxSizeBytes) {\n const oversized = files.find((f) => f.size > maxSizeBytes);\n if (oversized) {\n const mb = (maxSizeBytes / 1024 / 1024).toFixed(0);\n setSizeError(`Arquivo \"${oversized.name}\" excede o tamanho máximo de ${mb} MB.`);\n return;\n }\n }\n\n setSizeError(null);\n onChange?.(files);\n };\n\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n if (!disabled) setIsDragging(true);\n };\n\n const handleDragLeave = () => setIsDragging(false);\n\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragging(false);\n if (!disabled) handleFiles(e.dataTransfer.files);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n inputRef.current?.click();\n }\n };\n\n const displayError = error ?? sizeError;\n\n return (\n <div className={cn('flex flex-col gap-[var(--spacing-xs)]', className)}>\n {label && (\n <span className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\">\n {label}\n </span>\n )}\n <div\n aria-disabled={disabled}\n className={cn(\n 'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-[var(--border-radius-lg)] border-2 border-dashed p-8 text-center transition',\n isDragging\n ? 'border-[var(--md-primary)] bg-[var(--md-primary-container)]'\n : 'border-[var(--md-outline-variant)] hover:border-[var(--md-primary)] hover:bg-[var(--bg-tertiary)]',\n displayError && 'border-[var(--md-error)]',\n disabled && 'pointer-events-none cursor-not-allowed opacity-60',\n )}\n onClick={() => !disabled && inputRef.current?.click()}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n >\n {/* Upload icon */}\n <svg\n className=\"h-8 w-8 text-[var(--md-primary)]\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n <div>\n <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n Arraste arquivos aqui ou{' '}\n <span className=\"text-[var(--md-primary)] underline\">clique para selecionar</span>\n </p>\n {accept && (\n <p className=\"mt-0.5 text-xs text-[var(--text-muted)]\">Formatos aceitos: {accept}</p>\n )}\n {maxSizeBytes && (\n <p className=\"text-xs text-[var(--text-muted)]\">\n Tamanho máximo: {(maxSizeBytes / 1024 / 1024).toFixed(0)} MB\n </p>\n )}\n </div>\n </div>\n <input\n ref={inputRef}\n accept={accept}\n className=\"sr-only\"\n disabled={disabled}\n multiple={multiple}\n tabIndex={-1}\n type=\"file\"\n onChange={(e) => handleFiles(e.target.files)}\n />\n {displayError && (\n <span className=\"text-[var(--font-size-xs)] text-[var(--md-error)]\" role=\"alert\">\n {displayError}\n </span>\n )}\n {helperText && !displayError && (\n <span className=\"text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]\">\n {helperText}\n </span>\n )}\n </div>\n );\n};\n\nFileUpload.displayName = 'FileUpload';\n"],"names":["FileUpload","label","helperText","error","accept","multiple","maxSizeBytes","disabled","onChange","className","inputRef","useRef","isDragging","setIsDragging","useState","sizeError","setSizeError","handleFiles","fileList","files","oversized","f","mb","handleDragOver","e","handleDragLeave","handleDrop","handleKeyDown","_a","displayError","cn","jsx","jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { FileUpload } from './FileUpload';
|
|
3
|
+
declare const meta: Meta<typeof FileUpload>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FileUpload>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const WithRestrictions: Story;
|
|
8
|
+
export declare const Multiple: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const WithError: Story;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as r, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { useState as c } from "react";
|
|
3
|
+
const p = ({
|
|
4
|
+
poweredByText: t = "Powered by",
|
|
5
|
+
logoSrc: e,
|
|
6
|
+
logoAlt: i = "Logo",
|
|
7
|
+
logoFallbackText: s,
|
|
8
|
+
className: o = ""
|
|
9
|
+
}) => {
|
|
10
|
+
const [a, l] = c(!0);
|
|
11
|
+
return /* @__PURE__ */ r(
|
|
12
|
+
"footer",
|
|
13
|
+
{
|
|
14
|
+
className: [
|
|
15
|
+
"relative z-[1] flex w-full shrink-0 items-center justify-center border-t border-[var(--border-color)] bg-[var(--bg-secondary)] px-[var(--spacing-2xl)] py-[var(--spacing-lg)]",
|
|
16
|
+
o
|
|
17
|
+
].filter(Boolean).join(" "),
|
|
18
|
+
children: /* @__PURE__ */ n("div", { className: "flex items-center gap-[var(--spacing-md)]", children: [
|
|
19
|
+
t && /* @__PURE__ */ r("span", { className: "text-[0.95rem] font-normal text-[var(--text-secondary)]", children: t }),
|
|
20
|
+
(e || s) && /* @__PURE__ */ n("div", { className: "flex items-center", children: [
|
|
21
|
+
e && a && /* @__PURE__ */ r(
|
|
22
|
+
"img",
|
|
23
|
+
{
|
|
24
|
+
alt: i,
|
|
25
|
+
className: "h-6 w-auto object-contain",
|
|
26
|
+
onError: (m) => {
|
|
27
|
+
l(!1);
|
|
28
|
+
},
|
|
29
|
+
src: e,
|
|
30
|
+
style: {
|
|
31
|
+
filter: "brightness(0)"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
),
|
|
35
|
+
s && /* @__PURE__ */ r(
|
|
36
|
+
"span",
|
|
37
|
+
{
|
|
38
|
+
className: "flex items-center text-base font-bold tracking-[0.1em] text-[var(--md-primary)]",
|
|
39
|
+
style: {
|
|
40
|
+
display: e && a ? "none" : "flex",
|
|
41
|
+
fontFamily: '"Orbitron", sans-serif'
|
|
42
|
+
},
|
|
43
|
+
children: s
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
] })
|
|
47
|
+
] })
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
};
|
|
51
|
+
export {
|
|
52
|
+
p as Footer
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=Footer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Footer.js","sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nexport interface FooterProps {\n /** Classe CSS adicional */\n className?: string;\n /** Texto alternativo do logo */\n logoAlt?: string;\n /** Texto exibido se a imagem do logo falhar (ex.: \"SBK\") */\n logoFallbackText?: string;\n /** URL da imagem do logo */\n logoSrc?: string;\n /** Texto antes do logo (ex.: \"Powered by\") */\n poweredByText?: string;\n}\n\nexport const Footer: React.FC<FooterProps> = ({\n poweredByText = 'Powered by',\n logoSrc,\n logoAlt = 'Logo',\n logoFallbackText,\n className = '',\n}) => {\n const [logoVisible, setLogoVisible] = useState(true);\n return (\n <footer\n className={[\n 'relative z-[1] flex w-full shrink-0 items-center justify-center border-t border-[var(--border-color)] bg-[var(--bg-secondary)] px-[var(--spacing-2xl)] py-[var(--spacing-lg)]',\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <div className=\"flex items-center gap-[var(--spacing-md)]\">\n {poweredByText && (\n <span className=\"text-[0.95rem] font-normal text-[var(--text-secondary)]\">\n {poweredByText}\n </span>\n )}\n {(logoSrc || logoFallbackText) && (\n <div className=\"flex items-center\">\n {logoSrc && logoVisible && (\n <img\n alt={logoAlt}\n className=\"h-6 w-auto object-contain\"\n onError={(_e) => {\n setLogoVisible(false);\n }}\n src={logoSrc}\n style={{\n filter: 'brightness(0)',\n }}\n />\n )}\n {logoFallbackText && (\n <span\n className=\"flex items-center text-base font-bold tracking-[0.1em] text-[var(--md-primary)]\"\n style={{\n display: logoSrc && logoVisible ? 'none' : 'flex',\n fontFamily: '\"Orbitron\", sans-serif',\n }}\n >\n {logoFallbackText}\n </span>\n )}\n </div>\n )}\n </div>\n </footer>\n );\n};\n"],"names":["Footer","poweredByText","logoSrc","logoAlt","logoFallbackText","className","logoVisible","setLogoVisible","useState","jsx","jsxs","_e"],"mappings":";;AAgBO,MAAMA,IAAgC,CAAC;AAAA,EAC5C,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,kBAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAI;AACnD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,QAAAT,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,2DACb,UAAAR,GACH;AAAA,SAEAC,KAAWE,MACX,gBAAAM,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,UAAAR,KAAWI,KACV,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKN;AAAA,cACL,WAAU;AAAA,cACV,SAAS,CAACQ,MAAO;AACf,gBAAAJ,EAAe,EAAK;AAAA,cACtB;AAAA,cACA,KAAKL;AAAA,cACL,OAAO;AAAA,gBACL,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UAAA;AAAA,UAGHE,KACC,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,SAASP,KAAWI,IAAc,SAAS;AAAA,gBAC3C,YAAY;AAAA,cAAA;AAAA,cAGb,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|