@idealyst/components 1.2.130 → 1.2.132

package/package.json

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

package/src/Menu/Menu.native.tsx

@@ -17,6 +17,7 @@ import type { IdealystElement } from '../utils/refTypes';
 
 const Menu = forwardRef<IdealystElement, MenuProps>(({
   children,
+  anchor,
   items,
   open,
   onOpenChange,
@@ -33,6 +34,8 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
   accessibilityRole,
   accessibilityExpanded,
 }, ref) => {
+  const isAnchorMode = anchor != null && typeof anchor === 'object' && 'current' in anchor;
+
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeInteractiveAccessibilityProps({
@@ -48,7 +51,7 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
     position: menuPosition,
     size: menuSize,
     isPositioned,
-    anchorRef: triggerRef,
+    anchorRef: hookAnchorRef,
     measureAndPosition,
     handleLayout: handleMenuLayout,
     reset: resetPosition,
@@ -59,7 +62,16 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
     matchWidth: false,
   });
 
-  const mergedTriggerRef = useMergeRefs(ref, triggerRef);
+  // In anchor mode, sync external anchor ref into the hook's ref and
+  // trigger measurement when open changes
+  useEffect(() => {
+    if (isAnchorMode && open && anchor?.current) {
+      hookAnchorRef.current = anchor.current;
+      measureAndPosition();
+    }
+  }, [isAnchorMode, open]);
+
+  const mergedTriggerRef = useMergeRefs(ref, hookAnchorRef);
 
   // Animation shared values
   const menuOpacity = useSharedValue(0);
@@ -162,24 +174,28 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
     );
   };
 
-  // Clone the child element and merge onPress handler
-  const trigger = isValidElement(children)
-    ? cloneElement(children as React.ReactElement<any>, {
-        onPress: () => {
-          // Call original onPress if it exists
-          const originalOnPress = (children as any).props?.onPress;
-          originalOnPress?.();
-          // Then handle menu toggle
-          handleTriggerPress();
-        },
-      })
-    : children;
+  // Clone the child element and merge onPress handler (children mode only)
+  const trigger = !isAnchorMode && children
+    ? (isValidElement(children)
+        ? cloneElement(children as React.ReactElement<any>, {
+            onPress: () => {
+              // Call original onPress if it exists
+              const originalOnPress = (children as any).props?.onPress;
+              originalOnPress?.();
+              // Then handle menu toggle
+              handleTriggerPress();
+            },
+          })
+        : children)
+    : null;
 
   return (
     <>
-      <View ref={mergedTriggerRef} nativeID={id} collapsable={false} {...nativeA11yProps}>
-        {trigger}
-      </View>
+      {!isAnchorMode && (
+        <View ref={mergedTriggerRef} nativeID={id} collapsable={false} {...nativeA11yProps}>
+          {trigger}
+        </View>
+      )}
 
       {renderMenu()}
     </>

package/src/Menu/Menu.web.tsx

@@ -14,6 +14,7 @@ import type { IdealystElement } from '../utils/refTypes';
  */
 const Menu = forwardRef<IdealystElement, MenuProps>(({
   children,
+  anchor,
   items,
   open = false,
   onOpenChange,
@@ -33,10 +34,14 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
   accessibilityControls,
   accessibilityHasPopup,
 }, ref) => {
+  const isAnchorMode = anchor != null && 'current' in anchor;
   const triggerRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const menuItemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
   const focusedIndex = useRef<number>(-1);
+  const effectiveAnchorRef = isAnchorMode
+    ? (anchor as React.RefObject<HTMLElement>)
+    : (triggerRef as React.RefObject<HTMLElement>);
 
   // Generate unique ID for menu
   const menuId = useMemo(() => id || generateAccessibilityId('menu'), [id]);
@@ -68,8 +73,8 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
     if (matchesKey(e, MENU_KEYS.close)) {
       e.preventDefault();
       onOpenChange?.(false);
-      // Return focus to trigger
-      triggerRef.current?.focus();
+      // Return focus to trigger or anchor
+      effectiveAnchorRef.current?.focus();
       return;
     }
 
@@ -138,29 +143,31 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
 
   return (
     <>
-      <div
-        ref={triggerRef}
-        onClick={handleTriggerClick}
-        style={{ display: 'inline-block' }}
-        aria-haspopup={accessibilityHasPopup ?? 'menu'}
-        aria-expanded={open}
-        aria-controls={menuId}
-        tabIndex={0}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            handleTriggerClick();
-          }
-        }}
-      >
-        {children}
-      </div>
+      {!isAnchorMode && (
+        <div
+          ref={triggerRef}
+          onClick={handleTriggerClick}
+          style={{ display: 'inline-block' }}
+          aria-haspopup={accessibilityHasPopup ?? 'menu'}
+          aria-expanded={open}
+          aria-controls={menuId}
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }}
+        >
+          {children}
+        </div>
+      )}
 
       {open && <div {...overlayProps} />}
 
       <PositionedPortal
         open={open}
-        anchor={triggerRef as React.RefObject<HTMLElement>}
+        anchor={effectiveAnchorRef}
         placement={placement}
         offset={4}
         onClickOutside={() => onOpenChange?.(false)}

package/src/Menu/types.ts

@@ -1,8 +1,10 @@
+import type { RefObject } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
 import { Intent, Size } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 import { InteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 // Component-specific type aliases for future extensibility
 export type MenuIntentVariant = Intent;
@@ -20,7 +22,25 @@ export interface MenuItem {
 }
 
 export interface MenuProps extends BaseProps, InteractiveAccessibilityProps {
-  children: React.ReactNode;
+  /**
+   * Trigger element that opens the menu on press/click.
+   * Either `children` or `anchor` must be provided.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * External anchor ref to position the menu relative to.
+   * When provided, no trigger wrapper is rendered — the consumer controls open/close.
+   *
+   * @example
+   * ```tsx
+   * const ref = useRef<IdealystElement>(null);
+   * <Button ref={ref} onPress={() => setOpen(true)}>Actions</Button>
+   * <Menu anchor={ref} open={open} onOpenChange={setOpen} items={items} />
+   * ```
+   */
+  anchor?: RefObject<IdealystElement>;
+
   items: MenuItem[];
   open?: boolean;
   onOpenChange?: (open: boolean) => void;

package/src/RadioButton/RadioButton.native.tsx

@@ -90,6 +90,7 @@ const RadioButton = forwardRef<IdealystElement, RadioButtonProps>(({
   // Apply variants for radio styles
   radioButtonStyles.useVariants({
     size,
+    intent,
     checked,
     disabled,
     margin,
@@ -102,26 +103,20 @@ const RadioButton = forwardRef<IdealystElement, RadioButtonProps>(({
     outputRange: [0, 1],
   });
 
-  // Get dynamic styles - call as functions for theme reactivity
-  const containerStyle = (radioButtonStyles.container as any)({});
-  const radioStyle = (radioButtonStyles.radio as any)({ intent, checked, disabled });
-  const radioDotStyle = (radioButtonStyles.radioDot as any)({ intent });
-  const labelStyle = (radioButtonStyles.label as any)({ disabled });
-
   return (
     <Pressable
       ref={ref as any}
       nativeID={id}
       onPress={handlePress}
       disabled={disabled}
-      style={[containerStyle, style]}
+      style={[radioButtonStyles.container, style]}
       testID={testID}
       {...nativeA11yProps}
     >
-      <View style={radioStyle}>
+      <View style={radioButtonStyles.radio}>
         <Animated.View
           style={[
-            radioDotStyle,
+            radioButtonStyles.radioDot,
             {
               transform: [{ scale: dotScale }],
             },
@@ -129,7 +124,7 @@ const RadioButton = forwardRef<IdealystElement, RadioButtonProps>(({
         />
       </View>
       {label && (
-        <Text style={labelStyle}>
+        <Text style={radioButtonStyles.label}>
           {label}
         </Text>
       )}

package/src/RadioButton/RadioButton.styles.tsx

@@ -1,5 +1,8 @@
 /**
- * RadioButton styles using defineStyle with dynamic props.
+ * RadioButton styles using defineStyle.
+ *
+ * Static style entries are plain objects; dynamic entries are functions that
+ * receive runtime props.  Variants are resolved via `useVariants()`.
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
@@ -20,6 +23,7 @@ export type RadioButtonDynamicProps = {
     checked?: boolean;
     disabled?: boolean;
     orientation?: RadioGroupOrientation;
+    hasError?: boolean;
     margin?: ViewStyleSize;
     marginVertical?: ViewStyleSize;
     marginHorizontal?: ViewStyleSize;
@@ -29,7 +33,7 @@ export type RadioButtonDynamicProps = {
  * RadioButton styles with intent/checked/disabled handling.
  */
 export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
-    container: (_props: RadioButtonDynamicProps) => ({
+    container: {
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         paddingVertical: 4,
@@ -47,9 +51,9 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
                 marginHorizontal: theme.sizes.$view.padding,
             },
         },
-    }),
+    },
 
-    radio: (_props: RadioButtonDynamicProps) => ({
+    radio: {
         borderRadius: 9999,
         borderWidth: 1.5,
         borderStyle: 'solid' as const,
@@ -82,9 +86,9 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
         _web: {
             transition: 'all 0.2s ease',
         },
-    }),
+    },
 
-    radioDot: (_props: RadioButtonDynamicProps) => ({
+    radioDot: {
         borderRadius: 9999,
         variants: {
             size: {
@@ -95,9 +99,9 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
                 backgroundColor: theme.$intents.primary,
             },
         },
-    }),
+    },
 
-    label: (_props: RadioButtonDynamicProps) => ({
+    label: {
         color: theme.colors.text.primary,
         variants: {
             size: {
@@ -108,9 +112,9 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
                 false: { opacity: 1 },
             },
         },
-    }),
+    },
 
-    groupContainer: (_props: RadioButtonDynamicProps) => ({
+    groupContainer: {
         gap: 4,
         variants: {
             orientation: {
@@ -124,15 +128,15 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
                 },
             },
         },
-    }),
+    },
 
-    groupWrapper: (_props: RadioButtonDynamicProps) => ({
+    groupWrapper: {
         display: 'flex' as const,
         flexDirection: 'column' as const,
         gap: 4,
-    }),
+    },
 
-    groupLabel: (_props: RadioButtonDynamicProps) => ({
+    groupLabel: {
         fontSize: 14,
         fontWeight: '500' as const,
         color: theme.colors.text.primary,
@@ -142,9 +146,9 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
                 false: { opacity: 1 },
             },
         },
-    }),
+    },
 
-    groupHelperText: (_props: RadioButtonDynamicProps) => ({
+    groupHelperText: {
         fontSize: 12,
         variants: {
             hasError: {
@@ -152,5 +156,5 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
                 false: { color: theme.colors.text.secondary },
             },
         },
-    }),
+    },
 }));

package/src/RadioButton/RadioButton.web.tsx

@@ -86,6 +86,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   // Apply variants using the correct Unistyles v3 pattern
   radioButtonStyles.useVariants({
     size,
+    intent,
     checked,
     disabled,
     margin,
@@ -93,10 +94,10 @@ const RadioButton: React.FC<RadioButtonProps> = ({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([(radioButtonStyles.container as any)({}), style]);
-  const radioProps = getWebProps([(radioButtonStyles.radio as any)({ intent, checked, disabled })]);
-  const dotProps = getWebProps([(radioButtonStyles.radioDot as any)({ intent })]);
-  const labelProps = getWebProps([(radioButtonStyles.label as any)({ disabled })]);
+  const containerProps = getWebProps([radioButtonStyles.container, style]);
+  const radioProps = getWebProps([radioButtonStyles.radio]);
+  const dotProps = getWebProps([radioButtonStyles.radioDot]);
+  const labelProps = getWebProps([radioButtonStyles.label]);
 
   return (
     <button

package/src/RadioButton/RadioGroup.native.tsx

@@ -17,7 +17,7 @@ const RadioGroup = forwardRef<IdealystElement, RadioGroupProps>(({
   value,
   onValueChange,
   disabled = false,
-  orientation: _orientation = 'vertical',
+  orientation = 'vertical',
   children,
   error,
   helperText,
@@ -46,9 +46,12 @@ const RadioGroup = forwardRef<IdealystElement, RadioGroupProps>(({
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole]);
 
-  const wrapperStyle = (radioButtonStyles.groupWrapper as any)({});
-  const labelStyle = (radioButtonStyles.groupLabel as any)({ disabled });
-  const helperTextStyle = (radioButtonStyles.groupHelperText as any)({ hasError });
+  // Apply variants for group styles
+  radioButtonStyles.useVariants({
+    orientation,
+    disabled,
+    hasError,
+  });
 
   const content = (
     <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
@@ -71,13 +74,13 @@ const RadioGroup = forwardRef<IdealystElement, RadioGroupProps>(({
   }
 
   return (
-    <View ref={ref as any} style={wrapperStyle}>
-      {label && <Text style={labelStyle}>{label}</Text>}
+    <View ref={ref as any} style={radioButtonStyles.groupWrapper}>
+      {label && <Text style={radioButtonStyles.groupLabel}>{label}</Text>}
       {content}
       {showFooter && (
         <View style={{ flex: 1 }}>
-          {error && <Text style={helperTextStyle}>{error}</Text>}
-          {!error && helperText && <Text style={helperTextStyle}>{helperText}</Text>}
+          {error && <Text style={radioButtonStyles.groupHelperText}>{error}</Text>}
+          {!error && helperText && <Text style={radioButtonStyles.groupHelperText}>{helperText}</Text>}
         </View>
       )}
     </View>

package/src/RadioButton/RadioGroup.web.tsx

@@ -59,9 +59,9 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
     style as any,
   ]);
 
-  const wrapperProps = getWebProps([(radioButtonStyles.groupWrapper as any)({})]);
-  const labelProps = getWebProps([(radioButtonStyles.groupLabel as any)({ disabled })]);
-  const helperTextProps = getWebProps([(radioButtonStyles.groupHelperText as any)({ hasError })]);
+  const wrapperProps = getWebProps([radioButtonStyles.groupWrapper]);
+  const labelProps = getWebProps([radioButtonStyles.groupLabel]);
+  const helperTextProps = getWebProps([radioButtonStyles.groupHelperText]);
 
   const content = (
     <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>

package/src/Table/Table.styles.tsx

@@ -137,12 +137,14 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         return {
             ...typeStyles,
             _web: {
-                transition: 'background-color 0.2s ease',
+                transition: 'background-color 0.15s ease',
                 borderBottom: (type === 'bordered' || type === 'striped')
                     ? `1px solid ${theme.colors.border.primary}`
                     : undefined,
                 cursor: clickable ? 'pointer' : undefined,
-                _hover: clickable ? { backgroundColor: theme.colors.surface.secondary } : {},
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
                 // Striped rows handled via CSS pseudo-selector
                 ...(type === 'striped' ? {
                     ':nth-child(even)': {
@@ -158,7 +160,7 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         alignItems: 'center' as const,
         fontWeight: '600' as const,
         color: theme.colors.text.primary,
-        borderBottomWidth: 2,
+        borderBottomWidth: 1,
         borderBottomColor: theme.colors.border.primary,
         variants: {
             type: {