@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.
Files changed (146) hide show
  1. package/README.md +13 -10
  2. package/dist/components/Accordion/Accordion.d.ts +11 -0
  3. package/dist/components/Accordion/Accordion.js +56 -0
  4. package/dist/components/Accordion/Accordion.js.map +1 -0
  5. package/dist/components/Accordion/Accordion.stories.d.ts +7 -0
  6. package/dist/components/Alert/Alert.d.ts +6 -0
  7. package/dist/components/Alert/Alert.js +32 -0
  8. package/dist/components/Alert/Alert.js.map +1 -0
  9. package/dist/components/Alert/Alert.stories.d.ts +8 -0
  10. package/dist/components/Badge/Badge.d.ts +6 -0
  11. package/dist/components/Badge/Badge.js +35 -0
  12. package/dist/components/Badge/Badge.js.map +1 -0
  13. package/dist/components/Badge/Badge.stories.d.ts +8 -0
  14. package/dist/components/Breadcrumb/Breadcrumb.d.ts +10 -0
  15. package/dist/components/Breadcrumb/Breadcrumb.js +26 -0
  16. package/dist/components/Breadcrumb/Breadcrumb.js.map +1 -0
  17. package/dist/components/Breadcrumb/Breadcrumb.stories.d.ts +8 -0
  18. package/dist/components/Button/Button.js +122 -0
  19. package/dist/components/Button/Button.js.map +1 -0
  20. package/dist/components/Button/Button.stories.d.ts +7 -0
  21. package/dist/components/Card/Card.js +33 -0
  22. package/dist/components/Card/Card.js.map +1 -0
  23. package/dist/components/Card/Card.stories.d.ts +8 -0
  24. package/dist/components/Checkbox/Checkbox.d.ts +6 -0
  25. package/dist/components/Checkbox/Checkbox.js +36 -0
  26. package/dist/components/Checkbox/Checkbox.js.map +1 -0
  27. package/dist/components/Checkbox/Checkbox.stories.d.ts +7 -0
  28. package/dist/components/Chip/Chip.d.ts +5 -0
  29. package/dist/components/Chip/Chip.js +19 -0
  30. package/dist/components/Chip/Chip.js.map +1 -0
  31. package/dist/components/Combobox/Combobox.d.ts +17 -0
  32. package/dist/components/Combobox/Combobox.js +143 -0
  33. package/dist/components/Combobox/Combobox.js.map +1 -0
  34. package/dist/components/Combobox/Combobox.stories.d.ts +9 -0
  35. package/dist/components/Divider/Divider.d.ts +5 -0
  36. package/dist/components/Divider/Divider.js +22 -0
  37. package/dist/components/Divider/Divider.js.map +1 -0
  38. package/dist/components/EmptyState/EmptyState.d.ts +8 -0
  39. package/dist/components/EmptyState/EmptyState.js +29 -0
  40. package/dist/components/EmptyState/EmptyState.js.map +1 -0
  41. package/dist/components/Feedback/Feedback.stories.d.ts +5 -0
  42. package/dist/components/FileUpload/FileUpload.d.ts +13 -0
  43. package/dist/components/FileUpload/FileUpload.js +116 -0
  44. package/dist/components/FileUpload/FileUpload.js.map +1 -0
  45. package/dist/components/FileUpload/FileUpload.stories.d.ts +10 -0
  46. package/dist/components/Footer/Footer.js +54 -0
  47. package/dist/components/Footer/Footer.js.map +1 -0
  48. package/dist/components/Header/Header.js +114 -0
  49. package/dist/components/Header/Header.js.map +1 -0
  50. package/dist/components/Input/Input.d.ts +2 -2
  51. package/dist/components/Input/Input.js +78 -0
  52. package/dist/components/Input/Input.js.map +1 -0
  53. package/dist/components/Input/Input.stories.d.ts +9 -0
  54. package/dist/components/Layout/Layout.d.ts +14 -0
  55. package/dist/components/Layout/Layout.js +41 -0
  56. package/dist/components/Layout/Layout.js.map +1 -0
  57. package/dist/components/Modal/Modal.js +113 -0
  58. package/dist/components/Modal/Modal.js.map +1 -0
  59. package/dist/components/Modal/Modal.stories.d.ts +8 -0
  60. package/dist/components/Navigation/Navigation.d.ts +7 -0
  61. package/dist/components/Navigation/Navigation.js +26 -0
  62. package/dist/components/Navigation/Navigation.js.map +1 -0
  63. package/dist/components/NumberInput/NumberInput.d.ts +12 -0
  64. package/dist/components/NumberInput/NumberInput.js +135 -0
  65. package/dist/components/NumberInput/NumberInput.js.map +1 -0
  66. package/dist/components/NumberInput/NumberInput.stories.d.ts +8 -0
  67. package/dist/components/PageHeader/PageHeader.d.ts +7 -0
  68. package/dist/components/PageHeader/PageHeader.js +29 -0
  69. package/dist/components/PageHeader/PageHeader.js.map +1 -0
  70. package/dist/components/Pagination/Pagination.d.ts +7 -0
  71. package/dist/components/Pagination/Pagination.js +50 -0
  72. package/dist/components/Pagination/Pagination.js.map +1 -0
  73. package/dist/components/Pagination/Pagination.stories.d.ts +8 -0
  74. package/dist/components/Paragraph/Paragraph.js +41 -0
  75. package/dist/components/Paragraph/Paragraph.js.map +1 -0
  76. package/dist/components/Popover/Popover.d.ts +7 -0
  77. package/dist/components/Popover/Popover.js +57 -0
  78. package/dist/components/Popover/Popover.js.map +1 -0
  79. package/dist/components/Radio/Radio.d.ts +6 -0
  80. package/dist/components/Radio/Radio.js +36 -0
  81. package/dist/components/Radio/Radio.js.map +1 -0
  82. package/dist/components/Radio/Radio.stories.d.ts +7 -0
  83. package/dist/components/SectionHeader/SectionHeader.d.ts +7 -0
  84. package/dist/components/SectionHeader/SectionHeader.js +19 -0
  85. package/dist/components/SectionHeader/SectionHeader.js.map +1 -0
  86. package/dist/components/Select/Select.d.ts +13 -0
  87. package/dist/components/Select/Select.js +45 -0
  88. package/dist/components/Select/Select.js.map +1 -0
  89. package/dist/components/Select/Select.stories.d.ts +8 -0
  90. package/dist/components/Skeleton/Skeleton.d.ts +7 -0
  91. package/dist/components/Skeleton/Skeleton.js +25 -0
  92. package/dist/components/Skeleton/Skeleton.js.map +1 -0
  93. package/dist/components/Stepper/Stepper.d.ts +13 -0
  94. package/dist/components/Stepper/Stepper.js +97 -0
  95. package/dist/components/Stepper/Stepper.js.map +1 -0
  96. package/dist/components/Stepper/Stepper.stories.d.ts +8 -0
  97. package/dist/components/Subtitle/Subtitle.js +40 -0
  98. package/dist/components/Subtitle/Subtitle.js.map +1 -0
  99. package/dist/components/Switch/Switch.d.ts +7 -0
  100. package/dist/components/Switch/Switch.js +37 -0
  101. package/dist/components/Switch/Switch.js.map +1 -0
  102. package/dist/components/Switch/Switch.stories.d.ts +8 -0
  103. package/dist/components/Table/Table.d.ts +4 -0
  104. package/dist/components/Table/Table.js +17 -0
  105. package/dist/components/Table/Table.js.map +1 -0
  106. package/dist/components/Tabs/Tabs.d.ts +11 -0
  107. package/dist/components/Tabs/Tabs.js +62 -0
  108. package/dist/components/Tabs/Tabs.js.map +1 -0
  109. package/dist/components/Tabs/Tabs.stories.d.ts +8 -0
  110. package/dist/components/Tag/Tag.d.ts +5 -0
  111. package/dist/components/Tag/Tag.js +29 -0
  112. package/dist/components/Tag/Tag.js.map +1 -0
  113. package/dist/components/Textarea/Textarea.d.ts +7 -0
  114. package/dist/components/Textarea/Textarea.js +46 -0
  115. package/dist/components/Textarea/Textarea.js.map +1 -0
  116. package/dist/components/Textarea/Textarea.stories.d.ts +7 -0
  117. package/dist/components/Title/Title.js +47 -0
  118. package/dist/components/Title/Title.js.map +1 -0
  119. package/dist/components/Toast/Toast.d.ts +26 -0
  120. package/dist/components/Toast/Toast.js +110 -0
  121. package/dist/components/Toast/Toast.js.map +1 -0
  122. package/dist/components/Toast/Toast.stories.d.ts +8 -0
  123. package/dist/components/Tooltip/Tooltip.d.ts +7 -0
  124. package/dist/components/Tooltip/Tooltip.js +36 -0
  125. package/dist/components/Tooltip/Tooltip.js.map +1 -0
  126. package/dist/index.d.ts +31 -3
  127. package/dist/index.js +88 -0
  128. package/dist/index.js.map +1 -0
  129. package/dist/node_modules/clsx/dist/clsx.js +17 -0
  130. package/dist/node_modules/clsx/dist/clsx.js.map +1 -0
  131. package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js +2925 -0
  132. package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js.map +1 -0
  133. package/dist/oficios-ui.umd.cjs +1 -1
  134. package/dist/oficios-ui.umd.cjs.map +1 -1
  135. package/dist/theme/ThemeProvider.d.ts +1 -1
  136. package/dist/theme/ThemeProvider.js +22 -0
  137. package/dist/theme/ThemeProvider.js.map +1 -0
  138. package/dist/theme.css +60 -64
  139. package/dist/ui.css +1 -0
  140. package/dist/utils/cn.d.ts +7 -0
  141. package/dist/utils/cn.js +7 -0
  142. package/dist/utils/cn.js.map +1 -0
  143. package/package.json +54 -5
  144. package/dist/oficios-ui.css +0 -1
  145. package/dist/oficios-ui.js +0 -593
  146. 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,5 @@
1
+ import type React from 'react';
2
+ export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ orientation?: 'horizontal' | 'vertical';
4
+ }
5
+ export declare const Divider: React.FC<DividerProps>;
@@ -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,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Overview: Story;
@@ -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;"}