@colletdev/react 0.1.3

package/dist/generated/button.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Button = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onClickRef = useRef(props.onClick);
+    onClickRef.current = props.onClick;
+    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);
+    }, []);
+    // Build attribute object
+    const attrs = {};
+    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.disabled)
+        attrs['disabled'] = '';
+    if (props.iconLeading != null)
+        attrs['icon-leading'] = typeof props.iconLeading === 'object' ? JSON.stringify(props.iconLeading) : String(props.iconLeading);
+    if (props.iconTrailing != null)
+        attrs['icon-trailing'] = typeof props.iconTrailing === 'object' ? JSON.stringify(props.iconTrailing) : String(props.iconTrailing);
+    if (props.iconOnly != null)
+        attrs['icon-only'] = typeof props.iconOnly === 'object' ? JSON.stringify(props.iconOnly) : String(props.iconOnly);
+    if (props.ariaLabel != null)
+        attrs['aria-label'] = typeof props.ariaLabel === 'object' ? JSON.stringify(props.ariaLabel) : String(props.ariaLabel);
+    if (props.kind != null)
+        attrs['kind'] = typeof props.kind === 'object' ? JSON.stringify(props.kind) : String(props.kind);
+    if (props.pressed)
+        attrs['pressed'] = '';
+    if (props.href != null)
+        attrs['href'] = typeof props.href === 'object' ? JSON.stringify(props.href) : String(props.href);
+    return (_jsx("cx-button", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Button.displayName = 'Button';

package/dist/generated/card.d.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import type { ClickDetail, KeyboardDetail } from './types.js';
+export interface CardProps {
+    id?: string;
+    label?: string;
+    variant?: 'elevated' | 'outlined' | 'filled';
+    shape?: 'rounded' | 'sharp' | 'soft';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    clickable?: boolean;
+    texture?: boolean;
+    onClick?: (event: CustomEvent<ClickDetail>) => void;
+    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+    onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/card.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Card = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onClickRef = useRef(props.onClick);
+    onClickRef.current = props.onClick;
+    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) => 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) => 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.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.clickable)
+        attrs['clickable'] = '';
+    if (props.texture)
+        attrs['texture'] = '';
+    return (_jsxs("cx-card", { 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 }), props.children] }));
+});
+Card.displayName = 'Card';

package/dist/generated/carousel.d.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import type { CarouselDetail, CarouselSlide } from './types.js';
+export interface CarouselRef extends HTMLElement {
+    /** Advances to the next slide. */
+    next(): void;
+    /** Returns to the previous slide. */
+    prev(): void;
+    /** Navigates to the slide at the given index. */
+    goTo(index: number): void;
+}
+export interface CarouselProps {
+    id?: string;
+    label?: string;
+    variant?: 'editorial' | 'card';
+    shape?: 'sharp' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    slides?: CarouselSlide[] | string;
+    autoplay?: 'off' | 'on';
+    autoplayInterval?: number;
+    loopMode?: boolean;
+    motionBlur?: boolean;
+    customCursor?: boolean;
+    indicator?: string;
+    onChange?: (event: CustomEvent<CarouselDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;

package/dist/generated/carousel.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Carousel = 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.autoplayInterval != null) {
+            el.setAttribute('autoplay-interval', String(props.autoplayInterval));
+        }
+        else {
+            el.removeAttribute('autoplay-interval');
+        }
+    }, [props.autoplayInterval]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.slides != null) {
+            el.setAttribute('slides', typeof props.slides === 'object' ? JSON.stringify(props.slides) : String(props.slides));
+        }
+        else {
+            el.removeAttribute('slides');
+        }
+    }, [props.slides]);
+    // 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.autoplay != null)
+        attrs['autoplay'] = typeof props.autoplay === 'object' ? JSON.stringify(props.autoplay) : String(props.autoplay);
+    if (props.loopMode)
+        attrs['loop-mode'] = '';
+    if (props.motionBlur)
+        attrs['motion-blur'] = '';
+    if (props.customCursor)
+        attrs['custom-cursor'] = '';
+    if (props.indicator != null)
+        attrs['indicator'] = typeof props.indicator === 'object' ? JSON.stringify(props.indicator) : String(props.indicator);
+    return (_jsx("cx-carousel", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Carousel.displayName = 'Carousel';

package/dist/generated/chat-input.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import type { FocusDetail, KeyboardDetail } from './types.js';
+export interface ChatInputRef extends HTMLElement {
+    /** Focuses the textarea. */
+    focus(): void;
+}
+export interface ChatInputProps {
+    id?: string;
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    maxRows?: number;
+    showActionButton?: boolean;
+    actionLabel?: string;
+    submitLabel?: string;
+    label?: string;
+    slotted?: 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 ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<ChatInputRef>>;

package/dist/generated/chat-input.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const ChatInput = 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.value != null) {
+            el.setAttribute('value', String(props.value));
+        }
+        else {
+            el.removeAttribute('value');
+        }
+    }, [props.value]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.maxRows != null) {
+            el.setAttribute('max-rows', String(props.maxRows));
+        }
+        else {
+            el.removeAttribute('max-rows');
+        }
+    }, [props.maxRows]);
+    // 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.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.placeholder != null)
+        attrs['placeholder'] = typeof props.placeholder === 'object' ? JSON.stringify(props.placeholder) : String(props.placeholder);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    if (props.showActionButton)
+        attrs['show-action-button'] = '';
+    if (props.actionLabel != null)
+        attrs['action-label'] = typeof props.actionLabel === 'object' ? JSON.stringify(props.actionLabel) : String(props.actionLabel);
+    if (props.submitLabel != null)
+        attrs['submit-label'] = typeof props.submitLabel === 'object' ? JSON.stringify(props.submitLabel) : String(props.submitLabel);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.slotted)
+        attrs['slotted'] = '';
+    return (_jsx("cx-chat-input", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+ChatInput.displayName = 'ChatInput';

package/dist/generated/checkbox.d.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+export interface CheckboxRef extends HTMLElement {
+    /** Focuses the checkbox input. */
+    focus(): void;
+}
+export interface CheckboxProps {
+    id?: string;
+    label?: string;
+    shape?: 'sharp' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Three-state check. Accepts `true`/`false` as aliases for `'checked'`/unchecked, and keeps `'indeterminate'` for the third state. */
+    checked?: boolean | '' | 'checked' | 'indeterminate';
+    disabled?: boolean;
+    required?: boolean;
+    helperText?: string;
+    error?: 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 Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<CheckboxRef>>;

package/dist/generated/checkbox.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Checkbox = 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);
+    {
+        const value = props.checked === true ? 'checked' : props.checked === false ? undefined : props.checked;
+        if (value != null)
+            attrs['checked'] = value;
+    }
+    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.unlabeled)
+        attrs['unlabeled'] = '';
+    return (_jsx("cx-checkbox", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Checkbox.displayName = 'Checkbox';

package/dist/generated/code-block.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+export interface CodeBlockProps {
+    id?: string;
+    content?: string;
+    variant?: string;
+    shape?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    language?: string;
+    filename?: string;
+    lineNumbers?: boolean;
+    copyButton?: boolean;
+    trafficLights?: boolean;
+    slotted?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/code-block.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+export const CodeBlock = 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.content != null)
+        attrs['content'] = typeof props.content === 'object' ? JSON.stringify(props.content) : String(props.content);
+    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.language != null)
+        attrs['language'] = typeof props.language === 'object' ? JSON.stringify(props.language) : String(props.language);
+    if (props.filename != null)
+        attrs['filename'] = typeof props.filename === 'object' ? JSON.stringify(props.filename) : String(props.filename);
+    if (props.lineNumbers)
+        attrs['line-numbers'] = '';
+    if (props.copyButton)
+        attrs['copy-button'] = '';
+    if (props.trafficLights)
+        attrs['traffic-lights'] = '';
+    if (props.slotted)
+        attrs['slotted'] = '';
+    return (_jsx("cx-code-block", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+CodeBlock.displayName = 'CodeBlock';

package/dist/generated/collapsible.d.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+import type { CollapsibleDetail } from './types.js';
+export interface CollapsibleRef extends HTMLElement {
+    /** Expands the collapsible content. */
+    open(): void;
+    /** Collapses the content. */
+    close(): void;
+    /** Toggles the collapsible state. */
+    toggle(): void;
+}
+export interface CollapsibleProps {
+    id?: string;
+    label?: string;
+    triggerHtml?: string;
+    open?: boolean;
+    icon?: string;
+    noIcon?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    onChange?: (event: CustomEvent<CollapsibleDetail>) => void;
+    children?: React.ReactNode;
+    trigger?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<CollapsibleRef>>;

package/dist/generated/collapsible.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Collapsible = 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);
+    }, []);
+    // 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.triggerHtml != null)
+        attrs['trigger-html'] = typeof props.triggerHtml === 'object' ? JSON.stringify(props.triggerHtml) : String(props.triggerHtml);
+    if (props.open)
+        attrs['open'] = '';
+    if (props.icon != null)
+        attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
+    if (props.noIcon)
+        attrs['no-icon'] = '';
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    return (_jsxs("cx-collapsible", { ref: ref, ...attrs, className: props.className, style: props.style, children: [props.trigger && _jsx("div", { slot: "trigger", style: { display: 'contents' }, children: props.trigger }), props.children] }));
+});
+Collapsible.displayName = 'Collapsible';

package/dist/generated/date-picker.d.ts

@@ -0,0 +1,39 @@
+import type React from 'react';
+import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+export interface DatePickerRef extends HTMLElement {
+    /** Opens the calendar panel. */
+    open(): void;
+    /** Closes the calendar panel. */
+    close(): void;
+    /** Focuses the trigger button. */
+    focus(): void;
+}
+export interface DatePickerProps {
+    id?: string;
+    label: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    selected?: string;
+    min?: string;
+    max?: string;
+    disabledDates?: string[] | string;
+    format?: 'iso' | 'us-short' | 'eu-short' | 'eu-dot';
+    firstDay?: 'monday' | 'sunday';
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    name?: string;
+    onInput?: (event: CustomEvent<InputDetail>) => void;
+    onChange?: (event: CustomEvent<InputDetail>) => 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 DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatePickerRef>>;