@nucleux/md3-caveat 0.11.3 → 0.12.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 +43 -26
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +43 -26
- package/dist/index.js.map +1 -1
- package/package.json +5 -4
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var
|
|
5
|
+
var md3Icons = require('@nucleux/md3-icons');
|
|
6
6
|
var utils = require('@nucleux/utils');
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
|
|
@@ -30,7 +30,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
30
30
|
var DEFAULT_TEXT = "AI can make mistakes. Verify important information.";
|
|
31
31
|
var Md3Caveat = React__namespace.forwardRef(
|
|
32
32
|
({ variant = "below-input", icon, actions, detail, className, children, ...props }, ref) => {
|
|
33
|
-
const glyph = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
33
|
+
const glyph = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(md3Icons.MsInfo, {}) : icon;
|
|
34
34
|
if (detail != null) {
|
|
35
35
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
36
36
|
"p",
|
|
@@ -39,20 +39,21 @@ var Md3Caveat = React__namespace.forwardRef(
|
|
|
39
39
|
role: "note",
|
|
40
40
|
"data-variant": variant,
|
|
41
41
|
className: utils.cn(
|
|
42
|
+
"font-md",
|
|
42
43
|
"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-
|
|
44
|
+
variant === "output-footer" && "mt-3.5 animate-nx-fade-in rounded-md-md bg-md-surface-container-high px-4 pb-1.5 pt-3.5 motion-reduce:animate-none",
|
|
44
45
|
className
|
|
45
46
|
),
|
|
46
47
|
...props,
|
|
47
48
|
children: [
|
|
48
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2.5 [&>svg]:mt-0.5 [&>svg]:size-5
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2.5 [&>svg]:mt-0.5 [&>svg]:size-5", children: [
|
|
49
50
|
glyph,
|
|
50
51
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
|
|
51
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-[1.55]", children: children ?? DEFAULT_TEXT }),
|
|
52
53
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-5 tracking-[0.25px] text-md-on-surface-variant", children: detail })
|
|
53
54
|
] })
|
|
54
55
|
] }),
|
|
55
|
-
actions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-
|
|
56
|
+
actions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-[18px] inline-flex flex-wrap items-center gap-1 [&_svg]:size-[1.125rem]", children: actions })
|
|
56
57
|
]
|
|
57
58
|
}
|
|
58
59
|
);
|
|
@@ -64,8 +65,9 @@ var Md3Caveat = React__namespace.forwardRef(
|
|
|
64
65
|
role: "note",
|
|
65
66
|
"data-variant": variant,
|
|
66
67
|
className: utils.cn(
|
|
68
|
+
"font-md",
|
|
67
69
|
"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
|
|
70
|
+
variant === "output-footer" ? "mt-3.5 flex w-full animate-nx-fade-in flex-wrap rounded-md-sm bg-md-surface-container px-3 py-2.5 motion-reduce:animate-none" : "inline-flex",
|
|
69
71
|
className
|
|
70
72
|
),
|
|
71
73
|
...props,
|
|
@@ -86,30 +88,45 @@ var tipSides = {
|
|
|
86
88
|
right: "left-full top-1/2 ml-1 -translate-y-1/2"
|
|
87
89
|
};
|
|
88
90
|
var Md3CaveatTooltip = React__namespace.forwardRef(
|
|
89
|
-
({
|
|
91
|
+
({
|
|
92
|
+
content = "Output may be inaccurate",
|
|
93
|
+
side = "top",
|
|
94
|
+
showIcon = true,
|
|
95
|
+
children,
|
|
96
|
+
className,
|
|
97
|
+
...props
|
|
98
|
+
}, ref) => {
|
|
90
99
|
const id = React__namespace.useId();
|
|
91
100
|
const childProps = children.props;
|
|
92
101
|
const trigger = React__namespace.cloneElement(children, {
|
|
93
102
|
"aria-describedby": [childProps["aria-describedby"], id].filter(Boolean).join(" ")
|
|
94
103
|
});
|
|
95
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
105
|
+
"span",
|
|
106
|
+
{
|
|
107
|
+
ref,
|
|
108
|
+
className: utils.cn("font-md", "group/caveat relative inline-flex", className),
|
|
109
|
+
...props,
|
|
110
|
+
children: [
|
|
111
|
+
trigger,
|
|
112
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
"span",
|
|
114
|
+
{
|
|
115
|
+
role: "tooltip",
|
|
116
|
+
className: utils.cn(
|
|
117
|
+
"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",
|
|
118
|
+
"group-focus-within/caveat:visible group-focus-within/caveat:opacity-100 group-hover/caveat:visible group-hover/caveat:opacity-100",
|
|
119
|
+
tipSides[side]
|
|
120
|
+
),
|
|
121
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { id, className: "inline-flex items-center gap-1.5 [&_svg]:size-3", children: [
|
|
122
|
+
showIcon && /* @__PURE__ */ jsxRuntime.jsx(md3Icons.MsInfo, {}),
|
|
123
|
+
content
|
|
124
|
+
] })
|
|
125
|
+
}
|
|
126
|
+
)
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
);
|
|
113
130
|
}
|
|
114
131
|
);
|
|
115
132
|
Md3CaveatTooltip.displayName = "Md3CaveatTooltip";
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","MsInfo","jsxs","cn"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { MsInfo } from \"@nucleux/md3-icons\";\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 ? <MsInfo /> : 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 \"font-md\",\n \"flex w-full flex-col gap-1.5 text-md-on-surface [&_svg]:shrink-0\",\n variant === \"output-footer\" &&\n \"mt-3.5 animate-nx-fade-in rounded-md-md bg-md-surface-container-high px-4 pb-1.5 pt-3.5 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\">\n {glyph}\n <span className=\"flex min-w-0 flex-col gap-0.5\">\n <span className=\"text-base leading-[1.55]\">{children ?? DEFAULT_TEXT}</span>\n <span className=\"text-sm leading-5 tracking-[0.25px] text-md-on-surface-variant\">\n {detail}\n </span>\n </span>\n </span>\n {actions && (\n <span className=\"ml-[18px] inline-flex flex-wrap items-center gap-1 [&_svg]:size-[1.125rem]\">\n {actions}\n </span>\n )}\n </p>\n );\n }\n return (\n <p\n ref={ref}\n role=\"note\"\n data-variant={variant}\n className={cn(\n \"font-md\",\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 animate-nx-fade-in flex-wrap rounded-md-sm bg-md-surface-container px-3 py-2.5 motion-reduce:animate-none\"\n : \"inline-flex\",\n className,\n )}\n {...props}\n >\n {glyph}\n <span>{children ?? DEFAULT_TEXT}</span>\n {actions && (\n <span className=\"ml-auto inline-flex flex-wrap items-center gap-1\">{actions}</span>\n )}\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 (\n {\n content = \"Output may be inaccurate\",\n side = \"top\",\n showIcon = true,\n children,\n className,\n ...props\n },\n ref,\n ) => {\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\n ref={ref}\n className={cn(\"font-md\", \"group/caveat relative inline-flex\", className)}\n {...props}\n >\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-focus-within/caveat:visible group-focus-within/caveat:opacity-100 group-hover/caveat:visible group-hover/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 && <MsInfo />}\n {content}\n </span>\n </span>\n </span>\n );\n },\n);\nMd3CaveatTooltip.displayName = \"Md3CaveatTooltip\";\n"]}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { MsInfo } from '@nucleux/md3-icons';
|
|
4
4
|
import { cn } from '@nucleux/utils';
|
|
5
5
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
@@ -8,7 +8,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
8
8
|
var DEFAULT_TEXT = "AI can make mistakes. Verify important information.";
|
|
9
9
|
var Md3Caveat = React.forwardRef(
|
|
10
10
|
({ variant = "below-input", icon, actions, detail, className, children, ...props }, ref) => {
|
|
11
|
-
const glyph = icon === void 0 ? /* @__PURE__ */ jsx(
|
|
11
|
+
const glyph = icon === void 0 ? /* @__PURE__ */ jsx(MsInfo, {}) : icon;
|
|
12
12
|
if (detail != null) {
|
|
13
13
|
return /* @__PURE__ */ jsxs(
|
|
14
14
|
"p",
|
|
@@ -17,20 +17,21 @@ var Md3Caveat = React.forwardRef(
|
|
|
17
17
|
role: "note",
|
|
18
18
|
"data-variant": variant,
|
|
19
19
|
className: cn(
|
|
20
|
+
"font-md",
|
|
20
21
|
"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-
|
|
22
|
+
variant === "output-footer" && "mt-3.5 animate-nx-fade-in rounded-md-md bg-md-surface-container-high px-4 pb-1.5 pt-3.5 motion-reduce:animate-none",
|
|
22
23
|
className
|
|
23
24
|
),
|
|
24
25
|
...props,
|
|
25
26
|
children: [
|
|
26
|
-
/* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2.5 [&>svg]:mt-0.5 [&>svg]:size-5
|
|
27
|
+
/* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2.5 [&>svg]:mt-0.5 [&>svg]:size-5", children: [
|
|
27
28
|
glyph,
|
|
28
29
|
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
|
|
29
|
-
/* @__PURE__ */ jsx("span", { className: "text-base leading-
|
|
30
|
+
/* @__PURE__ */ jsx("span", { className: "text-base leading-[1.55]", children: children ?? DEFAULT_TEXT }),
|
|
30
31
|
/* @__PURE__ */ jsx("span", { className: "text-sm leading-5 tracking-[0.25px] text-md-on-surface-variant", children: detail })
|
|
31
32
|
] })
|
|
32
33
|
] }),
|
|
33
|
-
actions && /* @__PURE__ */ jsx("span", { className: "ml-
|
|
34
|
+
actions && /* @__PURE__ */ jsx("span", { className: "ml-[18px] inline-flex flex-wrap items-center gap-1 [&_svg]:size-[1.125rem]", children: actions })
|
|
34
35
|
]
|
|
35
36
|
}
|
|
36
37
|
);
|
|
@@ -42,8 +43,9 @@ var Md3Caveat = React.forwardRef(
|
|
|
42
43
|
role: "note",
|
|
43
44
|
"data-variant": variant,
|
|
44
45
|
className: cn(
|
|
46
|
+
"font-md",
|
|
45
47
|
"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
|
|
48
|
+
variant === "output-footer" ? "mt-3.5 flex w-full animate-nx-fade-in flex-wrap rounded-md-sm bg-md-surface-container px-3 py-2.5 motion-reduce:animate-none" : "inline-flex",
|
|
47
49
|
className
|
|
48
50
|
),
|
|
49
51
|
...props,
|
|
@@ -64,30 +66,45 @@ var tipSides = {
|
|
|
64
66
|
right: "left-full top-1/2 ml-1 -translate-y-1/2"
|
|
65
67
|
};
|
|
66
68
|
var Md3CaveatTooltip = React.forwardRef(
|
|
67
|
-
({
|
|
69
|
+
({
|
|
70
|
+
content = "Output may be inaccurate",
|
|
71
|
+
side = "top",
|
|
72
|
+
showIcon = true,
|
|
73
|
+
children,
|
|
74
|
+
className,
|
|
75
|
+
...props
|
|
76
|
+
}, ref) => {
|
|
68
77
|
const id = React.useId();
|
|
69
78
|
const childProps = children.props;
|
|
70
79
|
const trigger = React.cloneElement(children, {
|
|
71
80
|
"aria-describedby": [childProps["aria-describedby"], id].filter(Boolean).join(" ")
|
|
72
81
|
});
|
|
73
|
-
return /* @__PURE__ */ jsxs(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
82
|
+
return /* @__PURE__ */ jsxs(
|
|
83
|
+
"span",
|
|
84
|
+
{
|
|
85
|
+
ref,
|
|
86
|
+
className: cn("font-md", "group/caveat relative inline-flex", className),
|
|
87
|
+
...props,
|
|
88
|
+
children: [
|
|
89
|
+
trigger,
|
|
90
|
+
/* @__PURE__ */ jsx(
|
|
91
|
+
"span",
|
|
92
|
+
{
|
|
93
|
+
role: "tooltip",
|
|
94
|
+
className: cn(
|
|
95
|
+
"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",
|
|
96
|
+
"group-focus-within/caveat:visible group-focus-within/caveat:opacity-100 group-hover/caveat:visible group-hover/caveat:opacity-100",
|
|
97
|
+
tipSides[side]
|
|
98
|
+
),
|
|
99
|
+
children: /* @__PURE__ */ jsxs("span", { id, className: "inline-flex items-center gap-1.5 [&_svg]:size-3", children: [
|
|
100
|
+
showIcon && /* @__PURE__ */ jsx(MsInfo, {}),
|
|
101
|
+
content
|
|
102
|
+
] })
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
);
|
|
91
108
|
}
|
|
92
109
|
);
|
|
93
110
|
Md3CaveatTooltip.displayName = "Md3CaveatTooltip";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAWA,IAAM,YAAA,GAAe,qDAAA;AAYd,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EAC7B,CAAC,EAAE,OAAA,GAAU,aAAA,EAAe,IAAA,EAAM,OAAA,EAAS,MAAA,EAAQ,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC1F,IAAA,MAAM,
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAWA,IAAM,YAAA,GAAe,qDAAA;AAYd,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EAC7B,CAAC,EAAE,OAAA,GAAU,aAAA,EAAe,IAAA,EAAM,OAAA,EAAS,MAAA,EAAQ,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC1F,IAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,MAAA,mBAAY,GAAA,CAAC,UAAO,CAAA,GAAK,IAAA;AAChD,IAAA,IAAI,UAAU,IAAA,EAAM;AAElB,MAAA,uBACE,IAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAA,EAAK,MAAA;AAAA,UACL,cAAA,EAAc,OAAA;AAAA,UACd,SAAA,EAAW,EAAA;AAAA,YACT,SAAA;AAAA,YACA,kEAAA;AAAA,YACA,YAAY,eAAA,IACV,oHAAA;AAAA,YACF;AAAA,WACF;AAAA,UACC,GAAG,KAAA;AAAA,UAEJ,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,wDAAA,EACb,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,8BACD,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+BAAA,EACd,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAA,QAAA,IAAY,YAAA,EAAa,CAAA;AAAA,gCACrE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gEAAA,EACb,QAAA,EAAA,MAAA,EACH;AAAA,eAAA,EACF;AAAA,aAAA,EACF,CAAA;AAAA,YACC,OAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8EACb,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,OAEJ;AAAA,IAEJ;AACA,IAAA,uBACE,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,MAAA;AAAA,QACL,cAAA,EAAc,OAAA;AAAA,QACd,SAAA,EAAW,EAAA;AAAA,UACT,SAAA;AAAA,UACA,oHAAA;AAAA,UACA,OAAA,KAAY,kBACR,8HAAA,GACA,aAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,0BACD,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,IAAY,YAAA,EAAa,CAAA;AAAA,UAC/B,OAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oDAAoD,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAEhF;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA;AAExB,IAAM,QAAA,GAAoC;AAAA,EACxC,GAAA,EAAK,4CAAA;AAAA,EACL,MAAA,EAAQ,yCAAA;AAAA,EACR,IAAA,EAAM,0CAAA;AAAA,EACN,KAAA,EAAO;AACT,CAAA;AASO,IAAM,gBAAA,GAAyB,KAAA,CAAA,UAAA;AAAA,EACpC,CACE;AAAA,IACE,OAAA,GAAU,0BAAA;AAAA,IACV,IAAA,GAAO,KAAA;AAAA,IACP,QAAA,GAAW,IAAA;AAAA,IACX,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,KAAW,KAAA,CAAA,KAAA,EAAM;AACvB,IAAA,MAAM,aAAa,QAAA,CAAS,KAAA;AAC5B,IAAA,MAAM,OAAA,GAAgB,mBAAa,QAAA,EAAU;AAAA,MAC3C,kBAAA,EAAoB,CAAC,UAAA,CAAW,kBAAkB,CAAA,EAAG,EAAE,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG;AAAA,KACvD,CAAA;AAC5B,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,mCAAA,EAAqC,SAAS,CAAA;AAAA,QACtE,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACD,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,SAAA;AAAA,cACL,SAAA,EAAW,EAAA;AAAA,gBACT,yOAAA;AAAA,gBACA,mIAAA;AAAA,gBACA,SAAS,IAAI;AAAA,eACf;AAAA,cAEA,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,EAAA,EAAQ,SAAA,EAAU,iDAAA,EACrB,QAAA,EAAA;AAAA,gBAAA,QAAA,wBAAa,MAAA,EAAA,EAAO,CAAA;AAAA,gBACpB;AAAA,eAAA,EACH;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { MsInfo } from \"@nucleux/md3-icons\";\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 ? <MsInfo /> : 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 \"font-md\",\n \"flex w-full flex-col gap-1.5 text-md-on-surface [&_svg]:shrink-0\",\n variant === \"output-footer\" &&\n \"mt-3.5 animate-nx-fade-in rounded-md-md bg-md-surface-container-high px-4 pb-1.5 pt-3.5 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\">\n {glyph}\n <span className=\"flex min-w-0 flex-col gap-0.5\">\n <span className=\"text-base leading-[1.55]\">{children ?? DEFAULT_TEXT}</span>\n <span className=\"text-sm leading-5 tracking-[0.25px] text-md-on-surface-variant\">\n {detail}\n </span>\n </span>\n </span>\n {actions && (\n <span className=\"ml-[18px] inline-flex flex-wrap items-center gap-1 [&_svg]:size-[1.125rem]\">\n {actions}\n </span>\n )}\n </p>\n );\n }\n return (\n <p\n ref={ref}\n role=\"note\"\n data-variant={variant}\n className={cn(\n \"font-md\",\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 animate-nx-fade-in flex-wrap rounded-md-sm bg-md-surface-container px-3 py-2.5 motion-reduce:animate-none\"\n : \"inline-flex\",\n className,\n )}\n {...props}\n >\n {glyph}\n <span>{children ?? DEFAULT_TEXT}</span>\n {actions && (\n <span className=\"ml-auto inline-flex flex-wrap items-center gap-1\">{actions}</span>\n )}\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 (\n {\n content = \"Output may be inaccurate\",\n side = \"top\",\n showIcon = true,\n children,\n className,\n ...props\n },\n ref,\n ) => {\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\n ref={ref}\n className={cn(\"font-md\", \"group/caveat relative inline-flex\", className)}\n {...props}\n >\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-focus-within/caveat:visible group-focus-within/caveat:opacity-100 group-hover/caveat:visible group-hover/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 && <MsInfo />}\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.12.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,10 +36,11 @@
|
|
|
36
36
|
"react-dom": ">=18"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@nucleux/caveat": "0.
|
|
40
|
-
"@nucleux/
|
|
39
|
+
"@nucleux/caveat": "0.12.0",
|
|
40
|
+
"@nucleux/md3-icons": "0.12.0",
|
|
41
|
+
"@nucleux/utils": "0.12.0",
|
|
41
42
|
"lucide-react": "^0.469.0",
|
|
42
|
-
"@nucleux/md3-button": "0.
|
|
43
|
+
"@nucleux/md3-button": "0.12.0"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
46
|
"tsup": "^8.3.5",
|