@nucleux/md3-caveat 0.0.0-stage → 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# @nucleux/md3-caveat
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Material 3 Caveat — a calm, specific note on what to check about an AI result — Nucleux agentic UI for React.
+
+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).
+
+The Material 3 twin of [`@nucleux/caveat`](https://www.npmjs.com/package/@nucleux/caveat): it shares that package's API — 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, state layers and motion (with reduced-motion handling).
+
+## Exports
+
+- **`Md3Caveat`** — a `note`: `variant` below-input / output-footer, `icon`, `actions`
+- **`Md3CaveatTooltip`** — the info-tooltip caveat riding an AI control, linked with `aria-describedby`; `content`, `side`, `showIcon`
+- Types: `Md3CaveatProps`, `Md3CaveatTooltipProps`, `Md3CaveatVariant`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-caveat @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3Caveat } from "@nucleux/md3-caveat";
+
+<Md3Caveat variant="output-footer">2 of 8 interviews could not be opened, so this summary reflects 6.</Md3Caveat>
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,91 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var DEFAULT_TEXT = "AI can make mistakes. Verify important information.";
+var Md3Caveat = React__namespace.forwardRef(
+  ({ variant = "below-input", icon, actions, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "p",
+    {
+      ref,
+      role: "note",
+      "data-variant": variant,
+      className: utils.cn(
+        "items-center gap-2 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant [&_svg]:size-3.5 [&_svg]:shrink-0",
+        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",
+        className
+      ),
+      ...props,
+      children: [
+        icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true" }) : icon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: children ?? DEFAULT_TEXT }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto inline-flex flex-wrap items-center gap-1", children: actions })
+      ]
+    }
+  )
+);
+Md3Caveat.displayName = "Md3Caveat";
+var tipSides = {
+  top: "bottom-full left-1/2 mb-1 -translate-x-1/2",
+  bottom: "top-full left-1/2 mt-1 -translate-x-1/2",
+  left: "right-full top-1/2 mr-1 -translate-y-1/2",
+  right: "left-full top-1/2 ml-1 -translate-y-1/2"
+};
+var Md3CaveatTooltip = React__namespace.forwardRef(
+  ({ content = "Output may be inaccurate", side = "top", showIcon = true, children, className, ...props }, ref) => {
+    const id = React__namespace.useId();
+    const childProps = children.props;
+    const trigger = React__namespace.cloneElement(children, {
+      "aria-describedby": [childProps["aria-describedby"], id].filter(Boolean).join(" ")
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: utils.cn("group/caveat relative inline-flex", className), ...props, children: [
+      trigger,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          role: "tooltip",
+          className: utils.cn(
+            "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",
+            "group-hover/caveat:visible group-hover/caveat:opacity-100 group-focus-within/caveat:visible group-focus-within/caveat:opacity-100",
+            tipSides[side]
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { id, className: "inline-flex items-center gap-1.5 [&_svg]:size-3", children: [
+            showIcon && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true" }),
+            content
+          ] })
+        }
+      )
+    ] });
+  }
+);
+Md3CaveatTooltip.displayName = "Md3CaveatTooltip";
+
+exports.Md3Caveat = Md3Caveat;
+exports.Md3CaveatTooltip = Md3CaveatTooltip;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","cn","jsx","Info"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,YAAA,GAAe,qDAAA;AAUd,IAAM,SAAA,GAAkBA,gBAAA,CAAA,UAAA;AAAA,EAC7B,CAAC,EAAE,OAAA,GAAU,aAAA,EAAe,IAAA,EAAM,OAAA,EAAS,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1EC,eAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,MAAA;AAAA,MACL,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAWC,QAAA;AAAA,QACT,oHAAA;AAAA,QACA,OAAA,KAAY,kBACR,8HAAA,GACA,aAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,KAAS,MAAA,mBAAYC,cAAA,CAACC,gBAAA,EAAA,EAAK,aAAA,EAAY,QAAO,CAAA,GAAK,IAAA;AAAA,wBACpDD,cAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,IAAY,YAAA,EAAa,CAAA;AAAA,QAC/B,OAAA,oBAAWA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oDAAoD,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA;AAG9F;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,GAAyBH,gBAAA,CAAA,UAAA;AAAA,EACpC,CAAC,EAAE,OAAA,GAAU,0BAAA,EAA4B,IAAA,GAAO,KAAA,EAAO,QAAA,GAAW,IAAA,EAAM,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC/G,IAAA,MAAM,KAAWA,gBAAA,CAAA,KAAA,EAAM;AACvB,IAAA,MAAM,aAAa,QAAA,CAAS,KAAA;AAC5B,IAAA,MAAM,OAAA,GAAgBA,8BAAa,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,uBACEC,eAAA,CAAC,UAAK,GAAA,EAAU,SAAA,EAAWC,SAAG,mCAAA,EAAqC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChF,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBACDC,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,SAAA;AAAA,UACL,SAAA,EAAWD,QAAA;AAAA,YACT,yOAAA;AAAA,YACA,mIAAA;AAAA,YACA,SAAS,IAAI;AAAA,WACf;AAAA,UAEA,QAAA,kBAAAD,eAAA,CAAC,MAAA,EAAA,EAAK,EAAA,EAAQ,SAAA,EAAU,iDAAA,EACrB,QAAA,EAAA;AAAA,YAAA,QAAA,oBAAYE,cAAA,CAACC,gBAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,YACrC;AAAA,WAAA,EACH;AAAA;AAAA;AACF,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","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. Rendered as a `note`.\n */\nexport const Md3Caveat = React.forwardRef<HTMLParagraphElement, Md3CaveatProps>(\n  ({ variant = \"below-input\", icon, actions, className, children, ...props }, ref) => (\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      {icon === undefined ? <Info aria-hidden=\"true\" /> : icon}\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);\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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { CaveatProps, CaveatTooltipProps, CaveatVariant } from '@nucleux/caveat';
+
+type Md3CaveatProps = CaveatProps;
+type Md3CaveatTooltipProps = CaveatTooltipProps;
+type Md3CaveatVariant = CaveatVariant;
+/**
+ * A short, calm note on what to check about an AI result — the Material 3
+ * twin of `Caveat`, with the same API. Caution, not alarm: an outline info
+ * mark in body-small on-surface-variant, never the error role. `below-input`
+ * is a caption under the composer; `output-footer` gets a surface-container
+ * ground so it separates from the output it qualifies, and can carry the
+ * next steps that remove the reason for it. Rendered as a `note`.
+ */
+declare const Md3Caveat: React.ForwardRefExoticComponent<CaveatProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * The `info-tooltip` caveat in Material 3 — the twin of `CaveatTooltip`. The
+ * reminder rides the generate control as an M3 plain tooltip
+ * (inverse-surface, extra-small corners) shown on hover and keyboard focus,
+ * fading in over 150 ms (instantly under reduced motion), and it describes
+ * the control through `aria-describedby` so screen readers hear it too.
+ */
+declare const Md3CaveatTooltip: React.ForwardRefExoticComponent<CaveatTooltipProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Md3Caveat, type Md3CaveatProps, Md3CaveatTooltip, type Md3CaveatTooltipProps, type Md3CaveatVariant };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { CaveatProps, CaveatTooltipProps, CaveatVariant } from '@nucleux/caveat';
+
+type Md3CaveatProps = CaveatProps;
+type Md3CaveatTooltipProps = CaveatTooltipProps;
+type Md3CaveatVariant = CaveatVariant;
+/**
+ * A short, calm note on what to check about an AI result — the Material 3
+ * twin of `Caveat`, with the same API. Caution, not alarm: an outline info
+ * mark in body-small on-surface-variant, never the error role. `below-input`
+ * is a caption under the composer; `output-footer` gets a surface-container
+ * ground so it separates from the output it qualifies, and can carry the
+ * next steps that remove the reason for it. Rendered as a `note`.
+ */
+declare const Md3Caveat: React.ForwardRefExoticComponent<CaveatProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * The `info-tooltip` caveat in Material 3 — the twin of `CaveatTooltip`. The
+ * reminder rides the generate control as an M3 plain tooltip
+ * (inverse-surface, extra-small corners) shown on hover and keyboard focus,
+ * fading in over 150 ms (instantly under reduced motion), and it describes
+ * the control through `aria-describedby` so screen readers hear it too.
+ */
+declare const Md3CaveatTooltip: React.ForwardRefExoticComponent<CaveatTooltipProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Md3Caveat, type Md3CaveatProps, Md3CaveatTooltip, type Md3CaveatTooltipProps, type Md3CaveatVariant };

package/dist/index.js

@@ -0,0 +1,68 @@
+"use client";
+import * as React from 'react';
+import { Info } from 'lucide-react';
+import { cn } from '@nucleux/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var DEFAULT_TEXT = "AI can make mistakes. Verify important information.";
+var Md3Caveat = React.forwardRef(
+  ({ variant = "below-input", icon, actions, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "p",
+    {
+      ref,
+      role: "note",
+      "data-variant": variant,
+      className: cn(
+        "items-center gap-2 text-xs leading-4 tracking-[0.4px] text-md-on-surface-variant [&_svg]:size-3.5 [&_svg]:shrink-0",
+        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",
+        className
+      ),
+      ...props,
+      children: [
+        icon === void 0 ? /* @__PURE__ */ jsx(Info, { "aria-hidden": "true" }) : icon,
+        /* @__PURE__ */ jsx("span", { children: children ?? DEFAULT_TEXT }),
+        actions && /* @__PURE__ */ jsx("span", { className: "ml-auto inline-flex flex-wrap items-center gap-1", children: actions })
+      ]
+    }
+  )
+);
+Md3Caveat.displayName = "Md3Caveat";
+var tipSides = {
+  top: "bottom-full left-1/2 mb-1 -translate-x-1/2",
+  bottom: "top-full left-1/2 mt-1 -translate-x-1/2",
+  left: "right-full top-1/2 mr-1 -translate-y-1/2",
+  right: "left-full top-1/2 ml-1 -translate-y-1/2"
+};
+var Md3CaveatTooltip = React.forwardRef(
+  ({ content = "Output may be inaccurate", side = "top", showIcon = true, children, className, ...props }, ref) => {
+    const id = React.useId();
+    const childProps = children.props;
+    const trigger = React.cloneElement(children, {
+      "aria-describedby": [childProps["aria-describedby"], id].filter(Boolean).join(" ")
+    });
+    return /* @__PURE__ */ jsxs("span", { ref, className: cn("group/caveat relative inline-flex", className), ...props, children: [
+      trigger,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "tooltip",
+          className: cn(
+            "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",
+            "group-hover/caveat:visible group-hover/caveat:opacity-100 group-focus-within/caveat:visible group-focus-within/caveat:opacity-100",
+            tipSides[side]
+          ),
+          children: /* @__PURE__ */ jsxs("span", { id, className: "inline-flex items-center gap-1.5 [&_svg]:size-3", children: [
+            showIcon && /* @__PURE__ */ jsx(Info, { "aria-hidden": "true" }),
+            content
+          ] })
+        }
+      )
+    ] });
+  }
+);
+Md3CaveatTooltip.displayName = "Md3CaveatTooltip";
+
+export { Md3Caveat, Md3CaveatTooltip };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAWA,IAAM,YAAA,GAAe,qDAAA;AAUd,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EAC7B,CAAC,EAAE,OAAA,GAAU,aAAA,EAAe,IAAA,EAAM,OAAA,EAAS,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1E,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,MAAA;AAAA,MACL,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oHAAA;AAAA,QACA,OAAA,KAAY,kBACR,8HAAA,GACA,aAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,KAAS,MAAA,mBAAY,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,QAAO,CAAA,GAAK,IAAA;AAAA,wBACpD,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,IAAY,YAAA,EAAa,CAAA;AAAA,QAC/B,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oDAAoD,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA;AAG9F;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,CAAC,EAAE,OAAA,GAAU,0BAAA,EAA4B,IAAA,GAAO,KAAA,EAAO,QAAA,GAAW,IAAA,EAAM,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC/G,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,CAAC,UAAK,GAAA,EAAU,SAAA,EAAW,GAAG,mCAAA,EAAqC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChF,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBACD,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,SAAA;AAAA,UACL,SAAA,EAAW,EAAA;AAAA,YACT,yOAAA;AAAA,YACA,mIAAA;AAAA,YACA,SAAS,IAAI;AAAA,WACf;AAAA,UAEA,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,EAAA,EAAQ,SAAA,EAAU,iDAAA,EACrB,QAAA,EAAA;AAAA,YAAA,QAAA,oBAAY,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,YACrC;AAAA,WAAA,EACH;AAAA;AAAA;AACF,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","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. Rendered as a `note`.\n */\nexport const Md3Caveat = React.forwardRef<HTMLParagraphElement, Md3CaveatProps>(\n  ({ variant = \"below-input\", icon, actions, className, children, ...props }, ref) => (\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      {icon === undefined ? <Info aria-hidden=\"true\" /> : icon}\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);\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

@@ -1,6 +1,62 @@
 {
   "name": "@nucleux/md3-caveat",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.6.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Material 3 Caveat — a calm, specific note on what to check about an AI result — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "md3",
+    "material",
+    "md3-caveat",
+    "caveat"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nucleux/caveat": "0.6.0",
+    "@nucleux/utils": "0.6.0",
+    "lucide-react": "^0.469.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/md3-caveat"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
 }