@nucleux/md3-disclaimer 0.0.0-stage → 0.7.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/LICENSE +21 -0
- package/README.md +34 -2
- package/dist/index.cjs +141 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +22 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.js +119 -0
- package/dist/index.js.map +1 -0
- package/package.json +63 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Nucleux
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,35 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @nucleux/md3-disclaimer
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Material 3 Disclaimer — a short, honest statement of what the agent can and can't do — Nucleux agentic UI for React.
|
|
4
|
+
|
|
5
|
+
Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
|
|
6
|
+
|
|
7
|
+
**Same API as the shadcn twin.** The props, callbacks, keyboard model and accessible names are those of [`@nucleux/disclaimer`](https://www.npmjs.com/package/@nucleux/disclaimer) (`Disclaimer`) — the props types are re-exported from it — so you switch families by changing only the import. Only the look differs: Material 3 colour roles, shape, elevation, state layers and motion (reduced under `prefers-reduced-motion`).
|
|
8
|
+
|
|
9
|
+
## Exports
|
|
10
|
+
|
|
11
|
+
- **`Md3Disclaimer`** — what the agent can and can't do: a filled card with an info mark, a limitations card with a tertiary rule, or a one-line cutoff note; "Show all" past three points; labelled `groups` rows
|
|
12
|
+
- Types: `Md3DisclaimerProps`, `Md3DisclaimerVariant`, `DisclaimerGroup`
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @nucleux/md3-disclaimer @nucleux/tokens
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
`react` / `react-dom` are peer dependencies.
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { Md3Disclaimer } from "@nucleux/md3-disclaimer";
|
|
26
|
+
|
|
27
|
+
<Md3Disclaimer agentName="Aria" items={["Summarise documents", "Draft replies"]} cutoff="April 2026" />
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
|
|
31
|
+
and the Tailwind preset from `@nucleux/tokens/preset`.
|
|
32
|
+
|
|
33
|
+
## License
|
|
34
|
+
|
|
35
|
+
MIT © Nucleux
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var lucideReact = require('lucide-react');
|
|
6
|
+
var utils = require('@nucleux/utils');
|
|
7
|
+
var md3Button = require('@nucleux/md3-button');
|
|
8
|
+
var md3Card = require('@nucleux/md3-card');
|
|
9
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
|
|
11
|
+
function _interopNamespace(e) {
|
|
12
|
+
if (e && e.__esModule) return e;
|
|
13
|
+
var n = Object.create(null);
|
|
14
|
+
if (e) {
|
|
15
|
+
Object.keys(e).forEach(function (k) {
|
|
16
|
+
if (k !== 'default') {
|
|
17
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () { return e[k]; }
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
n.default = e;
|
|
26
|
+
return Object.freeze(n);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
30
|
+
|
|
31
|
+
// src/index.tsx
|
|
32
|
+
var capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
|
|
33
|
+
var linkClass = "rounded-md-xs font-medium text-md-primary underline underline-offset-2 outline-none hover:decoration-2 focus-visible:ring-2 focus-visible:ring-md-secondary";
|
|
34
|
+
var Md3Disclaimer = React__namespace.forwardRef(
|
|
35
|
+
({
|
|
36
|
+
variant = "capabilities-list",
|
|
37
|
+
agentName = "the assistant",
|
|
38
|
+
title,
|
|
39
|
+
items,
|
|
40
|
+
groups,
|
|
41
|
+
cutoff,
|
|
42
|
+
maxItems = 3,
|
|
43
|
+
learnMoreHref,
|
|
44
|
+
learnMoreLabel = "Learn more",
|
|
45
|
+
className,
|
|
46
|
+
children,
|
|
47
|
+
...props
|
|
48
|
+
}, ref) => {
|
|
49
|
+
const baseId = React__namespace.useId();
|
|
50
|
+
const listId = `${baseId}-list`;
|
|
51
|
+
const [expanded, setExpanded] = React__namespace.useState(false);
|
|
52
|
+
const Agent = capitalize(agentName);
|
|
53
|
+
if (variant === "cutoff-note") {
|
|
54
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
55
|
+
"div",
|
|
56
|
+
{
|
|
57
|
+
ref,
|
|
58
|
+
role: "note",
|
|
59
|
+
"aria-label": "Knowledge cutoff",
|
|
60
|
+
className: utils.cn(
|
|
61
|
+
"inline-flex items-center gap-2 rounded-full bg-md-surface-container px-3.5 py-1.5 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant",
|
|
62
|
+
className
|
|
63
|
+
),
|
|
64
|
+
...props,
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
|
|
67
|
+
children ?? (cutoff ? `${Agent} knows up to ${cutoff}` : `${Agent} may not know recent events`),
|
|
68
|
+
learnMoreHref && /* @__PURE__ */ jsxRuntime.jsx("a", { href: learnMoreHref, className: linkClass, children: learnMoreLabel })
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
const limitations = variant === "limitations-card";
|
|
74
|
+
const heading = title ?? (limitations ? `${Agent} won't` : `What ${agentName} can do`);
|
|
75
|
+
const visibleItems = items && !expanded ? items.slice(0, Math.max(0, maxItems)) : items;
|
|
76
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
77
|
+
md3Card.Md3Card,
|
|
78
|
+
{
|
|
79
|
+
ref,
|
|
80
|
+
variant: limitations ? "outlined" : "filled",
|
|
81
|
+
role: "note",
|
|
82
|
+
"aria-labelledby": `${baseId}-title`,
|
|
83
|
+
className: utils.cn(
|
|
84
|
+
"flex flex-col gap-3 text-sm tracking-[0.25px]",
|
|
85
|
+
limitations ? "rounded-l-md-xs rounded-r-md-md border-l-4 border-l-md-tertiary bg-md-surface-container-low px-4 py-3.5" : "rounded-md-lg p-5",
|
|
86
|
+
className
|
|
87
|
+
),
|
|
88
|
+
...props,
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
91
|
+
"p",
|
|
92
|
+
{
|
|
93
|
+
id: `${baseId}-title`,
|
|
94
|
+
className: "flex items-center gap-2 text-base font-medium leading-6 tracking-[0.15px] text-md-on-surface",
|
|
95
|
+
children: [
|
|
96
|
+
limitations ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldAlert, { "aria-hidden": "true", className: "size-5 shrink-0 text-md-tertiary" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true", className: "size-5 shrink-0 text-md-secondary" }),
|
|
97
|
+
heading
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-md-on-surface-variant", children }),
|
|
102
|
+
visibleItems && visibleItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
103
|
+
"ul",
|
|
104
|
+
{
|
|
105
|
+
id: listId,
|
|
106
|
+
className: "m-0 flex list-disc flex-col gap-1 pl-5 text-md-on-surface-variant marker:text-md-outline",
|
|
107
|
+
children: visibleItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: item }, i))
|
|
108
|
+
}
|
|
109
|
+
),
|
|
110
|
+
items && items.length > maxItems && /* @__PURE__ */ jsxRuntime.jsx(
|
|
111
|
+
md3Button.Md3Button,
|
|
112
|
+
{
|
|
113
|
+
variant: "text",
|
|
114
|
+
"aria-expanded": expanded,
|
|
115
|
+
"aria-controls": listId,
|
|
116
|
+
onClick: () => setExpanded((e) => !e),
|
|
117
|
+
className: "-ml-3 h-8 self-start px-3",
|
|
118
|
+
children: expanded ? "Show less" : `Show all (${items.length})`
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
groups && groups.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "m-0 flex flex-col gap-2.5", children: groups.map((g) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] items-baseline gap-x-3 gap-y-0.5", children: [
|
|
122
|
+
/* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-md-on-surface", children: g.label }),
|
|
123
|
+
g.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "col-start-2 m-0 text-md-on-surface-variant", children: item }, i))
|
|
124
|
+
] }, g.label)) }),
|
|
125
|
+
(cutoff || learnMoreHref) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-t border-md-outline-variant pt-3 text-xs tracking-[0.4px] text-md-on-surface-variant", children: [
|
|
126
|
+
cutoff && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
127
|
+
"Knowledge cutoff \xB7 ",
|
|
128
|
+
cutoff
|
|
129
|
+
] }),
|
|
130
|
+
learnMoreHref && /* @__PURE__ */ jsxRuntime.jsx("a", { href: learnMoreHref, className: utils.cn("ml-auto", linkClass), children: learnMoreLabel })
|
|
131
|
+
] })
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
Md3Disclaimer.displayName = "Md3Disclaimer";
|
|
138
|
+
|
|
139
|
+
exports.Md3Disclaimer = Md3Disclaimer;
|
|
140
|
+
//# sourceMappingURL=index.cjs.map
|
|
141
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","cn","jsx","Clock","Md3Card","ShieldAlert","Info","Md3Button"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { Clock, Info, ShieldAlert } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport type { DisclaimerGroup, DisclaimerProps, DisclaimerVariant } from \"@nucleux/disclaimer\";\nimport { Md3Button } from \"@nucleux/md3-button\";\nimport { Md3Card } from \"@nucleux/md3-card\";\n\n/** Props of {@link Md3Disclaimer} — identical to `DisclaimerProps` from `@nucleux/disclaimer`. */\nexport type Md3DisclaimerProps = DisclaimerProps;\n/** \"capabilities-list\", \"limitations-card\" or \"cutoff-note\". */\nexport type Md3DisclaimerVariant = DisclaimerVariant;\nexport type { DisclaimerGroup };\n\n// Copied from @nucleux/disclaimer (internal there).\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);\n\nconst linkClass =\n \"rounded-md-xs font-medium text-md-primary underline underline-offset-2 outline-none hover:decoration-2 focus-visible:ring-2 focus-visible:ring-md-secondary\";\n\n/**\n * The Material 3 statement of what the agent can and can't do — the same API\n * and behaviour as `Disclaimer`. Calm and informative, never the error colour:\n * the capabilities list is a filled M3 card with an info mark in secondary;\n * the limitations card is a low surface whose leading rule takes the tertiary\n * role (a known limit is not a failure); the cutoff note is a full-corner,\n * body-small standing line. Points beyond `maxItems` (3) sit behind a text\n * \"Show all\" button, and `groups` render as labelled rows (can / can't /\n * needs approval / may get wrong) with the label in its own column.\n */\nexport const Md3Disclaimer = React.forwardRef<HTMLDivElement, Md3DisclaimerProps>(\n (\n {\n variant = \"capabilities-list\",\n agentName = \"the assistant\",\n title,\n items,\n groups,\n cutoff,\n maxItems = 3,\n learnMoreHref,\n learnMoreLabel = \"Learn more\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const baseId = React.useId();\n const listId = `${baseId}-list`;\n const [expanded, setExpanded] = React.useState(false);\n const Agent = capitalize(agentName);\n\n if (variant === \"cutoff-note\") {\n return (\n <div\n ref={ref}\n role=\"note\"\n aria-label=\"Knowledge cutoff\"\n className={cn(\n \"inline-flex items-center gap-2 rounded-full bg-md-surface-container px-3.5 py-1.5 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant\",\n className,\n )}\n {...props}\n >\n <Clock aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n {children ?? (cutoff ? `${Agent} knows up to ${cutoff}` : `${Agent} may not know recent events`)}\n {learnMoreHref && (\n <a href={learnMoreHref} className={linkClass}>\n {learnMoreLabel}\n </a>\n )}\n </div>\n );\n }\n\n const limitations = variant === \"limitations-card\";\n const heading = title ?? (limitations ? `${Agent} won't` : `What ${agentName} can do`);\n const visibleItems = items && !expanded ? items.slice(0, Math.max(0, maxItems)) : items;\n\n return (\n <Md3Card\n ref={ref}\n variant={limitations ? \"outlined\" : \"filled\"}\n role=\"note\"\n aria-labelledby={`${baseId}-title`}\n className={cn(\n \"flex flex-col gap-3 text-sm tracking-[0.25px]\",\n limitations\n ? \"rounded-l-md-xs rounded-r-md-md border-l-4 border-l-md-tertiary bg-md-surface-container-low px-4 py-3.5\"\n : \"rounded-md-lg p-5\",\n className,\n )}\n {...props}\n >\n <p\n id={`${baseId}-title`}\n className=\"flex items-center gap-2 text-base font-medium leading-6 tracking-[0.15px] text-md-on-surface\"\n >\n {limitations ? (\n <ShieldAlert aria-hidden=\"true\" className=\"size-5 shrink-0 text-md-tertiary\" />\n ) : (\n <Info aria-hidden=\"true\" className=\"size-5 shrink-0 text-md-secondary\" />\n )}\n {heading}\n </p>\n {children != null && <div className=\"text-md-on-surface-variant\">{children}</div>}\n {visibleItems && visibleItems.length > 0 && (\n <ul\n id={listId}\n className=\"m-0 flex list-disc flex-col gap-1 pl-5 text-md-on-surface-variant marker:text-md-outline\"\n >\n {visibleItems.map((item, i) => (\n <li key={i}>{item}</li>\n ))}\n </ul>\n )}\n {items && items.length > maxItems && (\n <Md3Button\n variant=\"text\"\n aria-expanded={expanded}\n aria-controls={listId}\n onClick={() => setExpanded((e) => !e)}\n className=\"-ml-3 h-8 self-start px-3\"\n >\n {expanded ? \"Show less\" : `Show all (${items.length})`}\n </Md3Button>\n )}\n {groups && groups.length > 0 && (\n <dl className=\"m-0 flex flex-col gap-2.5\">\n {groups.map((g) => (\n <div key={g.label} className=\"grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] items-baseline gap-x-3 gap-y-0.5\">\n <dt className=\"font-medium text-md-on-surface\">{g.label}</dt>\n {g.items.map((item, i) => (\n <dd key={i} className=\"col-start-2 m-0 text-md-on-surface-variant\">\n {item}\n </dd>\n ))}\n </div>\n ))}\n </dl>\n )}\n {(cutoff || learnMoreHref) && (\n <div className=\"flex items-center gap-3 border-t border-md-outline-variant pt-3 text-xs tracking-[0.4px] text-md-on-surface-variant\">\n {cutoff && <span>Knowledge cutoff · {cutoff}</span>}\n {learnMoreHref && (\n <a href={learnMoreHref} className={cn(\"ml-auto\", linkClass)}>\n {learnMoreLabel}\n </a>\n )}\n </div>\n )}\n </Md3Card>\n );\n },\n);\nMd3Disclaimer.displayName = \"Md3Disclaimer\";\n"]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { DisclaimerProps, DisclaimerVariant } from '@nucleux/disclaimer';
|
|
3
|
+
export { DisclaimerGroup } from '@nucleux/disclaimer';
|
|
4
|
+
|
|
5
|
+
/** Props of {@link Md3Disclaimer} — identical to `DisclaimerProps` from `@nucleux/disclaimer`. */
|
|
6
|
+
type Md3DisclaimerProps = DisclaimerProps;
|
|
7
|
+
/** "capabilities-list", "limitations-card" or "cutoff-note". */
|
|
8
|
+
type Md3DisclaimerVariant = DisclaimerVariant;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* The Material 3 statement of what the agent can and can't do — the same API
|
|
12
|
+
* and behaviour as `Disclaimer`. Calm and informative, never the error colour:
|
|
13
|
+
* the capabilities list is a filled M3 card with an info mark in secondary;
|
|
14
|
+
* the limitations card is a low surface whose leading rule takes the tertiary
|
|
15
|
+
* role (a known limit is not a failure); the cutoff note is a full-corner,
|
|
16
|
+
* body-small standing line. Points beyond `maxItems` (3) sit behind a text
|
|
17
|
+
* "Show all" button, and `groups` render as labelled rows (can / can't /
|
|
18
|
+
* needs approval / may get wrong) with the label in its own column.
|
|
19
|
+
*/
|
|
20
|
+
declare const Md3Disclaimer: React.ForwardRefExoticComponent<DisclaimerProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
|
|
22
|
+
export { Md3Disclaimer, type Md3DisclaimerProps, type Md3DisclaimerVariant };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { DisclaimerProps, DisclaimerVariant } from '@nucleux/disclaimer';
|
|
3
|
+
export { DisclaimerGroup } from '@nucleux/disclaimer';
|
|
4
|
+
|
|
5
|
+
/** Props of {@link Md3Disclaimer} — identical to `DisclaimerProps` from `@nucleux/disclaimer`. */
|
|
6
|
+
type Md3DisclaimerProps = DisclaimerProps;
|
|
7
|
+
/** "capabilities-list", "limitations-card" or "cutoff-note". */
|
|
8
|
+
type Md3DisclaimerVariant = DisclaimerVariant;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* The Material 3 statement of what the agent can and can't do — the same API
|
|
12
|
+
* and behaviour as `Disclaimer`. Calm and informative, never the error colour:
|
|
13
|
+
* the capabilities list is a filled M3 card with an info mark in secondary;
|
|
14
|
+
* the limitations card is a low surface whose leading rule takes the tertiary
|
|
15
|
+
* role (a known limit is not a failure); the cutoff note is a full-corner,
|
|
16
|
+
* body-small standing line. Points beyond `maxItems` (3) sit behind a text
|
|
17
|
+
* "Show all" button, and `groups` render as labelled rows (can / can't /
|
|
18
|
+
* needs approval / may get wrong) with the label in its own column.
|
|
19
|
+
*/
|
|
20
|
+
declare const Md3Disclaimer: React.ForwardRefExoticComponent<DisclaimerProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
|
|
22
|
+
export { Md3Disclaimer, type Md3DisclaimerProps, type Md3DisclaimerVariant };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Clock, ShieldAlert, Info } from 'lucide-react';
|
|
4
|
+
import { cn } from '@nucleux/utils';
|
|
5
|
+
import { Md3Button } from '@nucleux/md3-button';
|
|
6
|
+
import { Md3Card } from '@nucleux/md3-card';
|
|
7
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
|
+
|
|
9
|
+
// src/index.tsx
|
|
10
|
+
var capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
|
|
11
|
+
var linkClass = "rounded-md-xs font-medium text-md-primary underline underline-offset-2 outline-none hover:decoration-2 focus-visible:ring-2 focus-visible:ring-md-secondary";
|
|
12
|
+
var Md3Disclaimer = React.forwardRef(
|
|
13
|
+
({
|
|
14
|
+
variant = "capabilities-list",
|
|
15
|
+
agentName = "the assistant",
|
|
16
|
+
title,
|
|
17
|
+
items,
|
|
18
|
+
groups,
|
|
19
|
+
cutoff,
|
|
20
|
+
maxItems = 3,
|
|
21
|
+
learnMoreHref,
|
|
22
|
+
learnMoreLabel = "Learn more",
|
|
23
|
+
className,
|
|
24
|
+
children,
|
|
25
|
+
...props
|
|
26
|
+
}, ref) => {
|
|
27
|
+
const baseId = React.useId();
|
|
28
|
+
const listId = `${baseId}-list`;
|
|
29
|
+
const [expanded, setExpanded] = React.useState(false);
|
|
30
|
+
const Agent = capitalize(agentName);
|
|
31
|
+
if (variant === "cutoff-note") {
|
|
32
|
+
return /* @__PURE__ */ jsxs(
|
|
33
|
+
"div",
|
|
34
|
+
{
|
|
35
|
+
ref,
|
|
36
|
+
role: "note",
|
|
37
|
+
"aria-label": "Knowledge cutoff",
|
|
38
|
+
className: cn(
|
|
39
|
+
"inline-flex items-center gap-2 rounded-full bg-md-surface-container px-3.5 py-1.5 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant",
|
|
40
|
+
className
|
|
41
|
+
),
|
|
42
|
+
...props,
|
|
43
|
+
children: [
|
|
44
|
+
/* @__PURE__ */ jsx(Clock, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
|
|
45
|
+
children ?? (cutoff ? `${Agent} knows up to ${cutoff}` : `${Agent} may not know recent events`),
|
|
46
|
+
learnMoreHref && /* @__PURE__ */ jsx("a", { href: learnMoreHref, className: linkClass, children: learnMoreLabel })
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
const limitations = variant === "limitations-card";
|
|
52
|
+
const heading = title ?? (limitations ? `${Agent} won't` : `What ${agentName} can do`);
|
|
53
|
+
const visibleItems = items && !expanded ? items.slice(0, Math.max(0, maxItems)) : items;
|
|
54
|
+
return /* @__PURE__ */ jsxs(
|
|
55
|
+
Md3Card,
|
|
56
|
+
{
|
|
57
|
+
ref,
|
|
58
|
+
variant: limitations ? "outlined" : "filled",
|
|
59
|
+
role: "note",
|
|
60
|
+
"aria-labelledby": `${baseId}-title`,
|
|
61
|
+
className: cn(
|
|
62
|
+
"flex flex-col gap-3 text-sm tracking-[0.25px]",
|
|
63
|
+
limitations ? "rounded-l-md-xs rounded-r-md-md border-l-4 border-l-md-tertiary bg-md-surface-container-low px-4 py-3.5" : "rounded-md-lg p-5",
|
|
64
|
+
className
|
|
65
|
+
),
|
|
66
|
+
...props,
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ jsxs(
|
|
69
|
+
"p",
|
|
70
|
+
{
|
|
71
|
+
id: `${baseId}-title`,
|
|
72
|
+
className: "flex items-center gap-2 text-base font-medium leading-6 tracking-[0.15px] text-md-on-surface",
|
|
73
|
+
children: [
|
|
74
|
+
limitations ? /* @__PURE__ */ jsx(ShieldAlert, { "aria-hidden": "true", className: "size-5 shrink-0 text-md-tertiary" }) : /* @__PURE__ */ jsx(Info, { "aria-hidden": "true", className: "size-5 shrink-0 text-md-secondary" }),
|
|
75
|
+
heading
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
children != null && /* @__PURE__ */ jsx("div", { className: "text-md-on-surface-variant", children }),
|
|
80
|
+
visibleItems && visibleItems.length > 0 && /* @__PURE__ */ jsx(
|
|
81
|
+
"ul",
|
|
82
|
+
{
|
|
83
|
+
id: listId,
|
|
84
|
+
className: "m-0 flex list-disc flex-col gap-1 pl-5 text-md-on-surface-variant marker:text-md-outline",
|
|
85
|
+
children: visibleItems.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i))
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
items && items.length > maxItems && /* @__PURE__ */ jsx(
|
|
89
|
+
Md3Button,
|
|
90
|
+
{
|
|
91
|
+
variant: "text",
|
|
92
|
+
"aria-expanded": expanded,
|
|
93
|
+
"aria-controls": listId,
|
|
94
|
+
onClick: () => setExpanded((e) => !e),
|
|
95
|
+
className: "-ml-3 h-8 self-start px-3",
|
|
96
|
+
children: expanded ? "Show less" : `Show all (${items.length})`
|
|
97
|
+
}
|
|
98
|
+
),
|
|
99
|
+
groups && groups.length > 0 && /* @__PURE__ */ jsx("dl", { className: "m-0 flex flex-col gap-2.5", children: groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] items-baseline gap-x-3 gap-y-0.5", children: [
|
|
100
|
+
/* @__PURE__ */ jsx("dt", { className: "font-medium text-md-on-surface", children: g.label }),
|
|
101
|
+
g.items.map((item, i) => /* @__PURE__ */ jsx("dd", { className: "col-start-2 m-0 text-md-on-surface-variant", children: item }, i))
|
|
102
|
+
] }, g.label)) }),
|
|
103
|
+
(cutoff || learnMoreHref) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-t border-md-outline-variant pt-3 text-xs tracking-[0.4px] text-md-on-surface-variant", children: [
|
|
104
|
+
cutoff && /* @__PURE__ */ jsxs("span", { children: [
|
|
105
|
+
"Knowledge cutoff \xB7 ",
|
|
106
|
+
cutoff
|
|
107
|
+
] }),
|
|
108
|
+
learnMoreHref && /* @__PURE__ */ jsx("a", { href: learnMoreHref, className: cn("ml-auto", linkClass), children: learnMoreLabel })
|
|
109
|
+
] })
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
);
|
|
115
|
+
Md3Disclaimer.displayName = "Md3Disclaimer";
|
|
116
|
+
|
|
117
|
+
export { Md3Disclaimer };
|
|
118
|
+
//# sourceMappingURL=index.js.map
|
|
119
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { Clock, Info, ShieldAlert } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\nimport type { DisclaimerGroup, DisclaimerProps, DisclaimerVariant } from \"@nucleux/disclaimer\";\nimport { Md3Button } from \"@nucleux/md3-button\";\nimport { Md3Card } from \"@nucleux/md3-card\";\n\n/** Props of {@link Md3Disclaimer} — identical to `DisclaimerProps` from `@nucleux/disclaimer`. */\nexport type Md3DisclaimerProps = DisclaimerProps;\n/** \"capabilities-list\", \"limitations-card\" or \"cutoff-note\". */\nexport type Md3DisclaimerVariant = DisclaimerVariant;\nexport type { DisclaimerGroup };\n\n// Copied from @nucleux/disclaimer (internal there).\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);\n\nconst linkClass =\n \"rounded-md-xs font-medium text-md-primary underline underline-offset-2 outline-none hover:decoration-2 focus-visible:ring-2 focus-visible:ring-md-secondary\";\n\n/**\n * The Material 3 statement of what the agent can and can't do — the same API\n * and behaviour as `Disclaimer`. Calm and informative, never the error colour:\n * the capabilities list is a filled M3 card with an info mark in secondary;\n * the limitations card is a low surface whose leading rule takes the tertiary\n * role (a known limit is not a failure); the cutoff note is a full-corner,\n * body-small standing line. Points beyond `maxItems` (3) sit behind a text\n * \"Show all\" button, and `groups` render as labelled rows (can / can't /\n * needs approval / may get wrong) with the label in its own column.\n */\nexport const Md3Disclaimer = React.forwardRef<HTMLDivElement, Md3DisclaimerProps>(\n (\n {\n variant = \"capabilities-list\",\n agentName = \"the assistant\",\n title,\n items,\n groups,\n cutoff,\n maxItems = 3,\n learnMoreHref,\n learnMoreLabel = \"Learn more\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const baseId = React.useId();\n const listId = `${baseId}-list`;\n const [expanded, setExpanded] = React.useState(false);\n const Agent = capitalize(agentName);\n\n if (variant === \"cutoff-note\") {\n return (\n <div\n ref={ref}\n role=\"note\"\n aria-label=\"Knowledge cutoff\"\n className={cn(\n \"inline-flex items-center gap-2 rounded-full bg-md-surface-container px-3.5 py-1.5 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant\",\n className,\n )}\n {...props}\n >\n <Clock aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n {children ?? (cutoff ? `${Agent} knows up to ${cutoff}` : `${Agent} may not know recent events`)}\n {learnMoreHref && (\n <a href={learnMoreHref} className={linkClass}>\n {learnMoreLabel}\n </a>\n )}\n </div>\n );\n }\n\n const limitations = variant === \"limitations-card\";\n const heading = title ?? (limitations ? `${Agent} won't` : `What ${agentName} can do`);\n const visibleItems = items && !expanded ? items.slice(0, Math.max(0, maxItems)) : items;\n\n return (\n <Md3Card\n ref={ref}\n variant={limitations ? \"outlined\" : \"filled\"}\n role=\"note\"\n aria-labelledby={`${baseId}-title`}\n className={cn(\n \"flex flex-col gap-3 text-sm tracking-[0.25px]\",\n limitations\n ? \"rounded-l-md-xs rounded-r-md-md border-l-4 border-l-md-tertiary bg-md-surface-container-low px-4 py-3.5\"\n : \"rounded-md-lg p-5\",\n className,\n )}\n {...props}\n >\n <p\n id={`${baseId}-title`}\n className=\"flex items-center gap-2 text-base font-medium leading-6 tracking-[0.15px] text-md-on-surface\"\n >\n {limitations ? (\n <ShieldAlert aria-hidden=\"true\" className=\"size-5 shrink-0 text-md-tertiary\" />\n ) : (\n <Info aria-hidden=\"true\" className=\"size-5 shrink-0 text-md-secondary\" />\n )}\n {heading}\n </p>\n {children != null && <div className=\"text-md-on-surface-variant\">{children}</div>}\n {visibleItems && visibleItems.length > 0 && (\n <ul\n id={listId}\n className=\"m-0 flex list-disc flex-col gap-1 pl-5 text-md-on-surface-variant marker:text-md-outline\"\n >\n {visibleItems.map((item, i) => (\n <li key={i}>{item}</li>\n ))}\n </ul>\n )}\n {items && items.length > maxItems && (\n <Md3Button\n variant=\"text\"\n aria-expanded={expanded}\n aria-controls={listId}\n onClick={() => setExpanded((e) => !e)}\n className=\"-ml-3 h-8 self-start px-3\"\n >\n {expanded ? \"Show less\" : `Show all (${items.length})`}\n </Md3Button>\n )}\n {groups && groups.length > 0 && (\n <dl className=\"m-0 flex flex-col gap-2.5\">\n {groups.map((g) => (\n <div key={g.label} className=\"grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] items-baseline gap-x-3 gap-y-0.5\">\n <dt className=\"font-medium text-md-on-surface\">{g.label}</dt>\n {g.items.map((item, i) => (\n <dd key={i} className=\"col-start-2 m-0 text-md-on-surface-variant\">\n {item}\n </dd>\n ))}\n </div>\n ))}\n </dl>\n )}\n {(cutoff || learnMoreHref) && (\n <div className=\"flex items-center gap-3 border-t border-md-outline-variant pt-3 text-xs tracking-[0.4px] text-md-on-surface-variant\">\n {cutoff && <span>Knowledge cutoff · {cutoff}</span>}\n {learnMoreHref && (\n <a href={learnMoreHref} className={cn(\"ml-auto\", linkClass)}>\n {learnMoreLabel}\n </a>\n )}\n </div>\n )}\n </Md3Card>\n );\n },\n);\nMd3Disclaimer.displayName = \"Md3Disclaimer\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,66 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nucleux/md3-disclaimer",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.7.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"sideEffects": false,
|
|
6
|
+
"description": "Material 3 Disclaimer — a short, honest statement of what the agent can and can't do — Nucleux agentic UI for React.",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"nucleux",
|
|
9
|
+
"react",
|
|
10
|
+
"ui",
|
|
11
|
+
"components",
|
|
12
|
+
"agentic",
|
|
13
|
+
"ai",
|
|
14
|
+
"tailwind",
|
|
15
|
+
"md3",
|
|
16
|
+
"material",
|
|
17
|
+
"md3-disclaimer",
|
|
18
|
+
"disclaimer",
|
|
19
|
+
"limits",
|
|
20
|
+
"capabilities"
|
|
21
|
+
],
|
|
22
|
+
"main": "./dist/index.cjs",
|
|
23
|
+
"module": "./dist/index.js",
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"exports": {
|
|
26
|
+
".": {
|
|
27
|
+
"types": "./dist/index.d.ts",
|
|
28
|
+
"import": "./dist/index.js",
|
|
29
|
+
"require": "./dist/index.cjs"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"files": [
|
|
33
|
+
"dist",
|
|
34
|
+
"README.md"
|
|
35
|
+
],
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"react": ">=18",
|
|
38
|
+
"react-dom": ">=18"
|
|
39
|
+
},
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"@nucleux/disclaimer": "0.7.0",
|
|
42
|
+
"@nucleux/md3-button": "0.7.0",
|
|
43
|
+
"@nucleux/md3-card": "0.7.0",
|
|
44
|
+
"@nucleux/utils": "0.7.0",
|
|
45
|
+
"lucide-react": "^0.469.0"
|
|
46
|
+
},
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"tsup": "^8.3.5",
|
|
49
|
+
"typescript": "^5.7.2",
|
|
50
|
+
"@types/react": "^18.3.18",
|
|
51
|
+
"react": "^18.3.1"
|
|
52
|
+
},
|
|
53
|
+
"publishConfig": {
|
|
54
|
+
"access": "public"
|
|
55
|
+
},
|
|
56
|
+
"license": "MIT",
|
|
57
|
+
"repository": {
|
|
58
|
+
"type": "git",
|
|
59
|
+
"url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
|
|
60
|
+
"directory": "packages/md3-disclaimer"
|
|
61
|
+
},
|
|
62
|
+
"homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
|
|
63
|
+
"scripts": {
|
|
64
|
+
"build": "tsup"
|
|
65
|
+
}
|
|
6
66
|
}
|