@mzc-fe/design-system 0.0.9-rc.0 → 0.0.9-rc.2

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.
@@ -19,7 +19,7 @@ const u = s(
19
19
  variant: {
20
20
  default: ["bg-primary text-primary-foreground", "hover:bg-primary/90"],
21
21
  destructive: [
22
- "bg-destructive text-white",
22
+ "bg-destructive dark:bg-destructive/60 text-white",
23
23
  "hover:bg-destructive/90",
24
24
  "focus-visible:ring-destructive/20",
25
25
  "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
@@ -48,13 +48,7 @@ const u = s(
48
48
  }
49
49
  }
50
50
  );
51
- function f({
52
- className: t,
53
- variant: e = "default",
54
- size: r = "default",
55
- asChild: i = !1,
56
- ...n
57
- }) {
51
+ function f({ className: t, variant: e = "default", size: r = "default", asChild: i = !1, ...n }) {
58
52
  return /* @__PURE__ */ o(
59
53
  i ? a : "button",
60
54
  {
@@ -6,12 +6,7 @@ import { Input as c } from "../input/input.js";
6
6
  import { Textarea as g } from "../textarea/textarea.js";
7
7
  import { Button as b } from "../button/button.js";
8
8
  const l = d.createContext({});
9
- function w({
10
- className: a,
11
- readOnly: t,
12
- disabled: r,
13
- ...n
14
- }) {
9
+ function w({ className: a, readOnly: t, disabled: r, ...n }) {
15
10
  return /* @__PURE__ */ e(l.Provider, { value: { readOnly: t, disabled: r }, children: /* @__PURE__ */ e(
16
11
  "div",
17
12
  {
@@ -34,8 +29,8 @@ function w({
34
29
  // Error state.
35
30
  "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
36
31
  // ReadOnly state.
37
- "data-[readonly=true]:bg-muted",
38
- "data-[readonly=true]:has-[[data-slot=input-group-control]:focus-visible]:ring-0 data-[readonly=true]:has-[[data-slot=input-group-control]:focus-visible]:border-input",
32
+ "data-[readonly=true]:bg-accent dark:bg-input/50",
33
+ "data-[readonly=true]:has-[[data-slot=input-group-control]:focus-visible]:border-input data-[readonly=true]:has-[[data-slot=input-group-control]:focus-visible]:ring-0",
39
34
  a
40
35
  ),
41
36
  ...n
@@ -43,7 +38,14 @@ function w({
43
38
  ) });
44
39
  }
45
40
  const m = p(
46
- "text-muted-foreground flex h-auto items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] cursor-text group-data-[readonly=true]/input-group:cursor-default group-data-[disabled=true]/input-group:opacity-50",
41
+ [
42
+ "flex h-auto items-center justify-center gap-2 py-1.5",
43
+ "text-sm font-medium",
44
+ "text-muted-foreground select-none",
45
+ "[&>svg:not([class*='size-'])]:size-4",
46
+ "[&>kbd]:rounded-sm",
47
+ "cursor-text group-data-[readonly=true]/input-group:cursor-default group-data-[disabled=true]/input-group:opacity-50"
48
+ ],
47
49
  {
48
50
  variants: {
49
51
  align: {
@@ -58,11 +60,7 @@ const m = p(
58
60
  }
59
61
  }
60
62
  );
61
- function G({
62
- className: a,
63
- align: t = "inline-start",
64
- ...r
65
- }) {
63
+ function G({ className: a, align: t = "inline-start", ...r }) {
66
64
  return /* @__PURE__ */ e(
67
65
  "div",
68
66
  {
@@ -76,22 +74,19 @@ function G({
76
74
  }
77
75
  );
78
76
  }
79
- const f = p(
80
- "text-sm shadow-none flex gap-2 items-center",
81
- {
82
- variants: {
83
- size: {
84
- xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
85
- sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
86
- "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
87
- "icon-sm": "size-8 p-0 has-[>svg]:p-0"
88
- }
89
- },
90
- defaultVariants: {
91
- size: "xs"
77
+ const f = p("text-sm shadow-none flex gap-2 items-center", {
78
+ variants: {
79
+ size: {
80
+ xs: "h-6 gap-1 px-2 rounded-[3px] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
81
+ sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
82
+ "icon-xs": "size-6 rounded-[3px] p-0 has-[>svg]:p-0",
83
+ "icon-sm": "size-8 rounded-md p-0 has-[>svg]:p-0"
92
84
  }
85
+ },
86
+ defaultVariants: {
87
+ size: "xs"
93
88
  }
94
- );
89
+ });
95
90
  function I({
96
91
  className: a,
97
92
  type: t = "button",
@@ -110,10 +105,7 @@ function I({
110
105
  }
111
106
  );
112
107
  }
113
- function N({
114
- className: a,
115
- ...t
116
- }) {
108
+ function N({ className: a, ...t }) {
117
109
  return /* @__PURE__ */ e(
118
110
  "span",
119
111
  {
@@ -1,7 +1,7 @@
1
1
  import { jsx as t, jsxs as i } from "react/jsx-runtime";
2
2
  import * as d from "react";
3
3
  import * as r from "@radix-ui/react-select";
4
- import { CheckIcon as m, ChevronDownIcon as c, ChevronUpIcon as p } from "lucide-react";
4
+ import { CheckIcon as p, ChevronDownIcon as c, ChevronUpIcon as m } from "lucide-react";
5
5
  import { cn as s } from "../../lib/utils.js";
6
6
  const u = d.createContext({});
7
7
  function b({ readOnly: e, open: a, onOpenChange: o, onValueChange: l, ...n }) {
@@ -38,7 +38,7 @@ function S({ className: e, size: a = "default", children: o, ...l }) {
38
38
  "transition-[color,box-shadow] outline-none",
39
39
  "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
40
40
  "disabled:cursor-not-allowed disabled:opacity-50",
41
- "data-[readonly=true]:bg-muted data-[readonly=true]:cursor-default",
41
+ "data-[readonly=true]:bg-accent dark:data-[readonly=true]:bg-input/50 data-[readonly=true]:cursor-default",
42
42
  "data-[readonly=true]:focus-visible:border-input data-[readonly=true]:focus-visible:ring-0",
43
43
  "data-[size=default]:h-9 data-[size=sm]:h-8",
44
44
  "data-[placeholder]:text-muted-foreground",
@@ -117,7 +117,7 @@ function C({ className: e, children: a, ...o }) {
117
117
  ),
118
118
  ...o,
119
119
  children: [
120
- /* @__PURE__ */ t("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(r.ItemIndicator, { children: /* @__PURE__ */ t(m, { className: "size-4" }) }) }),
120
+ /* @__PURE__ */ t("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(r.ItemIndicator, { children: /* @__PURE__ */ t(p, { className: "size-4" }) }) }),
121
121
  /* @__PURE__ */ t(r.ItemText, { children: a })
122
122
  ]
123
123
  }
@@ -143,7 +143,7 @@ function f({
143
143
  "data-slot": "select-scroll-up-button",
144
144
  className: s("flex cursor-default items-center justify-center py-1", e),
145
145
  ...a,
146
- children: /* @__PURE__ */ t(p, { className: "size-4" })
146
+ children: /* @__PURE__ */ t(m, { className: "size-4" })
147
147
  }
148
148
  );
149
149
  }
@@ -0,0 +1 @@
1
+ export declare const ErrorIcon: ({ width, height, fill, ...props }: React.ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ import { jsx as C } from "react/jsx-runtime";
2
+ const t = ({ width: e = 20, height: o = 20, fill: r = "#0A0A0A", ...l }) => /* @__PURE__ */ C("svg", { width: e, height: o, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l, children: /* @__PURE__ */ C(
3
+ "path",
4
+ {
5
+ fillRule: "evenodd",
6
+ clipRule: "evenodd",
7
+ d: "M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z",
8
+ fill: r
9
+ }
10
+ ) });
11
+ export {
12
+ t as ErrorIcon
13
+ };
@@ -0,0 +1 @@
1
+ export declare const InfoIcon: ({ width, height, fill, ...props }: React.ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ import { jsx as C } from "react/jsx-runtime";
2
+ const t = ({ width: e = 20, height: o = 20, fill: n = "#0A0A0A", ...l }) => /* @__PURE__ */ C("svg", { width: e, height: o, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l, children: /* @__PURE__ */ C(
3
+ "path",
4
+ {
5
+ fillRule: "evenodd",
6
+ clipRule: "evenodd",
7
+ d: "M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM11 6C11 6.26522 10.8946 6.51957 10.7071 6.70711C10.5196 6.89464 10.2652 7 10 7C9.73478 7 9.48043 6.89464 9.29289 6.70711C9.10536 6.51957 9 6.26522 9 6C9 5.73478 9.10536 5.48043 9.29289 5.29289C9.48043 5.10536 9.73478 5 10 5C10.2652 5 10.5196 5.10536 10.7071 5.29289C10.8946 5.48043 11 5.73478 11 6ZM9 9C8.80109 9 8.61032 9.07902 8.46967 9.21967C8.32902 9.36032 8.25 9.55109 8.25 9.75C8.25 9.94891 8.32902 10.1397 8.46967 10.2803C8.61032 10.421 8.80109 10.5 9 10.5H9.253C9.29041 10.5 9.32734 10.5084 9.36106 10.5246C9.39479 10.5408 9.42445 10.5643 9.44787 10.5935C9.47128 10.6227 9.48785 10.6567 9.49636 10.6932C9.50486 10.7296 9.50508 10.7675 9.497 10.804L9.038 12.87C8.98108 13.1259 8.98237 13.3913 9.04179 13.6466C9.10121 13.902 9.21723 14.1407 9.38129 14.3452C9.54535 14.5496 9.75325 14.7146 9.98963 14.828C10.226 14.9413 10.4848 15.0001 10.747 15H11C11.1989 15 11.3897 14.921 11.5303 14.7803C11.671 14.6397 11.75 14.4489 11.75 14.25C11.75 14.0511 11.671 13.8603 11.5303 13.7197C11.3897 13.579 11.1989 13.5 11 13.5H10.747C10.7096 13.5 10.6727 13.4916 10.6389 13.4754C10.6052 13.4592 10.5755 13.4357 10.5521 13.4065C10.5287 13.3773 10.5121 13.3433 10.5036 13.3068C10.4951 13.2704 10.4949 13.2325 10.503 13.196L10.962 11.13C11.0189 10.8741 11.0176 10.6087 10.9582 10.3534C10.8988 10.098 10.7828 9.8593 10.6187 9.65483C10.4547 9.45036 10.2468 9.28536 10.0104 9.17201C9.77398 9.05867 9.51515 8.99989 9.253 9H9Z",
8
+ fill: n
9
+ }
10
+ ) });
11
+ export {
12
+ t as InfoIcon
13
+ };
@@ -0,0 +1 @@
1
+ export declare const LoadingIcon: ({ width, height, stroke, className, ...props }: React.ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,156 @@
1
+ import { jsxs as d, jsx as n } from "react/jsx-runtime";
2
+ import { cn as a } from "../../../lib/utils.js";
3
+ const L = ({
4
+ width: t = 20,
5
+ height: i = 20,
6
+ stroke: o = "#6F6F6F",
7
+ className: r,
8
+ ...e
9
+ }) => /* @__PURE__ */ d(
10
+ "svg",
11
+ {
12
+ width: t,
13
+ height: i,
14
+ viewBox: "0 0 20 20",
15
+ fill: "none",
16
+ xmlns: "http://www.w3.org/2000/svg",
17
+ className: a("animate-spin", r),
18
+ ...e,
19
+ children: [
20
+ /* @__PURE__ */ n(
21
+ "path",
22
+ {
23
+ opacity: "0.1",
24
+ d: "M10 2.5V5",
25
+ stroke: o,
26
+ strokeWidth: "1.33",
27
+ strokeLinecap: "round",
28
+ strokeLinejoin: "round"
29
+ }
30
+ ),
31
+ /* @__PURE__ */ n(
32
+ "path",
33
+ {
34
+ opacity: "0.2",
35
+ d: "M6.25 3.505L7.5 5.67",
36
+ stroke: o,
37
+ strokeWidth: "1.33",
38
+ strokeLinecap: "round",
39
+ strokeLinejoin: "round"
40
+ }
41
+ ),
42
+ /* @__PURE__ */ n(
43
+ "path",
44
+ {
45
+ opacity: "0.3",
46
+ d: "M3.505 6.25L5.67 7.5",
47
+ stroke: o,
48
+ strokeWidth: "1.33",
49
+ strokeLinecap: "round",
50
+ strokeLinejoin: "round"
51
+ }
52
+ ),
53
+ /* @__PURE__ */ n(
54
+ "path",
55
+ {
56
+ opacity: "0.4",
57
+ d: "M2.5 10H5",
58
+ stroke: o,
59
+ strokeWidth: "1.33",
60
+ strokeLinecap: "round",
61
+ strokeLinejoin: "round"
62
+ }
63
+ ),
64
+ /* @__PURE__ */ n(
65
+ "path",
66
+ {
67
+ opacity: "0.5",
68
+ d: "M3.505 13.75L5.67 12.5",
69
+ stroke: o,
70
+ strokeWidth: "1.33",
71
+ strokeLinecap: "round",
72
+ strokeLinejoin: "round"
73
+ }
74
+ ),
75
+ /* @__PURE__ */ n(
76
+ "path",
77
+ {
78
+ opacity: "0.55",
79
+ d: "M6.25 16.495L7.5 14.33",
80
+ stroke: o,
81
+ strokeWidth: "1.33",
82
+ strokeLinecap: "round",
83
+ strokeLinejoin: "round"
84
+ }
85
+ ),
86
+ /* @__PURE__ */ n(
87
+ "path",
88
+ {
89
+ opacity: "0.6",
90
+ d: "M10 17.5V15",
91
+ stroke: o,
92
+ strokeWidth: "1.33",
93
+ strokeLinecap: "round",
94
+ strokeLinejoin: "round"
95
+ }
96
+ ),
97
+ /* @__PURE__ */ n(
98
+ "path",
99
+ {
100
+ opacity: "0.65",
101
+ d: "M13.75 16.495L12.5 14.33",
102
+ stroke: o,
103
+ strokeWidth: "1.33",
104
+ strokeLinecap: "round",
105
+ strokeLinejoin: "round"
106
+ }
107
+ ),
108
+ /* @__PURE__ */ n(
109
+ "path",
110
+ {
111
+ opacity: "0.7",
112
+ d: "M16.495 13.75L14.33 12.5",
113
+ stroke: o,
114
+ strokeWidth: "1.33",
115
+ strokeLinecap: "round",
116
+ strokeLinejoin: "round"
117
+ }
118
+ ),
119
+ /* @__PURE__ */ n(
120
+ "path",
121
+ {
122
+ opacity: "0.8",
123
+ d: "M17.5 10H15",
124
+ stroke: o,
125
+ strokeWidth: "1.33",
126
+ strokeLinecap: "round",
127
+ strokeLinejoin: "round"
128
+ }
129
+ ),
130
+ /* @__PURE__ */ n(
131
+ "path",
132
+ {
133
+ opacity: "0.9",
134
+ d: "M16.4951 6.25018L14.3301 7.50013",
135
+ stroke: o,
136
+ strokeWidth: "1.33",
137
+ strokeLinecap: "round",
138
+ strokeLinejoin: "round"
139
+ }
140
+ ),
141
+ /* @__PURE__ */ n(
142
+ "path",
143
+ {
144
+ d: "M13.75 3.50482L12.5 5.66989",
145
+ stroke: o,
146
+ strokeWidth: "1.33",
147
+ strokeLinecap: "round",
148
+ strokeLinejoin: "round"
149
+ }
150
+ )
151
+ ]
152
+ }
153
+ );
154
+ export {
155
+ L as LoadingIcon
156
+ };
@@ -0,0 +1 @@
1
+ export declare const SuccessIcon: ({ width, height, fill, ...props }: React.ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ import { jsx as C } from "react/jsx-runtime";
2
+ const s = ({ width: e = 20, height: o = 20, fill: l = "#0A0A0A", ...n }) => /* @__PURE__ */ C("svg", { width: e, height: o, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n, children: /* @__PURE__ */ C(
3
+ "path",
4
+ {
5
+ fillRule: "evenodd",
6
+ clipRule: "evenodd",
7
+ d: "M10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM13.857 8.191C13.9149 8.11129 13.9566 8.02095 13.9796 7.92514C14.0026 7.82933 14.0065 7.72994 13.991 7.63262C13.9756 7.5353 13.9412 7.44198 13.8897 7.35797C13.8382 7.27396 13.7707 7.20091 13.691 7.143C13.6113 7.08509 13.5209 7.04344 13.4251 7.02044C13.3293 6.99744 13.2299 6.99354 13.1326 7.00895C13.0353 7.02437 12.942 7.0588 12.858 7.11028C12.774 7.16176 12.7009 7.22929 12.643 7.309L9.16 12.099L7.28 10.219C7.21078 10.1474 7.128 10.0903 7.03647 10.051C6.94495 10.0118 6.84653 9.99114 6.74694 9.99032C6.64736 9.9895 6.54861 10.0085 6.45646 10.0463C6.3643 10.084 6.28059 10.1398 6.2102 10.2102C6.13982 10.2807 6.08417 10.3644 6.0465 10.4566C6.00883 10.5488 5.9899 10.6476 5.99081 10.7472C5.99173 10.8467 6.01246 10.9451 6.05181 11.0366C6.09116 11.1281 6.14834 11.2108 6.22 11.28L8.72 13.78C8.79663 13.8567 8.88896 13.9158 8.99065 13.9534C9.09233 13.9909 9.20094 14.006 9.30901 13.9975C9.41708 13.9891 9.52203 13.9573 9.61663 13.9044C9.71123 13.8515 9.79324 13.7787 9.857 13.691L13.857 8.191Z",
8
+ fill: l
9
+ }
10
+ ) });
11
+ export {
12
+ s as SuccessIcon
13
+ };
@@ -0,0 +1 @@
1
+ export declare const WarningIcon: ({ width, height, fill, ...props }: React.ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ import { jsx as C } from "react/jsx-runtime";
2
+ const i = ({ width: e = 20, height: n = 20, fill: o = "#0A0A0A", ...l }) => /* @__PURE__ */ C("svg", { width: e, height: n, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l, children: /* @__PURE__ */ C(
3
+ "path",
4
+ {
5
+ fillRule: "evenodd",
6
+ clipRule: "evenodd",
7
+ d: "M7.83417 2.5025C8.79667 0.835836 11.2033 0.835836 12.165 2.5025L18.2942 13.1258C19.2558 14.7925 18.0525 16.8758 16.1283 16.8758H3.87083C1.94667 16.8758 0.744168 14.7925 1.70583 13.1258L7.83333 2.5025H7.83417ZM10 6.875C10.1658 6.875 10.3247 6.94085 10.4419 7.05806C10.5592 7.17527 10.625 7.33424 10.625 7.5V10.625C10.625 10.7908 10.5592 10.9497 10.4419 11.0669C10.3247 11.1842 10.1658 11.25 10 11.25C9.83424 11.25 9.67527 11.1842 9.55806 11.0669C9.44085 10.9497 9.375 10.7908 9.375 10.625V7.5C9.375 7.33424 9.44085 7.17527 9.55806 7.05806C9.67527 6.94085 9.83424 6.875 10 6.875ZM10 13.75C10.1658 13.75 10.3247 13.6842 10.4419 13.5669C10.5592 13.4497 10.625 13.2908 10.625 13.125C10.625 12.9592 10.5592 12.8003 10.4419 12.6831C10.3247 12.5659 10.1658 12.5 10 12.5C9.83424 12.5 9.67527 12.5659 9.55806 12.6831C9.44085 12.8003 9.375 12.9592 9.375 13.125C9.375 13.2908 9.44085 13.4497 9.55806 13.5669C9.67527 13.6842 9.83424 13.75 10 13.75Z",
8
+ fill: o
9
+ }
10
+ ) });
11
+ export {
12
+ i as WarningIcon
13
+ };
@@ -1,31 +1,40 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { Loader2Icon as s, OctagonXIcon as a, TriangleAlertIcon as n, InfoIcon as m, CircleCheckIcon as t } from "lucide-react";
3
- import { useTheme as c } from "next-themes";
4
- import { Toaster as i } from "sonner";
5
- const g = ({ ...o }) => {
6
- const { theme: e = "system" } = c();
7
- return /* @__PURE__ */ r(
8
- i,
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { useTheme as r } from "../../foundations/ThemeProvider.js";
3
+ import { Toaster as n } from "sonner";
4
+ import { SuccessIcon as s } from "./icons/SuccessIcon.js";
5
+ import { InfoIcon as m } from "./icons/InfoIcon.js";
6
+ import { ErrorIcon as i } from "./icons/ErrorIcon.js";
7
+ import { WarningIcon as a } from "./icons/WarningIcon.js";
8
+ import { LoadingIcon as p } from "./icons/LoadingIcon.js";
9
+ const b = ({ ...o }) => {
10
+ const { theme: t = "system" } = r();
11
+ return /* @__PURE__ */ e(
12
+ n,
9
13
  {
10
- theme: e,
14
+ theme: t,
11
15
  className: "toaster group",
12
16
  icons: {
13
- success: /* @__PURE__ */ r(t, { className: "size-4" }),
14
- info: /* @__PURE__ */ r(m, { className: "size-4" }),
15
- warning: /* @__PURE__ */ r(n, { className: "size-4" }),
16
- error: /* @__PURE__ */ r(a, { className: "size-4" }),
17
- loading: /* @__PURE__ */ r(s, { className: "size-4 animate-spin" })
17
+ success: /* @__PURE__ */ e(s, {}),
18
+ info: /* @__PURE__ */ e(m, {}),
19
+ warning: /* @__PURE__ */ e(a, {}),
20
+ error: /* @__PURE__ */ e(i, {}),
21
+ loading: /* @__PURE__ */ e(p, {})
18
22
  },
19
- style: {
20
- "--normal-bg": "var(--popover)",
21
- "--normal-text": "var(--popover-foreground)",
22
- "--normal-border": "var(--border)",
23
- "--border-radius": "var(--radius)"
23
+ toastOptions: {
24
+ unstyled: !0,
25
+ classNames: {
26
+ icon: "size-[20px] flex items-center justify-center relative",
27
+ toast: "bg-popover text-popover-foreground border border-border shadow-[0px_4px_12px_0px_rgba(0,0,0,0.1)] p-4 rounded-md min-w-[336px] flex items-center gap-2",
28
+ title: "text-sm leading-[var(--text-sm--line-height)] font-medium",
29
+ description: "mt-[2px] text-sm leading-[var(--text-sm--line-height)] font-normal text-muted-foreground",
30
+ actionButton: "bg-primary text-primary-foreground text-xs leading-[var(--text-xs--line-height)] font-medium h-6 px-2 rounded-[4px] shadow-xs rounded-[4px] ml-[auto]",
31
+ cancelButton: "bg-secondary text-secondary-foreground text-xs font-medium h-6 px-2 rounded-[4px] ml-[auto]"
32
+ }
24
33
  },
25
34
  ...o
26
35
  }
27
36
  );
28
37
  };
29
38
  export {
30
- g as Toaster
39
+ b as Toaster
31
40
  };
@@ -37,27 +37,30 @@ import "@radix-ui/react-toolbar";
37
37
  import "@radix-ui/react-tooltip";
38
38
  import "@radix-ui/react-visually-hidden";
39
39
  import { cn as o } from "../../lib/utils.js";
40
- function Q({
41
- className: a,
42
- orientation: t = "horizontal",
43
- ...e
44
- }) {
40
+ function Q({ className: a, orientation: t = "horizontal", ...e }) {
45
41
  return /* @__PURE__ */ r(
46
42
  i.Root,
47
43
  {
48
44
  "data-slot": "tabs",
49
45
  "data-orientation": t,
50
46
  orientation: t,
51
- className: o(
52
- "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
53
- a
54
- ),
47
+ className: o("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", a),
55
48
  ...e
56
49
  }
57
50
  );
58
51
  }
59
52
  const s = n(
60
- "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
53
+ [
54
+ "inline-flex w-fit items-center justify-center",
55
+ "group/tabs-list",
56
+ "group-data-[orientation=horizontal]/tabs:h-9",
57
+ "group-data-[orientation=vertical]/tabs:h-fit",
58
+ "group-data-[orientation=vertical]/tabs:flex-col",
59
+ "rounded-lg",
60
+ "p-[3px]",
61
+ "text-muted-foreground",
62
+ "data-[variant=line]:rounded-none"
63
+ ].join(" "),
61
64
  {
62
65
  variants: {
63
66
  variant: {
@@ -86,37 +89,52 @@ function S({
86
89
  }
87
90
  );
88
91
  }
89
- function U({
90
- className: a,
91
- ...t
92
- }) {
92
+ function U({ className: a, ...t }) {
93
93
  return /* @__PURE__ */ r(
94
94
  i.Trigger,
95
95
  {
96
96
  "data-slot": "tabs-trigger",
97
97
  className: o(
98
- "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
99
- "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
100
- "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
101
- "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
98
+ // layout/sizing
99
+ "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 px-2 py-1 whitespace-nowrap group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
100
+ // typography
101
+ "text-sm font-medium",
102
+ // visual
103
+ "rounded-md border border-transparent",
104
+ // visual - background/border for variant=line
105
+ "group-data-[variant=line]/tabs-list:bg-transparent",
106
+ "group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
107
+ "dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
108
+ "dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
109
+ // visual - state (border, background, text)
110
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1",
111
+ "text-foreground/60 hover:text-foreground",
112
+ "dark:text-muted-foreground dark:hover:text-foreground",
113
+ "data-[state=active]:bg-background data-[state=active]:text-foreground",
114
+ "dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30",
115
+ // visual - shadow
116
+ "group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm",
117
+ "group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
118
+ // animation
119
+ "transition-all",
120
+ // interactive states
121
+ "disabled:pointer-events-none disabled:opacity-50",
122
+ // after (indicator)
123
+ "after:bg-primary after:absolute after:opacity-0 after:transition-opacity",
124
+ "group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5",
125
+ "group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5",
126
+ "group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
127
+ // svg
128
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
129
+ // passed className
102
130
  a
103
131
  ),
104
132
  ...t
105
133
  }
106
134
  );
107
135
  }
108
- function W({
109
- className: a,
110
- ...t
111
- }) {
112
- return /* @__PURE__ */ r(
113
- i.Content,
114
- {
115
- "data-slot": "tabs-content",
116
- className: o("flex-1 outline-none", a),
117
- ...t
118
- }
119
- );
136
+ function W({ className: a, ...t }) {
137
+ return /* @__PURE__ */ r(i.Content, { "data-slot": "tabs-content", className: o("flex-1 outline-none", a), ...t });
120
138
  }
121
139
  export {
122
140
  Q as Tabs,