@idealyst/components 1.0.98 → 1.1.0

package/src/Screen/Screen.styles.tsx

@@ -1,5 +1,14 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme } from '@idealyst/theme';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
 
 function generateBackgroundVariants(theme: Theme) {
   return {
@@ -10,18 +19,7 @@ function generateBackgroundVariants(theme: Theme) {
     'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
     'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
     transparent: { backgroundColor: 'transparent' },
-  }
-}
-
-function generatePaddingVariants() {
-  return {
-    none: { padding: 0 },
-    xs: { padding: 4 },
-    sm: { padding: 8 },
-    md: { padding: 16 },
-    lg: { padding: 24 },
-    xl: { padding: 32 },
-  }
+  };
 }
 
 // Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
@@ -34,11 +32,18 @@ export const screenStyles = StyleSheet.create((theme: Theme) => {
       backgroundColor: theme.colors.surface.primary,
       variants: {
         background: generateBackgroundVariants(theme),
-        padding: generatePaddingVariants(),
         safeArea: {
           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),
       },
       _web: {
         overflow: 'auto',
@@ -53,11 +58,18 @@ export const screenStyles = StyleSheet.create((theme: Theme) => {
       backgroundColor: theme.colors.surface.primary,
       variants: {
         background: generateBackgroundVariants(theme),
-        padding: generatePaddingVariants(),
         safeArea: {
           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),
       },
     },
   };

package/src/Screen/Screen.web.tsx

@@ -7,15 +7,28 @@ import useMergeRefs from '../hooks/useMergeRefs';
 const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
   children,
   background = 'primary',
-  padding = 'md',
   safeArea = false,
+  // 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,
   });
 
   // Use getWebProps to generate className and ref for web
@@ -36,4 +49,4 @@ const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
 
 Screen.displayName = 'Screen';
 
-export default Screen; 
+export default Screen;

package/src/Screen/types.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Size, Surface } from '@idealyst/theme';
+import { Surface } from '@idealyst/theme';
+import { ContainerStyleProps } from '../utils/viewStyleProps';
 
-export interface ScreenProps {
+export interface ScreenProps extends ContainerStyleProps {
   /**
    * The content to display inside the screen
    */
@@ -13,11 +14,6 @@ export interface ScreenProps {
    */
   background?: Surface | 'transparent';
 
-  /**
-   * Screen padding variant
-   */
-  padding?: Size | 'none';
-
   /**
    * Safe area padding for mobile devices
    */
@@ -49,4 +45,4 @@ export interface ScreenProps {
    * Scrollable content
    */
   scrollable?: boolean;
-} 
+}

package/src/Select/Select.native.tsx

@@ -33,6 +33,10 @@ const Select = forwardRef<View, SelectProps>(({
   filterOption,
   presentationMode = 'dropdown',
   maxHeight = 240,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
   accessibilityLabel,
@@ -76,6 +80,9 @@ const Select = forwardRef<View, SelectProps>(({
     disabled,
     error,
     focused: isOpen,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const handleTriggerPress = () => {

package/src/Select/Select.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';
 import { SelectIntentVariant } from './types';
 
 // Type definitions
@@ -138,6 +143,12 @@ export const selectStyles = StyleSheet.create((theme: Theme) => {
     return {
         container: {
             position: 'relative',
+            variants: {
+                // Spacing variants from FormInputStyleProps
+                margin: buildMarginVariants(theme),
+                marginVertical: buildMarginVerticalVariants(theme),
+                marginHorizontal: buildMarginHorizontalVariants(theme),
+            },
         },
         label: {
             fontSize: 14,

package/src/Select/Select.web.tsx

@@ -23,6 +23,10 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
   searchable = false,
   filterOption,
   maxHeight = 240,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
   accessibilityLabel,
@@ -59,6 +63,9 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
     disabled,
     error,
     focused: isOpen,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   // Handle keyboard navigation on the trigger button

package/src/Select/types.ts

@@ -1,6 +1,7 @@
 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 SelectIntentVariant = Intent;
@@ -29,7 +30,7 @@ export interface SelectOption {
   icon?: ReactNode;
 }
 
-export interface SelectProps {
+export interface SelectProps extends FormInputStyleProps {
   /**
    * Array of options to display in the select
    */

package/src/Slider/Slider.native.tsx

@@ -21,6 +21,10 @@ const Slider = forwardRef<View, SliderProps>(({
   intent = 'primary',
   size = 'md',
   icon,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   onValueChange,
   onValueCommit,
   style,
@@ -38,6 +42,9 @@ const Slider = forwardRef<View, SliderProps>(({
   sliderStyles.useVariants({
     size,
     disabled,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const clampValue = (val: number) => {

package/src/Slider/Slider.styles.tsx

@@ -1,6 +1,11 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, Size, Styles} from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
 import { SliderIntentVariant } from './types';
 
 /**
@@ -157,6 +162,12 @@ export const sliderStyles = StyleSheet.create((theme: Theme) => {
         container: {
             gap: 4,
             paddingVertical: 8,
+            variants: {
+                // Spacing variants from FormInputStyleProps
+                margin: buildMarginVariants(theme),
+                marginVertical: buildMarginVerticalVariants(theme),
+                marginHorizontal: buildMarginHorizontalVariants(theme),
+            },
         },
         sliderWrapper: {
             position: 'relative',

package/src/Slider/Slider.web.tsx

@@ -19,6 +19,10 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   intent = 'primary',
   size = 'md',
   icon,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   onValueChange,
   onValueCommit,
   style,
@@ -36,6 +40,9 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   sliderStyles.useVariants({
     size,
     disabled,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const containerProps = getWebProps([sliderStyles.container, style as any]);

package/src/Slider/types.ts

@@ -1,12 +1,13 @@
 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 SliderIntentVariant = Intent;
 export type SliderSizeVariant = Size;
 
-export interface SliderProps {
+export interface SliderProps extends FormInputStyleProps {
   value?: number;
   defaultValue?: number;
   min?: number;

package/src/Switch/Switch.native.tsx

@@ -13,6 +13,10 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   labelPosition = 'right',
   intent = 'primary',
   size = 'md',
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }, ref) => {
@@ -20,6 +24,9 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
     size,
     disabled,
     position: labelPosition,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const progress = useSharedValue(checked ? 1 : 0);

package/src/Switch/Switch.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';
 import { SwitchIntentVariant, SwitchSizeVariant } from './types';
 
 function createTrackSizeVariants(theme: Theme) {
@@ -130,6 +135,12 @@ export const switchStyles = StyleSheet.create((theme: Theme) => {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 8,
+        variants: {
+            // Spacing variants from FormInputStyleProps
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
     },
     switchContainer: {
         justifyContent: 'center',

package/src/Switch/Switch.web.tsx

@@ -16,6 +16,10 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   size = 'md',
   enabledIcon,
   disabledIcon,
+  // Spacing variants from FormInputStyleProps
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }, ref) => {
@@ -30,6 +34,9 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
     size: size as 'sm' | 'md' | 'lg',
     disabled: disabled as boolean,
     position: labelPosition as 'left' | 'right',
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const trackProps = getWebProps([switchStyles.switchTrack({ checked, intent })]);

package/src/Switch/types.ts

@@ -1,12 +1,13 @@
 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 SwitchIntentVariant = Intent;
 export type SwitchSizeVariant = Size;
 
-export interface SwitchProps {
+export interface SwitchProps extends FormInputStyleProps {
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;

package/src/TabBar/TabBar.native.tsx

@@ -17,6 +17,14 @@ const TabBar = forwardRef<View, TabBarProps>(({
   type = 'default',
   size = 'md',
   pillMode = 'light',
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }, ref) => {
@@ -77,7 +85,17 @@ const TabBar = forwardRef<View, TabBarProps>(({
   });
 
   // Apply container and indicator types right before rendering
-  tabBarContainerStyles.useVariants({ size, pillMode });
+  tabBarContainerStyles.useVariants({
+    size,
+    pillMode,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
+  });
   tabBarIndicatorStyles.useVariants({ pillMode });
 
   return (

package/src/TabBar/TabBar.styles.tsx

@@ -1,6 +1,15 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
 import { TabBarPillMode, TabBarSizeVariant, TabBarType } from './types';
 
 type TabBarContainerVariants = {
@@ -229,6 +238,14 @@ const createContainerStyles = (theme: Theme) => {
                 light: {},
                 dark: {},
             },
+            // 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),
         } as const,
         compoundVariants: createContainerCompoundVariants(theme),
     } as const;

package/src/TabBar/TabBar.web.tsx

@@ -79,6 +79,14 @@ const TabBar: React.FC<TabBarProps> = ({
   type = 'standard',
   size = 'md',
   pillMode = 'light',
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }) => {
@@ -139,7 +147,18 @@ const TabBar: React.FC<TabBarProps> = ({
   };
 
   // Apply container and indicator types
-  tabBarContainerStyles.useVariants({ type, size, pillMode });
+  tabBarContainerStyles.useVariants({
+    type,
+    size,
+    pillMode,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
+  });
   const containerProps = getWebProps([tabBarContainerStyles.container, style as any]);
 
   tabBarIndicatorStyles.useVariants({ type, pillMode });

package/src/TabBar/types.ts

@@ -1,5 +1,6 @@
 import { Size } from '@idealyst/theme';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { ContainerStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type TabBarSizeVariant = Size;
@@ -12,7 +13,7 @@ export interface TabBarItem {
   disabled?: boolean;
 }
 
-export interface TabBarProps {
+export interface TabBarProps extends ContainerStyleProps {
   items: TabBarItem[];
   value?: string;
   defaultValue?: string;

package/src/Table/Table.native.tsx

@@ -10,6 +10,14 @@ function TableInner<T = any>({
   size = 'md',
   stickyHeader = false,
   onRowPress,
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }: TableProps<T>, ref: React.Ref<ScrollView>) {
@@ -17,6 +25,13 @@ function TableInner<T = any>({
   tableStyles.useVariants({
     type,
     size,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   // Helper to get cell value

package/src/Table/Table.styles.tsx

@@ -1,6 +1,15 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
 
 type TableType = 'default' | 'bordered' | 'striped';
 
@@ -165,6 +174,14 @@ const createContainerStyles = (theme: Theme) => {
         },
         variants: {
             type: createContainerTypeVariants(theme),
+            // 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),
         },
     } as const;
 }
@@ -221,6 +238,8 @@ const createRowStyles = (theme: Theme) => {
 
 const createHeaderCellStyles = (theme: Theme) => {
     return {
+        flexDirection: 'row',
+        alignItems: 'center',
         textAlign: 'left',
         fontWeight: '600',
         color: theme.colors.text.primary,
@@ -235,12 +254,15 @@ const createHeaderCellStyles = (theme: Theme) => {
             align: {
                 left: {
                     textAlign: 'left',
+                    justifyContent: 'flex-start',
                 },
                 center: {
                     textAlign: 'center',
+                    justifyContent: 'center',
                 },
                 right: {
                     textAlign: 'right',
+                    justifyContent: 'flex-end',
                 },
             },
             type: createHeaderCellTypeVariants(theme),
@@ -250,6 +272,8 @@ const createHeaderCellStyles = (theme: Theme) => {
 
 const createCellStyles = (theme: Theme) => {
     return {
+        flexDirection: 'row',
+        alignItems: 'center',
         textAlign: 'left',
         color: theme.colors.text.primary,
         variants: {
@@ -257,12 +281,15 @@ const createCellStyles = (theme: Theme) => {
             align: {
                 left: {
                     textAlign: 'left',
+                    justifyContent: 'flex-start',
                 },
                 center: {
                     textAlign: 'center',
+                    justifyContent: 'center',
                 },
                 right: {
                     textAlign: 'right',
+                    justifyContent: 'flex-end',
                 },
             },
             type: createCellTypeVariants(theme),

package/src/Table/Table.web.tsx

@@ -10,6 +10,14 @@ function Table<T = any>({
   size = 'md',
   stickyHeader = false,
   onRowPress,
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }: TableProps<T>) {
@@ -17,6 +25,13 @@ function Table<T = any>({
   tableStyles.useVariants({
     type,
     size,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const containerProps = getWebProps([tableStyles.container, style as any]);

package/src/Table/types.ts

@@ -1,6 +1,7 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import { Size } from '@idealyst/theme';
+import { ContainerStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type TableSizeVariant = Size;
@@ -16,7 +17,7 @@ export interface TableColumn<T = any> {
   align?: TableAlignVariant;
 }
 
-export interface TableProps<T = any> {
+export interface TableProps<T = any> extends ContainerStyleProps {
   columns: TableColumn<T>[];
   data: T[];
   type?: TableType;