@idealyst/components 1.0.98 → 1.1.0

package/src/Card/Card.web.tsx

@@ -6,13 +6,20 @@ import useMergeRefs from '../hooks/useMergeRefs';
 
 const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   children,
-  type = 'default',
-  padding = 'md',
+  type = 'elevated',
   radius = 'md',
   intent,
   clickable = false,
   onPress,
   disabled = false,
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
   accessibilityLabel,
@@ -28,9 +35,15 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
     clickable,
     radius,
     type,
-    padding,
     intent,
     disabled,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   // Generate web props
@@ -58,4 +71,4 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
 
 Card.displayName = 'Card';
 
-export default Card; 
+export default Card;

package/src/Card/types.ts

@@ -1,14 +1,14 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { ContainerStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type CardIntentVariant = Intent;
 export type CardType = 'default' | 'outlined' | 'elevated' | 'filled';
-export type CardPaddingVariant = 'none' | Size;
 export type CardRadiusVariant = 'none' | Size;
 
-export interface CardProps {
+export interface CardProps extends ContainerStyleProps {
   /**
    * The content to display inside the card
    */
@@ -19,11 +19,6 @@ export interface CardProps {
    */
   type?: CardType;
 
-  /**
-   * The padding size inside the card
-   */
-  padding?: CardPaddingVariant;
-
   /**
    * The border radius of the card
    */
@@ -63,4 +58,4 @@ export interface CardProps {
    * Accessibility label
    */
   accessibilityLabel?: string;
-} 
+}

package/src/Checkbox/Checkbox.native.tsx

@@ -14,6 +14,10 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
   variant = 'default',
   label,
   children,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
   accessibilityLabel,
@@ -43,6 +47,9 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
     disabled,
     visible: internalChecked || indeterminate,
     error: !!error,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const labelContent = children || label;

package/src/Checkbox/Checkbox.styles.tsx

@@ -1,5 +1,10 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import {
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
 
 type CheckboxSize = Size;
 type CheckboxIntent = Intent | 'info';
@@ -187,6 +192,12 @@ export const checkboxStyles = StyleSheet.create((theme: Theme) => {
     wrapper: {
         flexDirection: 'column',
         gap: 4,
+        variants: {
+            // Spacing variants from FormInputStyleProps
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
         _web: {
             display: 'flex',
             flexDirection: 'column',

package/src/Checkbox/Checkbox.web.tsx

@@ -16,6 +16,10 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
   variant = 'default',
   label,
   children,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
   accessibilityLabel,
@@ -45,6 +49,9 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
     disabled,
     visible: internalChecked || indeterminate,
     error: Boolean(error),
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   // Create style arrays

package/src/Checkbox/types.ts

@@ -1,13 +1,14 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { FormInputStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type CheckboxIntentVariant = Intent;
 export type CheckboxSizeVariant = Size;
 export type CheckboxVariant = 'default' | 'outlined';
 
-export interface CheckboxProps {
+export interface CheckboxProps extends FormInputStyleProps {
   /**
    * Whether the checkbox is checked
    */

package/src/Input/Input.native.tsx

@@ -21,6 +21,10 @@ const Input = React.forwardRef<TextInput, InputProps>(({
   size = 'md',
   type = 'outlined',
   hasError = false,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }, ref) => {
@@ -75,6 +79,9 @@ const Input = React.forwardRef<TextInput, InputProps>(({
     focused: isFocused,
     hasError,
     disabled,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   // Helper to render left icon

package/src/Input/Input.styles.tsx

@@ -1,6 +1,11 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, Size, CompoundVariants} from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
 import { InputSize, InputType } from './types';
 
 
@@ -153,6 +158,10 @@ export const inputStyles = StyleSheet.create((theme: Theme) => {
                     },
                 },
             },
+            // Spacing variants from FormInputStyleProps
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
         },
         compoundVariants: createFocusedCompoundVariants(theme),
         _web: {

package/src/Input/Input.web.tsx

@@ -23,6 +23,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   size = 'md',
   type = 'outlined',
   hasError = false,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }, ref) => {
@@ -95,6 +99,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     focused: isFocused,
     hasError,
     disabled,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   // Get web props for all styled elements

package/src/Input/types.ts

@@ -1,6 +1,7 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
 import { Intent, Size } from '@idealyst/theme';
+import { FormInputStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type InputIntent = Intent;
@@ -8,7 +9,7 @@ export type InputSize = Size;
 export type InputType = 'outlined' | 'filled' | 'bare';
 export type InputInputType = 'text' | 'email' | 'password' | 'number';
 
-export interface InputProps {
+export interface InputProps extends FormInputStyleProps {
   /**
    * The current value of the input
    */

package/src/List/List.native.tsx

@@ -8,6 +8,14 @@ const List = forwardRef<View, ListProps>(({
   children,
   type = 'default',
   size = 'md',
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
   scrollable = false,
@@ -17,6 +25,13 @@ const List = forwardRef<View, ListProps>(({
   listStyles.useVariants({
     size,
     scrollable,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const containerStyle = [

package/src/List/List.styles.tsx

@@ -1,6 +1,15 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, CompoundVariants } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
 import { ListSizeVariant, ListType } from './types';
 
 type ListVariants = {
@@ -95,6 +104,14 @@ export const listStyles = StyleSheet.create((theme: Theme) => {
                     },
                     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),
             },
         },
         item: {

package/src/List/List.web.tsx

@@ -8,6 +8,14 @@ const List: React.FC<ListProps> = ({
   children,
   type = 'default',
   size = 'md',
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
   scrollable = false,
@@ -17,6 +25,13 @@ const List: React.FC<ListProps> = ({
   listStyles.useVariants({
     size,
     scrollable,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const containerStyle = [

package/src/List/types.ts

@@ -2,6 +2,7 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import type { IconName } from '../Icon/icon-types';
 import { Size } from '@idealyst/theme';
+import { ContainerStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type ListSizeVariant = Size;
@@ -23,7 +24,7 @@ export interface ListItemProps {
   testID?: string;
 }
 
-export interface ListProps {
+export interface ListProps extends ContainerStyleProps {
   children: ReactNode;
   type?: ListType;
   size?: ListSizeVariant;

package/src/Pressable/Pressable.native.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
 import { PressableProps } from './types';
+import { pressableStyles } from './Pressable.styles';
 
 const Pressable = forwardRef<View, PressableProps>(({
   children,
@@ -8,11 +9,22 @@ const Pressable = forwardRef<View, PressableProps>(({
   onPressIn,
   onPressOut,
   disabled = false,
+  // Spacing variants from PressableSpacingStyleProps
+  padding,
+  paddingVertical,
+  paddingHorizontal,
   style,
   testID,
   accessibilityLabel,
   accessibilityRole,
 }, ref) => {
+  // Apply spacing variants
+  pressableStyles.useVariants({
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+  });
+
   return (
     <TouchableWithoutFeedback
       onPress={disabled ? undefined : onPress}
@@ -22,7 +34,7 @@ const Pressable = forwardRef<View, PressableProps>(({
       testID={testID}
       accessibilityLabel={accessibilityLabel}
     >
-      <View ref={ref} style={style}>
+      <View ref={ref} style={[pressableStyles.pressable, style]}>
         {children}
       </View>
     </TouchableWithoutFeedback>

package/src/Pressable/Pressable.styles.tsx

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme } from '@idealyst/theme';
+import {
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+
+const createPressableStyles = (theme: Theme) => {
+  return {
+    variants: {
+      // Spacing variants from PressableSpacingStyleProps
+      padding: buildPaddingVariants(theme),
+      paddingVertical: buildPaddingVerticalVariants(theme),
+      paddingHorizontal: buildPaddingHorizontalVariants(theme),
+    },
+  } as const;
+};
+
+export const pressableStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    pressable: createPressableStyles(theme),
+  };
+});

package/src/Pressable/Pressable.web.tsx

@@ -1,5 +1,8 @@
 import React, { useCallback, useState, forwardRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
 import { PressableProps } from './types';
+import { pressableStyles } from './Pressable.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
 const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
   children,
@@ -7,6 +10,10 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
   onPressIn,
   onPressOut,
   disabled = false,
+  // Spacing variants from PressableSpacingStyleProps
+  padding,
+  paddingVertical,
+  paddingHorizontal,
   style,
   testID,
   accessibilityLabel,
@@ -39,6 +46,15 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
     }
   }, [disabled, onPress]);
 
+  // Apply spacing variants
+  pressableStyles.useVariants({
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+  });
+
+  const webProps = getWebProps([pressableStyles.pressable, style as any]);
+
   const baseStyle: React.CSSProperties = {
     cursor: disabled ? 'default' : 'pointer',
     outline: 'none',
@@ -48,17 +64,19 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
     opacity: disabled ? 0.5 : 1,
   };
 
-  // Merge base styles with custom styles for web compatibility
-  const mergedStyle: React.CSSProperties = style
-    ? { ...baseStyle, ...(style as React.CSSProperties) }
-    : baseStyle;
+  // Merge ref from getWebProps with forwarded ref
+  const mergedRef = useMergeRefs<HTMLDivElement>(
+    ref,
+    webProps.ref as React.Ref<HTMLDivElement>
+  );
 
   return (
     <div
-      ref={ref}
+      {...webProps}
+      ref={mergedRef}
       role={accessibilityRole}
       tabIndex={disabled ? -1 : 0}
-      style={mergedStyle}
+      style={{ ...baseStyle, ...webProps.style }}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp} // Handle mouse leave as press out

package/src/Pressable/types.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { PressableSpacingStyleProps } from '../utils/viewStyleProps';
 
-export interface PressableProps {
+export interface PressableProps extends PressableSpacingStyleProps {
   /**
    * Content to render inside the pressable area
    */
@@ -46,4 +47,4 @@ export interface PressableProps {
    * Accessibility role (web)
    */
   accessibilityRole?: string;
-}
+}

package/src/RadioButton/RadioButton.native.tsx

@@ -13,6 +13,10 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
   label,
   size = 'md',
   intent = 'primary',
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }, ref) => {
@@ -47,6 +51,9 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
     size,
     checked,
     disabled,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const dotScale = animatedValue.interpolate({

package/src/RadioButton/RadioButton.styles.tsx

@@ -1,6 +1,11 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
 
 type RadioButtonSize = Size;
 type RadioButtonIntent = Intent;
@@ -124,6 +129,10 @@ export const radioButtonStyles = StyleSheet.create((theme: Theme) => {
             size: buildSizeVariants(theme, 'radioButton', (size) => ({
                 gap: size.gap,
             })),
+            // Spacing variants from FormInputStyleProps
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
         } as const,
     },
     radio: createRadioStyles(theme),

package/src/RadioButton/RadioButton.web.tsx

@@ -12,6 +12,10 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   label,
   size = 'md',
   intent = 'primary',
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }) => {
@@ -35,6 +39,9 @@ const RadioButton: React.FC<RadioButtonProps> = ({
     size,
     checked,
     disabled,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const containerProps = getWebProps([radioButtonStyles.container, style]);

package/src/RadioButton/types.ts

@@ -1,12 +1,13 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import { Intent, Size } from '@idealyst/theme';
+import { FormInputStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type RadioButtonIntentVariant = Intent;
 export type RadioButtonSizeVariant = Size;
 
-export interface RadioButtonProps {
+export interface RadioButtonProps extends FormInputStyleProps {
   value: string;
   checked?: boolean;
   onPress?: () => void;

package/src/Screen/Screen.native.tsx

@@ -6,18 +6,31 @@ import { screenStyles } from './Screen.styles';
 const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   children,
   background = 'primary',
-  padding = 'md',
   safeArea = true,
   scrollable = true,
   contentInset,
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }, ref) => {
 
   screenStyles.useVariants({
     background,
-    padding,
     safeArea,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   if (scrollable) {
@@ -35,15 +48,15 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
       } : undefined,
     ];
 
-  return (
-    <RNScrollView
-      ref={ref as any}
-      style={scrollViewStyle}
-      contentContainerStyle={contentContainerStyleArray}
-      testID={testID}
-    >
-      {children}
-    </RNScrollView>
+    return (
+      <RNScrollView
+        ref={ref as any}
+        style={scrollViewStyle}
+        contentContainerStyle={contentContainerStyleArray}
+        testID={testID}
+      >
+        {children}
+      </RNScrollView>
     );
   }
 
@@ -64,4 +77,4 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
 
 Screen.displayName = 'Screen';
 
-export default Screen; 
+export default Screen;