@idealyst/mcp-server 1.2.28 → 1.2.30

package/examples/components/Screen.examples.tsx

@@ -22,7 +22,7 @@ export function ScreenWithBackgrounds() {
   return (
     <Screen background="primary">
       <View spacing="md">
-        <Text size="lg" weight="bold">
+        <Text typography="subtitle1" weight="bold">
           Primary Surface Screen
         </Text>
         <Text>This screen has a primary surface background</Text>
@@ -36,7 +36,7 @@ export function ScreenWithPadding() {
   return (
     <Screen padding="md">
       <View spacing="md">
-        <Text size="lg" weight="bold">
+        <Text typography="subtitle1" weight="bold">
           Padded Screen
         </Text>
         <Text>This screen has medium padding around all edges</Text>
@@ -50,7 +50,7 @@ export function ScreenWithSafeArea() {
   return (
     <Screen safeArea padding="md">
       <View spacing="md">
-        <Text size="lg" weight="bold">
+        <Text typography="subtitle1" weight="bold">
           Safe Area Screen
         </Text>
         <Text>
@@ -66,7 +66,7 @@ export function ScrollableScreen() {
   return (
     <Screen scrollable padding="md">
       <View spacing="md">
-        <Text size="xl" weight="bold">
+        <Text typography="h5" weight="bold">
           Scrollable Content
         </Text>
         {Array.from({ length: 20 }, (_, i) => (
@@ -77,7 +77,7 @@ export function ScrollableScreen() {
             radius="md"
           >
             <Text weight="semibold">Item {i + 1}</Text>
-            <Text size="sm" >
+            <Text typography="body2">
               This is a scrollable item. Add enough items to see scrolling behavior.
             </Text>
           </View>
@@ -95,7 +95,7 @@ export function ScreenWithContentInset() {
       contentInset={{ top: 20, bottom: 20, left: 16, right: 16 }}
     >
       <View spacing="md">
-        <Text size="lg" weight="bold">
+        <Text typography="subtitle1" weight="bold">
           Screen with Content Inset
         </Text>
         <Text>
@@ -122,10 +122,10 @@ export function ProfileScreen() {
     <Screen background="secondary" padding="md" safeArea>
       <View spacing="lg">
         <View spacing="md">
-          <Text size="xl" weight="bold">
+          <Text typography="h5" weight="bold">
             John Doe
           </Text>
-          <Text size="md" >
+          <Text typography="body1">
             john.doe@example.com
           </Text>
         </View>
@@ -137,10 +137,10 @@ export function ProfileScreen() {
         >
           <Text weight="semibold">Account Information</Text>
           <View spacing="sm">
-            <Text size="sm" >
+            <Text typography="body2">
               Member since: January 2024
             </Text>
-            <Text size="sm" >
+            <Text typography="body2">
               Status: Active
             </Text>
           </View>
@@ -153,9 +153,9 @@ export function ProfileScreen() {
         >
           <Text weight="semibold">Settings</Text>
           <View spacing="sm">
-            <Text size="sm">Notifications</Text>
-            <Text size="sm">Privacy</Text>
-            <Text size="sm">Security</Text>
+            <Text typography="body2">Notifications</Text>
+            <Text typography="body2">Privacy</Text>
+            <Text typography="body2">Security</Text>
           </View>
         </View>
       </View>
@@ -168,7 +168,7 @@ export function DashboardScreen() {
   return (
     <Screen background="secondary" padding="lg" safeArea scrollable>
       <View spacing="lg">
-        <Text size="xl" weight="bold">
+        <Text typography="h5" weight="bold">
           Dashboard
         </Text>
 
@@ -178,23 +178,23 @@ export function DashboardScreen() {
             spacing="lg"
             radius="lg"
           >
-            <Text weight="semibold" size="lg">
+            <Text weight="semibold" typography="subtitle1">
               Stats Overview
             </Text>
             <View spacing="md">
               <View spacing="xs">
-                <Text size="sm" >
+                <Text typography="body2">
                   Total Users
                 </Text>
-                <Text size="xl" weight="bold">
+                <Text typography="h5" weight="bold">
                   1,234
                 </Text>
               </View>
               <View spacing="xs">
-                <Text size="sm" >
+                <Text typography="body2">
                   Revenue
                 </Text>
-                <Text size="xl" weight="bold">
+                <Text typography="h5" weight="bold">
                   $45,678
                 </Text>
               </View>
@@ -206,13 +206,13 @@ export function DashboardScreen() {
             spacing="lg"
             radius="lg"
           >
-            <Text weight="semibold" size="lg">
+            <Text weight="semibold" typography="subtitle1">
               Recent Activity
             </Text>
             <View spacing="sm">
-              <Text size="sm">New user registered</Text>
-              <Text size="sm">Payment received</Text>
-              <Text size="sm">Order completed</Text>
+              <Text typography="body2">New user registered</Text>
+              <Text typography="body2">Payment received</Text>
+              <Text typography="body2">Order completed</Text>
             </View>
           </View>
         </View>
@@ -227,17 +227,17 @@ export function FormScreen() {
     <Screen background="secondary" padding="md" safeArea scrollable>
       <View spacing="lg">
         <View spacing="sm">
-          <Text size="xl" weight="bold">
+          <Text typography="h5" weight="bold">
             Create Account
           </Text>
-          <Text size="md" >
+          <Text typography="body1">
             Fill in your information below
           </Text>
         </View>
 
         <View spacing="md">
           <View spacing="xs">
-            <Text size="sm" weight="semibold">
+            <Text typography="body2" weight="semibold">
               Full Name
             </Text>
             <View
@@ -246,14 +246,14 @@ export function FormScreen() {
               radius="md"
               border="thin"
             >
-              <Text size="sm" >
+              <Text typography="body2">
                 Enter your full name
               </Text>
             </View>
           </View>
 
           <View spacing="xs">
-            <Text size="sm" weight="semibold">
+            <Text typography="body2" weight="semibold">
               Email
             </Text>
             <View
@@ -262,14 +262,14 @@ export function FormScreen() {
               radius="md"
               border="thin"
             >
-              <Text size="sm" >
+              <Text typography="body2">
                 Enter your email
               </Text>
             </View>
           </View>
 
           <View spacing="xs">
-            <Text size="sm" weight="semibold">
+            <Text typography="body2" weight="semibold">
               Password
             </Text>
             <View
@@ -278,7 +278,7 @@ export function FormScreen() {
               radius="md"
               border="thin"
             >
-              <Text size="sm" >
+              <Text typography="body2">
                 Enter your password
               </Text>
             </View>
@@ -295,13 +295,13 @@ export function FormScreen() {
 export function SettingsScreen() {
   return (
     <Screen background="secondary" padding="none" safeArea scrollable>
-      <View spacing="lg" marginVariant="md">
-        <Text size="xl" weight="bold">
+      <View spacing="lg" margin="md">
+        <Text typography="h5" weight="bold">
           Settings
         </Text>
 
         <View spacing="xs">
-          <Text size="sm" weight="semibold" >
+          <Text typography="body2" weight="semibold">
             ACCOUNT
           </Text>
           <View
@@ -322,7 +322,7 @@ export function SettingsScreen() {
         </View>
 
         <View spacing="xs">
-          <Text size="sm" weight="semibold" >
+          <Text typography="body2" weight="semibold">
             PREFERENCES
           </Text>
           <View

package/examples/components/Select.examples.tsx

@@ -33,7 +33,7 @@ export function BasicSelect() {
     <Select
       options={fruitOptions}
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       placeholder="Select a fruit"
     />
   );
@@ -49,14 +49,14 @@ export function SelectTypes() {
         type="outlined"
         options={fruitOptions}
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         placeholder="Outlined"
       />
       <Select
         type="filled"
         options={fruitOptions}
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         placeholder="Filled"
       />
     </View>
@@ -73,35 +73,35 @@ export function SelectSizes() {
         size="xs"
         options={fruitOptions}
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         placeholder="Extra Small"
       />
       <Select
         size="sm"
         options={fruitOptions}
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         placeholder="Small"
       />
       <Select
         size="md"
         options={fruitOptions}
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         placeholder="Medium"
       />
       <Select
         size="lg"
         options={fruitOptions}
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         placeholder="Large"
       />
       <Select
         size="xl"
         options={fruitOptions}
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         placeholder="Extra Large"
       />
     </View>
@@ -117,7 +117,7 @@ export function SelectWithLabel() {
       label="Country"
       options={countryOptions}
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       placeholder="Select your country"
     />
   );
@@ -132,7 +132,7 @@ export function SelectWithHelperText() {
       label="Shipping Country"
       options={countryOptions}
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       placeholder="Select country"
       helperText="Choose where you want your order shipped"
     />
@@ -152,7 +152,7 @@ export function SelectWithError() {
         label="Country *"
         options={countryOptions}
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         placeholder="Select country"
         error={hasError}
         helperText={hasError ? 'Please select a country' : 'Required field'}
@@ -167,7 +167,7 @@ export function DisabledSelect() {
     <Select
       options={fruitOptions}
       value="apple"
-      onValueChange={() => {}}
+      onChange={() => {}}
       placeholder="Select a fruit"
       disabled
     />
@@ -205,7 +205,7 @@ export function SearchableSelect() {
       label="Country"
       options={largeOptions}
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       placeholder="Search for a country..."
       searchable
       maxHeight={300}
@@ -230,7 +230,7 @@ export function SelectWithDisabledOptions() {
       label="Select a fruit"
       options={optionsWithDisabled}
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       placeholder="Some options are disabled"
       helperText="Banana and Grape are out of stock"
     />
@@ -257,21 +257,21 @@ export function FormWithSelects() {
         label="Country"
         options={countryOptions}
         value={country}
-        onValueChange={setCountry}
+        onChange={setCountry}
         placeholder="Select country"
       />
       <Select
         label="Favorite Fruit"
         options={fruitOptions}
         value={fruit}
-        onValueChange={setFruit}
+        onChange={setFruit}
         placeholder="Select fruit"
       />
       <Select
         label="Size"
         options={sizeOptions}
         value={size}
-        onValueChange={setSize}
+        onChange={setSize}
         placeholder="Select size"
       />
     </View>

package/examples/components/Skeleton.examples.tsx

@@ -196,7 +196,7 @@ export function LoadingStateToggle() {
           </View>
         ) : (
           <View spacing="md">
-            <Text size="lg" weight="bold">
+            <Text typography="subtitle1" weight="bold">
               Content Loaded
             </Text>
             <Text>

package/examples/components/Slider.examples.tsx

@@ -15,7 +15,7 @@ export function BasicSlider() {
   return (
     <Slider
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       min={0}
       max={100}
     />
@@ -29,7 +29,7 @@ export function SliderWithValue() {
   return (
     <Slider
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       min={0}
       max={100}
       showValue
@@ -44,7 +44,7 @@ export function SliderWithMinMax() {
   return (
     <Slider
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       min={0}
       max={100}
       showMinMax
@@ -62,7 +62,7 @@ export function SliderWithSteps() {
       <Text>Value: {value}</Text>
       <Slider
         value={value}
-        onValueChange={setValue}
+        onChange={setValue}
         min={0}
         max={100}
         step={10}
@@ -79,11 +79,11 @@ export function SliderSizes() {
 
   return (
     <View spacing="lg">
-      <Slider size="xs" value={value} onValueChange={setValue} min={0} max={100} showValue />
-      <Slider size="sm" value={value} onValueChange={setValue} min={0} max={100} showValue />
-      <Slider size="md" value={value} onValueChange={setValue} min={0} max={100} showValue />
-      <Slider size="lg" value={value} onValueChange={setValue} min={0} max={100} showValue />
-      <Slider size="xl" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider size="xs" value={value} onChange={setValue} min={0} max={100} showValue />
+      <Slider size="sm" value={value} onChange={setValue} min={0} max={100} showValue />
+      <Slider size="md" value={value} onChange={setValue} min={0} max={100} showValue />
+      <Slider size="lg" value={value} onChange={setValue} min={0} max={100} showValue />
+      <Slider size="xl" value={value} onChange={setValue} min={0} max={100} showValue />
     </View>
   );
 }
@@ -94,11 +94,11 @@ export function SliderIntents() {
 
   return (
     <View spacing="md">
-      <Slider intent="primary" value={value} onValueChange={setValue} min={0} max={100} showValue />
-      <Slider intent="success" value={value} onValueChange={setValue} min={0} max={100} showValue />
-      <Slider intent="error" value={value} onValueChange={setValue} min={0} max={100} showValue />
-      <Slider intent="warning" value={value} onValueChange={setValue} min={0} max={100} showValue />
-      <Slider intent="info" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider intent="primary" value={value} onChange={setValue} min={0} max={100} showValue />
+      <Slider intent="success" value={value} onChange={setValue} min={0} max={100} showValue />
+      <Slider intent="danger" value={value} onChange={setValue} min={0} max={100} showValue />
+      <Slider intent="warning" value={value} onChange={setValue} min={0} max={100} showValue />
+      <Slider intent="info" value={value} onChange={setValue} min={0} max={100} showValue />
     </View>
   );
 }
@@ -113,7 +113,7 @@ export function SliderWithIcon() {
       <Slider
         icon="volume-high"
         value={volume}
-        onValueChange={setVolume}
+        onChange={setVolume}
         min={0}
         max={100}
         showValue
@@ -137,7 +137,7 @@ export function SliderWithMarks() {
   return (
     <Slider
       value={value}
-      onValueChange={setValue}
+      onChange={setValue}
       min={0}
       max={100}
       marks={marks}
@@ -151,7 +151,7 @@ export function DisabledSlider() {
   return (
     <Slider
       value={60}
-      onValueChange={() => {}}
+      onChange={() => {}}
       min={0}
       max={100}
       disabled
@@ -171,7 +171,7 @@ export function PriceRangeSlider() {
       <Slider
         icon="currency-usd"
         value={price}
-        onValueChange={setPrice}
+        onChange={setPrice}
         min={0}
         max={1000}
         step={50}
@@ -193,7 +193,7 @@ export function BrightnessControl() {
       <Slider
         icon="brightness-6"
         value={brightness}
-        onValueChange={setBrightness}
+        onChange={setBrightness}
         min={0}
         max={100}
         step={5}
@@ -221,15 +221,15 @@ export function MultipleSliders() {
       <View spacing="md">
         <Slider
           value={red}
-          onValueChange={setRed}
+          onChange={setRed}
           min={0}
           max={255}
           showValue
-          intent="error"
+          intent="danger"
         />
         <Slider
           value={green}
-          onValueChange={setGreen}
+          onChange={setGreen}
           min={0}
           max={255}
           showValue
@@ -237,7 +237,7 @@ export function MultipleSliders() {
         />
         <Slider
           value={blue}
-          onValueChange={setBlue}
+          onChange={setBlue}
           min={0}
           max={255}
           showValue

package/examples/components/Switch.examples.tsx

@@ -13,7 +13,7 @@ export function BasicSwitch() {
   const [checked, setChecked] = React.useState(false);
 
   return (
-    <Switch checked={checked} onCheckedChange={setChecked} />
+    <Switch checked={checked} onChange={setChecked} />
   );
 }
 
@@ -23,11 +23,11 @@ export function SwitchSizes() {
 
   return (
     <>
-      <Switch checked={checked} onCheckedChange={setChecked} size="xs" />
-      <Switch checked={checked} onCheckedChange={setChecked} size="sm" />
-      <Switch checked={checked} onCheckedChange={setChecked} size="md" />
-      <Switch checked={checked} onCheckedChange={setChecked} size="lg" />
-      <Switch checked={checked} onCheckedChange={setChecked} size="xl" />
+      <Switch checked={checked} onChange={setChecked} size="xs" />
+      <Switch checked={checked} onChange={setChecked} size="sm" />
+      <Switch checked={checked} onChange={setChecked} size="md" />
+      <Switch checked={checked} onChange={setChecked} size="lg" />
+      <Switch checked={checked} onChange={setChecked} size="xl" />
     </>
   );
 }
@@ -38,11 +38,11 @@ export function SwitchIntents() {
 
   return (
     <>
-      <Switch checked={checked} onCheckedChange={setChecked} intent="primary" />
-      <Switch checked={checked} onCheckedChange={setChecked} intent="success" />
-      <Switch checked={checked} onCheckedChange={setChecked} intent="error" />
-      <Switch checked={checked} onCheckedChange={setChecked} intent="warning" />
-      <Switch checked={checked} onCheckedChange={setChecked} intent="info" />
+      <Switch checked={checked} onChange={setChecked} intent="primary" />
+      <Switch checked={checked} onChange={setChecked} intent="success" />
+      <Switch checked={checked} onChange={setChecked} intent="danger" />
+      <Switch checked={checked} onChange={setChecked} intent="warning" />
+      <Switch checked={checked} onChange={setChecked} intent="info" />
     </>
   );
 }
@@ -51,8 +51,8 @@ export function SwitchIntents() {
 export function DisabledSwitch() {
   return (
     <>
-      <Switch checked={false} onCheckedChange={() => {}} disabled />
-      <Switch checked={true} onCheckedChange={() => {}} disabled />
+      <Switch checked={false} onChange={() => {}} disabled />
+      <Switch checked={true} onChange={() => {}} disabled />
     </>
   );
 }
@@ -63,7 +63,7 @@ export function SwitchWithLabel() {
 
   return (
     <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center' }}>
-      <Switch checked={checked} onCheckedChange={setChecked} />
+      <Switch checked={checked} onChange={setChecked} />
       <Text>Enable notifications</Text>
     </View>
   );
@@ -79,15 +79,15 @@ export function FormWithSwitches() {
     <View spacing="md">
       <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
         <Text>Push Notifications</Text>
-        <Switch checked={notifications} onCheckedChange={setNotifications} />
+        <Switch checked={notifications} onChange={setNotifications} />
       </View>
       <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
         <Text>Email Updates</Text>
-        <Switch checked={emailUpdates} onCheckedChange={setEmailUpdates} />
+        <Switch checked={emailUpdates} onChange={setEmailUpdates} />
       </View>
       <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
         <Text>Dark Mode</Text>
-        <Switch checked={darkMode} onCheckedChange={setDarkMode} />
+        <Switch checked={darkMode} onChange={setDarkMode} />
       </View>
     </View>
   );