@idealyst/components 1.2.29 → 1.2.30

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.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',

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}

package/src/examples/SwitchExamples.tsx

@@ -94,7 +94,7 @@ export const SwitchExamples: React.FC = () => {
           <Switch
             checked={intentChecked.error}
             onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, error: checked }))}
-            intent="error"
+            intent="danger"
             label="Error"
           />
           <Switch
@@ -152,7 +152,7 @@ export const SwitchExamples: React.FC = () => {
             onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, wifi: checked }))}
             enabledIcon="wifi"
             disabledIcon="wifi-off"
-            intent="error"
+            intent="danger"
             label="WiFi Connection"
             size="sm"
           />

package/src/examples/TableExamples.tsx

@@ -126,7 +126,7 @@ export const TableExamples: React.FC = () => {
           <Button size="sm" type="outlined" onPress={() => console.log('Edit', user.id)}>
             Edit
           </Button>
-          <Button size="sm" type="outlined" intent="error" onPress={() => console.log('Delete', user.id)}>
+          <Button size="sm" type="outlined" intent="danger" onPress={() => console.log('Delete', user.id)}>
             Delete
           </Button>
         </View>

package/src/examples/TooltipExamples.tsx

@@ -62,8 +62,8 @@ export const TooltipExamples: React.FC = () => {
           <Tooltip content="Warning tooltip" intent="warning">
             <Button type="contained" intent="warning">Warning</Button>
           </Tooltip>
-          <Tooltip content="Error tooltip" intent="error">
-            <Button type="contained" intent="error">Error</Button>
+          <Tooltip content="Error tooltip" intent="danger">
+            <Button type="contained" intent="danger">Error</Button>
           </Tooltip>
           <Tooltip content="Neutral tooltip" intent="neutral">
             <Button type="contained" intent="neutral">Neutral</Button>

package/src/extensions/index.ts

@@ -61,6 +61,7 @@ export type {
     // Individual component styleable elements
     ButtonStyleableElements,
     CardStyleableElements,
+    TextInputStyleableElements,
     InputStyleableElements,
     ChipStyleableElements,
     AlertStyleableElements,

package/src/extensions/types.ts

@@ -48,10 +48,10 @@ export type CardStyleableElements = {
 };
 
 /**
- * Input styleable elements.
- * @see InputStylesheet in @idealyst/theme/components/input
+ * TextInput styleable elements.
+ * @see TextInputStylesheet in @idealyst/theme/components/text-input
  */
-export type InputStyleableElements = {
+export type TextInputStyleableElements = {
     container: Styles;
     leftIconContainer: Styles;
     rightIconContainer: Styles;
@@ -62,6 +62,11 @@ export type InputStyleableElements = {
     input: Styles;
 };
 
+/**
+ * @deprecated Use TextInputStyleableElements instead
+ */
+export type InputStyleableElements = TextInputStyleableElements;
+
 /**
  * Chip styleable elements.
  * @see ChipStylesheet in @idealyst/theme/components/chip
@@ -452,6 +457,8 @@ export interface ComponentStyleExtensions {}
 interface BuiltInComponentStyleElements {
     Button: ButtonStyleableElements;
     Card: CardStyleableElements;
+    TextInput: TextInputStyleableElements;
+    /** @deprecated Use TextInput instead */
     Input: InputStyleableElements;
     Chip: ChipStyleableElements;
     Alert: AlertStyleableElements;

package/src/index.ts

@@ -18,8 +18,14 @@ export * from './Pressable/types';
 export { default as Link } from './Link';
 export * from './Link/types';
 
+// TextInput (primary text input component)
+export { default as TextInput } from './TextInput';
+export * from './TextInput/types';
+
+/**
+ * @deprecated Use TextInput instead. Input is maintained for backwards compatibility only.
+ */
 export { default as Input } from './Input';
-export * from './Input/types';
 
 // New primitive components
 export { default as Checkbox } from './Checkbox';
@@ -116,7 +122,9 @@ export type { ButtonProps } from './Button/types';
 export type { TextProps } from './Text/types';
 export type { ViewProps } from './View/types';
 export type { LinkProps } from './Link/types';
-export type { InputProps } from './Input/types';
+export type { TextInputProps } from './TextInput/types';
+/** @deprecated Use TextInputProps instead */
+export type { InputProps } from './TextInput/types';
 export type { CheckboxProps } from './Checkbox/types';
 export type { CardProps } from './Card/types';
 export type { DividerProps } from './Divider/types';
@@ -156,6 +164,18 @@ export * from './utils/events';
 export * from './utils/viewStyleProps';
 export * from './utils/buildViewStyleVariants';
 
+// Cross-platform ref types
+export type {
+  IdealystElement,
+  AnchorElement,
+  AnchorRef,
+  ComponentElement,
+  WebElement,
+  NativeElement,
+  CrossPlatformElement,
+  CrossPlatformRef,
+} from './utils/refTypes';
+
 // Component style extensions
 export {
     extendComponent,
@@ -174,6 +194,7 @@ export type {
     Styles,
     ButtonStyleableElements,
     CardStyleableElements,
+    TextInputStyleableElements,
     InputStyleableElements,
     ChipStyleableElements,
     AlertStyleableElements,

package/src/utils/index.ts

@@ -18,3 +18,15 @@ export { deepMerge, isPlainObject } from './styleHelpers';
 
 // Accessibility utilities
 export * from './accessibility';
+
+// Cross-platform ref types
+export type {
+  IdealystElement,
+  AnchorElement,
+  AnchorRef,
+  ComponentElement,
+  WebElement,
+  NativeElement,
+  CrossPlatformElement,
+  CrossPlatformRef,
+} from './refTypes';

package/src/utils/refTypes.ts

@@ -0,0 +1,50 @@
+/**
+ * Cross-platform ref types for use with refs across web and React Native.
+ *
+ * These types provide a unified way to work with refs in a cross-platform manner,
+ * especially useful for components like Popover that need to anchor to other elements.
+ */
+
+/**
+ * Universal element type for cross-platform refs.
+ * Works seamlessly in both React web and React Native contexts.
+ *
+ * @example
+ * ```tsx
+ * const anchorRef = React.useRef<IdealystElement>(null);
+ *
+ * <Button ref={anchorRef} onPress={() => setOpen(true)}>
+ *   Open Popover
+ * </Button>
+ * <Popover anchor={anchorRef} open={open} onOpenChange={setOpen}>
+ *   <Text>Content</Text>
+ * </Popover>
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type IdealystElement = any;
+
+/**
+ * @deprecated Use IdealystElement instead
+ */
+export type AnchorElement = IdealystElement;
+
+/**
+ * @deprecated Use React.RefObject<IdealystElement> instead
+ */
+export type AnchorRef = React.RefObject<IdealystElement>;
+
+/**
+ * @deprecated Use IdealystElement instead
+ */
+export type CrossPlatformElement = IdealystElement;
+
+/**
+ * @deprecated Use React.RefObject<IdealystElement> instead
+ */
+export type CrossPlatformRef = React.RefObject<IdealystElement>;
+
+// Legacy exports kept for backwards compatibility
+export type WebElement = IdealystElement;
+export type NativeElement = IdealystElement;
+export type ComponentElement<T> = IdealystElement;