@ttoss/fsl-ui 0.2.4

package/dist/composites/Popover/Popover.cjs

@@ -0,0 +1,80 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_escapeHatch = require('../../tokens/escapeHatch.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/composites/Popover/Popover.tsx
+var POPOVER_MAX_WIDTH_DEFAULT = "min(320px, 90vw)";
+var POPOVER_OFFSET_DEFAULT = 8;
+/**
+* The trigger that owns a Popover's open state. Alias of React Aria's overlay
+* trigger (the same primitive `DialogTrigger` uses): wire a focusable trigger
+* and a `Popover` as its two children.
+*/
+var PopoverTrigger = props => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.DialogTrigger, {
+    ...props
+  });
+};
+PopoverTrigger.displayName = "PopoverTrigger";
+/** Formal semantic identity — Popover surface (Overlay entity). */
+var popoverMeta = {
+  displayName: "Popover",
+  entity: "Overlay",
+  structure: "root"
+};
+/**
+* A standalone anchored overlay surface (Overlay entity). Place inside a
+* `PopoverTrigger` alongside the focusable trigger. Geometry the host owns is
+* the `--fsl-popover-max-width` knob (CONTRACT §7); React Aria positioning
+* props (`placement`, `offset`, `crossOffset`, `shouldFlip`,
+* `containerPadding`) are forwarded as behavior.
+*
+* @example
+* ```tsx
+* <PopoverTrigger>
+*   <Button>Details</Button>
+*   <Popover>
+*     <p>Anchored content</p>
+*   </Popover>
+* </PopoverTrigger>
+* ```
+*/
+var Popover = ({
+  evaluation = "primary",
+  offset = POPOVER_OFFSET_DEFAULT,
+  children,
+  ...props
+}) => {
+  const colors = _ttoss_fsl_theme_vars.vars.colors.informational[evaluation];
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Popover, {
+    ...props,
+    offset,
+    "data-scope": "popover",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      maxWidth: require_escapeHatch.fslVar("--fsl-popover-max-width", POPOVER_MAX_WIDTH_DEFAULT),
+      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: colors?.border?.default,
+      backgroundColor: colors?.background?.default,
+      color: colors?.text?.default,
+      boxShadow: _ttoss_fsl_theme_vars.vars.elevation.surface.overlay,
+      padding: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.md,
+      outline: "none",
+      ..._ttoss_fsl_theme_vars.vars.text.body.md,
+      zIndex: _ttoss_fsl_theme_vars.vars.zIndex.layer.overlay
+    },
+    children
+  });
+};
+Popover.displayName = popoverMeta.displayName;
+
+//#endregion
+exports.Popover = Popover;
+exports.PopoverTrigger = PopoverTrigger;
+exports.popoverMeta = popoverMeta;

package/dist/composites/Popover/Popover.d.cts

@@ -0,0 +1,56 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import { DialogTriggerProps, PopoverProps } from "react-aria-components";
+
+//#region src/composites/Popover/Popover.d.ts
+/**
+ * The trigger that owns a Popover's open state. Alias of React Aria's overlay
+ * trigger (the same primitive `DialogTrigger` uses): wire a focusable trigger
+ * and a `Popover` as its two children.
+ */
+declare const PopoverTrigger: {
+  (props: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/** Formal semantic identity — Popover surface (Overlay entity). */
+declare const popoverMeta: {
+  readonly displayName: "Popover";
+  readonly entity: "Overlay";
+  readonly structure: "root";
+};
+/** Props for the Popover surface. */
+interface PopoverProps$1 extends Omit<PopoverProps, 'style'> {
+  /**
+   * Semantic emphasis for the overlay surface.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof popoverMeta)['entity']>;
+}
+/**
+ * A standalone anchored overlay surface (Overlay entity). Place inside a
+ * `PopoverTrigger` alongside the focusable trigger. Geometry the host owns is
+ * the `--fsl-popover-max-width` knob (CONTRACT §7); React Aria positioning
+ * props (`placement`, `offset`, `crossOffset`, `shouldFlip`,
+ * `containerPadding`) are forwarded as behavior.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>
+ *   <Button>Details</Button>
+ *   <Popover>
+ *     <p>Anchored content</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ */
+declare const Popover: {
+  ({
+    evaluation,
+    offset,
+    children,
+    ...props
+  }: PopoverProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Popover";
+};
+//#endregion
+export { Popover, PopoverProps$1 as PopoverProps, PopoverTrigger, popoverMeta };

package/dist/composites/Popover/Popover.d.mts

@@ -0,0 +1,56 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { DialogTriggerProps, PopoverProps } from "react-aria-components";
+
+//#region src/composites/Popover/Popover.d.ts
+/**
+ * The trigger that owns a Popover's open state. Alias of React Aria's overlay
+ * trigger (the same primitive `DialogTrigger` uses): wire a focusable trigger
+ * and a `Popover` as its two children.
+ */
+declare const PopoverTrigger: {
+  (props: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/** Formal semantic identity — Popover surface (Overlay entity). */
+declare const popoverMeta: {
+  readonly displayName: "Popover";
+  readonly entity: "Overlay";
+  readonly structure: "root";
+};
+/** Props for the Popover surface. */
+interface PopoverProps$1 extends Omit<PopoverProps, 'style'> {
+  /**
+   * Semantic emphasis for the overlay surface.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof popoverMeta)['entity']>;
+}
+/**
+ * A standalone anchored overlay surface (Overlay entity). Place inside a
+ * `PopoverTrigger` alongside the focusable trigger. Geometry the host owns is
+ * the `--fsl-popover-max-width` knob (CONTRACT §7); React Aria positioning
+ * props (`placement`, `offset`, `crossOffset`, `shouldFlip`,
+ * `containerPadding`) are forwarded as behavior.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>
+ *   <Button>Details</Button>
+ *   <Popover>
+ *     <p>Anchored content</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ */
+declare const Popover$1: {
+  ({
+    evaluation,
+    offset,
+    children,
+    ...props
+  }: PopoverProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Popover";
+};
+//#endregion
+export { Popover$1 as Popover, PopoverProps$1 as PopoverProps, PopoverTrigger, popoverMeta };

package/dist/composites/Popover/Popover.mjs

@@ -0,0 +1,78 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { fslVar } from "../../tokens/escapeHatch.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { DialogTrigger, Popover } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/composites/Popover/Popover.tsx
+var POPOVER_MAX_WIDTH_DEFAULT = "min(320px, 90vw)";
+var POPOVER_OFFSET_DEFAULT = 8;
+/**
+* The trigger that owns a Popover's open state. Alias of React Aria's overlay
+* trigger (the same primitive `DialogTrigger` uses): wire a focusable trigger
+* and a `Popover` as its two children.
+*/
+var PopoverTrigger = props => {
+  return /* @__PURE__ */jsx(DialogTrigger, {
+    ...props
+  });
+};
+PopoverTrigger.displayName = "PopoverTrigger";
+/** Formal semantic identity — Popover surface (Overlay entity). */
+var popoverMeta = {
+  displayName: "Popover",
+  entity: "Overlay",
+  structure: "root"
+};
+/**
+* A standalone anchored overlay surface (Overlay entity). Place inside a
+* `PopoverTrigger` alongside the focusable trigger. Geometry the host owns is
+* the `--fsl-popover-max-width` knob (CONTRACT §7); React Aria positioning
+* props (`placement`, `offset`, `crossOffset`, `shouldFlip`,
+* `containerPadding`) are forwarded as behavior.
+*
+* @example
+* ```tsx
+* <PopoverTrigger>
+*   <Button>Details</Button>
+*   <Popover>
+*     <p>Anchored content</p>
+*   </Popover>
+* </PopoverTrigger>
+* ```
+*/
+var Popover$1 = ({
+  evaluation = "primary",
+  offset = POPOVER_OFFSET_DEFAULT,
+  children,
+  ...props
+}) => {
+  const colors = vars.colors.informational[evaluation];
+  return /* @__PURE__ */jsx(Popover, {
+    ...props,
+    offset,
+    "data-scope": "popover",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      maxWidth: fslVar("--fsl-popover-max-width", POPOVER_MAX_WIDTH_DEFAULT),
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor: colors?.border?.default,
+      backgroundColor: colors?.background?.default,
+      color: colors?.text?.default,
+      boxShadow: vars.elevation.surface.overlay,
+      padding: vars.spacing.inset.surface.md,
+      outline: "none",
+      ...vars.text.body.md,
+      zIndex: vars.zIndex.layer.overlay
+    },
+    children
+  });
+};
+Popover$1.displayName = popoverMeta.displayName;
+
+//#endregion
+export { Popover$1 as Popover, PopoverTrigger, popoverMeta };

package/dist/composites/SearchField/SearchField.cjs

@@ -0,0 +1,194 @@
+/** 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');
+const require_Icon = require('../../components/Icon/Icon.cjs');
+const require_scope = require('../scope.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/composites/SearchField/SearchField.tsx
+var searchFieldScope = require_scope.createCompositeScope("SearchField");
+/** Formal semantic identity — SearchField root (Input entity). */
+var searchFieldMeta = {
+  displayName: "SearchField",
+  entity: "Input",
+  structure: "root"
+};
+/** Formal semantic identity — label slot. */
+var searchFieldLabelMeta = {
+  displayName: "SearchFieldLabel",
+  entity: "Input",
+  structure: "label",
+  composition: "label"
+};
+/** Formal semantic identity — control slot (search box). */
+var searchFieldControlMeta = {
+  displayName: "SearchFieldControl",
+  entity: "Input",
+  structure: "control",
+  composition: "control"
+};
+/**
+* A search input composite (Input entity). Renders a labelled search box with
+* a leading search glyph and a trailing clear button (shown once there is
+* text). Compose with `SearchFieldLabel` and `SearchFieldControl`.
+*
+* @example
+* ```tsx
+* <SearchField clearLabel="Clear search" onSubmit={run}>
+*   <SearchFieldLabel>Search</SearchFieldLabel>
+*   <SearchFieldControl placeholder="Search…" />
+* </SearchField>
+* ```
+*/
+var SearchField = ({
+  clearLabel,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.SearchField, {
+    ...props,
+    "data-scope": "search-field",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs
+    },
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(searchFieldScope.Provider, {
+      value: {
+        clearLabel
+      },
+      children
+    })
+  });
+};
+SearchField.displayName = searchFieldMeta.displayName;
+/** The label slot of a SearchField. */
+var SearchFieldLabel = props => {
+  searchFieldScope.use(searchFieldLabelMeta.displayName);
+  const colors = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Label, {
+    ...props,
+    "data-scope": "search-field",
+    "data-part": "label",
+    style: {
+      color: colors?.text?.default,
+      ..._ttoss_fsl_theme_vars.vars.text.label.md
+    }
+  });
+};
+SearchFieldLabel.displayName = searchFieldLabelMeta.displayName;
+var ADORNMENT_INSET = `calc(${_ttoss_fsl_theme_vars.vars.sizing.icon.md} + ${_ttoss_fsl_theme_vars.vars.spacing.inset.control.md} * 2)`;
+/**
+* The control slot — the search box. Renders the leading search glyph
+* (`leadingAdornment`), the `<input>`, and the trailing clear button
+* (`trailingAdornment`, labelled by the root's `clearLabel`). The clear
+* button is managed by React Aria (hidden while empty).
+*/
+var SearchFieldControl = props => {
+  const {
+    clearLabel
+  } = searchFieldScope.use(searchFieldControlMeta.displayName);
+  const colors = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)("div", {
+    "data-scope": "search-field",
+    "data-part": "control",
+    style: {
+      boxSizing: "border-box",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      inlineSize: "100%"
+    },
+    children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+      "data-scope": "search-field",
+      "data-part": "leadingAdornment",
+      "aria-hidden": true,
+      style: {
+        position: "absolute",
+        insetInlineStart: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        display: "inline-flex",
+        color: colors?.text?.default,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+        intent: "action.search",
+        size: "sm"
+      })
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Input, {
+      ...props,
+      "data-scope": "search-field",
+      "data-part": "control",
+      style: ({
+        isHovered,
+        isDisabled,
+        isFocusVisible,
+        isInvalid
+      }) => {
+        return {
+          boxSizing: "border-box",
+          inlineSize: "100%",
+          minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+          paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+          paddingInlineStart: ADORNMENT_INSET,
+          paddingInlineEnd: ADORNMENT_INSET,
+          borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+          borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+          borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+          transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+          transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+          transitionProperty: "background-color, border-color, color",
+          backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.background, {
+            isHovered,
+            isDisabled,
+            isInvalid
+          }),
+          borderColor: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.border, {
+            isDisabled,
+            isInvalid,
+            isFocusVisible
+          }),
+          color: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.text, {
+            isHovered,
+            isDisabled,
+            isInvalid
+          }) ?? colors?.text?.default,
+          outline: require_focusRing.focusRingOutline(isFocusVisible),
+          ..._ttoss_fsl_theme_vars.vars.text.label.md
+        };
+      }
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+      "aria-label": clearLabel,
+      "data-scope": "search-field",
+      "data-part": "trailingAdornment",
+      style: {
+        position: "absolute",
+        insetInlineEnd: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        border: 0,
+        background: "transparent",
+        color: colors?.text?.default,
+        padding: 0
+      },
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+        intent: "action.close",
+        size: "sm"
+      })
+    })]
+  });
+};
+SearchFieldControl.displayName = searchFieldControlMeta.displayName;
+
+//#endregion
+exports.SearchField = SearchField;
+exports.SearchFieldControl = SearchFieldControl;
+exports.SearchFieldLabel = SearchFieldLabel;
+exports.searchFieldControlMeta = searchFieldControlMeta;
+exports.searchFieldLabelMeta = searchFieldLabelMeta;
+exports.searchFieldMeta = searchFieldMeta;

package/dist/composites/SearchField/SearchField.d.cts

@@ -0,0 +1,81 @@
+
+import * as React from "react";
+import { Input, LabelProps, SearchFieldProps } from "react-aria-components";
+
+//#region src/composites/SearchField/SearchField.d.ts
+/** Formal semantic identity — SearchField root (Input entity). */
+declare const searchFieldMeta: {
+  readonly displayName: "SearchField";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Formal semantic identity — label slot. */
+declare const searchFieldLabelMeta: {
+  readonly displayName: "SearchFieldLabel";
+  readonly entity: "Input";
+  readonly structure: "label";
+  readonly composition: "label";
+};
+/** Formal semantic identity — control slot (search box). */
+declare const searchFieldControlMeta: {
+  readonly displayName: "SearchFieldControl";
+  readonly entity: "Input";
+  readonly structure: "control";
+  readonly composition: "control";
+};
+/** Props for the SearchField root. */
+interface SearchFieldProps$1 extends Omit<SearchFieldProps, 'style' | 'className' | 'children'> {
+  /**
+   * Accessible label for the clear button (caller-localized — no default, per
+   * the i18n rule / ADR-001). e.g. "Clear search".
+   */
+  clearLabel: string;
+  /**
+   * Field parts (label, input, clear button, …). Plain nodes only — the
+   * composite provides its own scope context, so React Aria's
+   * function-children form is not part of this API.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A search input composite (Input entity). Renders a labelled search box with
+ * a leading search glyph and a trailing clear button (shown once there is
+ * text). Compose with `SearchFieldLabel` and `SearchFieldControl`.
+ *
+ * @example
+ * ```tsx
+ * <SearchField clearLabel="Clear search" onSubmit={run}>
+ *   <SearchFieldLabel>Search</SearchFieldLabel>
+ *   <SearchFieldControl placeholder="Search…" />
+ * </SearchField>
+ * ```
+ */
+declare const SearchField: {
+  ({
+    clearLabel,
+    children,
+    ...props
+  }: SearchFieldProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "SearchField";
+};
+/** Props for the SearchField label. */
+type SearchFieldLabelProps = Omit<LabelProps, 'style' | 'className'>;
+/** The label slot of a SearchField. */
+declare const SearchFieldLabel: {
+  (props: SearchFieldLabelProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "SearchFieldLabel";
+};
+/** Props for the SearchField control. */
+type SearchFieldControlProps = Omit<React.ComponentProps<typeof Input>, 'style' | 'className'>;
+/**
+ * The control slot — the search box. Renders the leading search glyph
+ * (`leadingAdornment`), the `<input>`, and the trailing clear button
+ * (`trailingAdornment`, labelled by the root's `clearLabel`). The clear
+ * button is managed by React Aria (hidden while empty).
+ */
+declare const SearchFieldControl: {
+  (props: SearchFieldControlProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "SearchFieldControl";
+};
+//#endregion
+export { SearchField, SearchFieldControl, SearchFieldControlProps, SearchFieldLabel, SearchFieldLabelProps, SearchFieldProps$1 as SearchFieldProps, searchFieldControlMeta, searchFieldLabelMeta, searchFieldMeta };

package/dist/composites/SearchField/SearchField.d.mts

@@ -0,0 +1,81 @@
+
+import { Input, LabelProps, SearchFieldProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/composites/SearchField/SearchField.d.ts
+/** Formal semantic identity — SearchField root (Input entity). */
+declare const searchFieldMeta: {
+  readonly displayName: "SearchField";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Formal semantic identity — label slot. */
+declare const searchFieldLabelMeta: {
+  readonly displayName: "SearchFieldLabel";
+  readonly entity: "Input";
+  readonly structure: "label";
+  readonly composition: "label";
+};
+/** Formal semantic identity — control slot (search box). */
+declare const searchFieldControlMeta: {
+  readonly displayName: "SearchFieldControl";
+  readonly entity: "Input";
+  readonly structure: "control";
+  readonly composition: "control";
+};
+/** Props for the SearchField root. */
+interface SearchFieldProps$1 extends Omit<SearchFieldProps, 'style' | 'className' | 'children'> {
+  /**
+   * Accessible label for the clear button (caller-localized — no default, per
+   * the i18n rule / ADR-001). e.g. "Clear search".
+   */
+  clearLabel: string;
+  /**
+   * Field parts (label, input, clear button, …). Plain nodes only — the
+   * composite provides its own scope context, so React Aria's
+   * function-children form is not part of this API.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A search input composite (Input entity). Renders a labelled search box with
+ * a leading search glyph and a trailing clear button (shown once there is
+ * text). Compose with `SearchFieldLabel` and `SearchFieldControl`.
+ *
+ * @example
+ * ```tsx
+ * <SearchField clearLabel="Clear search" onSubmit={run}>
+ *   <SearchFieldLabel>Search</SearchFieldLabel>
+ *   <SearchFieldControl placeholder="Search…" />
+ * </SearchField>
+ * ```
+ */
+declare const SearchField$1: {
+  ({
+    clearLabel,
+    children,
+    ...props
+  }: SearchFieldProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "SearchField";
+};
+/** Props for the SearchField label. */
+type SearchFieldLabelProps = Omit<LabelProps, 'style' | 'className'>;
+/** The label slot of a SearchField. */
+declare const SearchFieldLabel: {
+  (props: SearchFieldLabelProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "SearchFieldLabel";
+};
+/** Props for the SearchField control. */
+type SearchFieldControlProps = Omit<React.ComponentProps<typeof Input>, 'style' | 'className'>;
+/**
+ * The control slot — the search box. Renders the leading search glyph
+ * (`leadingAdornment`), the `<input>`, and the trailing clear button
+ * (`trailingAdornment`, labelled by the root's `clearLabel`). The clear
+ * button is managed by React Aria (hidden while empty).
+ */
+declare const SearchFieldControl: {
+  (props: SearchFieldControlProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "SearchFieldControl";
+};
+//#endregion
+export { SearchField$1 as SearchField, SearchFieldControl, SearchFieldControlProps, SearchFieldLabel, SearchFieldLabelProps, SearchFieldProps$1 as SearchFieldProps, searchFieldControlMeta, searchFieldLabelMeta, searchFieldMeta };