tyrell-react 1.0.0-RC10

package/src/components/TyTab.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
+
+// Type definitions for Ty Tab component
+export interface TyTabProps extends React.HTMLAttributes<HTMLElement> {
+  /** Required unique identifier */
+  id: string;
+  
+  /** Simple text label */
+  label?: string;
+  
+  /** Whether the tab is disabled */
+  disabled?: boolean;
+  
+  /** Tab content */
+  children?: React.ReactNode;
+}
+
+// React wrapper for ty-tab web component
+export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
+  ({ 
+    children, 
+    id,
+    label,
+    disabled,
+    ...props 
+  }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    // Combine refs if needed
+    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: Record<string, any> = {
+      ...props,
+      ref: elementRef,
+    };
+
+    // Add required attribute
+    webComponentProps.id = id;
+    
+    // Add boolean attributes
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    if (isDisabled) webComponentProps.disabled = '';
+    
+    // Add string attributes
+    if (label) webComponentProps.label = label;
+
+    return React.createElement(
+      'ty-tab',
+      webComponentProps,
+      children
+    );
+  }
+);
+
+TyTab.displayName = 'TyTab';

package/src/components/TyTabs.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef } from 'react';
+
+// Type definitions for Ty Tabs component
+export interface TyTabsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+  /** Content area width (accepts px or %) */
+  width?: string;
+  
+  /** Total container height including buttons */
+  height?: string;
+  
+  /** ID of currently active tab */
+  active?: string;
+  
+  /** Position of tab buttons */
+  placement?: 'top' | 'bottom';
+  
+  /** Tab change event handler */
+  onChange?: (event: CustomEvent<TabChangeDetail>) => void;
+  
+  /** Tabs content (TyTab components) */
+  children?: React.ReactNode;
+}
+
+export interface TabChangeDetail {
+  activeId: string;
+  activeIndex: number;
+  previousId: string | null;
+  previousIndex: number | null;
+}
+
+// React wrapper for ty-tabs web component
+export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
+  ({ 
+    children, 
+    width,
+    height,
+    active,
+    placement,
+    onChange,
+    ...props 
+  }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    // Handle change events
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+
+      const handleChange = (event: Event) => {
+        if (onChange) {
+          onChange(event as CustomEvent<TabChangeDetail>);
+        }
+      };
+
+      element.addEventListener('ty-tab-change', handleChange);
+
+      return () => {
+        element.removeEventListener('ty-tab-change', handleChange);
+      };
+    }, [onChange]);
+
+    // Combine refs if needed
+    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: Record<string, any> = {
+      ...props,
+      ref: elementRef,
+    };
+
+    // Add string attributes
+    if (width) webComponentProps.width = width;
+    if (height) webComponentProps.height = height;
+    if (active) webComponentProps.active = active;
+    if (placement) webComponentProps.placement = placement;
+
+    return React.createElement(
+      'ty-tabs',
+      webComponentProps,
+      children
+    );
+  }
+);
+
+TyTabs.displayName = 'TyTabs';

package/src/components/TyTag.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
+
+// CSS custom properties that cascade into the shadow DOM for full color control
+export interface TyTagCSSProperties extends React.CSSProperties {
+  '--tag-bg'?: string;
+  '--tag-color'?: string;
+  '--tag-border-color'?: string;
+}
+
+// Type definitions for Ty Tag component
+export interface TyTagProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'onClick'> {
+  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  notPill?: boolean;
+  clickable?: boolean;
+  dismissible?: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+  value?: string;
+  style?: TyTagCSSProperties;
+  // click is a composed CustomEvent from the web component — React's onClick picks it up
+  onClick?: (event: CustomEvent) => void;
+  onTagDismiss?: (event: CustomEvent) => void;
+  children?: React.ReactNode;
+}
+
+// React wrapper for ty-tag web component
+export const TyTag = React.forwardRef<HTMLElement, TyTagProps>(
+  ({ children, onClick, onTagDismiss, notPill, clickable, dismissible, disabled, selected, ...props }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    const handleDismiss = useCallback((event: CustomEvent) => {
+      if (onTagDismiss) {
+        onTagDismiss(event);
+      }
+    }, [onTagDismiss]);
+
+    // dismiss is a custom event — React doesn't know about it, so we need a manual listener
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element || !onTagDismiss) return;
+
+      element.addEventListener('dismiss', handleDismiss as EventListener);
+      return () => {
+        element.removeEventListener('dismiss', handleDismiss as EventListener);
+      };
+    }, [handleDismiss, onTagDismiss]);
+
+    // Handle ref forwarding
+    useEffect(() => {
+      if (ref && elementRef.current) {
+        if (typeof ref === 'function') {
+          ref(elementRef.current);
+        } else {
+          ref.current = elementRef.current;
+        }
+      }
+    }, [ref]);
+
+    const isNotPill = useBooleanProperty(elementRef, 'notPill', notPill);
+    const isClickable = useBooleanProperty(elementRef, 'clickable', clickable);
+    const isDismissible = useBooleanProperty(elementRef, 'dismissible', dismissible);
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isSelected = useBooleanProperty(elementRef, 'selected', selected);
+
+    return React.createElement(
+      'ty-tag',
+      {
+        ...props,
+        // click is dispatched as composed CustomEvent by the web component — React's
+        // synthetic onClick already catches it, so we just pass it through as onClick
+        ...(onClick && { onClick }),
+        ...(isNotPill && { 'not-pill': "" }),
+        ...(isClickable && { clickable: "" }),
+        ...(isDismissible && { dismissible: "" }),
+        ...(isDisabled && { disabled: "" }),
+        ...(isSelected && { selected: "" }),
+        ref: elementRef,
+      },
+      children
+    );
+  }
+);
+
+TyTag.displayName = 'TyTag';

package/src/components/TyTextarea.tsx

@@ -0,0 +1,181 @@
+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-textarea events
+export interface TyTextareaEventDetail {
+  value: string; // textarea value
+  originalEvent: Event; // original DOM event
+}
+
+// Type definitions for Ty Textarea component
+export interface TyTextareaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'style'> {
+  style?: import('./TyInput').TyInputCSSProperties;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  value?: string;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string; // Important for HTMX/form compatibility
+  
+  // Textarea-specific props
+  rows?: string | number;
+  cols?: string | number;
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+  minHeight?: string; // e.g., '100px' - converts to min-height
+  maxHeight?: string; // e.g., '500px' - converts to max-height
+  
+  // React event handlers - override with our custom types
+  /**
+   * Fires on every keystroke (React convention)
+   * Maps to native 'input' event from ty-textarea
+   */
+  onChange?: (event: CustomEvent<TyTextareaEventDetail>) => void;
+  
+  /**
+   * Fires on blur if value changed (native DOM behavior)
+   * Maps to native 'change' event from ty-textarea
+   */
+  onChangeCommit?: (event: CustomEvent<TyTextareaEventDetail>) => void;
+  
+  /** Standard focus event */
+  onFocus?: (event: FocusEvent) => void;
+  
+  /** Standard blur event */
+  onBlur?: (event: FocusEvent) => void;
+}
+
+// One-time warning flag.
+let _warnedOnInputProp = false;
+
+// React wrapper for ty-textarea web component
+export const TyTextarea = React.forwardRef<HTMLElement, TyTextareaProps>(
+  ({ onChange, onChangeCommit, onFocus, onBlur, disabled, required, minHeight, maxHeight, ...props }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    // Same `onInput` → `onChange` redirect as TyInput. React's synthetic-event
+    // system strips event.detail; users hitting e.detail.value will crash.
+    const onInputProp = (props as any).onInput as ((e: any) => void) | undefined;
+    if (onInputProp && !onChange) {
+      if (!_warnedOnInputProp) {
+        _warnedOnInputProp = true;
+        console.warn(
+          '[tyrell-react] <TyTextarea> received `onInput`. ' +
+          'React strips event.detail; use `onChange` instead — it receives the raw CustomEvent. ' +
+          'Forwarding for now, but please rename the prop.'
+        );
+      }
+      onChange = onInputProp;
+    }
+    delete (props as any).onInput;
+
+    // Map onChange to input event (React convention)
+    const handleInput = useCallback((event: CustomEvent<TyTextareaEventDetail>) => {
+      if (onChange) {
+        onChange(event);
+      }
+    }, [onChange]);
+
+    // Map onChangeCommit to change event (blur behavior)
+    const handleChangeCommit = useCallback((event: CustomEvent<TyTextareaEventDetail>) => {
+      if (onChangeCommit) {
+        onChangeCommit(event);
+      }
+    }, [onChangeCommit]);
+
+    const handleFocus = useCallback((event: FocusEvent) => {
+      if (onFocus) {
+        onFocus(event);
+      }
+    }, [onFocus]);
+
+    const handleBlur = useCallback((event: FocusEvent) => {
+      if (onBlur) {
+        onBlur(event);
+      }
+    }, [onBlur]);
+
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+
+      // Listen for custom input/change events from ty-textarea
+      // Map onChange → input event (React convention)
+      if (onChange) {
+        element.addEventListener('input', handleInput as EventListener);
+      }
+      
+      // Map onChangeCommit → change event (blur behavior)
+      if (onChangeCommit) {
+        element.addEventListener('change', handleChangeCommit as EventListener);
+      }
+
+      // Listen for standard focus/blur events
+      if (onFocus) {
+        element.addEventListener('focus', handleFocus as EventListener);
+      }
+
+      if (onBlur) {
+        element.addEventListener('blur', handleBlur as EventListener);
+      }
+
+      return () => {
+        if (onChange) {
+          element.removeEventListener('input', handleInput as EventListener);
+        }
+        if (onChangeCommit) {
+          element.removeEventListener('change', handleChangeCommit as EventListener);
+        }
+        if (onFocus) {
+          element.removeEventListener('focus', handleFocus as EventListener);
+        }
+        if (onBlur) {
+          element.removeEventListener('blur', handleBlur as EventListener);
+        }
+      };
+    }, [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.
+    // 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 as any;
+      if (!element) return;
+      const next = (props as any).value ?? '';
+      if (element.value !== next) {
+        element.value = next;
+      }
+    }, [(props as any).value]);
+
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    const isRequired = useBooleanProperty(elementRef, 'required', required);
+
+    return React.createElement(
+      'ty-textarea',
+      {
+        ...props,
+        ...(isDisabled && { disabled: "" }),
+        ...(isRequired && { required: "" }),
+        ...(minHeight && { 'min-height': minHeight }),  // Convert camelCase to kebab-case
+        ...(maxHeight && { 'max-height': maxHeight }),  // Convert camelCase to kebab-case
+        ref: elementRef,
+      }
+    );
+  }
+);
+
+TyTextarea.displayName = 'TyTextarea';

package/src/components/TyTooltip.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react';
+import { useBooleanProperty } from '../utils/use-boolean-prop';
+
+// Type definitions for Ty Tooltip component
+export interface TyTooltipProps extends React.HTMLAttributes<HTMLElement> {
+  /** Tooltip positioning relative to the parent element */
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  
+  /** Distance in pixels from the anchor element (default: 8) */
+  offset?: number;
+  
+  /** Delay in milliseconds before showing tooltip (default: 600) */
+  delay?: number;
+  
+  /** Disable the tooltip */
+  disabled?: boolean;
+  
+  /** Semantic styling variant */
+  flavor?: 'dark' | 'light' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+  
+  /** Tooltip content */
+  children?: React.ReactNode;
+}
+
+// React wrapper for ty-tooltip web component
+export const TyTooltip = React.forwardRef<HTMLElement, TyTooltipProps>(
+  ({ 
+    placement, 
+    offset, 
+    delay, 
+    disabled, 
+    flavor, 
+    children, 
+    ...props 
+  }, ref) => {
+    const elementRef = useRef<HTMLElement>(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: Record<string, any> = {
+      ...props,
+      ref: elementRef,
+    };
+
+    // Add optional attributes only if they have values
+    if (placement) {
+      webComponentProps.placement = placement;
+    }
+
+    if (offset !== undefined) {
+      webComponentProps.offset = offset.toString();
+    }
+
+    if (delay !== undefined) {
+      webComponentProps.delay = delay.toString();
+    }
+
+    const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
+    if (isDisabled) webComponentProps.disabled = '';
+
+    if (flavor) {
+      webComponentProps.flavor = flavor;
+    }
+
+    return React.createElement(
+      'ty-tooltip',
+      webComponentProps,
+      children
+    );
+  }
+);
+
+TyTooltip.displayName = 'TyTooltip';

package/src/components/TyWizard.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef } from 'react';
+
+// Type definitions for Ty Wizard component
+export interface TyWizardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+  /** Content area width (accepts px or %) */
+  width?: string;
+
+  /** Total container height including step indicators */
+  height?: string;
+
+  /** ID of currently active step */
+  active?: string;
+
+  /** Comma-separated IDs of completed steps */
+  completed?: string;
+
+  /** Step indicator layout */
+  orientation?: 'horizontal' | 'vertical';
+
+  /** Step change event handler */
+  onStepChange?: (event: CustomEvent<WizardStepChangeDetail>) => void;
+
+  /** Wizard content (TyStep components) */
+  children?: React.ReactNode;
+}
+
+export interface WizardStepChangeDetail {
+  activeId: string;
+  activeIndex: number;
+  previousId: string | null;
+  previousIndex: number | null;
+  direction: 'forward' | 'backward' | 'none';
+}
+
+// React wrapper for ty-wizard web component
+export const TyWizard = React.forwardRef<HTMLElement, TyWizardProps>(
+  ({
+    children,
+    width,
+    height,
+    active,
+    completed,
+    orientation,
+    onStepChange,
+    ...props
+  }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    // Handle step change events
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+
+      const handleStepChange = (event: Event) => {
+        if (onStepChange) {
+          onStepChange(event as CustomEvent<WizardStepChangeDetail>);
+        }
+      };
+
+      element.addEventListener('ty-wizard-step-change', handleStepChange);
+
+      return () => {
+        element.removeEventListener('ty-wizard-step-change', handleStepChange);
+      };
+    }, [onStepChange]);
+
+    // Combine refs if needed
+    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: Record<string, any> = {
+      ...props,
+      ref: elementRef,
+    };
+
+    // Add string attributes
+    if (width) webComponentProps.width = width;
+    if (height) webComponentProps.height = height;
+    if (active) webComponentProps.active = active;
+    if (completed) webComponentProps.completed = completed;
+    if (orientation) webComponentProps.orientation = orientation;
+
+    return React.createElement(
+      'ty-wizard',
+      webComponentProps,
+      children
+    );
+  }
+);
+
+TyWizard.displayName = 'TyWizard';