@colletdev/react 0.1.3

package/dist/generated/progress.js

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

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

@@ -0,0 +1,24 @@
+import type React from 'react';
+import type { FocusDetail, KeyboardDetail, RadioOption, SelectDetail } from './types.js';
+export interface RadioGroupProps {
+    name?: string;
+    legend: string;
+    options?: RadioOption[] | string;
+    shape?: 'round' | 'rounded';
+    orientation?: 'vertical' | 'horizontal';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    selected?: string;
+    disabled?: boolean;
+    required?: boolean;
+    helperText?: string;
+    error?: string;
+    onInput?: (event: CustomEvent) => 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 RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/radio-group.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const RadioGroup = 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.options != null) {
+            el.setAttribute('options', typeof props.options === 'object' ? JSON.stringify(props.options) : String(props.options));
+        }
+        else {
+            el.removeAttribute('options');
+        }
+    }, [props.options]);
+    // Build attribute object
+    const attrs = {};
+    if (props.legend != null)
+        attrs['legend'] = typeof props.legend === 'object' ? JSON.stringify(props.legend) : String(props.legend);
+    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.selected != null)
+        attrs['selected'] = typeof props.selected === 'object' ? JSON.stringify(props.selected) : String(props.selected);
+    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);
+    return (_jsx("cx-radio-group", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+RadioGroup.displayName = 'RadioGroup';

package/dist/generated/scrollbar.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+export interface ScrollbarProps {
+    id?: string;
+    shape?: 'sharp' | 'rounded' | 'pill';
+    track?: 'with-track' | 'floating';
+    axis?: 'vertical' | 'horizontal' | 'both';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    height?: string;
+    label?: string;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Scrollbar: React.ForwardRefExoticComponent<ScrollbarProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/scrollbar.js

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

package/dist/generated/search-bar.d.ts

@@ -0,0 +1,33 @@
+import type React from 'react';
+import type { FocusDetail, KeyboardDetail } from './types.js';
+export interface SearchBarRef extends HTMLElement {
+    /** Focuses the search input. */
+    focus(): void;
+    /** Clears the search input value. */
+    clear(): void;
+}
+export interface SearchBarProps {
+    id?: string;
+    placeholder?: string;
+    label?: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    name?: string;
+    value?: string;
+    debounceMs?: number;
+    loading?: boolean;
+    shortcut?: string;
+    expandable?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    controls?: string;
+    shimmer?: boolean;
+    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 SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<SearchBarRef>>;

package/dist/generated/search-bar.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const SearchBar = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    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) => 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.value != null) {
+            el.setAttribute('value', String(props.value));
+        }
+        else {
+            el.removeAttribute('value');
+        }
+    }, [props.value]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.loading != null) {
+            el.setAttribute('loading', String(props.loading));
+        }
+        else {
+            el.removeAttribute('loading');
+        }
+    }, [props.loading]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.debounceMs != null) {
+            el.setAttribute('debounce-ms', String(props.debounceMs));
+        }
+        else {
+            el.removeAttribute('debounce-ms');
+        }
+    }, [props.debounceMs]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.placeholder != null)
+        attrs['placeholder'] = typeof props.placeholder === 'object' ? JSON.stringify(props.placeholder) : String(props.placeholder);
+    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.shortcut != null)
+        attrs['shortcut'] = typeof props.shortcut === 'object' ? JSON.stringify(props.shortcut) : String(props.shortcut);
+    if (props.expandable)
+        attrs['expandable'] = '';
+    if (props.disabled)
+        attrs['disabled'] = '';
+    if (props.readonly)
+        attrs['readonly'] = '';
+    if (props.controls != null)
+        attrs['controls'] = typeof props.controls === 'object' ? JSON.stringify(props.controls) : String(props.controls);
+    if (props.shimmer)
+        attrs['shimmer'] = '';
+    return (_jsx("cx-search-bar", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+SearchBar.displayName = 'SearchBar';

package/dist/generated/select.d.ts

@@ -0,0 +1,36 @@
+import type React from 'react';
+import type { FocusDetail, InputDetail, KeyboardDetail, OptionGroup, SelectDetail, SelectOption } from './types.js';
+export interface SelectRef extends HTMLElement {
+    /** Opens the dropdown. */
+    open(): void;
+    /** Closes the dropdown. */
+    close(): void;
+    /** Focuses the trigger button. */
+    focus(): void;
+}
+export interface SelectProps {
+    id?: string;
+    label?: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    mode?: 'single' | 'multiple';
+    selected?: string[] | string;
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    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 Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectRef>>;

package/dist/generated/select.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Select = 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.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'] = '';
+    return (_jsx("cx-select", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Select.displayName = 'Select';

package/dist/generated/serialize.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare function serializeContent(content: string | ReactNode): string;

package/dist/generated/serialize.js

@@ -0,0 +1,13 @@
+// Serialize React.ReactNode content fields to HTML strings.
+// Used by Tier 2 wrappers (Accordion, Tabs, Table) that pass
+// HTML content as JSON attributes to WASM-rendered custom elements.
+import { renderToStaticMarkup } from 'react-dom/server';
+export function serializeContent(content) {
+    if (typeof content === 'string')
+        return content;
+    if (content == null || typeof content === 'boolean')
+        return '';
+    if (typeof content === 'number')
+        return String(content);
+    return renderToStaticMarkup(content);
+}

package/dist/generated/sidebar.d.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+import type { CloseDetail, NavigateDetail, SidebarGroup } from './types.js';
+export interface SidebarRef extends HTMLElement {
+    /** Opens the mobile sidebar drawer. */
+    open(): void;
+    /** Closes the mobile sidebar drawer. */
+    close(): void;
+}
+export interface SidebarProps {
+    id?: string;
+    label?: string;
+    groups?: SidebarGroup[] | string;
+    separatorsAfter?: string;
+    side?: 'left' | 'right';
+    state?: 'expanded' | 'narrow' | 'hidden';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    onClose?: (event: CustomEvent<CloseDetail>) => void;
+    onNavigate?: (event: CustomEvent<NavigateDetail>) => void;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<SidebarRef>>;

package/dist/generated/sidebar.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Sidebar = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onCloseRef = useRef(props.onClose);
+    onCloseRef.current = props.onClose;
+    const onNavigateRef = useRef(props.onNavigate);
+    onNavigateRef.current = props.onNavigate;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onCloseRef.current?.(e);
+        el.addEventListener('cx-close', handler);
+        return () => el.removeEventListener('cx-close', handler);
+    }, []);
+    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.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.separatorsAfter != null)
+        attrs['separators-after'] = typeof props.separatorsAfter === 'object' ? JSON.stringify(props.separatorsAfter) : String(props.separatorsAfter);
+    if (props.side != null)
+        attrs['side'] = typeof props.side === 'object' ? JSON.stringify(props.side) : String(props.side);
+    if (props.state != null)
+        attrs['state'] = typeof props.state === 'object' ? JSON.stringify(props.state) : String(props.state);
+    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);
+    return (_jsxs("cx-sidebar", { ref: ref, ...attrs, className: props.className, style: props.style, children: [props.header && _jsx("div", { slot: "header", style: { display: 'contents' }, children: props.header }), props.footer && _jsx("div", { slot: "footer", style: { display: 'contents' }, children: props.footer })] }));
+});
+Sidebar.displayName = 'Sidebar';

package/dist/generated/skeleton.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export interface SkeletonProps {
+    id?: string;
+    variant?: 'text' | 'circle' | 'rectangular';
+    animation?: 'pulse' | 'wave';
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    lines?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLElement>>;