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

package/dist/Focusable.d.ts

@@ -0,0 +1,85 @@
+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 generic focusable host.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Some composite patterns need a focus target without adding a specialized
+ * widget role. These options make that choice explicit.
+ *
+ * ## Ownership and lifetime
+ *
+ * The model is inert; rendered dynamic values live for the component Scope.
+ *
+ * @since 1.0.0
+ * @category models
+ */
+export interface FocusableOptions extends Dom.HostOptions<HTMLDivElement> {
+    /** Content rendered inside the focusable host.
+     * @remarks
+     * ## Why
+     * Content remains independent of the focus behavior.
+     * ## Ownership and lifetime
+     * Dynamic content follows the rendered Scope and is released with it.
+     * @since 1.0.0
+     * @category content
+     */
+    readonly content: Renderable.Any;
+    /** Optional ARIA role for the focus target.
+     * @remarks
+     * ## Why
+     * Callers, not Typed, know which widget semantics apply.
+     * ## Ownership and lifetime
+     * The reflected value retains no resources.
+     * @since 1.0.0
+     * @category accessibility
+     */
+    readonly role?: Renderable.Any<string | null | undefined>;
+    /** Tab order value; defaults to zero.
+     * @remarks
+     * ## Why
+     * An explicit tab index makes a non-interactive host keyboard reachable.
+     * ## Ownership and lifetime
+     * Dynamic values are observed only for the component Scope.
+     * @since 1.0.0
+     * @category accessibility
+     */
+    readonly tabIndex?: Renderable.Any<number | null | undefined>;
+}
+declare function internalProps<const Options extends FocusableOptions>({ property, }: Dom.InternalPropsHelpers<Options>): {
+    role: Exclude<Dom.Property<Options, "role">, Dom.Nullish> | undefined;
+    tabindex: 0 | Exclude<Dom.Property<Options, "tabIndex">, Dom.Nullish>;
+};
+type FocusableInternalProps<Options extends FocusableOptions> = ReturnType<typeof internalProps<Options>>;
+/**
+ * Renders a keyboard-focusable host without inventing widget semantics.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component provides a small native DOM primitive for higher-level
+ * composites while requiring callers to choose an appropriate role and label.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Fx starts on execution; its Scope owns dynamic subscriptions
+ * and listener/ref cleanup. Custom hosts must retain the supplied tab index.
+ *
+ * @example
+ * ```ts
+ * import { Focusable } from "@typed/ui/Focusable"
+ *
+ * const region = Focusable({ role: "region", content: "Keyboard target" })
+ * ```
+ *
+ * @since 1.0.0
+ * @category components
+ */
+export declare function Focusable<const Options extends FocusableOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, FocusableInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+export {};
+//# sourceMappingURL=Focusable.d.ts.map

package/dist/Focusable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Focusable.d.ts","sourceRoot":"","sources":["../src/Focusable.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;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,gBAAiB,SAAQ,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC;IACvE;;;;;;;;OAQG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC;IACjC;;;;;;;;OAQG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CAC/D;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,gBAAgB,EAAE,EAC7D,QAAQ,GACT,EAAE,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAEhC,IAAI;IACJ,QAAQ;EAEX;AAED,KAAK,sBAAsB,CAAC,OAAO,SAAS,gBAAgB,IAAI,UAAU,CACxE,OAAO,aAAa,CAAC,OAAO,CAAC,CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;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,CACrB,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,EAC7D,OAAO,CAAC,SAAS,CAAC,EAClB,IAAI,CACL,GACA,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/Focusable.js

@@ -0,0 +1,35 @@
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+function internalProps({ property, }) {
+    return {
+        role: property("role", undefined),
+        tabindex: property("tabIndex", 0),
+    };
+}
+/**
+ * Renders a keyboard-focusable host without inventing widget semantics.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component provides a small native DOM primitive for higher-level
+ * composites while requiring callers to choose an appropriate role and label.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Fx starts on execution; its Scope owns dynamic subscriptions
+ * and listener/ref cleanup. Custom hosts must retain the supplied tab index.
+ *
+ * @example
+ * ```ts
+ * import { Focusable } from "@typed/ui/Focusable"
+ *
+ * const region = Focusable({ role: "region", content: "Keyboard target" })
+ * ```
+ *
+ * @since 1.0.0
+ * @category components
+ */
+export function Focusable(options, host) {
+    return Dom.renderHost()(options, host, internalProps, options.content, (props, content) => html `<div ...${props}>${content}</div>`);
+}