@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,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface StepperItem {
|
|
3
|
+
description?: string;
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
}
|
|
7
|
+
export type StepStatus = 'completed' | 'active' | 'pending';
|
|
8
|
+
export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
currentStep: string;
|
|
10
|
+
items: StepperItem[];
|
|
11
|
+
orientation?: 'horizontal' | 'vertical';
|
|
12
|
+
}
|
|
13
|
+
export declare const Stepper: React.FC<StepperProps>;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { jsx as r, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { cn as a } from "../../utils/cn.js";
|
|
3
|
+
const f = ({
|
|
4
|
+
items: n,
|
|
5
|
+
currentStep: o,
|
|
6
|
+
orientation: m = "horizontal",
|
|
7
|
+
className: c,
|
|
8
|
+
...p
|
|
9
|
+
}) => {
|
|
10
|
+
const s = n.findIndex((e) => e.id === o), v = (e) => e < s ? "completed" : e === s ? "active" : "pending", i = m === "horizontal";
|
|
11
|
+
return /* @__PURE__ */ r(
|
|
12
|
+
"div",
|
|
13
|
+
{
|
|
14
|
+
"aria-label": "Progresso",
|
|
15
|
+
className: a(i ? "flex items-start" : "flex flex-col", c),
|
|
16
|
+
role: "list",
|
|
17
|
+
...p,
|
|
18
|
+
children: n.map((e, l) => {
|
|
19
|
+
const t = v(l), x = l === n.length - 1;
|
|
20
|
+
return /* @__PURE__ */ d(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
className: a("flex", i ? "flex-1 flex-col items-center" : "gap-4"),
|
|
24
|
+
role: "listitem",
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ d(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
className: a(
|
|
30
|
+
i ? "flex w-full items-center" : "flex flex-col items-center"
|
|
31
|
+
),
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ r(
|
|
34
|
+
"div",
|
|
35
|
+
{
|
|
36
|
+
"aria-current": t === "active" ? "step" : void 0,
|
|
37
|
+
className: a(
|
|
38
|
+
"relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition",
|
|
39
|
+
t === "completed" && "border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]",
|
|
40
|
+
t === "active" && "border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]",
|
|
41
|
+
t === "pending" && "border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]"
|
|
42
|
+
),
|
|
43
|
+
children: t === "completed" ? /* @__PURE__ */ r(
|
|
44
|
+
"svg",
|
|
45
|
+
{
|
|
46
|
+
className: "h-4 w-4",
|
|
47
|
+
fill: "none",
|
|
48
|
+
stroke: "currentColor",
|
|
49
|
+
strokeWidth: "2.5",
|
|
50
|
+
viewBox: "0 0 24 24",
|
|
51
|
+
children: /* @__PURE__ */ r("path", { d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
52
|
+
}
|
|
53
|
+
) : l + 1
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
!x && /* @__PURE__ */ r(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
className: a(
|
|
60
|
+
"transition",
|
|
61
|
+
i ? "h-0.5 flex-1" : "my-1 ml-[1.0625rem] w-0.5 flex-1",
|
|
62
|
+
l < s ? "bg-[var(--md-primary)]" : "bg-[var(--md-outline-variant)]"
|
|
63
|
+
),
|
|
64
|
+
"aria-hidden": "true"
|
|
65
|
+
}
|
|
66
|
+
)
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
),
|
|
70
|
+
/* @__PURE__ */ d("div", { className: a("mt-2 text-center", i ? "" : "mt-0 pb-6 text-left"), children: [
|
|
71
|
+
/* @__PURE__ */ r(
|
|
72
|
+
"p",
|
|
73
|
+
{
|
|
74
|
+
className: a(
|
|
75
|
+
"text-sm font-medium leading-tight",
|
|
76
|
+
t === "active" && "text-[var(--md-primary)]",
|
|
77
|
+
t === "completed" && "text-[var(--text-primary)]",
|
|
78
|
+
t === "pending" && "text-[var(--text-muted)]"
|
|
79
|
+
),
|
|
80
|
+
children: e.label
|
|
81
|
+
}
|
|
82
|
+
),
|
|
83
|
+
e.description && /* @__PURE__ */ r("p", { className: "mt-0.5 text-xs text-[var(--text-muted)]", children: e.description })
|
|
84
|
+
] })
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
e.id
|
|
88
|
+
);
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
};
|
|
93
|
+
f.displayName = "Stepper";
|
|
94
|
+
export {
|
|
95
|
+
f as Stepper
|
|
96
|
+
};
|
|
97
|
+
//# sourceMappingURL=Stepper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface StepperItem {\n description?: string;\n id: string;\n label: string;\n}\n\nexport type StepStatus = 'completed' | 'active' | 'pending';\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n currentStep: string;\n items: StepperItem[];\n orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Stepper: React.FC<StepperProps> = ({\n items,\n currentStep,\n orientation = 'horizontal',\n className,\n ...props\n}) => {\n const currentIndex = items.findIndex((item) => item.id === currentStep);\n\n const getStatus = (index: number): StepStatus => {\n if (index < currentIndex) return 'completed';\n if (index === currentIndex) return 'active';\n return 'pending';\n };\n\n const isHorizontal = orientation === 'horizontal';\n\n return (\n <div\n aria-label=\"Progresso\"\n className={cn(isHorizontal ? 'flex items-start' : 'flex flex-col', className)}\n role=\"list\"\n {...props}\n >\n {items.map((item, index) => {\n const status = getStatus(index);\n const isLast = index === items.length - 1;\n\n return (\n <div\n key={item.id}\n className={cn('flex', isHorizontal ? 'flex-1 flex-col items-center' : 'gap-4')}\n role=\"listitem\"\n >\n {/* Step indicator + connector */}\n <div\n className={cn(\n isHorizontal ? 'flex w-full items-center' : 'flex flex-col items-center',\n )}\n >\n {/* Circle */}\n <div\n aria-current={status === 'active' ? 'step' : undefined}\n className={cn(\n 'relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition',\n status === 'completed' &&\n 'border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]',\n status === 'active' &&\n 'border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]',\n status === 'pending' &&\n 'border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]',\n )}\n >\n {status === 'completed' ? (\n <svg\n className=\"h-4 w-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 6 9 17l-5-5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n ) : (\n index + 1\n )}\n </div>\n\n {/* Connector line */}\n {!isLast && (\n <div\n className={cn(\n 'transition',\n isHorizontal ? 'h-0.5 flex-1' : 'my-1 ml-[1.0625rem] w-0.5 flex-1',\n index < currentIndex\n ? 'bg-[var(--md-primary)]'\n : 'bg-[var(--md-outline-variant)]',\n )}\n aria-hidden=\"true\"\n />\n )}\n </div>\n\n {/* Label + description */}\n <div className={cn('mt-2 text-center', isHorizontal ? '' : 'mt-0 pb-6 text-left')}>\n <p\n className={cn(\n 'text-sm font-medium leading-tight',\n status === 'active' && 'text-[var(--md-primary)]',\n status === 'completed' && 'text-[var(--text-primary)]',\n status === 'pending' && 'text-[var(--text-muted)]',\n )}\n >\n {item.label}\n </p>\n {item.description && (\n <p className=\"mt-0.5 text-xs text-[var(--text-muted)]\">{item.description}</p>\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nStepper.displayName = 'Stepper';\n"],"names":["Stepper","items","currentStep","orientation","className","props","currentIndex","item","getStatus","index","isHorizontal","jsx","cn","status","isLast","jsxs"],"mappings":";;AAiBO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAeL,EAAM,UAAU,CAACM,MAASA,EAAK,OAAOL,CAAW,GAEhEM,IAAY,CAACC,MACbA,IAAQH,IAAqB,cAC7BG,MAAUH,IAAqB,WAC5B,WAGHI,IAAeP,MAAgB;AAErC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAWC,EAAGF,IAAe,qBAAqB,iBAAiBN,CAAS;AAAA,MAC5E,MAAK;AAAA,MACJ,GAAGC;AAAA,MAEH,UAAAJ,EAAM,IAAI,CAACM,GAAME,MAAU;AAC1B,cAAMI,IAASL,EAAUC,CAAK,GACxBK,IAASL,MAAUR,EAAM,SAAS;AAExC,eACE,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWH,EAAG,QAAQF,IAAe,iCAAiC,OAAO;AAAA,YAC7E,MAAK;AAAA,YAGL,UAAA;AAAA,cAAA,gBAAAK;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACTF,IAAe,6BAA6B;AAAA,kBAAA;AAAA,kBAI9C,UAAA;AAAA,oBAAA,gBAAAC;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,gBAAcE,MAAW,WAAW,SAAS;AAAA,wBAC7C,WAAWD;AAAA,0BACT;AAAA,0BACAC,MAAW,eACT;AAAA,0BACFA,MAAW,YACT;AAAA,0BACFA,MAAW,aACT;AAAA,wBAAA;AAAA,wBAGH,gBAAW,cACV,gBAAAF;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAU;AAAA,4BACV,MAAK;AAAA,4BACL,QAAO;AAAA,4BACP,aAAY;AAAA,4BACZ,SAAQ;AAAA,4BAER,4BAAC,QAAA,EAAK,GAAE,mBAAkB,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,0BAAA;AAAA,wBAAA,IAGzEF,IAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAKX,CAACK,KACA,gBAAAH;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWC;AAAA,0BACT;AAAA,0BACAF,IAAe,iBAAiB;AAAA,0BAChCD,IAAQH,IACJ,2BACA;AAAA,wBAAA;AAAA,wBAEN,eAAY;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACd;AAAA,gBAAA;AAAA,cAAA;AAAA,cAKJ,gBAAAS,EAAC,SAAI,WAAWH,EAAG,oBAAoBF,IAAe,KAAK,qBAAqB,GAC9E,UAAA;AAAA,gBAAA,gBAAAC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACAC,MAAW,YAAY;AAAA,sBACvBA,MAAW,eAAe;AAAA,sBAC1BA,MAAW,aAAa;AAAA,oBAAA;AAAA,oBAGzB,UAAAN,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEPA,EAAK,eACJ,gBAAAI,EAAC,OAAE,WAAU,2CAA2C,YAAK,YAAA,CAAY;AAAA,cAAA,EAAA,CAE7E;AAAA,YAAA;AAAA,UAAA;AAAA,UApEKJ,EAAK;AAAA,QAAA;AAAA,MAuEhB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAQ,cAAc;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Stepper } from './Stepper';
|
|
3
|
+
declare const meta: Meta<typeof Stepper>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Stepper>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Controlled: Story;
|
|
8
|
+
export declare const Vertical: Story;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx as v } from "react/jsx-runtime";
|
|
2
|
+
const h = ({
|
|
3
|
+
as: t = "p",
|
|
4
|
+
size: e = "md",
|
|
5
|
+
weight: o = "normal",
|
|
6
|
+
align: n = "left",
|
|
7
|
+
muted: a = !1,
|
|
8
|
+
italic: s = !1,
|
|
9
|
+
children: i,
|
|
10
|
+
className: r = "",
|
|
11
|
+
...l
|
|
12
|
+
}) => {
|
|
13
|
+
const m = t, f = {
|
|
14
|
+
xs: "text-[var(--font-size-xs)]",
|
|
15
|
+
sm: "text-[var(--font-size-sm)]",
|
|
16
|
+
md: "text-[var(--font-size-base)]",
|
|
17
|
+
lg: "text-[var(--font-size-lg)]"
|
|
18
|
+
}, c = {
|
|
19
|
+
normal: "font-[var(--font-weight-normal)]",
|
|
20
|
+
medium: "font-[var(--font-weight-medium)]",
|
|
21
|
+
semibold: "font-[var(--font-weight-semibold)]"
|
|
22
|
+
}, x = {
|
|
23
|
+
left: "text-left",
|
|
24
|
+
center: "text-center",
|
|
25
|
+
right: "text-right"
|
|
26
|
+
}, g = [
|
|
27
|
+
"m-0 leading-[var(--line-height-normal)] text-[var(--text-secondary)] transition-[var(--transition-colors)]",
|
|
28
|
+
f[e],
|
|
29
|
+
c[o],
|
|
30
|
+
x[n],
|
|
31
|
+
s ? "italic" : "not-italic",
|
|
32
|
+
a ? "text-[var(--text-muted)] opacity-80" : "",
|
|
33
|
+
r
|
|
34
|
+
].filter(Boolean).join(" ");
|
|
35
|
+
return /* @__PURE__ */ v(m, { className: g, ...l, children: i });
|
|
36
|
+
};
|
|
37
|
+
export {
|
|
38
|
+
h as Subtitle
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=Subtitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Subtitle.js","sources":["../../../src/components/Subtitle/Subtitle.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface SubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n align?: 'left' | 'center' | 'right';\n as?: 'p' | 'span' | 'div';\n children: React.ReactNode;\n italic?: boolean;\n muted?: boolean;\n size?: 'xs' | 'sm' | 'md' | 'lg';\n weight?: 'normal' | 'medium' | 'semibold';\n}\n\nexport const Subtitle: React.FC<SubtitleProps> = ({\n as = 'p',\n size = 'md',\n weight = 'normal',\n align = 'left',\n muted = false,\n italic = false,\n children,\n className = '',\n ...props\n}) => {\n const Component = as;\n const sizeClassMap: Record<NonNullable<SubtitleProps['size']>, string> = {\n xs: 'text-[var(--font-size-xs)]',\n sm: 'text-[var(--font-size-sm)]',\n md: 'text-[var(--font-size-base)]',\n lg: 'text-[var(--font-size-lg)]',\n };\n const weightClassMap: Record<NonNullable<SubtitleProps['weight']>, string> = {\n normal: 'font-[var(--font-weight-normal)]',\n medium: 'font-[var(--font-weight-medium)]',\n semibold: 'font-[var(--font-weight-semibold)]',\n };\n const alignClassMap: Record<NonNullable<SubtitleProps['align']>, string> = {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n };\n const combinedClass = [\n 'm-0 leading-[var(--line-height-normal)] text-[var(--text-secondary)] transition-[var(--transition-colors)]',\n sizeClassMap[size],\n weightClassMap[weight],\n alignClassMap[align],\n italic ? 'italic' : 'not-italic',\n muted ? 'text-[var(--text-muted)] opacity-80' : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <Component className={combinedClass} {...props}>\n {children}\n </Component>\n );\n};\n"],"names":["Subtitle","as","size","weight","align","muted","italic","children","className","props","Component","sizeClassMap","weightClassMap","alignClassMap","combinedClass"],"mappings":";AAYO,MAAMA,IAAoC,CAAC;AAAA,EAChD,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,GACZU,IAAmE;AAAA,IACvE,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAEAC,IAAuE;AAAA,IAC3E,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA,GAENC,IAAqE;AAAA,IACzE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,GAEHC,IAAgB;AAAA,IACpB;AAAA,IACAH,EAAaT,CAAI;AAAA,IACjBU,EAAeT,CAAM;AAAA,IACrBU,EAAcT,CAAK;AAAA,IACnBE,IAAS,WAAW;AAAA,IACpBD,IAAQ,wCAAwC;AAAA,IAChDG;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACGE,GAAA,EAAU,WAAWI,GAAgB,GAAGL,GACtC,UAAAF,GACH;AAEJ;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
label?: string;
|
|
5
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsxs as n, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import m from "react";
|
|
3
|
+
import { cn as s } from "../../utils/cn.js";
|
|
4
|
+
const f = m.forwardRef(
|
|
5
|
+
({ checked: r = !1, onCheckedChange: i, label: e, className: a, ...o }, l) => /* @__PURE__ */ n("div", { className: s("inline-flex items-center gap-2", a), children: [
|
|
6
|
+
/* @__PURE__ */ t(
|
|
7
|
+
"button",
|
|
8
|
+
{
|
|
9
|
+
ref: l,
|
|
10
|
+
"aria-checked": r,
|
|
11
|
+
className: s(
|
|
12
|
+
"relative inline-flex h-6 w-11 items-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]",
|
|
13
|
+
r ? "border-[var(--md-primary)] bg-[var(--md-primary)]" : "border-[var(--md-outline)] bg-[var(--md-surface-container-high)]"
|
|
14
|
+
),
|
|
15
|
+
onClick: () => i == null ? void 0 : i(!r),
|
|
16
|
+
role: "switch",
|
|
17
|
+
type: "button",
|
|
18
|
+
...o,
|
|
19
|
+
children: /* @__PURE__ */ t(
|
|
20
|
+
"span",
|
|
21
|
+
{
|
|
22
|
+
className: s(
|
|
23
|
+
"inline-block h-5 w-5 rounded-full bg-[var(--md-surface)] shadow transition",
|
|
24
|
+
r ? "translate-x-5" : "translate-x-0.5"
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
),
|
|
30
|
+
e && /* @__PURE__ */ t("span", { className: "text-sm text-[var(--text-primary)]", children: e })
|
|
31
|
+
] })
|
|
32
|
+
);
|
|
33
|
+
f.displayName = "Switch";
|
|
34
|
+
export {
|
|
35
|
+
f as Switch
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SwitchProps extends Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n 'onChange'\n> {\n checked?: boolean;\n label?: string;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n ({ checked = false, onCheckedChange, label, className, ...props }, ref) => {\n return (\n <div className={cn('inline-flex items-center gap-2', className)}>\n <button\n ref={ref}\n aria-checked={checked}\n className={cn(\n 'relative inline-flex h-6 w-11 items-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]',\n checked\n ? 'border-[var(--md-primary)] bg-[var(--md-primary)]'\n : 'border-[var(--md-outline)] bg-[var(--md-surface-container-high)]',\n )}\n onClick={() => onCheckedChange?.(!checked)}\n role=\"switch\"\n type=\"button\"\n {...props}\n >\n <span\n className={cn(\n 'inline-block h-5 w-5 rounded-full bg-[var(--md-surface)] shadow transition',\n checked ? 'translate-x-5' : 'translate-x-0.5',\n )}\n />\n </button>\n {label && <span className=\"text-sm text-[var(--text-primary)]\">{label}</span>}\n </div>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["Switch","React","checked","onCheckedChange","label","className","props","ref","cn","jsx"],"mappings":";;;AAYO,MAAMA,IAASC,EAAM;AAAA,EAC1B,CAAC,EAAE,SAAAC,IAAU,IAAO,iBAAAC,GAAiB,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAASC,wBAE9D,OAAA,EAAI,WAAWC,EAAG,kCAAkCH,CAAS,GAC5D,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,gBAAcL;AAAA,QACd,WAAWM;AAAA,UACT;AAAA,UACAN,IACI,sDACA;AAAA,QAAA;AAAA,QAEN,SAAS,MAAMC,KAAA,gBAAAA,EAAkB,CAACD;AAAA,QAClC,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,GAAGI;AAAA,QAEJ,UAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAN,IAAU,kBAAkB;AAAA,YAAA;AAAA,UAC9B;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEDE,KAAS,gBAAAK,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAAL,EAAA,CAAM;AAAA,EAAA,GACxE;AAGN;AAEAJ,EAAO,cAAc;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Switch } from './Switch';
|
|
3
|
+
declare const meta: Meta<typeof Switch>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Switch>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Controlled: Story;
|
|
8
|
+
export declare const States: Story;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { cn as d } from "../../utils/cn.js";
|
|
3
|
+
const b = ({ className: e, children: o, ...a }) => /* @__PURE__ */ r("div", { className: "overflow-x-auto rounded-[var(--border-radius-md)] border border-[var(--border-color)]", children: /* @__PURE__ */ r(
|
|
4
|
+
"table",
|
|
5
|
+
{
|
|
6
|
+
className: d(
|
|
7
|
+
"w-full min-w-[36rem] border-collapse bg-[var(--bg-secondary)] text-left",
|
|
8
|
+
e
|
|
9
|
+
),
|
|
10
|
+
...a,
|
|
11
|
+
children: o
|
|
12
|
+
}
|
|
13
|
+
) });
|
|
14
|
+
export {
|
|
15
|
+
b as Table
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=Table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const Table: React.FC<TableProps> = ({ className, children, ...props }) => {\n return (\n <div className=\"overflow-x-auto rounded-[var(--border-radius-md)] border border-[var(--border-color)]\">\n <table\n className={cn(\n 'w-full min-w-[36rem] border-collapse bg-[var(--bg-secondary)] text-left',\n className,\n )}\n {...props}\n >\n {children}\n </table>\n </div>\n );\n};\n"],"names":["Table","className","children","props","jsx","cn"],"mappings":";;AAKO,MAAMA,IAA8B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,QAElE,gBAAAC,EAAC,OAAA,EAAI,WAAU,yFACb,UAAA,gBAAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA,GAEL;"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsxs as v, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { useState as p } from "react";
|
|
3
|
+
import { cn as f } from "../../utils/cn.js";
|
|
4
|
+
const x = ({ items: n, defaultTabId: s }) => {
|
|
5
|
+
var b;
|
|
6
|
+
const [d, l] = p(s ?? ((b = n[0]) == null ? void 0 : b.id)), a = n.find((r) => r.id === d) ?? n[0], c = Math.max(
|
|
7
|
+
0,
|
|
8
|
+
n.findIndex((r) => r.id === (a == null ? void 0 : a.id))
|
|
9
|
+
), t = (r) => {
|
|
10
|
+
const e = n[r];
|
|
11
|
+
if (!e)
|
|
12
|
+
return;
|
|
13
|
+
l(e.id);
|
|
14
|
+
const o = document.getElementById(`tab-${e.id}`);
|
|
15
|
+
o == null || o.focus();
|
|
16
|
+
};
|
|
17
|
+
return /* @__PURE__ */ v("div", { className: "grid gap-3", children: [
|
|
18
|
+
/* @__PURE__ */ i(
|
|
19
|
+
"div",
|
|
20
|
+
{
|
|
21
|
+
"aria-orientation": "horizontal",
|
|
22
|
+
className: "inline-flex flex-wrap gap-1 rounded-[var(--border-radius-md)] bg-[var(--bg-tertiary)] p-1",
|
|
23
|
+
role: "tablist",
|
|
24
|
+
children: n.map((r, e) => /* @__PURE__ */ i(
|
|
25
|
+
"button",
|
|
26
|
+
{
|
|
27
|
+
"aria-controls": `panel-${r.id}`,
|
|
28
|
+
"aria-selected": d === r.id,
|
|
29
|
+
className: f(
|
|
30
|
+
"rounded-[var(--border-radius-sm)] px-3 py-1.5 text-sm transition",
|
|
31
|
+
d === r.id ? "bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-[var(--shadow-xs)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
|
|
32
|
+
),
|
|
33
|
+
id: `tab-${r.id}`,
|
|
34
|
+
onClick: () => l(r.id),
|
|
35
|
+
onKeyDown: (o) => {
|
|
36
|
+
o.key === "ArrowRight" ? (o.preventDefault(), t((e + 1) % n.length)) : o.key === "ArrowLeft" ? (o.preventDefault(), t((e - 1 + n.length) % n.length)) : o.key === "Home" ? (o.preventDefault(), t(0)) : o.key === "End" && (o.preventDefault(), t(n.length - 1));
|
|
37
|
+
},
|
|
38
|
+
role: "tab",
|
|
39
|
+
tabIndex: e === c ? 0 : -1,
|
|
40
|
+
type: "button",
|
|
41
|
+
children: r.label
|
|
42
|
+
},
|
|
43
|
+
r.id
|
|
44
|
+
))
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ i(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
"aria-labelledby": `tab-${(a == null ? void 0 : a.id) ?? ""}`,
|
|
51
|
+
className: "rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4",
|
|
52
|
+
id: `panel-${(a == null ? void 0 : a.id) ?? ""}`,
|
|
53
|
+
role: "tabpanel",
|
|
54
|
+
children: a == null ? void 0 : a.content
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
] });
|
|
58
|
+
};
|
|
59
|
+
export {
|
|
60
|
+
x as Tabs
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=Tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TabItem {\n content: React.ReactNode;\n id: string;\n label: string;\n}\n\nexport interface TabsProps {\n defaultTabId?: string;\n items: TabItem[];\n}\n\nexport const Tabs: React.FC<TabsProps> = ({ items, defaultTabId }) => {\n const [activeTab, setActiveTab] = useState(defaultTabId ?? items[0]?.id);\n const selected = items.find((item) => item.id === activeTab) ?? items[0];\n const selectedIndex = Math.max(\n 0,\n items.findIndex((item) => item.id === selected?.id),\n );\n\n const moveFocus = (nextIndex: number) => {\n const item = items[nextIndex];\n if (!item) {\n return;\n }\n setActiveTab(item.id);\n const tab = document.getElementById(`tab-${item.id}`);\n tab?.focus();\n };\n\n return (\n <div className=\"grid gap-3\">\n <div\n aria-orientation=\"horizontal\"\n className=\"inline-flex flex-wrap gap-1 rounded-[var(--border-radius-md)] bg-[var(--bg-tertiary)] p-1\"\n role=\"tablist\"\n >\n {items.map((item, index) => (\n <button\n aria-controls={`panel-${item.id}`}\n aria-selected={activeTab === item.id}\n className={cn(\n 'rounded-[var(--border-radius-sm)] px-3 py-1.5 text-sm transition',\n activeTab === item.id\n ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-[var(--shadow-xs)]'\n : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',\n )}\n id={`tab-${item.id}`}\n key={item.id}\n onClick={() => setActiveTab(item.id)}\n onKeyDown={(e) => {\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n moveFocus((index + 1) % items.length);\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n moveFocus((index - 1 + items.length) % items.length);\n } else if (e.key === 'Home') {\n e.preventDefault();\n moveFocus(0);\n } else if (e.key === 'End') {\n e.preventDefault();\n moveFocus(items.length - 1);\n }\n }}\n role=\"tab\"\n tabIndex={index === selectedIndex ? 0 : -1}\n type=\"button\"\n >\n {item.label}\n </button>\n ))}\n </div>\n <div\n aria-labelledby={`tab-${selected?.id ?? ''}`}\n className=\"rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4\"\n id={`panel-${selected?.id ?? ''}`}\n role=\"tabpanel\"\n >\n {selected?.content}\n </div>\n </div>\n );\n};\n"],"names":["Tabs","items","defaultTabId","activeTab","setActiveTab","useState","_a","selected","item","selectedIndex","moveFocus","nextIndex","tab","jsxs","jsx","index","cn","e"],"mappings":";;;AAeO,MAAMA,IAA4B,CAAC,EAAE,OAAAC,GAAO,cAAAC,QAAmB;;AACpE,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASH,OAAgBI,IAAAL,EAAM,CAAC,MAAP,gBAAAK,EAAU,GAAE,GACjEC,IAAWN,EAAM,KAAK,CAACO,MAASA,EAAK,OAAOL,CAAS,KAAKF,EAAM,CAAC,GACjEQ,IAAgB,KAAK;AAAA,IACzB;AAAA,IACAR,EAAM,UAAU,CAACO,MAASA,EAAK,QAAOD,KAAA,gBAAAA,EAAU,GAAE;AAAA,EAAA,GAG9CG,IAAY,CAACC,MAAsB;AACvC,UAAMH,IAAOP,EAAMU,CAAS;AAC5B,QAAI,CAACH;AACH;AAEF,IAAAJ,EAAaI,EAAK,EAAE;AACpB,UAAMI,IAAM,SAAS,eAAe,OAAOJ,EAAK,EAAE,EAAE;AACpD,IAAAI,KAAA,QAAAA,EAAK;AAAA,EACP;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,oBAAiB;AAAA,QACjB,WAAU;AAAA,QACV,MAAK;AAAA,QAEJ,UAAAb,EAAM,IAAI,CAACO,GAAMO,MAChB,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,iBAAe,SAASN,EAAK,EAAE;AAAA,YAC/B,iBAAeL,MAAcK,EAAK;AAAA,YAClC,WAAWQ;AAAA,cACT;AAAA,cACAb,MAAcK,EAAK,KACf,kFACA;AAAA,YAAA;AAAA,YAEN,IAAI,OAAOA,EAAK,EAAE;AAAA,YAElB,SAAS,MAAMJ,EAAaI,EAAK,EAAE;AAAA,YACnC,WAAW,CAACS,MAAM;AAChB,cAAIA,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACFP,GAAWK,IAAQ,KAAKd,EAAM,MAAM,KAC3BgB,EAAE,QAAQ,eACnBA,EAAE,eAAA,GACFP,GAAWK,IAAQ,IAAId,EAAM,UAAUA,EAAM,MAAM,KAC1CgB,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACFP,EAAU,CAAC,KACFO,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACFP,EAAUT,EAAM,SAAS,CAAC;AAAA,YAE9B;AAAA,YACA,MAAK;AAAA,YACL,UAAUc,MAAUN,IAAgB,IAAI;AAAA,YACxC,MAAK;AAAA,YAEJ,UAAAD,EAAK;AAAA,UAAA;AAAA,UArBDA,EAAK;AAAA,QAAA,CAuBb;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB,QAAOP,KAAA,gBAAAA,EAAU,OAAM,EAAE;AAAA,QAC1C,WAAU;AAAA,QACV,IAAI,UAASA,KAAA,gBAAAA,EAAU,OAAM,EAAE;AAAA,QAC/B,MAAK;AAAA,QAEJ,UAAAA,KAAA,gBAAAA,EAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GACF;AAEJ;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Tabs } from './Tabs';
|
|
3
|
+
declare const meta: Meta<typeof Tabs>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Tabs>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const DefaultTab: Story;
|
|
8
|
+
export declare const ManyTabs: Story;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsxs as o, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { cn as s } from "../../utils/cn.js";
|
|
3
|
+
const l = ({ className: e, children: t, onRemove: r, ...a }) => /* @__PURE__ */ o(
|
|
4
|
+
"span",
|
|
5
|
+
{
|
|
6
|
+
className: s(
|
|
7
|
+
"inline-flex items-center gap-1 rounded-[var(--border-radius-sm)] border border-[var(--border-color)] bg-[var(--bg-secondary)] px-2.5 py-1 text-xs text-[var(--text-secondary)]",
|
|
8
|
+
e
|
|
9
|
+
),
|
|
10
|
+
...a,
|
|
11
|
+
children: [
|
|
12
|
+
t,
|
|
13
|
+
r && /* @__PURE__ */ n(
|
|
14
|
+
"button",
|
|
15
|
+
{
|
|
16
|
+
"aria-label": "Remover tag",
|
|
17
|
+
className: "inline-flex h-4 w-4 items-center justify-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
|
|
18
|
+
onClick: r,
|
|
19
|
+
type: "button",
|
|
20
|
+
children: "×"
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
export {
|
|
27
|
+
l as Tag
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=Tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {\n onRemove?: () => void;\n}\n\nexport const Tag: React.FC<TagProps> = ({ className, children, onRemove, ...props }) => {\n return (\n <span\n className={cn(\n 'inline-flex items-center gap-1 rounded-[var(--border-radius-sm)] border border-[var(--border-color)] bg-[var(--bg-secondary)] px-2.5 py-1 text-xs text-[var(--text-secondary)]',\n className,\n )}\n {...props}\n >\n {children}\n {onRemove && (\n <button\n aria-label=\"Remover tag\"\n className=\"inline-flex h-4 w-4 items-center justify-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\"\n onClick={onRemove}\n type=\"button\"\n >\n ×\n </button>\n )}\n </span>\n );\n};\n"],"names":["Tag","className","children","onRemove","props","jsxs","cn","jsx"],"mappings":";;AAOO,MAAMA,IAA0B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,GAAGC,QAExE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,IAEH,UAAA;AAAA,MAAAF;AAAA,MACAC,KACC,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAW;AAAA,UACX,WAAU;AAAA,UACV,SAASJ;AAAA,UACT,MAAK;AAAA,UACN,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAAA;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
3
|
+
error?: string;
|
|
4
|
+
helperText?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import m from "react";
|
|
3
|
+
import { cn as l } from "../../utils/cn.js";
|
|
4
|
+
const v = m.forwardRef(
|
|
5
|
+
({ label: t, helperText: o, error: a, className: d, id: s, ...i }, n) => {
|
|
6
|
+
const r = s || `textarea-${Math.random().toString(36).slice(2, 9)}`;
|
|
7
|
+
return /* @__PURE__ */ c("div", { className: "grid gap-1", children: [
|
|
8
|
+
t && /* @__PURE__ */ e(
|
|
9
|
+
"label",
|
|
10
|
+
{
|
|
11
|
+
className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
|
|
12
|
+
htmlFor: r,
|
|
13
|
+
children: t
|
|
14
|
+
}
|
|
15
|
+
),
|
|
16
|
+
/* @__PURE__ */ e(
|
|
17
|
+
"textarea",
|
|
18
|
+
{
|
|
19
|
+
ref: n,
|
|
20
|
+
"aria-describedby": a ? `${r}-error` : o ? `${r}-helper` : void 0,
|
|
21
|
+
"aria-invalid": a ? !0 : void 0,
|
|
22
|
+
className: l(
|
|
23
|
+
"min-h-24 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] 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",
|
|
24
|
+
a && "border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]",
|
|
25
|
+
d
|
|
26
|
+
),
|
|
27
|
+
id: r,
|
|
28
|
+
...i
|
|
29
|
+
}
|
|
30
|
+
),
|
|
31
|
+
a ? /* @__PURE__ */ e("span", { className: "text-xs text-[var(--md-error)]", id: `${r}-error`, role: "alert", children: a }) : o && /* @__PURE__ */ e(
|
|
32
|
+
"span",
|
|
33
|
+
{
|
|
34
|
+
className: "text-xs text-[var(--md-on-surface-variant)]",
|
|
35
|
+
id: `${r}-helper`,
|
|
36
|
+
children: o
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
] });
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
v.displayName = "Textarea";
|
|
43
|
+
export {
|
|
44
|
+
v as Textarea
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=Textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n error?: string;\n helperText?: string;\n label?: string;\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ label, helperText, error, className, id, ...props }, ref) => {\n const textareaId = id || `textarea-${Math.random().toString(36).slice(2, 9)}`;\n\n return (\n <div className=\"grid gap-1\">\n {label && (\n <label\n className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n htmlFor={textareaId}\n >\n {label}\n </label>\n )}\n <textarea\n ref={ref}\n aria-describedby={\n error ? `${textareaId}-error` : helperText ? `${textareaId}-helper` : undefined\n }\n aria-invalid={error ? true : undefined}\n className={cn(\n 'min-h-24 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] 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 &&\n 'border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]',\n className,\n )}\n id={textareaId}\n {...props}\n />\n {error ? (\n <span className=\"text-xs text-[var(--md-error)]\" id={`${textareaId}-error`} role=\"alert\">\n {error}\n </span>\n ) : (\n helperText && (\n <span\n className=\"text-xs text-[var(--md-on-surface-variant)]\"\n id={`${textareaId}-helper`}\n >\n {helperText}\n </span>\n )\n )}\n </div>\n );\n },\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":["Textarea","React","label","helperText","error","className","id","props","ref","textareaId","jsxs","jsx","cn"],"mappings":";;;AASO,MAAMA,IAAWC,EAAM;AAAA,EAC5B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AAC9D,UAAMC,IAAaH,KAAM,YAAY,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAE3E,WACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,MAAAR,KACC,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASF;AAAA,UAER,UAAAP;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAH;AAAA,UACA,oBACEJ,IAAQ,GAAGK,CAAU,WAAWN,IAAa,GAAGM,CAAU,YAAY;AAAA,UAExE,gBAAcL,IAAQ,KAAO;AAAA,UAC7B,WAAWQ;AAAA,YACT;AAAA,YACAR,KACE;AAAA,YACFC;AAAA,UAAA;AAAA,UAEF,IAAII;AAAA,UACH,GAAGF;AAAA,QAAA;AAAA,MAAA;AAAA,MAELH,IACC,gBAAAO,EAAC,QAAA,EAAK,WAAU,kCAAiC,IAAI,GAAGF,CAAU,UAAU,MAAK,SAC9E,UAAAL,EAAA,CACH,IAEAD,KACE,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGF,CAAU;AAAA,UAEhB,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAGN;AAAA,EAEJ;AACF;AAEAH,EAAS,cAAc;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Textarea } from './Textarea';
|
|
3
|
+
declare const meta: Meta<typeof Textarea>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Textarea>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const States: Story;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
+
const b = ({
|
|
3
|
+
as: t = "h1",
|
|
4
|
+
size: e = "2xl",
|
|
5
|
+
weight: o = "bold",
|
|
6
|
+
align: a = "left",
|
|
7
|
+
gradient: r = !1,
|
|
8
|
+
italic: n = !1,
|
|
9
|
+
children: i,
|
|
10
|
+
className: l = "",
|
|
11
|
+
...s
|
|
12
|
+
}) => {
|
|
13
|
+
const x = t, f = {
|
|
14
|
+
xs: "text-[var(--font-size-sm)]",
|
|
15
|
+
sm: "text-[var(--font-size-base)]",
|
|
16
|
+
md: "text-[var(--font-size-lg)]",
|
|
17
|
+
lg: "text-[var(--font-size-xl)]",
|
|
18
|
+
xl: "text-[var(--font-size-2xl)]",
|
|
19
|
+
"2xl": "text-[var(--font-size-3xl)]",
|
|
20
|
+
"3xl": "text-[var(--font-size-4xl)]",
|
|
21
|
+
"4xl": "text-[3rem]"
|
|
22
|
+
}, g = {
|
|
23
|
+
light: "font-[var(--font-weight-light)]",
|
|
24
|
+
normal: "font-[var(--font-weight-normal)]",
|
|
25
|
+
medium: "font-[var(--font-weight-medium)]",
|
|
26
|
+
semibold: "font-[var(--font-weight-semibold)]",
|
|
27
|
+
bold: "font-[var(--font-weight-bold)]",
|
|
28
|
+
extrabold: "font-extrabold"
|
|
29
|
+
}, m = {
|
|
30
|
+
left: "text-left",
|
|
31
|
+
center: "text-center",
|
|
32
|
+
right: "text-right"
|
|
33
|
+
}, c = r ? "bg-[linear-gradient(135deg,var(--text-primary)_0%,var(--primary-color)_50%,var(--secondary-color)_100%)] bg-clip-text text-transparent" : "", v = [
|
|
34
|
+
"m-0 leading-[var(--line-height-tight)] text-[var(--text-primary)] transition-[var(--transition-colors)]",
|
|
35
|
+
f[e],
|
|
36
|
+
g[o],
|
|
37
|
+
m[a],
|
|
38
|
+
n ? "italic" : "not-italic",
|
|
39
|
+
c,
|
|
40
|
+
l
|
|
41
|
+
].filter(Boolean).join(" ");
|
|
42
|
+
return /* @__PURE__ */ d(x, { className: v, ...s, children: i });
|
|
43
|
+
};
|
|
44
|
+
export {
|
|
45
|
+
b as Title
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=Title.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Title.js","sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n align?: 'left' | 'center' | 'right';\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n children: React.ReactNode;\n gradient?: boolean;\n italic?: boolean;\n size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\n weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';\n}\n\nexport const Title: React.FC<TitleProps> = ({\n as = 'h1',\n size = '2xl',\n weight = 'bold',\n align = 'left',\n gradient = false,\n italic = false,\n children,\n className = '',\n ...props\n}) => {\n const Component = as;\n const sizeClassMap: Record<NonNullable<TitleProps['size']>, string> = {\n xs: 'text-[var(--font-size-sm)]',\n sm: 'text-[var(--font-size-base)]',\n md: 'text-[var(--font-size-lg)]',\n lg: 'text-[var(--font-size-xl)]',\n xl: 'text-[var(--font-size-2xl)]',\n '2xl': 'text-[var(--font-size-3xl)]',\n '3xl': 'text-[var(--font-size-4xl)]',\n '4xl': 'text-[3rem]',\n };\n const weightClassMap: Record<NonNullable<TitleProps['weight']>, string> = {\n light: 'font-[var(--font-weight-light)]',\n normal: 'font-[var(--font-weight-normal)]',\n medium: 'font-[var(--font-weight-medium)]',\n semibold: 'font-[var(--font-weight-semibold)]',\n bold: 'font-[var(--font-weight-bold)]',\n extrabold: 'font-extrabold',\n };\n const alignClassMap: Record<NonNullable<TitleProps['align']>, string> = {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n };\n const gradientClass = gradient\n ? 'bg-[linear-gradient(135deg,var(--text-primary)_0%,var(--primary-color)_50%,var(--secondary-color)_100%)] bg-clip-text text-transparent'\n : '';\n const combinedClass = [\n 'm-0 leading-[var(--line-height-tight)] text-[var(--text-primary)] transition-[var(--transition-colors)]',\n sizeClassMap[size],\n weightClassMap[weight],\n alignClassMap[align],\n italic ? 'italic' : 'not-italic',\n gradientClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <Component className={combinedClass} {...props}>\n {children}\n </Component>\n );\n};\n"],"names":["Title","as","size","weight","align","gradient","italic","children","className","props","Component","sizeClassMap","weightClassMap","alignClassMap","gradientClass","combinedClass"],"mappings":";AAYO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,GACZU,IAAgE;AAAA,IACpE,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EAAA,GAEHC,IAAoE;AAAA,IACxE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,EAAA,GAEPC,IAAkE;AAAA,IACtE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,GAEHC,IAAgBT,IAClB,2IACA,IACEU,IAAgB;AAAA,IACpB;AAAA,IACAJ,EAAaT,CAAI;AAAA,IACjBU,EAAeT,CAAM;AAAA,IACrBU,EAAcT,CAAK;AAAA,IACnBE,IAAS,WAAW;AAAA,IACpBQ;AAAA,IACAN;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACGE,GAAA,EAAU,WAAWK,GAAgB,GAAGN,GACtC,UAAAF,GACH;AAEJ;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
3
|
+
id?: string;
|
|
4
|
+
description?: React.ReactNode;
|
|
5
|
+
onDismiss?: () => void;
|
|
6
|
+
title: React.ReactNode;
|
|
7
|
+
tone?: 'info' | 'success' | 'warning' | 'error';
|
|
8
|
+
}
|
|
9
|
+
export declare const Toast: React.FC<ToastProps>;
|
|
10
|
+
interface ToastContextValue {
|
|
11
|
+
dismissToast: (id: string) => void;
|
|
12
|
+
pushToast: (toast: Omit<ToastProps, 'id'> & {
|
|
13
|
+
id?: string;
|
|
14
|
+
}) => void;
|
|
15
|
+
toasts: Array<ToastProps & {
|
|
16
|
+
id: string;
|
|
17
|
+
}>;
|
|
18
|
+
}
|
|
19
|
+
export interface ToastProviderProps {
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
durationMs?: number;
|
|
22
|
+
}
|
|
23
|
+
export declare const ToastProvider: React.FC<ToastProviderProps>;
|
|
24
|
+
export declare const useToast: () => ToastContextValue;
|
|
25
|
+
export declare const ToastViewport: React.FC;
|
|
26
|
+
export {};
|