tyrell-react 1.0.0-TC10

package/src/components/TyTextarea.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+
+// 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;
+}
+
+// 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);
+
+    // 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.
+    useEffect(() => {
+      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]);
+
+    return React.createElement(
+      'ty-textarea',
+      {
+        ...props,
+        ...(disabled && { disabled: "" }),
+        ...(required && { 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';
+
+// 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();
+    }
+
+    if (disabled) {
+      webComponentProps.disabled = '';  // Boolean attributes as empty string
+    }
+
+    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';

package/src/components/index.ts

@@ -0,0 +1,251 @@
+// ===================================================================
+// TYRELL REACT WRAPPER EXPORTS
+// ===================================================================
+// This file provides two export styles for maximum developer flexibility:
+// 1. Ty-prefixed exports (TyButton, TyInput) - explicit and backward compatible
+// 2. Short name exports (Button, Input) - clean and familiar to React developers
+//
+// Choose the style that fits your team's preferences!
+
+// ===================================================================
+// TY-PREFIXED EXPORTS (Explicit Style - Backward Compatible)
+// ===================================================================
+
+export { TyButton } from './TyButton';
+export type { TyButtonProps, TyButtonCSSProperties } from './TyButton';
+
+export { TyTag } from './TyTag';
+export type { TyTagProps, TyTagCSSProperties } from './TyTag';
+
+export { TyInput } from './TyInput';
+export type { TyInputProps, TyInputEventDetail, TyInputCSSProperties } from './TyInput';
+
+export { TyTextarea } from './TyTextarea';
+export type { TyTextareaProps, TyTextareaEventDetail } from './TyTextarea';
+
+export { TyDropdown } from './TyDropdown';
+export type { TyDropdownProps, TyDropdownEventDetail } from './TyDropdown';
+
+export { TyOption } from './TyOption';
+export type { TyOptionProps } from './TyOption';
+
+export { TyIcon } from './TyIcon';
+export type { TyIconProps } from './TyIcon';
+
+export { TyModal } from './TyModal';
+export type { TyModalProps, TyModalEventDetail, TyModalRef } from './TyModal';
+
+export { TyTooltip } from './TyTooltip';
+export type { TyTooltipProps } from './TyTooltip';
+
+export { TyMultiselect } from './TyMultiselect';
+export type { TyMultiselectProps, TyMultiselectEventDetail } from './TyMultiselect';
+
+export { TyCalendar } from './TyCalendar';
+export type { TyCalendarProps, TyCalendarChangeEventDetail, TyCalendarNavigateEventDetail } from './TyCalendar';
+
+export { TyDatePicker } from './TyDatePicker';
+export type { TyDatePickerProps, TyDatePickerEventDetail } from './TyDatePicker';
+
+export { TyPopup } from './TyPopup';
+export type { TyPopupProps, TyPopupElement } from './TyPopup';
+
+export { TyCheckbox } from './TyCheckbox';
+export type { TyCheckboxProps, TyCheckboxEventDetail } from './TyCheckbox';
+
+export { TySwitch } from './TySwitch';
+export type { TySwitchProps, TySwitchEventDetail } from './TySwitch';
+
+export { TyRadio } from './TyRadio';
+export type { TyRadioProps } from './TyRadio';
+
+export { TyRadioGroup } from './TyRadioGroup';
+export type { TyRadioGroupProps, TyRadioGroupEventDetail } from './TyRadioGroup';
+
+export { TyCopy } from './TyCopy';
+export type { TyCopyProps } from './TyCopy';
+
+export { TyTabs } from './TyTabs';
+export type { TyTabsProps, TabChangeDetail } from './TyTabs';
+
+export { TyTab } from './TyTab';
+export type { TyTabProps } from './TyTab';
+
+export { TyCalendarMonth } from './TyCalendarMonth';
+export type { TyCalendarMonthProps, DayClickDetail } from './TyCalendarMonth';
+
+export { TyCalendarNavigation } from './TyCalendarNavigation';
+export type { TyCalendarNavigationProps, NavigationChangeDetail } from './TyCalendarNavigation';
+
+export { TyWizard } from './TyWizard';
+export type { TyWizardProps, WizardStepChangeDetail } from './TyWizard';
+
+export { TyStep } from './TyStep';
+export type { TyStepProps } from './TyStep';
+
+export { TyResizeObserver } from './TyResizeObserver';
+export type { TyResizeObserverProps } from './TyResizeObserver';
+
+export { TyScrollContainer } from './TyScrollContainer';
+export type { TyScrollContainerProps, TyScrollContainerRef } from './TyScrollContainer';
+
+
+// ===================================================================
+// SHORT NAME EXPORTS (Clean Style - Developer Choice)
+// ===================================================================
+
+export { TyButton as Button } from './TyButton';
+export { TyTag as Tag } from './TyTag';
+export { TyInput as Input } from './TyInput';
+export { TyTextarea as Textarea } from './TyTextarea';
+export { TyDropdown as Dropdown } from './TyDropdown';
+export { TyOption as Option } from './TyOption';
+export { TyIcon as Icon } from './TyIcon';
+export { TyModal as Modal } from './TyModal';
+export { TyTooltip as Tooltip } from './TyTooltip';
+export { TyMultiselect as Multiselect } from './TyMultiselect';
+export { TyCalendar as Calendar } from './TyCalendar';
+export { TyDatePicker as DatePicker } from './TyDatePicker';
+export { TyPopup as Popup } from './TyPopup';
+export { TyCheckbox as Checkbox } from './TyCheckbox';
+export { TySwitch as Switch } from './TySwitch';
+export { TyRadio as Radio } from './TyRadio';
+export { TyRadioGroup as RadioGroup } from './TyRadioGroup';
+export { TyCopy as Copy } from './TyCopy';
+export { TyTabs as Tabs } from './TyTabs';
+export { TyTab as Tab } from './TyTab';
+export { TyCalendarMonth as CalendarMonth } from './TyCalendarMonth';
+export { TyCalendarNavigation as CalendarNavigation } from './TyCalendarNavigation';
+export { TyWizard as Wizard } from './TyWizard';
+export { TyStep as Step } from './TyStep';
+export { TyResizeObserver as ResizeObserver } from './TyResizeObserver';
+export { TyScrollContainer as ScrollContainer } from './TyScrollContainer';
+
+// ===================================================================
+// TYPE ALIASES (Both Styles Supported)
+// ===================================================================
+
+// Button types
+export type { TyButtonProps as ButtonProps } from './TyButton';
+
+// Tag types
+export type { TyTagProps as TagProps } from './TyTag';
+
+// Input types
+export type { TyInputProps as InputProps, TyInputEventDetail as InputEventDetail } from './TyInput';
+
+// Textarea types
+export type { TyTextareaProps as TextareaProps, TyTextareaEventDetail as TextareaEventDetail } from './TyTextarea';
+
+// Dropdown types
+export type { TyDropdownProps as DropdownProps, TyDropdownEventDetail as DropdownEventDetail, OptionData } from './TyDropdown';
+
+// Option types
+export type { TyOptionProps as OptionProps } from './TyOption';
+
+// Icon types
+export type { TyIconProps as IconProps } from './TyIcon';
+
+// Modal types
+export type { TyModalProps as ModalProps, TyModalEventDetail as ModalEventDetail, TyModalRef as ModalRef } from './TyModal';
+
+// Tooltip types
+export type { TyTooltipProps as TooltipProps } from './TyTooltip';
+
+// Multiselect types
+export type { TyMultiselectProps as MultiselectProps, TyMultiselectEventDetail as MultiselectEventDetail } from './TyMultiselect';
+
+// Calendar types
+export type { TyCalendarProps as CalendarProps, TyCalendarChangeEventDetail as CalendarChangeEventDetail, TyCalendarNavigateEventDetail as CalendarNavigateEventDetail } from './TyCalendar';
+
+// DatePicker types
+export type { TyDatePickerProps as DatePickerProps, TyDatePickerEventDetail as DatePickerEventDetail } from './TyDatePicker';
+
+// Popup types
+export type { TyPopupProps as PopupProps, TyPopupElement as PopupElement } from './TyPopup';
+
+// Checkbox types
+export type { TyCheckboxProps as CheckboxProps, TyCheckboxEventDetail as CheckboxEventDetail } from './TyCheckbox';
+
+// Switch types
+export type { TySwitchProps as SwitchProps, TySwitchEventDetail as SwitchEventDetail } from './TySwitch';
+
+// Radio types
+export type { TyRadioProps as RadioProps } from './TyRadio';
+
+// RadioGroup types
+export type { TyRadioGroupProps as RadioGroupProps, TyRadioGroupEventDetail as RadioGroupEventDetail } from './TyRadioGroup';
+
+// Copy types
+export type { TyCopyProps as CopyProps } from './TyCopy';
+
+// Tabs types
+export type { TyTabsProps as TabsProps } from './TyTabs';
+
+// Tab types
+export type { TyTabProps as TabProps } from './TyTab';
+
+// CalendarMonth types
+export type { TyCalendarMonthProps as CalendarMonthProps } from './TyCalendarMonth';
+
+// CalendarNavigation types
+export type { TyCalendarNavigationProps as CalendarNavigationProps } from './TyCalendarNavigation';
+
+// Wizard types
+export type { TyWizardProps as WizardProps, WizardStepChangeDetail as StepChangeDetail } from './TyWizard';
+
+// Step types
+export type { TyStepProps as StepProps } from './TyStep';
+
+// ResizeObserver types
+export type { TyResizeObserverProps as ResizeObserverProps } from './TyResizeObserver';
+
+// ScrollContainer types
+export type { TyScrollContainerProps as ScrollContainerProps, TyScrollContainerRef as ScrollContainerRef } from './TyScrollContainer';
+
+// ===================================================================
+// USAGE EXAMPLES
+// ===================================================================
+
+/*
+
+// STYLE 1: Ty-prefixed (Explicit and backward compatible)
+import { TyButton, TyInput, TyModal } from 'tyrell-react';
+import type { TyButtonProps, TyInputProps } from 'tyrell-react';
+
+function MyComponent() {
+  return (
+    <TyModal>
+      <TyInput placeholder="Enter text..." />
+      <TyButton>Submit</TyButton>
+    </TyModal>
+  );
+}
+
+// STYLE 2: Short names (Clean and familiar)
+import { Button, Input, Modal } from 'tyrell-react';
+import type { ButtonProps, InputProps } from 'tyrell-react';
+
+function MyComponent() {
+  return (
+    <Modal>
+      <Input placeholder="Enter text..." />
+      <Button>Submit</Button>
+    </Modal>
+  );
+}
+
+// STYLE 3: Mixed (Team preferences)
+import { TyModal, Input, Button } from 'tyrell-react';
+import type { TyModalProps, InputProps } from 'tyrell-react';
+
+function MyComponent() {
+  return (
+    <TyModal>
+      <Input placeholder="Enter text..." />
+      <Button>Submit</Button>
+    </TyModal>
+  );
+}
+
+*/