@typed/ui 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/Select.js

@@ -0,0 +1,407 @@
+/**
+ * Select keeps popover visibility, active option, and selected value separate. A native button
+ * targets manual-popover listbox content; keyboard movement and typeahead update active state
+ * before selection closes the popover.
+ *
+ * @remarks
+ * The module keeps policy, state transitions, and DOM rendering separable so applications can use
+ * the state and pure operations without mounting UI, or supply custom hosts without replacing native
+ * events and browser-owned focus.
+ *
+ * @since 1.0.0
+ * @category modules
+ * @packageDocumentation
+ */
+import * as Effect from "effect/Effect";
+import * as Scope from "effect/Scope";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { EventHandler, html, } from "@typed/template";
+import * as Collection from "./Collection.js";
+import * as Composite from "./Composite.js";
+import * as Dom from "./Dom.js";
+import * as NativePopover from "./NativePopover.js";
+const invokers = new WeakMap();
+/**
+ * Effect Schema used by makeState to encode, decode, and hydrate Select state.
+ *
+ * @remarks
+ * ## Why
+ *
+ * A public schema makes hydration and serialized state use the same runtime validation as direct
+ * construction.
+ *
+ * ## Ownership and lifetime
+ *
+ * This declaration is data or schema metadata and acquires no resources.
+ *
+ * @example
+ * ```ts
+ * import * as Schema from "effect/Schema";
+ * import * as Select from "@typed/ui/Select";
+ *
+ * const decodeState = Schema.decodeUnknownEffect(Select.StateSchema);
+ * ```
+ * @since 1.0.0
+ * @category schemas
+ */
+export const StateSchema = Schema.Struct({
+    id: Schema.String,
+    value: Schema.NullOr(Schema.String),
+    open: Schema.Boolean,
+    activeId: Schema.NullOr(Schema.String),
+    orientation: Schema.Literals(["vertical"]),
+    loop: Schema.Boolean,
+    rtl: Schema.Boolean,
+    virtualFocus: Schema.Boolean,
+});
+/**
+ * Creates hydrated Select state. The caller supplies id; value and activeId default null, open
+ * false, and loop true.
+ *
+ * @remarks
+ * ## Why
+ *
+ * State and collection ownership can be composed and tested independently from any renderer.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Effect creates the RefSubject when run. That state is renderer-independent;
+ * collection registrations belong to the separate Scope that runs register or ref, not to state
+ * creation.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Select from "@typed/ui/Select";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const state = yield* Select.makeState({ id: "timezone" });
+ *     const collection = yield* Select.makeCollection();
+ *     return { state: yield* state, collection: yield* collection };
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, {
+        id: initial.id,
+        value: initial.value ?? null,
+        open: initial.open ?? false,
+        activeId: initial.activeId ?? null,
+        orientation: "vertical",
+        loop: initial.loop ?? true,
+        rtl: false,
+        virtualFocus: false,
+    });
+}
+/**
+ * Creates a scoped Collection for Select items.
+ *
+ * @remarks
+ * ## Why
+ *
+ * State and collection ownership can be composed and tested independently from any renderer.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
+ * owned by the Scope that runs register, independently of this construction Effect.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Select from "@typed/ui/Select";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const collection = yield* Select.makeCollection();
+ *     return yield* collection;
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export const makeCollection = Collection.makeState;
+/**
+ * Sets selected value and active id, then closes the popover.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The operation exposes Select's transition directly so callers can compose it in Effect programs
+ * and native event handlers.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Effect performs the update or DOM side effect only when run, preserves the declared
+ * error and service channels, and retains no resources after completion.
+ *
+ * ## Example
+ *
+ * Import with `import { select } from "@typed/ui/Select";` Extend the [Select.makeState runnable
+ * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Inside the linked Effect program invoke
+ * `yield* select(state, "utc", "UTC")`, then read state to observe selection and active focus
+ * update together while the popup closes.
+ * @since 1.0.0
+ * @category combinators
+ */
+export function select(state, id, value) {
+    return RefSubject.update(state, (current) => ({ ...current, activeId: id, value, open: false }));
+}
+function move(state, collection, direction) {
+    return Composite.moveAndFocus({ state, collection }, direction);
+}
+function selectActive(state, collection) {
+    return Effect.gen(function* () {
+        const activeId = (yield* state).activeId;
+        const item = activeId === null ? undefined : (yield* collection).find((item) => item.id === activeId);
+        return item?.value === undefined ? yield* state : yield* select(state, item.id, item.value);
+    });
+}
+function triggerProps(options) {
+    const id = RefSubject.map(options.state, (state) => state.id);
+    const triggerId = RefSubject.map(options.state, (state) => `${state.id}-trigger`);
+    const open = RefSubject.map(options.state, (state) => state.open);
+    return () => ({
+        id: triggerId,
+        type: "button",
+        popovertarget: id,
+        popovertargetaction: "toggle",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onkeydown: EventHandler.make((event) => {
+            if (event.key !== "ArrowDown")
+                return;
+            event.preventDefault();
+            Dom.currentTarget(event).click();
+        }),
+        ref: Dom.composeRefs(options.state, invokerRef(options.state)),
+    });
+}
+function invokerRef(state) {
+    return Effect.fn(function* (element) {
+        invokers.set(state, element);
+        const scope = yield* Effect.scope;
+        yield* Scope.addFinalizer(scope, Effect.sync(() => {
+            if (invokers.get(state) === element)
+                invokers.delete(state);
+        }));
+    });
+}
+/**
+ * Renders the native button that targets listbox popover content and opens it on ArrowDown.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component applies the family behavior while leaving callers free to supply a custom host
+ * through the shared DOM boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * ## Example
+ *
+ * Import with `import { Trigger } from "@typed/ui/Select";` Extend the [Select.makeState runnable
+ * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Replace the linked program's final
+ * snapshot read with `Trigger({ state, content: "Choose timezone" })`; render that Fx before the
+ * same Scope closes.
+ * @since 1.0.0
+ * @category components
+ */
+export function Trigger(options, host) {
+    return Dom.renderHost()(options, host, triggerProps(options), options.content, (props, content) => html `<button ...${props}>${content}</button>`);
+}
+/**
+ * Consumer-facing alias of the canonical Select component with identical behavior and lifetime.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component applies the family behavior while leaving callers free to supply a custom host
+ * through the shared DOM boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * The alias acquires nothing. Rendering it has exactly the canonical component's Scope and DOM
+ * ownership contract.
+ *
+ * ## Example
+ *
+ * Import with `import { Select } from "@typed/ui/Select";` Extend the [Select.makeState runnable
+ * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Replace the linked program's final
+ * snapshot read with `Select({ state, content: "Choose timezone" })`; render that Fx before the
+ * same Scope closes.
+ * @since 1.0.0
+ * @category components
+ */
+export const Select = Trigger;
+function contentProps(options) {
+    const id = RefSubject.map(options.state, (state) => state.id);
+    const triggerId = RefSubject.map(options.state, (state) => `${state.id}-trigger`);
+    let typeahead = { value: "", updatedAt: 0 };
+    let restoreInvokerFocus = false;
+    const restoreFocus = Effect.gen(function* () {
+        if (!restoreInvokerFocus)
+            return;
+        restoreInvokerFocus = false;
+        yield* Composite.focusElement(invokers.get(options.state));
+    });
+    const onkeydown = options.collection === undefined
+        ? undefined
+        : EventHandler.make(Effect.fn(function* (event) {
+            const direction = Composite.keyMove(event, { orientation: "vertical" });
+            if (direction !== undefined) {
+                event.preventDefault();
+                yield* move(options.state, options.collection, direction);
+                return;
+            }
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                yield* selectActive(options.state, options.collection);
+                return;
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                restoreInvokerFocus = true;
+                yield* setOpen(options.state, false);
+                return;
+            }
+            const key = Composite.typeaheadKey(event);
+            if (key === null)
+                return;
+            typeahead = Composite.updateTypeaheadBuffer(typeahead, key, Date.now());
+            const activeId = Composite.typeaheadFrom(yield* options.collection, typeahead.value, (yield* options.state).activeId);
+            if (activeId === null)
+                return;
+            event.preventDefault();
+            yield* RefSubject.update(options.state, (state) => ({ ...state, activeId }));
+            yield* Composite.focusActive({ state: options.state, collection: options.collection });
+        }));
+    return () => ({
+        id,
+        role: "listbox",
+        "aria-labelledby": triggerId,
+        popover: "manual",
+        "aria-activedescendant": Composite.activeDescendant(options.state),
+        onkeydown,
+        ontoggle: EventHandler.make(Effect.fn(function* (event) {
+            const open = Dom.toggleState(event) === "open";
+            const current = yield* options.state;
+            if (current.open === open) {
+                if (!open)
+                    yield* restoreFocus;
+                return current;
+            }
+            const next = yield* RefSubject.update(options.state, (state) => ({ ...state, open }));
+            if (!open) {
+                yield* restoreFocus;
+                return next;
+            }
+            if (options.collection === undefined)
+                return next;
+            const item = (yield* options.collection).find((item) => item.value === next.value);
+            if (item === undefined)
+                return next;
+            const selected = yield* RefSubject.update(options.state, (state) => ({
+                ...state,
+                activeId: item.id,
+            }));
+            yield* Composite.focusActive({ state: options.state, collection: options.collection });
+            yield* Composite.scrollActive({ state: options.state, collection: options.collection });
+            return selected;
+        })),
+        ref: Dom.composeRefs(options.state, NativePopover.ref(options.state)),
+    });
+}
+/**
+ * Renders manual-popover listbox content and handles Arrow keys, Enter, Escape, and typeahead.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component applies the family behavior while leaving callers free to supply a custom host
+ * through the shared DOM boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * ## Example
+ *
+ * Import with `import { Content } from "@typed/ui/Select";` Extend the [Select.makeState runnable
+ * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Replace the linked program's final
+ * snapshot read with `Content({ state, content: "Timezones" })`; render that Fx before the same
+ * Scope closes.
+ * @since 1.0.0
+ * @category components
+ */
+export function Content(options, host) {
+    return Dom.renderHost()(options, host, contentProps(options), options.content, (props, content) => {
+        return html `<div ...${props}>${content}</div>`;
+    });
+}
+function optionProps(options) {
+    const selected = RefSubject.map(options.state, (state) => state.value === options.value);
+    const register = options.collection === undefined
+        ? undefined
+        : Collection.ref(options.collection, {
+            id: options.id,
+            value: options.value,
+            textValue: options.textValue ?? options.value,
+            disabled: options.disabled,
+        });
+    return () => ({
+        id: options.id,
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": options.disabled ?? false,
+        tabindex: Composite.tabIndex(options.state, options.id),
+        onclick: options.disabled === true ? Effect.void : select(options.state, options.id, options.value),
+        onfocus: options.disabled === true
+            ? Effect.void
+            : RefSubject.update(options.state, (state) => ({ ...state, activeId: options.id })),
+        ref: Dom.composeRefs(register, options.ref),
+    });
+}
+/**
+ * Renders and optionally registers a selectable option; focus updates activeId and click selects
+ * unless disabled.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component applies the family behavior while leaving callers free to supply a custom host
+ * through the shared DOM boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * ## Example
+ *
+ * Import with `import { Option } from "@typed/ui/Select";` Extend the [Select.makeState runnable
+ * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Replace the linked program's final
+ * snapshot read with `Option({ state, id: "utc", value: "UTC", content: "UTC" })`; render that Fx
+ * before the same Scope closes.
+ * @since 1.0.0
+ * @category components
+ */
+export function Option(options, host) {
+    return Dom.renderHost()(options, host, optionProps(options), options.content, (props, content) => html `<div ...${props}>${content}</div>`);
+}
+function setOpen(state, open) {
+    return RefSubject.update(state, (current) => ({ ...current, open }));
+}

package/dist/Separator.d.ts

@@ -0,0 +1,54 @@
+import type * as Scope from "effect/Scope";
+import type { Fx } from "@typed/fx/Fx";
+import { type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/**
+ * Options for a non-interactive ARIA separator.
+ * @remarks
+ * ## Why
+ * Orientation communicates whether the visual division is horizontal or
+ * vertical without implying splitter interaction.
+ * ## Ownership and lifetime
+ * The model is inert; dynamic orientation follows the rendered Scope.
+ * @since 1.0.0
+ * @category models
+ */
+export interface SeparatorOptions extends Dom.HostOptions<HTMLDivElement> {
+    /** Separator orientation, defaulting to horizontal.
+     * @remarks
+     * ## Why
+     * Assistive technology uses orientation to interpret the division.
+     * ## Ownership and lifetime
+     * The dynamic attribute subscription ends with the component Scope.
+     * @since 1.0.0
+     * @category accessibility
+     */
+    readonly orientation?: Renderable.Any<"horizontal" | "vertical" | null | undefined>;
+}
+declare function internalProps<const Options extends SeparatorOptions>({ property, }: Dom.InternalPropsHelpers<Options>): {
+    role: string;
+    "aria-orientation": "horizontal" | Exclude<Dom.Property<Options, "orientation">, Dom.Nullish>;
+};
+type SeparatorInternalProps<Options extends SeparatorOptions> = ReturnType<typeof internalProps<Options>>;
+/**
+ * Renders a non-focusable element with `role="separator"`.
+ * @remarks
+ * ## Why
+ * This component expresses a semantic division. Use `WindowSplitter` when the
+ * separator changes pane sizes and therefore requires keyboard interaction.
+ * ## Ownership and lifetime
+ * Running the Fx owns its reactive attribute until the Effect Scope closes. A
+ * custom host must preserve the role and orientation.
+ * @example
+ * ```ts
+ * import { Separator } from "@typed/ui/Separator"
+ *
+ * const divider = Separator({ orientation: "vertical" })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export declare function Separator<const Options extends SeparatorOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SeparatorInternalProps<Options>>, "", Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+export {};
+//# sourceMappingURL=Separator.d.ts.map

package/dist/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/F,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,gBAAiB,SAAQ,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC;IACvE;;;;;;;;OAQG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,YAAY,GAAG,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACrF;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,gBAAgB,EAAE,EAC7D,QAAQ,GACT,EAAE,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;IACzB,IAAI;IAAe,kBAAkB;EAC/C;AAED,KAAK,sBAAsB,CAAC,OAAO,SAAS,gBAAgB,IAAI,UAAU,CACxE,OAAO,aAAa,CAAC,OAAO,CAAC,CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CACvB,KAAK,CAAC,OAAO,SAAS,gBAAgB,EACtC,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAErC,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAC/F,EAAE,CACH,WAAW,EACX,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,EAChC,UAAU,CAAC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,CACnE,CAQA"}

package/dist/Separator.js

@@ -0,0 +1,26 @@
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+function internalProps({ property, }) {
+    return { role: "separator", "aria-orientation": property("orientation", "horizontal") };
+}
+/**
+ * Renders a non-focusable element with `role="separator"`.
+ * @remarks
+ * ## Why
+ * This component expresses a semantic division. Use `WindowSplitter` when the
+ * separator changes pane sizes and therefore requires keyboard interaction.
+ * ## Ownership and lifetime
+ * Running the Fx owns its reactive attribute until the Effect Scope closes. A
+ * custom host must preserve the role and orientation.
+ * @example
+ * ```ts
+ * import { Separator } from "@typed/ui/Separator"
+ *
+ * const divider = Separator({ orientation: "vertical" })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function Separator(options, host) {
+    return Dom.renderHost()(options, host, internalProps, "", (props) => html `<div ...${props}></div>`);
+}

package/dist/Slider.d.ts

@@ -0,0 +1,188 @@
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { EventHandler, type Renderable } from "@typed/template";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/** Current renderer-independent slider value.
+ * @remarks
+ * ## Why
+ * Value logic remains testable without mounting a range input.
+ * ## Ownership and lifetime
+ * Plain state is resource-free; RefSubject ownership is Scope-based.
+ * @since 1.0.0
+ * @category state
+ */
+export interface State {
+    /** Finite value reflected by the native input.
+     * @remarks
+     * ## Why
+     * A single numeric source prevents state and DOM drift.
+     * ## Ownership and lifetime
+     * Plain data acquires no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly value: number;
+}
+/** Initial slider value.
+ * @remarks
+ * ## Why
+ * Explicit state gives SSR and hydration the same numeric snapshot.
+ * ## Ownership and lifetime
+ * Configuration is inert.
+ * @since 1.0.0
+ * @category state
+ */
+export interface InitialState {
+    /** Finite initial value.
+     * @remarks
+     * ## Why
+     * It seeds the synchronized input state.
+     * ## Ownership and lifetime
+     * Plain data retains no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly value: number;
+}
+/** Schema for slider hydration state.
+ * @remarks
+ * ## Why
+ * Finite validation prevents invalid serialized range values.
+ * ## Ownership and lifetime
+ * The immutable schema acquires no resources.
+ * @since 1.0.0
+ * @category schemas
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly value: Schema.Finite;
+}>;
+/** Creates hydrated slider state.
+ * @remarks
+ * ## Why
+ * State can be composed and tested independently of the renderer.
+ * ## Ownership and lifetime
+ * The calling Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Slider from "@typed/ui/Slider"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Slider.makeState({ value: 50 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly value: number;
+}, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
+/** Updates the synchronized slider value.
+ * @remarks
+ * ## Why
+ * An explicit Effect transition preserves RefSubject failures and services.
+ * ## Ownership and lifetime
+ * It uses the existing state lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Slider from "@typed/ui/Slider"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Slider.makeState({ value: 25 })
+ *   yield* Slider.setValue(state, 50)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export declare function setValue<E, R>(state: RefSubject.RefSubject<State, E, R>, value: number): Effect.Effect<State, E, R>;
+/** Options for a native range input.
+ * @remarks
+ * ## Why
+ * Native range semantics provide keyboard and accessibility behavior while
+ * Typed synchronizes renderer-independent state.
+ * ## Ownership and lifetime
+ * Options are inert; the mounted component owns subscriptions by Scope.
+ * @since 1.0.0
+ * @category models
+ */
+export interface SliderOptions extends Dom.HostOptions<HTMLInputElement> {
+    /** Hydrated state synchronized to the input.
+     * @remarks
+     * ## Why
+     * One source serves SSR, UI, and state-only tests.
+     * ## Ownership and lifetime
+     * The component borrows state and subscribes only while mounted.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /** Native minimum value.
+     * @remarks
+     * ## Why
+     * The platform uses this bound for keyboard and constraint behavior.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly min?: Renderable.Any<number | null | undefined>;
+    /** Native maximum value.
+     * @remarks
+     * ## Why
+     * The platform uses this bound for keyboard and constraint behavior.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly max?: Renderable.Any<number | null | undefined>;
+    /** Native step value or `"any"`.
+     * @remarks
+     * ## Why
+     * Step semantics remain delegated to the input element.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly step?: Renderable.Any<number | "any" | null | undefined>;
+}
+declare function internalProps<const Options extends SliderOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly type: "range";
+    readonly value: RefSubject.Computed<number, Schema.SchemaError, never>;
+    readonly ".value": RefSubject.Computed<string, Schema.SchemaError, never>;
+    readonly min: Exclude<Dom.Property<Options, "min">, Dom.Nullish> | undefined;
+    readonly max: Exclude<Dom.Property<Options, "max">, Dom.Nullish> | undefined;
+    readonly step: Exclude<Dom.Property<Options, "step">, Dom.Nullish> | undefined;
+    readonly oninput: EventHandler.EventHandler<Event, Schema.SchemaError, never>;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type SliderInternalProps<Options extends SliderOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
+/** Renders a native range input synchronized with hydrated state.
+ * @remarks
+ * ## Why
+ * Browser pointer, keyboard, constraints, and accessibility remain intact;
+ * input events update the same RefSubject consumed elsewhere.
+ * ## Ownership and lifetime
+ * Running the Fx owns native listeners and subscriptions in its Scope. A
+ * custom host must preserve type, value, range props, and the hydration ref.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Slider from "@typed/ui/Slider"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Slider.makeState({ value: 50 })
+ *   return Slider.Slider({ state, min: 0, max: 100 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export declare function Slider<const Options extends SliderOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SliderInternalProps<Options>>, "", Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+export {};
+//# sourceMappingURL=Slider.d.ts.map

package/dist/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAQ,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;;EAA0C,CAAC;AAEnE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,YAAY;;2EAE9C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IACtE;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;;;;;OAQG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;;;;;OAQG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;;;;;OAQG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACnE;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,OAAO,EAAE,OAAO,kBACpD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;aAEnD,IAAI,EAAE,OAAO;aACb,KAAK;aACL,QAAQ;aACR,GAAG;aACH,GAAG;aACH,IAAI;aACJ,OAAO;aAKP,GAAG;EAER;AACD,KAAK,mBAAmB,CAAC,OAAO,SAAS,aAAa,IAAI,UAAU,CAClE,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAC/F,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,0DAW9F"}