tyrell-react 1.0.0-RC12 → 1.0.0-RC13

package/src/components/TyTooltip.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' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
+
 // Type definitions for Ty Tooltip component
 export interface TyTooltipProps extends React.HTMLAttributes<HTMLElement> {
   /** Tooltip positioning relative to the parent element */
@@ -16,7 +20,7 @@ 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;
@@ -48,7 +52,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/components/index.ts

@@ -59,7 +59,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';

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-RC13'