@idealyst/mcp-server 1.2.28 → 1.2.30

package/examples/components/Popover.examples.tsx

@@ -6,19 +6,19 @@
  */
 
 import React from 'react';
-import { Popover, View, Text, Button, Icon, Pressable } from '@idealyst/components';
+import { Popover, View, Text, Button, Icon, Pressable, IdealystElement } from '@idealyst/components';
 
 // Example 1: Basic Popover
 export function BasicPopover() {
   const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   return (
     <View spacing="md">
       <Button ref={anchorRef} onPress={() => setOpen(true)}>
         Open Popover
       </Button>
-      <Popover open={open} onOpenChange={setOpen} anchor={anchorRef as React.RefObject<Element>}>
+      <Popover open={open} onOpenChange={setOpen} anchor={anchorRef}>
         <View spacing="md" background="primary" radius="md">
           <Text>This is a basic popover content</Text>
         </View>
@@ -44,7 +44,7 @@ export function PopoverPlacements() {
     | 'right-end'
   >('bottom');
   const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   return (
     <View spacing="lg">
@@ -63,7 +63,7 @@ export function PopoverPlacements() {
         </Button>
       </View>
       <Button ref={anchorRef}>Anchor Element</Button>
-      <Popover open={open} onOpenChange={setOpen} anchor={anchorRef as React.RefObject<Element>} placement={placement}>
+      <Popover open={open} onOpenChange={setOpen} anchor={anchorRef} placement={placement}>
         <View spacing="md" background="primary" radius="md">
           <Text>Popover at {placement}</Text>
         </View>
@@ -75,14 +75,14 @@ export function PopoverPlacements() {
 // Example 3: Popover with Arrow
 export function PopoverWithArrow() {
   const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   return (
     <View spacing="md">
       <Button ref={anchorRef} onPress={() => setOpen(true)}>
         Open Popover with Arrow
       </Button>
-      <Popover open={open} onOpenChange={setOpen} anchor={anchorRef as React.RefObject<Element>} showArrow>
+      <Popover open={open} onOpenChange={setOpen} anchor={anchorRef} showArrow>
         <View spacing="md" background="primary" radius="md">
           <Text>This popover has an arrow pointing to the anchor</Text>
         </View>
@@ -94,14 +94,14 @@ export function PopoverWithArrow() {
 // Example 4: Popover with Offset
 export function PopoverWithOffset() {
   const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   return (
     <View spacing="md">
       <Button ref={anchorRef} onPress={() => setOpen(true)}>
         Open Popover
       </Button>
-      <Popover open={open} onOpenChange={setOpen} anchor={anchorRef as React.RefObject<Element>} offset={20} showArrow>
+      <Popover open={open} onOpenChange={setOpen} anchor={anchorRef} offset={20} showArrow>
         <View spacing="md" background="primary" radius="md">
           <Text>This popover has 20px offset from anchor</Text>
         </View>
@@ -114,8 +114,8 @@ export function PopoverWithOffset() {
 export function PopoverWithCloseBehaviors() {
   const [open1, setOpen1] = React.useState(false);
   const [open2, setOpen2] = React.useState(false);
-  const anchor1Ref = React.useRef<Element>(null);
-  const anchor2Ref = React.useRef<Element>(null);
+  const anchor1Ref = React.useRef<IdealystElement>(null);
+  const anchor2Ref = React.useRef<IdealystElement>(null);
 
   return (
     <View spacing="lg">
@@ -127,7 +127,7 @@ export function PopoverWithCloseBehaviors() {
         <Popover
           open={open1}
           onOpenChange={setOpen1}
-          anchor={anchor1Ref as React.RefObject<Element>}
+          anchor={anchor1Ref}
           closeOnClickOutside
         >
           <View spacing="md" background="primary" radius="md">
@@ -144,7 +144,7 @@ export function PopoverWithCloseBehaviors() {
         <Popover
           open={open2}
           onOpenChange={setOpen2}
-          anchor={anchor2Ref as React.RefObject<Element>}
+          anchor={anchor2Ref}
           closeOnClickOutside={false}
         >
           <View spacing="md" background="primary" radius="md">
@@ -164,7 +164,7 @@ export function PopoverWithForm() {
   const [open, setOpen] = React.useState(false);
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   const handleSubmit = () => {
     console.log('Submitted:', { name, email });
@@ -179,15 +179,15 @@ export function PopoverWithForm() {
       <Popover
         open={open}
         onOpenChange={setOpen}
-        anchor={anchorRef as React.RefObject<Element>}
+        anchor={anchorRef}
         placement="bottom-start"
         closeOnClickOutside={false}
       >
         <View spacing="lg" background="primary" radius="md">
           <Text weight="bold">Add New User</Text>
           <View spacing="sm">
-            <Text size="sm">Name (placeholder for input)</Text>
-            <Text size="sm">Email (placeholder for input)</Text>
+            <Text typography="body2">Name (placeholder for input)</Text>
+            <Text typography="body2">Email (placeholder for input)</Text>
           </View>
           <View spacing="sm">
             <Button size="sm" onPress={handleSubmit}>
@@ -206,7 +206,7 @@ export function PopoverWithForm() {
 // Example 7: Popover with Rich Content
 export function PopoverWithRichContent() {
   const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   return (
     <View spacing="md">
@@ -216,30 +216,30 @@ export function PopoverWithRichContent() {
       <Popover
         open={open}
         onOpenChange={setOpen}
-        anchor={anchorRef as React.RefObject<Element>}
+        anchor={anchorRef}
         placement="bottom-start"
         showArrow
       >
         <View spacing="md" background="primary" radius="lg">
           <View spacing="sm">
-            <Text size="lg" weight="bold">
+            <Text typography="subtitle1" weight="bold">
               John Doe
             </Text>
-            <Text size="sm" >
+            <Text typography="body2">
               @johndoe
             </Text>
           </View>
           <View spacing="xs">
-            <Text size="sm">Software Engineer at Tech Corp</Text>
-            <Text size="sm" >
+            <Text typography="body2">Software Engineer at Tech Corp</Text>
+            <Text typography="body2">
               San Francisco, CA
             </Text>
           </View>
           <View spacing="sm">
-            <Text size="sm" weight="semibold">
+            <Text typography="body2" weight="semibold">
               Bio
             </Text>
-            <Text size="sm">
+            <Text typography="body2">
               Passionate about building great products and writing clean code.
             </Text>
           </View>
@@ -253,7 +253,7 @@ export function PopoverWithRichContent() {
 // Example 8: Popover Menu
 export function PopoverMenu() {
   const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   const menuItems = [
     { icon: 'pencil' as const, label: 'Edit', onClick: () => console.log('Edit') },
@@ -270,7 +270,7 @@ export function PopoverMenu() {
       <Popover
         open={open}
         onOpenChange={setOpen}
-        anchor={anchorRef as React.RefObject<Element>}
+        anchor={anchorRef}
         placement="bottom-end"
         closeOnClickOutside
       >
@@ -285,7 +285,7 @@ export function PopoverMenu() {
               }}
             >
               <Icon name={item.icon} size="sm" />
-              <Text size="sm">{item.label}</Text>
+              <Text typography="body2">{item.label}</Text>
             </Pressable>
           ))}
         </View>
@@ -298,7 +298,7 @@ export function PopoverMenu() {
 export function ColorPickerPopover() {
   const [open, setOpen] = React.useState(false);
   const [selectedColor, setSelectedColor] = React.useState('#3b82f6');
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   const colors = [
     '#ef4444',
@@ -323,7 +323,7 @@ export function ColorPickerPopover() {
       <Popover
         open={open}
         onOpenChange={setOpen}
-        anchor={anchorRef as React.RefObject<Element>}
+        anchor={anchorRef}
         placement="bottom"
         closeOnClickOutside
       >
@@ -358,7 +358,7 @@ export function ColorPickerPopover() {
 // Example 10: Info Popover
 export function InfoPopover() {
   const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   return (
     <View spacing="md">
@@ -375,16 +375,16 @@ export function InfoPopover() {
       <Popover
         open={open}
         onOpenChange={setOpen}
-        anchor={anchorRef as React.RefObject<Element>}
+        anchor={anchorRef}
         placement="right"
         showArrow
         offset={8}
       >
         <View spacing="sm" background="primary" radius="md">
-          <Text weight="semibold" size="sm">
+          <Text weight="semibold" typography="body2">
             What does this mean?
           </Text>
-          <Text size="sm">
+          <Text typography="body2">
             Your account status determines which features you have access to. Active accounts have
             full access to all features.
           </Text>
@@ -397,7 +397,7 @@ export function InfoPopover() {
 // Example 11: Share Popover
 export function SharePopover() {
   const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<Element>(null);
+  const anchorRef = React.useRef<IdealystElement>(null);
 
   return (
     <View spacing="md">
@@ -408,7 +408,7 @@ export function SharePopover() {
       <Popover
         open={open}
         onOpenChange={setOpen}
-        anchor={anchorRef as React.RefObject<Element>}
+        anchor={anchorRef}
         placement="bottom"
         showArrow
       >

package/examples/components/Progress.examples.tsx

@@ -12,8 +12,8 @@ import { Progress, View, Text, Button } from '@idealyst/components';
 export function BasicLinearProgress() {
   return (
     <View spacing="md">
-      <Progress value={50} max={100} variant="linear" />
-      <Text size="sm" >
+      <Progress value={50} max={100} type="linear" />
+      <Text typography="body2">
         50% complete
       </Text>
     </View>
@@ -24,8 +24,8 @@ export function BasicLinearProgress() {
 export function BasicCircularProgress() {
   return (
     <View spacing="md">
-      <Progress value={75} max={100} variant="circular" />
-      <Text size="sm" >
+      <Progress value={75} max={100} type="circular" />
+      <Text typography="body2">
         75% complete
       </Text>
     </View>
@@ -38,20 +38,20 @@ export function ProgressSizes() {
     <View spacing="lg">
       <View spacing="sm">
         <Text weight="semibold">Linear Sizes</Text>
-        <Progress value={60} variant="linear" size="xs" />
-        <Progress value={60} variant="linear" size="sm" />
-        <Progress value={60} variant="linear" size="md" />
-        <Progress value={60} variant="linear" size="lg" />
-        <Progress value={60} variant="linear" size="xl" />
+        <Progress value={60} type="linear" size="xs" />
+        <Progress value={60} type="linear" size="sm" />
+        <Progress value={60} type="linear" size="md" />
+        <Progress value={60} type="linear" size="lg" />
+        <Progress value={60} type="linear" size="xl" />
       </View>
       <View spacing="sm">
         <Text weight="semibold">Circular Sizes</Text>
         <View spacing="sm">
-          <Progress value={60} variant="circular" size="xs" />
-          <Progress value={60} variant="circular" size="sm" />
-          <Progress value={60} variant="circular" size="md" />
-          <Progress value={60} variant="circular" size="lg" />
-          <Progress value={60} variant="circular" size="xl" />
+          <Progress value={60} type="circular" size="xs" />
+          <Progress value={60} type="circular" size="sm" />
+          <Progress value={60} type="circular" size="md" />
+          <Progress value={60} type="circular" size="lg" />
+          <Progress value={60} type="circular" size="xl" />
         </View>
       </View>
     </View>
@@ -63,24 +63,24 @@ export function ProgressWithIntent() {
   return (
     <View spacing="md">
       <View spacing="sm">
-        <Text size="sm">Primary</Text>
-        <Progress value={70} intent="primary" variant="linear" />
+        <Text typography="body2">Primary</Text>
+        <Progress value={70} intent="primary" type="linear" />
       </View>
       <View spacing="sm">
-        <Text size="sm">Success</Text>
-        <Progress value={70} intent="success" variant="linear" />
+        <Text typography="body2">Success</Text>
+        <Progress value={70} intent="success" type="linear" />
       </View>
       <View spacing="sm">
-        <Text size="sm">Error</Text>
-        <Progress value={70} intent="error" variant="linear" />
+        <Text typography="body2">Danger</Text>
+        <Progress value={70} intent="danger" type="linear" />
       </View>
       <View spacing="sm">
-        <Text size="sm">Warning</Text>
-        <Progress value={70} intent="warning" variant="linear" />
+        <Text typography="body2">Warning</Text>
+        <Progress value={70} intent="warning" type="linear" />
       </View>
       <View spacing="sm">
-        <Text size="sm">Info</Text>
-        <Progress value={70} intent="info" variant="linear" />
+        <Text typography="body2">Info</Text>
+        <Progress value={70} intent="info" type="linear" />
       </View>
     </View>
   );
@@ -90,9 +90,9 @@ export function ProgressWithIntent() {
 export function ProgressWithLabels() {
   return (
     <View spacing="md">
-      <Progress value={45} showLabel variant="linear" />
-      <Progress value={80} showLabel label="Installing..." variant="linear" intent="info" />
-      <Progress value={100} showLabel label="Complete!" variant="linear" intent="success" />
+      <Progress value={45} showLabel type="linear" />
+      <Progress value={80} showLabel label="Installing..." type="linear" intent="info" />
+      <Progress value={100} showLabel label="Complete!" type="linear" intent="success" />
     </View>
   );
 }
@@ -103,11 +103,11 @@ export function IndeterminateProgress() {
     <View spacing="md">
       <View spacing="sm">
         <Text weight="semibold">Linear Indeterminate</Text>
-        <Progress indeterminate variant="linear" intent="primary" />
+        <Progress indeterminate type="linear" intent="primary" />
       </View>
       <View spacing="sm">
         <Text weight="semibold">Circular Indeterminate</Text>
-        <Progress indeterminate variant="circular" intent="primary" />
+        <Progress indeterminate type="circular" intent="primary" />
       </View>
     </View>
   );
@@ -119,11 +119,11 @@ export function RoundedProgress() {
     <View spacing="md">
       <View spacing="sm">
         <Text>Standard corners</Text>
-        <Progress value={65} variant="linear" rounded={false} />
+        <Progress value={65} type="linear" rounded={false} />
       </View>
       <View spacing="sm">
         <Text>Rounded corners</Text>
-        <Progress value={65} variant="linear" rounded />
+        <Progress value={65} type="linear" rounded />
       </View>
     </View>
   );
@@ -146,8 +146,8 @@ export function AnimatedProgress() {
 
   return (
     <View spacing="md">
-      <Progress value={progress} showLabel variant="linear" intent="success" />
-      <Progress value={progress} showLabel variant="circular" intent="success" />
+      <Progress value={progress} showLabel type="linear" intent="success" />
+      <Progress value={progress} showLabel type="circular" intent="success" />
     </View>
   );
 }
@@ -184,13 +184,13 @@ export function FileUploadProgress() {
             value={progress}
             showLabel
             label="Uploading file..."
-            variant="linear"
+            type="linear"
             intent="info"
           />
         </View>
       )}
       {progress === 100 && !uploading && (
-        <Text size="sm" >
+        <Text typography="body2">
           Upload complete!
         </Text>
       )}
@@ -210,7 +210,7 @@ export function MultiStepProgress() {
         <Text weight="semibold">
           Step {currentStep} of {totalSteps}
         </Text>
-        <Progress value={progress} showLabel variant="linear" intent="primary" />
+        <Progress value={progress} showLabel type="linear" intent="primary" />
       </View>
       <View spacing="sm">
         <Button
@@ -262,8 +262,8 @@ export function DownloadProgress() {
       </Button>
       {downloading && (
         <View spacing="md">
-          <Progress value={progress} variant="linear" intent="success" />
-          <Text size="sm" >
+          <Progress value={progress} type="linear" intent="success" />
+          <Text typography="body2">
             {progress}% downloaded
           </Text>
         </View>
@@ -288,14 +288,14 @@ export function StorageUsageProgress() {
     <View spacing="md">
       <View spacing="xs">
         <Text weight="semibold">Storage Usage</Text>
-        <Text size="sm" >
+        <Text typography="body2">
           {usedStorage} GB of {totalStorage} GB used
         </Text>
       </View>
       <Progress
         value={percentage}
         showLabel
-        variant="linear"
+        type="linear"
         intent={getIntent()}
         rounded
       />
@@ -317,13 +317,13 @@ export function BatteryLevelProgress() {
     <View spacing="md">
       <View spacing="xs">
         <Text weight="semibold">Battery Level</Text>
-        <Text size="sm" >
+        <Text typography="body2">
           {batteryLevel}% remaining
         </Text>
       </View>
       <Progress
         value={batteryLevel}
-        variant="circular"
+        type="circular"
         showLabel
         intent={getIntent()}
       />

package/examples/components/RadioButton.examples.tsx

@@ -102,11 +102,11 @@ export function RadioButtonWithIntent() {
         intent="success"
       />
       <RadioButton
-        value="error"
-        checked={selected === 'error'}
-        onPress={() => setSelected('error')}
-        label="Error"
-        intent="error"
+        value="danger"
+        checked={selected === 'danger'}
+        onPress={() => setSelected('danger')}
+        label="Danger"
+        intent="danger"
       />
       <RadioButton
         value="warning"
@@ -139,7 +139,7 @@ export function RadioButtonGroup() {
 
   return (
     <View spacing="md">
-      <Text weight="bold" size="md">
+      <Text weight="bold" typography="body1">
         Contact Preference
       </Text>
       <View spacing="sm">
@@ -168,7 +168,7 @@ export function RadioButtonGroup() {
           label="Do not contact me"
         />
       </View>
-      <Text size="sm" >
+      <Text typography="body2">
         Selected: {preference}
       </Text>
     </View>
@@ -217,7 +217,7 @@ export function ShippingMethodSelection() {
 
   return (
     <View spacing="lg">
-      <Text weight="bold" size="lg">
+      <Text weight="bold" typography="subtitle1">
         Select Shipping Method
       </Text>
       <View spacing="md">
@@ -239,7 +239,7 @@ export function ShippingMethodSelection() {
               label={option.label}
             />
             <View spacing="xs">
-              <Text size="sm" >
+              <Text typography="body2">
                 {option.price} • {option.duration}
               </Text>
             </View>
@@ -256,7 +256,7 @@ export function PaymentMethodSelection() {
 
   return (
     <View spacing="lg">
-      <Text weight="bold" size="lg">
+      <Text weight="bold" typography="subtitle1">
         Payment Method
       </Text>
       <View spacing="md">
@@ -301,7 +301,7 @@ export function SubscriptionPlanSelection() {
 
   return (
     <View spacing="lg">
-      <Text weight="bold" size="lg">
+      <Text weight="bold" typography="subtitle1">
         Choose Your Plan
       </Text>
       <View spacing="md">
@@ -324,10 +324,10 @@ export function SubscriptionPlanSelection() {
               intent={plan === planOption.value ? 'primary' : 'neutral'}
             />
             <View spacing="xs">
-              <Text weight="bold" size="lg">
+              <Text weight="bold" typography="subtitle1">
                 {planOption.price}
               </Text>
-              <Text size="sm" >
+              <Text typography="body2">
                 {planOption.features}
               </Text>
             </View>
@@ -345,10 +345,10 @@ export function SurveyQuestion() {
   return (
     <View spacing="lg">
       <View spacing="sm">
-        <Text weight="bold" size="md">
+        <Text weight="bold" typography="body1">
           How satisfied are you with our service?
         </Text>
-        <Text size="sm" >
+        <Text typography="body2">
           Please select one option
         </Text>
       </View>
@@ -384,7 +384,7 @@ export function SurveyQuestion() {
           checked={satisfaction === 'very-dissatisfied'}
           onPress={() => setSatisfaction('very-dissatisfied')}
           label="Very Dissatisfied"
-          intent="error"
+          intent="danger"
         />
       </View>
     </View>
@@ -397,7 +397,7 @@ export function NotificationFrequency() {
 
   return (
     <View spacing="lg">
-      <Text weight="bold" size="lg">
+      <Text weight="bold" typography="subtitle1">
         Notification Frequency
       </Text>
       <View spacing="md">
@@ -407,7 +407,7 @@ export function NotificationFrequency() {
           onPress={() => setFrequency('realtime')}
           label="Real-time"
         />
-        <Text size="sm"  style={{ marginLeft: 32 }}>
+        <Text typography="body2" style={{ marginLeft: 32 }}>
           Get notified immediately when something happens
         </Text>
         <RadioButton
@@ -416,7 +416,7 @@ export function NotificationFrequency() {
           onPress={() => setFrequency('daily')}
           label="Daily Digest"
         />
-        <Text size="sm"  style={{ marginLeft: 32 }}>
+        <Text typography="body2" style={{ marginLeft: 32 }}>
           Receive a summary once per day
         </Text>
         <RadioButton
@@ -425,7 +425,7 @@ export function NotificationFrequency() {
           onPress={() => setFrequency('weekly')}
           label="Weekly Digest"
         />
-        <Text size="sm"  style={{ marginLeft: 32 }}>
+        <Text typography="body2" style={{ marginLeft: 32 }}>
           Receive a summary once per week
         </Text>
         <RadioButton
@@ -434,7 +434,7 @@ export function NotificationFrequency() {
           onPress={() => setFrequency('never')}
           label="Never"
         />
-        <Text size="sm"  style={{ marginLeft: 32 }}>
+        <Text typography="body2" style={{ marginLeft: 32 }}>
           Don't send me any notifications
         </Text>
       </View>