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

package/dist/WindowSplitter.d.ts

@@ -0,0 +1,376 @@
+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";
+/** Visual orientation of the separator between panes.
+ * @remarks
+ * ## Why
+ * A vertical separator adjusts with Left/Right; a horizontal separator adjusts
+ * with Up/Down, matching the axis perpendicular to the dividing line.
+ * ## Ownership and lifetime
+ * This pure type acquires no resources.
+ * @since 1.0.0
+ * @category models
+ */
+export type Orientation = "horizontal" | "vertical";
+/** Current value and keyboard policy for a window splitter.
+ * @remarks
+ * ## Why
+ * All range and collapse information remains renderer-independent and directly
+ * testable.
+ * ## Ownership and lifetime
+ * Plain state retains no resources; its hydrated RefSubject is Scope-owned.
+ * @since 1.0.0
+ * @category state
+ */
+export interface State {
+    /** Current pane size value.
+     * @remarks
+     * ## Why
+     * It drives `aria-valuenow` and keyboard adjustments.
+     * ## Ownership and lifetime
+     * Plain numeric data acquires no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly value: number;
+    /** Restore value used by `toggleCollapsed`.
+     * @remarks
+     * ## Why
+     * It starts at the initial clamped value. `toggleCollapsed` overwrites it only
+     * when collapsing from a non-minimum value, then reads it when restoring.
+     * Ordinary `setValue` and `adjust` calls do not update it.
+     * ## Ownership and lifetime
+     * Plain numeric data acquires no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly previousValue: number;
+    /** Inclusive minimum pane value.
+     * @remarks
+     * ## Why
+     * Updates clamp to this bound and Home jumps to it.
+     * ## Ownership and lifetime
+     * Plain numeric data acquires no resources.
+     * @since 1.0.0
+     * @category constraints
+     */
+    readonly min: number;
+    /** Inclusive maximum pane value.
+     * @remarks
+     * ## Why
+     * Updates clamp to this bound and End jumps to it.
+     * ## Ownership and lifetime
+     * Plain numeric data acquires no resources.
+     * @since 1.0.0
+     * @category constraints
+     */
+    readonly max: number;
+    /** Keyboard adjustment increment.
+     * @remarks
+     * ## Why
+     * Arrow keys require a deterministic application-defined change size. The
+     * state constructor does not enforce positivity; callers must provide a
+     * positive value for conventional keyboard direction.
+     * ## Ownership and lifetime
+     * Plain numeric data acquires no resources.
+     * @since 1.0.0
+     * @category constraints
+     */
+    readonly step: number;
+    /** Separator orientation and keyboard axis.
+     * @remarks
+     * ## Why
+     * The value drives both `aria-orientation` and valid arrow keys.
+     * ## Ownership and lifetime
+     * Plain data acquires no resources.
+     * @since 1.0.0
+     * @category accessibility
+     */
+    readonly orientation: Orientation;
+}
+/** Initial splitter range and keyboard configuration.
+ * @remarks
+ * ## Why
+ * Defaults give the widget a complete deterministic state before rendering.
+ * Callers remain responsible for `min <= max` and `step > 0`.
+ * ## Ownership and lifetime
+ * Configuration is inert.
+ * @since 1.0.0
+ * @category state
+ */
+export interface InitialState {
+    /** Initial pane size, clamped to min/max.
+     * @remarks
+     * ## Why
+     * Invalid out-of-range starts become a valid accessible value.
+     * ## Ownership and lifetime
+     * Plain data is copied into state.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly value: number;
+    /** Minimum value, defaulting to zero.
+     * @remarks
+     * ## Why
+     * It defines the collapsed boundary and Home result. Callers must ensure it is
+     * less than or equal to `max`; neither the schema nor constructor compares them.
+     * ## Ownership and lifetime
+     * Plain data is copied into state.
+     * @since 1.0.0
+     * @category constraints
+     */
+    readonly min?: number;
+    /** Maximum value, defaulting to one hundred.
+     * @remarks
+     * ## Why
+     * It defines the upper keyboard and ARIA bound. Callers must ensure it is
+     * greater than or equal to `min`; neither the schema nor constructor compares them.
+     * ## Ownership and lifetime
+     * Plain data is copied into state.
+     * @since 1.0.0
+     * @category constraints
+     */
+    readonly max?: number;
+    /** Arrow-key increment, defaulting to ten.
+     * @remarks
+     * ## Why
+     * The widget needs an explicit adjustment granularity. Callers must provide a
+     * positive value; `Schema.Finite` rejects infinities and NaN but accepts zero
+     * and negative numbers.
+     * ## Ownership and lifetime
+     * Plain data is copied into state.
+     * @since 1.0.0
+     * @category constraints
+     */
+    readonly step?: number;
+    /** Separator orientation, defaulting to vertical.
+     * @remarks
+     * ## Why
+     * Orientation determines ARIA output and arrow-key mapping.
+     * ## Ownership and lifetime
+     * Plain data is copied into state.
+     * @since 1.0.0
+     * @category accessibility
+     */
+    readonly orientation?: Orientation;
+}
+/** Schema for the structural splitter hydration state.
+ * @remarks
+ * ## Why
+ * It validates finite numeric fields and the orientation union. It does not
+ * enforce `min <= max`, a positive `step`, or any relationship among fields;
+ * callers must satisfy those semantic preconditions.
+ * ## 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;
+    readonly previousValue: Schema.Finite;
+    readonly min: Schema.Finite;
+    readonly max: Schema.Finite;
+    readonly step: Schema.Finite;
+    readonly orientation: Schema.Literals<readonly ["horizontal", "vertical"]>;
+}>;
+/** Creates hydrated splitter state and clamps the initial value.
+ * @remarks
+ * ## Why
+ * Pane sizing behavior can be composed and tested without mounting a separator.
+ * Callers must supply `min <= max` and `step > 0`; the constructor defaults
+ * omitted bounds/step but does not validate those relationships.
+ * ## Ownership and lifetime
+ * The calling Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* WindowSplitter.makeState({ value: 320, min: 180, max: 640 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly value: number;
+    readonly previousValue: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly orientation: "horizontal" | "vertical";
+}, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
+/** Sets and clamps the current splitter value.
+ * @remarks
+ * ## Why
+ * All callers share one transition bounded by the state's `min` and `max`.
+ * Correct range ordering remains a caller precondition. This operation does not
+ * change `previousValue`.
+ * ## Ownership and lifetime
+ * The Effect uses the existing RefSubject lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* WindowSplitter.makeState({ value: 320 })
+ *   yield* WindowSplitter.setValue(state, 400)
+ * })
+ * ```
+ * @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>;
+/** Adds a delta and clamps the resulting splitter value.
+ * @remarks
+ * ## Why
+ * Arrow-key behavior can be tested independently of DOM events. Correct range
+ * ordering remains a caller precondition, and this operation does not change
+ * `previousValue`.
+ * ## Ownership and lifetime
+ * The Effect uses the existing RefSubject lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* WindowSplitter.makeState({ value: 320, step: 24 })
+ *   yield* WindowSplitter.adjust(state, 24)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export declare function adjust<E, R>(state: RefSubject.RefSubject<State, E, R>, delta: number): Effect.Effect<State, E, R>;
+/** Collapses to min or restores the recorded collapse value.
+ * @remarks
+ * ## Why
+ * When the current value is not `min`, the operation records that exact value in
+ * `previousValue` and collapses. At `min`, it restores the stored value after
+ * clamping it to the current range. Other updates do not maintain a history.
+ * ## Ownership and lifetime
+ * The Effect updates existing state atomically and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* WindowSplitter.makeState({ value: 320 })
+ *   yield* WindowSplitter.toggleCollapsed(state)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export declare function toggleCollapsed<E, R>(state: RefSubject.RefSubject<State, E, R>): Effect.Effect<State, E, R>;
+/** Options for the focusable ARIA window splitter.
+ * @remarks
+ * ## Why
+ * The model connects renderer-independent sizing to its controlled pane and
+ * accessible range metadata. Its state must already satisfy `min <= max` and a
+ * positive `step`; the component does not repair invalid state.
+ * ## Ownership and lifetime
+ * Options are inert; rendering owns subscriptions/listeners by Scope.
+ * @since 1.0.0
+ * @category models
+ */
+export interface WindowSplitterOptions extends Dom.HostOptions<HTMLDivElement> {
+    /** Hydrated sizing state.
+     * @remarks
+     * ## Why
+     * One source drives keyboard updates and every ARIA range attribute.
+     * ## Ownership and lifetime
+     * The splitter borrows state; its original Scope owns it.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /** Id of the pane controlled by the splitter.
+     * @remarks
+     * ## Why
+     * `aria-controls` makes the resizing relationship explicit.
+     * ## Ownership and lifetime
+     * Dynamic values follow the component Scope.
+     * @since 1.0.0
+     * @category relationships
+     */
+    readonly primaryPaneId: Renderable.Any<string | null | undefined>;
+    /** Accessible name when no external label is supplied.
+     * @remarks
+     * ## Why
+     * A focusable separator needs a discoverable purpose.
+     * ## Ownership and lifetime
+     * Dynamic values follow the component Scope.
+     * @since 1.0.0
+     * @category accessibility
+     */
+    readonly label?: Renderable.Any<string | null | undefined>;
+    /** Human-readable value text supplementing the number.
+     * @remarks
+     * ## Why
+     * Pane sizes such as percentages or labels may be clearer than raw values.
+     * ## Ownership and lifetime
+     * Dynamic values follow the component Scope.
+     * @since 1.0.0
+     * @category accessibility
+     */
+    readonly valueText?: Renderable.Any<string | null | undefined>;
+    /** Whether keyboard adjustments are disabled.
+     * @remarks
+     * ## Why
+     * ARIA disabled state and handler behavior must agree.
+     * ## Ownership and lifetime
+     * Dynamic values follow the component Scope.
+     * @since 1.0.0
+     * @category accessibility
+     */
+    readonly disabled?: Renderable.Any<boolean | null | undefined>;
+}
+declare function internalProps<const Options extends WindowSplitterOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly role: "separator";
+    readonly tabindex: 0;
+    readonly "aria-orientation": RefSubject.Computed<Orientation, Schema.SchemaError, never>;
+    readonly "aria-valuenow": RefSubject.Computed<number, Schema.SchemaError, never>;
+    readonly "aria-valuemin": RefSubject.Computed<number, Schema.SchemaError, never>;
+    readonly "aria-valuemax": RefSubject.Computed<number, Schema.SchemaError, never>;
+    readonly "aria-controls": Exclude<Dom.Property<Options, "primaryPaneId">, Dom.Nullish> | undefined;
+    readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
+    readonly "aria-valuetext": Exclude<Dom.Property<Options, "valueText">, Dom.Nullish> | undefined;
+    readonly "aria-disabled": false | Exclude<Dom.Property<Options, "disabled">, Dom.Nullish>;
+    readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError, never>;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type WindowSplitterInternalProps<Options extends WindowSplitterOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
+/** Renders a focusable ARIA separator for resizing a pane.
+ * @remarks
+ * ## Why
+ * The component exposes native DOM focus/events and the ARIA window-splitter
+ * range contract: arrows adjust by step, Home/End reach bounds, and Enter
+ * collapses/restores. Disabled state leaves key events inert.
+ * ## Ownership and lifetime
+ * Running the returned Fx owns real key listeners, reactive ARIA attributes,
+ * and the hydration ref in its Effect Scope. A custom host must preserve role,
+ * tab index, range/relationship attributes, handler, and one hydration owner.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* WindowSplitter.makeState({ value: 320, min: 180, max: 640 })
+ *   return WindowSplitter.WindowSplitter({ state, primaryPaneId: "navigation" })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export declare function WindowSplitter<const Options extends WindowSplitterOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, WindowSplitterInternalProps<Options>>, "", Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+export {};
+//# sourceMappingURL=WindowSplitter.d.ts.map

package/dist/WindowSplitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowSplitter.d.ts","sourceRoot":"","sources":["../src/WindowSplitter.ts"],"names":[],"mappings":"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"}

package/dist/WindowSplitter.js

@@ -0,0 +1,222 @@
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { EventHandler, html } from "@typed/template";
+import * as Dom from "./Dom.js";
+/** Schema for the structural splitter hydration state.
+ * @remarks
+ * ## Why
+ * It validates finite numeric fields and the orientation union. It does not
+ * enforce `min <= max`, a positive `step`, or any relationship among fields;
+ * callers must satisfy those semantic preconditions.
+ * ## Ownership and lifetime
+ * The immutable schema acquires no resources.
+ * @since 1.0.0
+ * @category schemas
+ */
+export const StateSchema = Schema.Struct({
+    value: Schema.Finite,
+    previousValue: Schema.Finite,
+    min: Schema.Finite,
+    max: Schema.Finite,
+    step: Schema.Finite,
+    orientation: Schema.Literals(["horizontal", "vertical"]),
+});
+/** Creates hydrated splitter state and clamps the initial value.
+ * @remarks
+ * ## Why
+ * Pane sizing behavior can be composed and tested without mounting a separator.
+ * Callers must supply `min <= max` and `step > 0`; the constructor defaults
+ * omitted bounds/step but does not validate those relationships.
+ * ## Ownership and lifetime
+ * The calling Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* WindowSplitter.makeState({ value: 320, min: 180, max: 640 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeState(initial) {
+    const min = initial.min ?? 0;
+    const max = initial.max ?? 100;
+    const value = clamp(initial.value, min, max);
+    return RefSubject.hydrate(StateSchema, {
+        value,
+        previousValue: value,
+        min,
+        max,
+        step: initial.step ?? 10,
+        orientation: initial.orientation ?? "vertical",
+    });
+}
+/** Sets and clamps the current splitter value.
+ * @remarks
+ * ## Why
+ * All callers share one transition bounded by the state's `min` and `max`.
+ * Correct range ordering remains a caller precondition. This operation does not
+ * change `previousValue`.
+ * ## Ownership and lifetime
+ * The Effect uses the existing RefSubject lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* WindowSplitter.makeState({ value: 320 })
+ *   yield* WindowSplitter.setValue(state, 400)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function setValue(state, value) {
+    return RefSubject.update(state, (current) => ({
+        ...current,
+        value: clamp(value, current.min, current.max),
+    }));
+}
+/** Adds a delta and clamps the resulting splitter value.
+ * @remarks
+ * ## Why
+ * Arrow-key behavior can be tested independently of DOM events. Correct range
+ * ordering remains a caller precondition, and this operation does not change
+ * `previousValue`.
+ * ## Ownership and lifetime
+ * The Effect uses the existing RefSubject lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* WindowSplitter.makeState({ value: 320, step: 24 })
+ *   yield* WindowSplitter.adjust(state, 24)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function adjust(state, delta) {
+    return RefSubject.update(state, (current) => ({
+        ...current,
+        value: clamp(current.value + delta, current.min, current.max),
+    }));
+}
+/** Collapses to min or restores the recorded collapse value.
+ * @remarks
+ * ## Why
+ * When the current value is not `min`, the operation records that exact value in
+ * `previousValue` and collapses. At `min`, it restores the stored value after
+ * clamping it to the current range. Other updates do not maintain a history.
+ * ## Ownership and lifetime
+ * The Effect updates existing state atomically and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* WindowSplitter.makeState({ value: 320 })
+ *   yield* WindowSplitter.toggleCollapsed(state)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function toggleCollapsed(state) {
+    return RefSubject.update(state, (current) => current.value === current.min
+        ? { ...current, value: clamp(current.previousValue, current.min, current.max) }
+        : { ...current, previousValue: current.value, value: current.min });
+}
+function internalProps(options) {
+    const onkeydown = EventHandler.make(Effect.fn(function* (event) {
+        const current = yield* options.state;
+        if (Dom.currentTarget(event).getAttribute("aria-disabled") === "true") {
+            return current;
+        }
+        const delta = keyDelta(event.key, current);
+        if (delta !== undefined) {
+            event.preventDefault();
+            return yield* adjust(options.state, delta);
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            return yield* setValue(options.state, current.min);
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            return yield* setValue(options.state, current.max);
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            return yield* toggleCollapsed(options.state);
+        }
+        return current;
+    }));
+    return ({ property }) => ({
+        role: "separator",
+        tabindex: 0,
+        "aria-orientation": RefSubject.map(options.state, (state) => state.orientation),
+        "aria-valuenow": RefSubject.map(options.state, (state) => state.value),
+        "aria-valuemin": RefSubject.map(options.state, (state) => state.min),
+        "aria-valuemax": RefSubject.map(options.state, (state) => state.max),
+        "aria-controls": property("primaryPaneId", undefined),
+        "aria-label": property("label", undefined),
+        "aria-valuetext": property("valueText", undefined),
+        "aria-disabled": property("disabled", false),
+        onkeydown,
+        ref: options.state,
+    });
+}
+/** Renders a focusable ARIA separator for resizing a pane.
+ * @remarks
+ * ## Why
+ * The component exposes native DOM focus/events and the ARIA window-splitter
+ * range contract: arrows adjust by step, Home/End reach bounds, and Enter
+ * collapses/restores. Disabled state leaves key events inert.
+ * ## Ownership and lifetime
+ * Running the returned Fx owns real key listeners, reactive ARIA attributes,
+ * and the hydration ref in its Effect Scope. A custom host must preserve role,
+ * tab index, range/relationship attributes, handler, and one hydration owner.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as WindowSplitter from "@typed/ui/WindowSplitter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* WindowSplitter.makeState({ value: 320, min: 180, max: 640 })
+ *   return WindowSplitter.WindowSplitter({ state, primaryPaneId: "navigation" })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function WindowSplitter(options, host) {
+    return Dom.renderHost()(options, host, internalProps(options), "", (props) => {
+        return html `<div ...${props}></div>`;
+    });
+}
+function keyDelta(key, state) {
+    if (state.orientation === "vertical") {
+        if (key === "ArrowLeft")
+            return -state.step;
+        if (key === "ArrowRight")
+            return state.step;
+        return undefined;
+    }
+    if (key === "ArrowUp")
+        return -state.step;
+    if (key === "ArrowDown")
+        return state.step;
+    return undefined;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/dist/index.d.ts

@@ -1,3 +1,52 @@
+/**
+ * Typed UI: DOM-cooperative components built on Effect, Fx, Router, and Template.
+ *
+ * @remarks
+ * Namespace exports group related component families while direct exports expose
+ * the component constructor, HTTP SSR adapters, and navigation link. The DOM is
+ * the integration boundary: hosts receive real nodes, events, attributes, refs,
+ * and web-standard behavior. Running Effect Scopes own subscriptions and cleanup.
+ *
+ * @since 1.0.0
+ * @category ui
+ */
+export * as Button from "./Button.js";
+export * as Alert from "./Alert.js";
+export * as Checkbox from "./Checkbox.js";
+export * as Carousel from "./Carousel.js";
+export * as Collection from "./Collection.js";
+export * as Combobox from "./Combobox.js";
+export * from "./Component.js";
+export * as Composite from "./Composite.js";
+export * as Dialog from "./Dialog.js";
+export * as Disclosure from "./Disclosure.js";
+export * as Dom from "./Dom.js";
+export * as Focusable from "./Focusable.js";
+export * as Form from "./Form.js";
+export * as Group from "./Group.js";
+export * as Grid from "./Grid.js";
+export * as Heading from "./Heading.js";
+export * as Hovercard from "./Hovercard.js";
 export * from "./HttpRouter.js";
 export * from "./Link.js";
+export * as Listbox from "./Listbox.js";
+export * as Menu from "./Menu.js";
+export * as Menubar from "./Menubar.js";
+export * as Meter from "./Meter.js";
+export * as Role from "./Role.js";
+export * as RadioGroup from "./RadioGroup.js";
+export * as Popover from "./Popover.js";
+export * as Separator from "./Separator.js";
+export * as Select from "./Select.js";
+export * as Slider from "./Slider.js";
+export * as SpinButton from "./SpinButton.js";
+export * as Switch from "./Switch.js";
+export * as Tooltip from "./Tooltip.js";
+export * as Toolbar from "./Toolbar.js";
+export * as Tree from "./Tree.js";
+export * as TreeGrid from "./TreeGrid.js";
+export * as Tab from "./Tab.js";
+export * as Tabs from "./Tabs.js";
+export * as VisuallyHidden from "./VisuallyHidden.js";
+export * as WindowSplitter from "./WindowSplitter.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAC1C,cAAc,gBAAgB,CAAC;AAC/B,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,UAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AACtC,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,cAAc,MAAM,qBAAqB,CAAC"}