@idealyst/components 1.2.56 → 1.2.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.56",
+  "version": "1.2.58",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.56",
+    "@idealyst/theme": "^1.2.58",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.56",
+    "@idealyst/theme": "^1.2.58",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Alert/Alert.web.tsx

@@ -6,6 +6,7 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 // Default icons for each intent
 const defaultIcons: Record<string, React.ComponentType<any>> = {
@@ -42,7 +43,7 @@ const Alert = forwardRef<IdealystElement, AlertProps>(({
 
   // Compute dynamic styles with intent, type, and size
   const dynamicProps = { intent, type, size };
-  const containerProps = getWebProps([(alertStyles.container as any)(dynamicProps), style as any]);
+  const containerProps = getWebProps([(alertStyles.container as any)(dynamicProps), flattenStyle(style)]);
   const iconContainerProps = getWebProps([(alertStyles.iconContainer as any)(dynamicProps)]);
   const contentProps = getWebProps([(alertStyles.content as any)(dynamicProps)]);
   const titleProps = getWebProps([(alertStyles.title as any)(dynamicProps)]);

package/src/Avatar/Avatar.web.tsx

@@ -5,6 +5,7 @@ import { avatarStyles } from './Avatar.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebAriaProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * User or entity representation with image support and fallback initials.
@@ -44,7 +45,7 @@ const Avatar = forwardRef<IdealystElement, AvatarProps>(({
     shape,
   });
 
-  const avatarStyleArray = [(avatarStyles.avatar as any)({ color }), style];
+  const avatarStyleArray = [(avatarStyles.avatar as any)({ color }), flattenStyle(style)];
   const avatarProps = getWebProps(avatarStyleArray);
 
   // Generate fallback text styles with proper theming and size

package/src/Badge/Badge.web.tsx

@@ -5,6 +5,7 @@ import { badgeStyles } from './Badge.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Small status indicator for counts, labels, or notifications.
@@ -67,11 +68,14 @@ const Badge = forwardRef<IdealystElement, BadgeProps>((props, ref) => {
 
   const mergedRef = useMergeRefs(ref, badgeProps.ref);
 
+  // Flatten style array for web compatibility
+  const flatStyle = flattenStyle(style);
+
   if (type === 'dot') {
     return (
       <span
         {...badgeProps}
-        style={style as React.CSSProperties}
+        style={flatStyle}
         ref={mergedRef}
         id={id}
         data-testid={testID}
@@ -86,7 +90,7 @@ const Badge = forwardRef<IdealystElement, BadgeProps>((props, ref) => {
   return (
     <span
       {...badgeProps}
-      style={style as React.CSSProperties}
+      style={flatStyle}
       ref={mergedRef}
       id={id}
       data-testid={testID}

package/src/Button/Button.web.tsx

@@ -6,6 +6,7 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Interactive button component with multiple visual variants, sizes, and icon support.
@@ -117,7 +118,7 @@ const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
   const buttonStyleArray = [
     (buttonStyles.button as any)(dynamicProps),
     (buttonStyles.text as any)(dynamicProps),
-    style as any,
+    flattenStyle(style),
   ];
 
   // Use getWebProps to generate className and ref for web

package/src/Card/Card.web.tsx

@@ -6,6 +6,7 @@ import useMergeRefs from '../hooks/useMergeRefs';
 import { useWebLayout } from '../hooks/useWebLayout';
 import { getWebInteractiveAriaProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 // Track if we've logged the onClick deprecation warning (log once per session)
 let hasLoggedOnClickWarning = false;
@@ -108,7 +109,7 @@ const Card = forwardRef<IdealystElement, CardProps>(({
   const cardStyle = (cardStyles.card as any)({});
 
   // Generate web props
-  const webProps = getWebProps([cardStyle, style as any]);
+  const webProps = getWebProps([cardStyle, flattenStyle(style)]);
 
   const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 

package/src/Checkbox/Checkbox.web.tsx

@@ -6,6 +6,7 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebSelectionAriaProps, generateAccessibilityId, combineIds } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Checkbox input for boolean selection with support for indeterminate state.
@@ -132,7 +133,7 @@ const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   });
 
   // Create style arrays - call as functions with required props for theme reactivity
-  const wrapperStyleArray = [(checkboxStyles.wrapper as any)({}), style as any];
+  const wrapperStyleArray = [(checkboxStyles.wrapper as any)({}), flattenStyle(style)];
   const containerStyleArray = [(checkboxStyles.container as any)({})];
   const checkboxStyleArray = [(checkboxStyles.checkbox as any)({ intent, checked: internalChecked, disabled, type: variant })];
   const labelStyleArray = [(checkboxStyles.label as any)({ disabled })];

package/src/Chip/Chip.web.tsx

@@ -6,6 +6,7 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 // Track if we've logged the onClick deprecation warning (log once per session)
 let hasLoggedOnClickWarning = false;
@@ -55,7 +56,7 @@ const Chip = forwardRef<IdealystElement, ChipProps>(({
   const isSelected = selectable ? selected : false;
 
   // Compute dynamic styles
-  const containerProps = getWebProps([(chipStyles.container as any)({ size, intent, type, selected: isSelected, disabled }), style as any]);
+  const containerProps = getWebProps([(chipStyles.container as any)({ size, intent, type, selected: isSelected, disabled }), flattenStyle(style)]);
   const labelProps = getWebProps([(chipStyles.label as any)({ size, intent, type, selected: isSelected })]);
   const iconProps = getWebProps([(chipStyles.icon as any)({ size, intent, type, selected: isSelected })]);
   const deleteButtonProps = getWebProps([(chipStyles.deleteButton as any)({ size })]);

package/src/Dialog/Dialog.web.tsx

@@ -6,6 +6,7 @@ import { dialogStyles } from './Dialog.styles';
 import Icon from '../Icon';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Modal overlay dialog for focused user interactions and confirmations.
@@ -145,7 +146,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   ]);
   const containerProps = getWebProps([
     (dialogStyles.container as any)({}),
-    style as any,
+    flattenStyle(style),
     height !== undefined ? { height, display: 'flex', flexDirection: 'column' } : null,
     isVisible
       ? { opacity: 1, transform: 'scale(1) translateY(0px)' }

package/src/Icon/Icon.web.tsx

@@ -8,6 +8,7 @@ import useMergeRefs from '../hooks/useMergeRefs';
 import { getColorFromString, Intent, Color, Text } from '@idealyst/theme';
 import { IconRegistry } from './IconRegistry';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Vector icon display from the Material Design Icons library.
@@ -61,7 +62,7 @@ const Icon = forwardRef<IdealystElement, IconProps>((props, ref) => {
 
   // Use getWebProps for className generation but override with computed values
   const iconStyle = (iconStyles.icon as any)({ intent, color, textColor, size });
-  const iconProps = getWebProps([iconStyle, style]);
+  const iconProps = getWebProps([iconStyle, flattenStyle(style)]);
 
   const mergedRef = useMergeRefs(ref, iconProps.ref);
 

package/src/Pressable/Pressable.web.tsx

@@ -4,6 +4,7 @@ import { PressableProps } from './types';
 import { pressableStyles } from './Pressable.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 const Pressable = forwardRef<IdealystElement, PressableProps>(({
   children,
@@ -62,7 +63,7 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
     paddingHorizontal,
   });
 
-  const webProps = getWebProps([(pressableStyles.pressable as any)({}), style as any]);
+  const webProps = getWebProps([(pressableStyles.pressable as any)({}), flattenStyle(style)]);
 
   const baseStyle: React.CSSProperties = {
     cursor: disabled ? 'default' : 'pointer',

package/src/Screen/Screen.web.tsx

@@ -5,6 +5,7 @@ import { screenStyles } from './Screen.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { useWebLayout } from '../hooks/useWebLayout';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Full-screen container for page layouts with background color and safe area support.
@@ -46,7 +47,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   });
 
   // Call style as function to get theme-reactive styles
-  const webProps = getWebProps([(screenStyles.screen as any)({}), style as any]);
+  const webProps = getWebProps([(screenStyles.screen as any)({}), flattenStyle(style)]);
 
   const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 

package/src/Switch/Switch.web.tsx

@@ -7,6 +7,7 @@ import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebSelectionAriaProps, generateAccessibilityId } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Toggle switch for binary on/off states with optional label and icons.
@@ -134,7 +135,7 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     <button
       {...computedButtonProps}
       {...ariaProps}
-      style={style as any}
+      style={flattenStyle(style)}
       ref={mergedButtonRef}
       onClick={handleClick}
       disabled={disabled}

package/src/Text/Text.web.tsx

@@ -4,6 +4,7 @@ import { TextProps } from './types';
 import { textStyles } from './Text.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Typography component for displaying text with predefined styles and semantic variants.
@@ -38,7 +39,7 @@ const Text = forwardRef<IdealystElement, TextProps>(({
   // Create the style array - pass all style-affecting props to dynamic style function
   const textStyleArray = [
     (textStyles.text as any)({ color, typography, weight, align }),
-    style,
+    flattenStyle(style),
   ];
 
   // Use getWebProps to generate className and ref for web

package/src/TextInput/TextInput.web.tsx

@@ -8,6 +8,7 @@ import { textInputStyles } from './TextInput.styles';
 import { TextInputProps } from './types';
 import { getWebFormAriaProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Single-line text input field with support for icons, password visibility toggle, and validation states.
@@ -137,7 +138,7 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
 
   // Get web props for all styled elements (all styles are dynamic functions)
   const dynamicContainerStyle = (textInputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
-  const {ref: containerStyleRef, ...containerProps} = getWebProps([dynamicContainerStyle, style]);
+  const {ref: containerStyleRef, ...containerProps} = getWebProps([dynamicContainerStyle, flattenStyle(style)]);
   const leftIconContainerProps = getWebProps([(textInputStyles.leftIconContainer as any)({})]);
   const rightIconContainerProps = getWebProps([(textInputStyles.rightIconContainer as any)({})]);
   const passwordToggleProps = getWebProps([(textInputStyles.passwordToggle as any)({})]);

package/src/View/View.web.tsx

@@ -5,6 +5,7 @@ import { viewStyles } from './View.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { useWebLayout } from '../hooks/useWebLayout';
 import type { IdealystElement } from '../utils/refTypes';
+import { flattenStyle } from '../utils/flattenStyle';
 
 /**
  * Fundamental layout container with background, border, and spacing options.
@@ -61,12 +62,15 @@ const View = forwardRef<IdealystElement, ViewProps>(({
 
   const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 
+  // Flatten style array into a single object (style can be an array on RN)
+  const flatStyle = flattenStyle(style);
+
   // When scrollable, render a wrapper + content structure
   // Wrapper: sizing and margin (positioning in parent layout)
   // Content: absolutely positioned with overflow:auto, visual styles (padding, background, border)
   if (scrollable) {
     // Split user styles: layout/sizing to wrapper, visual styles to content
-    const styleObj = (style as React.CSSProperties) || {};
+    const styleObj = flatStyle;
     const {
       // Sizing - goes to wrapper
       width,
@@ -154,7 +158,7 @@ const View = forwardRef<IdealystElement, ViewProps>(({
   return (
     <div
       {...webProps}
-      style={style as any}
+      style={flatStyle}
       ref={mergedRef}
       id={id}
       data-testid={testID}

package/src/utils/flattenStyle.ts

@@ -0,0 +1,26 @@
+import type { StyleProp } from 'react-native';
+
+/**
+ * Flattens a style prop (which can be a single style, an array of styles,
+ * or nested arrays) into a single style object.
+ *
+ * This is needed on web because React Native's StyleProp allows arrays,
+ * but web components need a flat object for destructuring and spreading.
+ */
+export function flattenStyle<T extends object>(
+  style: StyleProp<T> | React.CSSProperties | undefined
+): React.CSSProperties {
+  if (!style) {
+    return {};
+  }
+
+  if (Array.isArray(style)) {
+    // Recursively flatten and merge all styles in the array
+    return style.reduce<React.CSSProperties>((acc, s) => {
+      return { ...acc, ...flattenStyle(s as StyleProp<T>) };
+    }, {});
+  }
+
+  // Single style object
+  return style as React.CSSProperties;
+}