@idealyst/components 1.1.6 → 1.1.8

package/src/Card/Card.styles.tsx

@@ -1,158 +1,123 @@
+/**
+ * Card styles using defineStyle with $iterator expansion.
+ */
 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 { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Radius } from '@idealyst/theme';
 import { ViewStyleSize } from '../utils/viewStyleProps';
 
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
 type CardType = 'outlined' | 'elevated' | 'filled';
-type CardRadius = 'none' | 'sm' | 'md' | 'lg' | 'xs' | 'xl';
 type CardIntent = Intent | 'info' | 'neutral';
 
 export type CardVariants = {
-  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;
+    type: CardType;
+    radius: Radius;
+    intent: CardIntent;
+    clickable: boolean;
+    disabled: boolean;
+    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 {
-    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;
-}
+export type CardDynamicProps = {
+    intent?: CardIntent;
+    type?: CardType;
+};
 
 /**
- * Create compound variants for type + intent combinations
+ * Card styles with dynamic type/intent handling.
+ *
+ * NOTE: Top-level theme access required for Unistyles reactivity.
  */
-function createCardCompoundVariants(theme: Theme) {
-  const compoundVariants: CompoundVariants<keyof CardVariants> = [];
-
-  // Add intent-based border colors for outlined type
-  for (const intent in theme.intents) {
-    const intentValue = theme.intents[intent as Intent];
-
-    compoundVariants.push({
-      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;
-}
-
-// 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 cardStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    card: {
-      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)',
-              },
+export const cardStyles = defineStyle('Card', (theme: Theme) => ({
+    card: (_props: CardDynamicProps) => ({
+        position: 'relative' as const,
+        overflow: 'hidden' as const,
+        // Theme marker for Unistyles reactivity
+        backgroundColor: theme.colors.surface.primary,
+        borderColor: theme.colors.border.secondary,
+        variants: {
+            type: {
+                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,
+                },
             },
-          },
-          false: {
-            _web: {
-              cursor: 'default',
+            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)',
+                            },
+                        },
+                    },
+                    false: {
+                        _web: { cursor: 'default' },
+                    },
+                },
+                disabled: {
+                    true: { opacity: 0.6, _web: { cursor: 'not-allowed' } },
+                    false: { opacity: 1 },
+                },
+                // $iterator expands for each view size
+                gap: {
+                    gap: theme.sizes.$view.spacing,
+                },
+                padding: {
+                    padding: theme.sizes.$view.padding,
+                },
+                paddingVertical: {
+                    paddingVertical: theme.sizes.$view.padding,
+                },
+                paddingHorizontal: {
+                    paddingHorizontal: theme.sizes.$view.padding,
+                },
+                margin: {
+                    margin: theme.sizes.$view.padding,
+                },
+                marginVertical: {
+                    marginVertical: theme.sizes.$view.padding,
+                },
+                marginHorizontal: {
+                    marginHorizontal: theme.sizes.$view.padding,
+                },
             },
-          },
-        },
-        disabled: {
-          true: {
-            opacity: 0.6,
             _web: {
-              cursor: 'not-allowed',
+                display: 'flex',
+                flexDirection: 'column',
+                boxSizing: 'border-box',
             },
-          },
-          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,
-  };
-});
+    }),
+}));

package/src/Card/Card.web.tsx

@@ -51,10 +51,9 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
 
   // Apply variants
   cardStyles.useVariants({
-    clickable,
-    radius,
     type,
-    intent,
+    radius,
+    clickable,
     disabled,
     gap,
     padding,
@@ -65,8 +64,11 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
     marginHorizontal,
   });
 
+  // Get card style
+  const cardStyle = (cardStyles.card as any)({});
+
   // Generate web props
-  const webProps = getWebProps([cardStyles.card, style as any]);
+  const webProps = getWebProps([cardStyle, style as any]);
 
   const mergedRef = useMergeRefs(ref, webProps.ref);
 

package/src/Checkbox/Checkbox.native.tsx

@@ -99,33 +99,41 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
   const labelContent = children || label;
   const displayHelperText = error || helperText;
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const wrapperStyle = (checkboxStyles.wrapper as any)({});
+  const containerStyle = (checkboxStyles.container as any)({});
+  const checkboxStyle = (checkboxStyles.checkbox as any)({ intent, checked: internalChecked, disabled, type: variant });
+  const checkmarkStyle = (checkboxStyles.checkmark as any)({ checked: internalChecked });
+  const labelStyle = (checkboxStyles.label as any)({ disabled });
+  const helperTextStyle = (checkboxStyles.helperText as any)({ error: !!error });
+
   return (
-    <View ref={ref} nativeID={id} style={[checkboxStyles.wrapper, style]}>
+    <View ref={ref} nativeID={id} style={[wrapperStyle, style]}>
       <Pressable
         onPress={handlePress}
         disabled={disabled}
         testID={testID}
         {...nativeA11yProps}
-        style={checkboxStyles.container}
+        style={containerStyle}
       >
-        <View style={checkboxStyles.checkbox({ intent })}>
+        <View style={checkboxStyle}>
           {(internalChecked || indeterminate) && (
             <MaterialCommunityIcons
               name={indeterminate ? 'minus' : 'check'}
               size={14}
               color="#ffffff"
-              style={checkboxStyles.checkmark}
+              style={checkmarkStyle}
             />
           )}
         </View>
         {labelContent && (
-          <Text style={checkboxStyles.label}>
+          <Text style={labelStyle}>
             {labelContent}
           </Text>
         )}
       </Pressable>
       {displayHelperText && (
-        <Text style={checkboxStyles.helperText}>
+        <Text style={helperTextStyle}>
           {error || helperText}
         </Text>
       )}

package/src/Checkbox/Checkbox.styles.old.tsx

@@ -0,0 +1,271 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
+import {
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type CheckboxSize = Size;
+type CheckboxIntent = Intent | 'info';
+type CheckboxType = 'default' | 'outlined';
+
+type CheckboxVariants = {
+    size: CheckboxSize;
+    intent: CheckboxIntent;
+    type: CheckboxType;
+    checked: boolean;
+    disabled: boolean;
+    visible: boolean;
+    error: boolean;
+}
+
+export type ExpandedCheckboxStyles = StylesheetStyles<keyof CheckboxVariants>;
+
+export type CheckboxStylesheet = {
+    wrapper: ExpandedCheckboxStyles;
+    container: ExpandedCheckboxStyles;
+    checkbox: ExpandedCheckboxStyles;
+    label: ExpandedCheckboxStyles;
+    checkmark: ExpandedCheckboxStyles;
+    helperText: ExpandedCheckboxStyles;
+}
+
+/**
+ * Helper to get intent colors, mapping 'info' to 'primary'
+ */
+function getIntentColors(theme: Theme, intent: CheckboxIntent) {
+    const actualIntent = intent === 'info' ? 'primary' : intent;
+    return theme.intents[actualIntent as Intent];
+}
+
+/**
+ * Create size variants for checkbox
+ */
+function createCheckboxSizeVariants() {
+    return {
+        xs: { width: 14, height: 14 },
+        sm: { width: 16, height: 16 },
+        md: { width: 20, height: 20 },
+        lg: { width: 24, height: 24 },
+        xl: { width: 28, height: 28 },
+    } as const;
+}
+
+/**
+ * Create type variants for checkbox
+ */
+function createCheckboxTypeVariants(theme: Theme) {
+    return {
+        default: {
+            borderWidth: 1,
+            borderColor: theme.colors.border.primary,
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        outlined: {
+            borderWidth: 2,
+            borderColor: theme.colors.border.primary,
+            _web: {
+                border: `2px solid ${theme.colors.border.primary}`,
+            },
+        },
+    } as const;
+}
+
+/**
+ * Create checked state variants dynamically based on intent
+ */
+function createCheckedVariants(theme: Theme, intent: CheckboxIntent) {
+    const colors = getIntentColors(theme, intent);
+
+    return {
+        true: {
+            backgroundColor: colors.primary,
+            borderColor: colors.primary,
+            _web: {
+                border: `1px solid ${colors.primary}`,
+            },
+        },
+        false: {
+            backgroundColor: 'transparent',
+        },
+    } as const;
+}
+
+/**
+ * Create size variants for label
+ */
+function createLabelSizeVariants() {
+    return {
+        xs: { fontSize: 12 },
+        sm: { fontSize: 14 },
+        md: { fontSize: 16 },
+        lg: { fontSize: 18 },
+        xl: { fontSize: 20 },
+    } as const;
+}
+
+/**
+ * Create size variants for checkmark
+ */
+function createCheckmarkSizeVariants() {
+    return {
+        xs: { width: 10, height: 10 },
+        sm: { width: 12, height: 12 },
+        md: { width: 14, height: 14 },
+        lg: { width: 16, height: 16 },
+        xl: { width: 20, height: 20 },
+    } as const;
+}
+
+function createCheckboxStyles(theme: Theme) {
+    return ({ intent }: Partial<CheckboxVariants>) => {
+        return {
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 4,
+            position: 'relative',
+            backgroundColor: 'transparent',
+            borderColor: theme.colors.border.primary,
+            variants: {
+                size: createCheckboxSizeVariants(),
+                type: createCheckboxTypeVariants(theme),
+                checked: createCheckedVariants(theme, intent),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: { opacity: 0.8 },
+                            _active: { opacity: 0.6 },
+                        },
+                    },
+                },
+            },
+            _web: {
+                outline: 'none',
+                display: 'flex',
+                boxSizing: 'border-box',
+                userSelect: 'none',
+                WebkitAppearance: 'none',
+                MozAppearance: 'none',
+                appearance: 'none',
+                transition: 'all 0.2s ease',
+                _focus: {
+                    outline: `2px solid ${theme.intents.primary.primary}`,
+                    outlineOffset: '2px',
+                },
+            },
+        } as const;
+    }
+}
+
+function createCheckmarkStyles(_theme: Theme) {
+    return () => ({
+        position: 'absolute' as const,
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        color: '#ffffff',
+        variants: {
+            size: createCheckmarkSizeVariants(),
+            visible: {
+                true: { opacity: 1 },
+                false: { opacity: 0 },
+            },
+        },
+    });
+}
+
+// Helper functions to create static styles wrapped in dynamic functions
+function createWrapperStyles(theme: Theme) {
+    return () => ({
+        flexDirection: 'column' as const,
+        gap: 4,
+        variants: {
+            // Spacing variants from FormInputStyleProps
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            width: 'auto',
+        },
+    });
+}
+
+function createContainerStyles() {
+    return () => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: 8,
+        _web: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            width: 'fit-content',
+            cursor: 'pointer',
+        },
+    });
+}
+
+function createLabelStyles(theme: Theme) {
+    return () => ({
+        color: theme.colors.text.primary,
+        variants: {
+            size: createLabelSizeVariants(),
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+        _web: {
+            display: 'block',
+            textAlign: 'left',
+            margin: 0,
+            padding: 0,
+        },
+    });
+}
+
+function createHelperTextStyles(theme: Theme) {
+    return () => ({
+        fontSize: 14,
+        color: theme.colors.text.secondary,
+        marginTop: 2,
+        variants: {
+            error: {
+                true: { color: theme.intents.error.primary },
+                false: { color: theme.colors.text.secondary },
+            },
+        },
+    });
+}
+
+// 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 checkboxStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Checkbox', theme, {container: createContainerStyles(),
+        checkbox: createCheckboxStyles(theme),
+        checkmark: createCheckmarkStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        wrapper: createWrapperStyles(theme)(),
+        label: createLabelStyles(theme)(),
+        helperText: createHelperTextStyles(theme)()});
+});