@idealyst/components 1.1.6 → 1.1.8

package/src/Checkbox/Checkbox.styles.tsx

@@ -1,153 +1,99 @@
+/**
+ * Checkbox styles using defineStyle with $iterator expansion.
+ */
 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';
-type CheckboxType = 'default' | 'outlined';
-
-type CheckboxVariants = {
-    size: CheckboxSize;
-    intent: CheckboxIntent;
-    type: CheckboxType;
-    checked: boolean;
-    disabled: boolean;
-    visible: boolean;
-    error: boolean;
-}
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-export type ExpandedCheckboxStyles = StylesheetStyles<keyof CheckboxVariants>;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type CheckboxStylesheet = {
-    wrapper: ExpandedCheckboxStyles;
-    container: ExpandedCheckboxStyles;
-    checkbox: ExpandedCheckboxStyles;
-    label: ExpandedCheckboxStyles;
-    checkmark: ExpandedCheckboxStyles;
-    helperText: ExpandedCheckboxStyles;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-/**
- * 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];
-}
+type CheckboxType = 'default' | 'outlined';
 
-/**
- * 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;
-}
+export type CheckboxDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    type?: CheckboxType;
+    checked?: boolean;
+    disabled?: boolean;
+    visible?: boolean;
+    error?: boolean;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
 /**
- * Create type variants for checkbox
+ * Checkbox styles with intent/type/checked handling.
  */
-function createCheckboxTypeVariants(theme: Theme) {
-    return {
-        default: {
-            borderWidth: 1,
-            borderColor: theme.colors.border.primary,
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
+export const checkboxStyles = defineStyle('Checkbox', (theme: Theme) => ({
+    wrapper: (_props: CheckboxDynamicProps) => ({
+        flexDirection: 'column' as const,
+        gap: 4,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
             },
-        },
-        outlined: {
-            borderWidth: 2,
-            borderColor: theme.colors.border.primary,
-            _web: {
-                border: `2px solid ${theme.colors.border.primary}`,
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
             },
-        },
-    } 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}`,
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
             },
         },
-        false: {
-            backgroundColor: 'transparent',
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            width: 'auto',
         },
-    } 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;
-}
+    container: (_props: CheckboxDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: 8,
+        _web: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            width: 'fit-content',
+            cursor: 'pointer',
+        },
+    }),
 
-/**
- * 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;
-}
+    checkbox: ({ intent = 'primary', type = 'default', checked = false, disabled = false }: CheckboxDynamicProps) => {
+        const intentColors = theme.intents[intent];
+
+        // Base border styles based on type
+        const borderWidth = type === 'outlined' ? 2 : 1;
+
+        // Checked state colors
+        const backgroundColor = checked ? intentColors.primary : 'transparent';
+        const borderColor = checked ? intentColors.primary : theme.colors.border.primary;
 
-function createCheckboxStyles(theme: Theme) {
-    return ({ intent }: Partial<CheckboxVariants>) => {
         return {
-            alignItems: 'center',
-            justifyContent: 'center',
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
             borderRadius: 4,
-            position: 'relative',
-            backgroundColor: 'transparent',
-            borderColor: theme.colors.border.primary,
+            position: 'relative' as const,
+            backgroundColor,
+            borderColor,
+            borderWidth,
+            borderStyle: 'solid' as const,
+            opacity: disabled ? 0.5 : 1,
             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 },
-                        },
-                    },
+                size: {
+                    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 },
                 },
             },
             _web: {
@@ -159,73 +105,46 @@ function createCheckboxStyles(theme: Theme) {
                 MozAppearance: 'none',
                 appearance: 'none',
                 transition: 'all 0.2s ease',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                border: `${borderWidth}px solid ${borderColor}`,
                 _focus: {
                     outline: `2px solid ${theme.intents.primary.primary}`,
                     outlineOffset: '2px',
                 },
+                _hover: disabled ? {} : { opacity: 0.8 },
+                _active: disabled ? {} : { opacity: 0.6 },
             },
         } as const;
-    }
-}
+    },
 
-function createCheckmarkStyles(_theme: Theme) {
-    return {
-        position: 'absolute',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    checkmark: ({ checked = false }: CheckboxDynamicProps) => ({
+        position: 'absolute' as const,
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         color: '#ffffff',
+        opacity: checked ? 1 : 0,
         variants: {
-            size: createCheckmarkSizeVariants(),
-            visible: {
-                true: { opacity: 1 },
-                false: { opacity: 0 },
+            size: {
+                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;
-}
+    }),
 
-// 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) => {
-  return {
-    wrapper: {
-        flexDirection: 'column',
-        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',
-        },
-    },
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        _web: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 8,
-            width: 'fit-content',
-            cursor: 'pointer',
-        },
-    },
-    checkbox: createCheckboxStyles(theme),
-    label: {
+    label: ({ disabled = false }: CheckboxDynamicProps) => ({
         color: theme.colors.text.primary,
+        opacity: disabled ? 0.5 : 1,
         variants: {
-            size: createLabelSizeVariants(),
-            disabled: {
-                true: { opacity: 0.5 },
-                false: { opacity: 1 },
+            size: {
+                xs: { fontSize: 12 },
+                sm: { fontSize: 14 },
+                md: { fontSize: 16 },
+                lg: { fontSize: 18 },
+                xl: { fontSize: 20 },
             },
         },
         _web: {
@@ -234,18 +153,11 @@ export const checkboxStyles = StyleSheet.create((theme: Theme) => {
             margin: 0,
             padding: 0,
         },
-    },
-    checkmark: createCheckmarkStyles(theme),
-    helperText: {
+    }),
+
+    helperText: ({ error = false }: CheckboxDynamicProps) => ({
         fontSize: 14,
-        color: theme.colors.text.secondary,
+        color: error ? theme.intents.error.primary : theme.colors.text.secondary,
         marginTop: 2,
-        variants: {
-            error: {
-                true: { color: theme.intents.error.primary },
-                false: { color: theme.colors.text.secondary },
-            },
-        },
-    },
-  };
-});
+    }),
+}));

package/src/Checkbox/Checkbox.web.tsx

@@ -124,13 +124,13 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
     marginHorizontal,
   });
 
-  // Create style arrays
-  const wrapperStyleArray = [checkboxStyles.wrapper, style as any];
-  const containerStyleArray = [checkboxStyles.container];
-  const checkboxStyleArray = [checkboxStyles.checkbox({ intent })];
-  const labelStyleArray = [checkboxStyles.label];
-  const helperTextStyleArray = [checkboxStyles.helperText];
-  const checkmarkStyleArray = [checkboxStyles.checkmark];
+  // Create style arrays - call as functions with required props for theme reactivity
+  const wrapperStyleArray = [(checkboxStyles.wrapper as any)({}), style as any];
+  const containerStyleArray = [(checkboxStyles.container as any)({})];
+  const checkboxStyleArray = [(checkboxStyles.checkbox as any)({ intent, checked: internalChecked, disabled, type: variant })];
+  const labelStyleArray = [(checkboxStyles.label as any)({ disabled })];
+  const helperTextStyleArray = [(checkboxStyles.helperText as any)({ error: !!error })];
+  const checkmarkStyleArray = [(checkboxStyles.checkmark as any)({ checked: internalChecked })];
 
   // Generate web props
   const wrapperProps = getWebProps(wrapperStyleArray);

package/src/Chip/Chip.native.tsx

@@ -42,11 +42,11 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   const isSelected = selectable ? selected : false;
 
   // Compute dynamic styles
-  const containerStyle = chipStyles.container(size, intent, type, isSelected, disabled);
-  const labelStyle = chipStyles.label(size, intent, type, isSelected);
-  const iconStyle = chipStyles.icon(size, intent, type, isSelected);
-  const deleteButtonStyle = chipStyles.deleteButton(size);
-  const deleteIconStyle = chipStyles.deleteIcon(size, intent, type, isSelected);
+  const containerStyle = (chipStyles.container as any)({ size, intent, type, selected: isSelected, disabled });
+  const labelStyle = (chipStyles.label as any)({ size, intent, type, selected: isSelected });
+  const iconStyle = (chipStyles.icon as any)({ size, intent, type, selected: isSelected });
+  const deleteButtonStyle = (chipStyles.deleteButton as any)({ size });
+  const deleteIconStyle = (chipStyles.deleteIcon as any)({ size, intent, type, selected: isSelected });
 
   // Map chip size to icon size
   const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;

package/src/Chip/Chip.styles.old.tsx

@@ -0,0 +1,184 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type ChipSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ChipType = 'filled' | 'outlined' | 'soft';
+type ChipIntent = Intent;
+
+type ChipDynamicProps = {
+    size: ChipSize;
+    intent: ChipIntent;
+    type: ChipType;
+    selected: boolean;
+    disabled?: boolean;
+};
+
+type ChipDeleteButtonProps = {
+    size: ChipSize;
+};
+
+/**
+ * Create container styles
+ */
+function createContainerStyles(theme: Theme) {
+    return ({ size, intent, type, selected, disabled = false }: ChipDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const sizeValue = theme.sizes.chip[size];
+
+        // Compute colors based on type and selected state
+        let backgroundColor: string;
+        let borderColor: string;
+        let borderWidth: number;
+
+        if (type === 'filled') {
+            borderWidth = 1;
+            backgroundColor = selected ? intentValue.contrast : intentValue.primary;
+            borderColor = selected ? intentValue.primary : 'transparent';
+        } else if (type === 'outlined') {
+            borderWidth = 1;
+            backgroundColor = selected ? intentValue.primary : 'transparent';
+            borderColor = intentValue.primary;
+        } else { // soft
+            borderWidth = 0;
+            backgroundColor = selected ? intentValue.primary : intentValue.light;
+            borderColor = 'transparent';
+        }
+
+        return {
+            display: 'flex' as const,
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            gap: 4,
+            paddingHorizontal: sizeValue.paddingHorizontal as number,
+            paddingVertical: sizeValue.paddingVertical as number,
+            minHeight: sizeValue.minHeight as number,
+            borderRadius: sizeValue.borderRadius as number,
+            backgroundColor,
+            borderColor,
+            borderWidth,
+            borderStyle: borderWidth > 0 ? ('solid' as const) : undefined,
+            opacity: disabled ? 0.5 : 1,
+        } as const;
+    };
+}
+
+/**
+ * Create label styles
+ */
+function createLabelStyles(theme: Theme) {
+    return ({ size, intent, type, selected }: ChipDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const sizeValue = theme.sizes.chip[size];
+
+        // Compute color based on type and selected state
+        let color: string;
+
+        if (type === 'filled') {
+            color = selected ? intentValue.primary : intentValue.contrast;
+        } else if (type === 'outlined') {
+            color = selected ? theme.colors.text.inverse : intentValue.primary;
+        } else { // soft
+            color = selected ? theme.colors.text.inverse : intentValue.dark;
+        }
+
+        return {
+            fontFamily: 'inherit',
+            fontWeight: '500' as const,
+            fontSize: sizeValue.fontSize as number,
+            lineHeight: sizeValue.lineHeight as number,
+            color,
+        } as const;
+    };
+}
+
+/**
+ * Create icon styles
+ */
+function createIconStyles(theme: Theme) {
+    return ({ size, intent, type, selected }: ChipDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const sizeValue = theme.sizes.chip[size];
+
+        // Compute color based on type and selected state (same logic as label)
+        let color: string;
+
+        if (type === 'filled') {
+            color = selected ? intentValue.primary : intentValue.contrast;
+        } else if (type === 'outlined') {
+            color = selected ? theme.colors.text.inverse : intentValue.primary;
+        } else { // soft
+            color = selected ? theme.colors.text.inverse : intentValue.dark;
+        }
+
+        return {
+            display: 'flex' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            width: sizeValue.iconSize as number,
+            height: sizeValue.iconSize as number,
+            color,
+        } as const;
+    };
+}
+
+/**
+ * Create delete button styles
+ */
+function createDeleteButtonStyles(theme: Theme) {
+    return ({ size }: ChipDeleteButtonProps) => {
+        const sizeValue = theme.sizes.chip[size];
+
+        return {
+            display: 'flex' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            padding: 0,
+            marginLeft: 4,
+            borderRadius: 12,
+            width: sizeValue.iconSize as number,
+            height: sizeValue.iconSize as number,
+        } as const;
+    };
+}
+
+/**
+ * Create delete icon styles
+ */
+function createDeleteIconStyles(theme: Theme) {
+    return ({ size, intent, type, selected }: ChipDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const sizeValue = theme.sizes.chip[size];
+
+        // Compute color based on type and selected state (same logic as label/icon)
+        let color: string;
+
+        if (type === 'filled') {
+            color = selected ? intentValue.primary : intentValue.contrast;
+        } else if (type === 'outlined') {
+            color = selected ? theme.colors.text.inverse : intentValue.primary;
+        } else { // soft
+            color = selected ? theme.colors.text.inverse : intentValue.dark;
+        }
+
+        return {
+            fontSize: sizeValue.iconSize as number,
+            color,
+        } 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 chipStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Chip', theme, {container: createContainerStyles(theme),
+        label: createLabelStyles(theme),
+        icon: createIconStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        deleteButton: createDeleteButtonStyles(theme),
+        deleteIcon: createDeleteIconStyles(theme)});
+});