@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/popover/popover.d.ts

@@ -1,11 +1,27 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { type ComponentProps, type ReactNode } from "react";
+export type PopoverRootProps<Payload = unknown> = Omit<BasePopover.Root.Props<Payload>, "open" | "defaultOpen" | "onOpenChange" | "modal" | "children"> & Readonly<{
+    /** Whether the popover is open. Leave it out for a popover that keeps its own state. */
+    open?: boolean;
+    /** Whether the popover starts open, when it keeps its own state. @default false */
+    defaultOpen?: boolean;
+    /** Called with the new open state when the popover opens or closes. */
+    onOpenChange?: BasePopover.Root.Props<Payload>["onOpenChange"];
+    /** Whether focus stays inside the popover and the page behind it is inert while it is open. @default false */
+    modal?: BasePopover.Root.Props<Payload>["modal"];
+    /** The trigger and the popover's content. */
+    children?: BasePopover.Root.Props<Payload>["children"];
+}>;
+/** Holds the popover's open state for its parts. It renders no element of its own. */
+declare const Root: <Payload>(props: PopoverRootProps<Payload>) => ReactNode;
 export type PopoverTriggerProps = ComponentProps<typeof BasePopover.Trigger> & Readonly<{
     /** Called once a pointer rests on the trigger or it takes focus, to warm what the popup shows. */
     onIntent?: () => void;
 }>;
+/** The control that opens the popover, warming its content on intent. */
 declare const Trigger: ({ onIntent, onPointerEnter, onPointerLeave, onFocus, ...props }: PopoverTriggerProps) => ReactNode;
 export type PopoverPositionerProps = Omit<ComponentProps<typeof BasePopover.Positioner>, "ref">;
+/** Places the popup against its trigger, clear of the viewport's edges. */
 declare const Positioner: ({ sideOffset, className, ...props }: PopoverPositionerProps) => ReactNode;
 export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> & (Readonly<{
     /** Whether the content the popup describes is still in flight. */
@@ -16,56 +32,72 @@ export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> & (Read
     loading?: undefined;
     loadingLabel?: undefined;
 }>);
+/**
+ * The popover's surface. While `loading`, its title and values draw as
+ * placeholders and `loadingLabel` is announced once.
+ */
 declare const Popup: ({ loading, loadingLabel, className, children, ...props }: PopoverPopupProps) => ReactNode;
+/** The arrow pointing from the popup at its trigger. */
 declare const Arrow: ({ className, ...props }: ComponentProps<typeof BasePopover.Arrow>) => ReactNode;
+/** The popover's heading, which names it. */
 declare const Title: ({ className, children, ...props }: ComponentProps<typeof BasePopover.Title>) => ReactNode;
+/** A table of `Row`s whose labels and values line up in two columns. */
 declare const Rows: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
-export type PopoverRowProps = Readonly<{
-    /** Left-aligned descriptor. */
-    label: ReactNode;
-    /** Value displayed beside the label. */
-    children: ReactNode;
+export type PopoverRowProps = ComponentProps<"div">;
+/** One labelled value: a `RowLabel`, then a `RowValue`. */
+declare const Row: ({ className, ...props }: PopoverRowProps) => ReactNode;
+export type PopoverRowLabelProps = ComponentProps<"span">;
+/** What the row's value is, at its start. */
+declare const RowLabel: ({ className, ...props }: PopoverRowLabelProps) => ReactNode;
+export type PopoverRowValueProps = ComponentProps<"span"> & Readonly<{
     /** Uses tabular figures for evenly spaced numbers. */
     numeric?: boolean;
-    className?: string;
 }>;
-declare const Row: ({ label, children, numeric, className, }: PopoverRowProps) => ReactNode;
+/** The row's value, beside its label; a placeholder while the popup is loading. */
+declare const RowValue: ({ numeric, className, children, ...props }: PopoverRowValueProps) => ReactNode;
+export type PopoverContentProps = PopoverPopupProps & Readonly<Pick<PopoverPositionerProps, "side" | "sideOffset" | "align" | "alignOffset"> & {
+    /** The element the popover is portalled into. @default document.body */
+    container?: BasePopover.Portal.Props["container"];
+}>;
+/** `Portal`, `Positioner` and `Popup` in one: the popover's surface, placed against its trigger. */
+declare const Content: ({ container, side, sideOffset, align, alignOffset, ...props }: PopoverContentProps) => ReactNode;
 type PopoverParts = Readonly<{
-    Root: typeof BasePopover.Root;
+    Root: typeof Root;
     Trigger: typeof Trigger;
     Portal: typeof BasePopover.Portal;
     Positioner: typeof Positioner;
     Popup: typeof Popup;
+    Content: typeof Content;
     Arrow: typeof Arrow;
     Title: typeof Title;
     Rows: typeof Rows;
     Row: typeof Row;
+    RowLabel: typeof RowLabel;
+    RowValue: typeof RowValue;
     Description: typeof BasePopover.Description;
     Close: typeof BasePopover.Close;
     createHandle: typeof BasePopover.createHandle;
 }>;
 /**
- * Rich light popover over base-ui's Popover. Adds a styled `Title` and a
- * labelled `Row` slot (label on the left, value on the right) for cell-level
- * composition explainers. The positioner keeps `--popup-edge-padding` from the
- * viewport's edges.
+ * A rich popover over base-ui's `Popover`, with a `Title` and rows of labelled
+ * values. `Content` bundles the portal, positioner and popup; the unbundled
+ * parts stay.
  *
  * @example
  * <Popover.Root>
  *   <Popover.Trigger openOnHover onIntent={() => prefetchRate(id)}>
  *     € 1.234,56
  *   </Popover.Trigger>
- *   <Popover.Portal>
- *     <Popover.Positioner>
- *       <Popover.Popup loading={rate.isPending} loadingLabel="Loading the rate">
- *         <Popover.Arrow />
- *         <Popover.Title>Rate breakdown</Popover.Title>
- *         <Popover.Rows>
- *           <Popover.Row numeric label="Base">{rate.data?.base}</Popover.Row>
- *         </Popover.Rows>
- *       </Popover.Popup>
- *     </Popover.Positioner>
- *   </Popover.Portal>
+ *   <Popover.Content loading={rate.isPending} loadingLabel="Loading the rate">
+ *     <Popover.Arrow />
+ *     <Popover.Title>Rate breakdown</Popover.Title>
+ *     <Popover.Rows>
+ *       <Popover.Row>
+ *         <Popover.RowLabel>Base</Popover.RowLabel>
+ *         <Popover.RowValue numeric>{rate.data?.base}</Popover.RowValue>
+ *       </Popover.Row>
+ *     </Popover.Rows>
+ *   </Popover.Content>
  * </Popover.Root>
  */
 export declare const Popover: PopoverParts;

package/dist/components/popover/popover.js

@@ -4,13 +4,25 @@ import { useIntent } from "../../lib/use-intent.js";
 import { Skeleton } from "../skeleton/skeleton.js";
 import popover_module_default from "./popover.module.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useContext } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Popover } from "@base-ui/react/popover";
 // src/components/popover/popover.tsx
+/** Holds the popover's open state for its parts. It renders no element of its own. */
+var Root = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Popover.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
 var LoadingContext = createContext(false);
+/** The control that opens the popover, warming its content on intent. */
 var Trigger = (t0) => {
 	const $ = c(14);
 	let onFocus;
@@ -59,6 +71,7 @@ var Trigger = (t0) => {
 	} else t2 = $[13];
 	return t2;
 };
+/** Places the popup against its trigger, clear of the viewport's edges. */
 var Positioner = (t0) => {
 	const $ = c(11);
 	let className;
@@ -134,6 +147,10 @@ var SkeletonText = (t0) => {
 	} else t4 = $[7];
 	return t4;
 };
+/**
+* The popover's surface. While `loading`, its title and values draw as
+* placeholders and `loadingLabel` is announced once.
+*/
 var Popup = (t0) => {
 	const $ = c(21);
 	let children;
@@ -211,6 +228,7 @@ var Popup = (t0) => {
 	} else t6 = $[20];
 	return t6;
 };
+/** The arrow pointing from the popup at its trigger. */
 var Arrow = (t0) => {
 	const $ = c(9);
 	let className;
@@ -257,6 +275,7 @@ var Arrow = (t0) => {
 	} else t3 = $[8];
 	return t3;
 };
+/** The popover's heading, which names it. */
 var Title = (t0) => {
 	const $ = c(13);
 	let children;
@@ -282,7 +301,7 @@ var Title = (t0) => {
 	} else t1 = $[5];
 	let t2;
 	if ($[6] !== children || $[7] !== loading) {
-		t2 = loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SkeletonText, {
+		t2 = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SkeletonText, {
 			className: popover_module_default.titleSkeleton,
 			children
 		}), /* @__PURE__ */ jsx("span", {
@@ -307,6 +326,7 @@ var Title = (t0) => {
 	} else t3 = $[12];
 	return t3;
 };
+/** A table of `Row`s whose labels and values line up in two columns. */
 var Rows = (t0) => {
 	const $ = c(8);
 	let className;
@@ -338,95 +358,219 @@ var Rows = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** One labelled value: a `RowLabel`, then a `RowValue`. */
 var Row = (t0) => {
-	const $ = c(15);
-	const { label, children, numeric, className } = t0;
-	const loading = useContext(LoadingContext);
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
 	let t1;
-	if ($[0] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(popover_module_default.row, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== label) {
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** What the row's value is, at its start. */
+var RowLabel = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(popover_module_default.rowLabel, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx("span", {
-			className: popover_module_default.rowLabel,
-			children: label
+			className: t1,
+			...props
 		});
-		$[2] = label;
-		$[3] = t2;
-	} else t2 = $[3];
-	const t3 = numeric || void 0;
-	let t4;
-	if ($[4] !== children || $[5] !== label || $[6] !== loading) {
-		t4 = loading ? /* @__PURE__ */ jsx(SkeletonText, {
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The row's value, beside its label; a placeholder while the popup is loading. */
+var RowValue = (t0) => {
+	const $ = c(15);
+	let children;
+	let className;
+	let numeric;
+	let props;
+	if ($[0] !== t0) {
+		({numeric, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = numeric;
+		$[4] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		numeric = $[3];
+		props = $[4];
+	}
+	const loading = useContext(LoadingContext);
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(popover_module_default.rowValue, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	const t2 = numeric || void 0;
+	let t3;
+	if ($[7] !== children || $[8] !== loading) {
+		t3 = loading ? /* @__PURE__ */ jsx(SkeletonText, {
 			className: popover_module_default.valueSkeleton,
-			children: label
+			children
 		}) : children;
-		$[4] = children;
-		$[5] = label;
-		$[6] = loading;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== t3 || $[9] !== t4) {
-		t5 = /* @__PURE__ */ jsx("span", {
-			className: popover_module_default.rowValue,
-			"data-numeric": t3,
-			children: t4
-		});
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== t1 || $[12] !== t2 || $[13] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
+		$[7] = children;
+		$[8] = loading;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== props || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
 			className: t1,
-			children: [t2, t5]
+			"data-numeric": t2,
+			...props,
+			children: t3
 		});
+		$[10] = props;
 		$[11] = t1;
 		$[12] = t2;
-		$[13] = t5;
-		$[14] = t6;
-	} else t6 = $[14];
-	return t6;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+};
+/** `Portal`, `Positioner` and `Popup` in one: the popover's surface, placed against its trigger. */
+var Content = (t0) => {
+	const $ = c(18);
+	let align;
+	let alignOffset;
+	let container;
+	let props;
+	let side;
+	let sideOffset;
+	if ($[0] !== t0) {
+		({container, side, sideOffset, align, alignOffset, ...props} = t0);
+		$[0] = t0;
+		$[1] = align;
+		$[2] = alignOffset;
+		$[3] = container;
+		$[4] = props;
+		$[5] = side;
+		$[6] = sideOffset;
+	} else {
+		align = $[1];
+		alignOffset = $[2];
+		container = $[3];
+		props = $[4];
+		side = $[5];
+		sideOffset = $[6];
+	}
+	let t1;
+	if ($[7] !== props) {
+		t1 = /* @__PURE__ */ jsx(Popup, { ...props });
+		$[7] = props;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== align || $[10] !== alignOffset || $[11] !== side || $[12] !== sideOffset || $[13] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Positioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			children: t1
+		});
+		$[9] = align;
+		$[10] = alignOffset;
+		$[11] = side;
+		$[12] = sideOffset;
+		$[13] = t1;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== container || $[16] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Popover.Portal, {
+			container,
+			children: t2
+		});
+		$[15] = container;
+		$[16] = t2;
+		$[17] = t3;
+	} else t3 = $[17];
+	return t3;
 };
 /**
-* Rich light popover over base-ui's Popover. Adds a styled `Title` and a
-* labelled `Row` slot (label on the left, value on the right) for cell-level
-* composition explainers. The positioner keeps `--popup-edge-padding` from the
-* viewport's edges.
+* A rich popover over base-ui's `Popover`, with a `Title` and rows of labelled
+* values. `Content` bundles the portal, positioner and popup; the unbundled
+* parts stay.
 *
 * @example
 * <Popover.Root>
 *   <Popover.Trigger openOnHover onIntent={() => prefetchRate(id)}>
 *     € 1.234,56
 *   </Popover.Trigger>
-*   <Popover.Portal>
-*     <Popover.Positioner>
-*       <Popover.Popup loading={rate.isPending} loadingLabel="Loading the rate">
-*         <Popover.Arrow />
-*         <Popover.Title>Rate breakdown</Popover.Title>
-*         <Popover.Rows>
-*           <Popover.Row numeric label="Base">{rate.data?.base}</Popover.Row>
-*         </Popover.Rows>
-*       </Popover.Popup>
-*     </Popover.Positioner>
-*   </Popover.Portal>
+*   <Popover.Content loading={rate.isPending} loadingLabel="Loading the rate">
+*     <Popover.Arrow />
+*     <Popover.Title>Rate breakdown</Popover.Title>
+*     <Popover.Rows>
+*       <Popover.Row>
+*         <Popover.RowLabel>Base</Popover.RowLabel>
+*         <Popover.RowValue numeric>{rate.data?.base}</Popover.RowValue>
+*       </Popover.Row>
+*     </Popover.Rows>
+*   </Popover.Content>
 * </Popover.Root>
 */
 var Popover$1 = {
-	Root: Popover.Root,
+	Root,
 	Trigger,
 	Portal: Popover.Portal,
 	Positioner,
 	Popup,
+	Content,
 	Arrow,
 	Title,
 	Rows,
 	Row,
+	RowLabel,
+	RowValue,
 	Description: Popover.Description,
 	Close: Popover.Close,
 	createHandle: Popover.createHandle

package/dist/components/radio-group-field/radio-group.js

@@ -4,8 +4,8 @@ import { useFieldFocus } from "../field/use-field-focus.js";
 import { FieldsetLegend, FieldsetRoot } from "../fieldset/fieldset-root.js";
 import radio_group_module_default from "./radio-group.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";

package/dist/components/search-field/search-field.d.ts

@@ -1,17 +1,19 @@
 import type { ReactNode } from "react";
 import { type TextFieldBaseProps, type TextPresetProps } from "../text-field/index.ts";
 /** What a search field takes beside the preset props. */
-export type SearchFieldExtraProps = Pick<TextFieldBaseProps, "labelHidden" | "placeholder"> & Readonly<{
+export type SearchFieldExtraProps = Pick<TextFieldBaseProps, "labelHidden" | "placeholder" | "icon"> & Readonly<{
     /** The clear button's accessible name and tooltip, such as "Clear search". */
     clearLabel: string;
+    /** The clear button's icon. */
+    clearIcon: ReactNode;
 }>;
 export type SearchFieldProps = TextPresetProps & SearchFieldExtraProps;
 /**
- * A search box: a `TextField` with a leading search glyph and the clear button.
- * `labelHidden` keeps the name for screen readers where the layout carries no
- * room for a visible label.
+ * A search box: a `TextField` with an optional leading glyph and the clear
+ * button. `labelHidden` keeps the name for screen readers where the layout
+ * carries no room for a visible label.
  *
  * @example
- * <SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" value={search} onValueChange={setSearch} />
+ * <SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" clearIcon={<CloseIcon />} icon={<SearchIcon />} value={search} onValueChange={setSearch} />
  */
 export declare const SearchField: ({ enterKeyHint, ...props }: SearchFieldProps) => ReactNode;

package/dist/components/search-field/search-field.js

@@ -1,15 +1,14 @@
-import SvgSearch from "../../vendor/@material-design-icons/svg/outlined/search.js";
 import { TextField } from "../text-field/text-field.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 // src/components/search-field/search-field.tsx
 /**
-* A search box: a `TextField` with a leading search glyph and the clear button.
-* `labelHidden` keeps the name for screen readers where the layout carries no
-* room for a visible label.
+* A search box: a `TextField` with an optional leading glyph and the clear
+* button. `labelHidden` keeps the name for screen readers where the layout
+* carries no room for a visible label.
 *
 * @example
-* <SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" value={search} onValueChange={setSearch} />
+* <SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" clearIcon={<CloseIcon />} icon={<SearchIcon />} value={search} onValueChange={setSearch} />
 */
 var SearchField = (t0) => {
 	const $ = c(6);
@@ -31,7 +30,6 @@ var SearchField = (t0) => {
 			...props,
 			enterKeyHint,
 			type: "search",
-			icon: SvgSearch,
 			clearable: true,
 			autoComplete: "off",
 			spellCheck: false

package/dist/components/search-field/tsf-search-field.d.ts

@@ -8,7 +8,7 @@ export type TSFSearchFieldProps = TSFTextPresetProps<SearchFieldExtraProps>;
  *
  * @example
  * <form.AppField name="query">
- * 	{field => <field.SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" />}
+ * 	{field => <field.SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" clearIcon={<CloseIcon />} />}
  * </form.AppField>
  */
 export declare const TSFSearchField: (props: TSFSearchFieldProps) => ReactNode;

package/dist/components/search-field/tsf-search-field.js

@@ -7,7 +7,7 @@ import { SearchField } from "./search-field.js";
 *
 * @example
 * <form.AppField name="query">
-* 	{field => <field.SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" />}
+* 	{field => <field.SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" clearIcon={<CloseIcon />} />}
 * </form.AppField>
 */
 var TSFSearchField = connectTextPreset(SearchField);

package/dist/components/segmented-control-field/segmented-control.js

@@ -6,8 +6,8 @@ import { useFormDisabled } from "../form/form-context.js";
 import { useSlidingIndicator } from "../../lib/sliding-indicator/use-sliding-indicator.js";
 import segmented_control_module_default from "./segmented-control.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 // src/components/segmented-control-field/segmented-control.tsx

package/dist/components/select-field/select-field.d.ts

@@ -4,6 +4,10 @@ import { type SelectRootProps } from "./select.tsx";
 export type SelectFieldProps<T extends string> = FieldProps & OptionsLoadLabels & Omit<SelectRootProps<T>, "children" | "required"> & Readonly<{
     /** Shown on the trigger while nothing is selected. */
     placeholder?: string;
+    /** The chevron after the trigger's value, such as an expand icon. */
+    icon?: ReactNode;
+    /** The mark beside the chosen option, such as a tick. */
+    checkIcon: ReactNode;
     /** How far the options have loaded, when they come from a query. */
     load?: OptionsLoad;
     /** Called once focus has left the field, its popup included. */
@@ -20,6 +24,8 @@ export type SelectFieldProps<T extends string> = FieldProps & OptionsLoadLabels
  * 	label="Status"
  * 	optionalLabel="optional"
  * 	options={statusOptions}
+ * 	icon={<ExpandMoreIcon />}
+ * 	checkIcon={<CheckIcon />}
  * 	value={status}
  * 	onValueChange={setStatus}
  * 	loadingLabel="Loading options…"
@@ -29,4 +35,4 @@ export type SelectFieldProps<T extends string> = FieldProps & OptionsLoadLabels
  * 	noOptionsLabel="No options available."
  * />
  */
-export declare const SelectField: <T extends string>({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, placeholder, load, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, onBlur, className, onOpenChange, onOpenChangeComplete, ...rootProps }: SelectFieldProps<T>) => ReactNode;
+export declare const SelectField: <T extends string>({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, placeholder, icon, checkIcon, load, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, onBlur, className, onOpenChange, onOpenChangeComplete, ...rootProps }: SelectFieldProps<T>) => ReactNode;