@idealyst/components 1.1.8 → 1.2.0

package/src/Table/Table.web.tsx

@@ -1,9 +1,135 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, ReactNode } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { tableStyles } from './Table.styles';
-import type { TableProps, TableColumn } from './types';
+import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
 import { getWebAriaProps } from '../utils/accessibility';
 
+// ============================================================================
+// Sub-component Props
+// ============================================================================
+
+interface TRProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  clickable?: boolean;
+  onClick?: () => void;
+  testID?: string;
+}
+
+interface THProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+  accessibilitySort?: 'ascending' | 'descending' | 'none' | 'other';
+}
+
+interface TDProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+}
+
+// ============================================================================
+// TR Component
+// ============================================================================
+
+function TR({
+  children,
+  size = 'md',
+  type = 'standard',
+  clickable = false,
+  onClick,
+  testID,
+}: TRProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    clickable,
+  });
+
+  const rowProps = getWebProps([(tableStyles.row as any)({})]);
+
+  return (
+    <tr
+      {...rowProps}
+      onClick={onClick}
+      data-testid={testID}
+    >
+      {children}
+    </tr>
+  );
+}
+
+// ============================================================================
+// TH Component
+// ============================================================================
+
+function TH({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+  accessibilitySort,
+}: THProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const headerCellProps = getWebProps([(tableStyles.headerCell as any)({})]);
+
+  return (
+    <th
+      {...headerCellProps}
+      scope="col"
+      aria-sort={accessibilitySort}
+      style={{ width }}
+    >
+      {children}
+    </th>
+  );
+}
+
+// ============================================================================
+// TD Component
+// ============================================================================
+
+function TD({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+}: TDProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const cellProps = getWebProps([(tableStyles.cell as any)({})]);
+
+  return (
+    <td
+      {...cellProps}
+      style={{ width }}
+    >
+      {children}
+    </td>
+  );
+}
+
+// ============================================================================
+// Main Table Component
+// ============================================================================
+
 function Table<T = any>({
   columns,
   data,
@@ -37,7 +163,8 @@ function Table<T = any>({
       accessibilityHidden,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
-  // Apply variants
+
+  // Apply variants for container
   tableStyles.useVariants({
     type,
     size,
@@ -51,7 +178,7 @@ function Table<T = any>({
   });
 
   const containerProps = getWebProps([(tableStyles.container as any)({}), style as any]);
-  const tableProps = getWebProps([tableStyles.table]);
+  const tableProps = getWebProps([(tableStyles.table as any)({})]);
 
   // Helper to get cell value
   const getCellValue = (column: TableColumn<T>, row: T, rowIndex: number) => {
@@ -67,79 +194,51 @@ function Table<T = any>({
   return (
     <div {...containerProps} {...ariaProps} id={id} data-testid={testID}>
       <table {...tableProps} role="table">
-        <thead {...getWebProps([tableStyles.thead])}>
+        <thead {...getWebProps([(tableStyles.thead as any)({})])}>
           <tr>
-            {columns.map((column) => {
-              tableStyles.useVariants({
-                size,
-                align: column.align || 'left',
-                type,
-              });
-
-              const headerCellProps = getWebProps([tableStyles.headerCell]);
-
-              return (
-                <th
-                  key={column.key}
-                  {...headerCellProps}
-                  scope="col"
-                  aria-sort={column.accessibilitySort}
-                  style={{
-                    width: column.width,
-                  }}
-                >
-                  {column.title}
-                </th>
-              );
-            })}
+            {columns.map((column) => (
+              <TH
+                key={column.key}
+                size={size}
+                type={type}
+                align={column.align}
+                width={column.width}
+                accessibilitySort={column.accessibilitySort}
+              >
+                {column.title}
+              </TH>
+            ))}
           </tr>
         </thead>
-        <tbody {...getWebProps([tableStyles.tbody])}>
-          {data.map((row, rowIndex) => {
-            tableStyles.useVariants({
-              size,
-              align: 'left',
-              type,
-              clickable: isClickable,
-            });
-
-            const rowProps = getWebProps([tableStyles.row]);
-
-            return (
-              <tr
-                key={rowIndex}
-                {...rowProps}
-                onClick={() => onRowPress?.(row, rowIndex)}
-                data-testid={`${testID}-row-${rowIndex}`}
-              >
-                {columns.map((column) => {
-                  tableStyles.useVariants({
-                    size,
-                    align: column.align || 'left',
-                    type,
-                  });
-
-                  const cellProps = getWebProps([tableStyles.cell]);
-
-                  return (
-                    <td
-                      key={column.key}
-                      {...cellProps}
-                      style={{
-                        width: column.width,
-                      }}
-                    >
-                      {getCellValue(column, row, rowIndex)}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
+        <tbody {...getWebProps([(tableStyles.tbody as any)({})])}>
+          {data.map((row, rowIndex) => (
+            <TR
+              key={rowIndex}
+              size={size}
+              type={type}
+              clickable={isClickable}
+              onClick={() => onRowPress?.(row, rowIndex)}
+              testID={testID ? `${testID}-row-${rowIndex}` : undefined}
+            >
+              {columns.map((column) => (
+                <TD
+                  key={column.key}
+                  size={size}
+                  type={type}
+                  align={column.align}
+                  width={column.width}
+                >
+                  {getCellValue(column, row, rowIndex)}
+                </TD>
+              ))}
+            </TR>
+          ))}
         </tbody>
       </table>
     </div>
   );
 }
 
+
+
 export default Table;

package/src/Text/Text.web.tsx

@@ -10,6 +10,7 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
   weight,
   color = 'primary',
   align = 'left',
+  pre = false,
   // Spacing variants from TextSpacingStyleProps
   gap,
   padding,

package/src/TextArea/TextArea.native.tsx

@@ -129,20 +129,33 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
 
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyleComputed = (textAreaStyles.container as any)({});
+  const labelStyleComputed = (textAreaStyles.label as any)({ disabled });
+  const textareaContainerStyleComputed = (textAreaStyles.textareaContainer as any)({});
+  const textareaStyleComputed = (textAreaStyles.textarea as any)({ intent, disabled, hasError });
+  const footerStyleComputed = (textAreaStyles.footer as any)({});
+  const helperTextStyleComputed = (textAreaStyles.helperText as any)({ hasError });
+  const characterCountStyleComputed = (textAreaStyles.characterCount as any)({
+    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
+    isAtLimit: maxLength ? value.length >= maxLength : false,
+  });
+
   return (
-    <View nativeID={id} style={[textAreaStyles.container, style]} testID={testID}>
+    <View nativeID={id} style={[containerStyleComputed, style]} testID={testID}>
       {label && (
-        <Text style={textAreaStyles.label}>{label}</Text>
+        <Text style={labelStyleComputed}>{label}</Text>
       )}
 
-      <View style={textAreaStyles.textareaContainer}>
+      <View style={textareaContainerStyleComputed}>
         <TextInput
           ref={ref}
           {...nativeA11yProps}
           style={[
-            textAreaStyles.textarea({ intent, disabled, hasError }),
+            textareaStyleComputed,
             {
               textAlignVertical: 'top',
+              backgroundColor: 'transparent',
             },
             maxHeight && { maxHeight },
             { height: autoGrow ? contentHeight : rows * 24 },
@@ -161,22 +174,22 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
       </View>
 
       {showFooter && (
-        <View style={textAreaStyles.footer}>
+        <View style={footerStyleComputed}>
           <View style={{ flex: 1 }}>
             {error && (
-              <Text style={textAreaStyles.helperText}>
+              <Text style={helperTextStyleComputed}>
                 {error}
               </Text>
             )}
             {!error && helperText && (
-              <Text style={textAreaStyles.helperText}>
+              <Text style={helperTextStyleComputed}>
                 {helperText}
               </Text>
             )}
           </View>
 
           {showCharacterCount && maxLength && (
-            <Text style={textAreaStyles.characterCount}>
+            <Text style={characterCountStyleComputed}>
               {value.length}/{maxLength}
             </Text>
           )}

package/src/TextArea/TextArea.styles.tsx

@@ -35,6 +35,9 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
         display: 'flex' as const,
         flexDirection: 'column' as const,
         gap: 4,
+        borderWidth: 1,
+        borderColor: theme.colors.border.primary,
+        borderRadius: theme.radii.md,
         variants: {
             margin: {
                 margin: theme.sizes.$view.padding,
@@ -52,38 +55,25 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
         fontSize: 14,
         fontWeight: '500' as const,
         color: theme.colors.text.primary,
-        opacity: disabled ? 0.5 : 1,
     }),
 
     textareaContainer: (_props: TextAreaDynamicProps) => ({
         position: 'relative' as const,
-    }),
-
-    textarea: ({ intent = 'primary', disabled = false, hasError = false, resize = 'none' }: TextAreaDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const errorColor = theme.intents.error.primary;
-
-        // Get border color based on state
-        let borderColor = theme.colors.border.primary;
-        if (hasError) {
-            borderColor = errorColor;
-        } else if (intent === 'success' || intent === 'warning') {
-            borderColor = intentValue.primary;
+        variants: {
+            disabled: {
+                true: {
+                    opacity: 1,
+                },
+                false: {
+                    opacity: 0.8,
+                },
+            },
         }
+    }),
 
-        // Get web-specific styles
-        const webFocusStyles = hasError
-            ? { borderColor: errorColor, boxShadow: `0 0 0 2px ${errorColor}33` }
-            : { borderColor: intentValue.primary, boxShadow: `0 0 0 2px ${intentValue.primary}33` };
-
-        return {
+    textarea: ({ disabled = false, resize = 'none' }: TextAreaDynamicProps) => ({
             width: '100%',
             color: theme.colors.text.primary,
-            backgroundColor: disabled ? theme.colors.surface.secondary : theme.colors.surface.primary,
-            borderWidth: 1,
-            borderStyle: 'solid' as const,
-            borderColor,
-            borderRadius: 8,
             opacity: disabled ? 0.5 : 1,
             variants: {
                 size: {
@@ -101,10 +91,8 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 overflowY: 'hidden',
                 cursor: disabled ? 'not-allowed' : 'text',
                 resize: resize,
-                _focus: disabled ? {} : webFocusStyles,
             },
-        } as const;
-    },
+    }),
 
     helperText: ({ hasError = false }: TextAreaDynamicProps) => ({
         fontSize: 12,

package/src/TextArea/TextArea.web.tsx

@@ -127,12 +127,23 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([textAreaStyles.container, style as any]);
-  const labelProps = getWebProps([textAreaStyles.label]);
-  const textareaContainerProps = getWebProps([textAreaStyles.textareaContainer]);
-  const footerProps = getWebProps([textAreaStyles.footer]);
-  const helperTextProps = getWebProps([textAreaStyles.helperText]);
-  const characterCountProps = getWebProps([textAreaStyles.characterCount]);
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyle = (textAreaStyles.container as any)({});
+  const labelStyle = (textAreaStyles.label as any)({ disabled });
+  const textareaContainerStyle = (textAreaStyles.textareaContainer as any)({});
+  const footerStyle = (textAreaStyles.footer as any)({});
+  const helperTextStyle = (textAreaStyles.helperText as any)({ hasError });
+  const characterCountStyle = (textAreaStyles.characterCount as any)({
+    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
+    isAtLimit: maxLength ? value.length >= maxLength : false,
+  });
+
+  const containerProps = getWebProps([containerStyle, style as any]);
+  const labelProps = getWebProps([labelStyle]);
+  const textareaContainerProps = getWebProps([textareaContainerStyle]);
+  const footerProps = getWebProps([footerStyle]);
+  const helperTextProps = getWebProps([helperTextStyle]);
+  const characterCountProps = getWebProps([characterCountStyle]);
 
   const adjustHeight = () => {
     if (!autoGrow || !textareaRef.current) return;

package/src/View/View.native.tsx

@@ -1,8 +1,27 @@
 import React, { forwardRef } from 'react';
-import { View as RNView, ScrollView as RNScrollView, ViewStyle } from 'react-native';
+import { View as RNView, ScrollView as RNScrollView, ViewStyle, StyleSheet } from 'react-native';
+import { useResponsiveStyle, ResponsiveStyle } from '@idealyst/theme';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
 
+/**
+ * Check if a style object contains any responsive values
+ */
+function hasResponsiveValues(style: any): style is ResponsiveStyle {
+  if (!style || typeof style !== 'object' || Array.isArray(style)) return false;
+  for (const key in style) {
+    const value = style[key];
+    if (value && typeof value === 'object' && !Array.isArray(value) && !('$$typeof' in value)) {
+      // Check if it looks like a breakpoint map (has breakpoint-like keys)
+      const keys = Object.keys(value);
+      if (keys.some(k => ['xs', 'sm', 'md', 'lg', 'xl'].includes(k))) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
 const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   children,
   background = 'transparent',
@@ -50,11 +69,22 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   if (borderWidth !== undefined) overrideStyles.borderWidth = borderWidth;
   if (borderColor) overrideStyles.borderColor = borderColor;
 
+  // Flatten style array if needed and check for responsive values
+  const flattenedStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
+
+  // Resolve responsive values if present (this hook is reactive to breakpoint changes)
+  const resolvedStyle = useResponsiveStyle(
+    hasResponsiveValues(flattenedStyle) ? flattenedStyle : {}
+  );
+
+  // Use resolved style if responsive, otherwise use original
+  const finalStyle = hasResponsiveValues(flattenedStyle) ? resolvedStyle : style;
+
   if (scrollable) {
     return (
       <RNScrollView
         ref={ref as any}
-        style={[viewStyle, { flex: 1 }, overrideStyles, style]}
+        style={[viewStyle, { flex: 1 }, overrideStyles, finalStyle]}
         contentContainerStyle={[viewStyle, overrideStyles]}
         testID={testID}
         nativeID={id}
@@ -65,7 +95,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   }
 
   return (
-    <RNView ref={ref as any} style={[viewStyle, overrideStyles, style]} testID={testID} nativeID={id}>
+    <RNView ref={ref as any} style={[viewStyle, overrideStyles, finalStyle]} testID={testID} nativeID={id}>
       {children}
     </RNView>
   );

package/src/View/View.web.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useResponsiveStyle } from '@idealyst/theme';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
@@ -41,32 +41,15 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
     marginHorizontal,
   });
 
-  // Create dynamic styles based on custom props (overrides variants)
-  const dynamicStyles: any = {};
-
-  if (backgroundColor) dynamicStyles.backgroundColor = backgroundColor;
-  if (borderRadius !== undefined) dynamicStyles.borderRadius = borderRadius;
-  if (borderWidth !== undefined) dynamicStyles.borderWidth = borderWidth;
-  if (borderColor) dynamicStyles.borderColor = borderColor;
-
-  // Flatten style array to object (HTML divs don't support style arrays)
-  const flattenedStyle = useMemo(() => {
-    if (!style) return undefined;
-    if (Array.isArray(style)) {
-      return StyleSheet.flatten(style);
-    }
-    return style;
-  }, [style]);
-
   // Call style as function to get theme-reactive styles
   /** @ts-ignore */
-  const webProps = getWebProps([(viewStyles.view as any)({}), dynamicStyles]);
-
+  const webProps = getWebProps((viewStyles.view as any)({}));
+  
   const mergedRef = useMergeRefs(ref, webProps.ref);
 
   return (
     <div
-      style={flattenedStyle as any}
+      style={style as any}
       {...webProps}
       ref={mergedRef}
       id={id}

package/src/View/types.ts

@@ -1,8 +1,28 @@
-import { Size, Surface } from '@idealyst/theme';
+import { Size, Surface, ResponsiveStyle } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 
+/**
+ * Style prop type that accepts both regular styles and responsive styles.
+ * Responsive styles allow breakpoint-based values:
+ * @example
+ * ```tsx
+ * // Regular style
+ * <View style={{ flexDirection: 'column' }} />
+ *
+ * // Responsive style
+ * <View style={{ flexDirection: { xs: 'column', md: 'row' } }} />
+ *
+ * // Style array (native only)
+ * <View style={[styles.container, { padding: 10 }]} />
+ *
+ * // Web-only CSS properties
+ * <View style={{ display: 'inline-block' }} />
+ * ```
+ */
+export type ViewStyleProp = StyleProp<ViewStyle> | ResponsiveStyle | React.CSSProperties;
+
 // Component-specific type aliases for future extensibility
 export type ViewBackgroundVariant = Surface | 'transparent';
 export type ViewRadiusVariant = Size | 'none';
@@ -50,9 +70,17 @@ export interface ViewProps extends ContainerStyleProps {
   borderColor?: string;
 
   /**
-   * Additional styles (platform-specific)
+   * Additional styles. Supports responsive values for any property.
+   * @example
+   * ```tsx
+   * // Responsive flexDirection
+   * <View style={{ flexDirection: { xs: 'column', md: 'row' } }} />
+   *
+   * // Mix responsive and static values
+   * <View style={{ padding: { xs: 8, lg: 16 }, backgroundColor: '#fff' }} />
+   * ```
    */
-  style?: React.CSSProperties | StyleProp<ViewStyle>;
+  style?: ViewStyleProp;
 
   /**
    * Enable scrollable content (uses ScrollView on native, overflow:auto on web)

package/src/examples/ButtonExamples.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Screen, View, Button, Text } from '@idealyst/components';
+import { useUnistyles } from 'react-native-unistyles';
 
 export const ButtonExamples = () => {
   const handlePress = (buttonType: string) => {
     console.log(`Button pressed: ${buttonType}`);
   };
 
+  const { theme } = useUnistyles()
+
   return (
     <Screen background="primary">
       <View gap="xl">
@@ -41,6 +44,23 @@ export const ButtonExamples = () => {
         </View>
       </View>
 
+       {/* Show all intents in theme (including extended intents) */}
+      <View gap="md">
+        <Text typography="subtitle1">All Intents</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          { (Object.keys(theme.intents) as Array<keyof typeof theme.intents>).map((intent) => (
+            <Button 
+              key={intent}
+              type="contained" 
+              intent={intent}
+              onPress={() => handlePress(`intent-${intent}`)}
+            >
+              {intent.charAt(0).toUpperCase() + intent.slice(1)}
+            </Button>
+          )) }
+        </View>
+      </View>
+
       {/* Button Sizes */}
       <View gap="md">
         <Text typography="subtitle1">Sizes</Text>

package/src/index.ts

@@ -40,7 +40,7 @@ export * from './Avatar/types';
 export { default as Screen } from './Screen';
 export * from './Screen/types';
 
-export { default as Icon } from './Icon';
+export { default as Icon, IconRegistry } from './Icon';
 export * from './Icon/types';
 
 export { default as SVGImage } from './SVGImage';