tyrell-react 1.0.0-RC12 → 1.0.0-RC14

package/src/components/TyStep.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 
-// Type definitions for Ty Step component
 export interface TyStepProps extends React.HTMLAttributes<HTMLElement> {
   /** Required unique identifier for the step */
   id: string;
@@ -21,7 +21,6 @@ export interface TyStepProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-// React wrapper for ty-step web component
 export const TyStep = React.forwardRef<HTMLElement, TyStepProps>(
   ({
     children,
@@ -34,7 +33,6 @@ export const TyStep = React.forwardRef<HTMLElement, TyStepProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -45,19 +43,16 @@ export const TyStep = React.forwardRef<HTMLElement, TyStepProps>(
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
       id,
     };
 
-    // Add string attributes
     if (label) webComponentProps.label = label;
     if (description) webComponentProps.description = description;
     if (status) webComponentProps.status = status;
 
-    // Add boolean attributes
     if (disabled) webComponentProps.disabled = true;
 
     return React.createElement(

package/src/components/TySwitch.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
+type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+
 export interface TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
   /** Checked (on) state */
   checked?: boolean;
@@ -21,7 +25,7 @@ export interface TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /** Semantic styling variant */
-  flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+  flavor?: ShadedFlavor | (string & {});
 
   /**
    * Fires when switch state changes (React convention)
@@ -94,7 +98,7 @@ export const TySwitch = React.forwardRef<HTMLElement, TySwitchProps>(
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyTab.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 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;
@@ -16,7 +16,6 @@ export interface TyTabProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-// React wrapper for ty-tab web component
 export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
   ({ 
     children, 
@@ -27,7 +26,6 @@ export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -38,20 +36,16 @@ export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(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(

package/src/components/TyTabs.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 
-// Type definitions for Ty Tabs component
 export interface TyTabsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
   /** Content area width (accepts px or %) */
   width?: string;
@@ -28,7 +28,6 @@ export interface TabChangeDetail {
   previousIndex: number | null;
 }
 
-// React wrapper for ty-tabs web component
 export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
   ({ 
     children, 
@@ -41,7 +40,6 @@ export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle change events
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -59,7 +57,6 @@ export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
       };
     }, [onChange]);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -70,13 +67,11 @@ export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add string attributes
     if (width) webComponentProps.width = width;
     if (height) webComponentProps.height = height;
     if (active) webComponentProps.active = active;

package/src/components/TyTag.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
+type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+
 // CSS custom properties that cascade into the shadow DOM for full color control
 export interface TyTagCSSProperties extends React.CSSProperties {
   '--tag-bg'?: string;
@@ -8,9 +12,8 @@ export interface TyTagCSSProperties extends React.CSSProperties {
   '--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';
+  flavor?: ShadedFlavor | (string & {});
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   notPill?: boolean;
   clickable?: boolean;
@@ -25,7 +28,6 @@ export interface TyTagProps extends Omit<React.HTMLAttributes<HTMLElement>, 'sty
   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);
@@ -47,7 +49,6 @@ export const TyTag = React.forwardRef<HTMLElement, TyTagProps>(
       };
     }, [handleDismiss, onTagDismiss]);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -67,7 +68,7 @@ export const TyTag = React.forwardRef<HTMLElement, TyTagProps>(
     return React.createElement(
       'ty-tag',
       {
-        ...props,
+        ...hostProps(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 }),

package/src/components/TyTextarea.tsx

@@ -1,14 +1,13 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { hostProps } from '../utils/host-props';
 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';
@@ -50,7 +49,6 @@ export interface TyTextareaProps extends Omit<React.HTMLAttributes<HTMLElement>,
 // 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);
@@ -101,18 +99,14 @@ export const TyTextarea = React.forwardRef<HTMLElement, TyTextareaProps>(
       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);
       }
@@ -137,7 +131,6 @@ export const TyTextarea = React.forwardRef<HTMLElement, TyTextareaProps>(
       };
     }, [handleInput, handleChangeCommit, handleFocus, handleBlur, onChange, onChangeCommit, onFocus, onBlur]);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -167,7 +160,7 @@ export const TyTextarea = React.forwardRef<HTMLElement, TyTextareaProps>(
     return React.createElement(
       'ty-textarea',
       {
-        ...props,
+        ...hostProps(props),
         ...(isDisabled && { disabled: "" }),
         ...(isRequired && { required: "" }),
         ...(minHeight && { 'min-height': minHeight }),  // Convert camelCase to kebab-case

package/src/components/TyTooltip.tsx

@@ -1,10 +1,18 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
-// Type definitions for Ty Tooltip component
+type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
+type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+type Placement =
+  | 'top-start' | 'top' | 'top-end'
+  | 'right-start' | 'right' | 'right-end'
+  | 'bottom-start' | 'bottom' | 'bottom-end'
+  | 'left-start' | 'left' | 'left-end';
+
 export interface TyTooltipProps extends React.HTMLAttributes<HTMLElement> {
-  /** Tooltip positioning relative to the parent element */
-  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /** Tooltip positioning relative to the parent element: a side plus an optional cross-axis alignment (e.g. "bottom-start") */
+  placement?: Placement;
   
   /** Distance in pixels from the anchor element (default: 8) */
   offset?: number;
@@ -16,13 +24,12 @@ export interface TyTooltipProps extends React.HTMLAttributes<HTMLElement> {
   disabled?: boolean;
   
   /** Semantic styling variant */
-  flavor?: 'dark' | 'light' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+  flavor?: 'dark' | 'light' | 'info' | ShadedFlavor | (string & {});
   
   /** Tooltip content */
   children?: React.ReactNode;
 }
 
-// React wrapper for ty-tooltip web component
 export const TyTooltip = React.forwardRef<HTMLElement, TyTooltipProps>(
   ({ 
     placement, 
@@ -35,7 +42,6 @@ export const TyTooltip = React.forwardRef<HTMLElement, TyTooltipProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle ref forwarding
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -46,13 +52,11 @@ export const TyTooltip = React.forwardRef<HTMLElement, TyTooltipProps>(
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add optional attributes only if they have values
     if (placement) {
       webComponentProps.placement = placement;
     }

package/src/components/TyWizard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 
-// Type definitions for Ty Wizard component
 export interface TyWizardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
   /** Content area width (accepts px or %) */
   width?: string;
@@ -32,7 +32,6 @@ export interface WizardStepChangeDetail {
   direction: 'forward' | 'backward' | 'none';
 }
 
-// React wrapper for ty-wizard web component
 export const TyWizard = React.forwardRef<HTMLElement, TyWizardProps>(
   ({
     children,
@@ -46,7 +45,6 @@ export const TyWizard = React.forwardRef<HTMLElement, TyWizardProps>(
   }, ref) => {
     const elementRef = useRef<HTMLElement>(null);
 
-    // Handle step change events
     useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
@@ -64,7 +62,6 @@ export const TyWizard = React.forwardRef<HTMLElement, TyWizardProps>(
       };
     }, [onStepChange]);
 
-    // Combine refs if needed
     useEffect(() => {
       if (ref && elementRef.current) {
         if (typeof ref === 'function') {
@@ -75,13 +72,11 @@ export const TyWizard = React.forwardRef<HTMLElement, TyWizardProps>(
       }
     }, [ref]);
 
-    // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 
-    // Add string attributes
     if (width) webComponentProps.width = width;
     if (height) webComponentProps.height = height;
     if (active) webComponentProps.active = active;

package/src/components/index.ts

@@ -1,7 +1,3 @@
-// ===================================================================
-// VERSION
-// ===================================================================
-
 import { VERSION } from '../version';
 
 /** Current version of tyrell-react (auto-synced with package.json on build). */
@@ -19,18 +15,8 @@ if (typeof window !== 'undefined') {
   );
 }
 
-// ===================================================================
-// 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)
-// ===================================================================
+// Every component is exported twice: Ty-prefixed (TyButton) and short
+// (Button). Both names point at the same wrapper — pick one per project.
 
 export { TyButton } from './TyButton';
 export type { TyButtonProps, TyButtonCSSProperties } from './TyButton';
@@ -59,7 +45,7 @@ export type { TyModalProps as TyDialogProps, TyModalEventDetail as TyDialogEvent
 export { TyTooltip } from './TyTooltip';
 export type { TyTooltipProps } from './TyTooltip';
 
-export { TySelect, TySelectedTags } from './TySelect';
+export { TySelect, TySelectedOptions, TySelectedTags } from './TySelect';
 export type { TySelectProps, TySelectEventDetail, TySelectItem, TySelectedTagsProps } from './TySelect';
 
 export { TyCalendar } from './TyCalendar';
@@ -116,11 +102,6 @@ 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';
@@ -147,128 +128,52 @@ 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';
 
-// 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';
 
-// 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';
 
-// FileUpload types
 export type { TyFileUploadProps as FileUploadProps, TyFileUploadEventDetail as FileUploadEventDetail } from './TyFileUpload';
 
-// 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>
-  );
-}
-
-*/

package/src/utils/host-props.ts

@@ -0,0 +1,14 @@
+/**
+ * Normalize pass-through props for a custom-element host.
+ *
+ * React 18 does not special-case `className` on custom elements — it
+ * lowercases the prop into a literal `classname=""` attribute, which no CSS
+ * ever matches. Renaming it to `class` makes React pass it through verbatim,
+ * so host-level utility classes (layout, positioning) actually apply.
+ * React 19 handles `className` natively; this stays harmless there.
+ */
+export function hostProps<T extends Record<string, any>>(props: T): Record<string, any> {
+  const { className, ...rest } = props;
+  if (className != null) (rest as Record<string, any>).class = className;
+  return rest;
+}

package/src/version.ts

@@ -3,4 +3,4 @@
 // Run 'npm run generate:version' to regenerate.
 
 /** Current version of tyrell-react. Synced with package.json on build. */
-export const VERSION = '1.0.0-RC12'
+export const VERSION = '1.0.0-RC14'