tyrell-react 1.0.0-TC29 → 1.0.0-TC30

package/src/components/TyFileUpload.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty File Upload component
@@ -87,7 +88,7 @@ export const TyFileUpload = React.forwardRef<HTMLElement, TyFileUploadProps>(
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyInput.tsx

@@ -1,4 +1,5 @@
 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';
 
@@ -214,7 +215,7 @@ export const TyInput = React.forwardRef<HTMLElement, TyInputProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyModal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
 import { needsPropertyBridge } from '../utils/react-version';
 
@@ -166,7 +167,7 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyOption.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Option component
@@ -44,7 +45,7 @@ export const TyOption = React.forwardRef<HTMLElement, TyOptionProps>(
     return React.createElement(
       'ty-option',
       {
-        ...props,
+        ...hostProps(props),
         ...(label && { label }),
         ...(flavor && { flavor }),
         ...(isDisabled && { disabled: "" }),

package/src/components/TyPopup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // Type definitions for Ty Popup component
@@ -86,7 +87,7 @@ export const TyPopup = React.forwardRef<TyPopupElement, TyPopupProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyRadio.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 export interface TyRadioProps extends React.HTMLAttributes<HTMLElement> {
@@ -43,7 +44,7 @@ export const TyRadio = React.forwardRef<HTMLElement, TyRadioProps>(
     const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
 
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyRadioGroup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 export interface TyRadioGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
@@ -103,7 +104,7 @@ export const TyRadioGroup = React.forwardRef<HTMLElement, TyRadioGroupProps>(
     const isRequired = useBooleanProperty(elementRef, 'required', required);
 
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyResizeObserver.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 
 // Type definitions for Ty ResizeObserver component
 export interface TyResizeObserverProps extends React.HTMLAttributes<HTMLElement> {
@@ -35,7 +36,7 @@ export const TyResizeObserver = React.forwardRef<HTMLElement, TyResizeObserverPr
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
       id,
     };

package/src/components/TyScrollContainer.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import { hostProps } from '../utils/host-props';
 import { needsPropertyBridge } from '../utils/react-version';
 import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
 
@@ -126,7 +127,7 @@ export const TyScrollContainer = React.forwardRef<TyScrollContainerRef, TyScroll
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TySelect.tsx

@@ -1,4 +1,5 @@
 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';
 
@@ -175,7 +176,7 @@ export const TySelect = React.forwardRef<HTMLElement, TySelectProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 
@@ -230,7 +231,7 @@ export const TySelectedTags = React.forwardRef<HTMLElement, TySelectedTagsProps>
       }
     }, [ref]);
 
-    const webComponentProps: Record<string, any> = { ...props, ref: elementRef };
+    const webComponentProps: Record<string, any> = { ...hostProps(props), ref: elementRef };
     if (htmlFor) webComponentProps.for = htmlFor;
 
     return React.createElement('ty-selected-tags', webComponentProps, children);

package/src/components/TyStep.tsx

@@ -1,4 +1,5 @@
 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> {
@@ -47,7 +48,7 @@ export const TyStep = React.forwardRef<HTMLElement, TyStepProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
       id,
     };

package/src/components/TySwitch.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 export interface TySwitchProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
@@ -94,7 +95,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,4 +1,5 @@
 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
@@ -40,7 +41,7 @@ export const TyTab = React.forwardRef<HTMLElement, TyTabProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyTabs.tsx

@@ -1,4 +1,5 @@
 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'> {
@@ -72,7 +73,7 @@ export const TyTabs = React.forwardRef<HTMLElement, TyTabsProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyTag.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useCallback } from 'react';
+import { hostProps } from '../utils/host-props';
 import { useBooleanProperty } from '../utils/use-boolean-prop';
 
 // CSS custom properties that cascade into the shadow DOM for full color control
@@ -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,4 +1,5 @@
 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';
 
@@ -167,7 +168,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,4 +1,5 @@
 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
@@ -48,7 +49,7 @@ export const TyTooltip = React.forwardRef<HTMLElement, TyTooltipProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

package/src/components/TyWizard.tsx

@@ -1,4 +1,5 @@
 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'> {
@@ -77,7 +78,7 @@ export const TyWizard = React.forwardRef<HTMLElement, TyWizardProps>(
 
     // Convert React props to web component attributes
     const webComponentProps: Record<string, any> = {
-      ...props,
+      ...hostProps(props),
       ref: elementRef,
     };
 

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-TC29'
+export const VERSION = '1.0.0-TC30'