@ada-cx/lovelace 1.0.0-setup.0

package/dist/components/MenuItem/MenuItem.d.ts

@@ -0,0 +1,10 @@
+import { MenuItemLeading } from "./MenuItemLeading.js";
+import { MenuItemRoot } from "./MenuItemRoot.js";
+import { MenuItemTrailing } from "./MenuItemTrailing.js";
+export type { MenuItemLeadingProps } from "./MenuItemLeading.js";
+export type { MenuItemProps } from "./MenuItemRoot.js";
+export type { MenuItemTrailingProps } from "./MenuItemTrailing.js";
+export declare const MenuItem: typeof MenuItemRoot & {
+    Leading: typeof MenuItemLeading;
+    Trailing: typeof MenuItemTrailing;
+};

package/dist/components/MenuItem/MenuItem.js

@@ -0,0 +1,12 @@
+import { MenuItemLeading as e } from "./MenuItemLeading.js";
+import { MenuItemRoot as t } from "./MenuItemRoot.js";
+import { MenuItemTrailing as n } from "./MenuItemTrailing.js";
+//#region src/components/MenuItem/MenuItem.tsx
+var r = Object.assign(t, {
+	Leading: e,
+	Trailing: n
+});
+//#endregion
+export { r as MenuItem };
+
+//# sourceMappingURL=MenuItem.js.map

package/dist/components/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","names":[],"sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import { MenuItemLeading } from \"./MenuItemLeading.js\";\nimport { MenuItemRoot } from \"./MenuItemRoot.js\";\nimport { MenuItemTrailing } from \"./MenuItemTrailing.js\";\n\nexport type { MenuItemLeadingProps } from \"./MenuItemLeading.js\";\nexport type { MenuItemProps } from \"./MenuItemRoot.js\";\nexport type { MenuItemTrailingProps } from \"./MenuItemTrailing.js\";\n\nexport const MenuItem = Object.assign(MenuItemRoot, {\n\tLeading: MenuItemLeading,\n\tTrailing: MenuItemTrailing,\n});\n"],"mappings":";;;;AAQA,IAAa,IAAW,OAAO,OAAO,GAAc;CACnD,SAAS;CACT,UAAU;CACV,CAAC"}

package/dist/components/MenuItem/MenuItemLeading.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export interface MenuItemLeadingProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /**
+     * Slot content — an `<Icon>`, or a checkbox/radio/switch-styled selection
+     * indicator. Keep it decorative; the row itself carries selection state.
+     */
+    children?: ReactNode;
+}
+/** Leading (row-start) slot: a fixed 24px box that centres an icon or indicator. */
+export declare function MenuItemLeading({ className, children, ref, ...rest }: MenuItemLeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MenuItem/MenuItemLeading.js

@@ -0,0 +1,17 @@
+import { cx as e } from "../../utils/cx.js";
+import { menuItemLeading as t } from "./MenuItem.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/MenuItem/MenuItemLeading.tsx
+function r({ className: r, children: i, ref: a, ...o }) {
+	return /* @__PURE__ */ n("span", {
+		ref: a,
+		...o,
+		"data-slot": "leading",
+		className: e(t, r),
+		children: i
+	});
+}
+//#endregion
+export { r as MenuItemLeading };
+
+//# sourceMappingURL=MenuItemLeading.js.map

package/dist/components/MenuItem/MenuItemLeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemLeading.js","names":[],"sources":["../../../src/components/MenuItem/MenuItemLeading.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { menuItemLeading } from \"./MenuItem.css.js\";\n\nexport interface MenuItemLeadingProps extends HTMLAttributes<HTMLSpanElement> {\n\tref?: Ref<HTMLSpanElement>;\n\t/**\n\t * Slot content — an `<Icon>`, or a checkbox/radio/switch-styled selection\n\t * indicator. Keep it decorative; the row itself carries selection state.\n\t */\n\tchildren?: ReactNode;\n}\n\n/** Leading (row-start) slot: a fixed 24px box that centres an icon or indicator. */\nexport function MenuItemLeading({\n\tclassName,\n\tchildren,\n\tref,\n\t...rest\n}: MenuItemLeadingProps) {\n\treturn (\n\t\t<span\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t\tdata-slot=\"leading\"\n\t\t\tclassName={cx(menuItemLeading, className)}\n\t\t>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;AAcA,SAAgB,EAAgB,EAC/B,cACA,aACA,QACA,GAAG,KACqB;AACxB,QACC,kBAAC,QAAD;EACM;EACL,GAAI;EACJ,aAAU;EACV,WAAW,EAAG,GAAiB,EAAU;EAExC;EACK,CAAA"}

package/dist/components/MenuItem/MenuItemRoot.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, Ref } from "react";
+import type { MenuItemProps as AriaMenuItemProps } from "react-aria-components";
+export interface MenuItemProps extends Omit<AriaMenuItemProps, "className" | "style"> {
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A selectable row within a `Menu` — `role="menuitem"`, or
+ * `menuitemcheckbox`/`menuitemradio` when the `Menu` sets `selectionMode`.
+ * Hover/focus/pressed/selected/disabled states come from the data-attributes
+ * React Aria sets, so this takes no state props; pass `isDisabled` to disable
+ * and `onAction` to handle activation. Compose row content with the
+ * `MenuItem.Leading` / `MenuItem.Trailing` slots around a text label, and supply
+ * `textValue` when the label isn't a plain string child. Children may be a
+ * render function to react to `isSelected` / `isFocused`.
+ */
+export declare function MenuItemRoot({ className, ...rest }: MenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MenuItem/MenuItemRoot.js

@@ -0,0 +1,15 @@
+import { cx as e } from "../../utils/cx.js";
+import { menuItem as t } from "./MenuItem.css.js";
+import { jsx as n } from "react/jsx-runtime";
+import { MenuItem as r } from "react-aria-components";
+//#region src/components/MenuItem/MenuItemRoot.tsx
+function i({ className: i, ...a }) {
+	return /* @__PURE__ */ n(r, {
+		...a,
+		className: e(t, i)
+	});
+}
+//#endregion
+export { i as MenuItemRoot };
+
+//# sourceMappingURL=MenuItemRoot.js.map

package/dist/components/MenuItem/MenuItemRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemRoot.js","names":[],"sources":["../../../src/components/MenuItem/MenuItemRoot.tsx"],"sourcesContent":["import type { CSSProperties, Ref } from \"react\";\nimport type { MenuItemProps as AriaMenuItemProps } from \"react-aria-components\";\nimport { MenuItem as AriaMenuItem } from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { menuItem } from \"./MenuItem.css.js\";\n\nexport interface MenuItemProps\n\textends Omit<AriaMenuItemProps, \"className\" | \"style\"> {\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable row within a `Menu` — `role=\"menuitem\"`, or\n * `menuitemcheckbox`/`menuitemradio` when the `Menu` sets `selectionMode`.\n * Hover/focus/pressed/selected/disabled states come from the data-attributes\n * React Aria sets, so this takes no state props; pass `isDisabled` to disable\n * and `onAction` to handle activation. Compose row content with the\n * `MenuItem.Leading` / `MenuItem.Trailing` slots around a text label, and supply\n * `textValue` when the label isn't a plain string child. Children may be a\n * render function to react to `isSelected` / `isFocused`.\n */\nexport function MenuItemRoot({ className, ...rest }: MenuItemProps) {\n\treturn <AriaMenuItem {...rest} className={cx(menuItem, className)} />;\n}\n"],"mappings":";;;;;AAuBA,SAAgB,EAAa,EAAE,cAAW,GAAG,KAAuB;AACnE,QAAO,kBAAC,GAAD;EAAc,GAAI;EAAM,WAAW,EAAG,GAAU,EAAU;EAAI,CAAA"}

package/dist/components/MenuItem/MenuItemTrailing.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export interface MenuItemTrailingProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /**
+     * Slot content — an `<Icon>`, or a checkbox/radio/switch-styled selection
+     * indicator. Keep it decorative; the row itself carries selection state.
+     */
+    children?: ReactNode;
+}
+/**
+ * Trailing (row-end) slot: a fixed 24px box pinned to the far end of the row, so
+ * the label takes the remaining space. Centres an icon or indicator.
+ */
+export declare function MenuItemTrailing({ className, children, ref, ...rest }: MenuItemTrailingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MenuItem/MenuItemTrailing.js

@@ -0,0 +1,17 @@
+import { cx as e } from "../../utils/cx.js";
+import { menuItemTrailing as t } from "./MenuItem.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/MenuItem/MenuItemTrailing.tsx
+function r({ className: r, children: i, ref: a, ...o }) {
+	return /* @__PURE__ */ n("span", {
+		ref: a,
+		...o,
+		"data-slot": "trailing",
+		className: e(t, r),
+		children: i
+	});
+}
+//#endregion
+export { r as MenuItemTrailing };
+
+//# sourceMappingURL=MenuItemTrailing.js.map

package/dist/components/MenuItem/MenuItemTrailing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemTrailing.js","names":[],"sources":["../../../src/components/MenuItem/MenuItemTrailing.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { menuItemTrailing } from \"./MenuItem.css.js\";\n\nexport interface MenuItemTrailingProps extends HTMLAttributes<HTMLSpanElement> {\n\tref?: Ref<HTMLSpanElement>;\n\t/**\n\t * Slot content — an `<Icon>`, or a checkbox/radio/switch-styled selection\n\t * indicator. Keep it decorative; the row itself carries selection state.\n\t */\n\tchildren?: ReactNode;\n}\n\n/**\n * Trailing (row-end) slot: a fixed 24px box pinned to the far end of the row, so\n * the label takes the remaining space. Centres an icon or indicator.\n */\nexport function MenuItemTrailing({\n\tclassName,\n\tchildren,\n\tref,\n\t...rest\n}: MenuItemTrailingProps) {\n\treturn (\n\t\t<span\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t\tdata-slot=\"trailing\"\n\t\t\tclassName={cx(menuItemTrailing, className)}\n\t\t>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;AAiBA,SAAgB,EAAiB,EAChC,cACA,aACA,QACA,GAAG,KACsB;AACzB,QACC,kBAAC,QAAD;EACM;EACL,GAAI;EACJ,aAAU;EACV,WAAW,EAAG,GAAkB,EAAU;EAEzC;EACK,CAAA"}

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

@@ -0,0 +1,4 @@
+export type { MenuProps } from "./Menu.js";
+export { Menu } from "./Menu.js";
+export type { MenuItemLeadingProps, MenuItemProps, MenuItemTrailingProps, } from "./MenuItem.js";
+export { MenuItem } from "./MenuItem.js";

package/dist/components/Overlay/overlay.css.d.ts

@@ -0,0 +1,2 @@
+export declare const SURFACE_SHADOW = "0 12px 24px 4px rgba(0, 0, 0, 0.12)";
+export declare const overlayScrimBase: string;

package/dist/components/PictureMessage/PictureMessage.css.d.ts

@@ -0,0 +1,27 @@
+export declare const pictureRoot: import("@vanilla-extract/recipes").RuntimeFn<{
+    aspectRatio: {
+        "16:9": {
+            aspectRatio: "16 / 9";
+        };
+        "4:3": {
+            aspectRatio: "4 / 3";
+        };
+        "1:1": {
+            aspectRatio: "1 / 1";
+        };
+        "3:4": {
+            aspectRatio: "3 / 4";
+        };
+        "9:16": {
+            aspectRatio: "9 / 16";
+        };
+    };
+    unavailable: {
+        true: {
+            backgroundColor: "var(--lovelace-color-neutral-0)" | "var(--lovelace-color-neutral-50)" | "var(--lovelace-color-neutral-100)" | "var(--lovelace-color-neutral-200)" | "var(--lovelace-color-neutral-300)" | "var(--lovelace-color-neutral-400)" | "var(--lovelace-color-neutral-500)" | "var(--lovelace-color-neutral-600)" | "var(--lovelace-color-neutral-700)" | "var(--lovelace-color-neutral-800)" | "var(--lovelace-color-neutral-900)" | "var(--lovelace-color-red-50)" | "var(--lovelace-color-orange-50)" | "var(--lovelace-color-green-50)" | "var(--lovelace-color-green-100)" | "var(--lovelace-color-green-200)" | "var(--lovelace-color-green-300)" | "var(--lovelace-color-green-400)" | "var(--lovelace-color-green-500)" | "var(--lovelace-color-green-600)" | "var(--lovelace-color-green-700)" | "var(--lovelace-color-green-800)" | "var(--lovelace-color-green-900)" | "var(--lovelace-color-orange-100)" | "var(--lovelace-color-orange-200)" | "var(--lovelace-color-orange-300)" | "var(--lovelace-color-orange-400)" | "var(--lovelace-color-orange-500)" | "var(--lovelace-color-orange-600)" | "var(--lovelace-color-orange-700)" | "var(--lovelace-color-orange-800)" | "var(--lovelace-color-orange-900)" | "var(--lovelace-color-red-100)" | "var(--lovelace-color-red-200)" | "var(--lovelace-color-red-300)" | "var(--lovelace-color-red-400)" | "var(--lovelace-color-red-500)" | "var(--lovelace-color-red-600)" | "var(--lovelace-color-red-700)" | "var(--lovelace-color-red-800)" | "var(--lovelace-color-red-900)" | "var(--lovelace-spacing-4)" | "var(--lovelace-spacing-8)" | "var(--lovelace-spacing-12)" | "var(--lovelace-spacing-16)" | "var(--lovelace-spacing-20)" | "var(--lovelace-spacing-24)" | "var(--lovelace-spacing-32)" | "var(--lovelace-spacing-40)" | "var(--lovelace-spacing-48)" | "var(--lovelace-font-weight-400)" | "var(--lovelace-font-weight-500)" | "var(--lovelace-font-weight-600)" | "var(--lovelace-color-blue-50)" | "var(--lovelace-color-blue-100)" | "var(--lovelace-color-blue-200)" | "var(--lovelace-color-blue-300)" | "var(--lovelace-color-blue-400)" | "var(--lovelace-color-blue-500)" | "var(--lovelace-color-blue-600)" | "var(--lovelace-color-blue-700)" | "var(--lovelace-color-blue-800)" | "var(--lovelace-color-blue-900)" | "var(--lovelace-font-size-12)" | "var(--lovelace-font-size-14)" | "var(--lovelace-font-size-16)" | "var(--lovelace-font-size-18)" | "var(--lovelace-font-size-20)" | "var(--lovelace-font-size-22)" | "var(--lovelace-font-size-24)" | "var(--lovelace-font-size-26)" | "var(--lovelace-font-size-28)" | "var(--lovelace-font-line-height-16)" | "var(--lovelace-font-line-height-18)" | "var(--lovelace-font-line-height-22)" | "var(--lovelace-font-line-height-24)" | "var(--lovelace-font-line-height-26)" | "var(--lovelace-font-line-height-28)" | "var(--lovelace-font-line-height-30)" | "var(--lovelace-font-line-height-32)" | "var(--lovelace-font-line-height-34)" | "var(--lovelace-border-radius-0)" | "var(--lovelace-p-border-radius-6)" | "var(--lovelace-p-border-radius-10)" | "var(--lovelace-p-border-radius-14)" | "var(--lovelace-p-border-radius-20)" | "var(--lovelace-p-border-radius-24)" | "var(--lovelace-border-radius-999)" | "var(--lovelace-font-paragraph-spacing-4)" | "var(--lovelace-font-paragraph-spacing-6)" | "var(--lovelace-font-paragraph-spacing-8)" | "var(--lovelace-font-paragraph-spacing-10)" | "var(--lovelace-font-paragraph-spacing-12)" | "var(--lovelace-color-accent-50)" | "var(--lovelace-color-accent-100)" | "var(--lovelace-color-accent-200)" | "var(--lovelace-color-accent-300)" | "var(--lovelace-color-accent-400)" | "var(--lovelace-color-accent-500)" | "var(--lovelace-color-accent-600)" | "var(--lovelace-color-accent-700)" | "var(--lovelace-color-accent-800)" | "var(--lovelace-color-accent-900)" | "var(--lovelace-font-family-sans-serif)" | "var(--lovelace-font-family-mono)" | "var(--lovelace-border-width-1)" | "var(--lovelace-border-width-2)" | "var(--lovelace-dimension-16)" | "var(--lovelace-dimension-20)" | "var(--lovelace-dimension-22)" | "var(--lovelace-dimension-24)" | "var(--lovelace-dimension-32)" | "var(--lovelace-dimension-36)" | "var(--lovelace-color-content-default)" | "var(--lovelace-color-content-secondary)" | "var(--lovelace-color-content-secondary-inverse)" | "var(--lovelace-color-content-disabled)" | "var(--lovelace-color-content-inverse)" | "var(--lovelace-color-background-default)" | "var(--lovelace-color-background-secondary)" | "var(--lovelace-color-background-tertiary)" | "var(--lovelace-color-background-quaternary)" | "var(--lovelace-color-background-disabled)" | "var(--lovelace-color-background-inverse)" | "var(--lovelace-color-background-neutral-overlay)" | "var(--lovelace-color-border-default)" | "var(--lovelace-color-border-medium)" | "var(--lovelace-color-border-strong)" | "var(--lovelace-color-content-link)" | "var(--lovelace-color-background-destructive)" | "var(--lovelace-color-content-destructive)" | "var(--lovelace-color-background-destructive-light)" | "var(--lovelace-color-border-destructive)" | "var(--lovelace-color-content-on-destructive)" | "var(--lovelace-color-content-warning)" | "var(--lovelace-color-background-warning)" | "var(--lovelace-color-background-warning-light)" | "var(--lovelace-color-border-warning)" | "var(--lovelace-color-content-success)" | "var(--lovelace-color-background-success)" | "var(--lovelace-color-background-success-light)" | "var(--lovelace-color-border-success)" | "var(--lovelace-color-content-accent)" | "var(--lovelace-color-content-on-accent)" | "var(--lovelace-color-content-on-scrim)" | "var(--lovelace-color-background-accent)" | "var(--lovelace-color-background-highlight-overlay)" | "var(--lovelace-color-border-focus)" | "var(--lovelace-color-border-accent)" | "var(--lovelace-color-border-highlight)" | "var(--lovelace-font-weight-regular)" | "var(--lovelace-font-size-caption)" | "var(--lovelace-line-height-caption)" | "var(--lovelace-paragraph-spacing-caption)" | "var(--lovelace-paragraph-spacing-body)" | "var(--lovelace-paragraph-spacing-title)" | "var(--lovelace-line-height-body)" | "var(--lovelace-line-height-title-small)" | "var(--lovelace-line-height-title-large)" | "var(--lovelace-font-size-body)" | "var(--lovelace-font-size-title-small)" | "var(--lovelace-font-size-title-large)" | "var(--lovelace-font-weight-medium)" | "var(--lovelace-font-weight-semi-bold)" | "var(--lovelace-font-family-body)" | "var(--lovelace-font-family-heading)" | "var(--lovelace-font-family-code)" | "var(--lovelace-border-radius-none)" | "var(--lovelace-border-radius-6)" | "var(--lovelace-border-radius-10)" | "var(--lovelace-border-radius-14)" | "var(--lovelace-border-radius-20)" | "var(--lovelace-border-radius-24)" | "var(--lovelace-border-radius-full)" | "var(--lovelace-padding-4)" | "var(--lovelace-padding-8)" | "var(--lovelace-padding-12)" | "var(--lovelace-gap-4)" | "var(--lovelace-padding-16)" | "var(--lovelace-gap-8)" | "var(--lovelace-gap-12)" | "var(--lovelace-gap-16)" | "var(--lovelace-gap-20)" | "var(--lovelace-padding-20)" | "var(--lovelace-border-width-default)" | "var(--lovelace-border-width-focus)" | "var(--lovelace-opacity-state-hover)" | "var(--lovelace-opacity-state-focus)" | "var(--lovelace-opacity-state-pressed)" | "var(--lovelace-icon-size-sm)" | "var(--lovelace-icon-size-md)" | "var(--lovelace-icon-size-control)" | "var(--lovelace-icon-size-lg)" | "var(--lovelace-easing-standard)" | "var(--lovelace-easing-emphasized)" | "var(--lovelace-easing-decelerate)" | "var(--lovelace-easing-accelerate)" | "var(--lovelace-duration-fast)" | "var(--lovelace-duration-medium)" | "var(--lovelace-duration-slow)" | "var(--lovelace-message-user-background)" | "var(--lovelace-message-user-content)" | "var(--lovelace-button-primary-background)" | "var(--lovelace-button-primary-content)" | "var(--lovelace-header-background)" | "var(--lovelace-pill-content-primary)" | "var(--lovelace-header-content)" | "var(--lovelace-chip-background-selected)" | "var(--lovelace-chatfab-background)" | "var(--lovelace-chatfab-content)" | "var(--lovelace-composer-background)" | "var(--lovelace-composer-border-default)" | "var(--lovelace-composer-content-default)" | "var(--lovelace-composer-content-secondary)" | "var(--lovelace-composer-border-focus)" | "var(--lovelace-composer-border-active)" | "var(--lovelace-avatar-background)" | "var(--lovelace-avatar-content)" | "var(--lovelace-scrollmarker-background)" | "var(--lovelace-scrollmarker-content)" | "var(--lovelace-send-button-background)" | "var(--lovelace-chat-background)" | "var(--lovelace-border-radius-button)" | "var(--lovelace-border-radius-message)" | "var(--lovelace-border-radius-input)" | "var(--lovelace-border-radius-composer)" | "var(--lovelace-border-radius-avatar)" | "var(--lovelace-border-radius-pill)" | "var(--lovelace-border-radius-media-preview)" | "var(--lovelace-border-radius-container)";
+            color: "var(--lovelace-color-neutral-0)" | "var(--lovelace-color-neutral-50)" | "var(--lovelace-color-neutral-100)" | "var(--lovelace-color-neutral-200)" | "var(--lovelace-color-neutral-300)" | "var(--lovelace-color-neutral-400)" | "var(--lovelace-color-neutral-500)" | "var(--lovelace-color-neutral-600)" | "var(--lovelace-color-neutral-700)" | "var(--lovelace-color-neutral-800)" | "var(--lovelace-color-neutral-900)" | "var(--lovelace-color-red-50)" | "var(--lovelace-color-orange-50)" | "var(--lovelace-color-green-50)" | "var(--lovelace-color-green-100)" | "var(--lovelace-color-green-200)" | "var(--lovelace-color-green-300)" | "var(--lovelace-color-green-400)" | "var(--lovelace-color-green-500)" | "var(--lovelace-color-green-600)" | "var(--lovelace-color-green-700)" | "var(--lovelace-color-green-800)" | "var(--lovelace-color-green-900)" | "var(--lovelace-color-orange-100)" | "var(--lovelace-color-orange-200)" | "var(--lovelace-color-orange-300)" | "var(--lovelace-color-orange-400)" | "var(--lovelace-color-orange-500)" | "var(--lovelace-color-orange-600)" | "var(--lovelace-color-orange-700)" | "var(--lovelace-color-orange-800)" | "var(--lovelace-color-orange-900)" | "var(--lovelace-color-red-100)" | "var(--lovelace-color-red-200)" | "var(--lovelace-color-red-300)" | "var(--lovelace-color-red-400)" | "var(--lovelace-color-red-500)" | "var(--lovelace-color-red-600)" | "var(--lovelace-color-red-700)" | "var(--lovelace-color-red-800)" | "var(--lovelace-color-red-900)" | "var(--lovelace-spacing-4)" | "var(--lovelace-spacing-8)" | "var(--lovelace-spacing-12)" | "var(--lovelace-spacing-16)" | "var(--lovelace-spacing-20)" | "var(--lovelace-spacing-24)" | "var(--lovelace-spacing-32)" | "var(--lovelace-spacing-40)" | "var(--lovelace-spacing-48)" | "var(--lovelace-font-weight-400)" | "var(--lovelace-font-weight-500)" | "var(--lovelace-font-weight-600)" | "var(--lovelace-color-blue-50)" | "var(--lovelace-color-blue-100)" | "var(--lovelace-color-blue-200)" | "var(--lovelace-color-blue-300)" | "var(--lovelace-color-blue-400)" | "var(--lovelace-color-blue-500)" | "var(--lovelace-color-blue-600)" | "var(--lovelace-color-blue-700)" | "var(--lovelace-color-blue-800)" | "var(--lovelace-color-blue-900)" | "var(--lovelace-font-size-12)" | "var(--lovelace-font-size-14)" | "var(--lovelace-font-size-16)" | "var(--lovelace-font-size-18)" | "var(--lovelace-font-size-20)" | "var(--lovelace-font-size-22)" | "var(--lovelace-font-size-24)" | "var(--lovelace-font-size-26)" | "var(--lovelace-font-size-28)" | "var(--lovelace-font-line-height-16)" | "var(--lovelace-font-line-height-18)" | "var(--lovelace-font-line-height-22)" | "var(--lovelace-font-line-height-24)" | "var(--lovelace-font-line-height-26)" | "var(--lovelace-font-line-height-28)" | "var(--lovelace-font-line-height-30)" | "var(--lovelace-font-line-height-32)" | "var(--lovelace-font-line-height-34)" | "var(--lovelace-border-radius-0)" | "var(--lovelace-p-border-radius-6)" | "var(--lovelace-p-border-radius-10)" | "var(--lovelace-p-border-radius-14)" | "var(--lovelace-p-border-radius-20)" | "var(--lovelace-p-border-radius-24)" | "var(--lovelace-border-radius-999)" | "var(--lovelace-font-paragraph-spacing-4)" | "var(--lovelace-font-paragraph-spacing-6)" | "var(--lovelace-font-paragraph-spacing-8)" | "var(--lovelace-font-paragraph-spacing-10)" | "var(--lovelace-font-paragraph-spacing-12)" | "var(--lovelace-color-accent-50)" | "var(--lovelace-color-accent-100)" | "var(--lovelace-color-accent-200)" | "var(--lovelace-color-accent-300)" | "var(--lovelace-color-accent-400)" | "var(--lovelace-color-accent-500)" | "var(--lovelace-color-accent-600)" | "var(--lovelace-color-accent-700)" | "var(--lovelace-color-accent-800)" | "var(--lovelace-color-accent-900)" | "var(--lovelace-font-family-sans-serif)" | "var(--lovelace-font-family-mono)" | "var(--lovelace-border-width-1)" | "var(--lovelace-border-width-2)" | "var(--lovelace-dimension-16)" | "var(--lovelace-dimension-20)" | "var(--lovelace-dimension-22)" | "var(--lovelace-dimension-24)" | "var(--lovelace-dimension-32)" | "var(--lovelace-dimension-36)" | "var(--lovelace-color-content-default)" | "var(--lovelace-color-content-secondary)" | "var(--lovelace-color-content-secondary-inverse)" | "var(--lovelace-color-content-disabled)" | "var(--lovelace-color-content-inverse)" | "var(--lovelace-color-background-default)" | "var(--lovelace-color-background-secondary)" | "var(--lovelace-color-background-tertiary)" | "var(--lovelace-color-background-quaternary)" | "var(--lovelace-color-background-disabled)" | "var(--lovelace-color-background-inverse)" | "var(--lovelace-color-background-neutral-overlay)" | "var(--lovelace-color-border-default)" | "var(--lovelace-color-border-medium)" | "var(--lovelace-color-border-strong)" | "var(--lovelace-color-content-link)" | "var(--lovelace-color-background-destructive)" | "var(--lovelace-color-content-destructive)" | "var(--lovelace-color-background-destructive-light)" | "var(--lovelace-color-border-destructive)" | "var(--lovelace-color-content-on-destructive)" | "var(--lovelace-color-content-warning)" | "var(--lovelace-color-background-warning)" | "var(--lovelace-color-background-warning-light)" | "var(--lovelace-color-border-warning)" | "var(--lovelace-color-content-success)" | "var(--lovelace-color-background-success)" | "var(--lovelace-color-background-success-light)" | "var(--lovelace-color-border-success)" | "var(--lovelace-color-content-accent)" | "var(--lovelace-color-content-on-accent)" | "var(--lovelace-color-content-on-scrim)" | "var(--lovelace-color-background-accent)" | "var(--lovelace-color-background-highlight-overlay)" | "var(--lovelace-color-border-focus)" | "var(--lovelace-color-border-accent)" | "var(--lovelace-color-border-highlight)" | "var(--lovelace-font-weight-regular)" | "var(--lovelace-font-size-caption)" | "var(--lovelace-line-height-caption)" | "var(--lovelace-paragraph-spacing-caption)" | "var(--lovelace-paragraph-spacing-body)" | "var(--lovelace-paragraph-spacing-title)" | "var(--lovelace-line-height-body)" | "var(--lovelace-line-height-title-small)" | "var(--lovelace-line-height-title-large)" | "var(--lovelace-font-size-body)" | "var(--lovelace-font-size-title-small)" | "var(--lovelace-font-size-title-large)" | "var(--lovelace-font-weight-medium)" | "var(--lovelace-font-weight-semi-bold)" | "var(--lovelace-font-family-body)" | "var(--lovelace-font-family-heading)" | "var(--lovelace-font-family-code)" | "var(--lovelace-border-radius-none)" | "var(--lovelace-border-radius-6)" | "var(--lovelace-border-radius-10)" | "var(--lovelace-border-radius-14)" | "var(--lovelace-border-radius-20)" | "var(--lovelace-border-radius-24)" | "var(--lovelace-border-radius-full)" | "var(--lovelace-padding-4)" | "var(--lovelace-padding-8)" | "var(--lovelace-padding-12)" | "var(--lovelace-gap-4)" | "var(--lovelace-padding-16)" | "var(--lovelace-gap-8)" | "var(--lovelace-gap-12)" | "var(--lovelace-gap-16)" | "var(--lovelace-gap-20)" | "var(--lovelace-padding-20)" | "var(--lovelace-border-width-default)" | "var(--lovelace-border-width-focus)" | "var(--lovelace-opacity-state-hover)" | "var(--lovelace-opacity-state-focus)" | "var(--lovelace-opacity-state-pressed)" | "var(--lovelace-icon-size-sm)" | "var(--lovelace-icon-size-md)" | "var(--lovelace-icon-size-control)" | "var(--lovelace-icon-size-lg)" | "var(--lovelace-easing-standard)" | "var(--lovelace-easing-emphasized)" | "var(--lovelace-easing-decelerate)" | "var(--lovelace-easing-accelerate)" | "var(--lovelace-duration-fast)" | "var(--lovelace-duration-medium)" | "var(--lovelace-duration-slow)" | "var(--lovelace-message-user-background)" | "var(--lovelace-message-user-content)" | "var(--lovelace-button-primary-background)" | "var(--lovelace-button-primary-content)" | "var(--lovelace-header-background)" | "var(--lovelace-pill-content-primary)" | "var(--lovelace-header-content)" | "var(--lovelace-chip-background-selected)" | "var(--lovelace-chatfab-background)" | "var(--lovelace-chatfab-content)" | "var(--lovelace-composer-background)" | "var(--lovelace-composer-border-default)" | "var(--lovelace-composer-content-default)" | "var(--lovelace-composer-content-secondary)" | "var(--lovelace-composer-border-focus)" | "var(--lovelace-composer-border-active)" | "var(--lovelace-avatar-background)" | "var(--lovelace-avatar-content)" | "var(--lovelace-scrollmarker-background)" | "var(--lovelace-scrollmarker-content)" | "var(--lovelace-send-button-background)" | "var(--lovelace-chat-background)" | "var(--lovelace-border-radius-button)" | "var(--lovelace-border-radius-message)" | "var(--lovelace-border-radius-input)" | "var(--lovelace-border-radius-composer)" | "var(--lovelace-border-radius-avatar)" | "var(--lovelace-border-radius-pill)" | "var(--lovelace-border-radius-media-preview)" | "var(--lovelace-border-radius-container)";
+        };
+        false: {};
+    };
+}>;
+export declare const pictureImage: string;

package/dist/components/PictureMessage/PictureMessage.css.js

@@ -0,0 +1,25 @@
+import { createRuntimeFn as e } from "../../vendor/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+/* empty css                                  */
+//#region src/components/PictureMessage/PictureMessage.css.ts
+var t = e({
+	defaultClassName: "_14rcj9q1 _14rcj9q0",
+	variantClassNames: {
+		aspectRatio: {
+			"16:9": "_14rcj9q2",
+			"4:3": "_14rcj9q3",
+			"1:1": "_14rcj9q4",
+			"3:4": "_14rcj9q5",
+			"9:16": "_14rcj9q6"
+		},
+		unavailable: {
+			true: "_14rcj9q7",
+			false: "_14rcj9q8"
+		}
+	},
+	defaultVariants: { unavailable: !1 },
+	compoundVariants: []
+}), n = "_14rcj9q9";
+//#endregion
+export { n as pictureImage, t as pictureRoot };
+
+//# sourceMappingURL=PictureMessage.css.js.map

package/dist/components/PictureMessage/PictureMessage.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureMessage.css.js","names":[],"sources":["../../../src/components/PictureMessage/PictureMessage.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\nimport { recipe } from \"@vanilla-extract/recipes\";\nimport { t } from \"../../tokens/index.js\";\n\nconst pictureBase = style({});\n\nexport const pictureRoot = recipe({\n\tbase: [\n\t\tpictureBase,\n\t\t{\n\t\t\tposition: \"relative\",\n\t\t\tdisplay: \"flex\",\n\t\t\talignItems: \"center\",\n\t\t\tjustifyContent: \"center\",\n\t\t\tboxSizing: \"border-box\",\n\t\t\toverflow: \"hidden\",\n\t\t\tborderRadius: t(\"border-radius-media-preview\"),\n\t\t\tborder: `${t(\"border-width-default\")} solid ${t(\"color-border-default\")}`,\n\t\t},\n\t],\n\tvariants: {\n\t\taspectRatio: {\n\t\t\t\"16:9\": { aspectRatio: \"16 / 9\" },\n\t\t\t\"4:3\": { aspectRatio: \"4 / 3\" },\n\t\t\t\"1:1\": { aspectRatio: \"1 / 1\" },\n\t\t\t\"3:4\": { aspectRatio: \"3 / 4\" },\n\t\t\t\"9:16\": { aspectRatio: \"9 / 16\" },\n\t\t},\n\t\tunavailable: {\n\t\t\ttrue: {\n\t\t\t\tbackgroundColor: t(\"color-background-disabled\"),\n\t\t\t\tcolor: t(\"color-content-disabled\"),\n\t\t\t},\n\t\t\tfalse: {},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tunavailable: false,\n\t},\n});\n\nexport const pictureImage = style({\n\tdisplay: \"block\",\n\twidth: \"100%\",\n\theight: \"100%\",\n\tobjectFit: \"cover\",\n});\n\nglobalStyle(`${pictureBase} [data-slot='icon']`, {\n\tfontSize: t(\"icon-size-lg\"),\n});\n"],"mappings":""}

package/dist/components/PictureMessage/PictureMessage.d.ts

@@ -0,0 +1,37 @@
+import type { CSSProperties, Ref } from "react";
+import type { ImageLoadingStatus } from "../Image/index.js";
+export type PictureAspectRatio = "16:9" | "4:3" | "1:1" | "3:4" | "9:16";
+export interface PictureMessageProps {
+    /**
+     * Image URL. When absent — or when `unavailable` is set — the muted
+     * "image unavailable" placeholder renders instead of the picture.
+     */
+    src?: string;
+    /** Alt text describing the image. Never leave empty for content images. */
+    alt: string;
+    /**
+     * Frame proportions — bind to the source image's proportions so it isn't
+     * cropped. The frame is context-sized (fills its container's width); the
+     * consumer constrains it to the message column. When omitted, the frame
+     * takes its height from the image's natural proportions.
+     */
+    aspectRatio?: PictureAspectRatio;
+    /** Force the "image unavailable" placeholder (media-slash on a muted box). */
+    unavailable?: boolean;
+    /**
+     * Reports the underlying image's load state so a consumer can reserve space
+     * while loading or react to a load failure. The frame already swaps to the
+     * unavailable placeholder on error on its own.
+     */
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A rounded image attachment rendered inside a chat message. Clips the picture to
+ * the media-preview corner radius and holds it at a fixed aspect ratio; when the
+ * image is missing or unavailable — or when the image fails to load — it shows a
+ * muted media-slash placeholder.
+ */
+export declare function PictureMessage({ src, alt, aspectRatio, unavailable, onLoadingStatusChange, className, ...rest }: PictureMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/PictureMessage/PictureMessage.js

@@ -0,0 +1,34 @@
+import { cx as e } from "../../utils/cx.js";
+import { MediaSlash as t } from "../Icon/icons/MediaSlash.js";
+import { Image as n } from "../Image/Image.js";
+import { pictureImage as r, pictureRoot as i } from "./PictureMessage.css.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useState as o } from "react";
+//#region src/components/PictureMessage/PictureMessage.tsx
+var s = "Image unavailable";
+function c({ src: c, alt: l, aspectRatio: u, unavailable: d = !1, onLoadingStatusChange: f, className: p, ...m }) {
+	let [h, g] = o("loading"), _ = d || !c, v = _ || h === "error", y = typeof l == "string" ? l.trim() : "", b = y ? `${s}: ${y}` : s;
+	return /* @__PURE__ */ a("div", {
+		...m,
+		"data-aspect-ratio": u,
+		"data-unavailable": v || void 0,
+		"data-status": _ ? void 0 : h,
+		className: e(i({
+			aspectRatio: u,
+			unavailable: v
+		}), p),
+		children: _ ? /* @__PURE__ */ a(t, { label: b }) : /* @__PURE__ */ a(n, {
+			className: r,
+			src: c,
+			alt: l,
+			fallback: /* @__PURE__ */ a(t, { label: b }),
+			onLoadingStatusChange: (e) => {
+				g(e), f?.(e);
+			}
+		})
+	});
+}
+//#endregion
+export { c as PictureMessage };
+
+//# sourceMappingURL=PictureMessage.js.map

package/dist/components/PictureMessage/PictureMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureMessage.js","names":[],"sources":["../../../src/components/PictureMessage/PictureMessage.tsx"],"sourcesContent":["import type { CSSProperties, Ref } from \"react\";\nimport { useState } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { MediaSlash } from \"../Icon/icons/MediaSlash.js\";\nimport type { ImageLoadingStatus } from \"../Image/index.js\";\nimport { Image } from \"../Image/index.js\";\nimport { pictureImage, pictureRoot } from \"./PictureMessage.css.js\";\n\nexport type PictureAspectRatio = \"16:9\" | \"4:3\" | \"1:1\" | \"3:4\" | \"9:16\";\n\nexport interface PictureMessageProps {\n\t/**\n\t * Image URL. When absent — or when `unavailable` is set — the muted\n\t * \"image unavailable\" placeholder renders instead of the picture.\n\t */\n\tsrc?: string;\n\t/** Alt text describing the image. Never leave empty for content images. */\n\talt: string;\n\t/**\n\t * Frame proportions — bind to the source image's proportions so it isn't\n\t * cropped. The frame is context-sized (fills its container's width); the\n\t * consumer constrains it to the message column. When omitted, the frame\n\t * takes its height from the image's natural proportions.\n\t */\n\taspectRatio?: PictureAspectRatio;\n\t/** Force the \"image unavailable\" placeholder (media-slash on a muted box). */\n\tunavailable?: boolean;\n\t/**\n\t * Reports the underlying image's load state so a consumer can reserve space\n\t * while loading or react to a load failure. The frame already swaps to the\n\t * unavailable placeholder on error on its own.\n\t */\n\tonLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n}\n\nconst UNAVAILABLE_LABEL = \"Image unavailable\";\n\n/**\n * A rounded image attachment rendered inside a chat message. Clips the picture to\n * the media-preview corner radius and holds it at a fixed aspect ratio; when the\n * image is missing or unavailable — or when the image fails to load — it shows a\n * muted media-slash placeholder.\n */\nexport function PictureMessage({\n\tsrc,\n\talt,\n\taspectRatio,\n\tunavailable = false,\n\tonLoadingStatusChange,\n\tclassName,\n\t...rest\n}: PictureMessageProps) {\n\tconst [status, setStatus] = useState<ImageLoadingStatus>(\"loading\");\n\tconst forced = unavailable || !src;\n\tconst showPlaceholder = forced || status === \"error\";\n\t// Lovelace can be consumed from older/untyped JavaScript even though the TS\n\t// contract requires a string, so the failure path must remain total.\n\tconst description = typeof alt === \"string\" ? alt.trim() : \"\";\n\tconst unavailableLabel = description\n\t\t? `${UNAVAILABLE_LABEL}: ${description}`\n\t\t: UNAVAILABLE_LABEL;\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tdata-aspect-ratio={aspectRatio}\n\t\t\tdata-unavailable={showPlaceholder || undefined}\n\t\t\tdata-status={forced ? undefined : status}\n\t\t\tclassName={cx(\n\t\t\t\tpictureRoot({ aspectRatio, unavailable: showPlaceholder }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{forced ? (\n\t\t\t\t<MediaSlash label={unavailableLabel} />\n\t\t\t) : (\n\t\t\t\t<Image\n\t\t\t\t\tclassName={pictureImage}\n\t\t\t\t\tsrc={src}\n\t\t\t\t\talt={alt}\n\t\t\t\t\tfallback={<MediaSlash label={unavailableLabel} />}\n\t\t\t\t\tonLoadingStatusChange={(next) => {\n\t\t\t\t\t\tsetStatus(next);\n\t\t\t\t\t\tonLoadingStatusChange?.(next);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAsCA,IAAM,IAAoB;AAQ1B,SAAgB,EAAe,EAC9B,QACA,QACA,gBACA,iBAAc,IACd,0BACA,cACA,GAAG,KACoB;CACvB,IAAM,CAAC,GAAQ,KAAa,EAA6B,UAAU,EAC7D,IAAS,KAAe,CAAC,GACzB,IAAkB,KAAU,MAAW,SAGvC,IAAc,OAAO,KAAQ,WAAW,EAAI,MAAM,GAAG,IACrD,IAAmB,IACtB,GAAG,EAAkB,IAAI,MACzB;AACH,QACC,kBAAC,OAAD;EACC,GAAI;EACJ,qBAAmB;EACnB,oBAAkB,KAAmB,KAAA;EACrC,eAAa,IAAS,KAAA,IAAY;EAClC,WAAW,EACV,EAAY;GAAE;GAAa,aAAa;GAAiB,CAAC,EAC1D,EACA;YAEA,IACA,kBAAC,GAAD,EAAY,OAAO,GAAoB,CAAA,GAEvC,kBAAC,GAAD;GACC,WAAW;GACN;GACA;GACL,UAAU,kBAAC,GAAD,EAAY,OAAO,GAAoB,CAAA;GACjD,wBAAwB,MAAS;AAEhC,IADA,EAAU,EAAK,EACf,IAAwB,EAAK;;GAE7B,CAAA;EAEE,CAAA"}

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

@@ -0,0 +1 @@
+export { type PictureAspectRatio, PictureMessage, type PictureMessageProps, } from "./PictureMessage.js";

package/dist/components/PillButton/PillButton.css.d.ts

@@ -0,0 +1,10 @@
+export declare const pillButtonRoot: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        md: {
+            height: "40px";
+        };
+        sm: {
+            height: "32px";
+        };
+    };
+}>;

package/dist/components/PillButton/PillButton.css.js

@@ -0,0 +1,16 @@
+import { createRuntimeFn as e } from "../../vendor/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+/* empty css                              */
+//#region src/components/PillButton/PillButton.css.ts
+var t = e({
+	defaultClassName: "rygqx10",
+	variantClassNames: { size: {
+		md: "rygqx11",
+		sm: "rygqx12"
+	} },
+	defaultVariants: { size: "md" },
+	compoundVariants: []
+});
+//#endregion
+export { t as pillButtonRoot };
+
+//# sourceMappingURL=PillButton.css.js.map

package/dist/components/PillButton/PillButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillButton.css.js","names":[],"sources":["../../../src/components/PillButton/PillButton.css.ts"],"sourcesContent":["import { globalStyle } from \"@vanilla-extract/css\";\nimport { recipe } from \"@vanilla-extract/recipes\";\nimport { t } from \"../../tokens/index.js\";\n\nexport const pillButtonRoot = recipe({\n\tbase: {\n\t\tposition: \"relative\",\n\t\tisolation: \"isolate\",\n\t\tdisplay: \"inline-flex\",\n\t\talignItems: \"center\",\n\t\tjustifyContent: \"center\",\n\t\tgap: t(\"gap-8\"),\n\t\tpaddingInline: t(\"padding-12\"),\n\t\tboxSizing: \"border-box\",\n\t\tborder: `${t(\"border-width-default\")} solid ${t(\"color-border-default\")}`,\n\t\tborderRadius: t(\"border-radius-pill\"),\n\t\tbackgroundColor: t(\"color-background-default\"),\n\t\tcolor: t(\"pill-content-primary\"),\n\t\tfontFamily: t(\"font-family-body\"),\n\t\tfontWeight: t(\"font-weight-medium\"),\n\t\tfontSize: t(\"font-size-body\"),\n\t\tlineHeight: t(\"line-height-body\"),\n\t\twhiteSpace: \"nowrap\",\n\t\tcursor: \"pointer\",\n\t\tuserSelect: \"none\",\n\t\tappearance: \"none\",\n\t\ttextDecoration: \"none\",\n\t\toutline: \"none\",\n\t\ttransitionProperty: \"background-color, border-color\",\n\t\ttransitionDuration: t(\"duration-fast\"),\n\t\ttransitionTimingFunction: t(\"easing-standard\"),\n\t\t\"::after\": {\n\t\t\tcontent: '\"\"',\n\t\t\tposition: \"absolute\",\n\t\t\tinset: 0,\n\t\t\tborderRadius: \"inherit\",\n\t\t\tbackgroundColor: \"currentColor\",\n\t\t\topacity: 0,\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: -1,\n\t\t\ttransition: `opacity ${t(\"duration-fast\")} ${t(\"easing-standard\")}`,\n\t\t},\n\t\tselectors: {\n\t\t\t\"&[data-hovered]:not([data-disabled])::after\": {\n\t\t\t\topacity: t(\"opacity-state-hover\"),\n\t\t\t},\n\t\t\t\"&[data-focus-visible]:not([data-disabled])::after\": {\n\t\t\t\topacity: t(\"opacity-state-focus\"),\n\t\t\t},\n\t\t\t\"&[data-pressed]:not([data-disabled])::after\": {\n\t\t\t\topacity: t(\"opacity-state-pressed\"),\n\t\t\t},\n\t\t\t\"&[data-focus-visible]:not([data-disabled])\": {\n\t\t\t\tborderColor: t(\"color-border-accent\"),\n\t\t\t\tboxShadow: `0 0 0 ${t(\"border-width-focus\")} ${t(\"color-border-focus\")}`,\n\t\t\t},\n\t\t\t\"&[data-disabled]\": {\n\t\t\t\tcursor: \"not-allowed\",\n\t\t\t\tcolor: t(\"color-content-disabled\"),\n\t\t\t},\n\t\t},\n\t\t\"@media\": {\n\t\t\t\"(forced-colors: active)\": {\n\t\t\t\tselectors: {\n\t\t\t\t\t\"&[data-focus-visible]:not([data-disabled])\": {\n\t\t\t\t\t\toutline: \"2px solid Highlight\",\n\t\t\t\t\t\toutlineOffset: \"2px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n\tvariants: {\n\t\t// Hardcoded heights are correct.\n\t\tsize: {\n\t\t\tmd: { height: \"40px\" },\n\t\t\tsm: { height: \"32px\" },\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\n// Icon children render at the control icon size (not the body text size), so an\n// icon-only pill reads as an icon button rather than a tiny glyph. <Icon> is 1em,\n// so this drives its size; flex-shrink keeps it from collapsing next to text.\nglobalStyle(`[data-slot='pill-button'] [data-slot='icon']`, {\n\tflexShrink: 0,\n\tfontSize: t(\"icon-size-control\"),\n});\n"],"mappings":""}

package/dist/components/PillButton/PillButton.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+import type { ButtonProps as AriaButtonProps } from "react-aria-components";
+export type PillButtonSize = "md" | "sm";
+export interface PillButtonProps extends Omit<AriaButtonProps, "children" | "className" | "style"> {
+    size?: PillButtonSize;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLButtonElement>;
+    children?: ReactNode;
+}
+/**
+ * Fully-rounded action button with a single accent-on-surface style. Unlike
+ * `Button`, it has no intent/destructive variants. Accepts text and/or an
+ * `<Icon>` child; an icon-only pill needs an `aria-label`.
+ */
+export declare function PillButton({ size, className, children, ...rest }: PillButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/PillButton/PillButton.js

@@ -0,0 +1,18 @@
+import { cx as e } from "../../utils/cx.js";
+import { pillButtonRoot as t } from "./PillButton.css.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Button as r } from "react-aria-components";
+//#region src/components/PillButton/PillButton.tsx
+function i({ size: i = "md", className: a, children: o, ...s }) {
+	return /* @__PURE__ */ n(r, {
+		...s,
+		"data-slot": "pill-button",
+		"data-size": i,
+		className: e(t({ size: i }), a),
+		children: o
+	});
+}
+//#endregion
+export { i as PillButton };
+
+//# sourceMappingURL=PillButton.js.map

package/dist/components/PillButton/PillButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillButton.js","names":[],"sources":["../../../src/components/PillButton/PillButton.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport type { ButtonProps as AriaButtonProps } from \"react-aria-components\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { pillButtonRoot } from \"./PillButton.css.js\";\n\nexport type PillButtonSize = \"md\" | \"sm\";\n\nexport interface PillButtonProps\n\textends Omit<AriaButtonProps, \"children\" | \"className\" | \"style\"> {\n\tsize?: PillButtonSize;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLButtonElement>;\n\tchildren?: ReactNode;\n}\n\n/**\n * Fully-rounded action button with a single accent-on-surface style. Unlike\n * `Button`, it has no intent/destructive variants. Accepts text and/or an\n * `<Icon>` child; an icon-only pill needs an `aria-label`.\n */\nexport function PillButton({\n\tsize = \"md\",\n\tclassName,\n\tchildren,\n\t...rest\n}: PillButtonProps) {\n\treturn (\n\t\t<AriaButton\n\t\t\t{...rest}\n\t\t\tdata-slot=\"pill-button\"\n\t\t\tdata-size={size}\n\t\t\tclassName={cx(pillButtonRoot({ size }), className)}\n\t\t>\n\t\t\t{children}\n\t\t</AriaButton>\n\t);\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAAW,EAC1B,UAAO,MACP,cACA,aACA,GAAG,KACgB;AACnB,QACC,kBAAC,GAAD;EACC,GAAI;EACJ,aAAU;EACV,aAAW;EACX,WAAW,EAAG,EAAe,EAAE,SAAM,CAAC,EAAE,EAAU;EAEjD;EACW,CAAA"}

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

@@ -0,0 +1,2 @@
+export type { PillButtonProps, PillButtonSize } from "./PillButton.js";
+export { PillButton } from "./PillButton.js";

package/dist/components/ProactiveMessage/ProactiveMessage.css.d.ts

@@ -0,0 +1 @@
+export declare const proactiveMessageRoot: string;

package/dist/components/ProactiveMessage/ProactiveMessage.css.js

@@ -0,0 +1,7 @@
+/* empty css                                    */
+//#region src/components/ProactiveMessage/ProactiveMessage.css.ts
+var e = "y22qey0";
+//#endregion
+export { e as proactiveMessageRoot };
+
+//# sourceMappingURL=ProactiveMessage.css.js.map

package/dist/components/ProactiveMessage/ProactiveMessage.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProactiveMessage.css.js","names":[],"sources":["../../../src/components/ProactiveMessage/ProactiveMessage.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\n\n// Elevation shadow — no `elevation-*` token tier yet (contract rule 2). Dark\n// mode keeps the same geometry and opacity but a white tint, since a black\n// shadow is invisible on the dark canvas.\nconst SHADOW_LIGHT = \"0 8px 24px rgba(0, 0, 0, 0.08)\";\nconst SHADOW_DARK = \"0 8px 24px rgba(255, 255, 255, 0.08)\";\n\n// Content-hugging, non-interactive message bubble — no variant/size axes, so a\n// plain `style()` rather than a `recipe()`.\nexport const proactiveMessageRoot = style({\n\tboxSizing: \"border-box\",\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\talignItems: \"flex-start\",\n\t// Center content against the 48px minimum so short messages keep the pill\n\t// height (matches the Figma bubble's `justify-center`).\n\tjustifyContent: \"center\",\n\t// Hug the content; the surrounding layout constrains the max width to the\n\t// chat column, keeping this bubble in lockstep with the agent/user message\n\t// bubbles rather than baking a column-width literal into this one component.\n\twidth: \"fit-content\",\n\t// Figma pins the bubble to a 48px floor; no control-size token tier exists\n\t// yet (cf. AgentMessage's 24px literal).\n\tminHeight: \"48px\",\n\tpaddingBlock: t(\"padding-8\"),\n\tpaddingInline: t(\"padding-16\"),\n\tborderRadius: t(\"border-radius-message\"),\n\tbackgroundColor: t(\"color-background-default\"),\n\tborder: `${t(\"border-width-default\")} solid ${t(\"color-border-default\")}`,\n\tboxShadow: SHADOW_LIGHT,\n\tcolor: t(\"color-content-default\"),\n\tfontFamily: t(\"font-family-body\"),\n\tfontWeight: t(\"font-weight-regular\"),\n\tfontSize: t(\"font-size-body\"),\n\tlineHeight: t(\"line-height-body\"),\n\t// `start` follows the content's resolved direction (see `dir=\"auto\"` on the\n\t// element), keeping mixed-direction messages aligned to their own edge.\n\ttextAlign: \"start\",\n\t// `anywhere` (not `break-word`) so a single long unbroken token — e.g. a raw\n\t// URL in body text — breaks mid-string instead of overflowing the column.\n\toverflowWrap: \"anywhere\",\n\tselectors: {\n\t\t'[data-theme=\"dark\"] &': { boxShadow: SHADOW_DARK },\n\t},\n});\n"],"mappings":""}

package/dist/components/ProactiveMessage/ProactiveMessage.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+export interface ProactiveMessageProps {
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+    /** Message content — body text, or an inline link/element. */
+    children?: ReactNode;
+}
+/**
+ * A proactive (campaign) message bubble: a rounded, elevated surface holding a
+ * short outbound message. The content is whatever you pass as `children` — body
+ * text (the Figma "Message" variant) or an inline link (the "Link" variant).
+ * Direction is detected from the content so the bubble mirrors under RTL.
+ *
+ * Picture and grouped campaigns are compositions, not props: render
+ * `PictureMessage` for a picture, and stack these bubbles beside a dismiss
+ * `IconButton` for a group.
+ */
+export declare function ProactiveMessage({ className, children, ...rest }: ProactiveMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ProactiveMessage/ProactiveMessage.js

@@ -0,0 +1,16 @@
+import { cx as e } from "../../utils/cx.js";
+import { proactiveMessageRoot as t } from "./ProactiveMessage.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ProactiveMessage/ProactiveMessage.tsx
+function r({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ n("div", {
+		...a,
+		dir: "auto",
+		className: e(t, r),
+		children: i
+	});
+}
+//#endregion
+export { r as ProactiveMessage };
+
+//# sourceMappingURL=ProactiveMessage.js.map

package/dist/components/ProactiveMessage/ProactiveMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProactiveMessage.js","names":[],"sources":["../../../src/components/ProactiveMessage/ProactiveMessage.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { proactiveMessageRoot } from \"./ProactiveMessage.css.js\";\n\nexport interface ProactiveMessageProps {\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n\t/** Message content — body text, or an inline link/element. */\n\tchildren?: ReactNode;\n}\n\n/**\n * A proactive (campaign) message bubble: a rounded, elevated surface holding a\n * short outbound message. The content is whatever you pass as `children` — body\n * text (the Figma \"Message\" variant) or an inline link (the \"Link\" variant).\n * Direction is detected from the content so the bubble mirrors under RTL.\n *\n * Picture and grouped campaigns are compositions, not props: render\n * `PictureMessage` for a picture, and stack these bubbles beside a dismiss\n * `IconButton` for a group.\n */\nexport function ProactiveMessage({\n\tclassName,\n\tchildren,\n\t...rest\n}: ProactiveMessageProps) {\n\treturn (\n\t\t<div {...rest} dir=\"auto\" className={cx(proactiveMessageRoot, className)}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAsBA,SAAgB,EAAiB,EAChC,cACA,aACA,GAAG,KACsB;AACzB,QACC,kBAAC,OAAD;EAAK,GAAI;EAAM,KAAI;EAAO,WAAW,EAAG,GAAsB,EAAU;EACtE;EACI,CAAA"}

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

@@ -0,0 +1,2 @@
+export type { ProactiveMessageProps } from "./ProactiveMessage.js";
+export { ProactiveMessage } from "./ProactiveMessage.js";

package/dist/components/Radio/Radio.css.d.ts

@@ -0,0 +1,5 @@
+export declare const radioGroup: string;
+export declare const radioRoot: string;
+export declare const radioControl: string;
+export declare const radioIndicator: string;
+export declare const radioLabel: string;

package/dist/components/Radio/Radio.css.js

@@ -0,0 +1,7 @@
+/* empty css                         */
+//#region src/components/Radio/Radio.css.ts
+var e = "mufew30", t = "mufew31", n = "mufew32", r = "mufew33", i = "mufew34";
+//#endregion
+export { n as radioControl, e as radioGroup, r as radioIndicator, i as radioLabel, t as radioRoot };
+
+//# sourceMappingURL=Radio.css.js.map

package/dist/components/Radio/Radio.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.css.js","names":[],"sources":["../../../src/components/Radio/Radio.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\n\n// Figma's `button-size/xs` (24px) has no LovelaceToken; the checked indicator's\n// inset is likewise fixed visual detail Figma renders as a flattened raster with\n// no token (5px inset inside the 1px border → 12px center dot). Both are\n// hardcoded like a fixed frame size.\nconst CONTROL_SIZE = \"24px\";\nconst INDICATOR_INSET = \"5px\";\n\nexport const radioGroup = style({\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tgap: t(\"gap-20\"),\n\tselectors: {\n\t\t'&[data-orientation=\"horizontal\"]': {\n\t\t\tflexDirection: \"row\",\n\t\t},\n\t},\n});\n\nexport const radioRoot = style({\n\tdisplay: \"inline-flex\",\n\talignItems: \"center\",\n\tgap: t(\"gap-12\"),\n\tcursor: \"pointer\",\n\tuserSelect: \"none\",\n\tselectors: {\n\t\t\"&[data-disabled]\": {\n\t\t\tcursor: \"not-allowed\",\n\t\t},\n\t},\n});\n\nexport const radioControl = style({\n\tposition: \"relative\",\n\tboxSizing: \"border-box\",\n\tflexShrink: 0,\n\twidth: CONTROL_SIZE,\n\theight: CONTROL_SIZE,\n\tborderRadius: t(\"border-radius-full\"),\n\tborderStyle: \"solid\",\n\tborderWidth: t(\"border-width-default\"),\n\ttransition:\n\t\t\"background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease\",\n\tselectors: {\n\t\t// Unchecked — default resting state.\n\t\t[`${radioRoot}:not([data-selected]) &`]: {\n\t\t\tbackgroundColor: t(\"color-background-default\"),\n\t\t\tborderColor: t(\"color-border-default\"),\n\t\t},\n\t\t// Unchecked — hover darkens the border only (no fill).\n\t\t[`${radioRoot}[data-hovered]:not([data-selected]):not([data-disabled]) &`]:\n\t\t\t{\n\t\t\t\tborderColor: t(\"color-border-medium\"),\n\t\t\t},\n\t\t// Checked — solid inverse disc; the white ring is drawn by radioIndicator.\n\t\t[`${radioRoot}[data-selected] &`]: {\n\t\t\tbackgroundColor: t(\"color-background-inverse\"),\n\t\t\tborderColor: t(\"color-background-inverse\"),\n\t\t},\n\t\t// Focus — outer 2px focus ring for both states (matches Chip's double ring).\n\t\t[`${radioRoot}[data-focus-visible]:not([data-disabled]) &`]: {\n\t\t\tboxShadow: `0 0 0 ${t(\"border-width-focus\")} ${t(\"color-border-focus\")}`,\n\t\t},\n\t\t// Focus (unchecked) — inner accent border completes the double ring.\n\t\t[`${radioRoot}[data-focus-visible]:not([data-selected]):not([data-disabled]) &`]:\n\t\t\t{\n\t\t\t\tborderColor: t(\"color-border-accent\"),\n\t\t\t},\n\t\t// Disabled — unchecked.\n\t\t[`${radioRoot}[data-disabled]:not([data-selected]) &`]: {\n\t\t\tbackgroundColor: t(\"color-background-tertiary\"),\n\t\t\tborderColor: t(\"color-border-default\"),\n\t\t},\n\t\t// Disabled — checked disc fades to the disabled background.\n\t\t[`${radioRoot}[data-disabled][data-selected] &`]: {\n\t\t\tbackgroundColor: t(\"color-background-disabled\"),\n\t\t\tborderColor: t(\"color-background-disabled\"),\n\t\t},\n\t},\n\t\"@media\": {\n\t\t\"(forced-colors: active)\": {\n\t\t\tselectors: {\n\t\t\t\t[`${radioRoot}[data-focus-visible]:not([data-disabled]) &`]: {\n\t\t\t\t\toutline: \"2px solid Highlight\",\n\t\t\t\t\toutlineOffset: \"2px\",\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n});\n\n// Solid center dot on the checked disc (dark disc → filled light center circle).\n// Hidden (transparent) until the option is selected.\nexport const radioIndicator = style({\n\tposition: \"absolute\",\n\tinset: INDICATOR_INSET,\n\tborderRadius: t(\"border-radius-full\"),\n\tbackgroundColor: \"transparent\",\n\tpointerEvents: \"none\",\n\tselectors: {\n\t\t[`${radioRoot}[data-selected] &`]: {\n\t\t\tbackgroundColor: t(\"color-background-default\"),\n\t\t},\n\t\t[`${radioRoot}[data-selected][data-disabled] &`]: {\n\t\t\tbackgroundColor: t(\"color-background-tertiary\"),\n\t\t},\n\t},\n\t\"@media\": {\n\t\t// Author background-colors collapse to Canvas in forced-colors mode, so the\n\t\t// disc/dot contrast is lost — redraw the dot with a system color instead.\n\t\t\"(forced-colors: active)\": {\n\t\t\tselectors: {\n\t\t\t\t[`${radioRoot}[data-selected] &`]: {\n\t\t\t\t\tbackgroundColor: \"CanvasText\",\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n});\n\nexport const radioLabel = style({\n\tfontFamily: t(\"font-family-body\"),\n\tfontSize: t(\"font-size-body\"),\n\tfontWeight: t(\"font-weight-regular\"),\n\tlineHeight: t(\"line-height-body\"),\n\tcolor: t(\"color-content-default\"),\n\tselectors: {\n\t\t[`${radioRoot}[data-disabled] &`]: {\n\t\t\tcolor: t(\"color-content-disabled\"),\n\t\t},\n\t},\n});\n"],"mappings":""}

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+import type { RadioProps as AriaRadioProps } from "react-aria-components";
+export interface RadioProps extends Omit<AriaRadioProps, "className" | "style" | "children"> {
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLLabelElement>;
+    /** Label shown beside the control. Omit only when the option is labelled externally. */
+    children?: ReactNode;
+}
+/**
+ * A single option within a `RadioGroup`. The visual circle is drawn here; the
+ * checked/hover/focus/disabled states are driven by the data-attributes React
+ * Aria sets on the label, so this component takes no state props of its own.
+ */
+export declare function Radio({ className, children, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,23 @@
+import { cx as e } from "../../utils/cx.js";
+import { radioControl as t, radioIndicator as n, radioRoot as r } from "./Radio.css.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Radio as o } from "react-aria-components";
+//#region src/components/Radio/Radio.tsx
+function s({ className: s, children: c, ...l }) {
+	return /* @__PURE__ */ a(o, {
+		...l,
+		className: e(r, s),
+		children: [/* @__PURE__ */ i("span", {
+			className: t,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ i("span", { className: n })
+		}), c != null && /* @__PURE__ */ i("span", {
+			className: "mufew34",
+			children: c
+		})]
+	});
+}
+//#endregion
+export { s as Radio };
+
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport type { RadioProps as AriaRadioProps } from \"react-aria-components\";\nimport { Radio as AriaRadio } from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport {\n\tradioControl,\n\tradioIndicator,\n\tradioLabel,\n\tradioRoot,\n} from \"./Radio.css.js\";\n\nexport interface RadioProps\n\textends Omit<AriaRadioProps, \"className\" | \"style\" | \"children\"> {\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLLabelElement>;\n\t/** Label shown beside the control. Omit only when the option is labelled externally. */\n\tchildren?: ReactNode;\n}\n\n/**\n * A single option within a `RadioGroup`. The visual circle is drawn here; the\n * checked/hover/focus/disabled states are driven by the data-attributes React\n * Aria sets on the label, so this component takes no state props of its own.\n */\nexport function Radio({ className, children, ...rest }: RadioProps) {\n\treturn (\n\t\t<AriaRadio {...rest} className={cx(radioRoot, className)}>\n\t\t\t<span className={radioControl} aria-hidden=\"true\">\n\t\t\t\t<span className={radioIndicator} />\n\t\t\t</span>\n\t\t\t{children != null && <span className={radioLabel}>{children}</span>}\n\t\t</AriaRadio>\n\t);\n}\n"],"mappings":";;;;;AAyBA,SAAgB,EAAM,EAAE,cAAW,aAAU,GAAG,KAAoB;AACnE,QACC,kBAAC,GAAD;EAAW,GAAI;EAAM,WAAW,EAAG,GAAW,EAAU;YAAxD,CACC,kBAAC,QAAD;GAAM,WAAW;GAAc,eAAY;aAC1C,kBAAC,QAAD,EAAM,WAAW,GAAkB,CAAA;GAC7B,CAAA,EACN,KAAY,QAAQ,kBAAC,QAAD;GAAM,WAAA;GAAwB;GAAgB,CAAA,CACxD"}

package/dist/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+import type { RadioGroupProps as AriaRadioGroupProps } from "react-aria-components";
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, "className" | "style" | "children"> {
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+    /** The `Radio` options for this group. */
+    children: ReactNode;
+}
+/**
+ * Single-select group: exactly one child `Radio` may be selected at a time.
+ * Owns the selected value (`value`/`onChange`), keyboard navigation, and the
+ * group's accessible name — supply `aria-label` or `aria-labelledby`.
+ */
+export declare function RadioGroup({ className, children, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;