@idealyst/components 1.2.29 → 1.2.31

package/src/Video/Video.native.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { videoStyles } from './Video.styles';
 import type { VideoProps } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 // Import react-native-video - it's a peer dependency
 let RNVideo: any;
@@ -14,7 +15,7 @@ try {
   console.warn('react-native-video not installed. Video component will not work on native.');
 }
 
-const Video = React.forwardRef<View, VideoProps>(({
+const Video = React.forwardRef<IdealystElement, VideoProps>(({
   source,
   poster,
   width: _width,
@@ -52,7 +53,7 @@ const Video = React.forwardRef<View, VideoProps>(({
 
   if (!RNVideo) {
     return (
-      <View ref={ref} nativeID={id} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID} {...nativeA11yProps}>
+      <View ref={ref as any} nativeID={id} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID} {...nativeA11yProps}>
         <View style={videoStyles.fallback}>
           {/* Fallback when react-native-video is not installed */}
         </View>
@@ -95,7 +96,7 @@ const Video = React.forwardRef<View, VideoProps>(({
   };
 
   return (
-    <View ref={ref} nativeID={id} style={containerStyle} testID={testID} {...nativeA11yProps}>
+    <View ref={ref as any} nativeID={id} style={containerStyle} testID={testID} {...nativeA11yProps}>
       <RNVideo
         source={videoSource}
         poster={poster}

package/src/View/View.native.tsx

@@ -3,6 +3,7 @@ import { View as RNView, ScrollView as RNScrollView, ViewStyle, StyleSheet } fro
 import { useResponsiveStyle, ResponsiveStyle } from '@idealyst/theme';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Check if a style object contains any responsive values
@@ -22,7 +23,7 @@ function hasResponsiveValues(style: any): style is ResponsiveStyle {
   return false;
 }
 
-const View = forwardRef<RNView | RNScrollView, ViewProps>(({
+const View = forwardRef<IdealystElement, ViewProps>(({
   children,
   background = 'transparent',
   radius = 'none',

package/src/View/View.styles.tsx

@@ -90,6 +90,7 @@ export const viewStyles = defineStyle('View', (theme: Theme) => ({
             display: 'flex',
             flexDirection: 'column',
             boxSizing: 'border-box',
+            borderStyle: 'solid',
         },
     }),
     // Web-only: Wrapper for scrollable view

package/src/View/View.web.tsx

@@ -3,12 +3,13 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { ViewProps } from './types';
 import { viewStyles } from './View.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Fundamental layout container with background, border, and spacing options.
  * The base building block for composing UI layouts.
  */
-const View = forwardRef<HTMLDivElement, ViewProps>(({
+const View = forwardRef<IdealystElement, ViewProps>(({
   children,
   background = 'transparent',
   radius = 'none',
@@ -72,6 +73,9 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
       flexShrink,
       flexBasis,
       alignSelf,
+      // Flex content alignment - goes to content (for aligning children)
+      alignItems,
+      justifyContent,
       // Margin - goes to wrapper (positioning in parent)
       margin,
       marginTop,
@@ -123,6 +127,9 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
             inset: 0,
             overflow: 'auto',
             boxSizing: 'border-box',
+            // Flex alignment for children
+            ...(alignItems !== undefined && { alignItems }),
+            ...(justifyContent !== undefined && { justifyContent }),
             // User's visual styles
             ...contentStyles,
           }}
@@ -138,8 +145,8 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
 
   return (
     <div
-      style={style as any}
       {...webProps}
+      style={style as any}
       ref={mergedRef}
       id={id}
       data-testid={testID}

package/src/examples/ActivityIndicatorExamples.tsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Screen, View, Text, Button } from '@idealyst/components';
+import ActivityIndicator from '../ActivityIndicator';
+
+export const ActivityIndicatorExamples: React.FC = () => {
+  const [isAnimating, setIsAnimating] = useState(true);
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View gap="lg">
+        <Text typography="h3">ActivityIndicator Examples</Text>
+
+        <View gap="md">
+          <Text typography="h5">Basic</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+            <ActivityIndicator />
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Sizes</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="xs" />
+              <Text typography="caption">xs</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="sm" />
+              <Text typography="caption">sm</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="md" />
+              <Text typography="caption">md</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="lg" />
+              <Text typography="caption">lg</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator size="xl" />
+              <Text typography="caption">xl</Text>
+            </View>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Intent Colors</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="primary" />
+              <Text typography="caption">primary</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="success" />
+              <Text typography="caption">success</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="warning" />
+              <Text typography="caption">warning</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="danger" />
+              <Text typography="caption">danger</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 8 }}>
+              <ActivityIndicator intent="neutral" />
+              <Text typography="caption">neutral</Text>
+            </View>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Custom Color</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+            <ActivityIndicator color="#9333ea" />
+            <ActivityIndicator color="#ec4899" />
+            <ActivityIndicator color="#06b6d4" />
+            <ActivityIndicator color="#f97316" />
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Toggle Animation</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+            <ActivityIndicator animating={isAnimating} hidesWhenStopped={false} />
+            <Button size="sm" onPress={() => setIsAnimating(!isAnimating)}>
+              {isAnimating ? 'Stop' : 'Start'}
+            </Button>
+          </View>
+          <Text typography="caption" color="secondary">
+            hidesWhenStopped=false keeps the indicator visible when stopped
+          </Text>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Hides When Stopped (default)</Text>
+          <View gap="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+            <View style={{ width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }}>
+              <ActivityIndicator animating={isAnimating} />
+            </View>
+            <Text typography="body2">
+              {isAnimating ? 'Visible (animating)' : 'Hidden (stopped)'}
+            </Text>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Loading States</Text>
+          <View gap="sm">
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                padding: 16,
+                backgroundColor: 'rgba(0,0,0,0.05)',
+                borderRadius: 8,
+              }}
+            >
+              <ActivityIndicator size="sm" />
+              <Text>Loading data...</Text>
+            </View>
+            <View
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 32,
+                backgroundColor: 'rgba(0,0,0,0.05)',
+                borderRadius: 8,
+              }}
+            >
+              <ActivityIndicator size="lg" />
+              <Text typography="body2" color="secondary" style={{ marginTop: 12 }}>
+                Please wait...
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">Inline with Text</Text>
+          <View gap="sm">
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <Text>Saving</Text>
+              <ActivityIndicator size="xs" />
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <Text>Processing request</Text>
+              <ActivityIndicator size="sm" intent="success" />
+            </View>
+          </View>
+        </View>
+
+        <View gap="md">
+          <Text typography="h5">On Dark Background</Text>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 24,
+              padding: 24,
+              backgroundColor: '#1f2937',
+              borderRadius: 8,
+            }}
+          >
+            <ActivityIndicator color="#ffffff" />
+            <ActivityIndicator color="#60a5fa" />
+            <ActivityIndicator color="#34d399" />
+            <ActivityIndicator color="#fbbf24" />
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};
+
+export default ActivityIndicatorExamples;

package/src/examples/AlertExamples.tsx

@@ -26,7 +26,7 @@ export const AlertExamples = () => {
             />
 
             <Alert
-              intent="error"
+              intent="danger"
               title="Error"
               message="There was an error processing your request."
             />
@@ -139,7 +139,7 @@ export const AlertExamples = () => {
             {errorVisible && (
               <Alert
                 type="outlined"
-                intent="error"
+                intent="danger"
                 title="Dismissible Error"
                 message="This outlined alert can also be dismissed."
                 dismissible
@@ -234,7 +234,7 @@ export const AlertExamples = () => {
           <Text typography="h5">All Intent Colors (Soft Variant)</Text>
 
           <View gap="sm">
-            {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
+            {(['primary', 'success', 'danger', 'warning', 'info', 'neutral'] as const).map((intent) => (
               <Alert
                 key={intent}
                 type="soft"
@@ -249,7 +249,7 @@ export const AlertExamples = () => {
           <Text typography="h5">All Intent Colors (Outlined Variant)</Text>
 
           <View gap="sm">
-            {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
+            {(['primary', 'success', 'danger', 'warning', 'info', 'neutral'] as const).map((intent) => (
               <Alert
                 key={intent}
                 type="outlined"
@@ -264,7 +264,7 @@ export const AlertExamples = () => {
           <Text typography="h5">All Intent Colors (Filled Variant)</Text>
 
           <View gap="sm">
-            {(['primary', 'success', 'error', 'warning', 'info', 'neutral'] as const).map((intent) => (
+            {(['primary', 'success', 'danger', 'warning', 'info', 'neutral'] as const).map((intent) => (
               <Alert
                 key={intent}
                 type="filled"

package/src/examples/ButtonExamples.tsx

@@ -117,12 +117,12 @@ export const ButtonExamples = () => {
           >
             Success
           </Button>
-          <Button 
-            intent="error"
+          <Button
+            intent="danger"
             type="contained"
-            onPress={() => handlePress('error')}
+            onPress={() => handlePress('danger')}
           >
-            Error
+            Danger
           </Button>
           <Button 
             intent="warning"
@@ -187,7 +187,7 @@ export const ButtonExamples = () => {
           </Button>
           <Button
             type="contained"
-            intent="error"
+            intent="danger"
             leftIcon="delete"
             rightIcon="alert"
             onPress={() => handlePress('icon-both')}
@@ -246,7 +246,7 @@ export const ButtonExamples = () => {
           />
           <Button
             type="text"
-            intent="error"
+            intent="danger"
             leftIcon="close-circle"
             onPress={() => handlePress('icon-only-text')}
           />
@@ -283,11 +283,11 @@ export const ButtonExamples = () => {
           </Button>
           <Button
             type="contained"
-            intent="error"
+            intent="danger"
             leftIcon="alert-circle"
-            onPress={() => handlePress('error')}
+            onPress={() => handlePress('danger')}
           >
-            Error
+            Danger
           </Button>
         </View>
       </View>
@@ -344,7 +344,7 @@ export const ButtonExamples = () => {
           </Button>
           <Button
             type="contained"
-            intent="error"
+            intent="danger"
             gradient="darken"
             onPress={() => handlePress('gradient-error')}
           >
@@ -394,7 +394,7 @@ export const ButtonExamples = () => {
           </Button>
           <Button
             type="contained"
-            intent="error"
+            intent="danger"
             gradient="darken"
             leftIcon="delete"
             onPress={() => handlePress('gradient-icon-delete')}
@@ -457,7 +457,7 @@ export const ButtonExamples = () => {
           </Button>
           <Button
             type="contained"
-            intent="error"
+            intent="danger"
             loading
             onPress={() => handlePress('loading-error')}
           >

package/src/examples/CardExamples.tsx

@@ -56,7 +56,7 @@ export const CardExamples = () => {
             <Text>Success Card</Text>
           </Card>
           
-          <Card intent="error" padding="md" type="outlined">
+          <Card intent="danger" padding="md" type="outlined">
             <Text>Error Card</Text>
           </Card>
           

package/src/examples/CheckboxExamples.tsx

@@ -85,7 +85,7 @@ export const CheckboxExamples = () => {
             label="Success checkbox"
           />
           <Checkbox
-            intent="error"
+            intent="danger"
             checked={errorChecked}
             onCheckedChange={setErrorChecked}
             label="Error checkbox"
@@ -200,7 +200,7 @@ export const CheckboxExamples = () => {
             onCheckedChange={() => {}}
             label="Checkbox with error"
             error="This field is required"
-            intent="error"
+            intent="danger"
           />
           <Checkbox
             checked={false}

package/src/examples/ChipExamples.tsx

@@ -31,7 +31,7 @@ export const ChipExamples = () => {
           <Chip label="Default" />
           <Chip label="Primary" intent="primary" />
           <Chip label="Success" intent="success" />
-          <Chip label="Error" intent="error" />
+          <Chip label="Error" intent="danger" />
           <Chip label="Warning" intent="warning" />
           <Chip label="Neutral" intent="neutral" />
         </View>
@@ -43,21 +43,21 @@ export const ChipExamples = () => {
         <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" />
+          <Chip label="Filled Error" type="filled" intent="danger" />
         </View>
 
         <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" />
+          <Chip label="Outlined Error" type="outlined" intent="danger" />
         </View>
 
         <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" />
-          <Chip label="Soft Error" type="soft" intent="error" />
+          <Chip label="Soft Error" type="soft" intent="danger" />
         </View>
 
         <Divider spacing="md" />
@@ -74,7 +74,7 @@ export const ChipExamples = () => {
 
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
           <Chip label="Star" icon="star" />
-          <Chip label="Heart" icon="heart" intent="error" />
+          <Chip label="Heart" icon="heart" intent="danger" />
           <Chip label="Check" icon="check" intent="success" />
           <Chip label="Info" icon="information" type="outlined" />
         </View>
@@ -188,7 +188,7 @@ export const ChipExamples = () => {
           <Chip label="Design" type="soft" intent="primary" size="sm" />
           <Chip label="Development" type="soft" intent="success" size="sm" />
           <Chip label="Marketing" type="soft" intent="warning" size="sm" />
-          <Chip label="Sales" type="soft" intent="error" size="sm" />
+          <Chip label="Sales" type="soft" intent="danger" size="sm" />
           <Chip label="Support" type="soft" intent="neutral" size="sm" />
         </View>
       </View>

package/src/examples/DialogExamples.tsx

@@ -88,7 +88,7 @@ export const DialogExamples = () => {
               </Button>
               <Button 
                 type="contained" 
-                intent="error"
+                intent="danger"
                 onPress={() => setConfirmationOpen(false)}
               >
                 Delete

package/src/examples/DividerExamples.tsx

@@ -104,7 +104,7 @@ export const DividerExamples = () => {
           
           <Card type="outlined" padding="md">
             <Text>Error divider</Text>
-            <Divider intent="error" />
+            <Divider intent="danger" />
             <Text>Content below</Text>
           </Card>
           

package/src/examples/InputExamples.tsx

@@ -221,7 +221,7 @@ export const InputExamples = () => {
           <Text
             id="password-helper"
             typography="caption"
-            color={passwordValue.length > 0 && passwordValue.length < 8 ? 'error' : 'muted'}
+            color={passwordValue.length > 0 && passwordValue.length < 8 ? 'danger' : 'muted'}
           >
             {passwordValue.length > 0 && passwordValue.length < 8
               ? 'Password must be at least 8 characters'

package/src/examples/LinkExamples.tsx

@@ -96,7 +96,7 @@ export const LinkExamples = () => {
             </Link>
             <Link to="/favorites" onPress={() => handlePress('favorites')}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                <Icon name="heart" size={20} intent="error" />
+                <Icon name="heart" size={20} intent="danger" />
                 <Text color="primary">Favorites</Text>
               </View>
             </Link>

package/src/examples/ListExamples.tsx

@@ -155,7 +155,7 @@ export const ListExamples: React.FC = () => {
             label="Error Color"
             leading="alert-circle"
             trailing="chevron-right"
-            iconColor="error"
+            iconColor="danger"
             onPress={() => {}}
           />
           <ListItem

package/src/examples/MenuExamples.tsx

@@ -21,13 +21,13 @@ export const MenuExamples: React.FC = () => {
     { id: 'edit', label: 'Edit', icon: 'pencil', onClick: () => setSelectedAction('Edit') },
     { id: 'copy', label: 'Copy', icon: 'content-copy', onClick: () => setSelectedAction('Copy') },
     { id: 'share', label: 'Share', icon: 'share-variant', onClick: () => setSelectedAction('Share'), intent: 'primary' },
-    { id: 'delete', label: 'Delete', icon: 'delete', onClick: () => setSelectedAction('Delete'), intent: 'error' },
+    { id: 'delete', label: 'Delete', icon: 'delete', onClick: () => setSelectedAction('Delete'), intent: 'danger' },
   ];
 
   const intentItems: MenuItem[] = [
     { id: 'save', label: 'Save', intent: 'success', onClick: () => setSelectedAction('Save') },
     { id: 'cancel', label: 'Cancel', intent: 'neutral', onClick: () => setSelectedAction('Cancel') },
-    { id: 'delete', label: 'Delete', intent: 'error', onClick: () => setSelectedAction('Delete') },
+    { id: 'delete', label: 'Delete', intent: 'danger', onClick: () => setSelectedAction('Delete') },
     { id: 'warn', label: 'Warning Action', intent: 'warning', onClick: () => setSelectedAction('Warning') },
   ];
 

package/src/examples/ProgressExamples.tsx

@@ -43,7 +43,7 @@ export const ProgressExamples: React.FC = () => {
           <Progress value={70} intent="primary" />
           <Progress value={70} intent="success" />
           <Progress value={70} intent="warning" />
-          <Progress value={70} intent="error" />
+          <Progress value={70} intent="danger" />
           <Progress value={70} intent="neutral" />
         </View>
       </View>

package/src/examples/RadioButtonExamples.tsx

@@ -101,11 +101,11 @@ export const RadioButtonExamples: React.FC = () => {
             onPress={() => setSelectedIntent('success')}
           />
           <RadioButton
-            value="error"
-            label="Error"
-            intent="error"
-            checked={selectedIntent === 'error'}
-            onPress={() => setSelectedIntent('error')}
+            value="danger"
+            label="Danger"
+            intent="danger"
+            checked={selectedIntent === 'danger'}
+            onPress={() => setSelectedIntent('danger')}
           />
           <RadioButton
             value="warning"

package/src/examples/SVGImageExamples.tsx

@@ -63,7 +63,7 @@ export const SVGImageExamples = () => {
               source={testLogo}
               width={102} 
               height={30}
-              intent="error"
+              intent="danger"
             />
             <SVGImage 
               source={testLogo}

package/src/examples/SelectExamples.tsx

@@ -329,7 +329,7 @@ export const SelectExamples = () => {
                   value={errorSelect}
                   onValueChange={setErrorSelect}
                   placeholder="Error intent"
-                  intent="error"
+                  intent="danger"
                   type="outlined"
                 />
               </View>

package/src/examples/SliderExamples.tsx

@@ -16,7 +16,7 @@ export const SliderExamples: React.FC = () => {
         <Text typography="h5">Basic Slider</Text>
         <Slider
           value={basicValue}
-          onValueChange={setBasicValue}
+          onChange={setBasicValue}
           showValue
         />
         <Text typography="caption" color="secondary">Value: {basicValue}</Text>
@@ -53,7 +53,7 @@ export const SliderExamples: React.FC = () => {
           </View>
           <View gap="xs">
             <Text typography="body2">Error</Text>
-            <Slider defaultValue={60} intent="error" />
+            <Slider defaultValue={60} intent="danger" />
           </View>
           <View gap="xs">
             <Text typography="body2">Warning</Text>
@@ -122,7 +122,7 @@ export const SliderExamples: React.FC = () => {
         <Text typography="h5">Volume Control</Text>
         <Slider
           value={volumeValue}
-          onValueChange={setVolumeValue}
+          onChange={setVolumeValue}
           min={0}
           max={100}
           showValue
@@ -163,7 +163,7 @@ export const SliderExamples: React.FC = () => {
               min={10}
               max={30}
               icon="thermometer"
-              intent="error"
+              intent="danger"
               showMinMax
             />
           </View>
@@ -174,7 +174,7 @@ export const SliderExamples: React.FC = () => {
         <Text typography="h5">Temperature Control</Text>
         <Slider
           value={temperatureValue}
-          onValueChange={setTemperatureValue}
+          onChange={setTemperatureValue}
           min={10}
           max={30}
           step={0.5}