@unofficialbox/box-open-elements-react 0.20.0 → 0.22.0

package/dist/alert.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { Alert as AlertRef } from "@unofficialbox/box-open-elements/alert";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type { AlertRef };
+export type AlertProps = WebComponentProps & {
+    children?: ReactNode;
+    heading?: string;
+    message?: string;
+    description?: string;
+    tone?: string;
+    open?: boolean;
+    onOpenChanged?: CustomEventHandler<AlertRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<AlertRef, unknown>;
+};
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export declare const Alert: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    children?: ReactNode;
+    heading?: string;
+    message?: string;
+    description?: string;
+    tone?: string;
+    open?: boolean;
+    onOpenChanged?: CustomEventHandler<AlertRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<AlertRef, unknown>;
+} & import("react").RefAttributes<AlertRef>>;

package/dist/alert.js

@@ -0,0 +1,21 @@
+import { Alert as AlertRef } from "@unofficialbox/box-open-elements/alert";
+import { createWebComponent } from "./create-web-component.js";
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export const Alert = createWebComponent({
+    tagName: AlertRef.tagName,
+    displayName: "Alert",
+    propertyNames: ["heading", "message", "description", "tone", "open"],
+    events: [{ propName: "onOpenChanged", eventName: "open-changed" }, { propName: "onDismiss", eventName: "dismiss" }],
+    sync: (element, props) => {
+        if (props.heading !== undefined)
+            element.heading = props.heading;
+        if (props.message !== undefined)
+            element.message = props.message;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.tone !== undefined)
+            element.tone = props.tone;
+        if (props.open !== undefined)
+            element.open = props.open;
+    },
+});

package/dist/card.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { Card as CardRef } from "@unofficialbox/box-open-elements/card";
+import { type WebComponentProps } from "./create-web-component.js";
+export type { CardRef };
+export type CardProps = WebComponentProps & {
+    children?: ReactNode;
+    heading?: string;
+    eyebrow?: string;
+};
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export declare const Card: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    children?: ReactNode;
+    heading?: string;
+    eyebrow?: string;
+} & import("react").RefAttributes<CardRef>>;

package/dist/card.js

@@ -0,0 +1,15 @@
+import { Card as CardRef } from "@unofficialbox/box-open-elements/card";
+import { createWebComponent } from "./create-web-component.js";
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export const Card = createWebComponent({
+    tagName: CardRef.tagName,
+    displayName: "Card",
+    propertyNames: ["heading", "eyebrow"],
+    events: [],
+    sync: (element, props) => {
+        if (props.heading !== undefined)
+            element.heading = props.heading;
+        if (props.eyebrow !== undefined)
+            element.eyebrow = props.eyebrow;
+    },
+});

package/dist/checkbox.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { Checkbox as CheckboxRef } from "@unofficialbox/box-open-elements/checkbox";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type { CheckboxRef };
+export type CheckboxProps = WebComponentProps & {
+    children?: ReactNode;
+    label?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    value?: string;
+    name?: string;
+    required?: boolean;
+    description?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    onCheckedChanged?: CustomEventHandler<CheckboxRef, {
+        checked: boolean;
+    }>;
+};
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    children?: ReactNode;
+    label?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    value?: string;
+    name?: string;
+    required?: boolean;
+    description?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    onCheckedChanged?: CustomEventHandler<CheckboxRef, {
+        checked: boolean;
+    }>;
+} & import("react").RefAttributes<CheckboxRef>>;

package/dist/checkbox.js

@@ -0,0 +1,31 @@
+import { Checkbox as CheckboxRef } from "@unofficialbox/box-open-elements/checkbox";
+import { createWebComponent } from "./create-web-component.js";
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export const Checkbox = createWebComponent({
+    tagName: CheckboxRef.tagName,
+    displayName: "Checkbox",
+    propertyNames: ["label", "checked", "indeterminate", "disabled", "value", "name", "required", "description", "invalid", "errorMessage"],
+    events: [{ propName: "onCheckedChanged", eventName: "checked-changed" }],
+    sync: (element, props) => {
+        if (props.label !== undefined)
+            element.label = props.label;
+        if (props.checked !== undefined)
+            element.checked = props.checked;
+        if (props.indeterminate !== undefined)
+            element.indeterminate = props.indeterminate;
+        if (props.disabled !== undefined)
+            element.disabled = props.disabled;
+        if (props.value !== undefined)
+            element.value = props.value;
+        if (props.name !== undefined)
+            element.name = props.name;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.invalid !== undefined)
+            element.invalid = props.invalid;
+        if (props.errorMessage !== undefined)
+            element.errorMessage = props.errorMessage;
+    },
+});

package/dist/code-block.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { CodeBlock as CodeBlockRef } from "@unofficialbox/box-open-elements/code-block";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type { CodeBlockRef };
+export type CodeBlockProps = WebComponentProps & {
+    children?: ReactNode;
+    code?: string;
+    language?: string;
+    copyLabel?: string;
+    onCodeCopied?: CustomEventHandler<CodeBlockRef, {
+        copied: boolean;
+    }>;
+};
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    children?: ReactNode;
+    code?: string;
+    language?: string;
+    copyLabel?: string;
+    onCodeCopied?: CustomEventHandler<CodeBlockRef, {
+        copied: boolean;
+    }>;
+} & import("react").RefAttributes<CodeBlockRef>>;

package/dist/code-block.js

@@ -0,0 +1,17 @@
+import { CodeBlock as CodeBlockRef } from "@unofficialbox/box-open-elements/code-block";
+import { createWebComponent } from "./create-web-component.js";
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export const CodeBlock = createWebComponent({
+    tagName: CodeBlockRef.tagName,
+    displayName: "CodeBlock",
+    propertyNames: ["code", "language", "copyLabel"],
+    events: [{ propName: "onCodeCopied", eventName: "code-copied" }],
+    sync: (element, props) => {
+        if (props.code !== undefined)
+            element.code = props.code;
+        if (props.language !== undefined)
+            element.language = props.language;
+        if (props.copyLabel !== undefined)
+            element.copyLabel = props.copyLabel;
+    },
+});

package/dist/drawer.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+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?: ReactNode;
+    heading?: string;
+    description?: string;
+    open?: boolean;
+    position?: string;
+    size?: string;
+    busy?: boolean;
+    onOpenChanged?: CustomEventHandler<DrawerRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<DrawerRef, {
+        source: "close-button" | "backdrop" | "escape";
+    }>;
+};
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export declare const Drawer: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    children?: ReactNode;
+    heading?: string;
+    description?: string;
+    open?: boolean;
+    position?: string;
+    size?: string;
+    busy?: boolean;
+    onOpenChanged?: CustomEventHandler<DrawerRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<DrawerRef, {
+        source: "close-button" | "backdrop" | "escape";
+    }>;
+} & import("react").RefAttributes<DrawerRef>>;

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";
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export const Drawer = createWebComponent({
+    tagName: DrawerRef.tagName,
+    displayName: "Drawer",
+    propertyNames: ["heading", "description", "open", "position", "size", "busy"],
+    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;
+    },
+});

package/dist/index.d.ts

@@ -10,3 +10,11 @@ export { Dialog, type DialogProps, type DialogSize } from "./dialog.js";
 export { ExplorerSelectionController, useExplorerSelectionController, type ExplorerSelectionState, } from "./explorer-selection.js";
 export { Select, type SelectOption, type SelectProps } from "./select.js";
 export { TextField, type TextFieldProps } from "./text-field.js";
+export { NumberInput, type NumberInputProps, type NumberInputRef } from "./number-input.js";
+export { Checkbox, type CheckboxProps, type CheckboxRef } from "./checkbox.js";
+export { Tabs, type TabsProps, type TabsRef } from "./tabs.js";
+export { Card, type CardProps, type CardRef } from "./card.js";
+export { Alert, type AlertProps, type AlertRef } from "./alert.js";
+export { Toast, type ToastProps, type ToastRef } from "./toast.js";
+export { Drawer, type DrawerProps, type DrawerRef } from "./drawer.js";
+export { CodeBlock, type CodeBlockProps, type CodeBlockRef } from "./code-block.js";

package/dist/index.js

@@ -9,3 +9,11 @@ export { Dialog } from "./dialog.js";
 export { ExplorerSelectionController, useExplorerSelectionController, } from "./explorer-selection.js";
 export { Select } from "./select.js";
 export { TextField } from "./text-field.js";
+export { NumberInput } from "./number-input.js";
+export { Checkbox } from "./checkbox.js";
+export { Tabs } from "./tabs.js";
+export { Card } from "./card.js";
+export { Alert } from "./alert.js";
+export { Toast } from "./toast.js";
+export { Drawer } from "./drawer.js";
+export { CodeBlock } from "./code-block.js";

package/dist/number-input.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import { NumberInput as NumberInputRef } from "@unofficialbox/box-open-elements/number-input";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type { NumberInputRef };
+export type NumberInputProps = WebComponentProps & {
+    children?: ReactNode;
+    label?: string;
+    value?: number;
+    min?: number | null;
+    max?: number | null;
+    step?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    description?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    onValueChanged?: CustomEventHandler<NumberInputRef, {
+        value: number;
+    }>;
+};
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    children?: ReactNode;
+    label?: string;
+    value?: number;
+    min?: number | null;
+    max?: number | null;
+    step?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    description?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    onValueChanged?: CustomEventHandler<NumberInputRef, {
+        value: number;
+    }>;
+} & import("react").RefAttributes<NumberInputRef>>;

package/dist/number-input.js

@@ -0,0 +1,37 @@
+import { NumberInput as NumberInputRef } from "@unofficialbox/box-open-elements/number-input";
+import { createWebComponent } from "./create-web-component.js";
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export const NumberInput = createWebComponent({
+    tagName: NumberInputRef.tagName,
+    displayName: "NumberInput",
+    propertyNames: ["label", "value", "min", "max", "step", "placeholder", "disabled", "name", "required", "hideLabel", "description", "invalid", "errorMessage"],
+    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.min !== undefined)
+            element.min = props.min;
+        if (props.max !== undefined)
+            element.max = props.max;
+        if (props.step !== undefined)
+            element.step = props.step;
+        if (props.placeholder !== undefined)
+            element.placeholder = props.placeholder;
+        if (props.disabled !== undefined)
+            element.disabled = props.disabled;
+        if (props.name !== undefined)
+            element.name = props.name;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.hideLabel !== undefined)
+            element.hideLabel = props.hideLabel;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.invalid !== undefined)
+            element.invalid = props.invalid;
+        if (props.errorMessage !== undefined)
+            element.errorMessage = props.errorMessage;
+    },
+});

package/dist/tabs.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import { Tabs as TabsRef } from "@unofficialbox/box-open-elements/tabs";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type { TabsRef };
+export type TabsProps = WebComponentProps & {
+    children?: ReactNode;
+    label?: string;
+    value?: string;
+    layout?: "attached" | "separated";
+    options?: TabsRef["options"];
+    onValueChanged?: CustomEventHandler<TabsRef, {
+        value: string;
+    }>;
+};
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export declare const Tabs: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    children?: ReactNode;
+    label?: string;
+    value?: string;
+    layout?: "attached" | "separated";
+    options?: TabsRef["options"];
+    onValueChanged?: CustomEventHandler<TabsRef, {
+        value: string;
+    }>;
+} & import("react").RefAttributes<TabsRef>>;

package/dist/tabs.js

@@ -0,0 +1,19 @@
+import { Tabs as TabsRef } from "@unofficialbox/box-open-elements/tabs";
+import { createWebComponent } from "./create-web-component.js";
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export const Tabs = createWebComponent({
+    tagName: TabsRef.tagName,
+    displayName: "Tabs",
+    propertyNames: ["label", "value", "layout", "options"],
+    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.layout !== undefined)
+            element.layout = props.layout;
+        if (props.options !== undefined)
+            element.options = props.options;
+    },
+});

package/dist/toast.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { Toast as ToastRef } from "@unofficialbox/box-open-elements/toast";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type { ToastRef };
+export type ToastProps = WebComponentProps & {
+    children?: ReactNode;
+    heading?: string;
+    message?: string;
+    tone?: string;
+    open?: boolean;
+    mode?: ToastRef["mode"];
+    duration?: number;
+    onOpenChanged?: CustomEventHandler<ToastRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<ToastRef, {
+        source: "timeout" | "close-button";
+    }>;
+};
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export declare const Toast: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    style?: import("react").CSSProperties;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "children" | "onCancel"> & {
+    children?: ReactNode;
+    heading?: string;
+    message?: string;
+    tone?: string;
+    open?: boolean;
+    mode?: ToastRef["mode"];
+    duration?: number;
+    onOpenChanged?: CustomEventHandler<ToastRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<ToastRef, {
+        source: "timeout" | "close-button";
+    }>;
+} & import("react").RefAttributes<ToastRef>>;

package/dist/toast.js

@@ -0,0 +1,23 @@
+import { Toast as ToastRef } from "@unofficialbox/box-open-elements/toast";
+import { createWebComponent } from "./create-web-component.js";
+/** Omitted props preserve imperative state; supplied props are synchronized. */
+export const Toast = createWebComponent({
+    tagName: ToastRef.tagName,
+    displayName: "Toast",
+    propertyNames: ["heading", "message", "tone", "open", "mode", "duration"],
+    events: [{ propName: "onOpenChanged", eventName: "open-changed" }, { propName: "onDismiss", eventName: "dismiss" }],
+    sync: (element, props) => {
+        if (props.heading !== undefined)
+            element.heading = props.heading;
+        if (props.message !== undefined)
+            element.message = props.message;
+        if (props.tone !== undefined)
+            element.tone = props.tone;
+        if (props.open !== undefined)
+            element.open = props.open;
+        if (props.mode !== undefined)
+            element.mode = props.mode;
+        if (props.duration !== undefined)
+            element.duration = props.duration;
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements-react",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Optional React wrappers for box-open-elements Web Components. Thin adapters — core stays framework-agnostic.",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",
@@ -19,9 +19,14 @@
     "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"
@@ -37,7 +42,7 @@
     "node": ">=20.9.0"
   },
   "peerDependencies": {
-    "@unofficialbox/box-open-elements": "^0.20.0",
+    "@unofficialbox/box-open-elements": "^0.22.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },