@idealyst/components 1.2.14 → 1.2.16

package/src/TextArea/TextArea.styles.tsx

@@ -1,8 +1,8 @@
 /**
- * TextArea styles using defineStyle with dynamic props.
+ * TextArea styles using static styles with variants.
  */
 import { StyleSheet } from 'react-native-unistyles';
-import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import { defineStyle, ThemeStyleWrapper, CompoundVariants } from '@idealyst/theme';
 import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 import { ViewStyleSize } from '../utils/viewStyleProps';
 
@@ -12,26 +12,32 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type ResizeMode = 'none' | 'vertical' | 'horizontal' | 'both';
-
-export type TextAreaDynamicProps = {
-    size?: Size;
-    intent?: Intent;
-    disabled?: boolean;
-    hasError?: boolean;
-    resize?: ResizeMode;
-    isNearLimit?: boolean;
-    isAtLimit?: boolean;
+export type TextAreaVariants = {
+    size: Size;
+    intent: Intent;
+    disabled: boolean;
+    hasError: boolean;
+    isNearLimit: boolean;
+    isAtLimit: boolean;
     margin?: ViewStyleSize;
     marginVertical?: ViewStyleSize;
     marginHorizontal?: ViewStyleSize;
 };
 
+// Create intent variants dynamically from theme
+function createIntentVariants(theme: Theme) {
+    const variants: Record<string, object> = {};
+    for (const intent in theme.intents) {
+        variants[intent] = {};
+    }
+    return variants;
+}
+
 /**
- * TextArea styles with intent/disabled/error handling.
+ * TextArea styles with static styles and variants.
  */
 export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
-    container: (_props: TextAreaDynamicProps) => ({
+    container: {
         display: 'flex' as const,
         flexDirection: 'column' as const,
         gap: 4,
@@ -49,70 +55,103 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 marginHorizontal: theme.sizes.$view.padding,
             },
         },
-    }),
+    },
 
-    label: ({ disabled = false }: TextAreaDynamicProps) => ({
+    label: {
         fontSize: 14,
         fontWeight: '500' as const,
         color: theme.colors.text.primary,
-    }),
+        variants: {
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+    },
 
-    textareaContainer: (_props: TextAreaDynamicProps) => ({
+    textareaContainer: {
         position: 'relative' as const,
         variants: {
+            disabled: {
+                true: { opacity: 0.8 },
+                false: { opacity: 1 },
+            },
+        },
+    },
+
+    textarea: {
+        width: '100%',
+        color: theme.colors.text.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$textarea.fontSize,
+                padding: theme.sizes.$textarea.padding,
+                lineHeight: theme.sizes.$textarea.lineHeight,
+                minHeight: theme.sizes.$textarea.minHeight,
+            },
             disabled: {
                 true: {
-                    opacity: 1,
+                    opacity: 0.5,
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
                 },
                 false: {
-                    opacity: 0.8,
-                },
-            },
-        }
-    }),
-
-    textarea: ({ disabled = false, resize = 'none' }: TextAreaDynamicProps) => ({
-            width: '100%',
-            color: theme.colors.text.primary,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                size: {
-                    fontSize: theme.sizes.$textarea.fontSize,
-                    padding: theme.sizes.$textarea.padding,
-                    lineHeight: theme.sizes.$textarea.lineHeight,
-                    minHeight: theme.sizes.$textarea.minHeight,
+                    opacity: 1,
+                    _web: {
+                        cursor: 'text',
+                    },
                 },
             },
-            _web: {
-                fontFamily: 'inherit',
-                outline: 'none',
-                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-                boxSizing: 'border-box',
-                overflowY: 'hidden',
-                cursor: disabled ? 'not-allowed' : 'text',
-                resize: resize,
-            },
-    }),
+        },
+        _web: {
+            fontFamily: 'inherit',
+            outline: 'none',
+            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+            boxSizing: 'border-box',
+            overflowY: 'hidden',
+        },
+    },
 
-    helperText: ({ hasError = false }: TextAreaDynamicProps) => ({
+    helperText: {
         fontSize: 12,
-        color: hasError ? theme.intents.error.primary : theme.colors.text.secondary,
-    }),
+        variants: {
+            hasError: {
+                true: { color: theme.intents.error.primary },
+                false: { color: theme.colors.text.secondary },
+            },
+        },
+    },
 
-    footer: (_props: TextAreaDynamicProps) => ({
+    footer: {
         display: 'flex' as const,
         flexDirection: 'row' as const,
         justifyContent: 'space-between' as const,
         alignItems: 'center' as const,
         gap: 4,
-    }),
+    },
 
-    characterCount: ({ isNearLimit = false, isAtLimit = false }: TextAreaDynamicProps) => ({
+    characterCount: {
         fontSize: 12,
-        color: isAtLimit
-            ? theme.intents.error.primary
-            : isNearLimit
-                ? theme.intents.warning.primary
-                : theme.colors.text.secondary,
-    }),
+        color: theme.colors.text.secondary,
+        variants: {
+            isAtLimit: {
+                true: { color: theme.intents.error.primary },
+                false: {},
+            },
+            isNearLimit: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                isNearLimit: true,
+                isAtLimit: false,
+                styles: {
+                    color: theme.intents.warning.primary,
+                },
+            },
+        ] as CompoundVariants<keyof TextAreaVariants>,
+    },
 }));

package/src/TextArea/TextArea.web.tsx

@@ -117,37 +117,29 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
     accessibilityAutoComplete,
   ]);
 
+  const isNearLimit = maxLength ? value.length >= maxLength * 0.9 : false;
+  const isAtLimit = maxLength ? value.length >= maxLength : false;
+
   // Apply variants
   textAreaStyles.useVariants({
     size,
     intent,
     disabled,
     hasError,
-    resize,
-    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
-    isAtLimit: maxLength ? value.length >= maxLength : false,
+    isNearLimit,
+    isAtLimit,
     margin,
     marginVertical,
     marginHorizontal,
   });
 
-  // 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]);
+  // Get static styles (cast to any for Unistyles variant compatibility)
+  const containerProps = getWebProps([textAreaStyles.container as any, style as any]);
+  const labelProps = getWebProps([textAreaStyles.label as any]);
+  const textareaContainerProps = getWebProps([textAreaStyles.textareaContainer as any]);
+  const footerProps = getWebProps([textAreaStyles.footer as any]);
+  const helperTextProps = getWebProps([textAreaStyles.helperText as any]);
+  const characterCountProps = getWebProps([textAreaStyles.characterCount as any]);
 
   const adjustHeight = () => {
     if (!autoGrow || !textareaRef.current) return;
@@ -189,16 +181,15 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   };
 
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
-  const isNearLimit = maxLength ? value.length >= maxLength * 0.9 : false;
-  const isAtLimit = maxLength ? value.length >= maxLength : false;
 
   const computedTextareaProps = getWebProps([
-    textAreaStyles.textarea({ intent, disabled, hasError }),
-    textareaStyle,
-    minHeight && { minHeight: `${minHeight}px` },
-    maxHeight && { maxHeight: `${maxHeight}px` },
-    autoGrow && maxHeight && textareaRef.current && textareaRef.current.scrollHeight > maxHeight && { overflowY: 'auto' as const },
-  ]);
+    textAreaStyles.textarea as any,
+    textareaStyle as any,
+    { resize } as any, // Apply resize as inline style since it's CSS-only
+    minHeight ? { minHeight: `${minHeight}px` } : null,
+    maxHeight ? { maxHeight: `${maxHeight}px` } : null,
+    autoGrow && maxHeight && textareaRef.current && textareaRef.current.scrollHeight > maxHeight ? { overflowY: 'auto' as const } : null,
+  ].filter(Boolean));
 
   const mergedRef = useMergeRefs(ref, containerProps.ref);
   const mergedTextareaRef = useMergeRefs(textareaRef, computedTextareaProps.ref);

package/src/Tooltip/Tooltip.web.tsx

@@ -27,7 +27,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   accessibilityRole,
 }) => {
   const [visible, setVisible] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const anchorRef = useRef<HTMLDivElement>(null);
 
   // Generate unique ID for tooltip
@@ -105,9 +105,9 @@ const Tooltip: React.FC<TooltipProps> = ({
   return (
     <>
       <div
-        ref={anchorRef}
         {...containerProps}
         {...ariaProps}
+        ref={anchorRef}
         id={triggerId}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -123,7 +123,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 
       <PositionedPortal
         open={visible}
-        anchor={anchorRef}
+        anchor={anchorRef as React.RefObject<HTMLElement>}
         placement={placement}
         offset={8}
         zIndex={1000}

package/src/Video/Video.styles.tsx

@@ -20,7 +20,7 @@ export const videoStyles = defineStyle('Video', (theme: Theme) => ({
     container: (_props: VideoDynamicProps) => ({
         position: 'relative' as const,
         overflow: 'hidden' as const,
-        backgroundColor: theme.colors['black'],
+        backgroundColor: theme.colors.pallet.gray[900],
     }),
 
     video: (_props: VideoDynamicProps) => ({
@@ -37,7 +37,7 @@ export const videoStyles = defineStyle('Video', (theme: Theme) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        backgroundColor: theme.colors['gray.300'],
-        color: theme.colors['gray.600'],
+        backgroundColor: theme.colors.pallet.gray[300],
+        color: theme.colors.pallet.gray[600],
     }),
 }));

package/src/Video/Video.web.tsx

@@ -45,7 +45,7 @@ const Video: React.FC<VideoProps> = ({
   const videoRef = useRef<HTMLVideoElement>(null);
 
   const containerProps = getWebProps([videoStyles.container, style as any]);
-  const videoProps = getWebProps([videoStyles.video]);
+  const videoProps = getWebProps([videoStyles.video as any]);
 
   const videoSource = typeof source === 'string'
     ? source

package/src/View/View.styles.tsx

@@ -60,8 +60,8 @@ export const viewStyles = defineStyle('View', (theme: Theme) => ({
             },
             border: {
                 none: { borderWidth: 0 },
-                thin: { borderWidth: 1, borderStyle: 'solid' as const, borderColor: theme.colors['gray.300'] },
-                thick: { borderWidth: 2, borderStyle: 'solid' as const, borderColor: theme.colors['gray.300'] },
+                thin: { borderWidth: 1, borderStyle: 'solid' as const, borderColor: theme.colors.pallet.gray[300] },
+                thick: { borderWidth: 2, borderStyle: 'solid' as const, borderColor: theme.colors.pallet.gray[300] },
             },
             // $iterator expands for each view size
             gap: {

package/src/View/View.web.tsx

@@ -1,6 +1,5 @@
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef } from 'react';
 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';
@@ -22,12 +21,12 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
   margin,
   marginVertical,
   marginHorizontal,
-  // Override props
-  backgroundColor,
-  borderRadius,
-  borderWidth,
-  borderColor,
-  scrollable, // accepted but no-op on web - layout handles scrolling
+  // Override props (accepted but handled via style prop on web)
+  backgroundColor: _backgroundColor,
+  borderRadius: _borderRadius,
+  borderWidth: _borderWidth,
+  borderColor: _borderColor,
+  scrollable,
   style,
   testID,
   id,
@@ -48,9 +47,96 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
   // Call style as function to get theme-reactive styles
   /** @ts-ignore */
   const webProps = getWebProps((viewStyles.view as any)({}));
-  
+
   const mergedRef = useMergeRefs(ref, webProps.ref);
 
+  // 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) {
+    // Extract layout/sizing styles for the wrapper, visual styles go to content
+    const styleObj = (style as React.CSSProperties) || {};
+    const {
+      // Sizing - goes to wrapper
+      width,
+      height,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      // Flex properties - goes to wrapper
+      flex,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      alignSelf,
+      // Margin - goes to wrapper (positioning in parent)
+      margin,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      marginBlock,
+      marginInline,
+      // Everything else (padding, background, border, etc.) - goes to content
+      ...contentStyles
+    } = styleObj;
+
+    const wrapperStyles: React.CSSProperties = {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      boxSizing: 'border-box',
+      // If no explicit sizing, flex-grow to fill remaining space
+      ...(width === undefined && height === undefined && flex === undefined && { flex: 1 }),
+      // Apply sizing
+      width,
+      height,
+      minWidth,
+      minHeight: minHeight ?? 0, // Important for flex children to allow shrinking
+      maxWidth,
+      maxHeight,
+      // Apply flex properties
+      flex,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      alignSelf,
+      // Apply margin
+      margin,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      marginBlock,
+      marginInline,
+    };
+
+    return (
+      <div style={wrapperStyles}>
+        <div
+          {...webProps}
+          style={{
+            // Content is block (not flex) for natural scrolling behavior
+            display: 'block',
+            // Absolutely positioned to fill wrapper
+            position: 'absolute',
+            inset: 0,
+            overflow: 'auto',
+            boxSizing: 'border-box',
+            // Apply visual styles (padding, background, border, etc.)
+            ...contentStyles,
+          }}
+          ref={mergedRef}
+          id={id}
+          data-testid={testID}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       style={style as any}

package/src/View/types.ts

@@ -87,7 +87,11 @@ export interface ViewProps extends ContainerStyleProps {
   style?: ViewStyleProp;
 
   /**
-   * Enable scrollable content (uses ScrollView on native, overflow:auto on web)
+   * Enable scrollable content.
+   * - Native: Wraps children in a ScrollView
+   * - Web: Renders a wrapper + content structure where the wrapper fills available
+   *   space (or uses explicit dimensions) and content is absolutely positioned with
+   *   overflow:auto. Sizing/margin styles go to wrapper, visual styles to content.
    */
   scrollable?: boolean;
 

package/src/examples/ViewExamples.tsx

@@ -131,6 +131,40 @@ export const ViewExamples = () => {
           </View>
         </View>
       </View>
+
+      {/* Scrollable Example */}
+      <View gap="md">
+        <Text typography="subtitle1">Scrollable View</Text>
+        <Text typography="body2" color="secondary">
+          Fixed 200x200px container with scrollable content
+        </Text>
+        <View
+          scrollable
+          background="secondary"
+          padding="md"
+          radius="md"
+          border="thin"
+          style={{ width: 200, height: 200 }}
+        >
+          <View>
+            <Text typography="body2">Line 1: Scroll down to see more content</Text>
+            <Text typography="body2">Line 2</Text>
+            <Text typography="body2">Line 3</Text>
+            <Text typography="body2">Line 4</Text>
+            <Text typography="body2">Line 5</Text>
+            <Text typography="body2">Line 6</Text>
+            <Text typography="body2">Line 7</Text>
+            <Text typography="body2">Line 8</Text>
+            <Text typography="body2">Line 9</Text>
+            <Text typography="body2">Line 10</Text>
+            <Text typography="body2">Line 11</Text>
+            <Text typography="body2">Line 12</Text>
+            <Text typography="body2">Line 13</Text>
+            <Text typography="body2">Line 14</Text>
+            <Text typography="body2">Line 15: End of scrollable content</Text>
+          </View>
+        </View>
+      </View>
     </View>
     </Screen>
   );

package/src/extensions/index.ts

@@ -49,13 +49,6 @@ export {
 
 // Internal API (for component stylesheets)
 export { getExtension, getReplacement } from './extendComponent';
-export {
-    withExtension,
-    withSimpleExtension,
-    normalizeStyleFn,
-    normalizeSimpleStyleFn,
-    applyExtensions,
-} from './applyExtension';
 
 // Types
 export type {

package/src/hooks/useMergeRefs.ts

@@ -1,14 +1,20 @@
 /**
- * Userful when workign with getWebProps and forwarding refs
- * @param refs 
- * @returns 
+ * Useful when working with getWebProps and forwarding refs.
+ * Accepts various ref types including callback refs and ref objects.
+ * Uses a permissive type to handle refs from different React type versions in monorepos.
+ * @param refs - Array of refs to merge (can include undefined values)
+ * @returns A ref callback that updates all provided refs
  */
-export default function useMergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
-  return (value: T) => {
+export default function useMergeRefs<T>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ...refs: any[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): any {
+  return (value: T | null) => {
     refs.forEach((ref) => {
       if (typeof ref === 'function') {
         ref(value);
-      } else if (ref && 'current' in ref) {
+      } else if (ref && typeof ref === 'object' && 'current' in ref) {
         ref.current = value;
       }
     });

package/src/utils/accessibility/keyboardPatterns.ts

@@ -35,6 +35,10 @@ export const MENU_KEYS = {
   navigateVertical: ['ArrowUp', 'ArrowDown'] as const,
   /** Keys for navigating horizontal menus/menubars */
   navigateHorizontal: ['ArrowLeft', 'ArrowRight'] as const,
+  /** Keys for moving to next item (down or right) */
+  next: ['ArrowDown', 'ArrowRight'] as const,
+  /** Keys for moving to previous item (up or left) */
+  prev: ['ArrowUp', 'ArrowLeft'] as const,
   /** Keys for selecting an item */
   select: ['Enter', ' '] as const,
   /** Keys for jumping to first item */

package/src/utils/accessibility/types.ts

@@ -66,7 +66,11 @@ export type AriaRole =
   | 'none'
   | 'presentation'
   | 'heading'
-  | 'group';
+  | 'group'
+  // Additional composite/group roles
+  | 'radiogroup'
+  // React Native specific roles
+  | 'adjustable';
 
 /**
  * Base accessibility props shared across all components.

package/src/utils/accessibility/useAnnounce.ts

@@ -77,7 +77,7 @@ export function useAnnounce(options: UseAnnounceOptions = {}): UseAnnounceReturn
 
   const politeRegionRef = useRef<HTMLDivElement | null>(null);
   const assertiveRegionRef = useRef<HTMLDivElement | null>(null);
-  const clearTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const clearTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   /**
    * Create a live region element.

package/src/utils/accessibility/useKeyboardNavigation.ts

@@ -103,7 +103,7 @@ export function useKeyboardNavigation({
 }: UseKeyboardNavigationOptions): UseKeyboardNavigationReturn {
   // Buffer for type-ahead search
   const searchBuffer = useRef('');
-  const searchTimeout = useRef<ReturnType<typeof setTimeout>>();
+  const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   /**
    * Focus a specific item by index.

package/src/utils/index.ts

@@ -1,6 +1,3 @@
-// Size variant builder
-export { buildSizeVariants } from './buildSizeVariants';
-
 // View/container style variant builders
 export {
   buildGapVariants,

package/src/utils/viewStyleProps.ts

@@ -20,6 +20,8 @@ export interface BaseProps {
 export interface GapStyleProps {
   /** Gap between children (uses theme.sizes.view[size].spacing) */
   gap?: ViewStyleSize;
+  /** Alias for gap - spacing between children */
+  spacing?: ViewStyleSize;
 }
 
 /**