@funstack/ui 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/select/select-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-context.mjs","names":[],"sources":["../../src/select/select-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\nexport interface SelectContextValue {\n  /** Optimistic value: Options render `data-selected` from it. */\n  readonly optimistic: string;\n  readonly pending: boolean;\n  /** `Root disabled` (natively disables the whole `<select>`). */\n  readonly disabled: boolean;\n  /** Inside a `Select.Group disabled` (`false` outside groups): Options match `:disabled`. */\n  readonly groupDisabled: boolean;\n  /**\n   * Called by each Option from its mount layout effect with its element and whether that render\n   * hydrated server HTML. Late options are re-applied, and hydrated late options reconciled\n   * (design/components/select.md 6.2).\n   */\n  readonly optionMounted: (el: HTMLOptionElement | null, hydrated: boolean) => void;\n}\n\nexport const SelectContext = createContext<SelectContextValue | null>(null);\n\nexport function useSelectContext(part: string): SelectContextValue {\n  const context = use(SelectContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Select.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAmBA,MAAa,gBAAgB,cAAyC,IAAI;AAE1E,SAAgB,iBAAiB,MAAkC;CACjE,MAAM,UAAU,IAAI,aAAa;CACjC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,wCAAwC;CAElE,OAAO;AACT"}

package/dist/select/select-dom.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { useCallback, useRef } from "react";
+//#region src/select/select-dom.ts
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* The library ref of a Select part: stores the node in `node` and, in development,
+* warns once per instance when the mounted element is not `<tag>` (conventions 1.2: Select's parts
+* keep their native elements) or when `position` reports a misplaced element (a message, or
+* `null` when the element is where HTML wants it). Ref callbacks run in the layout phase, when
+* the element's siblings are in place.
+*/
+function useSelectPartRef(component, tag, position) {
+	const node = useRef(null);
+	const warnedTag = useRef(false);
+	const warnedPosition = useRef(false);
+	return {
+		ref: useCallback((el) => {
+			node.current = el;
+			if (isDev && !warnedTag.current && el.tagName !== tag.toUpperCase()) {
+				warnedTag.current = true;
+				console.error(`${component}: expected to render a <${tag}> element but got <${el.tagName.toLowerCase()}>. The parser, the picker and <selectedcontent> cloning key on the native element; a \`render\` element must keep it.`);
+			}
+			if (isDev && position && !warnedPosition.current) {
+				const message = position(el);
+				if (message !== null) {
+					warnedPosition.current = true;
+					console.error(`${component}: ${message}`);
+				}
+			}
+			return () => {
+				node.current = null;
+			};
+		}, [
+			component,
+			tag,
+			position
+		]),
+		node
+	};
+}
+//#endregion
+export { useSelectPartRef };
+
+//# sourceMappingURL=select-dom.mjs.map

package/dist/select/select-dom.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-dom.mjs","names":[],"sources":["../../src/select/select-dom.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef } from \"react\";\nimport type { RefCallback, RefObject } from \"react\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nexport interface SelectPartRef<E extends Element> {\n  /** The library ref to pass to `useRender`. */\n  readonly ref: RefCallback<E>;\n  /** The mounted element. Read it from effects and handlers only. */\n  readonly node: RefObject<E | null>;\n}\n\n/**\n * The library ref of a Select part: stores the node in `node` and, in development,\n * warns once per instance when the mounted element is not `<tag>` (conventions 1.2: Select's parts\n * keep their native elements) or when `position` reports a misplaced element (a message, or\n * `null` when the element is where HTML wants it). Ref callbacks run in the layout phase, when\n * the element's siblings are in place.\n */\nexport function useSelectPartRef<E extends Element>(\n  component: string,\n  tag: string,\n  position?: (el: E) => string | null,\n): SelectPartRef<E> {\n  const node = useRef<E | null>(null);\n  const warnedTag = useRef(false);\n  const warnedPosition = useRef(false);\n  const ref = useCallback(\n    (el: E) => {\n      node.current = el;\n      if (isDev && !warnedTag.current && el.tagName !== tag.toUpperCase()) {\n        warnedTag.current = true;\n        console.error(\n          `${component}: expected to render a <${tag}> element but got ` +\n            `<${el.tagName.toLowerCase()}>. The parser, the picker and <selectedcontent> cloning ` +\n            `key on the native element; a \\`render\\` element must keep it.`,\n        );\n      }\n      if (isDev && position && !warnedPosition.current) {\n        const message = position(el);\n        if (message !== null) {\n          warnedPosition.current = true;\n          console.error(`${component}: ${message}`);\n        }\n      }\n      return () => {\n        node.current = null;\n      };\n    },\n    // `position` is a module-level function at every call site, so the callback is stable.\n    [component, tag, position],\n  );\n  return { ref, node };\n}\n"],"mappings":";;;AAIA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;;AAgBvC,SAAgB,iBACd,WACA,KACA,UACkB;CAClB,MAAM,OAAO,OAAiB,IAAI;CAClC,MAAM,YAAY,OAAO,KAAK;CAC9B,MAAM,iBAAiB,OAAO,KAAK;CA0BnC,OAAO;EAAE,KAzBG,aACT,OAAU;GACT,KAAK,UAAU;GACf,IAAI,SAAS,CAAC,UAAU,WAAW,GAAG,YAAY,IAAI,YAAY,GAAG;IACnE,UAAU,UAAU;IACpB,QAAQ,MACN,GAAG,UAAU,0BAA0B,IAAI,qBACrC,GAAG,QAAQ,YAAY,EAAE,sHAEjC;GACF;GACA,IAAI,SAAS,YAAY,CAAC,eAAe,SAAS;IAChD,MAAM,UAAU,SAAS,EAAE;IAC3B,IAAI,YAAY,MAAM;KACpB,eAAe,UAAU;KACzB,QAAQ,MAAM,GAAG,UAAU,IAAI,SAAS;IAC1C;GACF;GACA,aAAa;IACX,KAAK,UAAU;GACjB;EACF,GAEA;GAAC;GAAW;GAAK;EAAQ,CAEhB;EAAG;CAAK;AACrB"}

package/dist/select/select-group-label.d.mts

@@ -0,0 +1,22 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { SelectRootState } from "./select-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/select/select-group-label.d.ts
+export interface SelectGroupLabelProps extends Omit<ComponentPropsWithRef<"legend">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, SelectRootState>;
+  style?: StateValue<CSSProperties | undefined, SelectRootState>;
+  children?: StateValue<ReactNode, SelectRootState>;
+  /** Replace the rendered element. Must keep a `<legend>`. */
+  render?: RenderProp<ComponentPropsWithRef<"legend">, SelectRootState>;
+}
+/**
+ * The rich label of a `Select.Group`: a `<legend>`, rendered by engines with customizable select.
+ * Optional; must be the **first child** of its Group. Keep its text equal to the Group's `label`,
+ * which native pickers and assistive technology use. Owns no keys.
+ */
+export declare function SelectGroupLabel({ className, style, children, render, ...rest }: SelectGroupLabelProps): ReactNode;
+export declare namespace SelectGroupLabel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=select-group-label.d.mts.map

package/dist/select/select-group-label.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-group-label.d.mts","names":[],"sources":["../../src/select/select-group-label.tsx"],"mappings":";;;;iBAQiB,8BAA8B,KAC7C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;wBAcvC,mBACd,WACA,OACA,UACA,WACG,QACF,wBAAqB;yBANR"}

package/dist/select/select-group-label.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useSelectContext } from "./select-context.mjs";
+import { useSelectPartRef } from "./select-dom.mjs";
+//#region src/select/select-group-label.tsx
+function firstChildOfGroup(el) {
+	const parent = el.parentElement;
+	if (parent?.tagName === "OPTGROUP" && parent.firstElementChild === el) return null;
+	return "must be the first child of a Select.Group's <optgroup> (HTML content model).";
+}
+/**
+* The rich label of a `Select.Group`: a `<legend>`, rendered by engines with customizable select.
+* Optional; must be the **first child** of its Group. Keep its text equal to the Group's `label`,
+* which native pickers and assistive technology use. Owns no keys.
+*/
+function SelectGroupLabel({ className, style, children, render, ...rest }) {
+	const ctx = useSelectContext("Select.GroupLabel");
+	const state = {
+		value: ctx.optimistic,
+		pending: ctx.pending,
+		disabled: ctx.disabled
+	};
+	const { ref } = useSelectPartRef("Select.GroupLabel", "legend", firstChildOfGroup);
+	return useRender({
+		defaultElement: "legend",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		ref
+	});
+}
+SelectGroupLabel.displayName = "SelectGroupLabel";
+//#endregion
+export { SelectGroupLabel };
+
+//# sourceMappingURL=select-group-label.mjs.map

package/dist/select/select-group-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-group-label.mjs","names":[],"sources":["../../src/select/select-group-label.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nexport interface SelectGroupLabelProps extends Omit<\n  ComponentPropsWithRef<\"legend\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<legend>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"legend\">, SelectRootState>;\n}\n\nfunction firstChildOfGroup(el: HTMLLegendElement): string | null {\n  const parent = el.parentElement;\n  if (parent?.tagName === \"OPTGROUP\" && parent.firstElementChild === el) return null;\n  return \"must be the first child of a Select.Group's <optgroup> (HTML content model).\";\n}\n\n/**\n * The rich label of a `Select.Group`: a `<legend>`, rendered by engines with customizable select.\n * Optional; must be the **first child** of its Group. Keep its text equal to the Group's `label`,\n * which native pickers and assistive technology use. Owns no keys.\n */\nexport function SelectGroupLabel({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectGroupLabelProps) {\n  const ctx = useSelectContext(\"Select.GroupLabel\");\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  const { ref } = useSelectPartRef<HTMLLegendElement>(\n    \"Select.GroupLabel\",\n    \"legend\",\n    firstChildOfGroup,\n  );\n  return useRender<ComponentPropsWithRef<\"legend\">, SelectRootState>({\n    defaultElement: \"legend\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    ref,\n  });\n}\n\nSelectGroupLabel.displayName = \"SelectGroupLabel\";\n"],"mappings":";;;;;AAmBA,SAAS,kBAAkB,IAAsC;CAC/D,MAAM,SAAS,GAAG;CAClB,IAAI,QAAQ,YAAY,cAAc,OAAO,sBAAsB,IAAI,OAAO;CAC9E,OAAO;AACT;;;;;;AAOA,SAAgB,iBAAiB,EAC/B,WACA,OACA,UACA,QACA,GAAG,QACqB;CACxB,MAAM,MAAM,iBAAiB,mBAAmB;CAChD,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,MAAM,EAAE,QAAQ,iBACd,qBACA,UACA,iBACF;CACA,OAAO,UAA4D;EACjE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;CACF,CAAC;AACH;AAEA,iBAAiB,cAAc"}

package/dist/select/select-group.d.mts

@@ -0,0 +1,28 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { SelectRootState } from "./select-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/select/select-group.d.ts
+export interface SelectGroupProps extends Omit<ComponentPropsWithRef<"optgroup">, "label" | "className" | "style" | "children"> {
+  /**
+   * The `<optgroup label>`: shown by native pickers (Firefox today) and read by assistive
+   * technology. Required. Keep it equal to the text of a `Select.GroupLabel`, if any.
+   */
+  label: string;
+  /** Native `disabled`: every option in the group is disabled. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, SelectRootState>;
+  style?: StateValue<CSSProperties | undefined, SelectRootState>;
+  children?: StateValue<ReactNode, SelectRootState>;
+  /** Replace the rendered element. Must keep an `<optgroup>`. */
+  render?: RenderProp<ComponentPropsWithRef<"optgroup">, SelectRootState>;
+}
+/**
+ * An `<optgroup>` of options. Its state is the Root's state. Owned key: `label`. Its `disabled`
+ * reaches the Options' `state.disabled` / `data-disabled` through context, as `:disabled` does.
+ */
+export declare function SelectGroup({ label, disabled, className, style, children, render, ...rest }: SelectGroupProps): import("react").JSX.Element;
+export declare namespace SelectGroup {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=select-group.d.mts.map

package/dist/select/select-group.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-group.d.mts","names":[],"sources":["../../src/select/select-group.tsx"],"mappings":";;;;iBASiB,yBAAyB,KACxC;;;;;EAOA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;wBAOzC,cACd,OACA,UACA,WACA,OACA,UACA,WACG,QACF,mCAAgB,IAAA;yBARH"}

package/dist/select/select-group.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { SelectContext, useSelectContext } from "./select-context.mjs";
+import { useSelectPartRef } from "./select-dom.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/select/select-group.tsx
+/**
+* An `<optgroup>` of options. Its state is the Root's state. Owned key: `label`. Its `disabled`
+* reaches the Options' `state.disabled` / `data-disabled` through context, as `:disabled` does.
+*/
+function SelectGroup({ label, disabled = false, className, style, children, render, ...rest }) {
+	const ctx = useSelectContext("Select.Group");
+	const state = {
+		value: ctx.optimistic,
+		pending: ctx.pending,
+		disabled: ctx.disabled
+	};
+	const { ref } = useSelectPartRef("Select.Group", "optgroup");
+	const element = useRender({
+		defaultElement: "optgroup",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: {
+			...rest,
+			disabled
+		},
+		libraryProps: { label },
+		ref
+	});
+	const context = useMemo(() => ({
+		...ctx,
+		groupDisabled: disabled
+	}), [ctx, disabled]);
+	return /* @__PURE__ */ jsx(SelectContext, {
+		value: context,
+		children: element
+	});
+}
+SelectGroup.displayName = "SelectGroup";
+//#endregion
+export { SelectGroup };
+
+//# sourceMappingURL=select-group.mjs.map

package/dist/select/select-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-group.mjs","names":[],"sources":["../../src/select/select-group.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext, useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nexport interface SelectGroupProps extends Omit<\n  ComponentPropsWithRef<\"optgroup\">,\n  \"label\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * The `<optgroup label>`: shown by native pickers (Firefox today) and read by assistive\n   * technology. Required. Keep it equal to the text of a `Select.GroupLabel`, if any.\n   */\n  label: string;\n  /** Native `disabled`: every option in the group is disabled. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep an `<optgroup>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"optgroup\">, SelectRootState>;\n}\n\n/**\n * An `<optgroup>` of options. Its state is the Root's state. Owned key: `label`. Its `disabled`\n * reaches the Options' `state.disabled` / `data-disabled` through context, as `:disabled` does.\n */\nexport function SelectGroup({\n  label,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectGroupProps) {\n  const ctx = useSelectContext(\"Select.Group\");\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  const { ref } = useSelectPartRef<HTMLOptGroupElement>(\"Select.Group\", \"optgroup\");\n  const element = useRender<ComponentPropsWithRef<\"optgroup\">, SelectRootState>({\n    defaultElement: \"optgroup\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: { ...rest, disabled },\n    libraryProps: { label },\n    ref,\n  });\n  // Nested groups are not valid HTML, so this only ever turns `false` into the group's value.\n  const context = useMemo(() => ({ ...ctx, groupDisabled: disabled }), [ctx, disabled]);\n  return <SelectContext value={context}>{element}</SelectContext>;\n}\n\nSelectGroup.displayName = \"SelectGroup\";\n"],"mappings":";;;;;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,MAAM,EAAE,QAAQ,iBAAsC,gBAAgB,UAAU;CAChF,MAAM,UAAU,UAA8D;EAC5E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;GAAE,GAAG;GAAM;EAAS;EAC3B,cAAc,EAAE,MAAM;EACtB;CACF,CAAC;CAED,MAAM,UAAU,eAAe;EAAE,GAAG;EAAK,eAAe;CAAS,IAAI,CAAC,KAAK,QAAQ,CAAC;CACpF,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA;CAAuB,CAAA;AAChE;AAEA,YAAY,cAAc"}

package/dist/select/select-option.d.mts

@@ -0,0 +1,42 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/select/select-option.d.ts
+export interface SelectOptionState {
+  readonly value: string;
+  /** Optimistic: true as soon as the user picks this option, before the action settles. */
+  readonly selected: boolean;
+  /** The Root is pending and this option is the optimistic target. */
+  readonly pending: boolean;
+  /** Disabled by its own prop, a disabled `Select.Group`, or `Root disabled` (as `:disabled`). */
+  readonly disabled: boolean;
+}
+export interface SelectOptionProps extends Omit<ComponentPropsWithRef<"option">, "value" | "selected" | "className" | "style" | "children"> {
+  /** The option's value. Required: React cannot infer a value from rich children. */
+  value: string;
+  /** Native `disabled`: not pickable, skipped by keyboard navigation. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, SelectOptionState>;
+  style?: StateValue<CSSProperties | undefined, SelectOptionState>;
+  /**
+   * The option's content. Keep it readable as plain text: engines without customizable select
+   * (Firefox today) show only the text. Give icons `aria-hidden` and no text. Avoid the `label`
+   * attribute (Chromium names the option from it but shows the content).
+   */
+  children?: StateValue<ReactNode, SelectOptionState>;
+  /** Replace the rendered element. Must keep an `<option>`. */
+  render?: RenderProp<ComponentPropsWithRef<"option">, SelectOptionState>;
+}
+/**
+ * One `<option>`. It never renders `selected`: the selection is the Root's `value={optimistic}`
+ * plus the Root's re-apply for options that mount after the select's own commit (a Suspense
+ * boundary or `use()` inside the select), which the Option reports from its mount layout effect.
+ *
+ * Owned keys: `value`, `selected` (never rendered), `disabled`, `data-selected`, `data-pending`,
+ * `data-disabled`.
+ */
+export declare function SelectOption({ value, disabled: disabledProp, className, style, children, render, ...rest }: SelectOptionProps): ReactNode;
+export declare namespace SelectOption {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=select-option.d.mts.map

package/dist/select/select-option.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.d.mts","names":[],"sources":["../../src/select/select-option.tsx"],"mappings":";;;iBAWiB;WACN;;WAEA;;WAEA;;WAEA;;iBAGM,0BAA0B,KACzC;;EAIA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;;;;;EAM9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;wBAWvC,eACd,OACA,UAAU,cACV,WACA,OACA,UACA,WACG,QACF,oBAAiB;yBARJ"}

package/dist/select/select-option.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { syncPresence } from "../internal/sync-presence.mjs";
+import { useSelectContext } from "./select-context.mjs";
+import { useSelectPartRef } from "./select-dom.mjs";
+import { useHydratedMount } from "../internal/use-hydrated-mount.mjs";
+import { useEffectEvent, useLayoutEffect } from "react";
+//#region src/select/select-option.tsx
+/**
+* One `<option>`. It never renders `selected`: the selection is the Root's `value={optimistic}`
+* plus the Root's re-apply for options that mount after the select's own commit (a Suspense
+* boundary or `use()` inside the select), which the Option reports from its mount layout effect.
+*
+* Owned keys: `value`, `selected` (never rendered), `disabled`, `data-selected`, `data-pending`,
+* `data-disabled`.
+*/
+function SelectOption({ value, disabled: disabledProp = false, className, style, children, render, ...rest }) {
+	const ctx = useSelectContext("Select.Option");
+	const selected = ctx.optimistic === value;
+	const pending = ctx.pending && selected;
+	const disabled = ctx.disabled || ctx.groupDisabled || disabledProp;
+	const hydrated = useHydratedMount();
+	const { ref, node } = useSelectPartRef("Select.Option", "option");
+	const reportMount = useEffectEvent(() => {
+		const el = node.current;
+		if (el !== null) {
+			syncPresence(el, "data-selected", selected);
+			syncPresence(el, "data-pending", pending);
+			syncPresence(el, "data-disabled", disabled);
+		}
+		ctx.optionMounted(el, hydrated);
+	});
+	useLayoutEffect(() => {
+		reportMount();
+	}, []);
+	return useRender({
+		defaultElement: "option",
+		render,
+		state: {
+			value,
+			selected,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			value,
+			selected: void 0,
+			disabled: disabledProp,
+			"data-selected": dataAttr(selected),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled)
+		},
+		ref
+	});
+}
+SelectOption.displayName = "SelectOption";
+//#endregion
+export { SelectOption };
+
+//# sourceMappingURL=select-option.mjs.map

package/dist/select/select-option.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.mjs","names":[],"sources":["../../src/select/select-option.tsx"],"sourcesContent":["\"use client\";\nimport { useEffectEvent, useLayoutEffect } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { syncPresence } from \"../internal/sync-presence.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useHydratedMount } from \"../internal/use-hydrated-mount.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\n\nexport interface SelectOptionState {\n  readonly value: string;\n  /** Optimistic: true as soon as the user picks this option, before the action settles. */\n  readonly selected: boolean;\n  /** The Root is pending and this option is the optimistic target. */\n  readonly pending: boolean;\n  /** Disabled by its own prop, a disabled `Select.Group`, or `Root disabled` (as `:disabled`). */\n  readonly disabled: boolean;\n}\n\nexport interface SelectOptionProps extends Omit<\n  ComponentPropsWithRef<\"option\">,\n  \"value\" | \"selected\" | \"className\" | \"style\" | \"children\"\n> {\n  /** The option's value. Required: React cannot infer a value from rich children. */\n  value: string;\n  /** Native `disabled`: not pickable, skipped by keyboard navigation. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectOptionState>;\n  style?: StateValue<CSSProperties | undefined, SelectOptionState>;\n  /**\n   * The option's content. Keep it readable as plain text: engines without customizable select\n   * (Firefox today) show only the text. Give icons `aria-hidden` and no text. Avoid the `label`\n   * attribute (Chromium names the option from it but shows the content).\n   */\n  children?: StateValue<ReactNode, SelectOptionState>;\n  /** Replace the rendered element. Must keep an `<option>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"option\">, SelectOptionState>;\n}\n\n/**\n * One `<option>`. It never renders `selected`: the selection is the Root's `value={optimistic}`\n * plus the Root's re-apply for options that mount after the select's own commit (a Suspense\n * boundary or `use()` inside the select), which the Option reports from its mount layout effect.\n *\n * Owned keys: `value`, `selected` (never rendered), `disabled`, `data-selected`, `data-pending`,\n * `data-disabled`.\n */\nexport function SelectOption({\n  value,\n  disabled: disabledProp = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectOptionProps) {\n  const ctx = useSelectContext(\"Select.Option\");\n  const selected = ctx.optimistic === value;\n  const pending = ctx.pending && selected;\n  const disabled = ctx.disabled || ctx.groupDisabled || disabledProp;\n  const hydrated = useHydratedMount();\n  const { ref, node } = useSelectPartRef<HTMLOptionElement>(\"Select.Option\", \"option\");\n\n  // Reads the mount render's values: for a hydrated option that is the hydration render, which\n  // used the server snapshot (`hydrated === true`).\n  const reportMount = useEffectEvent(() => {\n    const el = node.current;\n    if (el !== null) {\n      // Hydration keeps server attributes that differ from the client render (React only warns);\n      // an option hydrating after its Root can render a different state than the server did.\n      syncPresence(el, \"data-selected\", selected);\n      syncPresence(el, \"data-pending\", pending);\n      syncPresence(el, \"data-disabled\", disabled);\n    }\n    ctx.optionMounted(el, hydrated);\n  });\n  useLayoutEffect(() => {\n    reportMount();\n  }, []);\n\n  const state: SelectOptionState = { value, selected, pending, disabled };\n\n  return useRender<ComponentPropsWithRef<\"option\">, SelectOptionState>({\n    defaultElement: \"option\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      value,\n      selected: undefined,\n      // Only the Option's own prop: `Root disabled` and the Group disable natively themselves.\n      disabled: disabledProp,\n      \"data-selected\": dataAttr(selected),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref,\n  });\n}\n\nSelectOption.displayName = \"SelectOption\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAiDA,SAAgB,aAAa,EAC3B,OACA,UAAU,eAAe,OACzB,WACA,OACA,UACA,QACA,GAAG,QACiB;CACpB,MAAM,MAAM,iBAAiB,eAAe;CAC5C,MAAM,WAAW,IAAI,eAAe;CACpC,MAAM,UAAU,IAAI,WAAW;CAC/B,MAAM,WAAW,IAAI,YAAY,IAAI,iBAAiB;CACtD,MAAM,WAAW,iBAAiB;CAClC,MAAM,EAAE,KAAK,SAAS,iBAAoC,iBAAiB,QAAQ;CAInF,MAAM,cAAc,qBAAqB;EACvC,MAAM,KAAK,KAAK;EAChB,IAAI,OAAO,MAAM;GAGf,aAAa,IAAI,iBAAiB,QAAQ;GAC1C,aAAa,IAAI,gBAAgB,OAAO;GACxC,aAAa,IAAI,iBAAiB,QAAQ;EAC5C;EACA,IAAI,cAAc,IAAI,QAAQ;CAChC,CAAC;CACD,sBAAsB;EACpB,YAAY;CACd,GAAG,CAAC,CAAC;CAIL,OAAO,UAA8D;EACnE,gBAAgB;EAChB;EACA,OAAA;GALiC;GAAO;GAAU;GAAS;EAKvD;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ;GACA,UAAU,KAAA;GAEV,UAAU;GACV,iBAAiB,SAAS,QAAQ;GAClC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;EACpC;EACA;CACF,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/select/select-root.d.mts

@@ -0,0 +1,68 @@
+import { ActionDetails, ChangeAction, ChangeReason, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/select/select-root.d.ts
+/** Details passed as the second argument of `valueChangeAction`. */
+export interface SelectValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user picked an option (pointer, keyboard, typeahead, or browser autofill,
+   * which the library cannot tell from a pick); `details.event` is the native `change` event.
+   * `"platform"`: the browser changed the value without a pick the library saw: a form reset
+   * (`details.event` is the `reset` event), or a pick before hydration / Firefox form-state
+   * restoration reconciled at mount (`details.event` is `undefined`).
+   */
+  readonly reason: ChangeReason;
+}
+export interface SelectRootState {
+  /** Optimistic value. Content rendered from it must not suspend. */
+  readonly value: string;
+  /** An action dispatched through this Select is in flight. */
+  readonly pending: boolean;
+  /** The `disabled` prop. */
+  readonly disabled: boolean;
+}
+export interface SelectRootProps extends Omit<ComponentPropsWithRef<"select">, "value" | "defaultValue" | "onChange" | "multiple" | "size" | "disabled" | "className" | "style" | "children"> {
+  /** Controlled value. `undefined` means uncontrolled. Use `""` for the placeholder option. */
+  value?: string;
+  /**
+   * Initial value in uncontrolled mode, and the value a form reset returns to (the latest prop is
+   * mirrored into the options' `defaultSelected`). When omitted, the browser's choice (an option
+   * whose value is `""`, else the first enabled option) is adopted at mount, without a dispatch,
+   * and is what a form reset returns to. Until a pick (or a platform change) sets the value,
+   * options that mount later without the adopted one (a Suspense fallback) adopt again.
+   */
+  defaultValue?: string;
+  /**
+   * Runs inside the Root's transition whenever the selected option changes. May be sync or async
+   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection
+   * back.
+   *
+   * In engines whose closed select changes the value on every arrow press (Firefox, Safari with
+   * native appearance), every press dispatches; the latest dispatch wins. A `setState` placed
+   * after your own `await` is not a Transition update; wrap it in `startTransition` (React
+   * limitation). Controlled mode is the way to veto a change.
+   */
+  valueChangeAction?: ChangeAction<string, SelectValueChangeDetails>;
+  /** Native `disabled`. Never set by the library while pending. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, SelectRootState>;
+  style?: StateValue<CSSProperties | undefined, SelectRootState>;
+  children?: StateValue<ReactNode, SelectRootState>;
+  /** Replace the rendered element. Must keep a `<select>`. */
+  render?: RenderProp<ComponentPropsWithRef<"select">, SelectRootState>;
+}
+/**
+ * The `<select>` itself: owns the value, the transition, the form-reset listener, the mount
+ * reconciliation and the re-apply of late options (design/components/select.md 15.2). Renders
+ * `value={optimistic}`: react-dom restores a controlled select to its props after every event,
+ * and only the sync-lane optimistic value survives that restore.
+ *
+ * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;
+ * inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`
+ * (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.
+ */
+export declare function SelectRoot({ value, defaultValue, valueChangeAction, disabled: disabledProp, className, style, children, render, ...rest }: SelectRootProps): import("react").JSX.Element;
+export declare namespace SelectRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=select-root.d.mts.map

package/dist/select/select-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-root.d.mts","names":[],"sources":["../../src/select/select-root.tsx"],"mappings":";;;;iBA2BiB,iCAAiC;;;;;;;;WAQvC,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,wBAAwB,KACvC;;EAYA;;;;;;;;EAQA;;;;;;;;;;;EAWA,oBAAoB,qBAAqB;;EAEzC;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAavC,aACd,OACA,cACA,mBACA,UAAU,cACV,WACA,OACA,UACA,WACG,QACF,kCAAe,IAAA;yBAVF"}

package/dist/select/select-root.mjs

@@ -0,0 +1,114 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { fieldInputProps, useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
+import { SelectContext } from "./select-context.mjs";
+import { useSelectPartRef } from "./select-dom.mjs";
+import { useNativeSelectValue } from "../internal/use-native-select-value.mjs";
+import { useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/select/select-root.tsx
+/**
+* The `<select>` itself: owns the value, the transition, the form-reset listener, the mount
+* reconciliation and the re-apply of late options (design/components/select.md 15.2). Renders
+* `value={optimistic}`: react-dom restores a controlled select to its props after every event,
+* and only the sync-lane optimistic value survives that restore.
+*
+* Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;
+* inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`
+* (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.
+*/
+function SelectRoot({ value, defaultValue, valueChangeAction, disabled: disabledProp, className, style, children, render, ...rest }) {
+	const { ref: libraryRef, node: selectRef } = useSelectPartRef("Select.Root", "select");
+	const field = useFieldControl({
+		labelable: true,
+		name: rest.name,
+		disabled: disabledProp,
+		required: rest.required,
+		id: rest.id,
+		component: "Select.Root"
+	});
+	const disabled = field.disabled;
+	const rootRef = useMergedRef(libraryRef, field.ref);
+	const { optimistic, pending, dispatch, latestInFlight, adopt } = useControllableAction({
+		controlled: value,
+		defaultValue,
+		initialValue: "",
+		action: valueChangeAction,
+		transitionTypes: () => transitionTypes("select"),
+		warn: {
+			component: "Select.Root",
+			prop: "value"
+		}
+	});
+	useFieldValueChange(optimistic);
+	const [mountValue] = useState(value);
+	const resetTarget = value === void 0 ? defaultValue : mountValue ?? value;
+	const established = useRef(false);
+	const dispatchChange = (next, details) => {
+		established.current = true;
+		dispatch(next, details);
+	};
+	const { optionMounted } = useNativeSelectValue({
+		ref: selectRef,
+		optimistic,
+		latestInFlight,
+		resetTarget,
+		adoptDefault: value === void 0 && defaultValue === void 0 ? {
+			adopt,
+			established: () => established.current
+		} : void 0,
+		onPlatformChange: (next, event) => dispatchChange(next, createActionDetails(event, { reason: "platform" }))
+	});
+	const context = useMemo(() => ({
+		optimistic,
+		pending,
+		disabled,
+		groupDisabled: false,
+		optionMounted
+	}), [
+		optimistic,
+		pending,
+		disabled,
+		optionMounted
+	]);
+	const element = useRender({
+		defaultElement: "select",
+		render,
+		state: {
+			value: optimistic,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			...fieldInputProps(field),
+			value: optimistic,
+			disabled,
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onChange: (event) => {
+				if (disabled) return;
+				const next = event.currentTarget.value;
+				if (next === optimistic) return;
+				dispatchChange(next, createActionDetails(event.nativeEvent, { reason: "activate" }));
+			}
+		},
+		ref: rootRef
+	});
+	return /* @__PURE__ */ jsx(SelectContext, {
+		value: context,
+		children: element
+	});
+}
+SelectRoot.displayName = "SelectRoot";
+//#endregion
+export { SelectRoot };
+
+//# sourceMappingURL=select-root.mjs.map

package/dist/select/select-root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-root.mjs","names":[],"sources":["../../src/select/select-root.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo, useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeSelectValue } from \"../internal/use-native-select-value.js\";\nimport {\n  fieldInputProps,\n  useFieldControl,\n  useFieldValueChange,\n  useMergedRef,\n} from \"../internal/use-field-control.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext } from \"./select-context.js\";\nimport type { SelectContextValue } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface SelectValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user picked an option (pointer, keyboard, typeahead, or browser autofill,\n   * which the library cannot tell from a pick); `details.event` is the native `change` event.\n   * `\"platform\"`: the browser changed the value without a pick the library saw: a form reset\n   * (`details.event` is the `reset` event), or a pick before hydration / Firefox form-state\n   * restoration reconciled at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SelectRootState {\n  /** Optimistic value. Content rendered from it must not suspend. */\n  readonly value: string;\n  /** An action dispatched through this Select is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface SelectRootProps extends Omit<\n  ComponentPropsWithRef<\"select\">,\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"multiple\"\n  | \"size\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled value. `undefined` means uncontrolled. Use `\"\"` for the placeholder option. */\n  value?: string;\n  /**\n   * Initial value in uncontrolled mode, and the value a form reset returns to (the latest prop is\n   * mirrored into the options' `defaultSelected`). When omitted, the browser's choice (an option\n   * whose value is `\"\"`, else the first enabled option) is adopted at mount, without a dispatch,\n   * and is what a form reset returns to. Until a pick (or a platform change) sets the value,\n   * options that mount later without the adopted one (a Suspense fallback) adopt again.\n   */\n  defaultValue?: string;\n  /**\n   * Runs inside the Root's transition whenever the selected option changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * In engines whose closed select changes the value on every arrow press (Firefox, Safari with\n   * native appearance), every press dispatches; the latest dispatch wins. A `setState` placed\n   * after your own `await` is not a Transition update; wrap it in `startTransition` (React\n   * limitation). Controlled mode is the way to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string, SelectValueChangeDetails>;\n  /** Native `disabled`. Never set by the library while pending. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<select>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"select\">, SelectRootState>;\n}\n\n/**\n * The `<select>` itself: owns the value, the transition, the form-reset listener, the mount\n * reconciliation and the re-apply of late options (design/components/select.md 15.2). Renders\n * `value={optimistic}`: react-dom restores a controlled select to its props after every event,\n * and only the sync-lane optimistic value survives that restore.\n *\n * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;\n * inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`\n * (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.\n */\nexport function SelectRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  disabled: disabledProp,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectRootProps) {\n  const { ref: libraryRef, node: selectRef } = useSelectPartRef<HTMLSelectElement>(\n    \"Select.Root\",\n    \"select\",\n  );\n  // Inside a Field.Root (design/components/field-form.md 7.2) the Field owns the id and the ARIA\n  // wiring, and `name` / `required` / `disabled` default from it.\n  const field = useFieldControl({\n    labelable: true,\n    name: rest.name,\n    disabled: disabledProp,\n    required: rest.required,\n    id: rest.id,\n    component: \"Select.Root\",\n  });\n  const disabled = field.disabled;\n  const rootRef = useMergedRef<HTMLSelectElement>(libraryRef, field.ref);\n\n  const { optimistic, pending, dispatch, latestInFlight, adopt } = useControllableAction<\n    string,\n    SelectValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: \"\",\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"select\"),\n    warn: { component: \"Select.Root\", prop: \"value\" },\n  });\n  // Inside a Field: a value React writes with no event (a rejected action rolling back, a\n  // controlled change) re-reads validity and `validate` after the commit.\n  useFieldValueChange(optimistic);\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: the browser's\n  // first-option default is adopted (design decision 3, product-owner decision 4).\n\n  // Controlled: the mount-time value is the reset target (conventions 3.8 rule 6). Neither\n  // `value` nor `defaultValue`: the value adopted at mount, chosen inside the hook.\n  const [mountValue] = useState(value);\n  const resetTarget = value === undefined ? defaultValue : (mountValue ?? value);\n\n  // Any dispatch, a pick or a platform change, ends the adoption of the browser's default.\n  const established = useRef(false);\n  const dispatchChange = (next: string, details: SelectValueChangeDetails) => {\n    established.current = true;\n    dispatch(next, details);\n  };\n\n  const { optionMounted } = useNativeSelectValue({\n    ref: selectRef,\n    optimistic,\n    latestInFlight,\n    resetTarget,\n    adoptDefault:\n      value === undefined && defaultValue === undefined\n        ? { adopt, established: () => established.current }\n        : undefined,\n    onPlatformChange: (next, event) =>\n      dispatchChange(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  // Memoised (#48): every member is a state value, a prop or a stable callback.\n  const context = useMemo<SelectContextValue>(\n    () => ({ optimistic, pending, disabled, groupDisabled: false, optionMounted }),\n    [optimistic, pending, disabled, optionMounted],\n  );\n  const state: SelectRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"select\">, SelectRootState>({\n    defaultElement: \"select\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...fieldInputProps(field),\n      value: optimistic,\n      disabled,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLSelectElement>) => {\n        // A natively disabled select fires no change; this covers `render` elements.\n        if (disabled) return;\n        const next = event.currentTarget.value;\n        // No-op rule against the optimistic value (conventions 2.3, design 4.2).\n        if (next === optimistic) return;\n        dispatchChange(next, createActionDetails(event.nativeEvent, { reason: \"activate\" }));\n      },\n    },\n    ref: rootRef,\n  });\n\n  return <SelectContext value={context}>{element}</SelectContext>;\n}\n\nSelectRoot.displayName = \"SelectRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAgB,WAAW,EACzB,OACA,cACA,mBACA,UAAU,cACV,WACA,OACA,UACA,QACA,GAAG,QACe;CAClB,MAAM,EAAE,KAAK,YAAY,MAAM,cAAc,iBAC3C,eACA,QACF;CAGA,MAAM,QAAQ,gBAAgB;EAC5B,WAAW;EACX,MAAM,KAAK;EACX,UAAU;EACV,UAAU,KAAK;EACf,IAAI,KAAK;EACT,WAAW;CACb,CAAC;CACD,MAAM,WAAW,MAAM;CACvB,MAAM,UAAU,aAAgC,YAAY,MAAM,GAAG;CAErE,MAAM,EAAE,YAAY,SAAS,UAAU,gBAAgB,UAAU,sBAG/D;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,QAAQ;EAC/C,MAAM;GAAE,WAAW;GAAe,MAAM;EAAQ;CAClD,CAAC;CAGD,oBAAoB,UAAU;CAM9B,MAAM,CAAC,cAAc,SAAS,KAAK;CACnC,MAAM,cAAc,UAAU,KAAA,IAAY,eAAgB,cAAc;CAGxE,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,kBAAkB,MAAc,YAAsC;EAC1E,YAAY,UAAU;EACtB,SAAS,MAAM,OAAO;CACxB;CAEA,MAAM,EAAE,kBAAkB,qBAAqB;EAC7C,KAAK;EACL;EACA;EACA;EACA,cACE,UAAU,KAAA,KAAa,iBAAiB,KAAA,IACpC;GAAE;GAAO,mBAAmB,YAAY;EAAQ,IAChD,KAAA;EACN,mBAAmB,MAAM,UACvB,eAAe,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CAC3E,CAAC;CAGD,MAAM,UAAU,eACP;EAAE;EAAY;EAAS;EAAU,eAAe;EAAO;CAAc,IAC5E;EAAC;EAAY;EAAS;EAAU;CAAa,CAC/C;CAGA,MAAM,UAAU,UAA4D;EAC1E,gBAAgB;EAChB;EACA,OAAA;GAL+B,OAAO;GAAY;GAAS;EAKvD;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG,gBAAgB,KAAK;GACxB,OAAO;GACP;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAA0C;IAEnD,IAAI,UAAU;IACd,MAAM,OAAO,MAAM,cAAc;IAEjC,IAAI,SAAS,YAAY;IACzB,eAAe,MAAM,oBAAoB,MAAM,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC;GACrF;EACF;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA;CAAuB,CAAA;AAChE;AAEA,WAAW,cAAc"}

package/dist/select/select-separator.d.mts

@@ -0,0 +1,20 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { SelectRootState } from "./select-root.mjs";
+import { CSSProperties, ComponentPropsWithRef } from "react";
+//#region src/select/select-separator.d.ts
+export interface SelectSeparatorProps extends Omit<ComponentPropsWithRef<"hr">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, SelectRootState>;
+  style?: StateValue<CSSProperties | undefined, SelectRootState>;
+  /** Replace the rendered element. */
+  render?: RenderProp<ComponentPropsWithRef<"hr">, SelectRootState>;
+}
+/**
+ * A decorative `<hr>` between options or groups (exposed as `separator` by Chromium's
+ * customizable select; a line in native pickers). Owns no keys.
+ */
+export declare function SelectSeparator({ className, style, render, ...rest }: SelectSeparatorProps): import("react").ReactNode;
+export declare namespace SelectSeparator {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=select-separator.d.mts.map

package/dist/select/select-separator.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-separator.d.mts","names":[],"sources":["../../src/select/select-separator.tsx"],"mappings":";;;;iBAOiB,6BAA6B,KAC5C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,6BAA6B;;;;;;wBAOnC,kBAAkB,WAAW,OAAO,WAAW,QAAQ,uCAAoB;yBAA3E"}

package/dist/select/select-separator.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useSelectContext } from "./select-context.mjs";
+//#region src/select/select-separator.tsx
+/**
+* A decorative `<hr>` between options or groups (exposed as `separator` by Chromium's
+* customizable select; a line in native pickers). Owns no keys.
+*/
+function SelectSeparator({ className, style, render, ...rest }) {
+	const ctx = useSelectContext("Select.Separator");
+	const state = {
+		value: ctx.optimistic,
+		pending: ctx.pending,
+		disabled: ctx.disabled
+	};
+	return useRender({
+		defaultElement: "hr",
+		render,
+		state,
+		className,
+		style,
+		children: void 0,
+		props: rest
+	});
+}
+SelectSeparator.displayName = "SelectSeparator";
+//#endregion
+export { SelectSeparator };
+
+//# sourceMappingURL=select-separator.mjs.map

package/dist/select/select-separator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-separator.mjs","names":[],"sources":["../../src/select/select-separator.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useSelectContext } from \"./select-context.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nexport interface SelectSeparatorProps extends Omit<\n  ComponentPropsWithRef<\"hr\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  /** Replace the rendered element. */\n  render?: RenderProp<ComponentPropsWithRef<\"hr\">, SelectRootState>;\n}\n\n/**\n * A decorative `<hr>` between options or groups (exposed as `separator` by Chromium's\n * customizable select; a line in native pickers). Owns no keys.\n */\nexport function SelectSeparator({ className, style, render, ...rest }: SelectSeparatorProps) {\n  const ctx = useSelectContext(\"Select.Separator\");\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  return useRender<ComponentPropsWithRef<\"hr\">, SelectRootState>({\n    defaultElement: \"hr\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    props: rest,\n  });\n}\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"mappings":";;;;;;;;AAqBA,SAAgB,gBAAgB,EAAE,WAAW,OAAO,QAAQ,GAAG,QAA8B;CAC3F,MAAM,MAAM,iBAAiB,kBAAkB;CAC/C,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,OAAO,UAAwD;EAC7D,gBAAgB;EAChB;EACA;EACA;EACA;EACA,UAAU,KAAA;EACV,OAAO;CACT,CAAC;AACH;AAEA,gBAAgB,cAAc"}