@unofficialbox/box-open-elements-preact 0.0.0-stage → 0.42.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kyle @ Unofficial Box
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,65 @@
-# Temporary Holding Version
+# Preact adapter
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@unofficialbox/box-open-elements-preact` is implemented, awaiting independent review,
+and **not published**. Use the workspace or a locally packed tarball for now.
+The package version follows core lockstep; it does not indicate npm availability.
+
+Exports: `Button`, `TextField`, `Select`, `Dialog`, `Combobox`, `Drawer`, `createWebComponent`,
+`ExplorerSelectionController`, and `useExplorerSelectionController`, with public
+prop/event/ref declarations and per-component subpath exports.
+
+Peers: core `^0.42.2` and preact `^11.0.1`.
+
+```tsx
+import { TextField, Select, Dialog } from "@unofficialbox/box-open-elements-preact";
+
+// Render inside your framework component. Pass normal JSX props, including
+// native Preact state values. Structured values go through BOE setters.
+<TextField name="title" label="Title" value="Example"
+  ref={element => element?.focus()}
+  onValueChanged={event => console.log(event.detail.value)} />;
+<Select options={[{ label: "One", value: "1" }]} value="1" />;
+<Dialog open={false} heading="Details"><span slot="footer">Footer</span></Dialog>;
+```
+
+This package uses Preact 11's native ref-as-prop contract and native hooks, with
+no `preact/compat` dependency. Object refs and callback refs are forwarded to the
+host; Preact callback-ref cleanup functions are preserved. The controller hook
+subscribes after commit and releases on controller change/unmount. Preact 10 is
+not in the supported peer range.
+
+Mapped BOE event callbacks receive the actual DOM event; `preventDefault` and
+`stopPropagation` act on it. Cancellation works when the underlying event is
+cancelable; BOE Dialog's `cancel` notification itself is not cancelable. Factory
+`events` maps preserve exact spelling/case, and listeners are removed when the
+framework owner unmounts. Temporary DOM disconnect/reconnect retains the owner.
+The wrappers retain BOE's optional-property semantics: omitted scalar props leave
+the element value alone; disabled/invalid default to false. Use explicit false,
+empty string, or empty array to clear controlled values. BOE Select intentionally
+reflects its assigned options array as JSON. Host attributes, children, and slots
+remain framework-native. Use exact camelCase property names for custom-element
+setters; other host props use Preact's normal attribute handling. Boolean wrapper
+props take true/false, while `aria-*` and `data-*` false values remain string
+attributes. If you need an attribute distinct from a custom-element setter, use
+the forwarded ref's `setAttribute`/`removeAttribute` in a lifecycle hook; Preact
+has no Solid-style attribute-prefix API.
+
+SSR imports require no DOM globals. Server rendering emits inert custom-element
+hosts and light-DOM children; controlled properties and arrays are assigned on
+client hydration, so do not expect populated shadow DOM before JavaScript runs.
+Mapped listeners attach before initial property sync, including synchronous
+`open-changed` notifications from initially-open Dialog and Drawer. Browser
+fixtures cover closed-first and initially-open client/hydrated rendering.
+Hydrate with native `preact.hydrate` and use `preact-render-to-string` for server
+rendering. Deduplicate Preact in bundlers to keep renderer/hooks on one runtime.
+
+Validation: `bun run frameworks:preact`, `bun run frameworks:preact:ssr`,
+`bun run test -- packages/preact`, `bun run frameworks:jsx:browser`, and
+`bun run adapters:pack-check`. See [support status](../../docs/integration/framework-adapters.md)
+and [release requirements](../../RELEASING.md).
+
+Design references: [Preact 11 custom elements](https://preactjs.com/guide/v11/web-components/) and
+[native SSR](https://preactjs.com/guide/v11/server-side-rendering/).
+The installed 11.0.1 `create-element` source preserves refs in function-component
+props, and native callback refs support cleanup functions. A dedicated native
+adapter avoids React peer/type/event contracts and does not depend on compat.

package/dist/button.d.ts

@@ -0,0 +1,23 @@
+import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { NativeEventHandler } from "./events.js";
+export type ButtonProps = Omit<WebComponentProps, "onClick"> & {
+    label?: string;
+    accessibleLabel?: string;
+    tone?: string;
+    size?: string;
+    disabled?: boolean;
+    onClick?: NativeEventHandler<ButtonElement, MouseEvent>;
+};
+export declare const Button: (props: Omit<WebComponentProps, "onClick"> & {
+    label?: string;
+    accessibleLabel?: string;
+    tone?: string;
+    size?: string;
+    disabled?: boolean;
+    onClick?: NativeEventHandler<ButtonElement, MouseEvent>;
+} & {
+    ref?: import("preact").Ref<ButtonElement> | undefined;
+}) => import("preact").VNode<import("preact").Attributes & {
+    ref: (node: ButtonElement | null) => void | (() => void);
+}>;

package/dist/button.js

@@ -0,0 +1,22 @@
+import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+import { createWebComponent } from "./create-web-component.js";
+ButtonElement.register();
+export const Button = createWebComponent({
+    tagName: "box-button",
+    propertyNames: ["label", "accessibleLabel", "tone", "size", "disabled"],
+    events: [{ propName: "onClick", eventName: "click" }],
+    sync: (element, props) => {
+        if (props.label !== undefined) {
+            element.label = props.label;
+        }
+        if (props.accessibleLabel !== undefined)
+            element.accessibleLabel = props.accessibleLabel;
+        if (props.tone !== undefined) {
+            element.tone = props.tone;
+        }
+        if (props.size !== undefined) {
+            element.size = props.size;
+        }
+        element.disabled = Boolean(props.disabled);
+    },
+});

package/dist/combobox.d.ts

@@ -0,0 +1,46 @@
+import { Combobox as ComboboxElement } from "@unofficialbox/box-open-elements/combobox";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler, ValueChangedDetail } from "./events.js";
+export type ComboboxOption = {
+    label: string;
+    value: string;
+    description?: string;
+    group?: string;
+    disabled?: boolean;
+};
+export type ComboboxProps = WebComponentProps & {
+    label?: string;
+    value?: string;
+    options?: ComboboxOption[];
+    placeholder?: string;
+    placement?: string;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<ComboboxElement, ValueChangedDetail>;
+};
+export declare const Combobox: (props: Omit<import("preact").HTMLAttributes<HTMLElement>, "ref" | "onCancel"> & {
+    children?: import("preact").ComponentChildren;
+} & {
+    label?: string;
+    value?: string;
+    options?: ComboboxOption[];
+    placeholder?: string;
+    placement?: string;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<ComboboxElement, ValueChangedDetail>;
+} & {
+    ref?: import("preact").Ref<ComboboxElement> | undefined;
+}) => import("preact").VNode<import("preact").Attributes & {
+    ref: (node: ComboboxElement | null) => void | (() => void);
+}>;

package/dist/combobox.js

@@ -0,0 +1,35 @@
+import { Combobox as ComboboxElement } from "@unofficialbox/box-open-elements/combobox";
+import { createWebComponent } from "./create-web-component.js";
+ComboboxElement.register();
+export const Combobox = createWebComponent({
+    tagName: "box-combobox",
+    propertyNames: [
+        "label", "value", "options", "placeholder", "placement", "disabled",
+        "name", "invalid", "errorMessage", "description", "required", "hideLabel",
+    ],
+    events: [{ propName: "onValueChanged", eventName: "value-changed" }],
+    sync: (element, props) => {
+        if (props.label !== undefined)
+            element.label = props.label;
+        if (props.value !== undefined)
+            element.value = props.value;
+        if (props.options !== undefined)
+            element.options = props.options;
+        if (props.placeholder !== undefined)
+            element.placeholder = props.placeholder;
+        if (props.placement !== undefined)
+            element.placement = props.placement;
+        if (props.name !== undefined)
+            element.name = props.name;
+        if (props.errorMessage !== undefined)
+            element.errorMessage = props.errorMessage;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.hideLabel !== undefined)
+            element.hideLabel = props.hideLabel;
+        element.disabled = Boolean(props.disabled);
+        element.invalid = Boolean(props.invalid);
+    },
+});

package/dist/create-web-component.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentChildren, type HTMLAttributes, type Ref } from "preact";
+export type WebComponentProps = Omit<HTMLAttributes<HTMLElement>, "ref" | "onCancel"> & {
+    children?: ComponentChildren;
+};
+export type CreateWebComponentOptions<E extends HTMLElement, P> = {
+    tagName: string;
+    sync: (element: E, props: P) => void;
+    propertyNames?: ReadonlyArray<keyof P & string>;
+    events?: ReadonlyArray<{
+        propName: keyof P & string;
+        eventName: string;
+    }>;
+};
+/** Native Preact 11 component: ref is a prop, without preact/compat or React. */
+export declare function createWebComponent<E extends HTMLElement, P extends object>(options: CreateWebComponentOptions<E, P>): (props: P & {
+    ref?: Ref<E>;
+}) => import("preact").VNode<import("preact").Attributes & {
+    ref: (node: E | null) => void | (() => void);
+}>;

package/dist/create-web-component.js

@@ -0,0 +1,48 @@
+import { h } from "preact";
+import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
+/** Native Preact 11 component: ref is a prop, without preact/compat or React. */
+export function createWebComponent(options) {
+    return function WebComponent(props) {
+        const element = useRef(null);
+        const committed = useRef(props);
+        const setRef = useCallback((node) => {
+            element.current = node;
+            if (typeof props.ref === "function")
+                return props.ref(node);
+            if (props.ref)
+                props.ref.current = node;
+        }, [props.ref]);
+        // Bind before initial sync: opening overlays emits synchronously.
+        useLayoutEffect(() => {
+            const node = element.current;
+            if (!node)
+                return;
+            const subscriptions = (options.events ?? []).map(binding => {
+                const listener = (event) => {
+                    const handler = committed.current[binding.propName];
+                    if (typeof handler === "function")
+                        handler(event);
+                };
+                node.addEventListener(binding.eventName, listener);
+                return { ...binding, listener };
+            });
+            return () => {
+                for (const binding of subscriptions)
+                    node.removeEventListener(binding.eventName, binding.listener);
+            };
+        }, []);
+        // Only committed renders affect listeners, including interrupted renders.
+        useLayoutEffect(() => {
+            committed.current = props;
+            if (element.current)
+                options.sync(element.current, props);
+        });
+        const host = { ...props };
+        delete host.ref;
+        for (const name of options.propertyNames ?? [])
+            delete host[name];
+        for (const binding of options.events ?? [])
+            delete host[binding.propName];
+        return h(options.tagName, { ...host, ref: setRef });
+    };
+}

package/dist/dialog.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentChildren } from "preact";
+import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type DialogConfirmTone = "primary" | "danger";
+export type DialogSize = "small" | "medium" | "large" | "fullscreen";
+export type DialogProps = WebComponentProps & {
+    children?: ComponentChildren;
+    open?: boolean;
+    heading?: string;
+    description?: string;
+    confirmLabel?: string;
+    confirmTone?: DialogConfirmTone;
+    confirmDisabled?: boolean;
+    confirmBusy?: boolean;
+    confirmBusyLabel?: string;
+    size?: DialogSize;
+    onOpenChanged?: CustomEventHandler<DialogElement, {
+        open: boolean;
+    }>;
+    onConfirm?: CustomEventHandler<DialogElement, null>;
+    onCancel?: CustomEventHandler<DialogElement, null>;
+};
+export declare const Dialog: (props: Omit<import("preact").HTMLAttributes<HTMLElement>, "ref" | "onCancel"> & {
+    children?: ComponentChildren;
+} & {
+    children?: ComponentChildren;
+    open?: boolean;
+    heading?: string;
+    description?: string;
+    confirmLabel?: string;
+    confirmTone?: DialogConfirmTone;
+    confirmDisabled?: boolean;
+    confirmBusy?: boolean;
+    confirmBusyLabel?: string;
+    size?: DialogSize;
+    onOpenChanged?: CustomEventHandler<DialogElement, {
+        open: boolean;
+    }>;
+    onConfirm?: CustomEventHandler<DialogElement, null>;
+    onCancel?: CustomEventHandler<DialogElement, null>;
+} & {
+    ref?: import("preact").Ref<DialogElement> | undefined;
+}) => import("preact").VNode<import("preact").Attributes & {
+    ref: (node: DialogElement | null) => void | (() => void);
+}>;

package/dist/dialog.js

@@ -0,0 +1,37 @@
+import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+import { createWebComponent } from "./create-web-component.js";
+DialogElement.register();
+export const Dialog = createWebComponent({
+    tagName: "box-dialog",
+    propertyNames: ["open", "heading", "description", "confirmLabel", "confirmTone", "confirmDisabled", "confirmBusy", "confirmBusyLabel", "size"],
+    events: [
+        { propName: "onOpenChanged", eventName: "open-changed" },
+        { propName: "onConfirm", eventName: "confirm" },
+        { propName: "onCancel", eventName: "cancel" },
+    ],
+    sync: (element, props) => {
+        if (props.heading !== undefined) {
+            element.heading = props.heading;
+        }
+        if (props.description !== undefined) {
+            element.description = props.description;
+        }
+        if (props.confirmLabel !== undefined) {
+            element.confirmLabel = props.confirmLabel;
+        }
+        if (props.confirmTone !== undefined)
+            element.confirmTone = props.confirmTone;
+        if (props.confirmDisabled !== undefined)
+            element.confirmDisabled = props.confirmDisabled;
+        if (props.confirmBusy !== undefined)
+            element.confirmBusy = props.confirmBusy;
+        if (props.confirmBusyLabel !== undefined)
+            element.confirmBusyLabel = props.confirmBusyLabel;
+        if (props.size !== undefined) {
+            element.size = props.size;
+        }
+        if (props.open !== undefined) {
+            element.open = props.open;
+        }
+    },
+});

package/dist/drawer.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentChildren } from "preact";
+import { Drawer as DrawerRef } from "@unofficialbox/box-open-elements/drawer";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type { DrawerRef };
+export type DrawerProps = WebComponentProps & {
+    children?: ComponentChildren;
+    heading?: string;
+    description?: string;
+    open?: boolean;
+    position?: string;
+    size?: string;
+    busy?: boolean;
+    hideCloseButton?: boolean;
+    onOpenChanged?: CustomEventHandler<DrawerRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<DrawerRef, {
+        source: "close-button" | "backdrop" | "escape";
+    }>;
+};
+export declare const Drawer: (props: Omit<import("preact").HTMLAttributes<HTMLElement>, "ref" | "onCancel"> & {
+    children?: ComponentChildren;
+} & {
+    children?: ComponentChildren;
+    heading?: string;
+    description?: string;
+    open?: boolean;
+    position?: string;
+    size?: string;
+    busy?: boolean;
+    hideCloseButton?: boolean;
+    onOpenChanged?: CustomEventHandler<DrawerRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<DrawerRef, {
+        source: "close-button" | "backdrop" | "escape";
+    }>;
+} & {
+    ref?: import("preact").Ref<DrawerRef> | undefined;
+}) => import("preact").VNode<import("preact").Attributes & {
+    ref: (node: DrawerRef | null) => void | (() => void);
+}>;

package/dist/drawer.js

@@ -0,0 +1,23 @@
+import { Drawer as DrawerRef } from "@unofficialbox/box-open-elements/drawer";
+import { createWebComponent } from "./create-web-component.js";
+export const Drawer = createWebComponent({
+    tagName: DrawerRef.tagName,
+    propertyNames: ["heading", "description", "open", "position", "size", "busy", "hideCloseButton"],
+    events: [{ propName: "onOpenChanged", eventName: "open-changed" }, { propName: "onDismiss", eventName: "dismiss" }],
+    sync: (element, props) => {
+        if (props.heading !== undefined)
+            element.heading = props.heading;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.open !== undefined)
+            element.open = props.open;
+        if (props.position !== undefined)
+            element.position = props.position;
+        if (props.size !== undefined)
+            element.size = props.size;
+        if (props.busy !== undefined)
+            element.busy = props.busy;
+        if (props.hideCloseButton !== undefined)
+            element.hideCloseButton = props.hideCloseButton;
+    },
+});

package/dist/events.d.ts

@@ -0,0 +1,9 @@
+export type CustomEventHandler<E extends HTMLElement, Detail> = (event: CustomEvent<Detail> & {
+    currentTarget: E;
+}) => void;
+export type NativeEventHandler<E extends HTMLElement, Ev extends Event = Event> = (event: Ev & {
+    currentTarget: E;
+}) => void;
+export type ValueChangedDetail = {
+    value: string;
+};

package/dist/events.js

@@ -0,0 +1 @@
+export {};

package/dist/explorer-selection.d.ts

@@ -0,0 +1,4 @@
+import { ExplorerSelectionController, type ExplorerSelectionState } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+export { ExplorerSelectionController };
+export type { ExplorerSelectionState };
+export declare function useExplorerSelectionController(controller: ExplorerSelectionController): Readonly<ExplorerSelectionState>;

package/dist/explorer-selection.js

@@ -0,0 +1,13 @@
+import { useLayoutEffect, useState } from "preact/hooks";
+import { ExplorerSelectionController } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+export { ExplorerSelectionController };
+export function useExplorerSelectionController(controller) {
+    const [snapshot, setSnapshot] = useState(() => ({ controller, state: controller.getState() }));
+    useLayoutEffect(() => {
+        const update = () => setSnapshot({ controller, state: controller.getState() });
+        const unsubscribe = controller.subscribe("selectionChanged", update);
+        update();
+        return unsubscribe;
+    }, [controller]);
+    return snapshot.controller === controller ? snapshot.state : controller.getState();
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { createWebComponent, type WebComponentProps, type CreateWebComponentOptions } from "./create-web-component.js";
+export type { CustomEventHandler, NativeEventHandler, ValueChangedDetail } from "./events.js";
+export { Button, type ButtonProps } from "./button.js";
+export { TextField, type TextFieldProps } from "./text-field.js";
+export { Select, type SelectProps, type SelectOption } from "./select.js";
+export { Dialog, type DialogProps, type DialogConfirmTone, type DialogSize } from "./dialog.js";
+export { ExplorerSelectionController, useExplorerSelectionController, type ExplorerSelectionState } from "./explorer-selection.js";
+export { Combobox, type ComboboxProps, type ComboboxOption } from "./combobox.js";
+export { Drawer, type DrawerProps, type DrawerRef } from "./drawer.js";

package/dist/index.js

@@ -0,0 +1,8 @@
+export { createWebComponent } from "./create-web-component.js";
+export { Button } from "./button.js";
+export { TextField } from "./text-field.js";
+export { Select } from "./select.js";
+export { Dialog } from "./dialog.js";
+export { ExplorerSelectionController, useExplorerSelectionController } from "./explorer-selection.js";
+export { Combobox } from "./combobox.js";
+export { Drawer } from "./drawer.js";

package/dist/select.d.ts

@@ -0,0 +1,39 @@
+import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler, ValueChangedDetail } from "./events.js";
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+export type SelectProps = WebComponentProps & {
+    label?: string;
+    value?: string;
+    options?: SelectOption[];
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<SelectElement, ValueChangedDetail>;
+};
+export declare const Select: (props: Omit<import("preact").HTMLAttributes<HTMLElement>, "ref" | "onCancel"> & {
+    children?: import("preact").ComponentChildren;
+} & {
+    label?: string;
+    value?: string;
+    options?: SelectOption[];
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<SelectElement, ValueChangedDetail>;
+} & {
+    ref?: import("preact").Ref<SelectElement> | undefined;
+}) => import("preact").VNode<import("preact").Attributes & {
+    ref: (node: SelectElement | null) => void | (() => void);
+}>;

package/dist/select.js

@@ -0,0 +1,42 @@
+import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+import { createWebComponent } from "./create-web-component.js";
+SelectElement.register();
+export const Select = createWebComponent({
+    tagName: "box-select",
+    propertyNames: [
+        "label",
+        "value",
+        "options",
+        "disabled",
+        "name",
+        "invalid",
+        "errorMessage",
+        "description", "required", "hideLabel",
+    ],
+    events: [{ propName: "onValueChanged", eventName: "value-changed" }],
+    sync: (element, props) => {
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.hideLabel !== undefined)
+            element.hideLabel = props.hideLabel;
+        if (props.label !== undefined) {
+            element.label = props.label;
+        }
+        if (props.value !== undefined) {
+            element.value = props.value;
+        }
+        if (props.options !== undefined) {
+            element.options = props.options;
+        }
+        if (props.name !== undefined) {
+            element.name = props.name;
+        }
+        if (props.errorMessage !== undefined) {
+            element.errorMessage = props.errorMessage;
+        }
+        element.disabled = Boolean(props.disabled);
+        element.invalid = Boolean(props.invalid);
+    },
+});

package/dist/text-field.d.ts

@@ -0,0 +1,45 @@
+import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler, ValueChangedDetail } from "./events.js";
+export type TextFieldProps = WebComponentProps & {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    type?: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
+    reveal?: boolean;
+    revealLabel?: string;
+    autocomplete?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<TextFieldElement, ValueChangedDetail>;
+};
+export declare const TextField: (props: Omit<import("preact").HTMLAttributes<HTMLElement>, "ref" | "onCancel"> & {
+    children?: import("preact").ComponentChildren;
+} & {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    type?: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
+    reveal?: boolean;
+    revealLabel?: string;
+    autocomplete?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<TextFieldElement, ValueChangedDetail>;
+} & {
+    ref?: import("preact").Ref<TextFieldElement> | undefined;
+}) => import("preact").VNode<import("preact").Attributes & {
+    ref: (node: TextFieldElement | null) => void | (() => void);
+}>;

package/dist/text-field.js

@@ -0,0 +1,54 @@
+import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+import { createWebComponent } from "./create-web-component.js";
+TextFieldElement.register();
+export const TextField = createWebComponent({
+    tagName: "box-text-field",
+    propertyNames: [
+        "label",
+        "value",
+        "placeholder",
+        "type", "reveal", "revealLabel", "autocomplete",
+        "disabled",
+        "readonly",
+        "name",
+        "invalid",
+        "errorMessage",
+        "description", "required", "hideLabel",
+    ],
+    events: [{ propName: "onValueChanged", eventName: "value-changed" }],
+    sync: (element, props) => {
+        if (props.readonly !== undefined)
+            element.readonly = props.readonly;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.hideLabel !== undefined)
+            element.hideLabel = props.hideLabel;
+        if (props.label !== undefined) {
+            element.label = props.label;
+        }
+        if (props.value !== undefined) {
+            element.value = props.value;
+        }
+        if (props.placeholder !== undefined) {
+            element.placeholder = props.placeholder;
+        }
+        if (props.type !== undefined)
+            element.type = props.type;
+        if (props.reveal !== undefined)
+            element.reveal = props.reveal;
+        if (props.revealLabel !== undefined)
+            element.revealLabel = props.revealLabel;
+        if (props.autocomplete !== undefined)
+            element.autocomplete = props.autocomplete;
+        if (props.name !== undefined) {
+            element.name = props.name;
+        }
+        if (props.errorMessage !== undefined) {
+            element.errorMessage = props.errorMessage;
+        }
+        element.disabled = Boolean(props.disabled);
+        element.invalid = Boolean(props.invalid);
+    },
+});

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@unofficialbox/box-open-elements-preact",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.42.2",
+  "description": "Optional native preact adapters for box-open-elements Web Components.",
+  "license": "MIT",
+  "homepage": "https://unofficialbox.github.io/box-open-elements",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unofficialbox/box-open-elements.git",
+    "directory": "packages/preact"
+  },
+  "bugs": {
+    "url": "https://github.com/unofficialbox/box-open-elements/issues"
+  },
+  "keywords": [
+    "preact",
+    "web-components",
+    "design-system",
+    "box"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "peerDependencies": {
+    "@unofficialbox/box-open-elements": "^0.42.2",
+    "preact": "^11.0.1"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "bun run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}