@idealyst/mcp-server 1.2.28 → 1.2.30

package/examples/components/TabBar.examples.tsx

@@ -90,7 +90,7 @@ export function TabBarWithDisabledItems() {
   return (
     <View spacing="md">
       <TabBar items={items} value={value} onChange={setValue} />
-      <Text size="sm" >
+      <Text typography="body2">
         Explore and Settings tabs are disabled
       </Text>
     </View>
@@ -151,7 +151,7 @@ export function TabBarWithContent() {
       <View background="primary" spacing="lg" radius="md">
         {value === 'overview' && (
           <View spacing="sm">
-            <Text size="lg" weight="bold">
+            <Text typography="subtitle1" weight="bold">
               Overview
             </Text>
             <Text>This is the overview content section.</Text>
@@ -159,7 +159,7 @@ export function TabBarWithContent() {
         )}
         {value === 'details' && (
           <View spacing="sm">
-            <Text size="lg" weight="bold">
+            <Text typography="subtitle1" weight="bold">
               Details
             </Text>
             <Text>This is the details content section.</Text>
@@ -167,7 +167,7 @@ export function TabBarWithContent() {
         )}
         {value === 'reviews' && (
           <View spacing="sm">
-            <Text size="lg" weight="bold">
+            <Text typography="subtitle1" weight="bold">
               Reviews
             </Text>
             <Text>This is the reviews content section.</Text>
@@ -189,7 +189,7 @@ export function TabBarWithDefaultValue() {
   return (
     <View spacing="md">
       <TabBar items={items} defaultValue="messages" />
-      <Text size="sm" >
+      <Text typography="body2">
         Default value is set to "messages"
       </Text>
     </View>
@@ -218,7 +218,7 @@ export function NavigationTabBar() {
       />
       <View background="primary" spacing="md" radius="md">
         <Text weight="bold">{activeTab.charAt(0).toUpperCase() + activeTab.slice(1)} Screen</Text>
-        <Text size="sm" >
+        <Text typography="body2">
           Content for {activeTab} goes here
         </Text>
       </View>
@@ -240,10 +240,10 @@ export function SettingsTabBar() {
   return (
     <View spacing="lg">
       <View spacing="sm">
-        <Text size="xl" weight="bold">
+        <Text typography="h5" weight="bold">
           Settings
         </Text>
-        <Text size="sm" >
+        <Text typography="body2">
           Manage your account settings
         </Text>
       </View>
@@ -254,7 +254,7 @@ export function SettingsTabBar() {
         onChange={setSection}
       />
       <View spacing="md">
-        <Text weight="semibold" size="lg">
+        <Text weight="semibold" typography="subtitle1">
           {section.charAt(0).toUpperCase() + section.slice(1)} Settings
         </Text>
         <Text>Configure your {section} preferences here.</Text>
@@ -277,7 +277,7 @@ export function DashboardTabBar() {
   return (
     <View spacing="lg">
       <View spacing="md">
-        <Text size="xl" weight="bold">
+        <Text typography="h5" weight="bold">
           Analytics Dashboard
         </Text>
         <TabBar
@@ -289,7 +289,7 @@ export function DashboardTabBar() {
         />
       </View>
       <View background="primary" spacing="lg" radius="lg">
-        <Text size="lg" weight="semibold">
+        <Text typography="subtitle1" weight="semibold">
           Statistics for: {period.charAt(0).toUpperCase() + period.slice(1)}
         </Text>
         <View spacing="sm">
@@ -316,10 +316,10 @@ export function ProductDetailsTabBar() {
   return (
     <View spacing="lg">
       <View spacing="md">
-        <Text size="xl" weight="bold">
+        <Text typography="h5" weight="bold">
           Product Name
         </Text>
-        <Text size="lg" >
+        <Text typography="subtitle1">
           $99.99
         </Text>
       </View>

package/examples/components/Text.examples.tsx

@@ -17,10 +17,10 @@ export function BasicText() {
 export function TextSizes() {
   return (
     <View spacing="md">
-      <Text size="sm">Small text</Text>
-      <Text size="md">Medium text</Text>
-      <Text size="lg">Large text</Text>
-      <Text size="xl">Extra large text</Text>
+      <Text typography="body2">Small text</Text>
+      <Text typography="body1">Medium text</Text>
+      <Text typography="subtitle1">Large text</Text>
+      <Text typography="h5">Extra large text</Text>
     </View>
   );
 }
@@ -66,16 +66,16 @@ export function TextWithColor() {
 export function CombinedTextStyles() {
   return (
     <View spacing="md">
-      <Text size="xl" weight="bold" >
+      <Text typography="h5" weight="bold">
         Heading 1
       </Text>
-      <Text size="lg" weight="semibold" >
+      <Text typography="subtitle1" weight="semibold">
         Heading 2
       </Text>
-      <Text size="md" weight="medium" >
+      <Text typography="body1" weight="medium">
         Subheading
       </Text>
-      <Text size="sm" weight="normal" >
+      <Text typography="body2" weight="normal">
         Body text
       </Text>
     </View>
@@ -86,14 +86,14 @@ export function CombinedTextStyles() {
 export function ParagraphText() {
   return (
     <View spacing="md">
-      <Text size="lg" weight="bold" >
+      <Text typography="subtitle1" weight="bold">
         Article Title
       </Text>
-      <Text size="md" >
+      <Text typography="body1">
         This is a paragraph of text that demonstrates how the Text component can be used for
         longer content. It maintains good readability with appropriate sizing and spacing.
       </Text>
-      <Text size="md" >
+      <Text typography="body1">
         You can create multiple paragraphs by using multiple Text components, each with their own
         styling and configuration.
       </Text>
@@ -106,26 +106,26 @@ export function LabelsAndDescriptions() {
   return (
     <View spacing="lg">
       <View spacing="xs">
-        <Text size="sm" weight="semibold" >
+        <Text typography="body2" weight="semibold">
           Username
         </Text>
-        <Text size="md" >
+        <Text typography="body1">
           johndoe
         </Text>
       </View>
       <View spacing="xs">
-        <Text size="sm" weight="semibold" >
+        <Text typography="body2" weight="semibold">
           Email
         </Text>
-        <Text size="md" >
+        <Text typography="body1">
           john.doe@example.com
         </Text>
       </View>
       <View spacing="xs">
-        <Text size="sm" weight="semibold" >
+        <Text typography="body2" weight="semibold">
           Status
         </Text>
-        <Text size="md"  weight="medium">
+        <Text typography="body1" weight="medium">
           Active
         </Text>
       </View>
@@ -137,16 +137,16 @@ export function LabelsAndDescriptions() {
 export function StatusMessages() {
   return (
     <View spacing="md">
-      <Text size="sm"  weight="medium">
+      <Text typography="body2" weight="medium">
         ✓ Form submitted successfully
       </Text>
-      <Text size="sm"  weight="medium">
+      <Text typography="body2" weight="medium">
         ✗ Please fill out all required fields
       </Text>
-      <Text size="sm"  weight="medium">
+      <Text typography="body2" weight="medium">
         ℹ Your changes have been saved
       </Text>
-      <Text size="sm"  weight="medium">
+      <Text typography="body2" weight="medium">
         ⚠ This action cannot be undone
       </Text>
     </View>
@@ -157,19 +157,19 @@ export function StatusMessages() {
 export function TypographyHierarchy() {
   return (
     <View spacing="lg">
-      <Text size="xl" weight="bold" >
+      <Text typography="h5" weight="bold">
         Page Title
       </Text>
-      <Text size="lg" weight="semibold" >
+      <Text typography="subtitle1" weight="semibold">
         Section Heading
       </Text>
-      <Text size="md" weight="medium" >
+      <Text typography="body1" weight="medium">
         Subsection Title
       </Text>
-      <Text size="md" >
+      <Text typography="body1">
         Body text content goes here with regular weight and medium size for optimal readability.
       </Text>
-      <Text size="sm" >
+      <Text typography="body2">
         Small print or supplementary information can use smaller text size.
       </Text>
     </View>

package/examples/components/{Input.examples.tsx → TextInput.examples.tsx}

@@ -1,19 +1,19 @@
 /**
- * Input Component Examples
+ * TextInput Component Examples
  *
- * These examples are type-checked against the actual InputProps interface
+ * These examples are type-checked against the actual TextInputProps interface
  * to ensure accuracy and correctness.
  */
 
 import React from 'react';
-import { Input, View } from '@idealyst/components';
+import { TextInput, View } from '@idealyst/components';
 
-// Example 1: Basic Input
-export function BasicInput() {
+// Example 1: Basic TextInput
+export function BasicTextInput() {
   const [value, setValue] = React.useState('');
 
   return (
-    <Input
+    <TextInput
       value={value}
       onChangeText={setValue}
       placeholder="Enter text..."
@@ -21,53 +21,53 @@ export function BasicInput() {
   );
 }
 
-// Example 2: Input Types
-export function InputTypes() {
+// Example 2: TextInput Types
+export function TextInputTypes() {
   const [value, setValue] = React.useState('');
 
   return (
     <View spacing="md">
-      <Input type="outlined" value={value} onChangeText={setValue} placeholder="Outlined" />
-      <Input type="filled" value={value} onChangeText={setValue} placeholder="Filled" />
-      <Input type="bare" value={value} onChangeText={setValue} placeholder="Bare" />
+      <TextInput type="outlined" value={value} onChangeText={setValue} placeholder="Outlined" />
+      <TextInput type="filled" value={value} onChangeText={setValue} placeholder="Filled" />
+      <TextInput type="bare" value={value} onChangeText={setValue} placeholder="Bare" />
     </View>
   );
 }
 
-// Example 3: Input Sizes
-export function InputSizes() {
+// Example 3: TextInput Sizes
+export function TextInputSizes() {
   const [value, setValue] = React.useState('');
 
   return (
     <View spacing="md">
-      <Input size="xs" value={value} onChangeText={setValue} placeholder="Extra Small" />
-      <Input size="sm" value={value} onChangeText={setValue} placeholder="Small" />
-      <Input size="md" value={value} onChangeText={setValue} placeholder="Medium" />
-      <Input size="lg" value={value} onChangeText={setValue} placeholder="Large" />
-      <Input size="xl" value={value} onChangeText={setValue} placeholder="Extra Large" />
+      <TextInput size="xs" value={value} onChangeText={setValue} placeholder="Extra Small" />
+      <TextInput size="sm" value={value} onChangeText={setValue} placeholder="Small" />
+      <TextInput size="md" value={value} onChangeText={setValue} placeholder="Medium" />
+      <TextInput size="lg" value={value} onChangeText={setValue} placeholder="Large" />
+      <TextInput size="xl" value={value} onChangeText={setValue} placeholder="Extra Large" />
     </View>
   );
 }
 
-// Example 4: Input with Icons
-export function InputWithIcons() {
+// Example 4: TextInput with Icons
+export function TextInputWithIcons() {
   const [value, setValue] = React.useState('');
 
   return (
     <View spacing="md">
-      <Input
+      <TextInput
         leftIcon="magnify"
         value={value}
         onChangeText={setValue}
         placeholder="Search..."
       />
-      <Input
+      <TextInput
         rightIcon="email"
         value={value}
         onChangeText={setValue}
         placeholder="Email address"
       />
-      <Input
+      <TextInput
         leftIcon="account"
         rightIcon="check"
         value={value}
@@ -78,8 +78,8 @@ export function InputWithIcons() {
   );
 }
 
-// Example 5: Input Types (inputType)
-export function InputInputTypes() {
+// Example 5: TextInput Modes (inputMode - React Native only)
+export function TextInputModes() {
   const [text, setText] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [password, setPassword] = React.useState('');
@@ -87,29 +87,29 @@ export function InputInputTypes() {
 
   return (
     <View spacing="md">
-      <Input
-        inputType="text"
+      <TextInput
+        inputMode="text"
         value={text}
         onChangeText={setText}
         placeholder="Text input"
       />
-      <Input
-        inputType="email"
+      <TextInput
+        inputMode="email"
         leftIcon="email"
         value={email}
         onChangeText={setEmail}
         placeholder="Email address"
       />
-      <Input
-        inputType="password"
+      <TextInput
+        inputMode="password"
         leftIcon="lock"
         value={password}
         onChangeText={setPassword}
         placeholder="Password"
         showPasswordToggle
       />
-      <Input
-        inputType="number"
+      <TextInput
+        inputMode="number"
         value={number}
         onChangeText={setNumber}
         placeholder="Enter number"
@@ -118,30 +118,30 @@ export function InputInputTypes() {
   );
 }
 
-// Example 6: Input States
-export function InputStates() {
+// Example 6: TextInput States
+export function TextInputStates() {
   const [value, setValue] = React.useState('');
 
   return (
     <View spacing="md">
-      <Input
+      <TextInput
         value={value}
         onChangeText={setValue}
         placeholder="Normal state"
       />
-      <Input
+      <TextInput
         value={value}
         onChangeText={setValue}
         placeholder="Disabled"
         disabled
       />
-      <Input
+      <TextInput
         value={value}
         onChangeText={setValue}
         placeholder="Error state"
         hasError
       />
-      <Input
+      <TextInput
         value={value}
         onChangeText={setValue}
         placeholder="Primary intent"
@@ -151,13 +151,13 @@ export function InputStates() {
   );
 }
 
-// Example 7: Password Input
-export function PasswordInput() {
+// Example 7: Password TextInput
+export function PasswordTextInput() {
   const [password, setPassword] = React.useState('');
 
   return (
-    <Input
-      inputType="password"
+    <TextInput
+      inputMode="password"
       leftIcon="lock"
       value={password}
       onChangeText={setPassword}
@@ -181,8 +181,8 @@ export function FormWithValidation() {
 
   return (
     <View spacing="md">
-      <Input
-        inputType="email"
+      <TextInput
+        inputMode="email"
         leftIcon="email"
         value={email}
         onChangeText={(value) => {
@@ -192,8 +192,8 @@ export function FormWithValidation() {
         placeholder="Email"
         hasError={emailError}
       />
-      <Input
-        inputType="password"
+      <TextInput
+        inputMode="password"
         leftIcon="lock"
         value={password}
         onChangeText={setPassword}

package/examples/components/Tooltip.examples.tsx

@@ -72,8 +72,8 @@ export function TooltipWithIntent() {
       <Tooltip content="Success tooltip" intent="success">
         <Button intent="success">Success</Button>
       </Tooltip>
-      <Tooltip content="Error tooltip" intent="error">
-        <Button intent="error">Error</Button>
+      <Tooltip content="Error tooltip" intent="danger">
+        <Button intent="danger">Error</Button>
       </Tooltip>
       <Tooltip content="Warning tooltip" intent="warning">
         <Button intent="warning">Warning</Button>
@@ -149,13 +149,13 @@ export function TooltipOnText() {
 export function TooltipWithRichContent() {
   const richContent = (
     <View spacing="xs">
-      <Text weight="bold" size="sm" >
+      <Text weight="bold" typography="body2">
         User Information
       </Text>
-      <Text size="sm" >
+      <Text typography="body2">
         John Doe
       </Text>
-      <Text size="sm" >
+      <Text typography="body2">
         john@example.com
       </Text>
     </View>
@@ -192,7 +192,7 @@ export function HelpTooltips() {
             <Icon name="help-circle" size="sm"  style={{ cursor: 'pointer' }} />
           </Tooltip>
         </View>
-        <Text size="sm" >
+        <Text typography="body2">
           Placeholder for input
         </Text>
       </View>
@@ -204,7 +204,7 @@ export function HelpTooltips() {
             <Icon name="help-circle" size="sm"  style={{ cursor: 'pointer' }} />
           </Tooltip>
         </View>
-        <Text size="sm" >
+        <Text typography="body2">
           Placeholder for input
         </Text>
       </View>
@@ -216,7 +216,7 @@ export function HelpTooltips() {
             <Icon name="help-circle" size="sm"  style={{ cursor: 'pointer' }} />
           </Tooltip>
         </View>
-        <Text size="sm" >
+        <Text typography="body2">
           Placeholder for input
         </Text>
       </View>
@@ -234,7 +234,7 @@ export function ActionTooltips() {
         </Button>
       </Tooltip>
       <Tooltip content="Discard changes" placement="top">
-        <Button size="sm" intent="error">
+        <Button size="sm" intent="danger">
           <Icon name="close" />
         </Button>
       </Tooltip>
@@ -282,10 +282,10 @@ export function StatusTooltips() {
 export function KeyboardShortcutTooltips() {
   const shortcutContent = (name: string, shortcut: string) => (
     <View spacing="xs">
-      <Text size="sm" >
+      <Text typography="body2">
         {name}
       </Text>
-      <Text size="sm" >
+      <Text typography="body2">
         {shortcut}
       </Text>
     </View>

package/examples/components/View.examples.tsx

@@ -129,18 +129,18 @@ export function ViewWithCustomColors() {
   );
 }
 
-// Example 7: View with Custom Sizes
+// Example 7: View with Custom Sizes (using style prop)
 export function ViewWithCustomSizes() {
   return (
     <View spacing="md">
-      <View padding={8} borderRadius={4} backgroundColor="gray.100">
-        <Text>Custom padding: 8</Text>
+      <View style={{ padding: 8 }} borderRadius={4} backgroundColor="gray.100">
+        <Text>Custom padding: 8px</Text>
       </View>
-      <View padding={16} borderRadius={8} backgroundColor="gray.100">
-        <Text>Custom padding: 16</Text>
+      <View style={{ padding: 16 }} borderRadius={8} backgroundColor="gray.100">
+        <Text>Custom padding: 16px</Text>
       </View>
-      <View padding={24} borderRadius={12} backgroundColor="gray.100">
-        <Text>Custom padding: 24</Text>
+      <View style={{ padding: 24 }} borderRadius={12} backgroundColor="gray.100">
+        <Text>Custom padding: 24px</Text>
       </View>
     </View>
   );
@@ -150,7 +150,7 @@ export function ViewWithCustomSizes() {
 export function NestedViews() {
   return (
     <View spacing="lg" background="primary" radius="lg">
-      <Text weight="bold" size="lg">
+      <Text weight="bold" typography="subtitle1">
         Outer View
       </Text>
       <View spacing="md" background="secondary" radius="md">
@@ -173,10 +173,10 @@ export function CardLayout() {
         radius="lg"
         border="thin"
       >
-        <Text size="lg" weight="bold">
+        <Text typography="subtitle1" weight="bold">
           Card Title
         </Text>
-        <Text size="md" >
+        <Text typography="body1">
           This is a card-like layout created using the View component with background, spacing,
           radius, and border properties.
         </Text>
@@ -192,28 +192,28 @@ export function ViewWithMargin() {
       <View
         background="primary"
         spacing="md"
-        marginVariant="none"
+        margin="none"
       >
         <Text>No margin</Text>
       </View>
       <View
         background="primary"
         spacing="md"
-        marginVariant="sm"
+        margin="sm"
       >
         <Text>Small margin</Text>
       </View>
       <View
         background="primary"
         spacing="md"
-        marginVariant="md"
+        margin="md"
       >
         <Text>Medium margin</Text>
       </View>
       <View
         background="primary"
         spacing="md"
-        marginVariant="lg"
+        margin="lg"
       >
         <Text>Large margin</Text>
       </View>
@@ -231,18 +231,18 @@ export function ProfileCard() {
       border="thin"
     >
       <View spacing="md">
-        <Text size="xl" weight="bold">
+        <Text typography="h5" weight="bold">
           John Doe
         </Text>
-        <Text size="md" >
+        <Text typography="body1">
           Software Engineer
         </Text>
       </View>
       <View spacing="sm">
-        <Text size="sm" >
+        <Text typography="body2">
           Email: john.doe@example.com
         </Text>
-        <Text size="sm" >
+        <Text typography="body2">
           Location: San Francisco, CA
         </Text>
       </View>
@@ -262,7 +262,7 @@ export function DashboardGrid() {
           border="thin"
         >
           <Text weight="semibold">Card 1</Text>
-          <Text size="sm" >
+          <Text typography="body2">
             Content goes here
           </Text>
         </View>
@@ -273,7 +273,7 @@ export function DashboardGrid() {
           border="thin"
         >
           <Text weight="semibold">Card 2</Text>
-          <Text size="sm" >
+          <Text typography="body2">
             Content goes here
           </Text>
         </View>
@@ -286,7 +286,7 @@ export function DashboardGrid() {
           border="thin"
         >
           <Text weight="semibold">Card 3</Text>
-          <Text size="sm" >
+          <Text typography="body2">
             Content goes here
           </Text>
         </View>
@@ -297,7 +297,7 @@ export function DashboardGrid() {
           border="thin"
         >
           <Text weight="semibold">Card 4</Text>
-          <Text size="sm" >
+          <Text typography="body2">
             Content goes here
           </Text>
         </View>