@nucleux/md3-caveat 0.9.0 → 0.11.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/index.cjs +47 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +47 -18
- package/dist/index.js.map +1 -1
- package/package.json +5 -4
package/dist/index.cjs
CHANGED
|
@@ -29,25 +29,54 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
29
29
|
// src/index.tsx
|
|
30
30
|
var DEFAULT_TEXT = "AI can make mistakes. Verify important information.";
|
|
31
31
|
var Md3Caveat = React__namespace.forwardRef(
|
|
32
|
-
({ variant = "below-input", icon, actions, className, children, ...props }, ref) =>
|
|
33
|
-
"
|
|
34
|
-
{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
32
|
+
({ variant = "below-input", icon, actions, detail, className, children, ...props }, ref) => {
|
|
33
|
+
const glyph = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true" }) : icon;
|
|
34
|
+
if (detail != null) {
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
36
|
+
"p",
|
|
37
|
+
{
|
|
38
|
+
ref,
|
|
39
|
+
role: "note",
|
|
40
|
+
"data-variant": variant,
|
|
41
|
+
className: utils.cn(
|
|
42
|
+
"flex w-full flex-col gap-1.5 text-md-on-surface [&_svg]:shrink-0",
|
|
43
|
+
variant === "output-footer" && "mt-3.5 rounded-md-md bg-md-surface-container-highest px-4 pb-1.5 pt-3.5 animate-nx-fade-in motion-reduce:animate-none",
|
|
44
|
+
className
|
|
45
|
+
),
|
|
46
|
+
...props,
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2.5 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-md-on-surface-variant", children: [
|
|
49
|
+
glyph,
|
|
50
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
|
|
51
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-6 tracking-[0.15px]", children: children ?? DEFAULT_TEXT }),
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-5 tracking-[0.25px] text-md-on-surface-variant", children: detail })
|
|
53
|
+
] })
|
|
54
|
+
] }),
|
|
55
|
+
actions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-4 inline-flex flex-wrap items-center gap-1 [&_svg]:size-[1.125rem]", children: actions })
|
|
56
|
+
]
|
|
57
|
+
}
|
|
58
|
+
);
|
|
49
59
|
}
|
|
50
|
-
|
|
60
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
61
|
+
"p",
|
|
62
|
+
{
|
|
63
|
+
ref,
|
|
64
|
+
role: "note",
|
|
65
|
+
"data-variant": variant,
|
|
66
|
+
className: utils.cn(
|
|
67
|
+
"items-center gap-2 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant [&_svg]:size-3.5 [&_svg]:shrink-0",
|
|
68
|
+
variant === "output-footer" ? "mt-3.5 flex w-full flex-wrap rounded-md-sm bg-md-surface-container px-3 py-2.5 animate-nx-fade-in motion-reduce:animate-none" : "inline-flex",
|
|
69
|
+
className
|
|
70
|
+
),
|
|
71
|
+
...props,
|
|
72
|
+
children: [
|
|
73
|
+
glyph,
|
|
74
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: children ?? DEFAULT_TEXT }),
|
|
75
|
+
actions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto inline-flex flex-wrap items-center gap-1", children: actions })
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
51
80
|
);
|
|
52
81
|
Md3Caveat.displayName = "Md3Caveat";
|
|
53
82
|
var tipSides = {
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","cn","jsx"
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":["React","Info","jsxs","cn","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { Info } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport type { CaveatProps, CaveatTooltipProps, CaveatVariant } from \"@nucleux/caveat\";\n\nexport type Md3CaveatProps = CaveatProps;\nexport type Md3CaveatTooltipProps = CaveatTooltipProps;\nexport type Md3CaveatVariant = CaveatVariant;\n\ntype TipSide = NonNullable<CaveatTooltipProps[\"side\"]>;\n\nconst DEFAULT_TEXT = \"AI can make mistakes. Verify important information.\";\n\n/**\n * A short, calm note on what to check about an AI result — the Material 3\n * twin of `Caveat`, with the same API. Caution, not alarm: an outline info\n * mark in body-small on-surface-variant, never the error role. `below-input`\n * is a caption under the composer; `output-footer` gets a surface-container\n * ground so it separates from the output it qualifies, and can carry the\n * next steps that remove the reason for it; with a `detail` line it becomes\n * nucleux.in's tonal card (surface-container-highest, the limitation over why\n * it matters, then text-button next steps). Rendered as a `note`.\n */\nexport const Md3Caveat = React.forwardRef<HTMLParagraphElement, Md3CaveatProps>(\n ({ variant = \"below-input\", icon, actions, detail, className, children, ...props }, ref) => {\n const glyph = icon === undefined ? <Info aria-hidden=\"true\" /> : icon;\n if (detail != null) {\n // The tonal card: limitation (body-large), why it matters (body-medium), then text-button next steps.\n return (\n <p\n ref={ref}\n role=\"note\"\n data-variant={variant}\n className={cn(\n \"flex w-full flex-col gap-1.5 text-md-on-surface [&_svg]:shrink-0\",\n variant === \"output-footer\" &&\n \"mt-3.5 rounded-md-md bg-md-surface-container-highest px-4 pb-1.5 pt-3.5 animate-nx-fade-in motion-reduce:animate-none\",\n className,\n )}\n {...props}\n >\n <span className=\"flex items-start gap-2.5 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-md-on-surface-variant\">\n {glyph}\n <span className=\"flex min-w-0 flex-col gap-0.5\">\n <span className=\"text-base leading-6 tracking-[0.15px]\">{children ?? DEFAULT_TEXT}</span>\n <span className=\"text-sm leading-5 tracking-[0.25px] text-md-on-surface-variant\">{detail}</span>\n </span>\n </span>\n {actions && <span className=\"ml-4 inline-flex flex-wrap items-center gap-1 [&_svg]:size-[1.125rem]\">{actions}</span>}\n </p>\n );\n }\n return (\n <p\n ref={ref}\n role=\"note\"\n data-variant={variant}\n className={cn(\n \"items-center gap-2 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant [&_svg]:size-3.5 [&_svg]:shrink-0\",\n variant === \"output-footer\"\n ? \"mt-3.5 flex w-full flex-wrap rounded-md-sm bg-md-surface-container px-3 py-2.5 animate-nx-fade-in motion-reduce:animate-none\"\n : \"inline-flex\",\n className,\n )}\n {...props}\n >\n {glyph}\n <span>{children ?? DEFAULT_TEXT}</span>\n {actions && <span className=\"ml-auto inline-flex flex-wrap items-center gap-1\">{actions}</span>}\n </p>\n );\n },\n);\nMd3Caveat.displayName = \"Md3Caveat\";\n\nconst tipSides: Record<TipSide, string> = {\n top: \"bottom-full left-1/2 mb-1 -translate-x-1/2\",\n bottom: \"top-full left-1/2 mt-1 -translate-x-1/2\",\n left: \"right-full top-1/2 mr-1 -translate-y-1/2\",\n right: \"left-full top-1/2 ml-1 -translate-y-1/2\",\n};\n\n/**\n * The `info-tooltip` caveat in Material 3 — the twin of `CaveatTooltip`. The\n * reminder rides the generate control as an M3 plain tooltip\n * (inverse-surface, extra-small corners) shown on hover and keyboard focus,\n * fading in over 150 ms (instantly under reduced motion), and it describes\n * the control through `aria-describedby` so screen readers hear it too.\n */\nexport const Md3CaveatTooltip = React.forwardRef<HTMLSpanElement, Md3CaveatTooltipProps>(\n ({ content = \"Output may be inaccurate\", side = \"top\", showIcon = true, children, className, ...props }, ref) => {\n const id = React.useId();\n const childProps = children.props as { \"aria-describedby\"?: string };\n const trigger = React.cloneElement(children, {\n \"aria-describedby\": [childProps[\"aria-describedby\"], id].filter(Boolean).join(\" \"),\n } as Record<string, unknown>);\n return (\n <span ref={ref} className={cn(\"group/caveat relative inline-flex\", className)} {...props}>\n {trigger}\n <span\n role=\"tooltip\"\n className={cn(\n \"pointer-events-none invisible absolute z-50 whitespace-nowrap rounded-md-xs bg-md-inverse-surface px-2 py-1 text-xs tracking-[0.4px] text-md-inverse-on-surface opacity-0 transition-opacity duration-150 motion-reduce:transition-none\",\n \"group-hover/caveat:visible group-hover/caveat:opacity-100 group-focus-within/caveat:visible group-focus-within/caveat:opacity-100\",\n tipSides[side],\n )}\n >\n <span id={id} className=\"inline-flex items-center gap-1.5 [&_svg]:size-3\">\n {showIcon && <Info aria-hidden=\"true\" />}\n {content}\n </span>\n </span>\n </span>\n );\n },\n);\nMd3CaveatTooltip.displayName = \"Md3CaveatTooltip\";\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -10,7 +10,9 @@ type Md3CaveatVariant = CaveatVariant;
|
|
|
10
10
|
* mark in body-small on-surface-variant, never the error role. `below-input`
|
|
11
11
|
* is a caption under the composer; `output-footer` gets a surface-container
|
|
12
12
|
* ground so it separates from the output it qualifies, and can carry the
|
|
13
|
-
* next steps that remove the reason for it
|
|
13
|
+
* next steps that remove the reason for it; with a `detail` line it becomes
|
|
14
|
+
* nucleux.in's tonal card (surface-container-highest, the limitation over why
|
|
15
|
+
* it matters, then text-button next steps). Rendered as a `note`.
|
|
14
16
|
*/
|
|
15
17
|
declare const Md3Caveat: React.ForwardRefExoticComponent<CaveatProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
16
18
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -10,7 +10,9 @@ type Md3CaveatVariant = CaveatVariant;
|
|
|
10
10
|
* mark in body-small on-surface-variant, never the error role. `below-input`
|
|
11
11
|
* is a caption under the composer; `output-footer` gets a surface-container
|
|
12
12
|
* ground so it separates from the output it qualifies, and can carry the
|
|
13
|
-
* next steps that remove the reason for it
|
|
13
|
+
* next steps that remove the reason for it; with a `detail` line it becomes
|
|
14
|
+
* nucleux.in's tonal card (surface-container-highest, the limitation over why
|
|
15
|
+
* it matters, then text-button next steps). Rendered as a `note`.
|
|
14
16
|
*/
|
|
15
17
|
declare const Md3Caveat: React.ForwardRefExoticComponent<CaveatProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
16
18
|
/**
|
package/dist/index.js
CHANGED
|
@@ -7,25 +7,54 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
7
7
|
// src/index.tsx
|
|
8
8
|
var DEFAULT_TEXT = "AI can make mistakes. Verify important information.";
|
|
9
9
|
var Md3Caveat = React.forwardRef(
|
|
10
|
-
({ variant = "below-input", icon, actions, className, children, ...props }, ref) =>
|
|
11
|
-
"
|
|
12
|
-
{
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
10
|
+
({ variant = "below-input", icon, actions, detail, className, children, ...props }, ref) => {
|
|
11
|
+
const glyph = icon === void 0 ? /* @__PURE__ */ jsx(Info, { "aria-hidden": "true" }) : icon;
|
|
12
|
+
if (detail != null) {
|
|
13
|
+
return /* @__PURE__ */ jsxs(
|
|
14
|
+
"p",
|
|
15
|
+
{
|
|
16
|
+
ref,
|
|
17
|
+
role: "note",
|
|
18
|
+
"data-variant": variant,
|
|
19
|
+
className: cn(
|
|
20
|
+
"flex w-full flex-col gap-1.5 text-md-on-surface [&_svg]:shrink-0",
|
|
21
|
+
variant === "output-footer" && "mt-3.5 rounded-md-md bg-md-surface-container-highest px-4 pb-1.5 pt-3.5 animate-nx-fade-in motion-reduce:animate-none",
|
|
22
|
+
className
|
|
23
|
+
),
|
|
24
|
+
...props,
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2.5 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-md-on-surface-variant", children: [
|
|
27
|
+
glyph,
|
|
28
|
+
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
|
|
29
|
+
/* @__PURE__ */ jsx("span", { className: "text-base leading-6 tracking-[0.15px]", children: children ?? DEFAULT_TEXT }),
|
|
30
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm leading-5 tracking-[0.25px] text-md-on-surface-variant", children: detail })
|
|
31
|
+
] })
|
|
32
|
+
] }),
|
|
33
|
+
actions && /* @__PURE__ */ jsx("span", { className: "ml-4 inline-flex flex-wrap items-center gap-1 [&_svg]:size-[1.125rem]", children: actions })
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
);
|
|
27
37
|
}
|
|
28
|
-
|
|
38
|
+
return /* @__PURE__ */ jsxs(
|
|
39
|
+
"p",
|
|
40
|
+
{
|
|
41
|
+
ref,
|
|
42
|
+
role: "note",
|
|
43
|
+
"data-variant": variant,
|
|
44
|
+
className: cn(
|
|
45
|
+
"items-center gap-2 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant [&_svg]:size-3.5 [&_svg]:shrink-0",
|
|
46
|
+
variant === "output-footer" ? "mt-3.5 flex w-full flex-wrap rounded-md-sm bg-md-surface-container px-3 py-2.5 animate-nx-fade-in motion-reduce:animate-none" : "inline-flex",
|
|
47
|
+
className
|
|
48
|
+
),
|
|
49
|
+
...props,
|
|
50
|
+
children: [
|
|
51
|
+
glyph,
|
|
52
|
+
/* @__PURE__ */ jsx("span", { children: children ?? DEFAULT_TEXT }),
|
|
53
|
+
actions && /* @__PURE__ */ jsx("span", { className: "ml-auto inline-flex flex-wrap items-center gap-1", children: actions })
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
29
58
|
);
|
|
30
59
|
Md3Caveat.displayName = "Md3Caveat";
|
|
31
60
|
var tipSides = {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAWA,IAAM,YAAA,GAAe,qDAAA;
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { Info } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport type { CaveatProps, CaveatTooltipProps, CaveatVariant } from \"@nucleux/caveat\";\n\nexport type Md3CaveatProps = CaveatProps;\nexport type Md3CaveatTooltipProps = CaveatTooltipProps;\nexport type Md3CaveatVariant = CaveatVariant;\n\ntype TipSide = NonNullable<CaveatTooltipProps[\"side\"]>;\n\nconst DEFAULT_TEXT = \"AI can make mistakes. Verify important information.\";\n\n/**\n * A short, calm note on what to check about an AI result — the Material 3\n * twin of `Caveat`, with the same API. Caution, not alarm: an outline info\n * mark in body-small on-surface-variant, never the error role. `below-input`\n * is a caption under the composer; `output-footer` gets a surface-container\n * ground so it separates from the output it qualifies, and can carry the\n * next steps that remove the reason for it; with a `detail` line it becomes\n * nucleux.in's tonal card (surface-container-highest, the limitation over why\n * it matters, then text-button next steps). Rendered as a `note`.\n */\nexport const Md3Caveat = React.forwardRef<HTMLParagraphElement, Md3CaveatProps>(\n ({ variant = \"below-input\", icon, actions, detail, className, children, ...props }, ref) => {\n const glyph = icon === undefined ? <Info aria-hidden=\"true\" /> : icon;\n if (detail != null) {\n // The tonal card: limitation (body-large), why it matters (body-medium), then text-button next steps.\n return (\n <p\n ref={ref}\n role=\"note\"\n data-variant={variant}\n className={cn(\n \"flex w-full flex-col gap-1.5 text-md-on-surface [&_svg]:shrink-0\",\n variant === \"output-footer\" &&\n \"mt-3.5 rounded-md-md bg-md-surface-container-highest px-4 pb-1.5 pt-3.5 animate-nx-fade-in motion-reduce:animate-none\",\n className,\n )}\n {...props}\n >\n <span className=\"flex items-start gap-2.5 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-md-on-surface-variant\">\n {glyph}\n <span className=\"flex min-w-0 flex-col gap-0.5\">\n <span className=\"text-base leading-6 tracking-[0.15px]\">{children ?? DEFAULT_TEXT}</span>\n <span className=\"text-sm leading-5 tracking-[0.25px] text-md-on-surface-variant\">{detail}</span>\n </span>\n </span>\n {actions && <span className=\"ml-4 inline-flex flex-wrap items-center gap-1 [&_svg]:size-[1.125rem]\">{actions}</span>}\n </p>\n );\n }\n return (\n <p\n ref={ref}\n role=\"note\"\n data-variant={variant}\n className={cn(\n \"items-center gap-2 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant [&_svg]:size-3.5 [&_svg]:shrink-0\",\n variant === \"output-footer\"\n ? \"mt-3.5 flex w-full flex-wrap rounded-md-sm bg-md-surface-container px-3 py-2.5 animate-nx-fade-in motion-reduce:animate-none\"\n : \"inline-flex\",\n className,\n )}\n {...props}\n >\n {glyph}\n <span>{children ?? DEFAULT_TEXT}</span>\n {actions && <span className=\"ml-auto inline-flex flex-wrap items-center gap-1\">{actions}</span>}\n </p>\n );\n },\n);\nMd3Caveat.displayName = \"Md3Caveat\";\n\nconst tipSides: Record<TipSide, string> = {\n top: \"bottom-full left-1/2 mb-1 -translate-x-1/2\",\n bottom: \"top-full left-1/2 mt-1 -translate-x-1/2\",\n left: \"right-full top-1/2 mr-1 -translate-y-1/2\",\n right: \"left-full top-1/2 ml-1 -translate-y-1/2\",\n};\n\n/**\n * The `info-tooltip` caveat in Material 3 — the twin of `CaveatTooltip`. The\n * reminder rides the generate control as an M3 plain tooltip\n * (inverse-surface, extra-small corners) shown on hover and keyboard focus,\n * fading in over 150 ms (instantly under reduced motion), and it describes\n * the control through `aria-describedby` so screen readers hear it too.\n */\nexport const Md3CaveatTooltip = React.forwardRef<HTMLSpanElement, Md3CaveatTooltipProps>(\n ({ content = \"Output may be inaccurate\", side = \"top\", showIcon = true, children, className, ...props }, ref) => {\n const id = React.useId();\n const childProps = children.props as { \"aria-describedby\"?: string };\n const trigger = React.cloneElement(children, {\n \"aria-describedby\": [childProps[\"aria-describedby\"], id].filter(Boolean).join(\" \"),\n } as Record<string, unknown>);\n return (\n <span ref={ref} className={cn(\"group/caveat relative inline-flex\", className)} {...props}>\n {trigger}\n <span\n role=\"tooltip\"\n className={cn(\n \"pointer-events-none invisible absolute z-50 whitespace-nowrap rounded-md-xs bg-md-inverse-surface px-2 py-1 text-xs tracking-[0.4px] text-md-inverse-on-surface opacity-0 transition-opacity duration-150 motion-reduce:transition-none\",\n \"group-hover/caveat:visible group-hover/caveat:opacity-100 group-focus-within/caveat:visible group-focus-within/caveat:opacity-100\",\n tipSides[side],\n )}\n >\n <span id={id} className=\"inline-flex items-center gap-1.5 [&_svg]:size-3\">\n {showIcon && <Info aria-hidden=\"true\" />}\n {content}\n </span>\n </span>\n </span>\n );\n },\n);\nMd3CaveatTooltip.displayName = \"Md3CaveatTooltip\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nucleux/md3-caveat",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"description": "Material 3 Caveat — a calm, specific note on what to check about an AI result — Nucleux agentic UI for React.",
|
|
@@ -36,9 +36,10 @@
|
|
|
36
36
|
"react-dom": ">=18"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@nucleux/caveat": "0.
|
|
40
|
-
"@nucleux/utils": "0.
|
|
41
|
-
"lucide-react": "^0.469.0"
|
|
39
|
+
"@nucleux/caveat": "0.11.0",
|
|
40
|
+
"@nucleux/utils": "0.11.0",
|
|
41
|
+
"lucide-react": "^0.469.0",
|
|
42
|
+
"@nucleux/md3-button": "0.11.0"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
45
|
"tsup": "^8.3.5",
|