@colletdev/react 0.1.3

package/dist/generated/skeleton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Skeleton = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.lines != null) {
+            el.setAttribute('lines', String(props.lines));
+        }
+        else {
+            el.removeAttribute('lines');
+        }
+    }, [props.lines]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.animation != null)
+        attrs['animation'] = typeof props.animation === 'object' ? JSON.stringify(props.animation) : String(props.animation);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    return (_jsx("cx-skeleton", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Skeleton.displayName = 'Skeleton';

package/dist/generated/slider.d.ts

@@ -0,0 +1,34 @@
+import type React from 'react';
+import type { FocusDetail, KeyboardDetail, SliderDetail } from './types.js';
+export interface SliderRef extends HTMLElement {
+    /** Focuses the range input. */
+    focus(): void;
+}
+export interface SliderProps {
+    id?: string;
+    label?: string;
+    ariaLabel?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: 'horizontal' | 'vertical';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    showValue?: boolean;
+    valueText?: string;
+    helperText?: string;
+    errorText?: string;
+    disabled?: boolean;
+    unlabeled?: boolean;
+    onInput?: (event: CustomEvent<SliderDetail>) => void;
+    onChange?: (event: CustomEvent) => 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 Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>;

package/dist/generated/slider.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Slider = 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.value != null) {
+            el.setAttribute('value', String(props.value));
+        }
+        else {
+            el.removeAttribute('value');
+        }
+    }, [props.value]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.min != null) {
+            el.setAttribute('min', String(props.min));
+        }
+        else {
+            el.removeAttribute('min');
+        }
+    }, [props.min]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.max != null) {
+            el.setAttribute('max', String(props.max));
+        }
+        else {
+            el.removeAttribute('max');
+        }
+    }, [props.max]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.step != null) {
+            el.setAttribute('step', String(props.step));
+        }
+        else {
+            el.removeAttribute('step');
+        }
+    }, [props.step]);
+    // 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.ariaLabel != null)
+        attrs['aria-label'] = typeof props.ariaLabel === 'object' ? JSON.stringify(props.ariaLabel) : String(props.ariaLabel);
+    if (props.orientation != null)
+        attrs['orientation'] = typeof props.orientation === 'object' ? JSON.stringify(props.orientation) : String(props.orientation);
+    if (props.shape != null)
+        attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+    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.showValue)
+        attrs['show-value'] = '';
+    if (props.valueText != null)
+        attrs['value-text'] = typeof props.valueText === 'object' ? JSON.stringify(props.valueText) : String(props.valueText);
+    if (props.helperText != null)
+        attrs['helper-text'] = typeof props.helperText === 'object' ? JSON.stringify(props.helperText) : String(props.helperText);
+    if (props.errorText != null)
+        attrs['error-text'] = typeof props.errorText === 'object' ? JSON.stringify(props.errorText) : String(props.errorText);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    if (props.unlabeled)
+        attrs['unlabeled'] = '';
+    return (_jsx("cx-slider", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Slider.displayName = 'Slider';

package/dist/generated/speed-dial.d.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+import type { CollapsibleDetail, MenuActionDetail, SpeedDialAction } from './types.js';
+export interface SpeedDialRef extends HTMLElement {
+    /** Opens the speed dial action menu. */
+    open(): void;
+    /** Closes the speed dial action menu. */
+    close(): void;
+    /** Toggles the speed dial action menu. */
+    toggle(): void;
+}
+export interface SpeedDialProps {
+    id: string;
+    icon: string;
+    ariaLabel?: string;
+    closeIcon?: string;
+    actions?: SpeedDialAction[] | string;
+    variant?: 'filled' | 'outline' | 'ghost';
+    shape?: 'rounded' | 'pill';
+    size?: 'sm' | 'md' | 'lg';
+    direction?: 'up' | 'down' | 'left' | 'right';
+    backdrop?: boolean;
+    tooltips?: boolean;
+    disabled?: boolean;
+    onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+    onChange?: (event: CustomEvent<CollapsibleDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const SpeedDial: React.ForwardRefExoticComponent<SpeedDialProps & React.RefAttributes<SpeedDialRef>>;

package/dist/generated/speed-dial.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const SpeedDial = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onActionRef = useRef(props.onAction);
+    onActionRef.current = props.onAction;
+    const onChangeRef = useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onActionRef.current?.(e);
+        el.addEventListener('cx-action', handler);
+        return () => el.removeEventListener('cx-action', 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;
+        if (props.actions != null) {
+            el.setAttribute('actions', typeof props.actions === 'object' ? JSON.stringify(props.actions) : String(props.actions));
+        }
+        else {
+            el.removeAttribute('actions');
+        }
+    }, [props.actions]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.icon != null)
+        attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
+    if (props.ariaLabel != null)
+        attrs['aria-label'] = typeof props.ariaLabel === 'object' ? JSON.stringify(props.ariaLabel) : String(props.ariaLabel);
+    if (props.closeIcon != null)
+        attrs['close-icon'] = typeof props.closeIcon === 'object' ? JSON.stringify(props.closeIcon) : String(props.closeIcon);
+    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.direction != null)
+        attrs['direction'] = typeof props.direction === 'object' ? JSON.stringify(props.direction) : String(props.direction);
+    if (props.backdrop)
+        attrs['backdrop'] = '';
+    if (props.tooltips)
+        attrs['tooltips'] = '';
+    if (props.disabled)
+        attrs['disabled'] = '';
+    return (_jsx("cx-speed-dial", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+SpeedDial.displayName = 'SpeedDial';

package/dist/generated/spinner.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+export interface SpinnerProps {
+    id?: string;
+    variant?: 'circle' | 'square';
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/spinner.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+export const Spinner = 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.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    return (_jsx("cx-spinner", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Spinner.displayName = 'Spinner';

package/dist/generated/split-button.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import type { ClickDetail, MenuActionDetail, SplitMenuEntry } from './types.js';
+export interface SplitButtonRef extends HTMLElement {
+    /** Opens the dropdown menu. */
+    open(): void;
+    /** Closes the dropdown menu. */
+    close(): void;
+}
+export interface SplitButtonProps {
+    id: string;
+    label: string;
+    entries?: SplitMenuEntry[] | string;
+    variant?: 'filled' | 'outline' | 'ghost';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    iconLeading?: string;
+    disabled?: boolean;
+    primaryDisabled?: boolean;
+    triggerDisabled?: boolean;
+    triggerLabel?: string;
+    onClick?: (event: CustomEvent<ClickDetail>) => void;
+    onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<SplitButtonRef>>;

package/dist/generated/split-button.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const SplitButton = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onClickRef = useRef(props.onClick);
+    onClickRef.current = props.onClick;
+    const onActionRef = useRef(props.onAction);
+    onActionRef.current = props.onAction;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onClickRef.current?.(e);
+        el.addEventListener('cx-click', handler);
+        return () => el.removeEventListener('cx-click', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onActionRef.current?.(e);
+        el.addEventListener('cx-action', handler);
+        return () => el.removeEventListener('cx-action', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.entries != null) {
+            el.setAttribute('entries', typeof props.entries === 'object' ? JSON.stringify(props.entries) : String(props.entries));
+        }
+        else {
+            el.removeAttribute('entries');
+        }
+    }, [props.entries]);
+    // 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.iconLeading != null)
+        attrs['icon-leading'] = typeof props.iconLeading === 'object' ? JSON.stringify(props.iconLeading) : String(props.iconLeading);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    if (props.primaryDisabled)
+        attrs['primary-disabled'] = '';
+    if (props.triggerDisabled)
+        attrs['trigger-disabled'] = '';
+    if (props.triggerLabel != null)
+        attrs['trigger-label'] = typeof props.triggerLabel === 'object' ? JSON.stringify(props.triggerLabel) : String(props.triggerLabel);
+    return (_jsx("cx-split-button", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+SplitButton.displayName = 'SplitButton';

package/dist/generated/stepper.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { SelectDetail, StepperStep } from './types.js';
+export interface StepperProps {
+    id?: string;
+    label?: string;
+    steps?: StepperStep[] | string;
+    current?: number;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded';
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    linear?: boolean;
+    onChange?: (event: CustomEvent<SelectDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/stepper.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Stepper = 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.current != null) {
+            el.setAttribute('current', String(props.current));
+        }
+        else {
+            el.removeAttribute('current');
+        }
+    }, [props.current]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.steps != null) {
+            el.setAttribute('steps', typeof props.steps === 'object' ? JSON.stringify(props.steps) : String(props.steps));
+        }
+        else {
+            el.removeAttribute('steps');
+        }
+    }, [props.steps]);
+    // 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.orientation != null)
+        attrs['orientation'] = typeof props.orientation === 'object' ? JSON.stringify(props.orientation) : String(props.orientation);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.linear)
+        attrs['linear'] = '';
+    return (_jsx("cx-stepper", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Stepper.displayName = 'Stepper';

package/dist/generated/switch.d.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+export interface SwitchRef extends HTMLElement {
+    /** Focuses the switch input. */
+    focus(): void;
+}
+export interface SwitchProps {
+    id?: string;
+    label?: string;
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Boolean checked state (unlike Checkbox, which uses a string). */
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    helperText?: string;
+    error?: string;
+    description?: string;
+    unlabeled?: boolean;
+    onInput?: (event: CustomEvent<CheckedDetail>) => void;
+    onChange?: (event: CustomEvent<CheckedDetail>) => 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 Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<SwitchRef>>;

package/dist/generated/switch.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Switch = 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);
+    }, []);
+    // 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.checked)
+        attrs['checked'] = '';
+    if (props.disabled)
+        attrs['disabled'] = '';
+    if (props.required)
+        attrs['required'] = '';
+    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.description != null)
+        attrs['description'] = typeof props.description === 'object' ? JSON.stringify(props.description) : String(props.description);
+    if (props.unlabeled)
+        attrs['unlabeled'] = '';
+    return (_jsx("cx-switch", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Switch.displayName = 'Switch';

package/dist/generated/table.d.ts

@@ -0,0 +1,31 @@
+import type React from 'react';
+import type { EmptyStateConfig, FooterRow, KeyboardDetail, PageDetail, PaginationConfig, SortDetail, SortState, TableColumn, TableExpandDetail, TableRow, TableSelectDetail } from './types.js';
+export interface TableProps {
+    id?: string;
+    caption: string;
+    columns?: TableColumn[] | string;
+    rows?: TableRow[] | string;
+    variant?: 'plain' | 'striped' | 'bordered';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    selectable?: string;
+    selected?: string[] | string;
+    sorts?: SortState[] | string;
+    pagination?: PaginationConfig | string;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    footer?: FooterRow[] | string;
+    emptyState?: EmptyStateConfig | string;
+    columnOrder?: string[] | string;
+    disabled?: boolean;
+    loading?: number;
+    error?: string;
+    onSort?: (event: CustomEvent<SortDetail>) => void;
+    onSelect?: (event: CustomEvent<TableSelectDetail>) => void;
+    onExpand?: (event: CustomEvent<TableExpandDetail>) => void;
+    onPage?: (event: CustomEvent<PageDetail>) => void;
+    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+    onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLElement>>;