tyrell-react 1.0.0-TC11 → 1.0.0-TC17

package/src/components/TyCheckbox.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Checkbox component
 export interface TyCheckboxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
@@ -109,16 +110,13 @@ export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
       }
     }, [ref]);
 
-    // Imperatively sync `checked` to the underlying property. React 18 sets
-    // boolean attributes as empty strings on first render but doesn't reliably
-    // remove them when the prop flips back to false on a custom element.
-    useEffect(() => {
-      const element = elementRef.current as any;
-      if (!element) return;
-      if (Boolean(element.checked) !== Boolean(checked)) {
-        element.checked = Boolean(checked);
-      }
-    }, [checked]);
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    // React 18 sets boolean attributes as empty strings on first render but
+    // doesn't reliably remove them when the prop flips back to false on a
+    // custom element. React 19+ handles this natively.
+    const isChecked = useBooleanProperty(elementRef, 'checked', checked);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
@@ -127,9 +125,9 @@ export const TyCheckbox = React.forwardRef<HTMLElement, TyCheckboxProps>(
     };
 
     // Add boolean attributes
-    if (checked) webComponentProps.checked = '';
-    if (disabled) webComponentProps.disabled = '';
-    if (required) webComponentProps.required = '';
+    if (isChecked) webComponentProps.checked = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isRequired) webComponentProps.required = '';
     
     // Add string attributes
     if (value) webComponentProps.value = value;

package/src/components/TyCopy.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Copy component
 export interface TyCopyProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
@@ -53,6 +54,10 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
       }
     }, [ref]);
 
+    const isMultiline = useBooleanProperty(elementRef, 'multiline', multiline);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
@@ -65,11 +70,11 @@ export const TyCopy = React.forwardRef<HTMLElement, TyCopyProps>(
     if (size) webComponentProps.size = size;
     if (flavor) webComponentProps.flavor = flavor;
     if (format) webComponentProps.format = format;
-    
+
     // Add boolean attributes
-    if (multiline) webComponentProps.multiline = '';
-    if (disabled) webComponentProps.disabled = '';
-    if (required) webComponentProps.required = '';
+    if (isMultiline) webComponentProps.multiline = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isRequired) webComponentProps.required = '';
 
     return React.createElement('ty-copy', webComponentProps);
   }

package/src/components/TyDatePicker.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty DatePicker component
 export interface TyDatePickerEventDetail {
@@ -92,8 +94,11 @@ export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
       }
     }, [ref]);
 
-    // Sync value property with the web component
+    // Sync value property with the web component.
+    // React 18 workaround: prop-to-property bridging is unreliable for empty
+    // strings on custom elements. React 19+ handles this natively.
     useEffect(() => {
+      if (!needsPropertyBridge) return;
       const element = elementRef.current;
       if (element && value !== undefined) {
         // Set the value property directly on the element
@@ -181,22 +186,18 @@ export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
       webComponentProps.placeholder = placeholder;
     }
 
-    if (required) {
-      webComponentProps.required = '';  // Boolean attributes as empty string
-    }
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isClearable = useBooleanProperty(elementRef, 'clearable', clearable);
 
-    if (disabled) {
-      webComponentProps.disabled = '';  // Boolean attributes as empty string
-    }
+    if (isRequired) webComponentProps.required = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isClearable) webComponentProps.clearable = '';
 
     if (name) {
       webComponentProps.name = name;
     }
 
-    if (clearable) {
-      webComponentProps.clearable = '';  // Boolean attributes as empty string
-    }
-
     if (format) {
       webComponentProps.format = format;
     }

package/src/components/TyDropdown.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
 
 // Option data structure for data-driven approach
 export interface OptionData {
@@ -32,30 +34,42 @@ export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>,
   
   /** Disable the dropdown */
   disabled?: boolean;
-  
+
+  /**
+   * Loading state — replaces the open popup options list with a centered
+   * spinner. Search input stays usable. Pair with `externalSearch` while
+   * fetching results from a parent-owned data source.
+   */
+  loading?: 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 */
+
+  /**
+   * Switch to external (remote) search mode. Default is `false` — the dropdown
+   * filters its options locally. When `true`, the dropdown stops filtering and
+   * dispatches `search` events on each keystroke; the parent owns filtering
+   * and updates the children.
+   */
   externalSearch?: boolean;
+
+  /** @deprecated Use `externalSearch` instead. */
+  notSearchable?: boolean;
+
+  /** @deprecated Use `externalSearch` instead. Pass `searchable={false}` was equivalent to `externalSearch={true}`. */
+  searchable?: boolean;
   
   /** Form field name for form submission */
   name?: string;
@@ -79,8 +93,10 @@ export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
     onChange,
     onSearch,
     disabled,
-    notSearchable,
+    loading,
     externalSearch,
+    notSearchable,
+    searchable,
     clearable,
     notClearable,
     debounce,
@@ -129,7 +145,9 @@ export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
     // 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=""`.
+    // React 19+ handles this natively, so the effect short-circuits there.
     useEffect(() => {
+      if (!needsPropertyBridge) return;
       const element = elementRef.current as any;
       if (!element) return;
       if (element.value !== value) {
@@ -169,41 +187,45 @@ export const TyDropdown = React.forwardRef<HTMLElement, TyDropdownProps>(
       return children;
     };
 
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isLoading = useBooleanProperty(elementRef, 'loading', loading);
+    const isExternalSearch = coerceBool(externalSearch) || coerceBool(notSearchable) || searchable === false;
+    useBooleanProperty(elementRef, 'externalSearch', isExternalSearch);
+    // clearable: explicit boolean OR the `notClearable` alias inverts it
+    const isClearable = clearable !== undefined
+      ? coerceBool(clearable)
+      : (coerceBool(notClearable) ? false : undefined);
+    useEffect(() => {
+      if (!needsPropertyBridge) return;
+      if (isClearable === undefined) return;
+      const el = elementRef.current as any;
+      if (!el) return;
+      if (Boolean(el.clearable) !== isClearable) el.clearable = isClearable;
+    }, [isClearable]);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...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'] = '';
-    }
-    
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isLoading) webComponentProps.loading = '';
+    if (isExternalSearch) webComponentProps['external-search'] = '';
+
     // Handle clearable functionality
-    if (clearable !== undefined) {
-      if (clearable) {
-        webComponentProps.clearable = '';
-      } else {
-        webComponentProps['not-clearable'] = '';
-      }
-    }
-    
-    if (notClearable) {
+    if (isClearable === true) {
+      webComponentProps.clearable = '';
+    } else if (isClearable === false) {
       webComponentProps['not-clearable'] = '';
     }
-    
+
     // Add debounce attribute
     if (debounce !== undefined) {
       webComponentProps.debounce = debounce;
     }
-    
+
     // Add string attributes
     if (name) webComponentProps.name = name;
 

package/src/components/TyFileUpload.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
+
+// Type definitions for Ty File Upload component
+export interface TyFileUploadProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+  /** Form field name — used as the FormData key */
+  name?: string;
+
+  /** Allow selecting multiple files */
+  multiple?: boolean;
+
+  /** File type filter passed to the underlying input (e.g. "image/*", ".pdf,.docx") */
+  accept?: string;
+
+  /** Field label rendered above the drop zone */
+  label?: string;
+
+  /** Hint text shown inside the drop zone when no files are selected */
+  placeholder?: string;
+
+  /** Disable interaction */
+  disabled?: boolean;
+
+  /** Mark the field as required (shows asterisk) */
+  required?: boolean;
+
+  /** Validation error message — also applies danger border styling */
+  error?: string;
+
+  /**
+   * Fires when the selection changes — browse, drag-drop, or remove.
+   * Maps to the native 'change' event from ty-file-upload.
+   */
+  onChange?: (event: CustomEvent<TyFileUploadEventDetail>) => void;
+}
+
+export interface TyFileUploadEventDetail {
+  value: File[];
+  files: File[];
+  names: string[];
+}
+
+// React wrapper for ty-file-upload web component
+export const TyFileUpload = React.forwardRef<HTMLElement, TyFileUploadProps>(
+  ({
+    name,
+    multiple,
+    accept,
+    label,
+    placeholder,
+    disabled,
+    required,
+    error,
+    onChange,
+    ...props
+  }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+
+      const handleChange = (event: Event) => {
+        if (onChange) {
+          onChange(event as CustomEvent<TyFileUploadEventDetail>);
+        }
+      };
+
+      element.addEventListener('change', handleChange);
+      return () => {
+        element.removeEventListener('change', handleChange);
+      };
+    }, [onChange]);
+
+    useEffect(() => {
+      if (ref && elementRef.current) {
+        if (typeof ref === 'function') {
+          ref(elementRef.current);
+        } else {
+          ref.current = elementRef.current;
+        }
+      }
+    }, [ref]);
+
+    const isMultiple = useBooleanProperty(elementRef, 'multiple', multiple);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+
+    const webComponentProps: Record<string, any> = {
+      ...props,
+      ref: elementRef,
+    };
+
+    if (isMultiple) webComponentProps.multiple = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isRequired) webComponentProps.required = '';
+
+    if (name) webComponentProps.name = name;
+    if (accept) webComponentProps.accept = accept;
+    if (label) webComponentProps.label = label;
+    if (placeholder) webComponentProps.placeholder = placeholder;
+    if (error) webComponentProps.error = error;
+
+    return React.createElement('ty-file-upload', webComponentProps);
+  }
+);
+
+TyFileUpload.displayName = 'TyFileUpload';

package/src/components/TyIcon.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Icon component
 export interface TyIconProps extends React.HTMLAttributes<HTMLElement> {
@@ -37,6 +38,9 @@ export const TyIcon = React.forwardRef<HTMLElement, TyIconProps>(
       }
     }, [ref]);
 
+    const isSpin = useBooleanProperty(elementRef, 'spin', spin);
+    const isPulse = useBooleanProperty(elementRef, 'pulse', pulse);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
@@ -49,13 +53,8 @@ export const TyIcon = React.forwardRef<HTMLElement, TyIconProps>(
       webComponentProps.size = size;
     }
 
-    if (spin) {
-      webComponentProps.spin = '';  // Boolean attributes as empty string
-    }
-
-    if (pulse) {
-      webComponentProps.pulse = '';  // Boolean attributes as empty string
-    }
+    if (isSpin) webComponentProps.spin = '';
+    if (isPulse) webComponentProps.pulse = '';
 
     if (tempo) {
       webComponentProps.tempo = tempo;

package/src/components/TyInput.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Event detail structure for ty-input events
 export interface TyInputEventDetail {
@@ -91,7 +93,7 @@ let _warnedOnInputProp = false;
 
 // React wrapper for ty-input web component
 export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
-  ({ onChange, onChangeCommit, onFocus, onBlur, disabled, name, checked, debounce, ...props }, ref) => {
+  ({ onChange, onChangeCommit, onFocus, onBlur, disabled, required, name, checked, debounce, ...props }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
     // Catch the most common mistake: passing `onInput` (React's prop) instead
@@ -193,8 +195,10 @@ export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
     // 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.
+    // to guarantee resets (`value=""`) clear the visible content. React 19+
+    // handles this natively, so the effect short-circuits there.
     useEffect(() => {
+      if (!needsPropertyBridge) return;
       const element = elementRef.current as any;
       if (!element) return;
       const next = (props as any).value ?? '';
@@ -203,6 +207,11 @@ export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
       }
     }, [(props as any).value]);
 
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+    const isChecked = useBooleanProperty(elementRef, 'checked', checked);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
@@ -210,8 +219,9 @@ export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
     };
 
     // Add conditional attributes
-    if (disabled) webComponentProps.disabled = '';
-    if (checked) webComponentProps.checked = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isRequired) webComponentProps.required = '';
+    if (isChecked) webComponentProps.checked = '';
 
     // Add string attributes
     if (name) webComponentProps.name = name;

package/src/components/TyModal.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
+import { needsPropertyBridge } from '../utils/react-version';
 
 // Event detail structure for modal events
 export interface TyModalEventDetail {
@@ -104,33 +106,49 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
       };
     }, [onOpen, onClose]);
 
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    // Without this, flipping `open` from `true` to `false` on React 18 leaves
+    // the `open` attribute on the element and the modal stays open.
+    const isOpen = useBooleanProperty(elementRef, 'open', open);
+    const isProt = useBooleanProperty(elementRef, 'protected', isProtected);
+
+    // For default-true booleans (backdrop, closeOn*), only the explicit-false
+    // case is interesting — bridge it imperatively too so it propagates.
+    useEffect(() => {
+      if (!needsPropertyBridge) return;
+      const el = elementRef.current as any;
+      if (!el) return;
+      const setIf = (prop: string, raw: unknown) => {
+        if (raw === undefined) return;
+        const next = coerceBool(raw);
+        if (Boolean(el[prop]) !== next) el[prop] = next;
+      };
+      setIf('backdrop', backdrop);
+      setIf('closeOnOutsideClick', closeOnOutsideClick);
+      setIf('closeOnEscape', closeOnEscape);
+    }, [backdrop, closeOnOutsideClick, closeOnEscape]);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
       ref: elementRef,
     };
 
-    // Add boolean attributes using correct HTML attribute names
-    if (open) {
-      webComponentProps.open = '';  // Boolean attributes as empty string
-    }
+    if (isOpen) webComponentProps.open = '';
+    if (isProt) webComponentProps.protected = '';
 
-    if (backdrop === false) {  // Only set if explicitly false (default is true)
+    // Default-true booleans use "false" string on the attribute side; the
+    // core's parseBoolAttr handles it correctly.
+    if (backdrop !== undefined && !coerceBool(backdrop)) {
       webComponentProps.backdrop = 'false';
     }
-
-    if (closeOnOutsideClick === false) {  // Only set if explicitly false (default is true)
+    if (closeOnOutsideClick !== undefined && !coerceBool(closeOnOutsideClick)) {
       webComponentProps['close-on-outside-click'] = 'false';
     }
-
-    if (closeOnEscape === false) {  // Only set if explicitly false (default is true)
+    if (closeOnEscape !== undefined && !coerceBool(closeOnEscape)) {
       webComponentProps['close-on-escape'] = 'false';
     }
 
-    if (isProtected) {
-      webComponentProps.protected = '';  // Boolean attributes as empty string
-    }
-
     return React.createElement(
       'ty-modal',
       webComponentProps,

package/src/components/TyMultiselect.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { needsPropertyBridge } from '../utils/react-version';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Multiselect component
 export interface TyMultiselectEventDetail {
@@ -20,7 +22,14 @@ export interface TyMultiselectProps extends Omit<React.HTMLAttributes<HTMLElemen
   
   /** Disable the multiselect component */
   disabled?: boolean;
-  
+
+  /**
+   * Loading state — replaces the available-options area with a centered
+   * spinner. Search input stays usable. Pair with `externalSearch` while
+   * fetching results from a parent-owned data source.
+   */
+  loading?: boolean;
+
   /** Make the multiselect read-only */
   readonly?: boolean;
   
@@ -67,6 +76,7 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
     value,
     placeholder,
     disabled,
+    loading,
     readonly,
     flavor,
     label,
@@ -95,7 +105,9 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
 
     // Imperatively sync `value` to the underlying property so resets
     // (`value=""` or null) reliably clear the visible selection.
+    // React 18 workaround; React 19+ handles this natively.
     useEffect(() => {
+      if (!needsPropertyBridge) return;
       const element = elementRef.current as any;
       if (!element) return;
       const next = (props as any).value ?? '';
@@ -133,6 +145,13 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
       };
     }, [handleChange, handleSearch, onChange, onSearch]);
 
+    // Imperative property sync for boolean props (see use-boolean-prop.ts).
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isLoading = useBooleanProperty(elementRef, 'loading', loading);
+    const isReadonly = useBooleanProperty(elementRef, 'readonly', readonly);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+    const isExternalSearch = useBooleanProperty(elementRef, 'externalSearch', externalSearch);
+
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
       ...props,
@@ -150,13 +169,11 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
       webComponentProps.placeholder = placeholder;
     }
 
-    if (disabled) {
-      webComponentProps.disabled = '';  // Boolean attributes as empty string
-    }
-
-    if (readonly) {
-      webComponentProps.readonly = '';  // Boolean attributes as empty string
-    }
+    if (isLoading) webComponentProps.loading = '';
+    if (isDisabled) webComponentProps.disabled = '';
+    if (isReadonly) webComponentProps.readonly = '';
+    if (isRequired) webComponentProps.required = '';
+    if (isExternalSearch) webComponentProps['external-search'] = '';
 
     if (flavor) {
       webComponentProps.flavor = flavor;
@@ -166,18 +183,9 @@ export const TyMultiselect = React.forwardRef<HTMLElement, TyMultiselectProps>(
       webComponentProps.label = label;
     }
 
-    if (required) {
-      webComponentProps.required = '';  // Boolean attributes as empty string
-    }
-
     if (name) {
       webComponentProps.name = name;
     }
-    
-    // External (remote) search mode: parent owns filtering, multiselect dispatches search events
-    if (externalSearch) {
-      webComponentProps['external-search'] = '';
-    }
 
     // Add debounce attribute
     if (debounce !== undefined) {

package/src/components/TyOption.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Option component
 export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
@@ -25,13 +26,17 @@ export const TyOption = React.forwardRef<HTMLElement, TyOptionProps>(
       }
     }, [ref]);
 
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isSelected = useBooleanProperty(elementRef, 'selected', selected);
+    const isHidden = useBooleanProperty(elementRef, 'hidden', hidden);
+
     return React.createElement(
       'ty-option',
       {
         ...props,
-        ...(disabled && { disabled: "" }),
-        ...(selected && { selected: "" }),
-        ...(hidden && { hidden: "" }),
+        ...(isDisabled && { disabled: "" }),
+        ...(isSelected && { selected: "" }),
+        ...(isHidden && { hidden: "" }),
         ref: elementRef,
       },
       children