@idealyst/components 1.0.83 → 1.0.84

package/src/RadioButton/RadioButton.styles.tsx

@@ -0,0 +1,163 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+
+type RadioButtonSize = Size;
+type RadioButtonIntent = Intent;
+type RadioGroupOrientation = 'horizontal' | 'vertical';
+
+type RadioButtonVariants = {
+    size: RadioButtonSize;
+    intent: RadioButtonIntent;
+    checked: boolean;
+    disabled: boolean;
+}
+
+type RadioGroupVariants = {
+    orientation: RadioGroupOrientation;
+}
+
+export type ExpandedRadioButtonStyles = StylesheetStyles<keyof RadioButtonVariants>;
+export type ExpandedRadioGroupStyles = StylesheetStyles<keyof RadioGroupVariants>;
+
+export type RadioButtonStylesheet = {
+    container: ExpandedRadioButtonStyles;
+    radio: ExpandedRadioButtonStyles;
+    radioDot: ExpandedRadioButtonStyles;
+    label: ExpandedRadioButtonStyles;
+    groupContainer: ExpandedRadioGroupStyles;
+}
+
+function createRadioSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'radioButton', (size) => ({
+        width: size.radioSize,
+        height: size.radioSize,
+    }));
+}
+
+function createCheckedVariants(theme: Theme, intent: RadioButtonIntent) {
+    const intentValue = theme.intents[intent];
+    return {
+        true: {
+            borderColor: intentValue.primary,
+        },
+        false: {
+            borderColor: theme.colors.border.primary,
+        },
+    } as const;
+}
+
+function createRadioDotSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'radioButton', (size) => ({
+        width: size.radioDotSize,
+        height: size.radioDotSize,
+    }));
+}
+
+function createRadioDotIntentColor(theme: Theme, intent: RadioButtonIntent) {
+    return theme.intents[intent].primary;
+}
+
+function createRadioStyles(theme: Theme) {
+    return ({ intent }: Partial<RadioButtonVariants>) => {
+        return {
+            borderRadius: 9999,
+            borderWidth: 1.5,
+            borderStyle: 'solid',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors.surface.primary,
+            variants: {
+                size: createRadioSizeVariants(theme),
+                checked: createCheckedVariants(theme, intent),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        backgroundColor: theme.colors.surface.tertiary,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        backgroundColor: theme.colors.surface.primary,
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: {
+                                opacity: 0.8,
+                            },
+                            _active: {
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                },
+            },
+            _web: {
+                transition: 'all 0.2s ease',
+            },
+        } as const;
+    }
+}
+
+function createRadioDotStyles(theme: Theme) {
+    return ({ intent }: Partial<RadioButtonVariants>) => {
+        return {
+            borderRadius: 9999,
+            backgroundColor: createRadioDotIntentColor(theme, intent),
+            variants: {
+                size: createRadioDotSizeVariants(theme),
+            },
+        } as const;
+    }
+}
+
+// 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 radioButtonStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 4,
+        variants: {
+            size: buildSizeVariants(theme, 'radioButton', (size) => ({
+                gap: size.gap,
+            })),
+        } as const,
+    },
+    radio: createRadioStyles(theme),
+    radioDot: createRadioDotStyles(theme),
+    label: {
+        color: theme.colors.text.primary,
+        variants: {
+            size: buildSizeVariants(theme, 'radioButton', (size) => ({
+                fontSize: size.fontSize,
+            })),
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                },
+                false: {
+                    opacity: 1,
+                },
+            },
+        },
+    },
+    groupContainer: {
+        gap: 4,
+        variants: {
+            orientation: {
+                horizontal: {
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    gap: 16,
+                },
+                vertical: {
+                    flexDirection: 'column',
+                },
+            },
+        },
+    },
+  };
+});

package/src/RadioButton/RadioButton.web.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { radioButtonStyles } from './RadioButton.styles';
+import type { RadioButtonProps } from './types';
+import { useRadioGroup } from './RadioGroup.web';
+
+const RadioButton: React.FC<RadioButtonProps> = ({
+  value,
+  checked: checkedProp,
+  onPress,
+  disabled: disabledProp = false,
+  label,
+  size = 'md',
+  intent = 'primary',
+  style,
+  testID,
+}) => {
+  const group = useRadioGroup();
+
+  const checked = group.value !== undefined ? group.value === value : checkedProp;
+  const disabled = group.disabled || disabledProp;
+
+  const handleClick = () => {
+    if (!disabled) {
+      if (group.onValueChange) {
+        group.onValueChange(value);
+      } else if (onPress) {
+        onPress();
+      }
+    }
+  };
+
+  // Apply variants using the correct Unistyles v3 pattern
+  radioButtonStyles.useVariants({
+    size,
+    checked,
+    disabled,
+  });
+
+  const containerProps = getWebProps([radioButtonStyles.container, style]);
+  const radioProps = getWebProps([radioButtonStyles.radio({ intent })]);
+  const dotProps = getWebProps([radioButtonStyles.radioDot({ intent })]);
+  const labelProps = getWebProps([radioButtonStyles.label]);
+
+  return (
+    <button
+      {...containerProps}
+      onClick={handleClick}
+      disabled={disabled}
+      data-testid={testID}
+      role="radio"
+      aria-checked={checked}
+      aria-disabled={disabled}
+      style={{
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        display: 'inline-flex',
+        alignItems: 'center',
+      }}
+      {...containerProps}
+    >
+      <div {...radioProps} style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+        backfaceVisibility: 'hidden',
+      }}>
+        {checked && <div {...dotProps} style={{
+          WebkitFontSmoothing: 'antialiased',
+          MozOsxFontSmoothing: 'grayscale',
+          backfaceVisibility: 'hidden',
+        }} />}
+      </div>
+      {label && (
+        <span {...labelProps}>{label}</span>
+      )}
+    </button>
+  );
+};
+
+export default RadioButton;

package/src/RadioButton/RadioGroup.native.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { radioButtonStyles } from './RadioButton.styles';
+import type { RadioGroupProps } from './types';
+
+const RadioGroupContext = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+}>({});
+
+export const useRadioGroup = () => React.useContext(RadioGroupContext);
+
+const RadioGroup = forwardRef<View, RadioGroupProps>(({
+  value,
+  onValueChange,
+  disabled = false,
+  orientation = 'vertical',
+  children,
+  style,
+  testID,
+}, ref) => {
+
+  return (
+    <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
+      <View
+        ref={ref}
+        style={[
+          radioButtonStyles.groupContainer,
+          style as any,
+        ]}
+        accessibilityRole="radiogroup"
+        testID={testID}
+      >
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+});
+
+RadioGroup.displayName = 'RadioGroup';
+
+export default RadioGroup;

package/src/RadioButton/RadioGroup.web.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { radioButtonStyles } from './RadioButton.styles';
+import type { RadioGroupProps } from './types';
+
+const RadioGroupContext = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+}>({});
+
+export const useRadioGroup = () => React.useContext(RadioGroupContext);
+
+const RadioGroup: React.FC<RadioGroupProps> = ({
+  value,
+  onValueChange,
+  disabled = false,
+  orientation = 'vertical',
+  children,
+  style,
+  testID,
+}) => {
+  // Apply variants
+  radioButtonStyles.useVariants({
+    orientation,
+  });
+
+  const groupProps = getWebProps([
+    radioButtonStyles.groupContainer,
+    style as any,
+  ]);
+
+  return (
+    <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
+      <div
+        {...groupProps}
+        role="radiogroup"
+        data-testid={testID}
+        style={{
+          display: 'flex',
+        }}
+      >
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+};
+
+export default RadioGroup;

package/src/RadioButton/index.native.ts

@@ -0,0 +1,2 @@
+export { default as RadioButton } from './RadioButton.native';
+export { default as RadioGroup } from './RadioGroup.native';

package/src/RadioButton/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioButton } from './RadioButton.web';
+export { default as RadioGroup } from './RadioGroup.web';

package/src/RadioButton/index.web.ts

@@ -0,0 +1,2 @@
+export { default as RadioButton } from './RadioButton.web';
+export { default as RadioGroup } from './RadioGroup.web';

package/src/RadioButton/types.ts

@@ -0,0 +1,29 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
+import { Intent, Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type RadioButtonIntentVariant = Intent;
+export type RadioButtonSizeVariant = Size;
+
+export interface RadioButtonProps {
+  value: string;
+  checked?: boolean;
+  onPress?: () => void;
+  disabled?: boolean;
+  label?: string;
+  size?: RadioButtonSizeVariant;
+  intent?: RadioButtonIntentVariant;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface RadioGroupProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/SVGImage/SVGImage.native.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 import { SVGImageProps } from './types';
 import { svgImageStyles } from './SVGImage.styles';
 
-const SVGImage: React.FC<SVGImageProps> = ({
+const SVGImage = forwardRef<View, SVGImageProps>(({
   source,
   width,
   height,
@@ -14,7 +14,7 @@ const SVGImage: React.FC<SVGImageProps> = ({
   style,
   testID,
   ...props
-}) => {
+}, ref) => {
   // Apply variants using Unistyles 3.0 pattern
   if (intent) {
     svgImageStyles.useVariants({
@@ -30,7 +30,7 @@ const SVGImage: React.FC<SVGImageProps> = ({
   if (typeof source === 'function') {
     const SvgComponent = source;
     return (
-      <View style={[svgImageStyles.container, style]} testID={testID} {...props}>
+      <View ref={ref} style={[svgImageStyles.container, style]} testID={testID} {...props}>
         <SvgComponent
           width={finalWidth}
           height={finalHeight}
@@ -43,9 +43,9 @@ const SVGImage: React.FC<SVGImageProps> = ({
 
   // Mode 2: Handle URI-based SVG loading
   const sourceUri = typeof source === 'string' ? source : source.uri;
-  
+
   return (
-    <View style={[svgImageStyles.container, style]} testID={testID} {...props}>
+    <View ref={ref} style={[svgImageStyles.container, style]} testID={testID} {...props}>
       <SvgUri
         uri={sourceUri}
         width={finalWidth}
@@ -55,6 +55,8 @@ const SVGImage: React.FC<SVGImageProps> = ({
       />
     </View>
   );
-};
+});
+
+SVGImage.displayName = 'SVGImage';
 
 export default SVGImage;

package/src/SVGImage/SVGImage.styles.tsx

@@ -1,70 +1,78 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent} from '@idealyst/theme';
 
-export const svgImageStyles = StyleSheet.create((theme) => ({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    
-    variants: {
-      intent: {
+type SVGImageIntent = Intent;
+
+type SVGImageVariants = {
+    intent: SVGImageIntent;
+}
+
+export type ExpandedSVGImageStyles = StylesheetStyles<keyof SVGImageVariants>;
+
+export type SVGImageStylesheet = {
+    container: ExpandedSVGImageStyles;
+    image: ExpandedSVGImageStyles;
+}
+
+function createContainerIntentVariants(theme: Theme) {
+    return {
         primary: {
-          // Use CSS filter for web, tintColor for React Native
-          filter: `brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)`,
+            filter: `brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)`,
         },
         success: {
-          filter: `brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)`,
+            filter: `brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)`,
         },
         error: {
-          filter: `brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)`,
+            filter: `brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)`,
         },
         warning: {
-          filter: `brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)`,
+            filter: `brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)`,
         },
         neutral: {
-          filter: `brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)`,
+            filter: `brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)`,
         },
-      },
-    },
-    
-    // Web-specific styles
-    _web: {
-      userSelect: 'none',
-    },
-    
-    // Native-specific styles  
-    _native: {
-      variants: {
-        intent: {
-          primary: {
-            tintColor: theme.intents?.primary?.main || '#3b82f6',
-          },
-          success: {
-            tintColor: theme.intents?.success?.main || '#22c55e',
-          },
-          error: {
-            tintColor: theme.intents?.error?.main || '#ef4444',
-          },
-          warning: {
-            tintColor: theme.intents?.warning?.main || '#f59e0b',
-          },
-          neutral: {
-            tintColor: theme.intents?.neutral?.main || '#6b7280',
-          },
+        info: {
+            filter: `brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)`,
+        },
+    };
+}
+
+function createContainerNativeIntentVariants(theme: Theme) {
+    const variants: Record<SVGImageIntent, any> = {} as any;
+    for (const intent in theme.intents) {
+        variants[intent as SVGImageIntent] = {
+            tintColor: theme.intents[intent as SVGImageIntent].primary,
+        };
+    }
+    return variants;
+}
+
+// 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 svgImageStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            intent: createContainerIntentVariants(theme),
+        },
+        _web: {
+            userSelect: 'none',
+        },
+        _native: {
+            variants: {
+                intent: createContainerNativeIntentVariants(theme),
+            },
         },
-      },
-    },
-  },
-  
-  image: {
-    // Base image styles
-    _web: {
-      display: 'block',
-      maxWidth: '100%',
-      height: 'auto',
     },
-    
-    _native: {
-      // Native image styles will be applied via Image component
+    image: {
+        _web: {
+            display: 'block',
+            maxWidth: '100%',
+            height: 'auto',
+        },
     },
-  },
-}));
+  };
+});

package/src/SVGImage/SVGImage.web.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { SVGImageProps } from './types';
 import { svgImageStyles } from './SVGImage.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const SVGImage: React.FC<SVGImageProps> = ({
+const SVGImage = forwardRef<HTMLDivElement, SVGImageProps>(({
   source,
   width,
   height,
@@ -14,11 +15,11 @@ const SVGImage: React.FC<SVGImageProps> = ({
   style,
   testID,
   ...props
-}) => {
+}, ref) => {
   // Apply variants using Unistyles 3.0 pattern
   if (intent) {
     svgImageStyles.useVariants({
-      intent: intent as 'primary' | 'success' | 'error' | 'warning' | 'neutral',
+      intent,
     });
   }
 
@@ -29,8 +30,10 @@ const SVGImage: React.FC<SVGImageProps> = ({
   // Handle React components (imported SVG components)
   if (typeof source === 'function') {
     const SvgComponent = source;
+    const componentContainerProps = getWebProps([svgImageStyles.container, style as any]);
+    const mergedRefForComponent = useMergeRefs(ref, componentContainerProps.ref);
     return (
-      <div {...getWebProps([svgImageStyles.container, style])} {...props} data-testid={testID}>
+      <div {...componentContainerProps} ref={mergedRefForComponent} {...(props as any)} data-testid={testID}>
         <SvgComponent
           width={finalWidth || 24}
           height={finalHeight || 24}
@@ -47,16 +50,12 @@ const SVGImage: React.FC<SVGImageProps> = ({
   // Create the style array
   const containerStyleArray = [
     svgImageStyles.container,
-    style,
-  ];
-
-  const imageStyleArray = [
-    svgImageStyles.image,
+    style as any,
   ];
 
   // Use getWebProps to generate className and ref for web
   const containerWebProps = getWebProps(containerStyleArray);
-  const imageWebProps = getWebProps(imageStyleArray);
+  const imageWebProps = getWebProps(svgImageStyles.image);
 
   // Apply custom color if provided
   // Convert React Native resize modes to CSS object-fit values
@@ -78,8 +77,10 @@ const SVGImage: React.FC<SVGImageProps> = ({
     }),
   };
 
+  const mergedRef = useMergeRefs(ref, containerWebProps.ref);
+
   return (
-    <div {...containerWebProps} {...props} data-testid={testID}>
+    <div {...containerWebProps} ref={mergedRef} {...(props as any)} data-testid={testID}>
       <img
         {...imageWebProps}
         src={sourceUrl}
@@ -88,6 +89,8 @@ const SVGImage: React.FC<SVGImageProps> = ({
       />
     </div>
   );
-};
+});
+
+SVGImage.displayName = 'SVGImage';
 
 export default SVGImage;

package/src/SVGImage/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic SVGImage export
-// Metro will resolve to index.native.ts for React Native
-// This file serves as fallback for web environments
-export { default } from './SVGImage.web';
-export * from './types';
+import SVGImageComponent from './SVGImage.web';
+
+export default SVGImageComponent;
+export { SVGImageComponent as SVGImage };
+export * from './types';

package/src/SVGImage/index.web.ts

@@ -1,2 +1,5 @@
-export { default } from './SVGImage.web';
-export * from './types';
+import SVGImageComponent from './SVGImage.web';
+
+export default SVGImageComponent;
+export { SVGImageComponent as SVGImage };
+export * from './types';