tyrell-react 1.0.0-TC10

package/dist/components/TyDatePicker.js

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+// React wrapper for ty-date-picker web component
+export const TyDatePicker = React.forwardRef(({ value, size, flavor, label, placeholder, required, disabled, name, clearable, format, locale, withTime, onChange, onOpen, onClose, ...props }, ref) => {
+    const elementRef = useRef(null);
+    // Handle ref forwarding
+    useEffect(() => {
+        if (ref && elementRef.current) {
+            if (typeof ref === 'function') {
+                ref(elementRef.current);
+            }
+            else {
+                ref.current = elementRef.current;
+            }
+        }
+    }, [ref]);
+    // Sync value property with the web component
+    useEffect(() => {
+        const element = elementRef.current;
+        if (element && value !== undefined) {
+            // Set the value property directly on the element
+            element.value = value || '';
+        }
+    }, [value]);
+    // Handle change events
+    const handleChange = useCallback((event) => {
+        const customEvent = event;
+        if (onChange) {
+            onChange(customEvent);
+        }
+    }, [onChange]);
+    // Handle open events
+    const handleOpen = useCallback((event) => {
+        const customEvent = event;
+        if (onOpen) {
+            onOpen(customEvent);
+        }
+    }, [onOpen]);
+    // Handle close events
+    const handleClose = useCallback((event) => {
+        const customEvent = event;
+        if (onClose) {
+            onClose(customEvent);
+        }
+    }, [onClose]);
+    // Set up event listeners
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const listeners = [];
+        if (onChange) {
+            element.addEventListener('change', handleChange);
+            listeners.push(['change', handleChange]);
+        }
+        if (onOpen) {
+            element.addEventListener('open', handleOpen);
+            listeners.push(['open', handleOpen]);
+        }
+        if (onClose) {
+            element.addEventListener('close', handleClose);
+            listeners.push(['close', handleClose]);
+        }
+        return () => {
+            listeners.forEach(([eventName, handler]) => {
+                element.removeEventListener(eventName, handler);
+            });
+        };
+    }, [handleChange, handleOpen, handleClose, onChange, onOpen, onClose]);
+    // Convert React props to web component attributes
+    const webComponentProps = {
+        ...props,
+        ref: elementRef,
+    };
+    // Add optional attributes only if they have values
+    if (value !== undefined) {
+        webComponentProps.value = value;
+    }
+    if (size) {
+        webComponentProps.size = size;
+    }
+    if (flavor) {
+        webComponentProps.flavor = flavor;
+    }
+    if (label) {
+        webComponentProps.label = label;
+    }
+    if (placeholder) {
+        webComponentProps.placeholder = placeholder;
+    }
+    if (required) {
+        webComponentProps.required = ''; // Boolean attributes as empty string
+    }
+    if (disabled) {
+        webComponentProps.disabled = ''; // Boolean attributes as empty string
+    }
+    if (name) {
+        webComponentProps.name = name;
+    }
+    if (clearable) {
+        webComponentProps.clearable = ''; // Boolean attributes as empty string
+    }
+    if (format) {
+        webComponentProps.format = format;
+    }
+    if (locale) {
+        webComponentProps.locale = locale;
+    }
+    if (withTime) {
+        webComponentProps['with-time'] = ''; // Convert camelCase to kebab-case
+    }
+    return React.createElement('ty-date-picker', webComponentProps);
+});
+TyDatePicker.displayName = 'TyDatePicker';
+//# sourceMappingURL=TyDatePicker.js.map

package/dist/components/TyDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyDatePicker.js","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/TyDropdown.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+export interface OptionData {
+    value: string;
+    text: string;
+    disabled?: boolean;
+}
+export interface TyDropdownEventDetail {
+    option: HTMLElement;
+}
+export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
+    style?: import('./TyInput').TyInputCSSProperties;
+    /** Semantic styling variant */
+    flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+    /** Dropdown size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Selected value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Dropdown label */
+    label?: string;
+    /** Disable the dropdown */
+    disabled?: boolean;
+    /** Make dropdown readonly */
+    readonly?: boolean;
+    /** Required field */
+    required?: boolean;
+    /** Enable search functionality */
+    searchable?: boolean;
+    /** Show clear button */
+    clearable?: boolean;
+    /** Disable clear button (alias for clearable={false}) */
+    notClearable?: boolean;
+    /** Debounce in milliseconds (0-5000) */
+    debounce?: number;
+    /** Disable search functionality (ClojureScript: not-searchable) */
+    notSearchable?: boolean;
+    /** @deprecated Use notSearchable instead. External search handling */
+    externalSearch?: boolean;
+    /** Form field name for form submission */
+    name?: string;
+    options?: OptionData[];
+    onChange?: (event: CustomEvent<TyDropdownEventDetail>) => void;
+    onSearch?: (event: CustomEvent<{
+        query: string;
+        element: HTMLElement;
+    }>) => void;
+    children?: React.ReactNode;
+}
+export declare const TyDropdown: React.ForwardRefExoticComponent<TyDropdownProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=TyDropdown.d.ts.map

package/dist/components/TyDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyDropdown.d.ts","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,WAAW,CAAC;CACrB;AAGD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACpG,KAAK,CAAC,EAAE,OAAO,WAAW,EAAE,oBAAoB,CAAC;IACjD,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,sEAAsE;IACtE,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAGvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAGjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,UAAU,qFA6ItB,CAAC"}

package/dist/components/TyDropdown.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+// React wrapper for ty-dropdown web component
+export const TyDropdown = React.forwardRef(({ options, children, onChange, onSearch, disabled, notSearchable, externalSearch, clearable, notClearable, debounce, name, value, ...props }, ref) => {
+    const elementRef = useRef(null);
+    const handleChange = useCallback((event) => {
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    const handleSearch = useCallback((event) => {
+        if (onSearch) {
+            onSearch(event);
+        }
+    }, [onSearch]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Listen for custom events from ty-dropdown
+        if (onChange) {
+            element.addEventListener('change', handleChange);
+        }
+        if (onSearch) {
+            element.addEventListener('search', handleSearch);
+        }
+        return () => {
+            if (onChange) {
+                element.removeEventListener('change', handleChange);
+            }
+            if (onSearch) {
+                element.removeEventListener('search', handleSearch);
+            }
+        };
+    }, [handleChange, handleSearch, onChange, onSearch]);
+    // Imperatively sync `value` to the underlying element's property whenever
+    // it changes. React 18's prop-to-property bridging for custom elements is
+    // unreliable for empty strings (programmatic resets), so we set the
+    // property directly to guarantee the dropdown clears on `value=""`.
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        if (element.value !== value) {
+            element.value = value ?? '';
+        }
+    }, [value]);
+    // Handle ref forwarding
+    useEffect(() => {
+        if (ref && elementRef.current) {
+            if (typeof ref === 'function') {
+                ref(elementRef.current);
+            }
+            else {
+                ref.current = elementRef.current;
+            }
+        }
+    }, [ref]);
+    // Render options from data if provided, otherwise use children
+    const renderContent = () => {
+        if (options && options.length > 0) {
+            // Data-driven approach - create ty-option elements
+            return options.map((option, index) => React.createElement('ty-option', {
+                key: option.value || index,
+                value: option.value,
+                ...(option.disabled && { disabled: "" }),
+            }, option.text));
+        }
+        // Slotted approach - use provided children
+        return children;
+    };
+    // Convert React props to web component attributes
+    const webComponentProps = {
+        ...props,
+        ref: elementRef,
+    };
+    // Add conditional attributes
+    if (disabled)
+        webComponentProps.disabled = '';
+    // Handle search functionality (prefer not-searchable over deprecated externalSearch)
+    if (notSearchable) {
+        webComponentProps['not-searchable'] = '';
+    }
+    else if (externalSearch) {
+        // Support deprecated externalSearch for backward compatibility
+        webComponentProps['not-searchable'] = '';
+    }
+    // Handle clearable functionality
+    if (clearable !== undefined) {
+        if (clearable) {
+            webComponentProps.clearable = '';
+        }
+        else {
+            webComponentProps['not-clearable'] = '';
+        }
+    }
+    if (notClearable) {
+        webComponentProps['not-clearable'] = '';
+    }
+    // Add debounce attribute
+    if (debounce !== undefined) {
+        webComponentProps.debounce = debounce;
+    }
+    // Add string attributes
+    if (name)
+        webComponentProps.name = name;
+    return React.createElement('ty-dropdown', webComponentProps, renderContent());
+});
+TyDropdown.displayName = 'TyDropdown';
+//# sourceMappingURL=TyDropdown.js.map

package/dist/components/TyDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyDropdown.js","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/TyIcon.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface TyIconProps extends React.HTMLAttributes<HTMLElement> {
+    /** Icon name from the icon registry (e.g., 'home', 'star', 'settings') */
+    name: string;
+    /** Icon size - relative (em-based) or absolute (pixel-based) */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '12' | '14' | '16' | '18' | '20' | '24' | '32' | '48';
+    /** Enable spinning animation */
+    spin?: boolean;
+    /** Enable pulse animation */
+    pulse?: boolean;
+    /** Animation tempo/speed */
+    tempo?: 'slow' | 'fast';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const TyIcon: React.ForwardRefExoticComponent<TyIconProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=TyIcon.d.ts.map

package/dist/components/TyIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyIcon.d.ts","sourceRoot":"","sources":["../../src/components/TyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IAEb,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExG,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,eAAO,MAAM,MAAM,iFA6ClB,CAAC"}

package/dist/components/TyIcon.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react';
+// React wrapper for ty-icon web component
+export const TyIcon = React.forwardRef(({ name, size, spin, pulse, tempo, className, ...props }, ref) => {
+    const elementRef = useRef(null);
+    // Handle ref forwarding
+    useEffect(() => {
+        if (ref && elementRef.current) {
+            if (typeof ref === 'function') {
+                ref(elementRef.current);
+            }
+            else {
+                ref.current = elementRef.current;
+            }
+        }
+    }, [ref]);
+    // Convert React props to web component attributes
+    const webComponentProps = {
+        ...props,
+        name,
+        ref: elementRef,
+    };
+    // Add optional attributes only if they have values
+    if (size) {
+        webComponentProps.size = size;
+    }
+    if (spin) {
+        webComponentProps.spin = ''; // Boolean attributes as empty string
+    }
+    if (pulse) {
+        webComponentProps.pulse = ''; // Boolean attributes as empty string
+    }
+    if (tempo) {
+        webComponentProps.tempo = tempo;
+    }
+    if (className) {
+        webComponentProps.class = className; // HTML attribute is 'class', not 'className'
+    }
+    return React.createElement('ty-icon', webComponentProps);
+});
+TyIcon.displayName = 'TyIcon';
+//# sourceMappingURL=TyIcon.js.map

package/dist/components/TyIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyIcon.js","sourceRoot":"","sources":["../../src/components/TyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAuBjD,0CAA0C;AAC1C,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,kDAAkD;IAClD,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,IAAI;QACJ,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,mDAAmD;IACnD,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAE,qCAAqC;IACrE,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,KAAK,GAAG,EAAE,CAAC,CAAE,qCAAqC;IACtE,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,iBAAiB,CAAC,KAAK,GAAG,SAAS,CAAC,CAAE,6CAA6C;IACrF,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC3D,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/components/TyInput.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+export interface TyInputEventDetail {
+    value: any;
+    formattedValue: string;
+    rawValue: string;
+    originalEvent: Event;
+}
+export interface TyInputCSSProperties extends React.CSSProperties {
+    '--input-bg'?: string;
+    '--input-color'?: string;
+    '--input-border'?: string;
+    '--input-border-hover'?: string;
+    '--input-border-focus'?: string;
+    '--input-shadow-focus'?: string;
+    '--input-placeholder'?: string;
+    '--input-disabled-bg'?: string;
+    '--input-disabled-border'?: string;
+    '--input-disabled-color'?: string;
+}
+export interface TyInputProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onFocus' | 'onBlur' | 'style'> {
+    style?: TyInputCSSProperties;
+    /** Input type */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'currency' | 'percent' | 'compact';
+    /** Semantic styling variant */
+    flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+    /** Input size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Input value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Input label */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Disable the input */
+    disabled?: boolean;
+    /** Required field */
+    required?: boolean;
+    /** Form field name for form submission */
+    name?: string;
+    /** Checked state for checkbox inputs */
+    checked?: boolean;
+    currency?: string;
+    locale?: string;
+    precision?: string | number;
+    /** Debounce in milliseconds (0-5000) */
+    debounce?: number;
+    /**
+     * Fires on every keystroke (React convention)
+     * Maps to native 'input' event from ty-input
+     */
+    onChange?: (event: CustomEvent<TyInputEventDetail>) => void;
+    /**
+     * Fires on blur if value changed (native DOM behavior)
+     * Maps to native 'change' event from ty-input
+     */
+    onChangeCommit?: (event: CustomEvent<TyInputEventDetail>) => void;
+    /** Standard focus event */
+    onFocus?: (event: FocusEvent) => void;
+    /** Standard blur event */
+    onBlur?: (event: FocusEvent) => void;
+}
+export declare const TyInput: React.ForwardRefExoticComponent<TyInputProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=TyInput.d.ts.map

package/dist/components/TyInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyInput.d.ts","sourceRoot":"","sources":["../../src/components/TyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,KAAK,CAAC;CACtB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,aAAa;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAGD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GACxE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAErC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAE5D;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAElE,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAGD,eAAO,MAAM,OAAO,kFAmHnB,CAAC"}

package/dist/components/TyInput.js

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+// React wrapper for ty-input web component
+export const TyInput = React.forwardRef(({ onChange, onChangeCommit, onFocus, onBlur, disabled, name, checked, debounce, ...props }, ref) => {
+    const elementRef = useRef(null);
+    // Map onChange to input event (React convention)
+    const handleInput = useCallback((event) => {
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    // Map onChangeCommit to change event (blur behavior)
+    const handleChangeCommit = useCallback((event) => {
+        if (onChangeCommit) {
+            onChangeCommit(event);
+        }
+    }, [onChangeCommit]);
+    const handleFocus = useCallback((event) => {
+        if (onFocus) {
+            onFocus(event);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((event) => {
+        if (onBlur) {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Listen for custom input/change events from ty-input
+        // Map onChange → input event (React convention)
+        if (onChange) {
+            element.addEventListener('input', handleInput);
+        }
+        // Map onChangeCommit → change event (blur behavior)
+        if (onChangeCommit) {
+            element.addEventListener('change', handleChangeCommit);
+        }
+        // Listen for standard focus/blur events
+        if (onFocus) {
+            element.addEventListener('focus', handleFocus);
+        }
+        if (onBlur) {
+            element.addEventListener('blur', handleBlur);
+        }
+        return () => {
+            if (onChange) {
+                element.removeEventListener('input', handleInput);
+            }
+            if (onChangeCommit) {
+                element.removeEventListener('change', handleChangeCommit);
+            }
+            if (onFocus) {
+                element.removeEventListener('focus', handleFocus);
+            }
+            if (onBlur) {
+                element.removeEventListener('blur', handleBlur);
+            }
+        };
+    }, [handleInput, handleChangeCommit, handleFocus, handleBlur, onChange, onChangeCommit, onFocus, onBlur]);
+    // Handle ref forwarding
+    useEffect(() => {
+        if (ref && elementRef.current) {
+            if (typeof ref === 'function') {
+                ref(elementRef.current);
+            }
+            else {
+                ref.current = elementRef.current;
+            }
+        }
+    }, [ref]);
+    // Imperatively sync `value` to the underlying element's property whenever
+    // the React prop changes. React 18's prop-to-property bridging for custom
+    // elements is unreliable for empty strings, so we set the property directly
+    // to guarantee resets (`value=""`) clear the visible content.
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const next = props.value ?? '';
+        if (element.value !== next) {
+            element.value = next;
+        }
+    }, [props.value]);
+    // Convert React props to web component attributes
+    const webComponentProps = {
+        ...props,
+        ref: elementRef,
+    };
+    // Add conditional attributes
+    if (disabled)
+        webComponentProps.disabled = '';
+    if (checked)
+        webComponentProps.checked = '';
+    // Add string attributes
+    if (name)
+        webComponentProps.name = name;
+    // Add debounce attribute
+    if (debounce !== undefined)
+        webComponentProps.debounce = debounce;
+    return React.createElement('ty-input', webComponentProps);
+});
+TyInput.displayName = 'TyInput';
+//# sourceMappingURL=TyInput.js.map

package/dist/components/TyInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyInput.js","sourceRoot":"","sources":["../../src/components/TyInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/TyModal.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface TyModalEventDetail {
+    reason?: 'programmatic' | 'native' | 'backdrop' | 'escape' | 'close-button';
+    returnValue?: string;
+}
+export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
+    /** Controls modal visibility */
+    open?: boolean;
+    /** Show backdrop behind modal (default: true) */
+    backdrop?: boolean;
+    /** Allow closing modal by clicking backdrop (default: true) */
+    closeOnOutsideClick?: boolean;
+    /** Allow closing modal with Escape key (default: true) */
+    closeOnEscape?: boolean;
+    /** Require confirmation before closing when there are unsaved changes */
+    protected?: boolean;
+    /** React event handlers */
+    onOpen?: (event: CustomEvent<TyModalEventDetail>) => void;
+    onClose?: (event: CustomEvent<TyModalEventDetail>) => void;
+    /** Modal content */
+    children?: React.ReactNode;
+}
+export interface TyModalRef {
+    show: () => void;
+    hide: () => void;
+    element: HTMLElement | null;
+}
+export declare const TyModal: React.ForwardRefExoticComponent<TyModalProps & React.RefAttributes<TyModalRef>>;
+//# sourceMappingURL=TyModal.d.ts.map

package/dist/components/TyModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyModal.d.ts","sourceRoot":"","sources":["../../src/components/TyModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAE3D,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAGD,eAAO,MAAM,OAAO,iFAkGnB,CAAC"}

package/dist/components/TyModal.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef, useImperativeHandle } from 'react';
+// React wrapper for ty-modal web component
+export const TyModal = React.forwardRef(({ open, backdrop, closeOnOutsideClick, closeOnEscape, protected: isProtected, onOpen, onClose, children, ...props }, ref) => {
+    const elementRef = useRef(null);
+    // Expose imperative methods through ref
+    useImperativeHandle(ref, () => ({
+        show: () => {
+            if (elementRef.current && typeof elementRef.current.show === 'function') {
+                elementRef.current.show();
+            }
+        },
+        hide: () => {
+            if (elementRef.current && typeof elementRef.current.hide === 'function') {
+                elementRef.current.hide();
+            }
+        },
+        element: elementRef.current,
+    }), []);
+    // Handle modal events
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const handleOpen = (event) => {
+            if (onOpen) {
+                onOpen(event);
+            }
+        };
+        const handleClose = (event) => {
+            if (onClose) {
+                onClose(event);
+            }
+        };
+        // Listen for custom modal events
+        if (onOpen) {
+            element.addEventListener('open', handleOpen);
+        }
+        if (onClose) {
+            element.addEventListener('close', handleClose);
+        }
+        return () => {
+            if (onOpen) {
+                element.removeEventListener('open', handleOpen);
+            }
+            if (onClose) {
+                element.removeEventListener('close', handleClose);
+            }
+        };
+    }, [onOpen, onClose]);
+    // Convert React props to web component attributes
+    const webComponentProps = {
+        ...props,
+        ref: elementRef,
+    };
+    // Add boolean attributes using correct HTML attribute names
+    if (open) {
+        webComponentProps.open = ''; // Boolean attributes as empty string
+    }
+    if (backdrop === false) { // Only set if explicitly false (default is true)
+        webComponentProps.backdrop = 'false';
+    }
+    if (closeOnOutsideClick === false) { // Only set if explicitly false (default is true)
+        webComponentProps['close-on-outside-click'] = 'false';
+    }
+    if (closeOnEscape === false) { // Only set if explicitly false (default is true)
+        webComponentProps['close-on-escape'] = 'false';
+    }
+    if (isProtected) {
+        webComponentProps.protected = ''; // Boolean attributes as empty string
+    }
+    return React.createElement('ty-modal', webComponentProps, children);
+});
+TyModal.displayName = 'TyModal';
+//# sourceMappingURL=TyModal.js.map