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

package/dist/Switch.d.ts

@@ -0,0 +1,187 @@
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { type Renderable } from "@typed/template";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/** Current renderer-independent switch state.
+ * @remarks
+ * ## Why
+ * The boolean can be tested and transformed without mounting a button.
+ * ## Ownership and lifetime
+ * Plain state retains no resources; its RefSubject owns updates by Scope.
+ * @since 1.0.0
+ * @category state
+ */
+export interface State {
+    /** Whether the switch is on.
+     * @remarks
+     * ## Why
+     * This value drives the required `aria-checked` state.
+     * ## Ownership and lifetime
+     * Plain data acquires no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly checked: boolean;
+}
+/** Optional initial switch state.
+ * @remarks
+ * ## Why
+ * Omission provides a deterministic off state for SSR and clients.
+ * ## Ownership and lifetime
+ * Configuration is inert.
+ * @since 1.0.0
+ * @category state
+ */
+export interface InitialState {
+    /** Initial on/off value, defaulting to false.
+     * @remarks
+     * ## Why
+     * The value seeds the serializable hydration contract.
+     * ## Ownership and lifetime
+     * It is copied into state and retains no resource.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly checked?: boolean;
+}
+/** Schema for switch hydration state.
+ * @remarks
+ * ## Why
+ * Shared encoding keeps SSR and browser state compatible.
+ * ## Ownership and lifetime
+ * The immutable schema acquires no resources.
+ * @since 1.0.0
+ * @category schemas
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly checked: Schema.Boolean;
+}>;
+/** Creates hydrated switch state independent of rendering.
+ * @remarks
+ * ## Why
+ * Domain code and tests can own the state while any renderer consumes it.
+ * ## Ownership and lifetime
+ * The caller's Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Switch.makeState({ checked: true })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export declare function makeState(initial?: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly checked: boolean;
+}, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
+/** Sets the switch on/off state.
+ * @remarks
+ * ## Why
+ * Explicit transitions keep state logic outside the renderer.
+ * ## Ownership and lifetime
+ * The Effect reuses the subject's lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Switch.makeState()
+ *   yield* Switch.setChecked(state, true)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export declare function setChecked<E, R>(state: RefSubject.RefSubject<State, E, R>, checked: boolean): Effect.Effect<State, E, R>;
+/** Atomically inverts the switch state.
+ * @remarks
+ * ## Why
+ * A RefSubject update prevents stale read-then-write transitions.
+ * ## Ownership and lifetime
+ * The Effect acquires no resource and uses the existing state Scope.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Switch.makeState({ checked: true })
+ *   yield* Switch.toggle(state)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export declare function toggle<E, R>(state: RefSubject.RefSubject<State, E, R>): Effect.Effect<State, E, R>;
+/** Options for an ARIA switch rendered as a native button.
+ * @remarks
+ * ## Why
+ * Button behavior supplies focus and keyboard activation while ARIA exposes
+ * the binary switch semantic.
+ * ## Ownership and lifetime
+ * Options are inert; rendering owns subscriptions and listeners by Scope.
+ * @since 1.0.0
+ * @category models
+ */
+export interface SwitchOptions extends Dom.HostOptions<HTMLButtonElement> {
+    /** Hydrated state synchronized with `aria-checked`.
+     * @remarks
+     * ## Why
+     * One source controls SSR, render output, and activation updates.
+     * ## Ownership and lifetime
+     * The component borrows the state; its originating Scope owns it.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /** Visible content and accessible name.
+     * @remarks
+     * ## Why
+     * A switch requires an accessible name, normally supplied by its content.
+     * ## Ownership and lifetime
+     * Dynamic content follows the component Scope.
+     * @since 1.0.0
+     * @category content
+     */
+    readonly content: Renderable.Any;
+}
+declare function internalProps<const Options extends SwitchOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly type: "button";
+    readonly role: "switch";
+    readonly "aria-checked": RefSubject.Computed<boolean, Schema.SchemaError, never>;
+    readonly "?disabled": false | Exclude<Dom.Property<Options, "disabled">, Dom.Nullish>;
+    readonly onclick: Effect.Effect<State, Schema.SchemaError, never>;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type SwitchInternalProps<Options extends SwitchOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
+/** Renders a button-backed ARIA switch.
+ * @remarks
+ * ## Why
+ * The component combines native button activation with a renderer-independent
+ * boolean state and real DOM click events.
+ * ## Ownership and lifetime
+ * Running the Fx owns listener/state subscriptions in its Effect Scope. A
+ * custom host must preserve button type, role, `aria-checked`, click handler,
+ * and the single hydration ref owner.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Switch.makeState()
+ *   return Switch.Switch({ state, content: "Notifications" })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export declare function Switch<const Options extends SwitchOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SwitchInternalProps<Options>>, Options["content"], Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+export {};
+//# sourceMappingURL=Switch.d.ts.map

package/dist/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.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,EAAQ,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,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,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;;EAA6C,CAAC;AAEtE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,YAAiB;;2EAEnD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAC7B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,OAAO,EAAE,OAAO,GACf,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,GACxC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,WAAW,CAAC,iBAAiB,CAAC;IACvE;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;;;;;OAQG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC;CAClC;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,OAAO,EAAE,OAAO,kBACpD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;aAEnD,IAAI,EAAE,QAAQ;aACd,IAAI,EAAE,QAAQ;aACd,cAAc;aACd,WAAW;aACX,OAAO;aACP,GAAG;EAER;AACD,KAAK,mBAAmB,CAAC,OAAO,SAAS,aAAa,IAAI,UAAU,CAClE,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;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,CACrB,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAC1D,OAAO,CAAC,SAAS,CAAC,EAClB,IAAI,CACL,0DAWF"}

package/dist/Switch.js

@@ -0,0 +1,116 @@
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+/** Schema for switch hydration state.
+ * @remarks
+ * ## Why
+ * Shared encoding keeps SSR and browser state compatible.
+ * ## Ownership and lifetime
+ * The immutable schema acquires no resources.
+ * @since 1.0.0
+ * @category schemas
+ */
+export const StateSchema = Schema.Struct({ checked: Schema.Boolean });
+/** Creates hydrated switch state independent of rendering.
+ * @remarks
+ * ## Why
+ * Domain code and tests can own the state while any renderer consumes it.
+ * ## Ownership and lifetime
+ * The caller's Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Switch.makeState({ checked: true })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeState(initial = {}) {
+    return RefSubject.hydrate(StateSchema, { checked: initial.checked ?? false });
+}
+/** Sets the switch on/off state.
+ * @remarks
+ * ## Why
+ * Explicit transitions keep state logic outside the renderer.
+ * ## Ownership and lifetime
+ * The Effect reuses the subject's lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Switch.makeState()
+ *   yield* Switch.setChecked(state, true)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function setChecked(state, checked) {
+    return RefSubject.update(state, (current) => ({ ...current, checked }));
+}
+/** Atomically inverts the switch state.
+ * @remarks
+ * ## Why
+ * A RefSubject update prevents stale read-then-write transitions.
+ * ## Ownership and lifetime
+ * The Effect acquires no resource and uses the existing state Scope.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Switch.makeState({ checked: true })
+ *   yield* Switch.toggle(state)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function toggle(state) {
+    return RefSubject.update(state, (current) => ({ ...current, checked: !current.checked }));
+}
+function internalProps(options) {
+    return ({ property }) => ({
+        type: "button",
+        role: "switch",
+        "aria-checked": RefSubject.map(options.state, (state) => state.checked),
+        "?disabled": property("disabled", false),
+        onclick: toggle(options.state),
+        ref: options.state,
+    });
+}
+/** Renders a button-backed ARIA switch.
+ * @remarks
+ * ## Why
+ * The component combines native button activation with a renderer-independent
+ * boolean state and real DOM click events.
+ * ## Ownership and lifetime
+ * Running the Fx owns listener/state subscriptions in its Effect Scope. A
+ * custom host must preserve button type, role, `aria-checked`, click handler,
+ * and the single hydration ref owner.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Switch.makeState()
+ *   return Switch.Switch({ state, content: "Notifications" })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function Switch(options, host) {
+    return Dom.renderHost()(options, host, internalProps(options), options.content, (props, content) => {
+        return html `<button ...${props}>${content}</button>`;
+    });
+}

package/dist/Tab.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Compatibility entrypoint for the Tabs API.
+ *
+ * @remarks
+ * Importing from `@typed/ui/Tab` exposes the same declarations as `@typed/ui/Tabs`; it does not
+ * create a second state model or renderer. Prefer whichever public specifier matches the surrounding
+ * codebase, and use one shared Tabs state across List, Tab, and Panel.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Tab from "@typed/ui/Tab";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const state = yield* Tab.makeState({ selectedId: "overview" });
+ *     return yield* state;
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category modules
+ * @packageDocumentation
+ */
+export * from "./Tabs.js";
+//# sourceMappingURL=Tab.d.ts.map

package/dist/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../src/Tab.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,cAAc,WAAW,CAAC"}

package/dist/Tab.js

@@ -0,0 +1,25 @@
+/**
+ * Compatibility entrypoint for the Tabs API.
+ *
+ * @remarks
+ * Importing from `@typed/ui/Tab` exposes the same declarations as `@typed/ui/Tabs`; it does not
+ * create a second state model or renderer. Prefer whichever public specifier matches the surrounding
+ * codebase, and use one shared Tabs state across List, Tab, and Panel.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Tab from "@typed/ui/Tab";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const state = yield* Tab.makeState({ selectedId: "overview" });
+ *     return yield* state;
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category modules
+ * @packageDocumentation
+ */
+export * from "./Tabs.js";