@idealyst/components 1.0.99 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.0.99",
+  "version": "1.1.0",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -41,7 +41,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.0.99",
+    "@idealyst/theme": "^1.1.0",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -91,7 +91,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.0.99",
+    "@idealyst/theme": "^1.1.0",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
@@ -117,4 +117,4 @@
     "components",
     "cross-platform"
   ]
-}
+}

package/src/Accordion/Accordion.native.tsx

@@ -132,6 +132,14 @@ const Accordion = forwardRef<View, AccordionProps>(({
   defaultExpanded = [],
   type = 'standard',
   size = 'md',
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }, ref) => {
@@ -141,6 +149,13 @@ const Accordion = forwardRef<View, AccordionProps>(({
   accordionStyles.useVariants({
     type,
     size,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const toggleItem = (itemId: string, disabled?: boolean) => {

package/src/Accordion/Accordion.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 { AccordionType } from './types';
 
 type AccordionSize = Size;
@@ -127,6 +136,14 @@ export const accordionStyles = StyleSheet.create((theme: 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),
             },
         },
         item: {

package/src/Accordion/Accordion.web.tsx

@@ -98,6 +98,14 @@ const Accordion: React.FC<AccordionProps> = ({
   defaultExpanded = [],
   type = 'standard',
   size = 'md',
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
 }) => {
@@ -107,6 +115,13 @@ const Accordion: React.FC<AccordionProps> = ({
   accordionStyles.useVariants({
     type,
     size,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
 
   const containerProps = getWebProps([accordionStyles.container, style as any]);

package/src/Accordion/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 AccordionType = 'standard' | 'separated' | 'bordered';
@@ -12,7 +13,7 @@ export interface AccordionItem {
   disabled?: boolean;
 }
 
-export interface AccordionProps {
+export interface AccordionProps extends ContainerStyleProps {
   items: AccordionItem[];
   allowMultiple?: boolean;
   defaultExpanded?: string[];

package/src/Button/Button.native.tsx

@@ -1,6 +1,7 @@
 import React, { ComponentRef, forwardRef, isValidElement } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet as RNStyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
 import { ButtonProps } from './types';
 
@@ -13,17 +14,39 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     type = 'contained',
     intent = 'primary',
     size = 'md',
+    gradient,
     leftIcon,
     rightIcon,
     style,
     testID,
   } = props;
 
+  // Apply variants
+  buttonStyles.useVariants({
+    type,
+    intent,
+    size,
+    disabled,
+    gradient,
+  });
+
   // Compute dynamic styles
   const buttonStyle = buttonStyles.button;
   const textStyle = buttonStyles.text;
   const iconStyle = buttonStyles.icon;
 
+  // Gradient is only applicable to contained buttons
+  const showGradient = gradient && type === 'contained';
+
+  // Get gradient overlay colors (transparent to semi-transparent black/white)
+  const getGradientColors = (): [string, string] => {
+    switch (gradient) {
+      case 'darken': return ['transparent', 'rgba(0, 0, 0, 0.15)'];
+      case 'lighten': return ['transparent', 'rgba(255, 255, 255, 0.2)'];
+      default: return ['transparent', 'transparent'];
+    }
+  };
+
   // Map button size to icon size
   const iconSizeMap = {
     xs: 12,
@@ -59,6 +82,31 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   // Determine if we need to wrap content in icon container
   const hasIcons = leftIcon || rightIcon;
 
+  // Render gradient background layer
+  const renderGradientLayer = () => {
+    if (!showGradient) return null;
+
+    const [startColor, endColor] = getGradientColors();
+
+    return (
+      <Svg style={RNStyleSheet.absoluteFill}>
+        <Defs>
+          <LinearGradient id="buttonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <Stop offset="0%" stopColor={startColor} />
+            <Stop offset="100%" stopColor={endColor} />
+          </LinearGradient>
+        </Defs>
+        <Rect
+          width="100%"
+          height="100%"
+          fill="url(#buttonGradient)"
+          rx={8}
+          ry={8}
+        />
+      </Svg>
+    );
+  };
+
   return (
     <TouchableOpacity
       ref={ref}
@@ -66,8 +114,13 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
       disabled={disabled}
       testID={testID}
       activeOpacity={0.7}
-      style={[buttonStyle, style]}
+      style={[
+        buttonStyle,
+        showGradient && { overflow: 'hidden' },
+        style,
+      ]}
     >
+      {renderGradientLayer()}
       {hasIcons ? (
         <View style={buttonStyles.iconContainer}>
           {leftIcon && renderIcon(leftIcon)}

package/src/Button/Button.styles.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, Intent, Size, CompoundVariants} from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { ButtonGradient } from './types';
 
 type ButtonSize = Size;
 type ButtonIntent = Intent;
@@ -11,6 +12,7 @@ export type ButtonVariants = {
     intent: ButtonIntent;
     type: ButtonType;
     disabled: boolean;
+    gradient?: ButtonGradient;
 }
 
 /**
@@ -86,6 +88,25 @@ function createButtonCompoundVariants(theme: Theme): CompoundVariants<keyof Butt
     return compoundVariants;
 }
 
+/**
+ * Create gradient variant styles for web
+ * Applies a transparent overlay gradient over the intent background color
+ */
+function createGradientVariants() {
+    return {
+        'darken': {
+            _web: {
+                backgroundImage: 'linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%)',
+            },
+        },
+        'lighten': {
+            _web: {
+                backgroundImage: 'linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 100%)',
+            },
+        },
+    } as const;
+}
+
 /**
  * Create icon compound variants for intent+type combinations
  */
@@ -214,6 +235,7 @@ export const buttonStyles = StyleSheet.create((theme: Theme) => {
                         },
                     } },
                 } as const,
+                gradient: createGradientVariants(),
             } as const,
             compoundVariants: createButtonCompoundVariants(theme),
         } as const,

package/src/Button/Button.web.tsx

@@ -21,6 +21,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     type = 'contained',
     intent = 'primary',
     size = 'md',
+    gradient,
     leftIcon,
     rightIcon,
     leftIconPath,
@@ -33,10 +34,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     type,
     intent,
     size,
-    disabled
+    disabled,
+    gradient,
   });
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled && onPress) {
       onPress();
     }

package/src/Button/types.ts

@@ -8,6 +8,14 @@ export type ButtonType = 'contained' | 'outlined' | 'text';
 export type ButtonIntentVariant = Intent;
 export type ButtonSizeVariant = Size;
 
+/**
+ * Gradient overlay options for buttons.
+ * Applies a transparent gradient over the intent background color.
+ * - 'darken': Transparent to semi-transparent black (darkens one corner)
+ * - 'lighten': Transparent to semi-transparent white (lightens one corner)
+ */
+export type ButtonGradient = 'darken' | 'lighten';
+
 export interface ButtonProps {
   /**
    * The text or content to display inside the button
@@ -44,6 +52,13 @@ export interface ButtonProps {
    */
   size?: ButtonSizeVariant;
 
+  /**
+   * Apply a gradient background enhancement.
+   * Only applies to 'contained' button type.
+   * Options: 'color-to-dark', 'color-to-light', 'light-to-color', 'dark-to-color'
+   */
+  gradient?: ButtonGradient;
+
   /**
    * Icon to display on the left side. Can be an icon name or custom component (ReactNode)
    */

package/src/Card/Card.native.tsx

@@ -5,13 +5,20 @@ import { cardStyles } from './Card.styles';
 
 const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, CardProps>(({
   children,
-  type = 'default',
-  padding = 'md',
+  type = 'elevated',
   radius = 'md',
   intent = 'neutral',
   clickable = false,
   onPress,
   disabled = false,
+  // Spacing variants from ContainerStyleProps
+  gap,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginVertical,
+  marginHorizontal,
   style,
   testID,
   accessibilityLabel,
@@ -21,11 +28,17 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
     clickable,
     radius,
     type,
-    padding,
     intent,
     disabled,
+    gap,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    margin,
+    marginVertical,
+    marginHorizontal,
   });
-  
+
   // Use appropriate component based on clickable state
   const Component = clickable ? Pressable : View;
 
@@ -52,4 +65,4 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
 
 Card.displayName = 'Card';
 
-export default Card; 
+export default Card;

package/src/Card/Card.styles.tsx

@@ -1,107 +1,94 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, Intent, CompoundVariants } from '@idealyst/theme';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-type CardType = 'default' | 'outlined' | 'elevated' | 'filled';
-type CardPadding = 'none' | 'sm' | 'md' | 'lg';
-type CardRadius = 'none' | 'sm' | 'md' | 'lg';
+type CardType = 'outlined' | 'elevated' | 'filled';
+type CardRadius = 'none' | 'sm' | 'md' | 'lg' | 'xs' | 'xl';
 type CardIntent = Intent | 'info' | 'neutral';
 
 export type CardVariants = {
-    type: CardType;
-    padding: CardPadding;
-    radius: CardRadius;
-    intent: CardIntent;
-    clickable: boolean;
-    disabled: boolean;
-}
+  type: CardType;
+  radius: CardRadius;
+  intent: CardIntent;
+  clickable: boolean;
+  disabled: boolean;
+  // Spacing variants from ContainerStyleProps
+  gap: ViewStyleSize;
+  padding: ViewStyleSize;
+  paddingVertical: ViewStyleSize;
+  paddingHorizontal: ViewStyleSize;
+  margin: ViewStyleSize;
+  marginVertical: ViewStyleSize;
+  marginHorizontal: ViewStyleSize;
+};
 
 /**
  * Create type variants (structure only, colors handled by compound variants)
  */
 function createTypeVariants(theme: Theme) {
-    return {
-        default: {
-            backgroundColor: theme.colors.surface.primary,
-            borderWidth: 1,
-            borderStyle: 'solid' as const,
-        },
-        outlined: {
-            backgroundColor: 'transparent',
-            borderWidth: 1,
-            borderStyle: 'solid' as const,
-        },
-        elevated: {
-            backgroundColor: theme.colors.surface.primary,
-            borderWidth: 0,
-            ...theme.shadows.md,
-        },
-        filled: {
-            backgroundColor: theme.colors.surface.secondary,
-            borderWidth: 0,
-        },
-    } as const;
+  return {
+    outlined: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid' as const,
+    },
+    elevated: {
+      backgroundColor: theme.colors.surface.primary,
+      borderWidth: 0,
+      ...theme.shadows.md,
+    },
+    filled: {
+      backgroundColor: theme.colors.surface.secondary,
+      borderWidth: 0,
+    },
+  } as const;
 }
 
 /**
  * Create compound variants for type + intent combinations
  */
 function createCardCompoundVariants(theme: Theme) {
-    const compoundVariants: CompoundVariants<keyof CardVariants> = [];
+  const compoundVariants: CompoundVariants<keyof CardVariants> = [];
 
-    // Add intent-based border colors for default and outlined types
-    for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent as Intent];
+  // Add intent-based border colors for outlined type
+  for (const intent in theme.intents) {
+    const intentValue = theme.intents[intent as Intent];
 
-        // Default + intent
-        compoundVariants.push({
-            intent,
-            type: 'default',
-            styles: {
-                borderColor: intentValue.primary,
-            },
-        });
-
-        // Outlined + intent
-        compoundVariants.push({
-            intent,
-            type: 'outlined',
-            styles: {
-                borderColor: intentValue.primary,
-            },
-        });
-    }
-
-    // Add special intents (info, neutral)
     compoundVariants.push({
-        intent: 'info',
-        type: 'default',
-        styles: {
-            borderColor: theme.colors.border.secondary,
-        },
-    });
-    compoundVariants.push({
-        intent: 'info',
-        type: 'outlined',
-        styles: {
-            borderColor: theme.colors.border.secondary,
-        },
-    });
-    compoundVariants.push({
-        intent: 'neutral',
-        type: 'default',
-        styles: {
-            borderColor: theme.colors.border.secondary,
-        },
-    });
-    compoundVariants.push({
-        intent: 'neutral',
-        type: 'outlined',
-        styles: {
-            borderColor: theme.colors.border.secondary,
-        },
+      intent,
+      type: 'outlined',
+      styles: {
+        borderColor: intentValue.primary,
+      },
     });
+  }
+
+  // Add special intents (info, neutral) for outlined type
+  compoundVariants.push({
+    intent: 'info',
+    type: 'outlined',
+    styles: {
+      borderColor: theme.colors.border.secondary,
+    },
+  });
+  compoundVariants.push({
+    intent: 'neutral',
+    type: 'outlined',
+    styles: {
+      borderColor: theme.colors.border.secondary,
+    },
+  });
 
-    return compoundVariants;
+  return compoundVariants;
 }
 
 // Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
@@ -109,58 +96,63 @@ function createCardCompoundVariants(theme: Theme) {
 export const cardStyles = StyleSheet.create((theme: Theme) => {
   return {
     card: {
-        backgroundColor: theme.colors.surface.primary,
-        position: 'relative',
-        overflow: 'hidden',
-        variants: {
-            type: createTypeVariants(theme),
-            padding: {
-                none: { padding: 0 },
-                sm: { padding: 8 },
-                md: { padding: 16 },
-                lg: { padding: 24 },
-            },
-            radius: {
-                none: { borderRadius: 0 },
-                sm: { borderRadius: 4 },
-                md: { borderRadius: 8 },
-                lg: { borderRadius: 12 },
-            },
-            clickable: {
-                true: {
-                    _web: {
-                        cursor: 'pointer',
-                        transition: 'all 0.2s ease',
-                        _hover: {
-                            transform: 'translateY(-2px)',
-                            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
-                        },
-                    },
-                },
-                false: {
-                    _web: {
-                        cursor: 'default',
-                    },
-                },
+      backgroundColor: theme.colors.surface.primary,
+      position: 'relative',
+      overflow: 'hidden',
+      variants: {
+        type: createTypeVariants(theme),
+        radius: {
+          none: { borderRadius: 0 },
+          xs: { borderRadius: 2 },
+          sm: { borderRadius: 4 },
+          md: { borderRadius: 8 },
+          lg: { borderRadius: 12 },
+          xl: { borderRadius: 16 },
+        },
+        clickable: {
+          true: {
+            _web: {
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              _hover: {
+                transform: 'translateY(-2px)',
+                boxShadow:
+                  '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
+              },
             },
-            disabled: {
-                true: {
-                    opacity: 0.6,
-                    _web: {
-                        cursor: 'not-allowed',
-                    },
-                },
-                false: {
-                    opacity: 1,
-                },
+          },
+          false: {
+            _web: {
+              cursor: 'default',
             },
+          },
         },
-        compoundVariants: createCardCompoundVariants(theme),
-        _web: {
-            display: 'flex',
-            flexDirection: 'column',
-            boxSizing: 'border-box',
+        disabled: {
+          true: {
+            opacity: 0.6,
+            _web: {
+              cursor: 'not-allowed',
+            },
+          },
+          false: {
+            opacity: 1,
+          },
         },
+        // 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),
+      },
+      compoundVariants: createCardCompoundVariants(theme),
+      _web: {
+        display: 'flex',
+        flexDirection: 'column',
+        boxSizing: 'border-box',
+      },
     } as const,
   };
-});
+});