@idealyst/components 1.2.13 → 1.2.15

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,94 @@ 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 = {
+      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/index.native.ts

@@ -145,4 +145,4 @@ export type { PlatformAPI, PlatformSystem, PlatformSelectSpec } from './Platform
 // Event utilities
 export * from './utils/events';
 
-export type { AppTheme } from '@idealyst/theme'; 
+export type { Theme as AppTheme } from '@idealyst/theme'; 

package/src/index.ts

@@ -181,4 +181,4 @@ export type {
     SelectStyleableElements,
 } from './extensions';
 
-export type { AppTheme } from '@idealyst/theme';
+export type { Theme as AppTheme } from '@idealyst/theme';

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;
 }
 
 /**

package/src/Accordion/Accordion.styles.old.tsx

@@ -1,298 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { AccordionType } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type AccordionSize = Size;
-
-type AccordionVariants = {
-    size: AccordionSize;
-    type: AccordionType;
-    expanded: boolean;
-    disabled: boolean;
-    isLast: boolean;
-}
-
-export type ExpandedAccordionStyles = StylesheetStyles<keyof AccordionVariants>;
-
-type ItemDynamicProps = {
-    type?: AccordionType;
-    isLast?: boolean;
-};
-
-/**
- * Create type variants for container
- */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        standard: {
-            gap: 0,
-        },
-        separated: {
-            gap: 8,
-        },
-        bordered: {
-            gap: 0,
-            borderWidth: 1,
-            borderStyle: 'solid' as const,
-            borderColor: theme.colors.border.primary,
-            borderRadius: 8,
-            overflow: 'hidden' as const,
-        },
-    } as const;
-}
-
-/**
- * Get item styles based on type and isLast
- */
-function getItemTypeStyles(theme: Theme, type: AccordionType, isLast: boolean) {
-    switch (type) {
-        case 'standard':
-            return {
-                borderBottomWidth: isLast ? 0 : 1,
-                borderBottomStyle: 'solid' as const,
-                borderBottomColor: theme.colors.border.primary,
-            };
-        case 'separated':
-            return {
-                borderWidth: 1,
-                borderStyle: 'solid' as const,
-                borderColor: theme.colors.border.primary,
-                borderRadius: 8,
-                overflow: 'hidden' as const,
-            };
-        case 'bordered':
-            return {
-                borderBottomWidth: isLast ? 0 : 1,
-                borderBottomStyle: 'solid' as const,
-                borderBottomColor: theme.colors.border.primary,
-            };
-        default:
-            return {};
-    }
-}
-
-/**
- * Create dynamic item styles
- */
-function createItemStyles(theme: Theme) {
-    return ({ type = 'standard', isLast = false }: ItemDynamicProps) => {
-        const typeStyles = getItemTypeStyles(theme, type, isLast);
-        return {
-            display: 'flex' as const,
-            flexDirection: 'column' as const,
-            ...typeStyles,
-            variants: {
-                size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-                expanded: { true: {}, false: {} },
-                disabled: { true: {}, false: {} },
-            },
-        } as const;
-    };
-}
-
-/**
- * Create size variants for header
- */
-function createHeaderSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'accordion', (size) => ({
-        fontSize: size.headerFontSize,
-        padding: size.headerPadding,
-    }));
-}
-
-/**
- * Create size variants for icon
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'accordion', (size) => ({
-        width: size.iconSize,
-        height: size.iconSize,
-    }));
-}
-
-/**
- * Create size variants for content inner
- */
-function createContentInnerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'accordion', (size) => ({
-        fontSize: size.headerFontSize,
-        padding: size.contentPadding,
-        paddingTop: 0,
-    }));
-}
-
-// Helper functions to create static styles wrapped in dynamic functions
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'column' as const,
-        variants: {
-            size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-            type: createContainerTypeVariants(theme),
-            expanded: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-            // Spacing variants from ContainerStyleProps
-            gap: buildGapVariants(theme),
-            padding: buildPaddingVariants(theme),
-            paddingVertical: buildPaddingVerticalVariants(theme),
-            paddingHorizontal: buildPaddingHorizontalVariants(theme),
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-    });
-}
-
-function createHeaderStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'space-between' as const,
-        width: '100%' as const,
-        backgroundColor: 'transparent' as const,
-        color: theme.colors.text.primary,
-        textAlign: 'left' as const,
-        variants: {
-            size: createHeaderSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: {
-                true: {
-                    fontWeight: '600' as const,
-                },
-                false: {
-                    fontWeight: '500' as const,
-                },
-            },
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                    _web: {
-                        cursor: 'not-allowed' as const,
-                    },
-                },
-                false: {
-                    _web: {
-                        cursor: 'pointer' as const,
-                        _hover: {
-                            backgroundColor: theme.colors.surface.secondary,
-                        },
-                    },
-                },
-            },
-            isLast: { true: {}, false: {} },
-        } as const,
-        _web: {
-            border: 'none' as const,
-            outline: 'none' as const,
-            transition: 'background-color 0.2s ease' as const,
-        },
-    });
-}
-
-function createTitleStyles() {
-    return () => ({
-        flex: 1,
-        variants: {
-            size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-    });
-}
-
-function createIconStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        marginLeft: 8,
-        color: theme.intents.primary.primary,
-        variants: {
-            size: createIconSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: {
-                true: {
-                    _web: {
-                        transform: 'rotate(180deg)' as const,
-                    },
-                },
-                false: {
-                    _web: {
-                        transform: 'rotate(0deg)' as const,
-                    },
-                },
-            },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-        _web: {
-            transition: 'transform 0.2s ease' as const,
-        },
-    });
-}
-
-function createContentStyles() {
-    return () => ({
-        overflow: 'hidden' as const,
-        variants: {
-            size: { xs: {}, sm: {}, md: {}, lg: {}, xl: {} },
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: {
-                true: {
-                    maxHeight: 2000,
-                },
-                false: {
-                    maxHeight: 0,
-                },
-            },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-        _web: {
-            transition: 'height 0.15s ease, padding 0.3s ease' as const,
-        },
-    });
-}
-
-function createContentInnerStyles(theme: Theme) {
-    return () => ({
-        color: theme.colors.text.secondary,
-        variants: {
-            size: createContentInnerSizeVariants(theme),
-            type: { standard: {}, separated: {}, bordered: {} },
-            expanded: { true: {}, false: {} },
-            disabled: { true: {}, false: {} },
-            isLast: { true: {}, false: {} },
-        },
-    });
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
-export const accordionStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Accordion', theme, {container: createContainerStyles(theme),
-        item: createItemStyles(theme),
-        header: createHeaderStyles(theme),
-        content: createContentStyles(),
-        icon: createIconStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        title: createTitleStyles()(),
-        contentInner: createContentInnerStyles(theme)()});
-});

package/src/ActivityIndicator/ActivityIndicator.styles.old.tsx

@@ -1,94 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type ActivityIndicatorSize = Size;
-type ActivityIndicatorIntent = Intent;
-
-type ActivityIndicatorVariants = {
-    size: ActivityIndicatorSize;
-    intent: ActivityIndicatorIntent;
-    animating: boolean;
-}
-
-export type ExpandedActivityIndicatorStyles = StylesheetStyles<keyof ActivityIndicatorVariants>;
-
-export type ActivityIndicatorStylesheet = {
-    container: ExpandedActivityIndicatorStyles;
-    spinner: ExpandedActivityIndicatorStyles;
-}
-
-function createContainerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
-        width: size.size,
-        height: size.size,
-    }));
-}
-
-function createSpinnerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
-        width: size.size,
-        height: size.size,
-        borderWidth: size.borderWidth,
-    }));
-}
-
-function getSpinnerColor(theme: Theme, intent: ActivityIndicatorIntent) {
-    return theme.intents[intent].primary;
-}
-
-function createSpinnerStyles(theme: Theme) {
-    return ({ intent }: Partial<ActivityIndicatorVariants>) => {
-        const color = getSpinnerColor(theme, intent);
-        return {
-            borderRadius: 9999,
-            borderStyle: 'solid',
-            color,
-            variants: {
-                size: createSpinnerSizeVariants(theme),
-                animating: {
-                    true: {},
-                    false: {},
-                },
-            },
-            _web: {
-                borderColor: 'transparent',
-                borderTopColor: color,
-                borderRightColor: color,
-                animation: 'spin 1s linear infinite',
-                boxSizing: 'border-box',
-            },
-        } as const;
-    }
-}
-
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        variants: {
-            size: createContainerSizeVariants(theme),
-            animating: {
-                true: {
-                    opacity: 1,
-                },
-                false: {
-                    opacity: 0,
-                },
-            },
-        },
-    });
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const activityIndicatorStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    return applyExtensions('ActivityIndicator', theme, {
-        container: createContainerStyles(theme),
-        spinner: createSpinnerStyles(theme),
-    });
-});