@idealyst/components 1.2.102 → 1.2.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.102",
+  "version": "1.2.104",
   "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.102",
+    "@idealyst/theme": "^1.2.104",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,8 +107,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.102",
-    "@idealyst/tooling": "^1.2.102",
+    "@idealyst/theme": "^1.2.104",
+    "@idealyst/tooling": "^1.2.104",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Grid/Grid.web.tsx

@@ -62,7 +62,7 @@ const Grid = forwardRef<IdealystElement, GridProps>(({
         marginHorizontal,
     });
 
-    const webProps = getWebProps([gridStyles.grid, flattenStyle(style)]);
+    const webProps = getWebProps(gridStyles.grid);
     const mergedRef = useMergeRefs(ref, webProps.ref, layoutRef);
 
     const gridTemplateColumns = `repeat(${resolvedColumns}, 1fr)`;
@@ -74,7 +74,7 @@ const Grid = forwardRef<IdealystElement, GridProps>(({
             id={id}
             data-testid={testID}
             style={{
-                ...webProps.style,
+                ...flattenStyle(style),
                 gridTemplateColumns,
             }}
         >

package/src/Switch/Switch.native.tsx

@@ -121,23 +121,17 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     };
   });
 
-  // Get dynamic styles - call as functions for theme reactivity
-  const switchTrackStyle = (switchStyles.switchTrack as any)({ checked, intent, disabled });
-  const containerStyle = (switchStyles.container as any)({});
-  const switchContainerStyle = (switchStyles.switchContainer as any)({});
-  const labelStyle = (switchStyles.label as any)({ disabled, labelPosition });
-
   const switchElement = (
     <Pressable
       ref={!label ? ref : undefined}
       nativeID={!label ? id : undefined}
       onPress={handlePress}
       disabled={disabled}
-      style={switchContainerStyle}
+      style={switchStyles.switchContainer as any}
       testID={testID}
       {...nativeA11yProps}
     >
-      <Animated.View style={switchTrackStyle}>
+      <Animated.View style={switchStyles.switchTrack as any}>
         <Animated.View
           style={[
             {
@@ -167,14 +161,14 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
         nativeID={id}
         onPress={handlePress}
         disabled={disabled}
-        style={[containerStyle, style]}
+        style={[switchStyles.container as any, style]}
       >
         {labelPosition === 'left' && (
-          <Text style={labelStyle}>{label}</Text>
+          <Text style={switchStyles.label as any}>{label}</Text>
         )}
         {switchElement}
         {labelPosition === 'right' && (
-          <Text style={labelStyle}>{label}</Text>
+          <Text style={switchStyles.label as any}>{label}</Text>
         )}
       </Pressable>
     );

package/src/Switch/Switch.web.tsx

@@ -93,10 +93,10 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     marginHorizontal,
   });
 
-  const trackProps = getWebProps([(switchStyles.switchTrack as any)({ checked, intent, disabled })]);
-  const thumbProps = getWebProps([(switchStyles.switchThumb as any)({ size, checked })]);
-  const thumbIconProps = getWebProps([(switchStyles.thumbIcon as any)({ checked, intent })]);
-  const labelProps = getWebProps([(switchStyles.label as any)({ disabled, labelPosition })]);
+  const trackProps = getWebProps([switchStyles.switchTrack as any]);
+  const thumbProps = getWebProps([switchStyles.switchThumb as any]);
+  const thumbIconProps = getWebProps([switchStyles.thumbIcon as any]);
+  const labelProps = getWebProps([switchStyles.label as any]);
 
   // Helper to render icon
   const renderIcon = () => {
@@ -118,15 +118,11 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     return null;
   };
 
-  // Computed button props with dynamic styles
-  const computedButtonProps = getWebProps([
-    (switchStyles.switchContainer as any)({})
-  ]);
+  // Computed button props with static style references
+  const computedButtonProps = getWebProps([switchStyles.switchContainer as any]);
 
-  // Computed container props with dynamic styles (for when label exists)
-  const computedContainerProps = getWebProps([
-    (switchStyles.container as any)({ disabled }),
-  ]);
+  // Computed container props (for when label exists)
+  const computedContainerProps = getWebProps([switchStyles.container as any]);
 
   const mergedButtonRef = useMergeRefs(ref as React.Ref<HTMLButtonElement>, computedButtonProps.ref);
   const mergedContainerRef = useMergeRefs(ref as React.Ref<HTMLDivElement>, computedContainerProps.ref);

package/src/Text/Text.native.tsx

@@ -2,6 +2,8 @@ import { forwardRef } from 'react';
 import { Text as RNText } from 'react-native';
 import { TextProps } from './types';
 import { textStyles } from './Text.styles';
+import { getTextDefaults } from './defaults';
+import { getDefaultMaxFontSizeMultiplier } from '@idealyst/theme';
 import type { IdealystElement } from '../utils/refTypes';
 
 const Text = forwardRef<IdealystElement, TextProps>(({
@@ -10,6 +12,8 @@ const Text = forwardRef<IdealystElement, TextProps>(({
   weight,
   color,
   align = 'left',
+  numberOfLines,
+  maxFontSizeMultiplier,
   // Spacing variants from TextSpacingStyleProps
   gap,
   padding,
@@ -29,10 +33,14 @@ const Text = forwardRef<IdealystElement, TextProps>(({
     paddingHorizontal,
   });
 
+  const resolvedMaxFontSizeMultiplier = maxFontSizeMultiplier ?? getTextDefaults().maxFontSizeMultiplier ?? getDefaultMaxFontSizeMultiplier();
+
   return (
     <RNText
       ref={ref as any}
       nativeID={id}
+      numberOfLines={numberOfLines}
+      maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}
       style={[textStyles.text({ color, typography, weight, align }), style]}
       testID={testID}
     >

package/src/Text/Text.styles.tsx

@@ -20,8 +20,8 @@ export type TextVariants = {
 }
 
 /**
- * All props available to dynamic Text style functions.
- * Extensions and overrides receive these to make conditional styling decisions.
+ * Parameters for the internal Text dynamic style function.
+ * Used by the defineStyle implementation to resolve styles at runtime.
  */
 export type TextStyleParams = {
     /** Text color variant */
@@ -36,9 +36,10 @@ export type TextStyleParams = {
 
 /**
  * Text style definition type for use with extendStyle/overrideStyle.
+ * Extensions are plain style objects — functions are NOT supported.
  */
 export interface TextStyleDef {
-    text: (params: TextStyleParams) => TextStyle & {
+    text: TextStyle & {
         variants?: {
             typography?: Record<string, TextStyle>;
             weight?: Record<string, TextStyle>;

package/src/Text/Text.web.tsx

@@ -16,6 +16,7 @@ const Text = forwardRef<IdealystElement, TextProps>(({
   weight,
   color = 'primary',
   align = 'left',
+  numberOfLines,
   // Spacing variants from TextSpacingStyleProps
   gap,
   padding,
@@ -36,9 +37,26 @@ const Text = forwardRef<IdealystElement, TextProps>(({
     paddingHorizontal,
   });
 
+  // Build numberOfLines truncation styles for web
+  const truncationStyle: React.CSSProperties | undefined = numberOfLines != null
+    ? numberOfLines === 1
+      ? {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }
+      : {
+          overflow: 'hidden',
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical' as const,
+          WebkitLineClamp: numberOfLines,
+        }
+    : undefined;
+
   // Create the style array - pass all style-affecting props to dynamic style function
   const textStyleArray = [
     (textStyles.text as any)({ color, typography, weight, align }),
+    truncationStyle,
     flattenStyle(style),
   ];
 

package/src/Text/defaults.ts

@@ -0,0 +1,33 @@
+/**
+ * Module-level defaults for the Text component.
+ *
+ * Configure once at app startup:
+ *   import { setTextDefaults } from '@idealyst/components';
+ *   setTextDefaults({ maxFontSizeMultiplier: 1.2 });
+ */
+
+export interface TextDefaults {
+  /**
+   * Default maximum font scale factor for accessibility text sizing.
+   * Applied to all Text components unless overridden by the prop.
+   * Set to 0 to disable scaling limits. undefined means no limit.
+   */
+  maxFontSizeMultiplier?: number;
+}
+
+let defaults: TextDefaults = {};
+
+/**
+ * Set default values for all Text components.
+ * Call once at app startup before rendering.
+ */
+export function setTextDefaults(newDefaults: TextDefaults): void {
+  defaults = { ...defaults, ...newDefaults };
+}
+
+/**
+ * Get current Text defaults. Used internally by Text components.
+ */
+export function getTextDefaults(): TextDefaults {
+  return defaults;
+}

package/src/Text/index.native.ts

@@ -1,3 +1,4 @@
 // React Native-specific Text export
 export { default } from './Text.native';
-export * from './types'; 
+export * from './types';
+export { setTextDefaults } from './defaults';

package/src/Text/index.ts

@@ -3,4 +3,5 @@ import TextComponent from './Text.web';
 export default TextComponent;
 export { TextComponent as Text };
 export * from './types';
+export { setTextDefaults } from './defaults';
 export type { TextStyleDef, TextStyleParams, TextVariants } from './Text.styles';

package/src/Text/index.web.ts

@@ -3,3 +3,4 @@ import TextComponent from './Text.web';
 export default TextComponent;
 export { TextComponent as Text };
 export * from './types';
+export { setTextDefaults } from './defaults';

package/src/Text/types.ts

@@ -47,6 +47,20 @@ export interface TextProps extends TextSpacingStyleProps {
    */
   align?: TextAlignVariant;
 
+  /**
+   * Number of lines to display before truncating with ellipsis.
+   * On native, maps directly to React Native's numberOfLines prop.
+   * On web, uses CSS line-clamp for multi-line and text-overflow for single-line.
+   */
+  numberOfLines?: number;
+
+  /**
+   * Maximum font scale factor for accessibility text sizing.
+   * Limits how large text can grow when the user increases their device font size.
+   * Set to 0 to disable scaling limits. Only applies on native (iOS & Android).
+   */
+  maxFontSizeMultiplier?: number;
+
   /**
    * Additional styles (platform-specific)
    */

package/src/index.ts

@@ -9,7 +9,7 @@ export * from './Button/types';
 export { default as IconButton } from './IconButton';
 export * from './IconButton/types';
 
-export { default as Text } from './Text';
+export { default as Text, setTextDefaults } from './Text';
 export * from './Text/types';
 
 export { default as View } from './View';