@oneplatformdev/ui 0.1.99-beta.6 → 0.1.99-beta.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Accordion/Accordion.d.ts +1 -1
- package/Accordion/Accordion.d.ts.map +1 -1
- package/Accordion/Accordion.js +48 -26
- package/Accordion/Accordion.js.map +1 -1
- package/AlertDialog/AlertDialog.stories.js +3 -2
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.d.ts.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +26 -24
- package/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/Badge/badgeVariants.d.ts +1 -1
- package/Button/Button.d.ts +7 -1
- package/Button/Button.d.ts.map +1 -1
- package/Button/Button.js +49 -51
- package/Button/Button.js.map +1 -1
- package/Button/Button.types.d.ts +16 -0
- package/Button/Button.types.d.ts.map +1 -1
- package/Button/Button.utils.d.ts +3 -0
- package/Button/Button.utils.d.ts.map +1 -0
- package/Button/Button.utils.js +14 -0
- package/Button/Button.utils.js.map +1 -0
- package/Button/ButtonCounterBadge.d.ts +7 -0
- package/Button/ButtonCounterBadge.d.ts.map +1 -0
- package/Button/ButtonCounterBadge.js +20 -0
- package/Button/ButtonCounterBadge.js.map +1 -0
- package/Button/buttonVariants.d.ts +11 -20
- package/Button/buttonVariants.d.ts.map +1 -1
- package/Button/buttonVariants.js +76 -12
- package/Button/buttonVariants.js.map +1 -1
- package/Button/index.d.ts +1 -0
- package/Button/index.d.ts.map +1 -1
- package/Button/index.js +6 -3
- package/Button/index.js.map +1 -1
- package/ButtonIcon/ButtonIcon.d.ts +6 -1
- package/ButtonIcon/ButtonIcon.d.ts.map +1 -1
- package/ButtonIcon/ButtonIcon.js +69 -51
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +94 -65
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts.map +1 -1
- package/ButtonIcon/buttonIconVariants.js +7 -6
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +662 -0
- package/Calendar/Calendar.js +5 -4
- package/Calendar/Calendar.js.map +1 -1
- package/Combobox/Combobox.d.ts +2 -1
- package/Combobox/Combobox.d.ts.map +1 -1
- package/Combobox/Combobox.js +124 -122
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js +208 -0
- package/Combobox/Combobox.stories.js.map +1 -0
- package/Combobox/Combobox.types.d.ts +2 -0
- package/Combobox/Combobox.types.d.ts.map +1 -1
- package/Combobox/ComboboxOptions.d.ts.map +1 -1
- package/Combobox/ComboboxOptions.js +42 -42
- package/Combobox/ComboboxOptions.js.map +1 -1
- package/DataTable/DataTable.js +16 -15
- package/DataTable/DataTable.js.map +1 -1
- package/Dialog/Dialog.d.ts.map +1 -1
- package/Dialog/Dialog.js +35 -24
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.types.d.ts +4 -0
- package/Dialog/Dialog.types.d.ts.map +1 -0
- package/Dialog/Dialog.types.js +2 -0
- package/Dialog/Dialog.types.js.map +1 -0
- package/Dialog/index.d.ts +1 -0
- package/Dialog/index.d.ts.map +1 -1
- package/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/DropdownMenu/DropdownMenu.js +33 -20
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Form/Form.d.ts.map +1 -1
- package/Form/Form.js.map +1 -1
- package/Form/FormRenderControl.d.ts +1 -1
- package/Form/FormRenderControl.d.ts.map +1 -1
- package/Form/FormRenderControl.js +54 -14
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/FormRenderControl.types.d.ts +4 -1
- package/Form/FormRenderControl.types.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.js +15 -13
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormDatePicker/FormDatePicker.d.ts.map +1 -1
- package/FormDatePicker/FormDatePicker.js +18 -16
- package/FormDatePicker/FormDatePicker.js.map +1 -1
- package/FormDropzone/FormDropzone.d.ts.map +1 -1
- package/FormDropzone/FormDropzone.js +11 -9
- package/FormDropzone/FormDropzone.js.map +1 -1
- package/FormInput/FormInput.d.ts.map +1 -1
- package/FormInput/FormInput.js +27 -25
- package/FormInput/FormInput.js.map +1 -1
- package/FormSelect/FormSelect.d.ts.map +1 -1
- package/FormSelect/FormSelect.js +21 -17
- package/FormSelect/FormSelect.js.map +1 -1
- package/FormTextarea/FormTextarea.d.ts.map +1 -1
- package/FormTextarea/FormTextarea.js +15 -13
- package/FormTextarea/FormTextarea.js.map +1 -1
- package/InfoBlock/InfoBlock.d.ts +7 -0
- package/InfoBlock/InfoBlock.d.ts.map +1 -0
- package/InfoBlock/InfoBlock.js +27 -0
- package/InfoBlock/InfoBlock.js.map +1 -0
- package/InfoBlock/InfoBlock.stories.js +14 -0
- package/InfoBlock/InfoBlock.stories.js.map +1 -0
- package/InfoBlock/InfoBlock.types.d.ts +8 -0
- package/InfoBlock/InfoBlock.types.d.ts.map +1 -0
- package/InfoBlock/InfoBlock.types.js +2 -0
- package/InfoBlock/InfoBlock.types.js.map +1 -0
- package/InfoBlock/index.d.ts +3 -0
- package/InfoBlock/index.d.ts.map +1 -0
- package/InfoBlock/index.js +5 -0
- package/InfoBlock/index.js.map +1 -0
- package/InfoBlock/infoBlockVariants.d.ts +6 -0
- package/InfoBlock/infoBlockVariants.d.ts.map +1 -0
- package/InfoBlock/infoBlockVariants.js +26 -0
- package/InfoBlock/infoBlockVariants.js.map +1 -0
- package/Input/Input.js +1 -1
- package/Input/Input.js.map +1 -1
- package/Input/inputVariants.d.ts.map +1 -1
- package/Input/inputVariants.js +5 -4
- package/Input/inputVariants.js.map +1 -1
- package/LoadedIcon/LoadedIcon.d.ts.map +1 -1
- package/LoadedIcon/LoadedIcon.js +3 -1
- package/LoadedIcon/LoadedIcon.js.map +1 -1
- package/LoadingMask/LoadingMask.d.ts +1 -2
- package/LoadingMask/LoadingMask.d.ts.map +1 -1
- package/LoadingMask/LoadingMask.js +8 -8
- package/LoadingMask/LoadingMask.js.map +1 -1
- package/LoadingMask/LoadingMask.types.d.ts +1 -0
- package/LoadingMask/LoadingMask.types.d.ts.map +1 -1
- package/Resizable/Resizable.d.ts +5 -20
- package/Resizable/Resizable.d.ts.map +1 -1
- package/Resizable/Resizable.js +48 -31
- package/Resizable/Resizable.js.map +1 -1
- package/Resizable/Resizable.stories.js +140 -0
- package/Resizable/Resizable.stories.js.map +1 -0
- package/Search/Search.d.ts.map +1 -1
- package/Search/Search.js +41 -32
- package/Search/Search.js.map +1 -1
- package/Search/Search.stories.js +17 -0
- package/Search/Search.stories.js.map +1 -0
- package/TablePagination/TablePagination.js +9 -8
- package/TablePagination/TablePagination.js.map +1 -1
- package/Textarea/Textarea.d.ts.map +1 -1
- package/Textarea/Textarea.js +50 -45
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.stories.js +12 -0
- package/Textarea/Textarea.stories.js.map +1 -0
- package/Textarea/Textarea.types.d.ts +3 -1
- package/Textarea/Textarea.types.d.ts.map +1 -1
- package/Textarea/useAutosizeTextArea.d.ts +1 -1
- package/Textarea/useAutosizeTextArea.d.ts.map +1 -1
- package/Textarea/useAutosizeTextArea.js.map +1 -1
- package/Tooltip/Tooltip.d.ts.map +1 -1
- package/Tooltip/Tooltip.js +41 -29
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/Tooltip.types.d.ts +1 -0
- package/Tooltip/Tooltip.types.d.ts.map +1 -1
- package/Tooltip/tooltipVariants.d.ts +4 -0
- package/Tooltip/tooltipVariants.d.ts.map +1 -0
- package/Tooltip/tooltipVariants.js +23 -0
- package/Tooltip/tooltipVariants.js.map +1 -0
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +335 -330
- package/index.js.map +1 -1
- package/package.json +4 -4
package/Accordion/Accordion.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
3
|
-
declare function Accordion(
|
|
3
|
+
declare function Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare function AccordionTrigger({ className, children, showChevron, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
|
|
6
6
|
showChevron?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,iBAAS,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,iBAAS,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAe7E;AAED,iBAAS,aAAa,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAY7E;AAED,iBAAS,gBAAgB,CAAC,EACE,SAAS,EACT,QAAQ,EACR,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,2CAsB/G;AAED,iBAAS,gBAAgB,CAAC,EACE,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAUnF;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
|
package/Accordion/Accordion.js
CHANGED
|
@@ -1,50 +1,72 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
1
|
+
import { jsx as e, jsxs as c } from "react/jsx-runtime";
|
|
2
2
|
import * as n from "@radix-ui/react-accordion";
|
|
3
|
-
import {
|
|
3
|
+
import { ChevronRightIcon as s } from "lucide-react";
|
|
4
4
|
import { cn as i } from "@oneplatformdev/utils";
|
|
5
|
-
function u({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
function u(o) {
|
|
6
|
+
const {
|
|
7
|
+
className: t,
|
|
8
|
+
...r
|
|
9
|
+
} = o;
|
|
10
|
+
return /* @__PURE__ */ e(
|
|
11
|
+
n.Root,
|
|
12
|
+
{
|
|
13
|
+
"data-slot": "accordion",
|
|
14
|
+
className: i(
|
|
15
|
+
"group group/accordion",
|
|
16
|
+
t
|
|
17
|
+
),
|
|
18
|
+
...r
|
|
19
|
+
}
|
|
20
|
+
);
|
|
9
21
|
}
|
|
10
|
-
function
|
|
11
|
-
className:
|
|
12
|
-
...
|
|
22
|
+
function p({
|
|
23
|
+
className: o,
|
|
24
|
+
...t
|
|
13
25
|
}) {
|
|
14
26
|
return /* @__PURE__ */ e(
|
|
15
27
|
n.Item,
|
|
16
28
|
{
|
|
17
29
|
"data-slot": "accordion-item",
|
|
18
|
-
className: i(
|
|
19
|
-
|
|
30
|
+
className: i(
|
|
31
|
+
"group group/accordion-item",
|
|
32
|
+
"border-b last:border-b-0",
|
|
33
|
+
o
|
|
34
|
+
),
|
|
35
|
+
...t
|
|
20
36
|
}
|
|
21
37
|
);
|
|
22
38
|
}
|
|
23
|
-
function
|
|
24
|
-
className:
|
|
25
|
-
children:
|
|
39
|
+
function g({
|
|
40
|
+
className: o,
|
|
41
|
+
children: t,
|
|
26
42
|
showChevron: r = !0,
|
|
27
43
|
...a
|
|
28
44
|
}) {
|
|
29
|
-
return /* @__PURE__ */ e(n.Header, { className: "flex", children: /* @__PURE__ */
|
|
45
|
+
return /* @__PURE__ */ e(n.Header, { className: "flex", children: /* @__PURE__ */ c(
|
|
30
46
|
n.Trigger,
|
|
31
47
|
{
|
|
32
48
|
"data-slot": "accordion-trigger",
|
|
33
49
|
className: i(
|
|
34
|
-
"
|
|
35
|
-
|
|
50
|
+
"group group/accordion-trigger",
|
|
51
|
+
"flex flex-1 items-start justify-between gap-4 rounded-md py-4",
|
|
52
|
+
"text-left text-sm font-medium",
|
|
53
|
+
"transition-all outline-none",
|
|
54
|
+
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
55
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
56
|
+
"[&[data-state=open]>svg]:rotate-90",
|
|
57
|
+
o
|
|
36
58
|
),
|
|
37
59
|
...a,
|
|
38
60
|
children: [
|
|
39
|
-
|
|
40
|
-
|
|
61
|
+
r && /* @__PURE__ */ e(s, { "data-slot": "accordion-chevrone", className: "text-[#06080D] pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" }),
|
|
62
|
+
t
|
|
41
63
|
]
|
|
42
64
|
}
|
|
43
65
|
) });
|
|
44
66
|
}
|
|
45
|
-
function
|
|
46
|
-
className:
|
|
47
|
-
children:
|
|
67
|
+
function f({
|
|
68
|
+
className: o,
|
|
69
|
+
children: t,
|
|
48
70
|
...r
|
|
49
71
|
}) {
|
|
50
72
|
return /* @__PURE__ */ e(
|
|
@@ -53,14 +75,14 @@ function g({
|
|
|
53
75
|
"data-slot": "accordion-content",
|
|
54
76
|
className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
|
|
55
77
|
...r,
|
|
56
|
-
children: /* @__PURE__ */ e("div", { className: i("pt-0 pb-4",
|
|
78
|
+
children: /* @__PURE__ */ e("div", { className: i("group group/accordion-content", "pt-0 pb-4", o), children: t })
|
|
57
79
|
}
|
|
58
80
|
);
|
|
59
81
|
}
|
|
60
82
|
export {
|
|
61
83
|
u as Accordion,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
84
|
+
f as AccordionContent,
|
|
85
|
+
p as AccordionItem,
|
|
86
|
+
g as AccordionTrigger
|
|
65
87
|
};
|
|
66
88
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport {
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n const {\n className,\n ...rest\n } = props;\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn(\n 'group group/accordion',\n className\n )}\n {...rest}\n />\n )\n}\n\nfunction AccordionItem({\n className,\n ...props\n }: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn(\n 'group group/accordion-item',\n \"border-b last:border-b-0\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n showChevron = true,\n ...props\n }: React.ComponentProps<typeof AccordionPrimitive.Trigger> & { showChevron?: boolean }) {\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n data-slot=\"accordion-trigger\"\n className={cn(\n 'group group/accordion-trigger',\n 'flex flex-1 items-start justify-between gap-4 rounded-md py-4',\n 'text-left text-sm font-medium',\n 'transition-all outline-none',\n \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n 'disabled:pointer-events-none disabled:opacity-50',\n '[&[data-state=open]>svg]:rotate-90',\n className\n )}\n {...props}\n >\n {showChevron && <ChevronRightIcon data-slot=\"accordion-chevrone\" className=\"text-[#06080D] pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />}\n {children}\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n }: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n return (\n <AccordionPrimitive.Content\n data-slot=\"accordion-content\"\n className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n {...props}\n >\n <div className={cn('group group/accordion-content', \"pt-0 pb-4\", className)}>{children}</div>\n </AccordionPrimitive.Content>\n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"],"names":["Accordion","props","className","rest","jsx","AccordionPrimitive","cn","AccordionItem","AccordionTrigger","children","showChevron","jsxs","ChevronRightIcon","AccordionContent"],"mappings":";;;;AAQA,SAASA,EAAUC,GAA6D;AAC9E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDF;AACJ,SACE,gBAAAG;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAc;AAAA,EACE,WAAAL;AAAA,EACA,GAAGD;AACL,GAAyD;AAC9E,SACE,gBAAAG;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASO,EAAiB;AAAA,EACE,WAAAN;AAAA,EACA,UAAAO;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGT;AACL,GAAwF;AAChH,SACE,gBAAAG,EAACC,EAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA,gBAAAM;AAAA,IAACN,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGD;AAAA,MAEH,UAAA;AAAA,QAAAS,KAAe,gBAAAN,EAACQ,GAAA,EAAiB,aAAU,sBAAqB,WAAU,wGAAuG;AAAA,QACjLH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAASI,EAAiB;AAAA,EACE,WAAAX;AAAA,EACA,UAAAO;AAAA,EACA,GAAGR;AACL,GAA4D;AACpF,SACE,gBAAAG;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAGJ;AAAA,MAEJ,UAAA,gBAAAG,EAAC,SAAI,WAAWE,EAAG,iCAAiC,aAAaJ,CAAS,GAAI,UAAAO,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG7F;"}
|
|
@@ -2,7 +2,8 @@ import { jsx as t } from "react/jsx-runtime";
|
|
|
2
2
|
import { AlertDialog as n } from "./AlertDialog.js";
|
|
3
3
|
import { Button as l } from "../Button/Button.js";
|
|
4
4
|
import "../Button/buttonVariants.js";
|
|
5
|
-
|
|
5
|
+
import "react";
|
|
6
|
+
const c = (e) => /* @__PURE__ */ t(n, { ...e }), r = ["confirm", "alert", "destructive"], v = {
|
|
6
7
|
title: "AlertDialog",
|
|
7
8
|
component: n,
|
|
8
9
|
render: c,
|
|
@@ -117,6 +118,6 @@ export {
|
|
|
117
118
|
a as FullControl,
|
|
118
119
|
s as Playground,
|
|
119
120
|
i as Variants,
|
|
120
|
-
|
|
121
|
+
v as default
|
|
121
122
|
};
|
|
122
123
|
//# sourceMappingURL=AlertDialog.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.stories.js","sources":["../../src/AlertDialog/AlertDialog.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { AlertDialog } from './AlertDialog';\nimport { AlertDialogProps } from './AlertDialog.types';\nimport React from 'react';\nimport { Button } from '../Button';\n\nconst Template = (props: AlertDialogProps) => <AlertDialog {...props} />;\n\nconst variants = ['confirm', 'alert', 'destructive'] as const;\n\nconst meta = {\n title: 'AlertDialog',\n component: AlertDialog,\n render: Template,\n argTypes: {\n open: {\n control: {\n type: 'boolean',\n },\n },\n variant: {\n name: 'variant',\n description: 'ButtonIcon variant',\n options: variants,\n control: {\n type: 'inline-radio',\n },\n },\n cancelLabel: {\n control: {\n type: 'text',\n },\n },\n actionLabel: {\n control: {\n type: 'text',\n },\n },\n title: {\n control: {\n type: 'text',\n },\n },\n description: {\n control: {\n type: 'text',\n },\n },\n },\n args: {\n variant: 'alert',\n cancelLabel: 'Cancel',\n actionLabel: 'Action',\n },\n} satisfies Meta<typeof AlertDialog>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Playground = (args: AlertDialogProps) => (\n <AlertDialog\n {...args}\n />\n);\nPlayground.args = {\n trigger: 'Trigger text or ReactNode',\n variant: 'confirm',\n title: 'Dialog title...',\n description: 'Description text...',\n cancelLabel: 'Cancel label',\n actionLabel: 'Action label',\n}\n\nexport const Variants = (args: AlertDialogProps) => (\n <div className='flex gap-3'>\n {variants.map((variant) => (\n <AlertDialog\n key={variant}\n trigger={variant}\n {...args}\n variant={variant}\n />\n ))}\n </div>\n);\nVariants.parameters = {\n controls: {\n include: ['title', 'description', 'cancelLabel', 'actionLabel'],\n },\n};\nVariants.args = {\n title: \"Dialog title\",\n description: \"Description text...\"\n}\n\nexport const FullControl = (args: AlertDialogProps) => (\n <AlertDialog\n onOpenChange={(nextState) => console.log(nextState)}\n trigger={<Button variant=\"outline\">Control Trigger</Button>}\n header={<div>Custom Header</div>}\n footer={[\n <Button key='cancel' variant=\"outline\" onClick={console.log}>On cancel</Button>,\n <Button key='action' variant=\"outline\" onClick={console.log}>On Action</Button>,\n ]}\n {...args}\n />\n);\nFullControl.parameters = {\n controls: {\n include: ['open'],\n },\n};\nFullControl.args = {\n open: false,\n}\n\n\nexport const FullContent = (args: AlertDialogProps) => (\n <AlertDialog\n trigger={<Button variant=\"outline\">Full Content Trigger</Button>}\n {...args}\n >\n Full Content...\n </AlertDialog>\n);\nFullContent.parameters = {\n controls: {\n include: [],\n },\n};\n"],"names":["Template","props","jsx","AlertDialog","variants","meta","Playground","args","Variants","variant","FullControl","nextState","Button","FullContent"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AlertDialog.stories.js","sources":["../../src/AlertDialog/AlertDialog.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { AlertDialog } from './AlertDialog';\nimport { AlertDialogProps } from './AlertDialog.types';\nimport React from 'react';\nimport { Button } from '../Button';\n\nconst Template = (props: AlertDialogProps) => <AlertDialog {...props} />;\n\nconst variants = ['confirm', 'alert', 'destructive'] as const;\n\nconst meta = {\n title: 'AlertDialog',\n component: AlertDialog,\n render: Template,\n argTypes: {\n open: {\n control: {\n type: 'boolean',\n },\n },\n variant: {\n name: 'variant',\n description: 'ButtonIcon variant',\n options: variants,\n control: {\n type: 'inline-radio',\n },\n },\n cancelLabel: {\n control: {\n type: 'text',\n },\n },\n actionLabel: {\n control: {\n type: 'text',\n },\n },\n title: {\n control: {\n type: 'text',\n },\n },\n description: {\n control: {\n type: 'text',\n },\n },\n },\n args: {\n variant: 'alert',\n cancelLabel: 'Cancel',\n actionLabel: 'Action',\n },\n} satisfies Meta<typeof AlertDialog>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Playground = (args: AlertDialogProps) => (\n <AlertDialog\n {...args}\n />\n);\nPlayground.args = {\n trigger: 'Trigger text or ReactNode',\n variant: 'confirm',\n title: 'Dialog title...',\n description: 'Description text...',\n cancelLabel: 'Cancel label',\n actionLabel: 'Action label',\n}\n\nexport const Variants = (args: AlertDialogProps) => (\n <div className='flex gap-3'>\n {variants.map((variant) => (\n <AlertDialog\n key={variant}\n trigger={variant}\n {...args}\n variant={variant}\n />\n ))}\n </div>\n);\nVariants.parameters = {\n controls: {\n include: ['title', 'description', 'cancelLabel', 'actionLabel'],\n },\n};\nVariants.args = {\n title: \"Dialog title\",\n description: \"Description text...\"\n}\n\nexport const FullControl = (args: AlertDialogProps) => (\n <AlertDialog\n onOpenChange={(nextState) => console.log(nextState)}\n trigger={<Button variant=\"outline\">Control Trigger</Button>}\n header={<div>Custom Header</div>}\n footer={[\n <Button key='cancel' variant=\"outline\" onClick={console.log}>On cancel</Button>,\n <Button key='action' variant=\"outline\" onClick={console.log}>On Action</Button>,\n ]}\n {...args}\n />\n);\nFullControl.parameters = {\n controls: {\n include: ['open'],\n },\n};\nFullControl.args = {\n open: false,\n}\n\n\nexport const FullContent = (args: AlertDialogProps) => (\n <AlertDialog\n trigger={<Button variant=\"outline\">Full Content Trigger</Button>}\n {...args}\n >\n Full Content...\n </AlertDialog>\n);\nFullContent.parameters = {\n controls: {\n include: [],\n },\n};\n"],"names":["Template","props","jsx","AlertDialog","variants","meta","Playground","args","Variants","variant","FullControl","nextState","Button","FullContent"],"mappings":";;;;;AAOA,MAAMA,IAAW,CAACC,MAA4B,gBAAAC,EAACC,GAAA,EAAa,GAAGF,GAAO,GAEhEG,IAAW,CAAC,WAAW,SAAS,aAAa,GAE7CC,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWF;AAAA,EACX,QAAQH;AAAA,EACR,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAASI;AAAA,MACT,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,aAAa;AAAA,MACX,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,aAAa;AAAA,MACX,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,aAAa;AAAA,MACX,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAAA,EAEF,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,EAAA;AAEjB,GAKaE,IAAa,CAACC,MACzB,gBAAAL;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGI;AAAA,EAAA;AACN;AAEFD,EAAW,OAAO;AAAA,EAChB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AACf;AAEO,MAAME,IAAW,CAACD,MACvB,gBAAAL,EAAC,OAAA,EAAI,WAAU,cACZ,UAAAE,EAAS,IAAI,CAACK,MACb,gBAAAP;AAAA,EAACC;AAAA,EAAA;AAAA,IAEC,SAASM;AAAA,IACR,GAAGF;AAAA,IACJ,SAAAE;AAAA,EAAA;AAAA,EAHKA;AAIP,CACD,EAAA,CACH;AAEFD,EAAS,aAAa;AAAA,EACpB,UAAU;AAAA,IACR,SAAS,CAAC,SAAS,eAAe,eAAe,aAAa;AAAA,EAAA;AAElE;AACAA,EAAS,OAAO;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AACf;AAEO,MAAME,IAAc,CAACH,MAC1B,gBAAAL;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,cAAc,CAACQ,MAAc,QAAQ,IAAIA,CAAS;AAAA,IAClD,SAAS,gBAAAT,EAACU,GAAA,EAAO,SAAQ,WAAU,UAAA,mBAAe;AAAA,IAClD,QAAQ,gBAAAV,EAAC,OAAA,EAAI,UAAA,gBAAA,CAAa;AAAA,IAC1B,QAAQ;AAAA,MACN,gBAAAA,EAACU,KAAoB,SAAQ,WAAU,SAAS,QAAQ,KAAK,yBAAjD,QAA0D;AAAA,MACtE,gBAAAV,EAACU,KAAoB,SAAQ,WAAU,SAAS,QAAQ,KAAK,yBAAjD,QAA0D;AAAA,IAAA;AAAA,IAEvE,GAAGL;AAAA,EAAA;AACN;AAEFG,EAAY,aAAa;AAAA,EACvB,UAAU;AAAA,IACR,SAAS,CAAC,MAAM;AAAA,EAAA;AAEpB;AACAA,EAAY,OAAO;AAAA,EACjB,MAAM;AACR;AAGO,MAAMG,IAAc,CAACN,MAC1B,gBAAAL;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,SAAS,gBAAAD,EAACU,GAAA,EAAO,SAAQ,WAAU,UAAA,wBAAoB;AAAA,IACtD,GAAGL;AAAA,IACL,UAAA;AAAA,EAAA;AAED;AAEFM,EAAY,aAAa;AAAA,EACvB,UAAU;AAAA,IACR,SAAS,CAAA;AAAA,EAAC;AAEd;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialogRoot.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialogRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAkB,MAAM,WAAW,CAAC;AAExD,iBAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAErF;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAE3F;
|
|
1
|
+
{"version":3,"file":"AlertDialogRoot.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialogRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAkB,MAAM,WAAW,CAAC;AAExD,iBAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAErF;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAE3F;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAEzF;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAY3F;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAmB3F;AAGD,iBAAS,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAS5D;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAY5D;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CASvF;AAED,iBAAS,sBAAsB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAanG;AAGD,iBAAS,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GAAG,WAAW,2CAQvG;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GAAG,WAAW,2CAQvG;AAED,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACrB,CAAC"}
|
|
@@ -3,10 +3,11 @@ import * as r from "@radix-ui/react-alert-dialog";
|
|
|
3
3
|
import { cn as l } from "@oneplatformdev/utils";
|
|
4
4
|
import "../Button/Button.js";
|
|
5
5
|
import { buttonVariants as d } from "../Button/buttonVariants.js";
|
|
6
|
-
|
|
6
|
+
import "react";
|
|
7
|
+
function A(t) {
|
|
7
8
|
return /* @__PURE__ */ o(r.Root, { "data-slot": "alert-dialog", ...t });
|
|
8
9
|
}
|
|
9
|
-
function
|
|
10
|
+
function D(t) {
|
|
10
11
|
return /* @__PURE__ */ o(r.Trigger, { "data-slot": "alert-dialog-trigger", ...t });
|
|
11
12
|
}
|
|
12
13
|
function m(t) {
|
|
@@ -26,7 +27,7 @@ function g(t) {
|
|
|
26
27
|
}
|
|
27
28
|
);
|
|
28
29
|
}
|
|
29
|
-
function
|
|
30
|
+
function h(t) {
|
|
30
31
|
const { className: a, ...e } = t;
|
|
31
32
|
return /* @__PURE__ */ c(m, { children: [
|
|
32
33
|
/* @__PURE__ */ o(g, {}),
|
|
@@ -36,7 +37,7 @@ function D(t) {
|
|
|
36
37
|
"data-slot": "alert-dialog-content",
|
|
37
38
|
className: l(
|
|
38
39
|
"fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
|
|
39
|
-
"grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg gap-4 p-6",
|
|
40
|
+
"grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg min-h-10 gap-4 p-6",
|
|
40
41
|
"bg-background border rounded-lg shadow-lg",
|
|
41
42
|
"overflow-x-hidden break-words",
|
|
42
43
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 duration-200",
|
|
@@ -47,18 +48,18 @@ function D(t) {
|
|
|
47
48
|
)
|
|
48
49
|
] });
|
|
49
50
|
}
|
|
50
|
-
function
|
|
51
|
+
function v(t) {
|
|
51
52
|
const { className: a, ...e } = t;
|
|
52
53
|
return /* @__PURE__ */ o(
|
|
53
54
|
"div",
|
|
54
55
|
{
|
|
55
56
|
"data-slot": "alert-dialog-header",
|
|
56
|
-
className: l("flex flex-col gap-
|
|
57
|
+
className: l("flex flex-col gap-3 text-center sm:text-left", a),
|
|
57
58
|
...e
|
|
58
59
|
}
|
|
59
60
|
);
|
|
60
61
|
}
|
|
61
|
-
function
|
|
62
|
+
function w(t) {
|
|
62
63
|
const { className: a, ...e } = t;
|
|
63
64
|
return /* @__PURE__ */ o(
|
|
64
65
|
"div",
|
|
@@ -72,29 +73,30 @@ function b(t) {
|
|
|
72
73
|
}
|
|
73
74
|
);
|
|
74
75
|
}
|
|
75
|
-
function
|
|
76
|
+
function b(t) {
|
|
76
77
|
const { className: a, ...e } = t;
|
|
77
78
|
return /* @__PURE__ */ o(
|
|
78
79
|
r.Title,
|
|
79
80
|
{
|
|
80
81
|
"data-slot": "alert-dialog-title",
|
|
81
|
-
className: l("text-lg font-semibold break-words", a),
|
|
82
|
+
className: l("text-lg font-semibold break-words min-h-10 flex items-center", a),
|
|
82
83
|
...e
|
|
83
84
|
}
|
|
84
85
|
);
|
|
85
86
|
}
|
|
86
|
-
function
|
|
87
|
-
const { className: a,
|
|
87
|
+
function y(t) {
|
|
88
|
+
const { className: a, children: e, ...s } = t;
|
|
88
89
|
return /* @__PURE__ */ o(
|
|
89
90
|
r.Description,
|
|
90
91
|
{
|
|
92
|
+
...s,
|
|
93
|
+
asChild: !0,
|
|
91
94
|
"data-slot": "alert-dialog-description",
|
|
92
|
-
className: l("text-muted-foreground text-sm whitespace-pre-wrap break-words", a),
|
|
93
|
-
...e
|
|
95
|
+
children: /* @__PURE__ */ o("div", { className: l("text-muted-foreground text-sm whitespace-pre-wrap break-words", a), children: e })
|
|
94
96
|
}
|
|
95
97
|
);
|
|
96
98
|
}
|
|
97
|
-
function
|
|
99
|
+
function z(t) {
|
|
98
100
|
const { className: a, variant: e, size: s, color: n, ...i } = t;
|
|
99
101
|
return /* @__PURE__ */ o(
|
|
100
102
|
r.Action,
|
|
@@ -104,7 +106,7 @@ function y(t) {
|
|
|
104
106
|
}
|
|
105
107
|
);
|
|
106
108
|
}
|
|
107
|
-
function
|
|
109
|
+
function C(t) {
|
|
108
110
|
const { className: a, variant: e, color: s = "secondary", size: n, ...i } = t;
|
|
109
111
|
return /* @__PURE__ */ o(
|
|
110
112
|
r.Cancel,
|
|
@@ -115,17 +117,17 @@ function z(t) {
|
|
|
115
117
|
);
|
|
116
118
|
}
|
|
117
119
|
export {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
120
|
+
z as AlertDialogAction,
|
|
121
|
+
C as AlertDialogCancel,
|
|
122
|
+
h as AlertDialogContent,
|
|
123
|
+
y as AlertDialogDescription,
|
|
124
|
+
w as AlertDialogFooter,
|
|
125
|
+
v as AlertDialogHeader,
|
|
124
126
|
g as AlertDialogOverlay,
|
|
125
127
|
m as AlertDialogPortal,
|
|
126
128
|
r as AlertDialogPrimitive,
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
129
|
+
A as AlertDialogRoot,
|
|
130
|
+
b as AlertDialogTitle,
|
|
131
|
+
D as AlertDialogTrigger
|
|
130
132
|
};
|
|
131
133
|
//# sourceMappingURL=AlertDialogRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialogRoot.js","sources":["../../src/AlertDialog/AlertDialogRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { ButtonProps, buttonVariants } from '../Button';\n\nfunction AlertDialogRoot(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\nfunction AlertDialogPortal(props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" asChild {...props} />;\n}\n\nfunction AlertDialogOverlay(props: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n const { className, ...rest } = props;\n return (\n <AlertDialogPrimitive.Overlay\n data-slot=\"alert-dialog-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...rest}\n />\n )\n}\n\nfunction AlertDialogContent(props: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n const { className, ...rest } = props;\n return (\n <AlertDialogPortal>\n <AlertDialogOverlay
|
|
1
|
+
{"version":3,"file":"AlertDialogRoot.js","sources":["../../src/AlertDialog/AlertDialogRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { ButtonProps, buttonVariants } from '../Button';\n\nfunction AlertDialogRoot(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal(props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" asChild {...props} />;\n}\n\nfunction AlertDialogOverlay(props: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n const { className, ...rest } = props;\n return (\n <AlertDialogPrimitive.Overlay\n data-slot=\"alert-dialog-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...rest}\n />\n )\n}\n\nfunction AlertDialogContent(props: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n const { className, ...rest } = props;\n return (\n <AlertDialogPortal>\n <AlertDialogOverlay/>\n <AlertDialogPrimitive.Content\n data-slot=\"alert-dialog-content\"\n className={cn(\n 'fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n 'grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg min-h-10 gap-4 p-6',\n 'bg-background border rounded-lg shadow-lg',\n 'overflow-x-hidden break-words',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 duration-200',\n className\n )}\n {...rest}\n />\n </AlertDialogPortal>\n )\n}\n\n\nfunction AlertDialogHeader(props: React.ComponentProps<\"div\">) {\n const { className, ...rest } = props;\n return (\n <div\n data-slot=\"alert-dialog-header\"\n className={cn(\"flex flex-col gap-3 text-center sm:text-left\", className)}\n {...rest}\n />\n )\n}\n\nfunction AlertDialogFooter(props: React.ComponentProps<\"div\">) {\n const { className, ...rest } = props;\n return (\n <div\n data-slot=\"alert-dialog-footer\"\n className={cn(\n \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n className\n )}\n {...rest}\n />\n )\n}\n\nfunction AlertDialogTitle(props: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n const { className, ...rest } = props;\n return (\n <AlertDialogPrimitive.Title\n data-slot=\"alert-dialog-title\"\n className={cn(\"text-lg font-semibold break-words min-h-10 flex items-center\", className)}\n {...rest}\n />\n )\n}\n\nfunction AlertDialogDescription(props: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n const { className, children, ...rest } = props;\n return (\n <AlertDialogPrimitive.Description\n {...rest}\n asChild\n data-slot=\"alert-dialog-description\"\n >\n <div className={cn(\"text-muted-foreground text-sm whitespace-pre-wrap break-words\", className)}>\n {children}\n </div>\n </AlertDialogPrimitive.Description>\n )\n}\n\n\nfunction AlertDialogAction(props: React.ComponentProps<typeof AlertDialogPrimitive.Action> & ButtonProps) {\n const { className, variant, size, color, ...rest } = props;\n return (\n <AlertDialogPrimitive.Action\n className={cn(buttonVariants({ variant, size, color }), className)}\n {...rest}\n />\n )\n}\n\nfunction AlertDialogCancel(props: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & ButtonProps) {\n const { className, variant, color = 'secondary', size, ...rest } = props\n return (\n <AlertDialogPrimitive.Cancel\n className={cn(buttonVariants({ variant, size, color }), className)}\n {...rest}\n />\n )\n}\n\nexport {\n AlertDialogRoot,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogPrimitive\n};\n"],"names":["AlertDialogRoot","props","AlertDialogPrimitive","AlertDialogTrigger","AlertDialogPortal","jsx","AlertDialogOverlay","className","rest","cn","AlertDialogContent","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogDescription","children","AlertDialogAction","variant","size","color","buttonVariants","AlertDialogCancel"],"mappings":";;;;;;AAQA,SAASA,EAAgBC,GAA+D;AACtF,2BAAQC,EAAqB,MAArB,EAA0B,aAAU,gBAAgB,GAAGD,GAAO;AACxE;AAEA,SAASE,EAAmBF,GAAkE;AAC5F,2BAAQC,EAAqB,SAArB,EAA6B,aAAU,wBAAwB,GAAGD,GAAO;AACnF;AAEA,SAASG,EAAkBH,GAAiE;AAC1F,SAAO,gBAAAI,EAACH,EAAqB,QAArB,EAA4B,aAAU,uBAAsB,SAAO,IAAE,GAAGD,GAAO;AACzF;AAEA,SAASK,EAAmBL,GAAkE;AAC5F,QAAM,EAAE,WAAAM,GAAW,GAAGC,EAAA,IAASP;AAC/B,SACE,gBAAAI;AAAA,IAACH,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASE,EAAmBT,GAAkE;AAC5F,QAAM,EAAE,WAAAM,GAAW,GAAGC,EAAA,IAASP;AAC/B,2BACGG,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAkB;AAAA,IACnB,gBAAAD;AAAA,MAACH,EAAqB;AAAA,MAArB;AAAA,QACC,aAAU;AAAA,QACV,WAAWO;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAF;AAAA,QAAA;AAAA,QAED,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;AAGA,SAASG,EAAkBV,GAAoC;AAC7D,QAAM,EAAE,WAAAM,GAAW,GAAGC,EAAA,IAASP;AAC/B,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWI,EAAG,gDAAgDF,CAAS;AAAA,MACtE,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAkBX,GAAoC;AAC7D,QAAM,EAAE,WAAAM,GAAW,GAAGC,EAAA,IAASP;AAC/B,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWI;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASK,EAAiBZ,GAAgE;AACxF,QAAM,EAAE,WAAAM,GAAW,GAAGC,EAAA,IAASP;AAC/B,SACE,gBAAAI;AAAA,IAACH,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO,EAAG,gEAAgEF,CAAS;AAAA,MACtF,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASM,EAAuBb,GAAsE;AACpG,QAAM,EAAE,WAAAM,GAAW,UAAAQ,GAAU,GAAGP,MAASP;AACzC,SACE,gBAAAI;AAAA,IAACH,EAAqB;AAAA,IAArB;AAAA,MACE,GAAGM;AAAA,MACJ,SAAO;AAAA,MACP,aAAU;AAAA,MAEV,4BAAC,OAAA,EAAI,WAAWC,EAAG,iEAAiEF,CAAS,GAC1F,UAAAQ,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAGA,SAASC,EAAkBf,GAA+E;AACxG,QAAM,EAAE,WAAAM,GAAW,SAAAU,GAAS,MAAAC,GAAM,OAAAC,GAAO,GAAGX,MAASP;AACrD,SACE,gBAAAI;AAAA,IAACH,EAAqB;AAAA,IAArB;AAAA,MACC,WAAWO,EAAGW,EAAe,EAAE,SAAAH,GAAS,MAAAC,GAAM,OAAAC,EAAA,CAAO,GAAGZ,CAAS;AAAA,MAChE,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASa,EAAkBpB,GAA+E;AACxG,QAAM,EAAE,WAAAM,GAAW,SAAAU,GAAS,OAAAE,IAAQ,aAAa,MAAAD,GAAM,GAAGV,MAASP;AACnE,SACE,gBAAAI;AAAA,IAACH,EAAqB;AAAA,IAArB;AAAA,MACC,WAAWO,EAAGW,EAAe,EAAE,SAAAH,GAAS,MAAAC,GAAM,OAAAC,EAAA,CAAO,GAAGZ,CAAS;AAAA,MAChE,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
package/Badge/badgeVariants.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export declare const badgeVariants: (props?: ({
|
|
2
|
-
variant?: "default" | "destructive" | "
|
|
2
|
+
variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
|
|
3
3
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
4
4
|
//# sourceMappingURL=badgeVariants.d.ts.map
|
package/Button/Button.d.ts
CHANGED
|
@@ -52,11 +52,17 @@ import * as React from "react";
|
|
|
52
52
|
* <Button disabled>Disabled</Button>
|
|
53
53
|
* ```
|
|
54
54
|
*
|
|
55
|
+
* Sizes
|
|
56
|
+
* xs — compact, for tight UI areas. Classes: rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14.
|
|
57
|
+
* sm — small; slightly larger than xs. Classes: rounded-md p-1 gap-1 text-sm min-h-6 min-w-20.
|
|
58
|
+
* md — default/text-heavy buttons. Classes: min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1 text-sm leading-[1.12] [&_svg]:size-6.
|
|
59
|
+
* lg — large/call-to-action. Classes: min-h-10 min-w-35 rounded-lg gap-1 px-3 py-2 text-base leading-normal [&_svg]:size-6.
|
|
60
|
+
*
|
|
55
61
|
* @remarks
|
|
56
62
|
* - Designed for texted usage. If you need icon-only, use `ButtonIcon`.
|
|
57
63
|
* - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.
|
|
58
64
|
*
|
|
59
|
-
* @see {@link
|
|
65
|
+
* @see {@link ButtonIcon} for icon-only buttons
|
|
60
66
|
*/
|
|
61
67
|
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
62
68
|
export default Button;
|
package/Button/Button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA+ClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,MAAM,uFA0ElB,CAAA;AAED,eAAe,MAAM,CAAC"}
|
package/Button/Button.js
CHANGED
|
@@ -1,78 +1,76 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as I, Fragment as N, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import * as R from "react";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { buttonVariants as F } from "./buttonVariants.js";
|
|
3
|
+
import { Slot as j } from "@radix-ui/react-slot";
|
|
4
|
+
import { cn as A } from "@oneplatformdev/utils";
|
|
5
|
+
import { buttonVariants as C } from "./buttonVariants.js";
|
|
7
6
|
import "@radix-ui/react-tooltip";
|
|
8
|
-
import { Tooltip as
|
|
9
|
-
import { LoadedIcon as
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
import { Tooltip as V } from "../Tooltip/Tooltip.js";
|
|
8
|
+
import { LoadedIcon as y } from "../LoadedIcon/LoadedIcon.js";
|
|
9
|
+
import { renderInnerIcon as B } from "./Button.utils.js";
|
|
10
|
+
const E = (i) => {
|
|
11
|
+
const { variant: n, size: t, color: s } = i, e = { color: s, variant: n, size: t };
|
|
12
|
+
if (n === "default")
|
|
13
13
|
return console.warn('Button variant "default" is deprecated. Please use "variant=contained color=primary" instead.'), e.variant = "contained", e.color = "primary", e;
|
|
14
|
-
if (
|
|
14
|
+
if (t === "icon")
|
|
15
15
|
return console.warn('Button size "icon" is deprecated. Please use "<ButtonIcon/>" component instead.'), e.variant = "contained", e.color = "secondary", e;
|
|
16
|
-
if (
|
|
16
|
+
if (n === "transparent")
|
|
17
17
|
throw console.warn('Button variant "transparent" is removed. Please use "variant=none" instead.'), new Error('Button variant "transparent" is removed. Please use "variant=none" instead.');
|
|
18
|
-
return
|
|
19
|
-
},
|
|
20
|
-
(
|
|
18
|
+
return n === "outline" ? (console.warn('Button variant "outline" is deprecated. Please use "variant=outlined color=primary" instead.'), e.variant = "outlined", e.color = "primary", e) : n === "secondary" ? (console.warn('Button variant "secondary" is deprecated. Please use "variant=contained color=secondary" instead.'), e.variant = "contained", e.color = "secondary", e) : (n === "destructive" && (console.warn('Button variant "destructive" is deprecated. Please use "variant=contained color=error" instead.'), e.variant = "contained", e.color = "error"), e);
|
|
19
|
+
}, F = R.forwardRef(
|
|
20
|
+
(i, n) => {
|
|
21
21
|
const {
|
|
22
|
-
disabled:
|
|
22
|
+
disabled: t,
|
|
23
23
|
className: s,
|
|
24
24
|
variant: e,
|
|
25
|
-
color:
|
|
25
|
+
color: h,
|
|
26
26
|
size: c,
|
|
27
|
-
asChild:
|
|
28
|
-
title:
|
|
29
|
-
tooltip:
|
|
30
|
-
tooltipProps:
|
|
31
|
-
message:
|
|
27
|
+
asChild: l = !1,
|
|
28
|
+
title: w = "",
|
|
29
|
+
tooltip: P,
|
|
30
|
+
tooltipProps: p = {},
|
|
31
|
+
message: g,
|
|
32
32
|
loading: o = !1,
|
|
33
|
-
children:
|
|
33
|
+
children: u,
|
|
34
34
|
startAdornment: m,
|
|
35
|
-
endAdornment:
|
|
35
|
+
endAdornment: v,
|
|
36
36
|
screenReader: a,
|
|
37
|
-
...
|
|
38
|
-
} =
|
|
39
|
-
!!m && /* @__PURE__ */
|
|
40
|
-
|
|
41
|
-
!!
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
...b
|
|
38
|
+
} = i, x = l ? j : "button", d = g || P || w, z = l ? u : /* @__PURE__ */ I(N, { children: [
|
|
39
|
+
!!m && /* @__PURE__ */ r(y, { loading: o, size: c, children: B(m) }),
|
|
40
|
+
u,
|
|
41
|
+
!!v && /* @__PURE__ */ r(y, { loading: o, size: c, children: B(v) }),
|
|
42
|
+
!!a && /* @__PURE__ */ r("span", { className: "sr-only", children: typeof a == "string" ? a : a.text })
|
|
43
|
+
] }), f = /* @__PURE__ */ r(
|
|
44
|
+
x,
|
|
44
45
|
{
|
|
45
46
|
type: "button",
|
|
46
|
-
ref:
|
|
47
|
-
disabled:
|
|
48
|
-
className:
|
|
49
|
-
|
|
50
|
-
...
|
|
47
|
+
ref: n,
|
|
48
|
+
disabled: t,
|
|
49
|
+
className: A(
|
|
50
|
+
C({
|
|
51
|
+
...E({ variant: e, size: c, color: h }),
|
|
51
52
|
className: s
|
|
52
53
|
}),
|
|
53
54
|
o && "pointer-events-none opacity-80 user-select-none"
|
|
54
55
|
),
|
|
55
|
-
...
|
|
56
|
-
children:
|
|
57
|
-
N,
|
|
58
|
-
!!a && /* @__PURE__ */ i("span", { className: "sr-only", children: typeof a == "string" ? a : a.text })
|
|
59
|
-
]
|
|
56
|
+
...b,
|
|
57
|
+
children: z
|
|
60
58
|
}
|
|
61
59
|
);
|
|
62
|
-
return
|
|
63
|
-
|
|
60
|
+
return d ? /* @__PURE__ */ r(
|
|
61
|
+
V,
|
|
64
62
|
{
|
|
65
|
-
...
|
|
66
|
-
open:
|
|
67
|
-
message:
|
|
68
|
-
children:
|
|
63
|
+
...p || {},
|
|
64
|
+
open: p.open ?? (t || o || !d) ? !1 : void 0,
|
|
65
|
+
message: d,
|
|
66
|
+
children: f
|
|
69
67
|
}
|
|
70
|
-
) :
|
|
68
|
+
) : f;
|
|
71
69
|
}
|
|
72
70
|
);
|
|
73
|
-
|
|
71
|
+
F.displayName = "Button";
|
|
74
72
|
export {
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
F as Button,
|
|
74
|
+
F as default
|
|
77
75
|
};
|
|
78
76
|
//# sourceMappingURL=Button.js.map
|
package/Button/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport {
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { ButtonVarianceProps, buttonVariants } from './buttonVariants';\nimport { type ButtonProps } from './Button.types';\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { renderInnerIcon } from \"./Button.utils\";\n\nconst normalizedVariantProperties = (props: ButtonVarianceProps): ButtonVarianceProps => {\n const { variant, size, color } = props;\n const vls = { color, variant, size }\n if ((variant as string) === 'default') {\n console.warn('Button variant \"default\" is deprecated. Please use \"variant=contained color=primary\" instead.')\n vls.variant = 'contained'\n vls.color = 'primary'\n return vls\n }\n if ((size as string) === 'icon') {\n console.warn('Button size \"icon\" is deprecated. Please use \"<ButtonIcon/>\" component instead.')\n vls.variant = 'contained'\n vls.color = 'secondary'\n return vls\n // throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n }\n if ((variant as string) === 'transparent') {\n console.warn('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n }\n if ((variant as string) === 'outline') {\n console.warn('Button variant \"outline\" is deprecated. Please use \"variant=outlined color=primary\" instead.')\n vls.variant = 'outlined'\n vls.color = 'primary'\n return vls\n }\n if ((variant as string) === 'secondary') {\n console.warn('Button variant \"secondary\" is deprecated. Please use \"variant=contained color=secondary\" instead.')\n vls.variant = 'contained'\n vls.color = 'secondary'\n return vls\n }\n if ((variant as string) === 'destructive') {\n console.warn('Button variant \"destructive\" is deprecated. Please use \"variant=contained color=error\" instead.')\n vls.variant = 'contained'\n vls.color = 'error'\n return vls\n }\n return vls;\n}\n\n/**\n * Universal Button component used for triggering actions and UI interactions.\n * Supports variants, sizes, colors, start/end icon adornments, custom slot content,\n * tooltip integration, loading state, and polymorphic rendering via `asChild`.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { Button } from '@oneplatformdev/ui/Button';\n * ```\n * > Basic usage:\n * ```tsx\n * <Button>Click me</Button>\n * ```\n * > Variant and size:\n * ```tsx\n * <Button variant=\"outline\" size=\"lg\">Large Button</Button>\n * ```\n * > With icons:\n * ```tsx\n * <Button startAdornment={<PlusIcon />}>Create</Button>\n * <Button endAdornment={<ArrowRightIcon />}>Next</Button>\n * ```\n * > Icon style button:\n * ```tsx\n * <Button size=\"icon\">\n * <PlusIcon />\n * </Button>\n * ```\n * > Polymorphic rendering (`asChild`):\n * ```tsx\n * <Button asChild>\n * <a href=\"/dashboard\">Go to Dashboard</a>\n * </Button>\n * ```\n * > Tooltip via `message` or native `title`:\n * ```tsx\n * <Button title=\"Tooltip text\">Hover me</Button>\n * <Button message=\"Tooltip content\">Hover me</Button>\n * ```\n * > Loading state:\n * ```tsx\n * <Button loading>Processing...</Button>\n * ```\n * > Disabled:\n * ```tsx\n * <Button disabled>Disabled</Button>\n * ```\n *\n * Sizes\n * xs — compact, for tight UI areas. Classes: rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14.\n * sm — small; slightly larger than xs. Classes: rounded-md p-1 gap-1 text-sm min-h-6 min-w-20.\n * md — default/text-heavy buttons. Classes: min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1 text-sm leading-[1.12] [&_svg]:size-6.\n * lg — large/call-to-action. Classes: min-h-10 min-w-35 rounded-lg gap-1 px-3 py-2 text-base leading-normal [&_svg]:size-6.\n *\n * @remarks\n * - Designed for texted usage. If you need icon-only, use `ButtonIcon`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link ButtonIcon} for icon-only buttons\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (props, ref) => {\n const {\n disabled,\n className,\n variant,\n color,\n size,\n asChild = false,\n title = '',\n tooltip,\n tooltipProps = {},\n message,\n loading = false,\n children,\n startAdornment,\n endAdornment,\n screenReader,\n ...rest\n } = props;\n const Comp = asChild ? Slot : \"button\"\n const msg = message || tooltip || title;\n\n const content = asChild\n ? children\n : (\n <>\n {!!startAdornment && (\n <LoadedIcon loading={loading} size={size}>\n {renderInnerIcon(startAdornment)}\n </LoadedIcon>\n )}\n\n {children}\n\n {!!endAdornment && (\n <LoadedIcon loading={loading} size={size}>\n {renderInnerIcon(endAdornment)}\n </LoadedIcon>\n )}\n\n {!!screenReader && <span className=\"sr-only\">{typeof screenReader === 'string' ? screenReader : screenReader.text}</span>}\n </>\n )\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n buttonVariants({\n ...normalizedVariantProperties({ variant, size, color }),\n className\n }),\n loading && 'pointer-events-none opacity-80 user-select-none',\n )}\n {...rest}\n >\n {content}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButton.displayName = \"Button\"\nexport default Button;\n"],"names":["normalizedVariantProperties","props","variant","size","color","vls","Button","React","ref","disabled","className","asChild","title","tooltip","tooltipProps","message","loading","children","startAdornment","endAdornment","screenReader","rest","Comp","Slot","msg","content","jsxs","Fragment","jsx","LoadedIcon","renderInnerIcon","cmp","cn","buttonVariants","Tooltip"],"mappings":";;;;;;;;;AAWA,MAAMA,IAA8B,CAACC,MAAoD;AACvF,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,OAAAC,EAAA,IAAUH,GAC3BI,IAAM,EAAE,OAAAD,GAAO,SAAAF,GAAS,MAAAC,EAAA;AAC9B,MAAKD,MAAuB;AAC1B,mBAAQ,KAAK,+FAA+F,GAC5GG,EAAI,UAAU,aACdA,EAAI,QAAQ,WACLA;AAET,MAAKF,MAAoB;AACvB,mBAAQ,KAAK,iFAAiF,GAC9FE,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA;AAGT,MAAKH,MAAuB;AAC1B,kBAAQ,KAAK,6EAA6E,GACpF,IAAI,MAAM,6EAA6E;AAE/F,SAAKA,MAAuB,aAC1B,QAAQ,KAAK,8FAA8F,GAC3GG,EAAI,UAAU,YACdA,EAAI,QAAQ,WACLA,KAEJH,MAAuB,eAC1B,QAAQ,KAAK,mGAAmG,GAChHG,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA,MAEJH,MAAuB,kBAC1B,QAAQ,KAAK,iGAAiG,GAC9GG,EAAI,UAAU,aACdA,EAAI,QAAQ,UACLA;AAGX,GAkEaC,IAASC,EAAM;AAAA,EAC1B,CAACN,GAAOO,MAAQ;AACd,UAAM;AAAA,MACJ,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,SAAAR;AAAA,MACA,OAAAE;AAAA,MACA,MAAAD;AAAA,MACA,SAAAQ,IAAU;AAAA,MACV,OAAAC,IAAQ;AAAA,MACR,SAAAC;AAAA,MACA,cAAAC,IAAe,CAAA;AAAA,MACf,SAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDpB,GACEqB,IAAOX,IAAUY,IAAO,UACxBC,IAAMT,KAAWF,KAAWD,GAE5Ba,IAAUd,IACZM,IAEA,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,MAAA,CAAC,CAACT,KACD,gBAAAU,EAACC,GAAA,EAAW,SAAAb,GAAkB,MAAAb,GAC3B,UAAA2B,EAAgBZ,CAAc,GACjC;AAAA,MAGDD;AAAA,MAEA,CAAC,CAACE,KACD,gBAAAS,EAACC,KAAW,SAAAb,GAAkB,MAAAb,GAC3B,UAAA2B,EAAgBX,CAAY,GAC/B;AAAA,MAGD,CAAC,CAACC,KAAgB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,WAAW,UAAA,OAAOR,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAAK;AAAA,IAAA,GACpH,GAGEW,IACJ,gBAAAH;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAd;AAAA,QACA,UAAAC;AAAA,QACA,WAAWuB;AAAA,UACTC,EAAe;AAAA,YACb,GAAGjC,EAA4B,EAAE,SAAAE,GAAS,MAAAC,GAAM,OAAAC,GAAO;AAAA,YACvD,WAAAM;AAAA,UAAA,CACD;AAAA,UACDM,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGK;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAI;AAAA,MAACM;AAAA,MAAA;AAAA,QACE,GAAIpB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASL,KAAYO,KAAW,CAACQ,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAO;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAzB,EAAO,cAAc;"}
|
package/Button/Button.types.d.ts
CHANGED
|
@@ -7,11 +7,27 @@ type ButtonScreenReaderOptions = {
|
|
|
7
7
|
text?: string;
|
|
8
8
|
};
|
|
9
9
|
export type ButtonScreenReader = ButtonScreenReaderOptions['text'] | ButtonScreenReaderOptions;
|
|
10
|
+
export type ButtonCounterBadgeReaderOptions = {
|
|
11
|
+
/**
|
|
12
|
+
* Count to display in the counter badge (e.g., number of notifications).
|
|
13
|
+
* If omitted, the badge will not be rendered.
|
|
14
|
+
*/
|
|
15
|
+
count?: number;
|
|
16
|
+
};
|
|
17
|
+
export type ButtonCounterBadgeReader = ButtonCounterBadgeReaderOptions['count'] | ButtonCounterBadgeReaderOptions;
|
|
10
18
|
export interface ButtonDefaultProps extends Omit<ButtonAttributes, 'color' | 'title' | 'disabled'> {
|
|
11
19
|
asChild?: boolean;
|
|
12
20
|
loading?: boolean;
|
|
13
21
|
disabled?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Screen reader text or options used for accessibility (e.g., when the button is loading).
|
|
24
|
+
* Accepts a string or an object with a `text` property for more control.
|
|
25
|
+
*/
|
|
14
26
|
screenReader?: ButtonScreenReader;
|
|
27
|
+
/**
|
|
28
|
+
* Field for rendering a count badge on the button (e.g., notifications).
|
|
29
|
+
*/
|
|
30
|
+
counter?: ButtonCounterBadgeReader;
|
|
15
31
|
}
|
|
16
32
|
export interface ButtonTooltipProps {
|
|
17
33
|
/**
|