@dowel-ui/react 0.1.1 → 0.2.0

package/dist/components/ai-inline-completion/ai-inline-completion.js

@@ -0,0 +1,110 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+//#region src/components/ai-inline-completion/ai-inline-completion.tsx
+/** The next word of a suggestion, including its leading space. */
+function nextWord(suggestion) {
+	const match = /^\s*\S+/.exec(suggestion);
+	return match ? match[0] : suggestion;
+}
+function InlineCompletion({ className, value, onValueChange, suggestion = "", onAccept, onDismiss, singleLine = false, onKeyDown, onScroll, ...props }) {
+	const fieldRef = useRef(null);
+	const mirrorRef = useRef(null);
+	const describedById = useId();
+	const [dismissed, setDismissed] = useState(false);
+	const [composing, setComposing] = useState(false);
+	const [caretAtEnd, setCaretAtEnd] = useState(true);
+	const visible = suggestion.length > 0 && !dismissed && !composing && caretAtEnd;
+	function syncCaret() {
+		const field = fieldRef.current;
+		if (!field) return;
+		setCaretAtEnd(field.selectionStart === value.length && field.selectionEnd === value.length);
+	}
+	function accept(text) {
+		const next = value + text;
+		onValueChange(next);
+		onAccept?.(next);
+		setDismissed(false);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (!visible) return;
+		if (event.key === "ArrowRight" && (event.metaKey || event.altKey || event.ctrlKey)) {
+			event.preventDefault();
+			accept(nextWord(suggestion));
+			return;
+		}
+		if (event.key === "Tab") {
+			event.preventDefault();
+			accept(suggestion);
+			return;
+		}
+		if (event.key === "Escape") {
+			event.preventDefault();
+			setDismissed(true);
+			onDismiss?.();
+		}
+	}
+	function handleChange(event) {
+		setDismissed(false);
+		onValueChange(event.target.value);
+		queueMicrotask(syncCaret);
+	}
+	function handleScroll(event) {
+		onScroll?.(event);
+		if (mirrorRef.current) {
+			mirrorRef.current.scrollTop = event.currentTarget.scrollTop;
+			mirrorRef.current.scrollLeft = event.currentTarget.scrollLeft;
+		}
+	}
+	function handleComposition(event) {
+		setComposing(event.type === "compositionstart");
+	}
+	const shared = cn("w-full rounded-md border border-input px-3 py-2 text-sm", singleLine ? "overflow-x-auto whitespace-pre" : "break-words whitespace-pre-wrap");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "inline-completion",
+		className: cn("relative", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: mirrorRef,
+				"aria-hidden": "true",
+				"data-slot": "inline-completion-ghost",
+				className: cn(shared, "pointer-events-none absolute inset-0 overflow-hidden border-transparent text-transparent select-none"),
+				children: [value, visible ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "inline-completion-suggestion",
+					className: "text-muted-foreground",
+					children: suggestion
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref: fieldRef,
+				"data-slot": "inline-completion-field",
+				"data-suggesting": visible || void 0,
+				rows: singleLine ? 1 : props.rows,
+				value,
+				onChange: handleChange,
+				onKeyDown: handleKeyDown,
+				onScroll: handleScroll,
+				onSelect: syncCaret,
+				onClick: syncCaret,
+				onCompositionStart: handleComposition,
+				onCompositionEnd: handleComposition,
+				"aria-describedby": visible ? describedById : void 0,
+				className: cn(shared, "relative resize-none bg-transparent", "placeholder:text-muted-foreground", "outline-none focus-visible:ring-2 focus-visible:ring-ring/55", singleLine && "resize-none"),
+				...props
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: describedById,
+				"aria-live": "polite",
+				className: "sr-only",
+				children: visible ? `Suggestion: ${suggestion}. Press Tab to accept, Escape to dismiss.` : ""
+			})
+		]
+	});
+}
+//#endregion
+export { InlineCompletion };
+
+//# sourceMappingURL=ai-inline-completion.js.map

package/dist/components/ai-inline-completion/ai-inline-completion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-inline-completion.js","names":[],"sources":["../../../src/components/ai-inline-completion/ai-inline-completion.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type CompositionEvent,\n  type KeyboardEvent,\n  type UIEvent,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Ghost-text suggestion inside a real textarea or input.\n *\n * Outside chat this is the most-copied AI affordance in software — Smart\n * Compose, Copilot's grey continuation, Notion and Linear's inline suggestions —\n * and every team rebuilds the same overlay-mirror trick from the same handful of\n * blog posts.\n *\n * Two deliberate limits, both stated rather than discovered:\n *\n * 1. It works on `textarea` and `input`, not on contenteditable. Ghost text in\n *    contenteditable means owning selection, undo and inline formatting, which\n *    is an editor, not a component. Anyone in that territory already has\n *    ProseMirror or Lexical and should extend it there.\n * 2. The suggestion completes the END of the value. Mid-caret insertion needs\n *    per-character measurement of wrapped text; the ghost hides whenever the\n *    caret is not at the end rather than rendering in the wrong place.\n *\n * There is no WAI-ARIA pattern for generative ghost text. Combobox is the\n * nearest and does not fit: the suggestion is not one of a known set of options,\n * so a listbox would be a lie. What the standard does require is that the\n * suggestion be perceivable and that the keyboard is never trapped — so the text\n * is announced through a live description, and Escape always restores plain Tab.\n */\n\nexport interface InlineCompletionProps extends Omit<\n  ComponentPropsWithRef<\"textarea\">,\n  \"value\" | \"onChange\" | \"children\"\n> {\n  value: string;\n  onValueChange: (value: string) => void;\n  /**\n   * The continuation to show after the value. Empty or undefined shows nothing.\n   * The caller supplies this; the component never requests it.\n   */\n  suggestion?: string;\n  /** Called with the full text after the suggestion is taken. */\n  onAccept?: (value: string) => void;\n  /** Called when the reader rejects the suggestion outright. */\n  onDismiss?: () => void;\n  /** Renders a single-line input instead of a textarea. */\n  singleLine?: boolean;\n}\n\n/** The next word of a suggestion, including its leading space. */\nfunction nextWord(suggestion: string): string {\n  const match = /^\\s*\\S+/.exec(suggestion);\n  return match ? match[0] : suggestion;\n}\n\nexport function InlineCompletion({\n  className,\n  value,\n  onValueChange,\n  suggestion = \"\",\n  onAccept,\n  onDismiss,\n  singleLine = false,\n  onKeyDown,\n  onScroll,\n  ...props\n}: InlineCompletionProps) {\n  const fieldRef = useRef<HTMLTextAreaElement | null>(null);\n  const mirrorRef = useRef<HTMLDivElement | null>(null);\n  const describedById = useId();\n\n  const [dismissed, setDismissed] = useState(false);\n  const [composing, setComposing] = useState(false);\n  const [caretAtEnd, setCaretAtEnd] = useState(true);\n\n  // A suggestion is only shown when it can be shown honestly: not mid-word of\n  // an IME composition, not after the reader has rejected it, and not when the\n  // caret sits somewhere the ghost would render in the wrong place.\n  const visible = suggestion.length > 0 && !dismissed && !composing && caretAtEnd;\n\n  function syncCaret() {\n    const field = fieldRef.current;\n    if (!field) return;\n    setCaretAtEnd(field.selectionStart === value.length && field.selectionEnd === value.length);\n  }\n\n  function accept(text: string) {\n    const next = value + text;\n    onValueChange(next);\n    onAccept?.(next);\n    setDismissed(false);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    if (!visible) return;\n\n    // Word-at-a-time, before the plain Tab case so the modifier wins.\n    if (event.key === \"ArrowRight\" && (event.metaKey || event.altKey || event.ctrlKey)) {\n      event.preventDefault();\n      accept(nextWord(suggestion));\n      return;\n    }\n\n    if (event.key === \"Tab\") {\n      event.preventDefault();\n      accept(suggestion);\n      return;\n    }\n\n    if (event.key === \"Escape\") {\n      // The escape hatch. Without it, a keyboard user facing a suggestion has\n      // no way to leave the field: Tab would accept instead of moving focus.\n      event.preventDefault();\n      setDismissed(true);\n      onDismiss?.();\n    }\n  }\n\n  function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {\n    // Any edit invalidates the previous rejection: the reader has moved on and\n    // the next suggestion is a different one.\n    setDismissed(false);\n    onValueChange(event.target.value);\n    queueMicrotask(syncCaret);\n  }\n\n  function handleScroll(event: UIEvent<HTMLTextAreaElement>) {\n    onScroll?.(event);\n    // The mirror has to follow the field, or the ghost detaches from the text\n    // as soon as the content is taller than the box.\n    if (mirrorRef.current) {\n      mirrorRef.current.scrollTop = event.currentTarget.scrollTop;\n      mirrorRef.current.scrollLeft = event.currentTarget.scrollLeft;\n    }\n  }\n\n  function handleComposition(event: CompositionEvent<HTMLTextAreaElement>) {\n    setComposing(event.type === \"compositionstart\");\n  }\n\n  // Typography must match exactly between field and mirror or the ghost lands\n  // in the wrong place. Both take the same class string for that reason.\n  const shared = cn(\n    \"w-full rounded-md border border-input px-3 py-2 text-sm\",\n    singleLine ? \"overflow-x-auto whitespace-pre\" : \"break-words whitespace-pre-wrap\",\n  );\n\n  return (\n    <div data-slot=\"inline-completion\" className={cn(\"relative\", className)}>\n      {/* The mirror sits behind the field and holds the value in transparent\n          text purely to push the ghost to the caret position. */}\n      <div\n        ref={mirrorRef}\n        aria-hidden=\"true\"\n        data-slot=\"inline-completion-ghost\"\n        className={cn(\n          shared,\n          \"pointer-events-none absolute inset-0 overflow-hidden border-transparent text-transparent select-none\",\n        )}\n      >\n        {value}\n        {visible ? (\n          <span data-slot=\"inline-completion-suggestion\" className=\"text-muted-foreground\">\n            {suggestion}\n          </span>\n        ) : null}\n      </div>\n\n      <textarea\n        ref={fieldRef}\n        data-slot=\"inline-completion-field\"\n        data-suggesting={visible || undefined}\n        rows={singleLine ? 1 : props.rows}\n        value={value}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onScroll={handleScroll}\n        onSelect={syncCaret}\n        onClick={syncCaret}\n        onCompositionStart={handleComposition}\n        onCompositionEnd={handleComposition}\n        aria-describedby={visible ? describedById : undefined}\n        className={cn(\n          shared,\n          \"relative resize-none bg-transparent\",\n          \"placeholder:text-muted-foreground\",\n          \"outline-none focus-visible:ring-2 focus-visible:ring-ring/55\",\n          singleLine && \"resize-none\",\n        )}\n        {...props}\n      />\n\n      {/* The suggestion as text, for anyone who cannot see grey glyphs behind a\n          field. Polite, so it does not interrupt typing, and it states the keys\n          because a gesture nobody knows about is not an affordance. */}\n      <span id={describedById} aria-live=\"polite\" className=\"sr-only\">\n        {visible ? `Suggestion: ${suggestion}. Press Tab to accept, Escape to dismiss.` : \"\"}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA4DA,SAAS,SAAS,YAA4B;CAC5C,MAAM,QAAQ,UAAU,KAAK,UAAU;CACvC,OAAO,QAAQ,MAAM,KAAK;AAC5B;AAEA,SAAgB,iBAAiB,EAC/B,WACA,OACA,eACA,aAAa,IACb,UACA,WACA,aAAa,OACb,WACA,UACA,GAAG,SACqB;CACxB,MAAM,WAAW,OAAmC,IAAI;CACxD,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,gBAAgB,MAAM;CAE5B,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CAKjD,MAAM,UAAU,WAAW,SAAS,KAAK,CAAC,aAAa,CAAC,aAAa;CAErE,SAAS,YAAY;EACnB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,cAAc,MAAM,mBAAmB,MAAM,UAAU,MAAM,iBAAiB,MAAM,MAAM;CAC5F;CAEA,SAAS,OAAO,MAAc;EAC5B,MAAM,OAAO,QAAQ;EACrB,cAAc,IAAI;EAClB,WAAW,IAAI;EACf,aAAa,KAAK;CACpB;CAEA,SAAS,cAAc,OAA2C;EAChE,YAAY,KAAK;EACjB,IAAI,MAAM,kBAAkB;EAE5B,IAAI,CAAC,SAAS;EAGd,IAAI,MAAM,QAAQ,iBAAiB,MAAM,WAAW,MAAM,UAAU,MAAM,UAAU;GAClF,MAAM,eAAe;GACrB,OAAO,SAAS,UAAU,CAAC;GAC3B;EACF;EAEA,IAAI,MAAM,QAAQ,OAAO;GACvB,MAAM,eAAe;GACrB,OAAO,UAAU;GACjB;EACF;EAEA,IAAI,MAAM,QAAQ,UAAU;GAG1B,MAAM,eAAe;GACrB,aAAa,IAAI;GACjB,YAAY;EACd;CACF;CAEA,SAAS,aAAa,OAAyC;EAG7D,aAAa,KAAK;EAClB,cAAc,MAAM,OAAO,KAAK;EAChC,eAAe,SAAS;CAC1B;CAEA,SAAS,aAAa,OAAqC;EACzD,WAAW,KAAK;EAGhB,IAAI,UAAU,SAAS;GACrB,UAAU,QAAQ,YAAY,MAAM,cAAc;GAClD,UAAU,QAAQ,aAAa,MAAM,cAAc;EACrD;CACF;CAEA,SAAS,kBAAkB,OAA8C;EACvE,aAAa,MAAM,SAAS,kBAAkB;CAChD;CAIA,MAAM,SAAS,GACb,2DACA,aAAa,mCAAmC,iCAClD;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAoB,WAAW,GAAG,YAAY,SAAS;EAAtE,UAAA;GAGE,qBAAC,OAAD;IACE,KAAK;IACL,eAAY;IACZ,aAAU;IACV,WAAW,GACT,QACA,sGACF;IAPF,UAAA,CASG,OACA,UACC,oBAAC,QAAD;KAAM,aAAU;KAA+B,WAAU;KACtD,UAAA;IACG,CAAA,IACJ,IACD;;GAEL,oBAAC,YAAD;IACE,KAAK;IACL,aAAU;IACV,mBAAiB,WAAW,KAAA;IAC5B,MAAM,aAAa,IAAI,MAAM;IACtB;IACP,UAAU;IACV,WAAW;IACX,UAAU;IACV,UAAU;IACV,SAAS;IACT,oBAAoB;IACpB,kBAAkB;IAClB,oBAAkB,UAAU,gBAAgB,KAAA;IAC5C,WAAW,GACT,QACA,uCACA,qCACA,gEACA,cAAc,aAChB;IACA,GAAI;GACL,CAAA;GAKD,oBAAC,QAAD;IAAM,IAAI;IAAe,aAAU;IAAS,WAAU;IACnD,UAAA,UAAU,eAAe,WAAW,6CAA6C;GAC9E,CAAA;EACH;;AAET"}

package/dist/components/ai-inline-completion/index.d.ts

@@ -0,0 +1,2 @@
+import { InlineCompletion, InlineCompletionProps } from "./ai-inline-completion.js";
+export { InlineCompletion, type InlineCompletionProps };

package/dist/components/ai-inline-completion/index.js

@@ -0,0 +1,2 @@
+import { InlineCompletion } from "./ai-inline-completion.js";
+export { InlineCompletion };

package/dist/components/ai-inline-completion/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-inline-completion/meta.ts
+const meta = defineMeta({
+	name: "ai-inline-completion",
+	title: "AI Inline Completion",
+	description: "Ghost-text suggestion inside a real textarea, accepted with Tab.",
+	category: "ai",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["ai-inline-completion.tsx"],
+	a11y: "No WAI-ARIA pattern covers generative ghost text — combobox is the nearest and does not fit, because the suggestion is not one of a known set of options and a listbox would misdescribe it. So the suggestion is announced through a polite live description that names the keys, since a gesture nobody knows about is not an affordance, and the grey text itself is aria-hidden. Escape always dismisses and restores plain Tab, so the keyboard is never trapped in the field. The ghost hides during IME composition and whenever the caret is not at the end, rather than rendering somewhere it does not belong."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ai-inline-completion/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-inline-completion/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-inline-completion\",\n  title: \"AI Inline Completion\",\n  description: \"Ghost-text suggestion inside a real textarea, accepted with Tab.\",\n  category: \"ai\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"ai-inline-completion.tsx\"],\n  a11y:\n    \"No WAI-ARIA pattern covers generative ghost text — combobox is the nearest and does not fit, \" +\n    \"because the suggestion is not one of a known set of options and a listbox would misdescribe \" +\n    \"it. So the suggestion is announced through a polite live description that names the keys, \" +\n    \"since a gesture nobody knows about is not an affordance, and the grey text itself is \" +\n    \"aria-hidden. Escape always dismisses and restores plain Tab, so the keyboard is never \" +\n    \"trapped in the field. The ghost hides during IME composition and whenever the caret is not \" +\n    \"at the end, rather than rendering somewhere it does not belong.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,0BAA0B;CAClC,MACE;AAOJ,CAAC"}

package/dist/components/ai-structured-output/ai-structured-output.d.ts

@@ -0,0 +1,75 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/ai-structured-output/ai-structured-output.d.ts
+/**
+ * An object arriving field by field from the model.
+ *
+ * Most AI features inside real software are not chatbots. They are invoice
+ * extraction, CRM enrichment, resume parsing, form autofill — a schema goes in
+ * and a filled object comes back. Every one of them streams a partial object
+ * into a layout, and almost every one reflows on each token because the fields
+ * appear as they arrive.
+ *
+ * The honest limitation, stated here rather than discovered later: there is no
+ * per-field completion signal anywhere in the stack. A streaming API hands you
+ * successive partial snapshots, and a string that has stopped growing is
+ * indistinguishable from one still arriving. So this component does not pretend
+ * to know. It takes the field list up front, reserves the layout from it, and
+ * lets the caller say which fields are settled — defaulting to the rule that a
+ * field is settled once a later field has appeared, which is true of
+ * depth-first JSON streaming and is documented rather than assumed silently.
+ */
+type FieldState = "pending" | "streaming" | "settled" | "error";
+interface OutputField {
+  /** Key in the streamed object. */
+  name: string;
+  label: string;
+  /** Rough height reserved before the value arrives, in lines. */
+  lines?: number;
+}
+interface StructuredOutputProps extends Omit<ComponentPropsWithRef<"dl">, "children"> {
+  /** Declared up front, so layout is reserved before anything arrives. */
+  fields: OutputField[];
+  /** The latest partial snapshot. */
+  value: Record<string, unknown>;
+  /**
+   * True while more of the object is still expected. When false every present
+   * field is settled, which is the only completion signal that is ever certain.
+   */
+  streaming?: boolean;
+  /**
+   * Fields the caller knows are finished. Supply this when the API gives a
+   * real signal; otherwise the default rule applies.
+   */
+  settled?: string[];
+  /** Fields that failed to extract, with the reason shown in place. */
+  errors?: Record<string, string>;
+  formatValue?: (value: unknown, name: string) => string;
+  children?: ReactNode;
+}
+declare function StructuredOutput({ className, fields, value, streaming, settled, errors, formatValue, children, ...props }: StructuredOutputProps): import("react").JSX.Element;
+interface StructuredFieldProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  name: string;
+  children?: ReactNode;
+}
+/**
+ * One field: its label, its value, and the space it will occupy before it has
+ * one.
+ *
+ * The reserved height is what stops the layout jumping as the object fills in.
+ */
+declare function StructuredField({ className, name, children, ...props }: StructuredFieldProps): import("react").JSX.Element;
+/**
+ * A confidence score for one field.
+ *
+ * Rendered as text with the number, never as a bare colour, because "how much
+ * should I trust this" is exactly the thing a colour cannot answer.
+ */
+declare function StructuredConfidence({ className, value: confidence, lowBelow, ...props }: ComponentPropsWithRef<"p"> & {
+  value: number;
+  lowBelow?: number;
+}): import("react").JSX.Element;
+/** The reason a field could not be extracted, shown where the value would be. */
+declare function StructuredFieldError({ className, ...props }: ComponentPropsWithRef<"p">): import("react").JSX.Element;
+//#endregion
+export { FieldState, OutputField, StructuredConfidence, StructuredField, StructuredFieldError, StructuredFieldProps, StructuredOutput, StructuredOutputProps };
+//# sourceMappingURL=ai-structured-output.d.ts.map

package/dist/components/ai-structured-output/ai-structured-output.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-structured-output.d.ts","names":[],"sources":["../../../src/components/ai-structured-output/ai-structured-output.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;KA+BY;UAEK;;EAEf;EACA;;EAEA;;UA6Be,8BAA8B,KAAK;;EAElD,QAAQ;;EAER,OAAO;;;;;EAKP;;;;;EAKA;;EAEA,SAAS;EACT,eAAe,gBAAgB;EAC/B,WAAW;;iBAGG,mBACd,WACA,QACA,OACA,WACA,SACA,QACA,aACA,aACG,SACF,wCAAqB,IAAA;UAiDP,6BAA6B,KAAK;EACjD;EACA,WAAW;;;;;;;;iBASG,kBAAkB,WAAW,MAAM,aAAa,SAAS,uCAAoB,IAAA;;;;;;;iBAoD7E,uBACd,WACA,OAAO,YACP,aACG,SACF;EAA+B;EAAe;oBAAmB,IAAA;;iBAoBpD,uBAAuB,cAAc,SAAS,6CAA0B,IAAA"}

package/dist/components/ai-structured-output/ai-structured-output.js

@@ -0,0 +1,126 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+//#region src/components/ai-structured-output/ai-structured-output.tsx
+const StructuredOutputContext = createContext(null);
+function useStructuredOutputContext(component) {
+	const context = useContext(StructuredOutputContext);
+	if (!context) throw new Error(`${component} must be rendered inside <StructuredOutput>.`);
+	return context;
+}
+function defaultFormat(value) {
+	if (value === null || value === void 0) return "";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "bigint") return String(value);
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (Array.isArray(value)) return value.map(defaultFormat).join(", ");
+	return JSON.stringify(value);
+}
+function StructuredOutput({ className, fields, value, streaming = false, settled, errors, formatValue = defaultFormat, children, ...props }) {
+	const stateOf = useMemo(() => {
+		const explicit = settled ? new Set(settled) : null;
+		const lastPresentIndex = fields.reduce((last, field, index) => value[field.name] !== void 0 ? index : last, -1);
+		return (name) => {
+			if (errors?.[name]) return "error";
+			const index = fields.findIndex((field) => field.name === name);
+			if (!(value[name] !== void 0)) return "pending";
+			if (explicit) return explicit.has(name) ? "settled" : "streaming";
+			if (!streaming) return "settled";
+			return index < lastPresentIndex ? "settled" : "streaming";
+		};
+	}, [
+		fields,
+		value,
+		streaming,
+		settled,
+		errors
+	]);
+	const context = useMemo(() => ({
+		fields,
+		value,
+		stateOf,
+		formatValue
+	}), [
+		fields,
+		value,
+		stateOf,
+		formatValue
+	]);
+	return /* @__PURE__ */ jsx(StructuredOutputContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("dl", {
+			"data-slot": "structured-output",
+			"data-streaming": streaming || void 0,
+			"aria-live": "polite",
+			"aria-busy": streaming,
+			className: cn("flex flex-col gap-3", className),
+			...props,
+			children: children ?? fields.map((field) => /* @__PURE__ */ jsx(StructuredField, { name: field.name }, field.name))
+		})
+	});
+}
+/**
+* One field: its label, its value, and the space it will occupy before it has
+* one.
+*
+* The reserved height is what stops the layout jumping as the object fills in.
+*/
+function StructuredField({ className, name, children, ...props }) {
+	const { fields, value, stateOf, formatValue } = useStructuredOutputContext("StructuredField");
+	const field = fields.find((candidate) => candidate.name === name);
+	if (!field) throw new Error(`StructuredField "${name}" is not declared in the fields prop.`);
+	const state = stateOf(name);
+	const raw = value[name];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "structured-field",
+		"data-state": state,
+		"data-field": name,
+		className: cn("flex flex-col gap-1", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-xs text-muted-foreground",
+			children: field.label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: cn("m-0 text-sm", state === "pending" && "text-muted-foreground", state === "error" && "text-destructive"),
+			style: { minHeight: `${String((field.lines ?? 1) * 1.25)}rem` },
+			children: state === "pending" ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "structured-field-placeholder",
+				"aria-hidden": "true",
+				className: "block h-4 w-24 animate-pulse-soft rounded bg-muted"
+			}) : children ?? formatValue(raw, name)
+		})]
+	});
+}
+/**
+* A confidence score for one field.
+*
+* Rendered as text with the number, never as a bare colour, because "how much
+* should I trust this" is exactly the thing a colour cannot answer.
+*/
+function StructuredConfidence({ className, value: confidence, lowBelow = .7, ...props }) {
+	const low = confidence < lowBelow;
+	const percent = new Intl.NumberFormat(void 0, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}).format(confidence);
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "structured-confidence",
+		"data-low": low || void 0,
+		className: cn("text-xs", low ? "text-warning" : "text-muted-foreground", className),
+		...props,
+		children: low ? `Low confidence, ${percent} — worth checking` : `${percent} confidence`
+	});
+}
+/** The reason a field could not be extracted, shown where the value would be. */
+function StructuredFieldError({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "structured-field-error",
+		className: cn("text-xs text-destructive", className),
+		...props
+	});
+}
+//#endregion
+export { StructuredConfidence, StructuredField, StructuredFieldError, StructuredOutput };
+
+//# sourceMappingURL=ai-structured-output.js.map

package/dist/components/ai-structured-output/ai-structured-output.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-structured-output.js","names":[],"sources":["../../../src/components/ai-structured-output/ai-structured-output.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * An object arriving field by field from the model.\n *\n * Most AI features inside real software are not chatbots. They are invoice\n * extraction, CRM enrichment, resume parsing, form autofill — a schema goes in\n * and a filled object comes back. Every one of them streams a partial object\n * into a layout, and almost every one reflows on each token because the fields\n * appear as they arrive.\n *\n * The honest limitation, stated here rather than discovered later: there is no\n * per-field completion signal anywhere in the stack. A streaming API hands you\n * successive partial snapshots, and a string that has stopped growing is\n * indistinguishable from one still arriving. So this component does not pretend\n * to know. It takes the field list up front, reserves the layout from it, and\n * lets the caller say which fields are settled — defaulting to the rule that a\n * field is settled once a later field has appeared, which is true of\n * depth-first JSON streaming and is documented rather than assumed silently.\n */\n\nexport type FieldState = \"pending\" | \"streaming\" | \"settled\" | \"error\";\n\nexport interface OutputField {\n  /** Key in the streamed object. */\n  name: string;\n  label: string;\n  /** Rough height reserved before the value arrives, in lines. */\n  lines?: number;\n}\n\ninterface StructuredOutputContextValue {\n  fields: OutputField[];\n  value: Record<string, unknown>;\n  stateOf: (name: string) => FieldState;\n  formatValue: (value: unknown, name: string) => string;\n}\n\nconst StructuredOutputContext = createContext<StructuredOutputContextValue | null>(null);\n\nfunction useStructuredOutputContext(component: string): StructuredOutputContextValue {\n  const context = useContext(StructuredOutputContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <StructuredOutput>.`);\n  }\n  return context;\n}\n\nfunction defaultFormat(value: unknown): string {\n  if (value === null || value === undefined) return \"\";\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"bigint\") return String(value);\n  if (typeof value === \"boolean\") return value ? \"Yes\" : \"No\";\n  if (Array.isArray(value)) return value.map(defaultFormat).join(\", \");\n  return JSON.stringify(value);\n}\n\nexport interface StructuredOutputProps extends Omit<ComponentPropsWithRef<\"dl\">, \"children\"> {\n  /** Declared up front, so layout is reserved before anything arrives. */\n  fields: OutputField[];\n  /** The latest partial snapshot. */\n  value: Record<string, unknown>;\n  /**\n   * True while more of the object is still expected. When false every present\n   * field is settled, which is the only completion signal that is ever certain.\n   */\n  streaming?: boolean;\n  /**\n   * Fields the caller knows are finished. Supply this when the API gives a\n   * real signal; otherwise the default rule applies.\n   */\n  settled?: string[];\n  /** Fields that failed to extract, with the reason shown in place. */\n  errors?: Record<string, string>;\n  formatValue?: (value: unknown, name: string) => string;\n  children?: ReactNode;\n}\n\nexport function StructuredOutput({\n  className,\n  fields,\n  value,\n  streaming = false,\n  settled,\n  errors,\n  formatValue = defaultFormat,\n  children,\n  ...props\n}: StructuredOutputProps) {\n  const stateOf = useMemo(() => {\n    const explicit = settled ? new Set(settled) : null;\n    const lastPresentIndex = fields.reduce(\n      (last, field, index) => (value[field.name] !== undefined ? index : last),\n      -1,\n    );\n\n    return (name: string): FieldState => {\n      if (errors?.[name]) return \"error\";\n\n      const index = fields.findIndex((field) => field.name === name);\n      const present = value[name] !== undefined;\n\n      if (!present) return \"pending\";\n      if (explicit) return explicit.has(name) ? \"settled\" : \"streaming\";\n      // No explicit signal. Once a later field has appeared this one cannot\n      // still be growing, which holds for depth-first JSON streaming. The last\n      // present field stays \"streaming\" until the caller says streaming ended.\n      if (!streaming) return \"settled\";\n      return index < lastPresentIndex ? \"settled\" : \"streaming\";\n    };\n  }, [fields, value, streaming, settled, errors]);\n\n  const context = useMemo<StructuredOutputContextValue>(\n    () => ({ fields, value, stateOf, formatValue }),\n    [fields, value, stateOf, formatValue],\n  );\n\n  return (\n    <StructuredOutputContext.Provider value={context}>\n      <dl\n        data-slot=\"structured-output\"\n        data-streaming={streaming || undefined}\n        // Fields arrive one at a time and each is a small, self-contained fact,\n        // so the region is polite and additive rather than re-reading the whole\n        // object on every token.\n        aria-live=\"polite\"\n        aria-busy={streaming}\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {children ??\n          fields.map((field) => <StructuredField key={field.name} name={field.name} />)}\n      </dl>\n    </StructuredOutputContext.Provider>\n  );\n}\n\nexport interface StructuredFieldProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  name: string;\n  children?: ReactNode;\n}\n\n/**\n * One field: its label, its value, and the space it will occupy before it has\n * one.\n *\n * The reserved height is what stops the layout jumping as the object fills in.\n */\nexport function StructuredField({ className, name, children, ...props }: StructuredFieldProps) {\n  const { fields, value, stateOf, formatValue } = useStructuredOutputContext(\"StructuredField\");\n\n  const field = fields.find((candidate) => candidate.name === name);\n  if (!field) {\n    throw new Error(`StructuredField \"${name}\" is not declared in the fields prop.`);\n  }\n\n  const state = stateOf(name);\n  const raw = value[name];\n\n  return (\n    <div\n      data-slot=\"structured-field\"\n      data-state={state}\n      data-field={name}\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    >\n      <dt className=\"text-xs text-muted-foreground\">{field.label}</dt>\n      <dd\n        className={cn(\n          \"m-0 text-sm\",\n          state === \"pending\" && \"text-muted-foreground\",\n          state === \"error\" && \"text-destructive\",\n        )}\n        // Height is reserved from the declared line count so the value lands in\n        // space already set aside for it rather than pushing the page down.\n        // Computed rather than left to calc() so the reserved height is a plain\n        // value that can be asserted and reasoned about.\n        style={{ minHeight: `${String((field.lines ?? 1) * 1.25)}rem` }}\n      >\n        {state === \"pending\" ? (\n          <span\n            data-slot=\"structured-field-placeholder\"\n            aria-hidden=\"true\"\n            className=\"block h-4 w-24 animate-pulse-soft rounded bg-muted\"\n          />\n        ) : (\n          (children ?? formatValue(raw, name))\n        )}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * A confidence score for one field.\n *\n * Rendered as text with the number, never as a bare colour, because \"how much\n * should I trust this\" is exactly the thing a colour cannot answer.\n */\nexport function StructuredConfidence({\n  className,\n  value: confidence,\n  lowBelow = 0.7,\n  ...props\n}: ComponentPropsWithRef<\"p\"> & { value: number; lowBelow?: number }) {\n  const low = confidence < lowBelow;\n  const percent = new Intl.NumberFormat(undefined, {\n    style: \"percent\",\n    maximumFractionDigits: 0,\n  }).format(confidence);\n\n  return (\n    <p\n      data-slot=\"structured-confidence\"\n      data-low={low || undefined}\n      className={cn(\"text-xs\", low ? \"text-warning\" : \"text-muted-foreground\", className)}\n      {...props}\n    >\n      {low ? `Low confidence, ${percent} — worth checking` : `${percent} confidence`}\n    </p>\n  );\n}\n\n/** The reason a field could not be extracted, shown where the value would be. */\nexport function StructuredFieldError({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  return (\n    <p\n      data-slot=\"structured-field-error\"\n      className={cn(\"text-xs text-destructive\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai-structured-output/index.d.ts

@@ -0,0 +1,2 @@
+import { FieldState, OutputField, StructuredConfidence, StructuredField, StructuredFieldError, StructuredFieldProps, StructuredOutput, StructuredOutputProps } from "./ai-structured-output.js";
+export { type FieldState, type OutputField, StructuredConfidence, StructuredField, StructuredFieldError, type StructuredFieldProps, StructuredOutput, type StructuredOutputProps };

package/dist/components/ai-structured-output/index.js

@@ -0,0 +1,2 @@
+import { StructuredConfidence, StructuredField, StructuredFieldError, StructuredOutput } from "./ai-structured-output.js";
+export { StructuredConfidence, StructuredField, StructuredFieldError, StructuredOutput };

package/dist/components/ai-structured-output/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-structured-output/meta.ts
+const meta = defineMeta({
+	name: "ai-structured-output",
+	title: "AI Structured Output",
+	description: "An object arriving field by field from the model, without the layout jumping.",
+	category: "ai",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["ai-structured-output.tsx"],
+	a11y: "A description list, so each value is associated with its label rather than floating beside it. The region is aria-live=\"polite\" with aria-busy while streaming, so fields are announced as they settle instead of re-reading the whole object on every token. Height is reserved from the declared field list, which keeps focus and reading position stable as values arrive. Confidence is stated as a number in words, never as a colour alone."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ai-structured-output/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-structured-output/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-structured-output\",\n  title: \"AI Structured Output\",\n  description: \"An object arriving field by field from the model, without the layout jumping.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"ai-structured-output.tsx\"],\n  a11y:\n    \"A description list, so each value is associated with its label rather than floating beside \" +\n    'it. The region is aria-live=\"polite\" with aria-busy while streaming, so fields are ' +\n    \"announced as they settle instead of re-reading the whole object on every token. Height is \" +\n    \"reserved from the declared field list, which keeps focus and reading position stable as \" +\n    \"values arrive. Confidence is stated as a number in words, never as a colour alone.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,0BAA0B;CAClC,MACE;AAKJ,CAAC"}

package/dist/components/ai-tool/ai-tool.d.ts

@@ -14,7 +14,7 @@ import { ComponentPropsWithRef, ReactNode } from "react";
  */
 type ToolStatus = "pending" | "running" | "success" | "error";
 declare const toolVariants: (props?: ({
-  status?: "error" | "pending" | "running" | "success" | null | undefined;
+  status?: "success" | "error" | "pending" | "running" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ToolProps extends ComponentPropsWithRef<typeof Collapsible.Root>, VariantProps<typeof toolVariants> {
   status?: ToolStatus;

package/dist/components/alert/alert.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/alert/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "success" | "warning" | "destructive" | "default" | "info" | null | undefined;
+  variant?: "destructive" | "default" | "success" | "warning" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * How urgently the alert should interrupt a screen reader.

package/dist/components/badge/badge.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/badge/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "success" | "warning" | "destructive" | "default" | "info" | "secondary" | "outline" | null | undefined;
+  variant?: "secondary" | "outline" | "destructive" | "default" | "success" | "warning" | "info" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface BadgeProps extends ComponentPropsWithRef<"span">, VariantProps<typeof badgeVariants> {

package/dist/components/button/button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/button/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "primary" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+  variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends ComponentPropsWithRef<"button">, VariantProps<typeof buttonVariants> {

package/dist/components/meter/index.d.ts

@@ -0,0 +1,2 @@
+import { Meter, MeterLegend, MeterProps, MeterSegment, MeterTone, MeterValue } from "./meter.js";
+export { Meter, MeterLegend, type MeterProps, type MeterSegment, type MeterTone, MeterValue };

package/dist/components/meter/index.js

@@ -0,0 +1,2 @@
+import { Meter, MeterLegend, MeterValue } from "./meter.js";
+export { Meter, MeterLegend, MeterValue };

package/dist/components/meter/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/meter/meta.ts
+const meta = defineMeta({
+	name: "meter",
+	title: "Meter",
+	description: "A measurement against a capacity — quota, seats, spend — segmented by category.",
+	category: "feedback",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["meter.tsx"],
+	a11y: "Uses role=\"meter\", not role=\"progressbar\": a meter reports a level with no expectation of reaching the end, and screen readers phrase the two differently. The bar is one meter and the segments inside it are decoration — making each its own widget would put several unlabelled meters in the tab order to describe one quantity. aria-valuetext carries the unit and the capacity, because a bare \"4\" says nothing about 4 of what. Per-segment detail lives in MeterLegend as text, where it can be read."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/meter/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/meter/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"meter\",\n  title: \"Meter\",\n  description:\n    \"A measurement against a capacity — quota, seats, spend — segmented by category.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"meter.tsx\"],\n  a11y:\n    'Uses role=\"meter\", not role=\"progressbar\": a meter reports a level with no expectation of ' +\n    \"reaching the end, and screen readers phrase the two differently. The bar is one meter and \" +\n    \"the segments inside it are decoration — making each its own widget would put several \" +\n    \"unlabelled meters in the tab order to describe one quantity. aria-valuetext carries the \" +\n    'unit and the capacity, because a bare \"4\" says nothing about 4 of what. Per-segment detail ' +\n    \"lives in MeterLegend as text, where it can be read.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,WAAW;CACnB,MACE;AAMJ,CAAC"}

package/dist/components/meter/meter.d.ts

@@ -0,0 +1,69 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/meter/meter.d.ts
+/**
+ * A measurement against a known capacity: storage against a quota, seats
+ * against a plan, spend against a budget.
+ *
+ * Not a Progress. Progress reports how far along a task is and is expected to
+ * reach the end; a meter reports a level that has no reason to move at all, and
+ * where being near the top is the thing worth noticing. They carry different
+ * ARIA roles for exactly that reason, and screen readers phrase them
+ * differently.
+ *
+ * The bar is a single `role="meter"` and the segments inside it are decoration.
+ * Making each segment its own widget would put five unlabelled meters in the
+ * tab order to describe one quantity; the legend carries the per-segment detail
+ * as text instead, where it can actually be read.
+ */
+declare const TONES: {
+  readonly primary: "bg-primary";
+  readonly info: "bg-info";
+  readonly success: "bg-success";
+  readonly warning: "bg-warning";
+  readonly destructive: "bg-destructive";
+  readonly neutral: "bg-border-strong";
+};
+type MeterTone = keyof typeof TONES;
+interface MeterSegment {
+  /** Stable identity, so a re-order does not re-animate every segment. */
+  id: string;
+  /** Named in the legend and in the accessible summary. */
+  label: string;
+  value: number;
+  tone?: MeterTone;
+}
+interface MeterProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** Parts making up the measurement. One segment is the ordinary case. */
+  segments: MeterSegment[];
+  /** The capacity being measured against. */
+  max: number;
+  /** Names the meter. Required — an unnamed measurement is unreadable. */
+  label: string;
+  /**
+   * Fraction of `max` past which the meter reports strain, between 0 and 1.
+   * Presentation only: it never changes the reported value.
+   */
+  warnAt?: number;
+  /** Optional marker on the track, for a soft limit or an alert threshold. */
+  threshold?: {
+    value: number;
+    label: string;
+  };
+  /** Formats every number that reaches the reader. */
+  format?: (value: number) => string;
+  /** Shown after the bar. Compose `MeterLegend` here, or your own summary. */
+  children?: React.ReactNode;
+}
+declare function Meter({ className, segments, max, label, warnAt, threshold, format, children, ...props }: MeterProps): import("react").JSX.Element;
+/**
+ * The per-segment breakdown, as text.
+ *
+ * This is where the detail lives. The bar communicates one number; anyone who
+ * needs to know that images account for most of it reads it here.
+ */
+declare function MeterLegend({ className, ...props }: ComponentPropsWithRef<"ul">): import("react").JSX.Element;
+/** The headline "4.2 GB of 10 GB" line, with an over-capacity state. */
+declare function MeterValue({ className, ...props }: ComponentPropsWithRef<"p">): import("react").JSX.Element;
+//#endregion
+export { Meter, MeterLegend, MeterProps, MeterSegment, MeterTone, MeterValue };
+//# sourceMappingURL=meter.d.ts.map

package/dist/components/meter/meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.d.ts","names":[],"sources":["../../../src/components/meter/meter.tsx"],"mappings":";;;;;;;;;;;;;;;;;cAsBM;;;;;;;;KASM,yBAAyB;UAEpB;;EAEf;;EAEA;EACA;EACA,OAAO;;UAyBQ,mBAAmB,KAAK;;EAEvC,UAAU;;EAEV;;EAEA;;;;;EAKA;;EAEA;IAAc;IAAe;;;EAE7B,UAAU;;EAEV,WAAW,MAAM;;iBAGH,QACd,WACA,UACA,KACA,OACA,QACA,WACA,QACA,aACG,SACF,6BAAU,IAAA;;;;;;;iBAmFG,cAAc,cAAc,SAAS,8CAA2B,IAAA;;iBAwBhE,aAAa,cAAc,SAAS,6CAA0B,IAAA"}