@colletdev/react 0.1.3

package/README.md

@@ -0,0 +1,67 @@
+# @collet/react
+
+React 18+ wrappers for the Collet component library. Typed props, ref forwarding, and idiomatic event callbacks over 48 Rust/WASM Custom Elements.
+
+## Install
+
+```bash
+npm install @collet/react @collet/core
+```
+
+## Quick Start
+
+```tsx
+import { init } from '@collet/react';
+import { Button, TextInput } from '@collet/react';
+
+await init(); // once, at app startup
+
+function App() {
+  return (
+    <>
+      <Button variant="filled" label="Save" intent="primary" onClick={() => save()} />
+      <TextInput label="Email" kind="email" onInput={(e) => setEmail(e.detail.value)} />
+    </>
+  );
+}
+```
+
+## Features
+
+- **Typed props** -- union-literal types for variant, intent, size, and all other enums
+- **Event callbacks** -- `onClick`, `onInput`, `onChange`, etc. with typed `CustomEvent` `detail`
+- **Ref types** -- `ButtonRef`, `TextInputRef`, `DialogRef`, etc. for imperative access (`.open()`, `.close()`, `.focus()`)
+- **Structured data** -- `SelectOption[]`, `TableColumn[]`, `AccordionItem[]` and other complex prop types are fully typed
+- **Markdown** -- `useMarkdown(content)` hook renders GFM to sanitized HTML via WASM
+- **Streaming** -- `useMarkdownStream()` for token-by-token rendering with cursor animation
+
+## Markdown
+
+```tsx
+import { useMarkdown } from '@collet/react';
+
+function Docs({ content }: { content: string }) {
+  const html = useMarkdown(content);
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+}
+```
+
+## Event Pattern
+
+Event callbacks use standard React naming (`onChange`, `onClick`, `onInput`, etc.) and receive typed `CustomEvent` objects:
+
+```tsx
+<Select
+  label="Country"
+  options={countries}
+  onChange={(e) => setCountry(e.detail.value)}
+/>
+```
+
+## API Reference
+
+See [@collet/docs](https://www.npmjs.com/package/@collet/docs) for the full props/events reference and framework guides.
+
+## License
+
+MIT -- [github.com/Danrozen87/collet](https://github.com/Danrozen87/collet)

package/dist/generated/accordion.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { AccordionDetail, AccordionItem } from './types.js';
+export interface AccordionProps {
+    id?: string;
+    label?: string;
+    items?: AccordionItem[] | string;
+    mode?: 'single' | 'multiple';
+    collapsible?: boolean;
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    defaultExpanded?: string[] | string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    onChange?: (event: CustomEvent<AccordionDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/accordion.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Accordion = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onChangeRef = useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onChangeRef.current?.(e);
+        el.addEventListener('cx-change', handler);
+        return () => el.removeEventListener('cx-change', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.items != null) {
+            el.setAttribute('items', typeof props.items === 'object' ? JSON.stringify(props.items) : String(props.items));
+        }
+        else {
+            el.removeAttribute('items');
+        }
+    }, [props.items]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.defaultExpanded != null) {
+            el.setAttribute('default-expanded', typeof props.defaultExpanded === 'object' ? JSON.stringify(props.defaultExpanded) : String(props.defaultExpanded));
+        }
+        else {
+            el.removeAttribute('default-expanded');
+        }
+    }, [props.defaultExpanded]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.mode != null)
+        attrs['mode'] = typeof props.mode === 'object' ? JSON.stringify(props.mode) : String(props.mode);
+    if (props.collapsible)
+        attrs['collapsible'] = '';
+    if (props.headingLevel != null)
+        attrs['heading-level'] = typeof props.headingLevel === 'object' ? JSON.stringify(props.headingLevel) : String(props.headingLevel);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    return (_jsx("cx-accordion", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Accordion.displayName = 'Accordion';

package/dist/generated/activity-group.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+export interface ActivityGroupProps {
+    id?: string;
+    status?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    border?: string;
+    summary?: string;
+    action?: string;
+    expanded?: boolean;
+    parts?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ActivityGroup: React.ForwardRefExoticComponent<ActivityGroupProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/activity-group.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+export const ActivityGroup = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.status != null)
+        attrs['status'] = typeof props.status === 'object' ? JSON.stringify(props.status) : String(props.status);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.border != null)
+        attrs['border'] = typeof props.border === 'object' ? JSON.stringify(props.border) : String(props.border);
+    if (props.summary != null)
+        attrs['summary'] = typeof props.summary === 'object' ? JSON.stringify(props.summary) : String(props.summary);
+    if (props.action != null)
+        attrs['action'] = typeof props.action === 'object' ? JSON.stringify(props.action) : String(props.action);
+    if (props.expanded)
+        attrs['expanded'] = '';
+    if (props.parts != null)
+        attrs['parts'] = typeof props.parts === 'object' ? JSON.stringify(props.parts) : String(props.parts);
+    return (_jsx("cx-activity-group", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+ActivityGroup.displayName = 'ActivityGroup';

package/dist/generated/alert.d.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+import type { DismissDetail } from './types.js';
+export interface AlertProps {
+    id?: string;
+    title?: string;
+    description?: string;
+    variant?: 'subtle' | 'filled' | 'outline';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    showIcon?: boolean;
+    icon?: string;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    compact?: boolean;
+    dynamic?: boolean;
+    actionsHtml?: string;
+    onDismiss?: (event: CustomEvent<DismissDetail>) => void;
+    actions?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/alert.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Alert = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onDismissRef = useRef(props.onDismiss);
+    onDismissRef.current = props.onDismiss;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onDismissRef.current?.(e);
+        el.addEventListener('cx-dismiss', handler);
+        return () => el.removeEventListener('cx-dismiss', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.title != null) {
+            el.setAttribute('title', String(props.title));
+        }
+        else {
+            el.removeAttribute('title');
+        }
+    }, [props.title]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.description != null)
+        attrs['description'] = typeof props.description === 'object' ? JSON.stringify(props.description) : String(props.description);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.intent != null)
+        attrs['intent'] = typeof props.intent === 'object' ? JSON.stringify(props.intent) : String(props.intent);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.showIcon)
+        attrs['show-icon'] = '';
+    if (props.icon != null)
+        attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
+    if (props.dismissible)
+        attrs['dismissible'] = '';
+    if (props.dismissLabel != null)
+        attrs['dismiss-label'] = typeof props.dismissLabel === 'object' ? JSON.stringify(props.dismissLabel) : String(props.dismissLabel);
+    if (props.compact)
+        attrs['compact'] = '';
+    if (props.dynamic)
+        attrs['dynamic'] = '';
+    if (props.actionsHtml != null)
+        attrs['actions-html'] = typeof props.actionsHtml === 'object' ? JSON.stringify(props.actionsHtml) : String(props.actionsHtml);
+    return (_jsx("cx-alert", { ref: ref, ...attrs, className: props.className, style: props.style, children: props.actions && _jsx("div", { slot: "actions", style: { display: 'contents' }, children: props.actions }) }));
+});
+Alert.displayName = 'Alert';

package/dist/generated/autocomplete.d.ts

@@ -0,0 +1,46 @@
+import type React from 'react';
+import type { FocusDetail, InputDetail, KeyboardDetail, OptionGroup, SelectDetail, SelectOption } from './types.js';
+export interface AutocompleteRef extends HTMLElement {
+    /** Opens the suggestion dropdown. */
+    open(): void;
+    /** Closes the suggestion dropdown. */
+    close(): void;
+    /** Clears all selections (multi-mode) or the input (single-mode). */
+    clear(): void;
+    /** Focuses the search input. */
+    focus(): void;
+}
+export interface AutocompleteProps {
+    id?: string;
+    label?: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** `'single'` for single select, `'multiple'` for multi-select with chips. */
+    mode?: 'single' | 'multiple';
+    selected?: string[] | string;
+    /** Current search query text. Controlled by `onInput` events. */
+    query?: string;
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    name?: string;
+    /** When true, user can submit values not in the items list. */
+    allowCustom?: boolean;
+    clearable?: boolean;
+    /** Options to filter from. Filtering is client-side (fuzzy substring match). For server-side search, update this array in your `onInput` handler. */
+    items?: SelectOption[] | string;
+    groups?: OptionGroup[] | string;
+    onInput?: (event: CustomEvent<InputDetail>) => void;
+    onChange?: (event: CustomEvent<SelectDetail>) => void;
+    onFocus?: (event: CustomEvent<FocusDetail>) => void;
+    onBlur?: (event: CustomEvent<FocusDetail>) => void;
+    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+    onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<AutocompleteRef>>;

package/dist/generated/autocomplete.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Autocomplete = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onInputRef = useRef(props.onInput);
+    onInputRef.current = props.onInput;
+    const onChangeRef = useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    const onFocusRef = useRef(props.onFocus);
+    onFocusRef.current = props.onFocus;
+    const onBlurRef = useRef(props.onBlur);
+    onBlurRef.current = props.onBlur;
+    const onKeydownRef = useRef(props.onKeydown);
+    onKeydownRef.current = props.onKeydown;
+    const onKeyupRef = useRef(props.onKeyup);
+    onKeyupRef.current = props.onKeyup;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onInputRef.current?.(e);
+        el.addEventListener('cx-input', handler);
+        return () => el.removeEventListener('cx-input', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onChangeRef.current?.(e);
+        el.addEventListener('cx-change', handler);
+        return () => el.removeEventListener('cx-change', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onFocusRef.current?.(e);
+        el.addEventListener('cx-focus', handler);
+        return () => el.removeEventListener('cx-focus', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onBlurRef.current?.(e);
+        el.addEventListener('cx-blur', handler);
+        return () => el.removeEventListener('cx-blur', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onKeydownRef.current?.(e);
+        el.addEventListener('cx-keydown', handler);
+        return () => el.removeEventListener('cx-keydown', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onKeyupRef.current?.(e);
+        el.addEventListener('cx-keyup', handler);
+        return () => el.removeEventListener('cx-keyup', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.name != null) {
+            el.setAttribute('name', String(props.name));
+        }
+        else {
+            el.removeAttribute('name');
+        }
+    }, [props.name]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.selected != null) {
+            el.setAttribute('selected', typeof props.selected === 'object' ? JSON.stringify(props.selected) : String(props.selected));
+        }
+        else {
+            el.removeAttribute('selected');
+        }
+    }, [props.selected]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.items != null) {
+            el.setAttribute('items', typeof props.items === 'object' ? JSON.stringify(props.items) : String(props.items));
+        }
+        else {
+            el.removeAttribute('items');
+        }
+    }, [props.items]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.groups != null) {
+            el.setAttribute('groups', typeof props.groups === 'object' ? JSON.stringify(props.groups) : String(props.groups));
+        }
+        else {
+            el.removeAttribute('groups');
+        }
+    }, [props.groups]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.shape != null)
+        attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.mode != null)
+        attrs['mode'] = typeof props.mode === 'object' ? JSON.stringify(props.mode) : String(props.mode);
+    if (props.query != null)
+        attrs['query'] = typeof props.query === 'object' ? JSON.stringify(props.query) : String(props.query);
+    if (props.placeholder != null)
+        attrs['placeholder'] = typeof props.placeholder === 'object' ? JSON.stringify(props.placeholder) : String(props.placeholder);
+    if (props.helperText != null)
+        attrs['helper-text'] = typeof props.helperText === 'object' ? JSON.stringify(props.helperText) : String(props.helperText);
+    if (props.error != null)
+        attrs['error'] = typeof props.error === 'object' ? JSON.stringify(props.error) : String(props.error);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    if (props.required)
+        attrs['required'] = '';
+    if (props.readonly)
+        attrs['readonly'] = '';
+    if (props.allowCustom)
+        attrs['allow-custom'] = '';
+    if (props.clearable)
+        attrs['clearable'] = '';
+    return (_jsx("cx-autocomplete", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Autocomplete.displayName = 'Autocomplete';

package/dist/generated/avatar.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+export interface AvatarProps {
+    id?: string;
+    label?: string;
+    shape?: 'circle' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    image?: string;
+    initials?: string;
+    clickable?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/avatar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+export const Avatar = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.shape != null)
+        attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.image != null)
+        attrs['image'] = typeof props.image === 'object' ? JSON.stringify(props.image) : String(props.image);
+    if (props.initials != null)
+        attrs['initials'] = typeof props.initials === 'object' ? JSON.stringify(props.initials) : String(props.initials);
+    if (props.clickable)
+        attrs['clickable'] = '';
+    return (_jsx("cx-avatar", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Avatar.displayName = 'Avatar';

package/dist/generated/backdrop.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+export interface BackdropProps {
+    tint?: string;
+    blur?: string;
+    dismissible?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/backdrop.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+export const Backdrop = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    // Build attribute object
+    const attrs = {};
+    if (props.tint != null)
+        attrs['tint'] = typeof props.tint === 'object' ? JSON.stringify(props.tint) : String(props.tint);
+    if (props.blur != null)
+        attrs['blur'] = typeof props.blur === 'object' ? JSON.stringify(props.blur) : String(props.blur);
+    if (props.dismissible)
+        attrs['dismissible'] = '';
+    return (_jsx("cx-backdrop", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Backdrop.displayName = 'Backdrop';

package/dist/generated/badge.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+export interface BadgeProps {
+    id?: string;
+    label?: string;
+    variant?: 'filled' | 'outline' | 'ghost';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    shape?: 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    dot?: boolean;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    dynamic?: boolean;
+    onDismiss?: (event: CustomEvent) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/badge.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Badge = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onDismissRef = useRef(props.onDismiss);
+    onDismissRef.current = props.onDismiss;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onDismissRef.current?.(e);
+        el.addEventListener('cx-dismiss', handler);
+        return () => el.removeEventListener('cx-dismiss', handler);
+    }, []);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.intent != null)
+        attrs['intent'] = typeof props.intent === 'object' ? JSON.stringify(props.intent) : String(props.intent);
+    if (props.shape != null)
+        attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.dot)
+        attrs['dot'] = '';
+    if (props.dismissible)
+        attrs['dismissible'] = '';
+    if (props.dismissLabel != null)
+        attrs['dismiss-label'] = typeof props.dismissLabel === 'object' ? JSON.stringify(props.dismissLabel) : String(props.dismissLabel);
+    if (props.dynamic)
+        attrs['dynamic'] = '';
+    return (_jsx("cx-badge", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Badge.displayName = 'Badge';

package/dist/generated/breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { BreadcrumbItem, NavigateDetail } from './types.js';
+export interface BreadcrumbProps {
+    id?: string;
+    items?: BreadcrumbItem[] | string;
+    separator?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    navLabel?: string;
+    disabled?: boolean;
+    onNavigate?: (event: CustomEvent<NavigateDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/breadcrumb.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Breadcrumb = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onNavigateRef = useRef(props.onNavigate);
+    onNavigateRef.current = props.onNavigate;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onNavigateRef.current?.(e);
+        el.addEventListener('cx-navigate', handler);
+        return () => el.removeEventListener('cx-navigate', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.items != null) {
+            el.setAttribute('items', typeof props.items === 'object' ? JSON.stringify(props.items) : String(props.items));
+        }
+        else {
+            el.removeAttribute('items');
+        }
+    }, [props.items]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.separator != null)
+        attrs['separator'] = typeof props.separator === 'object' ? JSON.stringify(props.separator) : String(props.separator);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.navLabel != null)
+        attrs['nav-label'] = typeof props.navLabel === 'object' ? JSON.stringify(props.navLabel) : String(props.navLabel);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    return (_jsx("cx-breadcrumb", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Breadcrumb.displayName = 'Breadcrumb';

package/dist/generated/button.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { ClickDetail } from './types.js';
+export interface ButtonProps {
+    label?: string;
+    variant?: 'filled' | 'ghost' | 'outline' | 'underline' | 'side-indicator';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    iconLeading?: string;
+    iconTrailing?: string;
+    iconOnly?: string;
+    ariaLabel?: string;
+    kind?: 'button' | 'submit' | 'toggle' | 'link';
+    pressed?: boolean;
+    href?: string;
+    onClick?: (event: CustomEvent<ClickDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;