@idealyst/components 1.0.99 → 1.1.0

package/src/examples/ViewExamples.tsx

@@ -3,112 +3,112 @@ import { Screen, View, Text } from '../index';
 export const ViewExamples = () => {
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="lg" weight="bold" align="center">
+      <View gap="xl">
+      <Text typography="h4" align="center">
         View Examples
       </Text>
 
       {/* Spacing Examples */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Spacing Variants</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Spacing Variants</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
-          <View spacing="none" background="secondary" border="thin">
-            <Text size="sm">None</Text>
+          <View  background="secondary" border="thin">
+            <Text typography="body2">None</Text>
           </View>
-          <View spacing="xs" background="secondary" border="thin">
-            <Text size="sm">XS</Text>
+          <View gap="xs" background="secondary" border="thin">
+            <Text typography="body2">XS</Text>
           </View>
-          <View spacing="sm" background="secondary" border="thin">
-            <Text size="sm">SM</Text>
+          <View gap="sm" background="secondary" border="thin">
+            <Text typography="body2">SM</Text>
           </View>
-          <View spacing="md" background="secondary" border="thin">
-            <Text size="sm">MD</Text>
+          <View gap="md" background="secondary" border="thin">
+            <Text typography="body2">MD</Text>
           </View>
-          <View spacing="lg" background="secondary" border="thin">
-            <Text size="sm">LG</Text>
+          <View gap="lg" background="secondary" border="thin">
+            <Text typography="body2">LG</Text>
           </View>
-          <View spacing="xl" background="secondary" border="thin">
-            <Text size="sm">XL</Text>
+          <View gap="xl" background="secondary" border="thin">
+            <Text typography="body2">XL</Text>
           </View>
         </View>
       </View>
 
       {/* Background Examples */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Background Variants</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Background Variants</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View background="transparent" border="thin" spacing="sm" radius="sm">
-            <Text size="sm" color="primary">Transparent</Text>
+          <View background="transparent" border="thin" gap="sm" radius="sm">
+            <Text typography="body2" color="primary">Transparent</Text>
           </View>
-          <View background="primary" spacing="sm" radius="sm">
-            <Text size="sm" color="primary">Primary</Text>
+          <View background="primary" gap="sm" radius="sm">
+            <Text typography="body2" color="primary">Primary</Text>
           </View>
-          <View background="secondary" spacing="sm" radius="sm">
-            <Text size="sm" color="secondary">Secondary</Text>
+          <View background="secondary" gap="sm" radius="sm">
+            <Text typography="caption" color="secondary">Secondary</Text>
           </View>
-          <View background="tertiary" spacing="sm" radius="sm">
-            <Text size="sm" color="tertiary">Tertiary</Text>
+          <View background="tertiary" gap="sm" radius="sm">
+            <Text typography="body2" color="tertiary">Tertiary</Text>
           </View>
-          <View background="inverse" spacing="sm" radius="sm">
-            <Text size="sm" color="inverse">Inverse (of primary)</Text>
+          <View background="inverse" gap="sm" radius="sm">
+            <Text typography="body2" color="inverse">Inverse (of primary)</Text>
           </View>
-          <View background="inverse-secondary" spacing="sm" radius="sm">
-            <Text size="sm" color="inverse-secondary">Inverse Secondary</Text>
+          <View background="inverse-secondary" gap="sm" radius="sm">
+            <Text typography="body2" color="inverse-secondary">Inverse Secondary</Text>
           </View>
-          <View background="inverse-tertiary" spacing="sm" radius="sm">
-            <Text size="sm" color="inverse-tertiary">Inverse Tertiary</Text>
+          <View background="inverse-tertiary" gap="sm" radius="sm">
+            <Text typography="body2" color="inverse-tertiary">Inverse Tertiary</Text>
           </View>
         </View>
       </View>
 
       {/* Border Radius Examples */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Border Radius</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Border Radius</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View radius="none" background="inverse" spacing="sm">
-            <Text size="sm" color="inverse">None</Text>
+          <View radius="none" background="inverse" gap="sm">
+            <Text typography="body2" color="inverse">None</Text>
           </View>
-          <View radius="xs" background="inverse" spacing="sm">
-            <Text size="sm" color="inverse">XS</Text>
+          <View radius="xs" background="inverse" gap="sm">
+            <Text typography="body2" color="inverse">XS</Text>
           </View>
-          <View radius="sm" background="inverse" spacing="sm">
-            <Text size="sm" color="inverse">SM</Text>
+          <View radius="sm" background="inverse" gap="sm">
+            <Text typography="body2" color="inverse">SM</Text>
           </View>
-          <View radius="md" background="inverse" spacing="sm">
-            <Text size="sm" color="inverse">MD</Text>
+          <View radius="md" background="inverse" gap="sm">
+            <Text typography="body2" color="inverse">MD</Text>
           </View>
-          <View radius="lg" background="inverse" spacing="sm">
-            <Text size="sm" color="inverse">LG</Text>
+          <View radius="lg" background="inverse" gap="sm">
+            <Text typography="body2" color="inverse">LG</Text>
           </View>
-          <View radius="xl" background="inverse" spacing="sm">
-            <Text size="sm" color="inverse">XL</Text>
+          <View radius="xl" background="inverse" gap="sm">
+            <Text typography="body2" color="inverse">XL</Text>
           </View>
         </View>
       </View>
 
       {/* Border Examples */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Border Variants</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Border Variants</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View border="none" background="secondary" spacing="sm" radius="sm">
-            <Text size="sm">None</Text>
+          <View border="none" background="secondary" gap="sm" radius="sm">
+            <Text typography="body2">None</Text>
           </View>
-          <View border="thin" background="secondary" spacing="sm" radius="sm">
-            <Text size="sm">Thin</Text>
+          <View border="thin" background="secondary" gap="sm" radius="sm">
+            <Text typography="body2">Thin</Text>
           </View>
-          <View border="thick" background="secondary" spacing="sm" radius="sm">
-            <Text size="sm">Thick</Text>
+          <View border="thick" background="secondary" gap="sm" radius="sm">
+            <Text typography="body2">Thick</Text>
           </View>
         </View>
       </View>
 
       {/* Layout Examples */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Layout Examples</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">Layout Examples</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <View
             background="secondary"
-            spacing="md"
+            gap="md"
             radius="md"
             border="thin"
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
@@ -120,7 +120,7 @@ export const ViewExamples = () => {
 
           <View
             background="secondary"
-            spacing="md"
+            gap="md"
             radius="md"
             border="thin"
             style={{ flexDirection: 'column', alignItems: 'center' }}

package/src/index.ts

@@ -145,4 +145,8 @@ export { useMergeRefs };
 // Event utilities
 export * from './utils/events';
 
+// View style utilities for custom components
+export * from './utils/viewStyleProps';
+export * from './utils/buildViewStyleVariants';
+
 export type { AppTheme } from '@idealyst/theme';

package/src/utils/buildViewStyleVariants.ts

@@ -0,0 +1,148 @@
+import { Theme, Size, Styles } from '@idealyst/theme';
+
+/**
+ * Builds gap variants from theme.sizes.view
+ * Uses the 'spacing' value from ViewSizeValue
+ */
+export function buildGapVariants(theme: Theme): Record<Size, Styles> {
+  const variants = {} as Record<Size, Styles>;
+  for (const size in theme.sizes.view) {
+    variants[size as Size] = {
+      gap: theme.sizes.view[size as Size].spacing,
+    };
+  }
+  return variants;
+}
+
+/**
+ * Builds padding variants from theme.sizes.view
+ * Uses the 'padding' value from ViewSizeValue
+ */
+export function buildPaddingVariants(theme: Theme): Record<Size, Styles> {
+  const variants = {} as Record<Size, Styles>;
+  for (const size in theme.sizes.view) {
+    variants[size as Size] = {
+      padding: theme.sizes.view[size as Size].padding,
+    };
+  }
+  return variants;
+}
+
+/**
+ * Builds paddingVertical variants from theme.sizes.view
+ */
+export function buildPaddingVerticalVariants(theme: Theme): Record<Size, Styles> {
+  const variants = {} as Record<Size, Styles>;
+  for (const size in theme.sizes.view) {
+    variants[size as Size] = {
+      paddingVertical: theme.sizes.view[size as Size].padding,
+    };
+  }
+  return variants;
+}
+
+/**
+ * Builds paddingHorizontal variants from theme.sizes.view
+ */
+export function buildPaddingHorizontalVariants(theme: Theme): Record<Size, Styles> {
+  const variants = {} as Record<Size, Styles>;
+  for (const size in theme.sizes.view) {
+    variants[size as Size] = {
+      paddingHorizontal: theme.sizes.view[size as Size].padding,
+    };
+  }
+  return variants;
+}
+
+/**
+ * Builds margin variants from theme.sizes.view
+ * Uses the 'spacing' value from ViewSizeValue (same as gap)
+ */
+export function buildMarginVariants(theme: Theme): Record<Size, Styles> {
+  const variants = {} as Record<Size, Styles>;
+  for (const size in theme.sizes.view) {
+    variants[size as Size] = {
+      margin: theme.sizes.view[size as Size].spacing,
+    };
+  }
+  return variants;
+}
+
+/**
+ * Builds marginVertical variants from theme.sizes.view
+ */
+export function buildMarginVerticalVariants(theme: Theme): Record<Size, Styles> {
+  const variants = {} as Record<Size, Styles>;
+  for (const size in theme.sizes.view) {
+    variants[size as Size] = {
+      marginVertical: theme.sizes.view[size as Size].spacing,
+    };
+  }
+  return variants;
+}
+
+/**
+ * Builds marginHorizontal variants from theme.sizes.view
+ */
+export function buildMarginHorizontalVariants(theme: Theme): Record<Size, Styles> {
+  const variants = {} as Record<Size, Styles>;
+  for (const size in theme.sizes.view) {
+    variants[size as Size] = {
+      marginHorizontal: theme.sizes.view[size as Size].spacing,
+    };
+  }
+  return variants;
+}
+
+/**
+ * Convenience function to build all container style variants at once
+ * Returns all gap, padding, and margin variants
+ */
+export function buildContainerStyleVariants(theme: Theme) {
+  return {
+    gap: buildGapVariants(theme),
+    padding: buildPaddingVariants(theme),
+    paddingVertical: buildPaddingVerticalVariants(theme),
+    paddingHorizontal: buildPaddingHorizontalVariants(theme),
+    margin: buildMarginVariants(theme),
+    marginVertical: buildMarginVerticalVariants(theme),
+    marginHorizontal: buildMarginHorizontalVariants(theme),
+  };
+}
+
+/**
+ * Convenience function to build padding-only variants
+ * For components that only need padding support
+ */
+export function buildPaddingStyleVariants(theme: Theme) {
+  return {
+    padding: buildPaddingVariants(theme),
+    paddingVertical: buildPaddingVerticalVariants(theme),
+    paddingHorizontal: buildPaddingHorizontalVariants(theme),
+  };
+}
+
+/**
+ * Convenience function to build margin-only variants
+ * For form input components that only need margin support
+ */
+export function buildMarginStyleVariants(theme: Theme) {
+  return {
+    margin: buildMarginVariants(theme),
+    marginVertical: buildMarginVerticalVariants(theme),
+    marginHorizontal: buildMarginHorizontalVariants(theme),
+  };
+}
+
+/**
+ * Convenience function to build text spacing variants (gap + padding)
+ * For Text component
+ */
+export function buildTextSpacingVariants(theme: Theme) {
+  return {
+    gap: buildGapVariants(theme),
+    padding: buildPaddingVariants(theme),
+    paddingVertical: buildPaddingVerticalVariants(theme),
+    paddingHorizontal: buildPaddingHorizontalVariants(theme),
+  };
+}

package/src/utils/viewStyleProps.ts

@@ -0,0 +1,63 @@
+import { Size } from '@idealyst/theme';
+
+/**
+ * Size variant type for view style props.
+ * undefined = no variant applied (inherits default or no style)
+ */
+export type ViewStyleSize = Size;
+
+/**
+ * Gap style props - for controlling gap/spacing between children
+ */
+export interface GapStyleProps {
+  /** Gap between children (uses theme.sizes.view[size].spacing) */
+  gap?: ViewStyleSize;
+}
+
+/**
+ * Padding style props - for controlling internal spacing
+ */
+export interface PaddingStyleProps {
+  /** Padding on all sides (uses theme.sizes.view[size].padding) */
+  padding?: ViewStyleSize;
+  /** Vertical padding (top + bottom) */
+  paddingVertical?: ViewStyleSize;
+  /** Horizontal padding (left + right) */
+  paddingHorizontal?: ViewStyleSize;
+}
+
+/**
+ * Margin style props - for controlling external spacing
+ */
+export interface MarginStyleProps {
+  /** Margin on all sides (uses theme.sizes.view[size].spacing) */
+  margin?: ViewStyleSize;
+  /** Vertical margin (top + bottom) */
+  marginVertical?: ViewStyleSize;
+  /** Horizontal margin (left + right) */
+  marginHorizontal?: ViewStyleSize;
+}
+
+/**
+ * Full container style props - includes all spacing options
+ * For: View, Card, Screen, List, Accordion, Table, TabBar
+ */
+export interface ContainerStyleProps extends GapStyleProps, PaddingStyleProps, MarginStyleProps {}
+
+/**
+ * Text spacing style props - gap + padding only
+ * For: Text (gap for inline elements, padding for block-level)
+ */
+export interface TextSpacingStyleProps extends GapStyleProps, PaddingStyleProps {}
+
+/**
+ * Pressable style props - padding only
+ * For: Pressable
+ */
+export interface PressableSpacingStyleProps extends PaddingStyleProps {}
+
+/**
+ * Form input style props - margin only
+ * For: Input, Select, TextArea, Checkbox, RadioButton, Switch, Slider
+ */
+export interface FormInputStyleProps extends MarginStyleProps {}