@trsys-tech/matrix-library 0.6.0 → 1.0.0-canary.0
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/dist/accordion.es.js +27 -27
- package/dist/accordion.es.js.map +1 -1
- package/dist/avatar.es.js +28 -14
- package/dist/avatar.es.js.map +1 -1
- package/dist/badge.es.js +24 -24
- package/dist/badge.es.js.map +1 -1
- package/dist/breadcrumb.es.js +34 -24
- package/dist/breadcrumb.es.js.map +1 -1
- package/dist/button.es.js +28 -28
- package/dist/button.es.js.map +1 -1
- package/dist/calendar.es.js +64 -61
- package/dist/calendar.es.js.map +1 -1
- package/dist/card.es.js +21 -21
- package/dist/card.es.js.map +1 -1
- package/dist/checkbox.es.js +15 -15
- package/dist/checkbox.es.js.map +1 -1
- package/dist/chip.es.js +24 -24
- package/dist/chip.es.js.map +1 -1
- package/dist/collapsible.es.js +17 -17
- package/dist/collapsible.es.js.map +1 -1
- package/dist/combobox.es.js +79 -70
- package/dist/combobox.es.js.map +1 -1
- package/dist/command.es.js +62 -59
- package/dist/command.es.js.map +1 -1
- package/dist/components/accordion/Accordion.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/badge/Badge.d.ts +2 -2
- package/dist/components/breadcrumb/Breadcrumb.d.ts.map +1 -1
- package/dist/components/button/Button.d.ts +2 -2
- package/dist/components/chip/Chip.d.ts +2 -2
- package/dist/components/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/command/Command.d.ts.map +1 -1
- package/dist/components/confirm/Confirm.d.ts.map +1 -1
- package/dist/components/context-menu/ContextMenu.d.ts.map +1 -1
- package/dist/components/data-grid/DataGrid.d.ts.map +1 -1
- package/dist/components/date-picker/TimePickerContent.d.ts.map +1 -1
- package/dist/components/date-picker/calendar.d.ts.map +1 -1
- package/dist/components/dialog/Dialog.d.ts.map +1 -1
- package/dist/components/drawer/Drawer.d.ts.map +1 -1
- package/dist/components/drawer/SwipableDrawer.d.ts.map +1 -1
- package/dist/components/form/Form.d.ts.map +1 -1
- package/dist/components/icon-botton/IconButton.d.ts +2 -2
- package/dist/components/icon-botton/IconButton.d.ts.map +1 -1
- package/dist/components/label/Label.d.ts +1 -1
- package/dist/components/label/Label.d.ts.map +1 -1
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/multi-select/MultiSelect.d.ts +2 -2
- package/dist/components/progress/Progress.d.ts.map +1 -1
- package/dist/components/rating/Rating.d.ts +2 -2
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/sheet/Sheet.d.ts +2 -2
- package/dist/components/sheet/Sheet.d.ts.map +1 -1
- package/dist/components/sidebar/Sidebar.d.ts.map +1 -1
- package/dist/components/switch/Switch.d.ts +2 -2
- package/dist/components/text-field/TextField.d.ts.map +1 -1
- package/dist/components/toast/toast-components.d.ts +4 -4
- package/dist/components/toast/toast-components.d.ts.map +1 -1
- package/dist/confirm.es.js +18 -8
- package/dist/confirm.es.js.map +1 -1
- package/dist/contextmenu.es.js +77 -70
- package/dist/contextmenu.es.js.map +1 -1
- package/dist/datagrid.es.js +101 -97
- package/dist/datagrid.es.js.map +1 -1
- package/dist/desktopdatepicker.es.js +30 -30
- package/dist/desktopdatepicker.es.js.map +1 -1
- package/dist/desktopdaterangepicker.es.js +44 -44
- package/dist/desktopdaterangepicker.es.js.map +1 -1
- package/dist/desktoptimepicker.es.js +24 -24
- package/dist/desktoptimepicker.es.js.map +1 -1
- package/dist/dialog.es.js +43 -43
- package/dist/dialog.es.js.map +1 -1
- package/dist/drawer.es.js +27 -27
- package/dist/drawer.es.js.map +1 -1
- package/dist/duration.es.js +34 -34
- package/dist/duration.es.js.map +1 -1
- package/dist/form.es.js +20 -20
- package/dist/form.es.js.map +1 -1
- package/dist/formcheckbox.es.js +13 -13
- package/dist/formcheckbox.es.js.map +1 -1
- package/dist/formcombobox.es.js +17 -17
- package/dist/formcombobox.es.js.map +1 -1
- package/dist/formdatepicker.es.js +12 -12
- package/dist/formdatepicker.es.js.map +1 -1
- package/dist/formdaterangepicker.es.js +16 -16
- package/dist/formdaterangepicker.es.js.map +1 -1
- package/dist/formduration.es.js +13 -13
- package/dist/formduration.es.js.map +1 -1
- package/dist/forminput.es.js +10 -10
- package/dist/forminput.es.js.map +1 -1
- package/dist/formmultiselect.es.js +7 -7
- package/dist/formmultiselect.es.js.map +1 -1
- package/dist/formrating.es.js +21 -21
- package/dist/formrating.es.js.map +1 -1
- package/dist/formselect.es.js +28 -28
- package/dist/formselect.es.js.map +1 -1
- package/dist/formswitch.es.js +14 -14
- package/dist/formswitch.es.js.map +1 -1
- package/dist/formtextarea.es.js +12 -12
- package/dist/formtextarea.es.js.map +1 -1
- package/dist/formtimepicker.es.js +12 -12
- package/dist/formtimepicker.es.js.map +1 -1
- package/dist/iconbutton.es.js +22 -22
- package/dist/iconbutton.es.js.map +1 -1
- package/dist/label.es.js +6 -6
- package/dist/label.es.js.map +1 -1
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/mobiledatepicker.es.js +42 -42
- package/dist/mobiledatepicker.es.js.map +1 -1
- package/dist/mobiledaterangepicker.es.js +50 -50
- package/dist/mobiledaterangepicker.es.js.map +1 -1
- package/dist/mobiletimepicker.es.js +30 -30
- package/dist/mobiletimepicker.es.js.map +1 -1
- package/dist/modal.es.js +48 -44
- package/dist/modal.es.js.map +1 -1
- package/dist/multiselect.es.js +120 -120
- package/dist/multiselect.es.js.map +1 -1
- package/dist/popover.es.js +16 -16
- package/dist/popover.es.js.map +1 -1
- package/dist/progress.es.js +29 -21
- package/dist/progress.es.js.map +1 -1
- package/dist/radiogroup.es.js +16 -16
- package/dist/radiogroup.es.js.map +1 -1
- package/dist/rating.es.js +76 -76
- package/dist/rating.es.js.map +1 -1
- package/dist/select.es.js +82 -63
- package/dist/select.es.js.map +1 -1
- package/dist/separator.es.js +13 -13
- package/dist/separator.es.js.map +1 -1
- package/dist/sheet.es.js +44 -44
- package/dist/sheet.es.js.map +1 -1
- package/dist/sidebar.es.js +245 -233
- package/dist/sidebar.es.js.map +1 -1
- package/dist/skeleton.es.js +6 -6
- package/dist/skeleton.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/swipabledrawer.es.js +41 -38
- package/dist/swipabledrawer.es.js.map +1 -1
- package/dist/switch.es.js +16 -16
- package/dist/switch.es.js.map +1 -1
- package/dist/tabs.es.js +22 -22
- package/dist/tabs.es.js.map +1 -1
- package/dist/textarea.es.js +12 -12
- package/dist/textarea.es.js.map +1 -1
- package/dist/textfield.es.js +37 -37
- package/dist/textfield.es.js.map +1 -1
- package/dist/timepickercontent.es.js +63 -56
- package/dist/timepickercontent.es.js.map +1 -1
- package/dist/toast-components.es.js +47 -44
- package/dist/toast-components.es.js.map +1 -1
- package/dist/toast.es.js +24 -24
- package/dist/toast.es.js.map +1 -1
- package/dist/tooltip.es.js +16 -16
- package/dist/tooltip.es.js.map +1 -1
- package/dist/utils.es.js +6 -5
- package/dist/utils.es.js.map +1 -1
- package/package.json +5 -5
package/dist/accordion.es.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import * as
|
|
3
|
-
import * as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { ChevronDown as
|
|
6
|
-
const g =
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
1
|
+
import { jsx as r, jsxs as s } from "react/jsx-runtime";
|
|
2
|
+
import * as n from "react";
|
|
3
|
+
import * as t from "@radix-ui/react-accordion";
|
|
4
|
+
import { cn as i } from "./utils.es.js";
|
|
5
|
+
import { ChevronDown as x } from "@trsys-tech/matrix-icons";
|
|
6
|
+
const g = t.Root, d = n.forwardRef(({ className: e, ...m }, o) => /* @__PURE__ */ r(t.Item, { ref: o, className: i("mtx-border-b", e), ...m }));
|
|
7
|
+
d.displayName = "AccordionItem";
|
|
8
|
+
const c = n.forwardRef(({ className: e, children: m, ...o }, a) => /* @__PURE__ */ r(t.Header, { className: "mtx-flex", children: /* @__PURE__ */ s(
|
|
9
|
+
t.Trigger,
|
|
10
10
|
{
|
|
11
|
-
ref:
|
|
12
|
-
className:
|
|
13
|
-
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
|
|
14
|
-
|
|
11
|
+
ref: a,
|
|
12
|
+
className: i(
|
|
13
|
+
"mtx-flex mtx-flex-1 mtx-items-center mtx-justify-between mtx-py-4 mtx-text-sm mtx-font-medium mtx-transition-all hover:mtx-underline mtx-text-left [&[data-state=open]>svg]:mtx-rotate-180",
|
|
14
|
+
e
|
|
15
15
|
),
|
|
16
|
-
...
|
|
16
|
+
...o,
|
|
17
17
|
children: [
|
|
18
|
-
|
|
19
|
-
/* @__PURE__ */
|
|
18
|
+
m,
|
|
19
|
+
/* @__PURE__ */ r(x, { className: "mtx-h-4 mtx-w-4 mtx-shrink-0 mtx-text-muted-foreground mtx-transition-transform mtx-duration-200" })
|
|
20
20
|
]
|
|
21
21
|
}
|
|
22
22
|
) }));
|
|
23
|
-
|
|
24
|
-
const
|
|
25
|
-
|
|
23
|
+
c.displayName = t.Trigger.displayName;
|
|
24
|
+
const l = n.forwardRef(({ className: e, children: m, ...o }, a) => /* @__PURE__ */ r(
|
|
25
|
+
t.Content,
|
|
26
26
|
{
|
|
27
|
-
ref:
|
|
28
|
-
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
29
|
-
...
|
|
30
|
-
children: /* @__PURE__ */
|
|
27
|
+
ref: a,
|
|
28
|
+
className: "mtx-overflow-hidden mtx-text-sm data-[state=closed]:mtx-animate-accordion-up data-[state=open]:mtx-animate-accordion-down",
|
|
29
|
+
...o,
|
|
30
|
+
children: /* @__PURE__ */ r("div", { className: i("mtx-pb-4 mtx-pt-0", e), children: m })
|
|
31
31
|
}
|
|
32
32
|
));
|
|
33
|
-
|
|
33
|
+
l.displayName = t.Content.displayName;
|
|
34
34
|
export {
|
|
35
35
|
g as Accordion,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
l as AccordionContent,
|
|
37
|
+
d as AccordionItem,
|
|
38
|
+
c as AccordionTrigger
|
|
39
39
|
};
|
|
40
40
|
//# sourceMappingURL=accordion.es.js.map
|
package/dist/accordion.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.es.js","sources":["../src/components/accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { ChevronDown } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst Accordion = AccordionPrimitive.Root;\r\n\r\nconst AccordionItem = React.forwardRef<\r\n React.ElementRef<typeof AccordionPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\r\n>(({ className, ...props }, ref) => <AccordionPrimitive.Item ref={ref} className={cn(\"border-b\", className)} {...props} />);\r\nAccordionItem.displayName = \"AccordionItem\";\r\n\r\nconst AccordionTrigger = React.forwardRef<\r\n React.ElementRef<typeof AccordionPrimitive.Trigger>,\r\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n <AccordionPrimitive.Header className=\"flex\">\r\n <AccordionPrimitive.Trigger\r\n ref={ref}\r\n className={cn(\r\n \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180\",\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\r\n </AccordionPrimitive.Trigger>\r\n </AccordionPrimitive.Header>\r\n));\r\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\r\n\r\nconst AccordionContent = React.forwardRef<\r\n React.ElementRef<typeof AccordionPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\r\n>(({ className, children, ...props }, ref) => (\r\n <AccordionPrimitive.Content\r\n ref={ref}\r\n className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\r\n {...props}\r\n >\r\n <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\r\n </AccordionPrimitive.Content>\r\n));\r\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\r\n\r\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\r\n"],"names":["Accordion","AccordionPrimitive","AccordionItem","React","className","props","ref","jsx","cn","AccordionTrigger","children","jsxs","ChevronDown","AccordionContent"],"mappings":";;;;;AAQA,MAAMA,IAAYC,EAAmB,MAE/BC,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ,gBAAAC,EAACN,EAAmB,MAAnB,EAAwB,KAAAK,GAAU,WAAWE,EAAG,
|
|
1
|
+
{"version":3,"file":"accordion.es.js","sources":["../src/components/accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { ChevronDown } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst Accordion = AccordionPrimitive.Root;\r\n\r\nconst AccordionItem = React.forwardRef<\r\n React.ElementRef<typeof AccordionPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\r\n>(({ className, ...props }, ref) => <AccordionPrimitive.Item ref={ref} className={cn(\"mtx-border-b\", className)} {...props} />);\r\nAccordionItem.displayName = \"AccordionItem\";\r\n\r\nconst AccordionTrigger = React.forwardRef<\r\n React.ElementRef<typeof AccordionPrimitive.Trigger>,\r\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n <AccordionPrimitive.Header className=\"mtx-flex\">\r\n <AccordionPrimitive.Trigger\r\n ref={ref}\r\n className={cn(\r\n \"mtx-flex mtx-flex-1 mtx-items-center mtx-justify-between mtx-py-4 mtx-text-sm mtx-font-medium mtx-transition-all hover:mtx-underline mtx-text-left [&[data-state=open]>svg]:mtx-rotate-180\",\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <ChevronDown className=\"mtx-h-4 mtx-w-4 mtx-shrink-0 mtx-text-muted-foreground mtx-transition-transform mtx-duration-200\" />\r\n </AccordionPrimitive.Trigger>\r\n </AccordionPrimitive.Header>\r\n));\r\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\r\n\r\nconst AccordionContent = React.forwardRef<\r\n React.ElementRef<typeof AccordionPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\r\n>(({ className, children, ...props }, ref) => (\r\n <AccordionPrimitive.Content\r\n ref={ref}\r\n className=\"mtx-overflow-hidden mtx-text-sm data-[state=closed]:mtx-animate-accordion-up data-[state=open]:mtx-animate-accordion-down\"\r\n {...props}\r\n >\r\n <div className={cn(\"mtx-pb-4 mtx-pt-0\", className)}>{children}</div>\r\n </AccordionPrimitive.Content>\r\n));\r\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\r\n\r\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\r\n"],"names":["Accordion","AccordionPrimitive","AccordionItem","React","className","props","ref","jsx","cn","AccordionTrigger","children","jsxs","ChevronDown","AccordionContent"],"mappings":";;;;;AAQA,MAAMA,IAAYC,EAAmB,MAE/BC,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ,gBAAAC,EAACN,EAAmB,MAAnB,EAAwB,KAAAK,GAAU,WAAWE,EAAG,gBAAgBJ,CAAS,GAAI,GAAGC,GAAO,CAAE;AAC9HH,EAAc,cAAc;AAE5B,MAAMO,IAAmBN,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,EAAA,GAASC,MACpC,gBAAAC,EAACN,EAAmB,QAAnB,EAA0B,WAAU,YACnC,UAAA,gBAAAU;AAAA,EAACV,EAAmB;AAAA,EAAnB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAA;AAAA,MAAAK;AAAA,MACD,gBAAAH,EAACK,GAAA,EAAY,WAAU,mGAAA,CAAmG;AAAA,IAAA;AAAA,EAAA;AAC5H,GACF,CACD;AACDH,EAAiB,cAAcR,EAAmB,QAAQ;AAE1D,MAAMY,IAAmBV,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAmB;AAAA,EAAnB;AAAA,IACC,KAAAK;AAAA,IACA,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,4BAAC,OAAA,EAAI,WAAWG,EAAG,qBAAqBJ,CAAS,GAAI,UAAAM,EAAA,CAAS;AAAA,EAAA;AAChE,CACD;AACDG,EAAiB,cAAcZ,EAAmB,QAAQ;"}
|
package/dist/avatar.es.js
CHANGED
|
@@ -1,20 +1,34 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import * as
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import * as r from "react";
|
|
3
3
|
import * as a from "@radix-ui/react-avatar";
|
|
4
|
-
import { cn as
|
|
5
|
-
const
|
|
6
|
-
({ className:
|
|
4
|
+
import { cn as o } from "./utils.es.js";
|
|
5
|
+
const s = r.forwardRef(
|
|
6
|
+
({ className: m, ...t }, e) => /* @__PURE__ */ l(
|
|
7
|
+
a.Root,
|
|
8
|
+
{
|
|
9
|
+
ref: e,
|
|
10
|
+
className: o("mtx-relative mtx-flex mtx-h-10 mtx-w-10 mtx-shrink-0 mtx-overflow-hidden mtx-rounded-full", m),
|
|
11
|
+
...t
|
|
12
|
+
}
|
|
13
|
+
)
|
|
7
14
|
);
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
({ className:
|
|
15
|
+
s.displayName = a.Root.displayName;
|
|
16
|
+
const x = r.forwardRef(
|
|
17
|
+
({ className: m, ...t }, e) => /* @__PURE__ */ l(a.Image, { ref: e, className: o("mtx-aspect-square mtx-h-full mtx-w-full", m), ...t })
|
|
11
18
|
);
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
|
|
19
|
+
x.displayName = a.Image.displayName;
|
|
20
|
+
const f = r.forwardRef(({ className: m, ...t }, e) => /* @__PURE__ */ l(
|
|
21
|
+
a.Fallback,
|
|
22
|
+
{
|
|
23
|
+
ref: e,
|
|
24
|
+
className: o("mtx-flex mtx-h-full mtx-w-full mtx-items-center mtx-justify-center mtx-rounded-full mtx-bg-muted", m),
|
|
25
|
+
...t
|
|
26
|
+
}
|
|
27
|
+
));
|
|
28
|
+
f.displayName = a.Fallback.displayName;
|
|
15
29
|
export {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
30
|
+
s as Avatar,
|
|
31
|
+
f as AvatarFallback,
|
|
32
|
+
x as AvatarImage
|
|
19
33
|
};
|
|
20
34
|
//# sourceMappingURL=avatar.es.js.map
|
package/dist/avatar.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.es.js","sources":["../src/components/avatar/Avatar.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>>(\r\n ({ className, ...props }, ref) => (\r\n <AvatarPrimitive.Root
|
|
1
|
+
{"version":3,"file":"avatar.es.js","sources":["../src/components/avatar/Avatar.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>>(\r\n ({ className, ...props }, ref) => (\r\n <AvatarPrimitive.Root\r\n ref={ref}\r\n className={cn(\"mtx-relative mtx-flex mtx-h-10 mtx-w-10 mtx-shrink-0 mtx-overflow-hidden mtx-rounded-full\", className)}\r\n {...props}\r\n />\r\n ),\r\n);\r\nAvatar.displayName = AvatarPrimitive.Root.displayName;\r\n\r\nconst AvatarImage = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Image>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>>(\r\n ({ className, ...props }, ref) => (\r\n <AvatarPrimitive.Image ref={ref} className={cn(\"mtx-aspect-square mtx-h-full mtx-w-full\", className)} {...props} />\r\n ),\r\n);\r\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\r\n\r\nconst AvatarFallback = React.forwardRef<\r\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\r\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\r\n>(({ className, ...props }, ref) => (\r\n <AvatarPrimitive.Fallback\r\n ref={ref}\r\n className={cn(\"mtx-flex mtx-h-full mtx-w-full mtx-items-center mtx-justify-center mtx-rounded-full mtx-bg-muted\", className)}\r\n {...props}\r\n />\r\n));\r\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\r\n\r\nexport { Avatar, AvatarImage, AvatarFallback };\r\n"],"names":["Avatar","React","className","props","ref","jsx","AvatarPrimitive","cn","AvatarImage","AvatarFallback"],"mappings":";;;;AAOA,MAAMA,IAASC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAG,6FAA6FL,CAAS;AAAA,MACnH,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAO,cAAcM,EAAgB,KAAK;AAE1C,MAAME,IAAcP,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC,EAACC,EAAgB,OAAhB,EAAsB,KAAAF,GAAU,WAAWG,EAAG,2CAA2CL,CAAS,GAAI,GAAGC,EAAA,CAAO;AAErH;AACAK,EAAY,cAAcF,EAAgB,MAAM;AAEhD,MAAMG,IAAiBR,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,oGAAoGL,CAAS;AAAA,IAC1H,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAcH,EAAgB,SAAS;"}
|
package/dist/badge.es.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { tv as
|
|
3
|
-
import { cn as
|
|
4
|
-
const
|
|
5
|
-
base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent",
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { tv as x } from "tailwind-variants";
|
|
3
|
+
import { cn as n } from "./utils.es.js";
|
|
4
|
+
const o = x({
|
|
5
|
+
base: "mtx-inline-flex mtx-items-center mtx-rounded-full mtx-border mtx-px-2.5 mtx-py-0.5 mtx-text-xs mtx-font-semibold mtx-transition-colors focus:mtx-outline-none focus:mtx-ring-2 focus:mtx-ring-ring focus:mtx-ring-offset-2 mtx-border-transparent",
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
|
-
primary: "bg-primary text-primary-foreground hover:bg-primary-600",
|
|
9
|
-
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600",
|
|
10
|
-
outline: "border border-primary text-primary hover:bg-primary-50",
|
|
11
|
-
danger: "bg-danger text-danger-foreground hover:bg-danger-600",
|
|
12
|
-
success: "bg-success text-success-foreground hover:bg-success-600",
|
|
13
|
-
warning: "bg-warning text-warning-foreground hover:bg-warning-600",
|
|
14
|
-
info: "bg-info text-info-foreground hover:bg-info-600",
|
|
15
|
-
"primary-inverse": "bg-primary-100 text-primary-700 hover:bg-primary-50",
|
|
16
|
-
"success-inverse": "bg-success-300 text-success-700 hover:bg-success-200",
|
|
17
|
-
"danger-inverse": "bg-danger-300 text-danger-600 hover:bg-danger-200",
|
|
18
|
-
"warning-inverse": "bg-warning-300 text-warning-800 hover:bg-warning-200",
|
|
19
|
-
"info-inverse": "bg-info-300 text-info-700 hover:bg-info-200",
|
|
20
|
-
"purple-inverse": "bg-purple-200 text-purple-500 hover:bg-purple-100",
|
|
21
|
-
"coral-inverse": "bg-coral-300 text-coral-600 hover:bg-coral-200",
|
|
22
|
-
"turquoise-inverse": "bg-turquoise-200 text-turquoise-600 hover:bg-turquoise-100",
|
|
23
|
-
"lime-inverse": "bg-lime-300 text-lime-700 hover:bg-lime-200",
|
|
24
|
-
"gray-inverse": "bg-gray-300 text-text-500 hover:bg-gray-200"
|
|
8
|
+
primary: "mtx-bg-primary mtx-text-primary-foreground hover:mtx-bg-primary-600",
|
|
9
|
+
secondary: "mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary-600",
|
|
10
|
+
outline: "mtx-border mtx-border-primary mtx-text-primary hover:mtx-bg-primary-50",
|
|
11
|
+
danger: "mtx-bg-danger mtx-text-danger-foreground hover:mtx-bg-danger-600",
|
|
12
|
+
success: "mtx-bg-success mtx-text-success-foreground hover:mtx-bg-success-600",
|
|
13
|
+
warning: "mtx-bg-warning mtx-text-warning-foreground hover:mtx-bg-warning-600",
|
|
14
|
+
info: "mtx-bg-info mtx-text-info-foreground hover:mtx-bg-info-600",
|
|
15
|
+
"primary-inverse": "mtx-bg-primary-100 mtx-text-primary-700 hover:mtx-bg-primary-50",
|
|
16
|
+
"success-inverse": "mtx-bg-success-300 mtx-text-success-700 hover:mtx-bg-success-200",
|
|
17
|
+
"danger-inverse": "mtx-bg-danger-300 mtx-text-danger-600 hover:mtx-bg-danger-200",
|
|
18
|
+
"warning-inverse": "mtx-bg-warning-300 mtx-text-warning-800 hover:mtx-bg-warning-200",
|
|
19
|
+
"info-inverse": "mtx-bg-info-300 mtx-text-info-700 hover:mtx-bg-info-200",
|
|
20
|
+
"purple-inverse": "mtx-bg-purple-200 mtx-text-purple-500 hover:mtx-bg-purple-100",
|
|
21
|
+
"coral-inverse": "mtx-bg-coral-300 mtx-text-coral-600 hover:mtx-bg-coral-200",
|
|
22
|
+
"turquoise-inverse": "mtx-bg-turquoise-200 mtx-text-turquoise-600 hover:mtx-bg-turquoise-100",
|
|
23
|
+
"lime-inverse": "mtx-bg-lime-300 mtx-text-lime-700 hover:mtx-bg-lime-200",
|
|
24
|
+
"gray-inverse": "mtx-bg-gray-300 mtx-text-text-500 hover:mtx-bg-gray-200"
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
defaultVariants: {
|
|
28
28
|
variant: "primary"
|
|
29
29
|
}
|
|
30
|
-
}),
|
|
30
|
+
}), a = ({ className: t, variant: r, ...e }) => /* @__PURE__ */ m("div", { className: n(o({ variant: r }), t), ...e });
|
|
31
31
|
export {
|
|
32
|
-
|
|
32
|
+
a as Badge
|
|
33
33
|
};
|
|
34
34
|
//# sourceMappingURL=badge.es.js.map
|
package/dist/badge.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.es.js","sources":["../src/components/badge/Badge.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst badgeVariants = tv({\r\n base: \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent\",\r\n variants: {\r\n variant: {\r\n primary: \"bg-primary text-primary-foreground hover:bg-primary-600\",\r\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary-600\",\r\n outline: \"border border-primary text-primary hover:bg-primary-50\",\r\n danger: \"bg-danger text-danger-foreground hover:bg-danger-600\",\r\n success: \"bg-success text-success-foreground hover:bg-success-600\",\r\n warning: \"bg-warning text-warning-foreground hover:bg-warning-600\",\r\n info: \"bg-info text-info-foreground hover:bg-info-600\",\r\n \"primary-inverse\": \"bg-primary-100 text-primary-700 hover:bg-primary-50\",\r\n \"success-inverse\": \"bg-success-300 text-success-700 hover:bg-success-200\",\r\n \"danger-inverse\": \"bg-danger-300 text-danger-600 hover:bg-danger-200\",\r\n \"warning-inverse\": \"bg-warning-300 text-warning-800 hover:bg-warning-200\",\r\n \"info-inverse\": \"bg-info-300 text-info-700 hover:bg-info-200\",\r\n \"purple-inverse\": \"bg-purple-200 text-purple-500 hover:bg-purple-100\",\r\n \"coral-inverse\": \"bg-coral-300 text-coral-600 hover:bg-coral-200\",\r\n \"turquoise-inverse\": \"bg-turquoise-200 text-turquoise-600 hover:bg-turquoise-100\",\r\n \"lime-inverse\": \"bg-lime-300 text-lime-700 hover:bg-lime-200\",\r\n \"gray-inverse\": \"bg-gray-300 text-text-500 hover:bg-gray-200\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"primary\",\r\n },\r\n});\r\n\r\nexport type BadgeVariant = VariantProps<typeof badgeVariants>[\"variant\"];\r\n\r\ninterface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\r\n variant?: BadgeVariant;\r\n}\r\n\r\nconst Badge: React.FC<BadgeProps> = ({ className, variant, ...props }) => {\r\n return <div className={cn(badgeVariants({ variant }), className)} {...props} />;\r\n};\r\n\r\nexport { Badge, type BadgeProps };\r\n"],"names":["badgeVariants","tv","Badge","className","variant","props","jsx","cn"],"mappings":";;;AAOA,MAAMA,IAAgBC,EAAG;AAAA,EACvB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,MACN,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,MAClB,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAQKC,IAA8B,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,QACrD,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGP,EAAc,EAAE,SAAAI,EAAA,CAAS,GAAGD,CAAS,GAAI,GAAGE,EAAA,CAAO;"}
|
|
1
|
+
{"version":3,"file":"badge.es.js","sources":["../src/components/badge/Badge.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst badgeVariants = tv({\r\n base: \"mtx-inline-flex mtx-items-center mtx-rounded-full mtx-border mtx-px-2.5 mtx-py-0.5 mtx-text-xs mtx-font-semibold mtx-transition-colors focus:mtx-outline-none focus:mtx-ring-2 focus:mtx-ring-ring focus:mtx-ring-offset-2 mtx-border-transparent\",\r\n variants: {\r\n variant: {\r\n primary: \"mtx-bg-primary mtx-text-primary-foreground hover:mtx-bg-primary-600\",\r\n secondary: \"mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary-600\",\r\n outline: \"mtx-border mtx-border-primary mtx-text-primary hover:mtx-bg-primary-50\",\r\n danger: \"mtx-bg-danger mtx-text-danger-foreground hover:mtx-bg-danger-600\",\r\n success: \"mtx-bg-success mtx-text-success-foreground hover:mtx-bg-success-600\",\r\n warning: \"mtx-bg-warning mtx-text-warning-foreground hover:mtx-bg-warning-600\",\r\n info: \"mtx-bg-info mtx-text-info-foreground hover:mtx-bg-info-600\",\r\n \"primary-inverse\": \"mtx-bg-primary-100 mtx-text-primary-700 hover:mtx-bg-primary-50\",\r\n \"success-inverse\": \"mtx-bg-success-300 mtx-text-success-700 hover:mtx-bg-success-200\",\r\n \"danger-inverse\": \"mtx-bg-danger-300 mtx-text-danger-600 hover:mtx-bg-danger-200\",\r\n \"warning-inverse\": \"mtx-bg-warning-300 mtx-text-warning-800 hover:mtx-bg-warning-200\",\r\n \"info-inverse\": \"mtx-bg-info-300 mtx-text-info-700 hover:mtx-bg-info-200\",\r\n \"purple-inverse\": \"mtx-bg-purple-200 mtx-text-purple-500 hover:mtx-bg-purple-100\",\r\n \"coral-inverse\": \"mtx-bg-coral-300 mtx-text-coral-600 hover:mtx-bg-coral-200\",\r\n \"turquoise-inverse\": \"mtx-bg-turquoise-200 mtx-text-turquoise-600 hover:mtx-bg-turquoise-100\",\r\n \"lime-inverse\": \"mtx-bg-lime-300 mtx-text-lime-700 hover:mtx-bg-lime-200\",\r\n \"gray-inverse\": \"mtx-bg-gray-300 mtx-text-text-500 hover:mtx-bg-gray-200\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"primary\",\r\n },\r\n});\r\n\r\nexport type BadgeVariant = VariantProps<typeof badgeVariants>[\"variant\"];\r\n\r\ninterface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\r\n variant?: BadgeVariant;\r\n}\r\n\r\nconst Badge: React.FC<BadgeProps> = ({ className, variant, ...props }) => {\r\n return <div className={cn(badgeVariants({ variant }), className)} {...props} />;\r\n};\r\n\r\nexport { Badge, type BadgeProps };\r\n"],"names":["badgeVariants","tv","Badge","className","variant","props","jsx","cn"],"mappings":";;;AAOA,MAAMA,IAAgBC,EAAG;AAAA,EACvB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,MACN,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,MAClB,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAQKC,IAA8B,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,QACrD,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGP,EAAc,EAAE,SAAAI,EAAA,CAAS,GAAGD,CAAS,GAAI,GAAGE,EAAA,CAAO;"}
|
package/dist/breadcrumb.es.js
CHANGED
|
@@ -1,32 +1,42 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import * as
|
|
1
|
+
import { jsx as t, jsxs as i } from "react/jsx-runtime";
|
|
2
|
+
import * as s from "react";
|
|
3
3
|
import { Slot as c } from "@radix-ui/react-slot";
|
|
4
|
-
import { cn as
|
|
4
|
+
import { cn as m } from "./utils.es.js";
|
|
5
5
|
import { Elipsis as n, ChevronRight as d } from "@trsys-tech/matrix-icons";
|
|
6
|
-
const l =
|
|
6
|
+
const l = s.forwardRef(({ ...r }, e) => /* @__PURE__ */ t("nav", { ref: e, "aria-label": "breadcrumb", ...r }));
|
|
7
7
|
l.displayName = "Breadcrumb";
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
8
|
+
const x = s.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t(
|
|
9
|
+
"ol",
|
|
10
|
+
{
|
|
11
|
+
ref: a,
|
|
12
|
+
className: m(
|
|
13
|
+
"mtx-flex mtx-flex-wrap mtx-items-center mtx-gap-1.5 mtx-break-words mtx-text-sm mtx-text-muted-foreground sm:mtx-gap-2.5",
|
|
14
|
+
r
|
|
15
|
+
),
|
|
16
|
+
...e
|
|
17
|
+
}
|
|
18
|
+
));
|
|
19
|
+
x.displayName = "BreadcrumbList";
|
|
20
|
+
const p = s.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t("li", { ref: a, className: m("mtx-inline-flex mtx-items-center mtx-gap-1.5", r), ...e }));
|
|
21
|
+
p.displayName = "BreadcrumbItem";
|
|
22
|
+
const u = s.forwardRef(({ asChild: r, className: e, ...a }, o) => /* @__PURE__ */ t(r ? c : "a", { ref: o, className: m("mtx-transition-colors hover:mtx-text-foreground", e), ...a }));
|
|
23
|
+
u.displayName = "BreadcrumbLink";
|
|
24
|
+
const f = s.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t("span", { ref: a, role: "link", "aria-disabled": "true", "aria-current": "page", className: m("mtx-font-normal mtx-text-foreground", r), ...e }));
|
|
25
|
+
f.displayName = "BreadcrumbPage";
|
|
26
|
+
const b = ({ children: r, className: e, ...a }) => /* @__PURE__ */ t("li", { role: "presentation", "aria-hidden": "true", className: m("[&>svg]:mtx-w-3.5 [&>svg]:mtx-h-3", e), ...a, children: r ?? /* @__PURE__ */ t(d, {}) });
|
|
27
|
+
b.displayName = "BreadcrumbSeparator";
|
|
28
|
+
const N = ({ className: r, ...e }) => /* @__PURE__ */ i("span", { role: "presentation", "aria-hidden": "true", className: m("mtx-flex mtx-h-9 mtx-w-9 mtx-items-center mtx-justify-center", r), ...e, children: [
|
|
29
|
+
/* @__PURE__ */ t(n, { className: "mtx-h-4 mtx-w-4" }),
|
|
30
|
+
/* @__PURE__ */ t("span", { className: "mtx-sr-only", children: "More" })
|
|
21
31
|
] });
|
|
22
|
-
|
|
32
|
+
N.displayName = "BreadcrumbElipssis";
|
|
23
33
|
export {
|
|
24
34
|
l as Breadcrumb,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
35
|
+
N as BreadcrumbEllipsis,
|
|
36
|
+
p as BreadcrumbItem,
|
|
37
|
+
u as BreadcrumbLink,
|
|
38
|
+
x as BreadcrumbList,
|
|
39
|
+
f as BreadcrumbPage,
|
|
40
|
+
b as BreadcrumbSeparator
|
|
31
41
|
};
|
|
32
42
|
//# sourceMappingURL=breadcrumb.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumb.es.js","sources":["../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { ChevronRight, Elipsis } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst Breadcrumb = React.forwardRef<\r\n HTMLElement,\r\n React.ComponentPropsWithoutRef<\"nav\"> & {\r\n separator?: React.ReactNode;\r\n }\r\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />);\r\nBreadcrumb.displayName = \"Breadcrumb\";\r\n\r\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<\"ol\">>(({ className, ...props }, ref) => (\r\n <ol
|
|
1
|
+
{"version":3,"file":"breadcrumb.es.js","sources":["../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { ChevronRight, Elipsis } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst Breadcrumb = React.forwardRef<\r\n HTMLElement,\r\n React.ComponentPropsWithoutRef<\"nav\"> & {\r\n separator?: React.ReactNode;\r\n }\r\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />);\r\nBreadcrumb.displayName = \"Breadcrumb\";\r\n\r\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<\"ol\">>(({ className, ...props }, ref) => (\r\n <ol\r\n ref={ref}\r\n className={cn(\r\n \"mtx-flex mtx-flex-wrap mtx-items-center mtx-gap-1.5 mtx-break-words mtx-text-sm mtx-text-muted-foreground sm:mtx-gap-2.5\",\r\n className,\r\n )}\r\n {...props}\r\n />\r\n));\r\nBreadcrumbList.displayName = \"BreadcrumbList\";\r\n\r\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<\"li\">>(({ className, ...props }, ref) => (\r\n <li ref={ref} className={cn(\"mtx-inline-flex mtx-items-center mtx-gap-1.5\", className)} {...props} />\r\n));\r\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\r\n\r\nconst BreadcrumbLink = React.forwardRef<\r\n HTMLAnchorElement,\r\n React.ComponentPropsWithoutRef<\"a\"> & {\r\n asChild?: boolean;\r\n }\r\n>(({ asChild, className, ...props }, ref) => {\r\n const Comp = asChild ? Slot : \"a\";\r\n\r\n return <Comp ref={ref} className={cn(\"mtx-transition-colors hover:mtx-text-foreground\", className)} {...props} />;\r\n});\r\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\r\n\r\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<\"span\">>(({ className, ...props }, ref) => (\r\n <span ref={ref} role=\"link\" aria-disabled=\"true\" aria-current=\"page\" className={cn(\"mtx-font-normal mtx-text-foreground\", className)} {...props} />\r\n));\r\nBreadcrumbPage.displayName = \"BreadcrumbPage\";\r\n\r\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<\"li\">) => (\r\n <li role=\"presentation\" aria-hidden=\"true\" className={cn(\"[&>svg]:mtx-w-3.5 [&>svg]:mtx-h-3\", className)} {...props}>\r\n {children ?? <ChevronRight />}\r\n </li>\r\n);\r\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\";\r\n\r\nconst BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<\"span\">) => (\r\n <span role=\"presentation\" aria-hidden=\"true\" className={cn(\"mtx-flex mtx-h-9 mtx-w-9 mtx-items-center mtx-justify-center\", className)} {...props}>\r\n <Elipsis className=\"mtx-h-4 mtx-w-4\" />\r\n <span className=\"mtx-sr-only\">More</span>\r\n </span>\r\n);\r\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\";\r\n\r\nexport { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };\r\n"],"names":["Breadcrumb","React","props","ref","jsx","BreadcrumbList","className","cn","BreadcrumbItem","BreadcrumbLink","asChild","Slot","BreadcrumbPage","BreadcrumbSeparator","children","ChevronRight","BreadcrumbEllipsis","jsxs","Elipsis"],"mappings":";;;;;AAQA,MAAMA,IAAaC,EAAM,WAKvB,CAAC,EAAE,GAAGC,EAAA,GAASC,MAAQ,gBAAAC,EAAC,SAAI,KAAAD,GAAU,cAAW,cAAc,GAAGD,GAAO,CAAE;AAC7EF,EAAW,cAAc;AAEzB,MAAMK,IAAiBJ,EAAM,WAAmE,CAAC,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASC,MACxH,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWI;AAAA,MACT;AAAA,MACAD;AAAA,IAAA;AAAA,IAED,GAAGJ;AAAA,EAAA;AACN,CACD;AACDG,EAAe,cAAc;AAE7B,MAAMG,IAAiBP,EAAM,WAAgE,CAAC,EAAE,WAAAK,GAAW,GAAGJ,KAASC,wBACpH,MAAA,EAAG,KAAAA,GAAU,WAAWI,EAAG,gDAAgDD,CAAS,GAAI,GAAGJ,GAAO,CACpG;AACDM,EAAe,cAAc;AAE7B,MAAMC,IAAiBR,EAAM,WAK3B,CAAC,EAAE,SAAAS,GAAS,WAAAJ,GAAW,GAAGJ,EAAA,GAASC,MAG5B,gBAAAC,EAFMM,IAAUC,IAAO,OAEjB,KAAAR,GAAU,WAAWI,EAAG,mDAAmDD,CAAS,GAAI,GAAGJ,GAAO,CAChH;AACDO,EAAe,cAAc;AAE7B,MAAMG,IAAiBX,EAAM,WAAoE,CAAC,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASC,MACzH,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAU,MAAK,QAAO,iBAAc,QAAO,gBAAa,QAAO,WAAWI,EAAG,uCAAuCD,CAAS,GAAI,GAAGJ,EAAA,CAAO,CAClJ;AACDU,EAAe,cAAc;AAE7B,MAAMC,IAAsB,CAAC,EAAE,UAAAC,GAAU,WAAAR,GAAW,GAAGJ,QACrD,gBAAAE,EAAC,MAAA,EAAG,MAAK,gBAAe,eAAY,QAAO,WAAWG,EAAG,qCAAqCD,CAAS,GAAI,GAAGJ,GAC3G,UAAAY,KAAY,gBAAAV,EAACW,GAAA,CAAA,CAAa,EAAA,CAC7B;AAEFF,EAAoB,cAAc;AAElC,MAAMG,IAAqB,CAAC,EAAE,WAAAV,GAAW,GAAGJ,EAAA,MAC1C,gBAAAe,EAAC,QAAA,EAAK,MAAK,gBAAe,eAAY,QAAO,WAAWV,EAAG,gEAAgED,CAAS,GAAI,GAAGJ,GACzI,UAAA;AAAA,EAAA,gBAAAE,EAACc,GAAA,EAAQ,WAAU,kBAAA,CAAkB;AAAA,EACrC,gBAAAd,EAAC,QAAA,EAAK,WAAU,eAAc,UAAA,OAAA,CAAI;AAAA,EAAA,CACpC;AAEFY,EAAmB,cAAc;"}
|
package/dist/button.es.js
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { Spinner as
|
|
4
|
-
import { Slot as
|
|
5
|
-
import { tv as
|
|
6
|
-
import { cn as
|
|
7
|
-
const
|
|
8
|
-
base: "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500",
|
|
1
|
+
import { jsxs as v, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import * as f from "react";
|
|
3
|
+
import { Spinner as u } from "@trsys-tech/matrix-icons";
|
|
4
|
+
import { Slot as p, Slottable as b } from "@radix-ui/react-slot";
|
|
5
|
+
import { tv as d } from "tailwind-variants";
|
|
6
|
+
import { cn as y } from "./utils.es.js";
|
|
7
|
+
const l = d({
|
|
8
|
+
base: "mtx-inline-flex mtx-items-center mtx-justify-center mtx-gap-1 mtx-whitespace-nowrap mtx-rounded-sm mtx-text-xs mtx-font-normal mtx-transition-colors focus-visible:mtx-outline-none disabled:mtx-pointer-events-none disabled:mtx-bg-muted disabled:mtx-text-gray-500",
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
|
-
primary: "bg-primary text-primary-foreground hover:bg-primary-600 focus:border-primary focus:ring focus:ring-primary-300 active:bg-primary active:ring active:ring-1 active:ring-primary active:ring-offset-2",
|
|
12
|
-
outline: "border border-primary text-primary hover:bg-primary-50 focus:bg-primary-50 focus:border-primary-100 focus:ring focus:ring-primary-100 active:bg-primary-50 active:border-primary active:ring-1 active:ring-primary active:ring-offset-2 disabled:border-gray-400",
|
|
13
|
-
text: "text-text [&>svg]:text-primary border border-transparent hover:bg-primary-50 focus:ring focus:ring-primary-100 active:ring-1 active:ring-primary disabled:text-text-300 [&>svg]:disabled:text-text-300 disabled:bg-transparent",
|
|
14
|
-
danger: "bg-danger text-danger-foreground hover:bg-danger-600 focus:ring focus:ring-danger-400 active:bg-danger active:ring-1 active:ring-danger active:ring-offset-2",
|
|
15
|
-
warning: "bg-warning text-warning-foreground hover:bg-warning-600 focus:ring focus:ring-warning-400 active:bg-warning active:ring-1 active:ring-warning active:ring-offset-2",
|
|
16
|
-
success: "bg-success text-success-foreground hover:bg-success-600 focus:ring focus:ring-success-400 active:bg-success active:ring-1 active:ring-success active:ring-offset-2",
|
|
17
|
-
info: "bg-info text-info-foreground hover:bg-info-600 focus:ring focus:ring-info-400 active:bg-info active:ring-1 active:ring-info active:ring-offset-2",
|
|
18
|
-
"primary-on-dark": "bg-gray-0 text-primary hover:bg-primary-50 focus:bg-gray-0 focus:border-none focus:ring focus:ring-primary-100 active:ring-0 active:bg-gray-0 active:outline active:outline-2 active:outline-gray-0 active:outline-offset-1",
|
|
19
|
-
"outline-on-dark": "border border-gray-0 text-gray-0 hover:bg-primary-100 hover:text-primary focus:text-primary focus:bg-primary-50 focus:border-primary-50 focus:ring focus:ring-primary-100 active:text-gray-0 active:bg-transparent active:border-gray-0 active:ring-0 active:outline active:outline-1 active:outline-gray-0 active:outline-offset-2",
|
|
20
|
-
"text-on-dark": "text-gray-0 hover:bg-primary-50 hover:text-text [&>svg]:hover:text-primary focus:text-text focus:bg-transparent focus:border-none [&>svg]:focus:text-primary-100 focus:ring focus:ring-primary-100 active:ring-0 active:bg-primary-50 active:text-text [&>svg]:active:text-primary active:outline active:outline-1 active:outline-gray-0 active:outline-offset-1"
|
|
11
|
+
primary: "mtx-bg-primary mtx-text-primary-foreground hover:mtx-bg-primary-600 focus:mtx-border-primary focus:mtx-ring focus:mtx-ring-primary-300 active:mtx-bg-primary active:mtx-ring active:mtx-ring-1 active:mtx-ring-primary active:mtx-ring-offset-2",
|
|
12
|
+
outline: "mtx-border mtx-border-primary mtx-text-primary hover:mtx-bg-primary-50 focus:mtx-bg-primary-50 focus:mtx-border-primary-100 focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-bg-primary-50 active:mtx-border-primary active:mtx-ring-1 active:mtx-ring-primary active:mtx-ring-offset-2 disabled:mtx-border-gray-400",
|
|
13
|
+
text: "mtx-text-text [&>svg]:mtx-text-primary mtx-border mtx-border-transparent hover:mtx-bg-primary-50 focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-ring-1 active:mtx-ring-primary disabled:mtx-text-text-300 [&>svg]:disabled:mtx-text-text-300 disabled:mtx-bg-transparent",
|
|
14
|
+
danger: "mtx-bg-danger mtx-text-danger-foreground hover:mtx-bg-danger-600 focus:mtx-ring focus:mtx-ring-danger-400 active:mtx-bg-danger active:mtx-ring-1 active:mtx-ring-danger active:mtx-ring-offset-2",
|
|
15
|
+
warning: "mtx-bg-warning mtx-text-warning-foreground hover:mtx-bg-warning-600 focus:mtx-ring focus:mtx-ring-warning-400 active:mtx-bg-warning active:mtx-ring-1 active:mtx-ring-warning active:mtx-ring-offset-2",
|
|
16
|
+
success: "mtx-bg-success mtx-text-success-foreground hover:mtx-bg-success-600 focus:mtx-ring focus:mtx-ring-success-400 active:mtx-bg-success active:mtx-ring-1 active:mtx-ring-success active:mtx-ring-offset-2",
|
|
17
|
+
info: "mtx-bg-info mtx-text-info-foreground hover:mtx-bg-info-600 focus:mtx-ring focus:mtx-ring-info-400 active:mtx-bg-info active:mtx-ring-1 active:mtx-ring-info active:mtx-ring-offset-2",
|
|
18
|
+
"primary-on-dark": "mtx-bg-gray-0 mtx-text-primary hover:mtx-bg-primary-50 focus:mtx-bg-gray-0 focus:mtx-border-none focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-ring-0 active:mtx-bg-gray-0 active:mtx-outline active:mtx-outline-2 active:mtx-outline-gray-0 active:mtx-outline-offset-1",
|
|
19
|
+
"outline-on-dark": "mtx-border mtx-border-gray-0 mtx-text-gray-0 hover:mtx-bg-primary-100 hover:mtx-text-primary focus:mtx-text-primary focus:mtx-bg-primary-50 focus:mtx-border-primary-50 focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-text-gray-0 active:mtx-bg-transparent active:mtx-border-gray-0 active:mtx-ring-0 active:mtx-outline active:mtx-outline-1 active:mtx-outline-gray-0 active:mtx-outline-offset-2",
|
|
20
|
+
"text-on-dark": "mtx-text-gray-0 hover:mtx-bg-primary-50 hover:mtx-text-text [&>svg]:hover:mtx-text-primary focus:mtx-text-text focus:mtx-bg-transparent focus:mtx-border-none [&>svg]:focus:mtx-text-primary-100 focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-ring-0 active:mtx-bg-primary-50 active:mtx-text-text [&>svg]:active:mtx-text-primary active:mtx-outline active:mtx-outline-1 active:mtx-outline-gray-0 active:mtx-outline-offset-1"
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
|
-
md: "h-8 p-2 [&>svg]:h-5 [&>svg]:w-5",
|
|
24
|
-
sm: "h-6 p-1 [&>svg]:h-4 [&>svg]:w-4",
|
|
25
|
-
lg: "h-10 rounded-md p-4 text-sm [&>svg]:h-6 [&>svg]:w-6"
|
|
23
|
+
md: "mtx-h-8 mtx-p-2 [&>svg]:mtx-h-5 [&>svg]:mtx-w-5",
|
|
24
|
+
sm: "mtx-h-6 mtx-p-1 [&>svg]:mtx-h-4 [&>svg]:mtx-w-4",
|
|
25
|
+
lg: "mtx-h-10 mtx-rounded-md mtx-p-4 mtx-text-sm [&>svg]:mtx-h-6 [&>svg]:mtx-w-6"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
defaultVariants: {
|
|
29
29
|
variant: "primary",
|
|
30
30
|
size: "md"
|
|
31
31
|
}
|
|
32
|
-
}), h =
|
|
33
|
-
({ className:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
/* @__PURE__ */
|
|
37
|
-
|
|
32
|
+
}), h = f.forwardRef(
|
|
33
|
+
({ className: m, variant: e, size: i, asChild: x = !1, children: a, loading: t, disabled: n, startIcon: o, endIcon: g, ...s }, c) => /* @__PURE__ */ v(x ? p : "button", { className: y(l({ variant: e, size: i, className: m })), ref: c, disabled: n || t, ...s, children: [
|
|
34
|
+
t ? /* @__PURE__ */ r(u, {}) : null,
|
|
35
|
+
o,
|
|
36
|
+
/* @__PURE__ */ r(b, { children: a }),
|
|
37
|
+
g
|
|
38
38
|
] })
|
|
39
39
|
);
|
|
40
40
|
h.displayName = "Button";
|
|
41
41
|
export {
|
|
42
42
|
h as Button,
|
|
43
|
-
|
|
43
|
+
l as buttonVariants
|
|
44
44
|
};
|
|
45
45
|
//# sourceMappingURL=button.es.js.map
|
package/dist/button.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.es.js","sources":["../src/components/button/Button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Spinner } from \"@trsys-tech/matrix-icons\";\r\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst buttonVariants = tv({\r\n base: \"inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500\",\r\n variants: {\r\n variant: {\r\n primary:\r\n \"bg-primary text-primary-foreground hover:bg-primary-600 focus:border-primary focus:ring focus:ring-primary-300 active:bg-primary active:ring active:ring-1 active:ring-primary active:ring-offset-2\",\r\n outline:\r\n \"border border-primary text-primary hover:bg-primary-50 focus:bg-primary-50 focus:border-primary-100 focus:ring focus:ring-primary-100 active:bg-primary-50 active:border-primary active:ring-1 active:ring-primary active:ring-offset-2 disabled:border-gray-400\",\r\n text: \"text-text [&>svg]:text-primary border border-transparent hover:bg-primary-50 focus:ring focus:ring-primary-100 active:ring-1 active:ring-primary disabled:text-text-300 [&>svg]:disabled:text-text-300 disabled:bg-transparent\",\r\n danger:\r\n \"bg-danger text-danger-foreground hover:bg-danger-600 focus:ring focus:ring-danger-400 active:bg-danger active:ring-1 active:ring-danger active:ring-offset-2\",\r\n warning:\r\n \"bg-warning text-warning-foreground hover:bg-warning-600 focus:ring focus:ring-warning-400 active:bg-warning active:ring-1 active:ring-warning active:ring-offset-2\",\r\n success:\r\n \"bg-success text-success-foreground hover:bg-success-600 focus:ring focus:ring-success-400 active:bg-success active:ring-1 active:ring-success active:ring-offset-2\",\r\n info: \"bg-info text-info-foreground hover:bg-info-600 focus:ring focus:ring-info-400 active:bg-info active:ring-1 active:ring-info active:ring-offset-2\",\r\n \"primary-on-dark\":\r\n \"bg-gray-0 text-primary hover:bg-primary-50 focus:bg-gray-0 focus:border-none focus:ring focus:ring-primary-100 active:ring-0 active:bg-gray-0 active:outline active:outline-2 active:outline-gray-0 active:outline-offset-1\",\r\n \"outline-on-dark\":\r\n \"border border-gray-0 text-gray-0 hover:bg-primary-100 hover:text-primary focus:text-primary focus:bg-primary-50 focus:border-primary-50 focus:ring focus:ring-primary-100 active:text-gray-0 active:bg-transparent active:border-gray-0 active:ring-0 active:outline active:outline-1 active:outline-gray-0 active:outline-offset-2\",\r\n \"text-on-dark\":\r\n \"text-gray-0 hover:bg-primary-50 hover:text-text [&>svg]:hover:text-primary focus:text-text focus:bg-transparent focus:border-none [&>svg]:focus:text-primary-100 focus:ring focus:ring-primary-100 active:ring-0 active:bg-primary-50 active:text-text [&>svg]:active:text-primary active:outline active:outline-1 active:outline-gray-0 active:outline-offset-1\",\r\n },\r\n size: {\r\n md: \"h-8 p-2 [&>svg]:h-5 [&>svg]:w-5\",\r\n sm: \"h-6 p-1 [&>svg]:h-4 [&>svg]:w-4\",\r\n lg: \"h-10 rounded-md p-4 text-sm [&>svg]:h-6 [&>svg]:w-6\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"primary\",\r\n size: \"md\",\r\n },\r\n});\r\n\r\nexport type ButtonVariant = VariantProps<typeof buttonVariants>[\"variant\"];\r\nexport type ButtonSize = VariantProps<typeof buttonVariants>[\"size\"];\r\n\r\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n asChild?: boolean;\r\n loading?: boolean;\r\n startIcon?: React.ReactNode;\r\n endIcon?: React.ReactNode;\r\n variant?: ButtonVariant;\r\n size?: ButtonSize;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ className, variant, size, asChild = false, children, loading, disabled, startIcon, endIcon, ...props }, ref) => {\r\n const Comp = asChild ? Slot : \"button\";\r\n return (\r\n <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} disabled={disabled || loading} {...props}>\r\n {loading ? <Spinner /> : null}\r\n {startIcon}\r\n <Slottable>{children}</Slottable>\r\n {endIcon}\r\n </Comp>\r\n );\r\n },\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, type ButtonProps, buttonVariants };\r\n"],"names":["buttonVariants","tv","Button","React","className","variant","size","asChild","children","loading","disabled","startIcon","endIcon","props","ref","Slot","cn","jsx","Spinner","Slottable"],"mappings":";;;;;;AASA,MAAMA,IAAiBC,EAAG;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,QACE;AAAA,MACF,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,mBACE;AAAA,MACF,mBACE;AAAA,MACF,gBACE;AAAA,IAAA;AAAA,IAEJ,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV,CAAC,GAcKC,IAASC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,SAAAC,IAAU,IAAO,UAAAC,GAAU,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GAASC,wBAC5FP,IAAUQ,IAAO,UAE3B,EAAK,WAAWC,EAAGhB,EAAe,EAAE,SAAAK,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAW,CAAC,GAAG,KAAAU,GAAU,UAAUJ,KAAYD,GAAU,GAAGI,GAC7G,UAAA;AAAA,IAAAJ,IAAU,gBAAAQ,EAACC,KAAQ,IAAK;AAAA,IACxBP;AAAA,IACD,gBAAAM,EAACE,KAAW,UAAAX,GAAS;AAAA,IACpBI;AAAA,EAAA,GACH;AAGN;AACAV,EAAO,cAAc;"}
|
|
1
|
+
{"version":3,"file":"button.es.js","sources":["../src/components/button/Button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Spinner } from \"@trsys-tech/matrix-icons\";\r\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst buttonVariants = tv({\r\n base: \"mtx-inline-flex mtx-items-center mtx-justify-center mtx-gap-1 mtx-whitespace-nowrap mtx-rounded-sm mtx-text-xs mtx-font-normal mtx-transition-colors focus-visible:mtx-outline-none disabled:mtx-pointer-events-none disabled:mtx-bg-muted disabled:mtx-text-gray-500\",\r\n variants: {\r\n variant: {\r\n primary:\r\n \"mtx-bg-primary mtx-text-primary-foreground hover:mtx-bg-primary-600 focus:mtx-border-primary focus:mtx-ring focus:mtx-ring-primary-300 active:mtx-bg-primary active:mtx-ring active:mtx-ring-1 active:mtx-ring-primary active:mtx-ring-offset-2\",\r\n outline:\r\n \"mtx-border mtx-border-primary mtx-text-primary hover:mtx-bg-primary-50 focus:mtx-bg-primary-50 focus:mtx-border-primary-100 focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-bg-primary-50 active:mtx-border-primary active:mtx-ring-1 active:mtx-ring-primary active:mtx-ring-offset-2 disabled:mtx-border-gray-400\",\r\n text: \"mtx-text-text [&>svg]:mtx-text-primary mtx-border mtx-border-transparent hover:mtx-bg-primary-50 focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-ring-1 active:mtx-ring-primary disabled:mtx-text-text-300 [&>svg]:disabled:mtx-text-text-300 disabled:mtx-bg-transparent\",\r\n danger:\r\n \"mtx-bg-danger mtx-text-danger-foreground hover:mtx-bg-danger-600 focus:mtx-ring focus:mtx-ring-danger-400 active:mtx-bg-danger active:mtx-ring-1 active:mtx-ring-danger active:mtx-ring-offset-2\",\r\n warning:\r\n \"mtx-bg-warning mtx-text-warning-foreground hover:mtx-bg-warning-600 focus:mtx-ring focus:mtx-ring-warning-400 active:mtx-bg-warning active:mtx-ring-1 active:mtx-ring-warning active:mtx-ring-offset-2\",\r\n success:\r\n \"mtx-bg-success mtx-text-success-foreground hover:mtx-bg-success-600 focus:mtx-ring focus:mtx-ring-success-400 active:mtx-bg-success active:mtx-ring-1 active:mtx-ring-success active:mtx-ring-offset-2\",\r\n info: \"mtx-bg-info mtx-text-info-foreground hover:mtx-bg-info-600 focus:mtx-ring focus:mtx-ring-info-400 active:mtx-bg-info active:mtx-ring-1 active:mtx-ring-info active:mtx-ring-offset-2\",\r\n \"primary-on-dark\":\r\n \"mtx-bg-gray-0 mtx-text-primary hover:mtx-bg-primary-50 focus:mtx-bg-gray-0 focus:mtx-border-none focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-ring-0 active:mtx-bg-gray-0 active:mtx-outline active:mtx-outline-2 active:mtx-outline-gray-0 active:mtx-outline-offset-1\",\r\n \"outline-on-dark\":\r\n \"mtx-border mtx-border-gray-0 mtx-text-gray-0 hover:mtx-bg-primary-100 hover:mtx-text-primary focus:mtx-text-primary focus:mtx-bg-primary-50 focus:mtx-border-primary-50 focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-text-gray-0 active:mtx-bg-transparent active:mtx-border-gray-0 active:mtx-ring-0 active:mtx-outline active:mtx-outline-1 active:mtx-outline-gray-0 active:mtx-outline-offset-2\",\r\n \"text-on-dark\":\r\n \"mtx-text-gray-0 hover:mtx-bg-primary-50 hover:mtx-text-text [&>svg]:hover:mtx-text-primary focus:mtx-text-text focus:mtx-bg-transparent focus:mtx-border-none [&>svg]:focus:mtx-text-primary-100 focus:mtx-ring focus:mtx-ring-primary-100 active:mtx-ring-0 active:mtx-bg-primary-50 active:mtx-text-text [&>svg]:active:mtx-text-primary active:mtx-outline active:mtx-outline-1 active:mtx-outline-gray-0 active:mtx-outline-offset-1\",\r\n },\r\n size: {\r\n md: \"mtx-h-8 mtx-p-2 [&>svg]:mtx-h-5 [&>svg]:mtx-w-5\",\r\n sm: \"mtx-h-6 mtx-p-1 [&>svg]:mtx-h-4 [&>svg]:mtx-w-4\",\r\n lg: \"mtx-h-10 mtx-rounded-md mtx-p-4 mtx-text-sm [&>svg]:mtx-h-6 [&>svg]:mtx-w-6\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"primary\",\r\n size: \"md\",\r\n },\r\n});\r\n\r\nexport type ButtonVariant = VariantProps<typeof buttonVariants>[\"variant\"];\r\nexport type ButtonSize = VariantProps<typeof buttonVariants>[\"size\"];\r\n\r\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n asChild?: boolean;\r\n loading?: boolean;\r\n startIcon?: React.ReactNode;\r\n endIcon?: React.ReactNode;\r\n variant?: ButtonVariant;\r\n size?: ButtonSize;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ className, variant, size, asChild = false, children, loading, disabled, startIcon, endIcon, ...props }, ref) => {\r\n const Comp = asChild ? Slot : \"button\";\r\n return (\r\n <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} disabled={disabled || loading} {...props}>\r\n {loading ? <Spinner /> : null}\r\n {startIcon}\r\n <Slottable>{children}</Slottable>\r\n {endIcon}\r\n </Comp>\r\n );\r\n },\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, type ButtonProps, buttonVariants };\r\n"],"names":["buttonVariants","tv","Button","React","className","variant","size","asChild","children","loading","disabled","startIcon","endIcon","props","ref","Slot","cn","jsx","Spinner","Slottable"],"mappings":";;;;;;AASA,MAAMA,IAAiBC,EAAG;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,QACE;AAAA,MACF,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,mBACE;AAAA,MACF,mBACE;AAAA,MACF,gBACE;AAAA,IAAA;AAAA,IAEJ,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV,CAAC,GAcKC,IAASC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,SAAAC,IAAU,IAAO,UAAAC,GAAU,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GAASC,wBAC5FP,IAAUQ,IAAO,UAE3B,EAAK,WAAWC,EAAGhB,EAAe,EAAE,SAAAK,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAW,CAAC,GAAG,KAAAU,GAAU,UAAUJ,KAAYD,GAAU,GAAGI,GAC7G,UAAA;AAAA,IAAAJ,IAAU,gBAAAQ,EAACC,KAAQ,IAAK;AAAA,IACxBP;AAAA,IACD,gBAAAM,EAACE,KAAW,UAAAX,GAAS;AAAA,IACpBI;AAAA,EAAA,GACH;AAGN;AACAV,EAAO,cAAc;"}
|