@idealyst/components 1.0.93 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -41,7 +41,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.0.93",
+    "@idealyst/theme": "^1.0.95",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -91,7 +91,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.0.93",
+    "@idealyst/theme": "^1.0.95",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Icon/Icon.styles.tsx

@@ -27,18 +27,30 @@ function getIconColor(theme: Theme, color?: Color, intent?: Intent): string {
     return theme.colors.text.primary;
 }
 
-function buildIconSize(theme: Theme, size: IconSizeVariant) {
-    const iconSize = theme.sizes.icon[size];
+function buildIconSize(theme: Theme, size?: IconSizeVariant) {
+    // Handle direct numeric sizes
+    if (typeof size === 'number') {
+        return {
+            width: size,
+            height: size,
+        };
+    }
+
+    // Default to 'md' if size is undefined
+    const sizeKey = size || 'md';
+    const iconSize = theme.sizes.icon[sizeKey];
+
     if (typeof iconSize === 'number') {
         return {
             width: iconSize,
             height: iconSize,
         };
     }
+
     return buildSizeVariants(theme, 'icon', (size) => ({
         width: size.width,
         height: size.height,
-    }))[size];
+    }))[sizeKey];
 }
 
 function createIconStyles(theme: Theme) {

package/src/Input/Input.styles.tsx

@@ -86,7 +86,8 @@ function createFocusedCompoundVariants(theme: Theme) {
         styles: {
             borderColor: focusColor,
             _web: {
-                border: `2px solid ${focusColor}`,
+                border: `1px solid ${focusColor}`,
+                boxShadow: `0 0 0 2px ${focusColor}20`,
             },
         },
     });

package/src/Input/Input.web.tsx

@@ -58,7 +58,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     }
   };
 
-  const handleFocus = () => {
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
     setIsFocused(true);
     if (onFocus) {
       onFocus();

package/src/Link/Link.native.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useNavigator } from '@idealyst/navigation';
+import { Pressable } from '../Pressable';
+import type { LinkProps } from './types';
+
+const Link: React.FC<LinkProps> = ({
+  to,
+  vars,
+  children,
+  disabled = false,
+  style,
+  testID,
+  accessibilityLabel,
+  onPress,
+}) => {
+  const navigator = useNavigator();
+
+  const handlePress = () => {
+    if (disabled) return;
+
+    onPress?.();
+    navigator.navigate({ path: to, vars });
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      style={style}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="link"
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+export default Link;

package/src/Link/Link.web.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useNavigator } from '@idealyst/navigation';
+import { Pressable } from '../Pressable';
+import type { LinkProps } from './types';
+
+const Link: React.FC<LinkProps> = ({
+  to,
+  vars,
+  children,
+  disabled = false,
+  style,
+  testID,
+  accessibilityLabel,
+  onPress,
+}) => {
+  const navigator = useNavigator();
+
+  const handlePress = () => {
+    if (disabled) return;
+
+    onPress?.();
+    navigator.navigate({ path: to, vars });
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      style={style}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="link"
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+export default Link;

package/src/Link/index.native.ts

@@ -0,0 +1,3 @@
+export { default } from './Link.native';
+export { default as Link } from './Link.native';
+export * from './types';

package/src/Link/index.ts

@@ -0,0 +1,5 @@
+import LinkComponent from './Link.web';
+
+export default LinkComponent;
+export { LinkComponent as Link };
+export * from './types';

package/src/Link/index.web.ts

@@ -0,0 +1,5 @@
+import LinkComponent from './Link.web';
+
+export default LinkComponent;
+export { LinkComponent as Link };
+export * from './types';

package/src/Link/types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface LinkProps {
+  /** The destination path to navigate to */
+  to: string;
+  /** Variables to substitute in the path (e.g., { id: '123' } for '/user/:id') */
+  vars?: Record<string, string>;
+  /** Content to render inside the link */
+  children?: ReactNode;
+  /** Whether the link is disabled */
+  disabled?: boolean;
+  /** Style to apply to the link container */
+  style?: StyleProp<ViewStyle>;
+  /** Test ID for testing */
+  testID?: string;
+  /** Accessibility label */
+  accessibilityLabel?: string;
+  /** Callback fired when the link is pressed */
+  onPress?: () => void;
+}

package/src/Pressable/Pressable.web.tsx

@@ -39,21 +39,26 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
     }
   }, [disabled, onPress]);
 
-  const webStyle = {
+  const baseStyle: React.CSSProperties = {
     cursor: disabled ? 'default' : 'pointer',
     outline: 'none',
-    userSelect: 'none' as const,
-    WebkitUserSelect: 'none' as const,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
     WebkitTapHighlightColor: 'transparent',
     opacity: disabled ? 0.5 : 1,
   };
 
+  // Merge base styles with custom styles for web compatibility
+  const mergedStyle: React.CSSProperties = style
+    ? { ...baseStyle, ...(style as React.CSSProperties) }
+    : baseStyle;
+
   return (
     <div
       ref={ref}
       role={accessibilityRole}
       tabIndex={disabled ? -1 : 0}
-      style={[webStyle, style] as any}
+      style={mergedStyle}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp} // Handle mouse leave as press out

package/src/Select/Select.styles.tsx

@@ -113,7 +113,8 @@ function buildDynamicTriggerStyles(theme: Theme) {
                     true: {
                         borderColor: theme.intents.primary.primary,
                         _web: {
-                            border: `2px solid ${theme.intents.primary.primary}`,
+                            border: `1px solid ${theme.intents.primary.primary}`,
+                            boxShadow: `0 0 0 2px ${theme.intents.primary.primary}20`,
                             outline: 'none',
                         },
                     },

package/src/Select/Select.web.tsx

@@ -109,6 +109,14 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
     }
   };
 
+  const handleTriggerFocus = () => {
+    if (!disabled && !isOpen) {
+      setIsOpen(true);
+      setSearchTerm('');
+      setFocusedIndex(-1);
+    }
+  };
+
   const handleOptionSelect = (option: SelectOption) => {
     if (!option.disabled) {
       onValueChange(option.value);
@@ -151,6 +159,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
         <button
           {...triggerWebProps}
           onClick={handleTriggerClick}
+          onFocus={handleTriggerFocus}
           disabled={disabled}
           aria-label={accessibilityLabel || label}
           aria-expanded={isOpen}

package/src/examples/LinkExamples.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { Screen, View, Link, Text, Button, Card, Icon } from '@idealyst/components';
+
+export const LinkExamples = () => {
+  const handlePress = (linkType: string) => {
+    console.log(`Link pressed: ${linkType}`);
+  };
+
+  return (
+    <Screen background="primary">
+      <View spacing="none">
+        <Text size="lg" weight="bold" align="center">
+          Link Examples
+        </Text>
+
+        {/* Basic Text Links */}
+        <View spacing="md">
+          <Text size="md" weight="semibold">Basic Text Links</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+            <Link to="/home" onPress={() => handlePress('home')}>
+              <Text color="primary">Go to Home</Text>
+            </Link>
+            <Link to="/settings" onPress={() => handlePress('settings')}>
+              <Text color="primary">Settings</Text>
+            </Link>
+            <Link to="/profile" onPress={() => handlePress('profile')}>
+              <Text color="primary">Profile</Text>
+            </Link>
+          </View>
+        </View>
+
+        {/* Links with Path Variables */}
+        <View spacing="md">
+          <Text size="md" weight="semibold">Links with Path Variables</Text>
+          <View style={{ flexDirection: 'column', gap: 8 }}>
+            <Link
+              to="/user/:id"
+              vars={{ id: '123' }}
+              onPress={() => handlePress('user-123')}
+            >
+              <Text color="primary">View User #123</Text>
+            </Link>
+            <Link
+              to="/product/:category/:id"
+              vars={{ category: 'electronics', id: '456' }}
+              onPress={() => handlePress('product')}
+            >
+              <Text color="primary">Electronics Product #456</Text>
+            </Link>
+            <Link
+              to="/post/:slug"
+              vars={{ slug: 'hello-world' }}
+              onPress={() => handlePress('post')}
+            >
+              <Text color="primary">Read "Hello World" Post</Text>
+            </Link>
+          </View>
+        </View>
+
+        {/* Links Wrapping Buttons */}
+        <View spacing="md">
+          <Text size="md" weight="semibold">Links Wrapping Buttons</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+            <Link to="/dashboard" onPress={() => handlePress('dashboard-btn')}>
+              <Button type="contained" intent="primary">
+                Go to Dashboard
+              </Button>
+            </Link>
+            <Link to="/create" onPress={() => handlePress('create-btn')}>
+              <Button type="contained" intent="success" leftIcon="plus">
+                Create New
+              </Button>
+            </Link>
+            <Link to="/help" onPress={() => handlePress('help-btn')}>
+              <Button type="outlined" intent="neutral">
+                Get Help
+              </Button>
+            </Link>
+          </View>
+        </View>
+
+        {/* Links with Icons and Text */}
+        <View spacing="md">
+          <Text size="md" weight="semibold">Links with Icons</Text>
+          <View style={{ flexDirection: 'column', gap: 12 }}>
+            <Link to="/notifications" onPress={() => handlePress('notifications')}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                <Icon name="bell" size={20} intent="primary" />
+                <Text color="primary">Notifications</Text>
+              </View>
+            </Link>
+            <Link to="/messages" onPress={() => handlePress('messages')}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                <Icon name="email" size={20} intent="primary" />
+                <Text color="primary">Messages</Text>
+              </View>
+            </Link>
+            <Link to="/favorites" onPress={() => handlePress('favorites')}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                <Icon name="heart" size={20} intent="error" />
+                <Text color="primary">Favorites</Text>
+              </View>
+            </Link>
+          </View>
+        </View>
+
+        {/* Disabled Links */}
+        <View spacing="md">
+          <Text size="md" weight="semibold">Disabled Links</Text>
+          <View style={{ flexDirection: 'column', gap: 12 }}>
+            <Link to="/restricted" disabled onPress={() => handlePress('disabled-text')}>
+              <Text color="secondary">Restricted Area (Disabled)</Text>
+            </Link>
+            <Link to="/premium" disabled onPress={() => handlePress('disabled-btn')}>
+              <Button type="contained" intent="primary" disabled>
+                Premium Feature
+              </Button>
+            </Link>
+          </View>
+        </View>
+
+        {/* Links Wrapping Cards */}
+        <View spacing="md">
+          <Text size="md" weight="semibold">Clickable Cards (Links)</Text>
+          <View style={{ flexDirection: 'column', gap: 12 }}>
+            <Link to="/article/1" onPress={() => handlePress('card-1')}>
+              <Card type="outlined" padding="md">
+                <Text size="md" weight="semibold">Article Title</Text>
+                <Text size="sm" color="secondary">
+                  Click this card to read the full article...
+                </Text>
+              </Card>
+            </Link>
+            <Link to="/article/2" onPress={() => handlePress('card-2')}>
+              <Card type="elevated" padding="md">
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                  <Icon name="file-document" size={24} intent="primary" />
+                  <View style={{ flex: 1 }}>
+                    <Text size="md" weight="semibold">Documentation</Text>
+                    <Text size="sm" color="secondary">
+                      View the complete documentation
+                    </Text>
+                  </View>
+                  <Icon name="chevron-right" size={20} color="gray.500" />
+                </View>
+              </Card>
+            </Link>
+          </View>
+        </View>
+
+        {/* Navigation Menu Style */}
+        <View spacing="md">
+          <Text size="md" weight="semibold">Navigation Menu Style</Text>
+          <Card type="filled" padding="none">
+            <Link to="/menu/home" onPress={() => handlePress('menu-home')}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16, gap: 12 }}>
+                <Icon name="home" size={20} intent="primary" />
+                <Text style={{ flex: 1 }}>Home</Text>
+                <Icon name="chevron-right" size={16} color="gray.500" />
+              </View>
+            </Link>
+            <Link to="/menu/search" onPress={() => handlePress('menu-search')}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16, gap: 12 }}>
+                <Icon name="magnify" size={20} intent="primary" />
+                <Text style={{ flex: 1 }}>Search</Text>
+                <Icon name="chevron-right" size={16} color="gray.500" />
+              </View>
+            </Link>
+            <Link to="/menu/account" onPress={() => handlePress('menu-account')}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16, gap: 12 }}>
+                <Icon name="account" size={20} intent="primary" />
+                <Text style={{ flex: 1 }}>Account</Text>
+                <Icon name="chevron-right" size={16} color="gray.500" />
+              </View>
+            </Link>
+          </Card>
+        </View>
+
+        {/* Styled Links */}
+        <View spacing="md">
+          <Text size="md" weight="semibold">Custom Styled Links</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+            <Link
+              to="/styled/1"
+              style={{
+                backgroundColor: '#e3f2fd',
+                padding: 12,
+                borderRadius: 8
+              }}
+              onPress={() => handlePress('styled-1')}
+            >
+              <Text color="primary">Styled Container</Text>
+            </Link>
+            <Link
+              to="/styled/2"
+              style={{
+                borderWidth: 2,
+                borderStyle: 'solid',
+                borderColor: '#2196f3',
+                padding: 12,
+                borderRadius: 8
+              }}
+              onPress={() => handlePress('styled-2')}
+            >
+              <Text color="primary">Bordered Link</Text>
+            </Link>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};

package/src/examples/index.ts

@@ -1,6 +1,7 @@
 export { ButtonExamples } from './ButtonExamples';
 export { TextExamples } from './TextExamples';
 export { ViewExamples } from './ViewExamples';
+export { LinkExamples } from './LinkExamples';
 export { InputExamples } from './InputExamples';
 export { IconExamples } from './IconExamples';
 export { CardExamples } from './CardExamples';

package/src/index.ts

@@ -12,6 +12,9 @@ export * from './View/types';
 export { default as Pressable } from './Pressable';
 export * from './Pressable/types';
 
+export { default as Link } from './Link';
+export * from './Link/types';
+
 export { default as Input } from './Input';
 export * from './Input/types';
 
@@ -106,6 +109,7 @@ export * from './Breadcrumb/types';
 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 { CheckboxProps } from './Checkbox/types';
 export type { CardProps } from './Card/types';