@ttoss/fsl-ui 0.2.4

package/dist/components/Icon/Icon.mjs

@@ -0,0 +1,52 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { ensureIconGlyphs, iconifyName } from "./glyphs.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "@iconify-icon/react";
+
+//#region src/components/Icon/Icon.tsx
+/** Formal semantic identity — Icon (Structure entity, static glyph). */
+var iconMeta = {
+  displayName: "Icon",
+  entity: "Structure",
+  structure: "icon"
+};
+/**
+* Renders a semantic glyph via the Iconify provider (ADR-005).
+*
+* Icon is named by intent and inherits its color from context
+* (`currentColor`); only its size is a token. Glyphs are registered offline
+* on first render (`ensureIconGlyphs`), so no network request is made.
+*
+* @example
+* ```tsx
+* <Icon intent="disclosure.expand" />
+* <Icon intent="action.close" size="sm" label={closeLabel} />
+* ```
+*/
+var Icon$1 = ({
+  intent,
+  size = "md",
+  label
+}) => {
+  ensureIconGlyphs();
+  const decorative = label === void 0;
+  return /* @__PURE__ */jsx(Icon, {
+    "data-scope": "icon",
+    "data-part": "icon",
+    icon: iconifyName(intent),
+    noobserver: true,
+    "aria-hidden": decorative ? "true" : void 0,
+    "aria-label": label,
+    role: decorative ? void 0 : "img",
+    style: {
+      fontSize: vars.sizing.icon[size],
+      lineHeight: 1,
+      flexShrink: 0
+    }
+  });
+};
+Icon$1.displayName = iconMeta.displayName;
+
+//#endregion
+export { Icon$1 as Icon };

package/dist/components/Icon/glyphs.cjs

@@ -0,0 +1,72 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let _iconify_icon_react = require("@iconify-icon/react");
+let _iconify_icons_lucide_check_js = require("@iconify/icons-lucide/check.js");
+_iconify_icons_lucide_check_js = require_runtime.__toESM(_iconify_icons_lucide_check_js, 1);
+let _iconify_icons_lucide_chevron_down_js = require("@iconify/icons-lucide/chevron-down.js");
+_iconify_icons_lucide_chevron_down_js = require_runtime.__toESM(_iconify_icons_lucide_chevron_down_js, 1);
+let _iconify_icons_lucide_chevron_right_js = require("@iconify/icons-lucide/chevron-right.js");
+_iconify_icons_lucide_chevron_right_js = require_runtime.__toESM(_iconify_icons_lucide_chevron_right_js, 1);
+let _iconify_icons_lucide_minus_js = require("@iconify/icons-lucide/minus.js");
+_iconify_icons_lucide_minus_js = require_runtime.__toESM(_iconify_icons_lucide_minus_js, 1);
+let _iconify_icons_lucide_plus_js = require("@iconify/icons-lucide/plus.js");
+_iconify_icons_lucide_plus_js = require_runtime.__toESM(_iconify_icons_lucide_plus_js, 1);
+let _iconify_icons_lucide_search_js = require("@iconify/icons-lucide/search.js");
+_iconify_icons_lucide_search_js = require_runtime.__toESM(_iconify_icons_lucide_search_js, 1);
+let _iconify_icons_lucide_x_js = require("@iconify/icons-lucide/x.js");
+_iconify_icons_lucide_x_js = require_runtime.__toESM(_iconify_icons_lucide_x_js, 1);
+
+//#region src/components/Icon/glyphs.ts
+/**
+* Default glyph mapping — intent → Lucide (via Iconify).
+*
+* This is the "theme glyph mapping" from icon-system.md, housed internally
+* while `@ttoss/fsl-icon` is not yet its own package. Glyphs come from the
+* official provider (**Iconify**, ADR-005), sourced per-icon from
+* `@iconify/icons-lucide/*` so bundlers keep only the icons actually
+* referenced (tree-shakeable, mirroring `@ttoss/theme`'s `BruttalIcons`).
+* No SVG is hand-authored here; no icon is fetched from the Iconify API at
+* runtime — every glyph is registered offline via `addIcon`, so rendering is
+* SSR-safe and network-free.
+*
+* @see ./intents.ts — the intents these glyphs satisfy
+* @see ../../../CONTRIBUTING.md ADR-005
+*/
+/**
+* The default (Lucide) glyph for every intent. `satisfies Record<…>` makes a
+* missing intent a compile error — the completeness rule from icon-system.md.
+*/
+var INTENT_GLYPHS = {
+  "disclosure.expand": _iconify_icons_lucide_chevron_down_js.default,
+  "disclosure.collapse": _iconify_icons_lucide_chevron_right_js.default,
+  "selection.checked": _iconify_icons_lucide_check_js.default,
+  "selection.indeterminate": _iconify_icons_lucide_minus_js.default,
+  "action.close": _iconify_icons_lucide_x_js.default,
+  "action.search": _iconify_icons_lucide_search_js.default,
+  "action.increment": _iconify_icons_lucide_plus_js.default,
+  "action.decrement": _iconify_icons_lucide_minus_js.default
+};
+/**
+* The Iconify registry name for an intent — `fsl-ui:{family}-{intent}`. The
+* `fsl-ui` prefix namespaces our glyphs so `addIcon` never clobbers (or is
+* clobbered by) icons an application registers under bare names.
+*/
+var iconifyName = intent => {
+  return `fsl-ui:${intent.replace(".", "-")}`;
+};
+var registered = false;
+/**
+* Registers every intent's glyph with Iconify exactly once (idempotent).
+* Mirrors the `ensureKeyframes()` pattern: called from the component render
+* path rather than at module top-level, so `sideEffects: false` bundlers do
+* not drop the registration as dead code.
+*/
+var ensureIconGlyphs = () => {
+  if (registered) return;
+  for (const [intent, glyph] of Object.entries(INTENT_GLYPHS)) (0, _iconify_icon_react.addIcon)(iconifyName(intent), glyph);
+  registered = true;
+};
+
+//#endregion
+exports.ensureIconGlyphs = ensureIconGlyphs;
+exports.iconifyName = iconifyName;

package/dist/components/Icon/glyphs.mjs

@@ -0,0 +1,63 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { addIcon } from "@iconify-icon/react";
+import checkGlyph from "@iconify/icons-lucide/check.js";
+import chevronDownGlyph from "@iconify/icons-lucide/chevron-down.js";
+import chevronRightGlyph from "@iconify/icons-lucide/chevron-right.js";
+import minusGlyph from "@iconify/icons-lucide/minus.js";
+import plusGlyph from "@iconify/icons-lucide/plus.js";
+import searchGlyph from "@iconify/icons-lucide/search.js";
+import xGlyph from "@iconify/icons-lucide/x.js";
+
+//#region src/components/Icon/glyphs.ts
+/**
+* Default glyph mapping — intent → Lucide (via Iconify).
+*
+* This is the "theme glyph mapping" from icon-system.md, housed internally
+* while `@ttoss/fsl-icon` is not yet its own package. Glyphs come from the
+* official provider (**Iconify**, ADR-005), sourced per-icon from
+* `@iconify/icons-lucide/*` so bundlers keep only the icons actually
+* referenced (tree-shakeable, mirroring `@ttoss/theme`'s `BruttalIcons`).
+* No SVG is hand-authored here; no icon is fetched from the Iconify API at
+* runtime — every glyph is registered offline via `addIcon`, so rendering is
+* SSR-safe and network-free.
+*
+* @see ./intents.ts — the intents these glyphs satisfy
+* @see ../../../CONTRIBUTING.md ADR-005
+*/
+/**
+* The default (Lucide) glyph for every intent. `satisfies Record<…>` makes a
+* missing intent a compile error — the completeness rule from icon-system.md.
+*/
+var INTENT_GLYPHS = {
+  "disclosure.expand": chevronDownGlyph,
+  "disclosure.collapse": chevronRightGlyph,
+  "selection.checked": checkGlyph,
+  "selection.indeterminate": minusGlyph,
+  "action.close": xGlyph,
+  "action.search": searchGlyph,
+  "action.increment": plusGlyph,
+  "action.decrement": minusGlyph
+};
+/**
+* The Iconify registry name for an intent — `fsl-ui:{family}-{intent}`. The
+* `fsl-ui` prefix namespaces our glyphs so `addIcon` never clobbers (or is
+* clobbered by) icons an application registers under bare names.
+*/
+var iconifyName = intent => {
+  return `fsl-ui:${intent.replace(".", "-")}`;
+};
+var registered = false;
+/**
+* Registers every intent's glyph with Iconify exactly once (idempotent).
+* Mirrors the `ensureKeyframes()` pattern: called from the component render
+* path rather than at module top-level, so `sideEffects: false` bundlers do
+* not drop the registration as dead code.
+*/
+var ensureIconGlyphs = () => {
+  if (registered) return;
+  for (const [intent, glyph] of Object.entries(INTENT_GLYPHS)) addIcon(iconifyName(intent), glyph);
+  registered = true;
+};
+
+//#endregion
+export { ensureIconGlyphs, iconifyName };

package/dist/components/Link/Link.cjs

@@ -0,0 +1,62 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Link/Link.tsx
+/**
+* Formal semantic identity — what this component *is* (Layer 1).
+*/
+var linkMeta = {
+  displayName: "Link",
+  entity: "Navigation",
+  structure: "root"
+};
+/**
+* A link component for navigation, styled with navigation tokens.
+*/
+var Link = ({
+  evaluation = "primary",
+  ...props
+}) => {
+  const colors = _ttoss_fsl_theme_vars.vars.colors.navigation[evaluation];
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Link, {
+    ...props,
+    "data-scope": "link",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: isDisabled ? "none" : "underline",
+        textDecorationThickness: isHovered ? "2px" : "1px",
+        borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+        transitionProperty: "color, text-decoration-thickness",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        color: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }),
+        outline: require_focusRing.focusRingOutline(isFocusVisible)
+      };
+    }
+  });
+};
+Link.displayName = linkMeta.displayName;
+
+//#endregion
+exports.Link = Link;
+exports.linkMeta = linkMeta;

package/dist/components/Link/Link.d.cts

@@ -0,0 +1,38 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import { LinkProps } from "react-aria-components";
+
+//#region src/components/Link/Link.d.ts
+/**
+ * Formal semantic identity — what this component *is* (Layer 1).
+ */
+declare const linkMeta: {
+  readonly displayName: "Link";
+  readonly entity: "Navigation";
+  readonly structure: "root";
+};
+/**
+ * A navigation link built on React Aria with semantic tokens from CONTRACT.md.
+ *
+ * Entity = Navigation → colors: `navigation`, radii: `control`,
+ * typography: `label.md`, motion: `feedback`.
+ */
+interface LinkProps$1 extends LinkProps {
+  /**
+   * Semantic emphasis.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof linkMeta)['entity']>;
+}
+/**
+ * A link component for navigation, styled with navigation tokens.
+ */
+declare const Link: {
+  ({
+    evaluation,
+    ...props
+  }: LinkProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Link";
+};
+//#endregion
+export { Link, LinkProps$1 as LinkProps, linkMeta };

package/dist/components/Link/Link.d.mts

@@ -0,0 +1,38 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { LinkProps } from "react-aria-components";
+
+//#region src/components/Link/Link.d.ts
+/**
+ * Formal semantic identity — what this component *is* (Layer 1).
+ */
+declare const linkMeta: {
+  readonly displayName: "Link";
+  readonly entity: "Navigation";
+  readonly structure: "root";
+};
+/**
+ * A navigation link built on React Aria with semantic tokens from CONTRACT.md.
+ *
+ * Entity = Navigation → colors: `navigation`, radii: `control`,
+ * typography: `label.md`, motion: `feedback`.
+ */
+interface LinkProps$1 extends LinkProps {
+  /**
+   * Semantic emphasis.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof linkMeta)['entity']>;
+}
+/**
+ * A link component for navigation, styled with navigation tokens.
+ */
+declare const Link$1: {
+  ({
+    evaluation,
+    ...props
+  }: LinkProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Link";
+};
+//#endregion
+export { Link$1 as Link, LinkProps$1 as LinkProps, linkMeta };

package/dist/components/Link/Link.mjs

@@ -0,0 +1,61 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Link } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Link/Link.tsx
+/**
+* Formal semantic identity — what this component *is* (Layer 1).
+*/
+var linkMeta = {
+  displayName: "Link",
+  entity: "Navigation",
+  structure: "root"
+};
+/**
+* A link component for navigation, styled with navigation tokens.
+*/
+var Link$1 = ({
+  evaluation = "primary",
+  ...props
+}) => {
+  const colors = vars.colors.navigation[evaluation];
+  return /* @__PURE__ */jsx(Link, {
+    ...props,
+    "data-scope": "link",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: isDisabled ? "none" : "underline",
+        textDecorationThickness: isHovered ? "2px" : "1px",
+        borderRadius: vars.radii.control,
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        transitionProperty: "color, text-decoration-thickness",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        ...vars.text.label.md,
+        color: resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }),
+        outline: focusRingOutline(isFocusVisible)
+      };
+    }
+  });
+};
+Link$1.displayName = linkMeta.displayName;
+
+//#endregion
+export { Link$1 as Link, linkMeta };

package/dist/components/ListBox/ListBox.cjs

@@ -0,0 +1,126 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ListBox/ListBox.tsx
+/** Formal semantic identity — ListBox root (Collection entity, surface). */
+var listBoxMeta = {
+  displayName: "ListBox",
+  entity: "Collection",
+  structure: "root"
+};
+/** Formal semantic identity — ListBoxItem (Selection entity, one of a set). */
+var listBoxItemMeta = {
+  displayName: "ListBoxItem",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/**
+* A standalone semantic list box built on React Aria's `ListBox` — a
+* selectable list of options.
+*
+* Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+* surface) and each `ListBoxItem` is Entity = Selection (`input` chrome). Set
+* `selectionMode="single|multiple"`. Use `ListBoxItem` for each option.
+*
+* @example
+* ```tsx
+* <ListBox aria-label="Frameworks" selectionMode="multiple">
+*   <ListBoxItem id="react">React</ListBoxItem>
+*   <ListBoxItem id="vue">Vue</ListBoxItem>
+* </ListBox>
+* ```
+*/
+var ListBox = ({
+  children,
+  ...props
+}) => {
+  const surface = _ttoss_fsl_theme_vars.vars.colors.informational.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.ListBox, {
+    ...props,
+    "data-scope": "list-box",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs,
+      padding: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.sm,
+      borderRadius: _ttoss_fsl_theme_vars.vars.radii.surface,
+      borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+      borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+      borderColor: surface?.border?.default ?? "transparent",
+      backgroundColor: surface?.background?.default
+    },
+    children
+  });
+};
+ListBox.displayName = listBoxMeta.displayName;
+/**
+* A single option inside a `ListBox`. Entity = Selection → reads
+* `vars.colors.input.primary.*` and surfaces the `selected` State (set
+* membership) — the same chrome as `SelectItem`.
+*
+* @example
+* ```tsx
+* <ListBoxItem id="react">React</ListBoxItem>
+* ```
+*/
+var ListBoxItem = ({
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.ListBoxItem, {
+    ...props,
+    "data-scope": "list-box",
+    "data-part": "item",
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, {
+          isDisabled,
+          isSelected,
+          isHovered,
+          isPressed
+        }),
+        color: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.text, {
+          isDisabled,
+          isSelected,
+          isHovered
+        }) ?? c?.text?.default,
+        outline: require_focusRing.focusRingOutline(isFocusVisible),
+        outlineOffset: "2px",
+        transitionProperty: "background-color, color",
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing
+      };
+    },
+    children
+  });
+};
+ListBoxItem.displayName = listBoxItemMeta.displayName;
+
+//#endregion
+exports.ListBox = ListBox;
+exports.ListBoxItem = ListBoxItem;
+exports.listBoxItemMeta = listBoxItemMeta;
+exports.listBoxMeta = listBoxMeta;

package/dist/components/ListBox/ListBox.d.cts

@@ -0,0 +1,63 @@
+
+import { ListBoxItemProps, ListBoxProps } from "react-aria-components";
+
+//#region src/components/ListBox/ListBox.d.ts
+/** Formal semantic identity — ListBox root (Collection entity, surface). */
+declare const listBoxMeta: {
+  readonly displayName: "ListBox";
+  readonly entity: "Collection";
+  readonly structure: "root";
+};
+/** Formal semantic identity — ListBoxItem (Selection entity, one of a set). */
+declare const listBoxItemMeta: {
+  readonly displayName: "ListBoxItem";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/** Props for the ListBox component. */
+type ListBoxProps$1<T extends object = object> = Omit<ListBoxProps<T>, 'style' | 'className'>;
+/**
+ * A standalone semantic list box built on React Aria's `ListBox` — a
+ * selectable list of options.
+ *
+ * Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+ * surface) and each `ListBoxItem` is Entity = Selection (`input` chrome). Set
+ * `selectionMode="single|multiple"`. Use `ListBoxItem` for each option.
+ *
+ * @example
+ * ```tsx
+ * <ListBox aria-label="Frameworks" selectionMode="multiple">
+ *   <ListBoxItem id="react">React</ListBoxItem>
+ *   <ListBoxItem id="vue">Vue</ListBoxItem>
+ * </ListBox>
+ * ```
+ */
+declare const ListBox: {
+  <T extends object = object>({
+    children,
+    ...props
+  }: ListBoxProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "ListBox";
+};
+/** Props for the ListBoxItem component. */
+type ListBoxItemProps$1 = Omit<ListBoxItemProps, 'style' | 'className'>;
+/**
+ * A single option inside a `ListBox`. Entity = Selection → reads
+ * `vars.colors.input.primary.*` and surfaces the `selected` State (set
+ * membership) — the same chrome as `SelectItem`.
+ *
+ * @example
+ * ```tsx
+ * <ListBoxItem id="react">React</ListBoxItem>
+ * ```
+ */
+declare const ListBoxItem: {
+  ({
+    children,
+    ...props
+  }: ListBoxItemProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ListBoxItem";
+};
+//#endregion
+export { ListBox, ListBoxItem, ListBoxItemProps$1 as ListBoxItemProps, ListBoxProps$1 as ListBoxProps, listBoxItemMeta, listBoxMeta };

package/dist/components/ListBox/ListBox.d.mts

@@ -0,0 +1,63 @@
+
+import { ListBoxItemProps, ListBoxProps } from "react-aria-components";
+
+//#region src/components/ListBox/ListBox.d.ts
+/** Formal semantic identity — ListBox root (Collection entity, surface). */
+declare const listBoxMeta: {
+  readonly displayName: "ListBox";
+  readonly entity: "Collection";
+  readonly structure: "root";
+};
+/** Formal semantic identity — ListBoxItem (Selection entity, one of a set). */
+declare const listBoxItemMeta: {
+  readonly displayName: "ListBoxItem";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/** Props for the ListBox component. */
+type ListBoxProps$1<T extends object = object> = Omit<ListBoxProps<T>, 'style' | 'className'>;
+/**
+ * A standalone semantic list box built on React Aria's `ListBox` — a
+ * selectable list of options.
+ *
+ * Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+ * surface) and each `ListBoxItem` is Entity = Selection (`input` chrome). Set
+ * `selectionMode="single|multiple"`. Use `ListBoxItem` for each option.
+ *
+ * @example
+ * ```tsx
+ * <ListBox aria-label="Frameworks" selectionMode="multiple">
+ *   <ListBoxItem id="react">React</ListBoxItem>
+ *   <ListBoxItem id="vue">Vue</ListBoxItem>
+ * </ListBox>
+ * ```
+ */
+declare const ListBox$1: {
+  <T extends object = object>({
+    children,
+    ...props
+  }: ListBoxProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "ListBox";
+};
+/** Props for the ListBoxItem component. */
+type ListBoxItemProps$1 = Omit<ListBoxItemProps, 'style' | 'className'>;
+/**
+ * A single option inside a `ListBox`. Entity = Selection → reads
+ * `vars.colors.input.primary.*` and surfaces the `selected` State (set
+ * membership) — the same chrome as `SelectItem`.
+ *
+ * @example
+ * ```tsx
+ * <ListBoxItem id="react">React</ListBoxItem>
+ * ```
+ */
+declare const ListBoxItem$1: {
+  ({
+    children,
+    ...props
+  }: ListBoxItemProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ListBoxItem";
+};
+//#endregion
+export { ListBox$1 as ListBox, ListBoxItem$1 as ListBoxItem, ListBoxItemProps$1 as ListBoxItemProps, ListBoxProps$1 as ListBoxProps, listBoxItemMeta, listBoxMeta };