@idealyst/components 1.0.99 → 1.1.0

package/src/examples/CheckboxExamples.tsx

@@ -10,15 +10,15 @@ export const CheckboxExamples = () => {
 
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="lg" weight="bold" align="center">
+      <View gap="xl">
+      <Text typography="h4" align="center">
         Checkbox Examples
       </Text>
       
       {/* Basic Checkbox */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Basic Checkbox</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">Basic Checkbox</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Checkbox
             checked={basicChecked}
             onCheckedChange={setBasicChecked}
@@ -38,9 +38,9 @@ export const CheckboxExamples = () => {
       </View>
 
       {/* Checkbox Sizes */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Sizes</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">Sizes</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Checkbox
             size="sm"
             checked={true}
@@ -63,9 +63,9 @@ export const CheckboxExamples = () => {
       </View>
 
       {/* Checkbox Intents */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Intents</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">Intents</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Checkbox
             intent="primary"
             checked={primaryChecked}
@@ -106,9 +106,9 @@ export const CheckboxExamples = () => {
       </View>
 
       {/* Checkbox Variants */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Variants</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">Variants</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Checkbox
             variant="default"
             checked={true}
@@ -125,9 +125,9 @@ export const CheckboxExamples = () => {
       </View>
 
       {/* Checkbox States */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">States</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">States</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Checkbox
             checked={false}
             onCheckedChange={() => {}}
@@ -160,9 +160,9 @@ export const CheckboxExamples = () => {
       </View>
 
       {/* Checkbox with Custom Children */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Custom Content</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">Custom Content</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Checkbox
             checked={true}
             onCheckedChange={() => {}}
@@ -175,9 +175,9 @@ export const CheckboxExamples = () => {
             checked={false}
             onCheckedChange={() => {}}
           >
-            <View>
+            <View gap="sm">
               <Text weight="semibold">Multi-line Label</Text>
-              <Text size="sm" color="secondary">
+              <Text typography="caption" color="secondary">
                 This checkbox has a more complex label with multiple lines
               </Text>
             </View>
@@ -186,9 +186,9 @@ export const CheckboxExamples = () => {
       </View>
 
       {/* Checkbox with Helper Text and Errors */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">With Helper Text</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
+      <View gap="md">
+        <Text typography="subtitle1">With Helper Text</Text>
+        <View gap="sm" style={{ gap: 10 }}>
           <Checkbox
             checked={true}
             onCheckedChange={() => {}}

package/src/examples/ChipExamples.tsx

@@ -21,11 +21,11 @@ export const ChipExamples = () => {
 
   return (
     <Screen background="primary" safeArea>
-      <View spacing="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
-        <Text size="xl" weight="bold">Chip Examples</Text>
+      <View gap="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
+        <Text typography="h3">Chip Examples</Text>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Basic Chips</Text>
+        <Text typography="h5">Basic Chips</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip label="Default" />
@@ -37,23 +37,23 @@ export const ChipExamples = () => {
         </View>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Variants</Text>
+        <Text typography="h5">Variants</Text>
 
-        <Text size="md" weight="semibold">Filled (Default)</Text>
+        <Text typography="subtitle1">Filled (Default)</Text>
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip label="Filled Primary" type="filled" intent="primary" />
           <Chip label="Filled Success" type="filled" intent="success" />
           <Chip label="Filled Error" type="filled" intent="error" />
         </View>
 
-        <Text size="md" weight="semibold">Outlined</Text>
+        <Text typography="subtitle1">Outlined</Text>
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip label="Outlined Primary" type="outlined" intent="primary" />
           <Chip label="Outlined Success" type="outlined" intent="success" />
           <Chip label="Outlined Error" type="outlined" intent="error" />
         </View>
 
-        <Text size="md" weight="semibold">Soft</Text>
+        <Text typography="subtitle1">Soft</Text>
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip label="Soft Primary" type="soft" intent="primary" />
           <Chip label="Soft Success" type="soft" intent="success" />
@@ -61,7 +61,7 @@ export const ChipExamples = () => {
         </View>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Sizes</Text>
+        <Text typography="h5">Sizes</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
           <Chip label="Small" size="sm" />
@@ -70,7 +70,7 @@ export const ChipExamples = () => {
         </View>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">With Icons</Text>
+        <Text typography="h5">With Icons</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip label="Star" icon="star" />
@@ -80,7 +80,7 @@ export const ChipExamples = () => {
         </View>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Deletable Chips</Text>
+        <Text typography="h5">Deletable Chips</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           {tags.map(tag => (
@@ -94,10 +94,10 @@ export const ChipExamples = () => {
             />
           ))}
         </View>
-        <Text size="sm" color="secondary">Click the X to remove tags</Text>
+        <Text typography="caption" color="secondary">Click the X to remove tags</Text>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Selectable Chips</Text>
+        <Text typography="h5">Selectable Chips</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           {['Option 1', 'Option 2', 'Option 3', 'Option 4'].map(option => (
@@ -112,12 +112,12 @@ export const ChipExamples = () => {
             />
           ))}
         </View>
-        <Text size="sm" color="secondary">
+        <Text typography="caption" color="secondary">
           Selected: {Array.from(selectedChips).join(', ') || 'None'}
         </Text>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Clickable Chips</Text>
+        <Text typography="h5">Clickable Chips</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip
@@ -134,7 +134,7 @@ export const ChipExamples = () => {
         </View>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Disabled State</Text>
+        <Text typography="h5">Disabled State</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip label="Disabled" disabled />
@@ -144,7 +144,7 @@ export const ChipExamples = () => {
         </View>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Filter Example</Text>
+        <Text typography="h5">Filter Example</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip
@@ -182,7 +182,7 @@ export const ChipExamples = () => {
         </View>
 
         <Divider spacing="md" />
-        <Text size="lg" weight="semibold">Category Tags</Text>
+        <Text typography="h5">Category Tags</Text>
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip label="Design" type="soft" intent="primary" size="sm" />

package/src/examples/DialogExamples.tsx

@@ -9,14 +9,14 @@ export const DialogExamples = () => {
 
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-        <Text size="lg" weight="bold" align="center">
+      <View gap="xl">
+        <Text typography="h4" align="center">
           Dialog Examples
         </Text>
         
         {/* Basic Dialog */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Basic Dialog</Text>
+        <View gap="md">
+          <Text typography="subtitle1">Basic Dialog</Text>
           <Button onPress={() => setBasicOpen(true)}>
             Open Basic Dialog
           </Button>
@@ -26,7 +26,7 @@ export const DialogExamples = () => {
             title="Basic Dialog"
           >
             <Text>This is a basic dialog with a title and some content.</Text>
-            <View spacing="md" style={{ marginTop: 16 }}>
+            <View gap="md" style={{ marginTop: 16 }}>
               <Button 
                 type="contained" 
                 intent="primary"
@@ -39,8 +39,8 @@ export const DialogExamples = () => {
         </View>
 
         {/* Dialog Variants */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Dialog Variants</Text>
+        <View gap="md">
+          <Text typography="subtitle1">Dialog Variants</Text>
           <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
             <Button onPress={() => setAlertOpen(true)}>
               Alert Dialog
@@ -58,7 +58,7 @@ export const DialogExamples = () => {
             type="alert"
           >
             <Text>This is an alert dialog. It has a top border to indicate importance.</Text>
-            <View spacing="md" style={{ marginTop: 16 }}>
+            <View gap="md" style={{ marginTop: 16 }}>
               <Button 
                 type="contained" 
                 intent="primary"
@@ -98,8 +98,8 @@ export const DialogExamples = () => {
         </View>
 
         {/* Dialog Sizes */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Dialog Sizes</Text>
+        <View gap="md">
+          <Text typography="subtitle1">Dialog Sizes</Text>
           <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
             {['sm', 'md', 'lg'].map((size) => (
               <Button
@@ -121,7 +121,7 @@ export const DialogExamples = () => {
               <Text>
                 This is a {sizesOpen} dialog. The width and maximum width are adjusted based on the size prop.
               </Text>
-              <View spacing="md" style={{ marginTop: 16 }}>
+              <View gap="md" style={{ marginTop: 16 }}>
                 <Button 
                   type="contained" 
                   intent="primary"
@@ -136,18 +136,18 @@ export const DialogExamples = () => {
 
 
         {/* Dialog Options */}
-        <View spacing="md">
-          <Text size="md" weight="semibold">Dialog Options</Text>
-          <Text size="sm" color="secondary">
+        <View gap="md">
+          <Text typography="subtitle1">Dialog Options</Text>
+          <Text typography="caption" color="secondary">
             • Close on backdrop click: Enabled by default, disabled for confirmation dialog above
           </Text>
-          <Text size="sm" color="secondary">
+          <Text typography="caption" color="secondary">
             • Close on escape key: Enabled by default (web only)
           </Text>
-          <Text size="sm" color="secondary">
+          <Text typography="caption" color="secondary">
             • Hardware back button: Handled automatically (native only)
           </Text>
-          <Text size="sm" color="secondary">
+          <Text typography="caption" color="secondary">
             • Focus management: Automatic focus trapping and restoration (web only)
           </Text>
         </View>

package/src/examples/DividerExamples.tsx

@@ -4,14 +4,14 @@ import { Screen, View, Text, Divider, Card } from '../index';
 export const DividerExamples = () => {
   return (
     <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="lg" weight="bold" align="center">
+      <View gap="xl">
+      <Text typography="h4" align="center">
         Divider Examples
       </Text>
       
       {/* Horizontal Dividers */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Horizontal Dividers</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Horizontal Dividers</Text>
         <View style={{ gap: 10 }}>
           <Card type="outlined" padding="md">
             <Text>Content above</Text>
@@ -32,8 +32,8 @@ export const DividerExamples = () => {
       </View>
 
       {/* Divider Variants */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Variants</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Variants</Text>
         <View style={{ gap: 10 }}>
           <Card type="outlined" padding="md">
             <Text>Solid divider</Text>
@@ -54,8 +54,8 @@ export const DividerExamples = () => {
       </View>
 
       {/* Divider Thickness */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Thickness</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Thickness</Text>
         <View style={{ gap: 10 }}>
           <Card type="outlined" padding="md">
             <Text>Thin divider</Text>
@@ -76,8 +76,8 @@ export const DividerExamples = () => {
       </View>
 
       {/* Divider Intents */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Intents</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Intents</Text>
         <View style={{ gap: 10 }}>
           <Card type="outlined" padding="md">
             <Text>Primary divider</Text>
@@ -124,12 +124,12 @@ export const DividerExamples = () => {
       </View>
 
       {/* Divider Spacing */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Spacing</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Spacing</Text>
         <View style={{ gap: 10 }}>
           <Card type="outlined" padding="md">
             <Text>No spacing</Text>
-            <Divider spacing="none" />
+            <Divider  />
             <Text>Content immediately after</Text>
           </Card>
           
@@ -154,13 +154,13 @@ export const DividerExamples = () => {
       </View>
 
       {/* Divider with Content */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">With Content</Text>
+      <View gap="md">
+        <Text typography="subtitle1">With Content</Text>
         <View style={{ gap: 10 }}>
           <Card type="outlined" padding="md">
             <Text>Content above</Text>
             <Divider spacing="md">
-              <Text size="sm" color="secondary">OR</Text>
+              <Text typography="caption" color="secondary">OR</Text>
             </Divider>
             <Text>Content below</Text>
           </Card>
@@ -168,7 +168,7 @@ export const DividerExamples = () => {
           <Card type="outlined" padding="md">
             <Text>Content above</Text>
             <Divider spacing="md" intent="primary">
-              <Text size="sm" color="primary" weight="semibold">SECTION</Text>
+              <Text typography="subtitle2" color="primary">SECTION</Text>
             </Divider>
             <Text>Content below</Text>
           </Card>
@@ -176,8 +176,8 @@ export const DividerExamples = () => {
       </View>
 
       {/* Vertical Dividers */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Vertical Dividers</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Vertical Dividers</Text>
         <Card type="outlined" padding="md">
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
             <Text>Left</Text>
@@ -190,8 +190,8 @@ export const DividerExamples = () => {
       </View>
 
       {/* Custom Length */}
-      <View spacing="md">
-        <Text size="md" weight="semibold">Custom Length</Text>
+      <View gap="md">
+        <Text typography="subtitle1">Custom Length</Text>
         <View style={{ gap: 10 }}>
           <Card type="outlined" padding="md">
             <Text>Auto length</Text>