@idealyst/components 1.2.7 → 1.2.8

package/src/Accordion/Accordion.web.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
 import { accordionStyles } from './Accordion.styles';
 import type { AccordionProps, AccordionItem as AccordionItemType } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
@@ -23,15 +24,17 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   isExpanded,
   onToggle,
   type,
-  size,
+  size = 'md',
   isLast,
   testID,
   headerId,
   panelId,
   onKeyDown,
 }) => {
-  const contentInnerRef = useRef<HTMLDivElement>(null);
-  const [contentHeight, setContentHeight] = useState(0);
+  // Get theme for icon size
+  const { theme } = useUnistyles();
+  const iconSize = theme.sizes.accordion[size].iconSize;
+  const iconColor = theme.intents.primary.primary;
 
   // Apply item-specific variants (for size, expanded, disabled)
   accordionStyles.useVariants({
@@ -46,22 +49,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   const headerProps = getWebProps([(accordionStyles.header as any)({})]);
   const titleProps = getWebProps([accordionStyles.title]);
   const iconProps = getWebProps([(accordionStyles.icon as any)({})]);
-  const contentProps = getWebProps([
-    (accordionStyles.content as any)({}),
-    {
-      height: isExpanded ? contentHeight : 0,
-      overflow: 'hidden' as const,
-    }
-  ]);
-  const contentInnerProps = getWebProps([accordionStyles.contentInner]);
-
-  useEffect(() => {
-    if (isExpanded) {
-      setContentHeight(contentInnerRef.current.getBoundingClientRect().height);
-    } else {
-      setContentHeight(0);
-    }
-  }, [isExpanded]);
+  // Pass expanded state to get correct maxHeight from styles
+  const contentProps = getWebProps([(accordionStyles.content as any)({ expanded: isExpanded })]);
+  const contentInnerProps = getWebProps([(accordionStyles.contentInner as any)({})]);
 
   return (
     <div
@@ -83,8 +73,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         </span>
         <span {...iconProps}>
           <IconSvg
-            style={{ width: 12, height: 12 }}
             name="chevron-down"
+            size={iconSize}
+            color={iconColor}
             aria-label="chevron-down"
           />
         </span>
@@ -97,10 +88,8 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         aria-labelledby={headerId}
         aria-hidden={!isExpanded}
       >
-        <div ref={contentInnerRef}>
-          <div {...contentInnerProps}>
-            {item.content}
-          </div>
+        <div {...contentInnerProps}>
+          {item.content}
         </div>
       </div>
     </div>
@@ -154,16 +143,18 @@ const Accordion: React.FC<AccordionProps> = ({
     const currentIndex = enabledItems.findIndex(item => item.id === itemId);
     let nextIndex = -1;
 
-    if (ACCORDION_KEYS.next.includes(key)) {
+    // ArrowDown moves to next item
+    if (key === 'ArrowDown') {
       e.preventDefault();
       nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
-    } else if (ACCORDION_KEYS.prev.includes(key)) {
+    // ArrowUp moves to previous item
+    } else if (key === 'ArrowUp') {
       e.preventDefault();
       nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
-    } else if (ACCORDION_KEYS.first.includes(key)) {
+    } else if (ACCORDION_KEYS.first.includes(key as 'Home')) {
       e.preventDefault();
       nextIndex = 0;
-    } else if (ACCORDION_KEYS.last.includes(key)) {
+    } else if (ACCORDION_KEYS.last.includes(key as 'End')) {
       e.preventDefault();
       nextIndex = enabledItems.length - 1;
     }
@@ -199,7 +190,7 @@ const Accordion: React.FC<AccordionProps> = ({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([(accordionStyles.container as any)({}), style as any]);
+  const containerProps = getWebProps([(accordionStyles.container as any)({ type }), style as any]);
 
   const toggleItem = (itemId: string, disabled?: boolean) => {
     if (disabled) return;

package/src/Alert/Alert.styles.tsx

@@ -59,9 +59,11 @@ export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
             display: 'flex' as const,
             alignItems: 'center' as const,
             justifyContent: 'center' as const,
+            alignSelf: 'flex-start' as const,
             flexShrink: 0,
             width: 24,
             height: 24,
+            marginTop: 2,
             color,
         } as const;
     },
@@ -105,27 +107,38 @@ export const alertStyles = defineStyle('Alert', (theme: Theme) => ({
 
     closeButton: (_props: AlertDynamicProps) => ({
         padding: 4,
-        backgroundColor: 'transparent' as const,
         borderRadius: 4,
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         flexShrink: 0,
+        alignSelf: 'flex-start' as const,
+        marginTop: 2,
         _web: {
+            appearance: 'none',
+            background: 'none',
+            backgroundColor: 'transparent',
             border: 'none',
             cursor: 'pointer',
             outline: 'none',
+            margin: 0,
             _hover: {
                 backgroundColor: 'rgba(0, 0, 0, 0.1)',
             },
         },
     }),
 
-    closeIcon: (_props: AlertDynamicProps) => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        width: 16,
-        height: 16,
-    }),
+    closeIcon: ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
+        const intentValue = theme.intents[intent];
+        const color = type === 'filled' ? intentValue.contrast : intentValue.primary;
+
+        return {
+            display: 'flex' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            width: 16,
+            height: 16,
+            color,
+        } as const;
+    },
 }));

package/src/Alert/Alert.web.tsx

@@ -39,12 +39,12 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
   const dynamicProps = { intent, type };
   const containerProps = getWebProps([(alertStyles.container as any)(dynamicProps), style as any]);
   const iconContainerProps = getWebProps([(alertStyles.iconContainer as any)(dynamicProps)]);
-  const contentProps = getWebProps([alertStyles.content]);
+  const contentProps = getWebProps([(alertStyles.content as any)({})]);
   const titleProps = getWebProps([(alertStyles.title as any)(dynamicProps)]);
   const messageProps = getWebProps([(alertStyles.message as any)(dynamicProps)]);
-  const actionsProps = getWebProps([alertStyles.actions]);
-  const closeButtonProps = getWebProps([alertStyles.closeButton]);
-  const closeIconProps = getWebProps([alertStyles.closeIcon]);
+  const actionsProps = getWebProps([(alertStyles.actions as any)({})]);
+  const closeButtonProps = getWebProps([(alertStyles.closeButton as any)(dynamicProps)]);
+  const closeIconProps = getWebProps([(alertStyles.closeIcon as any)(dynamicProps)]);
 
   const displayIcon = icon !== undefined ? icon : (showIcon ? defaultIcons[intent] : null);
 

package/src/Button/Button.native.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentRef, forwardRef, isValidElement, useMemo } from 'react';
-import { StyleSheet as RNStyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, StyleSheet as RNStyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
@@ -13,6 +13,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     title,
     onPress,
     disabled = false,
+    loading = false,
     type = 'contained',
     intent = 'primary',
     size = 'md',
@@ -35,19 +36,23 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     accessibilityPressed,
   } = props;
 
+  // Button is effectively disabled when loading
+  const isDisabled = disabled || loading;
+
   // Apply variants for size, disabled, gradient
   buttonStyles.useVariants({
     size,
-    disabled,
+    disabled: isDisabled,
     gradient,
   });
 
   // Compute dynamic styles with all props for full flexibility
-  const dynamicProps = { intent, type, size, disabled, gradient };
+  const dynamicProps = { intent, type, size, disabled: isDisabled, gradient };
   const buttonStyle = (buttonStyles.button as any)(dynamicProps);
   const textStyle = (buttonStyles.text as any)(dynamicProps);
   const iconStyle = (buttonStyles.icon as any)(dynamicProps);
   const iconContainerStyle = (buttonStyles.iconContainer as any)(dynamicProps);
+  const spinnerStyle = (buttonStyles.spinner as any)(dynamicProps);
 
   // Gradient is only applicable to contained buttons
   const showGradient = gradient && type === 'contained';
@@ -87,7 +92,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     return getNativeInteractiveAccessibilityProps({
       accessibilityLabel: computedLabel,
       accessibilityHint,
-      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityDisabled: accessibilityDisabled ?? isDisabled,
       accessibilityHidden,
       accessibilityRole: accessibilityRole ?? 'button',
       accessibilityLabelledBy,
@@ -103,7 +108,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     rightIcon,
     accessibilityHint,
     accessibilityDisabled,
-    disabled,
+    isDisabled,
     accessibilityHidden,
     accessibilityRole,
     accessibilityLabelledBy,
@@ -166,7 +171,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   const touchableProps = {
     ref,
     onPress,
-    disabled,
+    disabled: isDisabled,
     testID,
     nativeID: id,
     activeOpacity: 0.7,
@@ -175,32 +180,53 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
       showGradient && { overflow: 'hidden' },
       style,
     ],
+    accessibilityState: loading ? { busy: true } : undefined,
     ...nativeA11yProps,
   };
 
+  // Get spinner color from the spinner style (matches text color)
+  const spinnerColor = spinnerStyle?.color || (type === 'contained' ? '#fff' : undefined);
+
+  // Content opacity - hide when loading but keep for sizing
+  const contentOpacity = loading ? 0 : 1;
+
   return (
     <TouchableOpacity {...touchableProps as any}>
       {renderGradientLayer()}
+      {/* Centered spinner overlay */}
+      {loading && (
+        <View style={RNStyleSheet.absoluteFill}>
+          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <ActivityIndicator
+              size="small"
+              color={spinnerColor}
+            />
+          </View>
+        </View>
+      )}
+      {/* Content with opacity 0 when loading to maintain size */}
       {hasIcons ? (
-        <View  style={iconContainerStyle}>
-          {leftIcon && 
-          <MaterialCommunityIcons
-            name={leftIcon}
-            size={iconSize}
-            style={iconStyle}
-        />}
+        <View style={[iconContainerStyle, { opacity: contentOpacity }]}>
+          {leftIcon && (
+            <MaterialCommunityIcons
+              name={leftIcon}
+              size={iconSize}
+              style={iconStyle}
+            />
+          )}
           <Text style={textStyle}>
             {buttonContent}
           </Text>
-          {rightIcon &&    
-          <MaterialCommunityIcons
-            name={rightIcon}
-            size={iconSize}
-            style={iconStyle}
-        />}
+          {rightIcon && (
+            <MaterialCommunityIcons
+              name={rightIcon}
+              size={iconSize}
+              style={iconStyle}
+            />
+          )}
         </View>
       ) : (
-        <Text style={textStyle}>
+        <Text style={[textStyle, { opacity: contentOpacity }]}>
           {buttonContent}
         </Text>
       )}

package/src/Button/Button.styles.tsx

@@ -137,4 +137,19 @@ export const buttonStyles = defineStyle('Button', (theme: Theme) => ({
         justifyContent: 'center' as const,
         gap: 4,
     }),
+    spinner: ({ intent = 'primary', type = 'contained' }: ButtonDynamicProps) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        // Match the text color based on button type
+        color: type === 'contained'
+            ? theme.intents[intent].contrast
+            : theme.intents[intent].primary,
+        variants: {
+            size: {
+                width: theme.sizes.$button.iconSize,
+                height: theme.sizes.$button.iconSize,
+            },
+        },
+    }),
 }));

package/src/Button/Button.web.tsx

@@ -16,6 +16,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     children,
     onPress,
     disabled = false,
+    loading = false,
     type = 'contained',
     intent = 'primary',
     size = 'md',
@@ -40,10 +41,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     accessibilityHasPopup,
   } = props;
 
+  // Button is effectively disabled when loading
+  const isDisabled = disabled || loading;
+
   // Apply variants for size, disabled, gradient
   buttonStyles.useVariants({
     size,
-    disabled,
+    disabled: isDisabled,
     gradient,
   });
 
@@ -51,7 +55,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     e.preventDefault();
     // Only stop propagation if we have an onPress handler
     // Otherwise, let clicks bubble up to parent handlers (e.g., Menu triggers)
-    if (!disabled && onPress) {
+    if (!isDisabled && onPress) {
       e.stopPropagation();
       onPress();
     }
@@ -70,7 +74,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     return getWebInteractiveAriaProps({
       accessibilityLabel: computedLabel,
       accessibilityHint,
-      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityDisabled: accessibilityDisabled ?? isDisabled,
       accessibilityHidden,
       accessibilityRole: accessibilityRole ?? 'button',
       accessibilityLabelledBy,
@@ -89,7 +93,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     rightIcon,
     accessibilityHint,
     accessibilityDisabled,
-    disabled,
+    isDisabled,
     accessibilityHidden,
     accessibilityRole,
     accessibilityLabelledBy,
@@ -102,7 +106,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   ]);
 
   // Compute dynamic styles with all props for full flexibility
-  const dynamicProps = { intent, type, size, disabled, gradient };
+  const dynamicProps = { intent, type, size, disabled: isDisabled, gradient };
   const buttonStyleArray = [
     (buttonStyles.button as any)(dynamicProps),
     (buttonStyles.text as any)(dynamicProps),
@@ -119,6 +123,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const iconStyleArray = [(buttonStyles.icon as any)(dynamicProps)];
   const iconProps = getWebProps(iconStyleArray);
 
+  // Spinner styles that match the text color
+  const spinnerStyleArray = [(buttonStyles.spinner as any)(dynamicProps)];
+  const spinnerProps = getWebProps(spinnerStyleArray);
+
   // Helper to render icon - now uses icon name directly
   const renderIcon = (icon: string | React.ReactNode) => {
     if (typeof icon === 'string') {
@@ -143,9 +151,41 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   // Determine if we need to wrap content in icon container
   const hasIcons = leftIcon || rightIcon;
 
+  // Render spinner with inline CSS animation (absolutely centered)
+  const renderSpinner = () => (
+    <>
+      <style>
+        {`
+          @keyframes button-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      <span
+        {...spinnerProps}
+        style={{
+          position: 'absolute',
+          display: 'inline-block',
+          width: '1em',
+          height: '1em',
+          border: '2px solid currentColor',
+          borderTopColor: 'transparent',
+          borderRadius: '50%',
+          animation: 'button-spin 0.8s linear infinite',
+        }}
+        role="status"
+        aria-label="Loading"
+      />
+    </>
+  );
+
   // Merge unistyles web ref with forwarded ref
   const mergedRef = useMergeRefs(ref, webProps.ref);
 
+  // Content opacity - hide when loading but keep for sizing
+  const contentStyle = loading ? { opacity: 0 } : undefined;
+
   return (
     <button
       {...webProps}
@@ -153,17 +193,20 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
       ref={mergedRef}
       id={buttonId}
       onClick={handleClick}
-      disabled={disabled}
+      disabled={isDisabled}
       data-testid={testID}
+      aria-busy={loading ? 'true' : undefined}
+      style={{ position: 'relative' }}
     >
+      {loading && renderSpinner()}
       {hasIcons ? (
-        <div {...iconContainerProps}>
+        <div {...iconContainerProps} style={contentStyle}>
           {leftIcon && renderIcon(leftIcon)}
           {buttonContent}
           {rightIcon && renderIcon(rightIcon)}
         </div>
       ) : (
-        buttonContent
+        <span style={contentStyle}>{buttonContent}</span>
       )}
     </button>
   );

package/src/Button/types.ts

@@ -75,6 +75,13 @@ export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
    */
   rightIcon?: IconName | ReactNode;
 
+  /**
+   * Whether the button is in a loading state.
+   * When true, shows a spinner and disables interaction.
+   * The spinner color matches the button text color.
+   */
+  loading?: boolean;
+
   /**
    * Additional styles (platform-specific)
    */

package/src/Icon/Icon.native.tsx

@@ -8,6 +8,7 @@ const Icon = forwardRef<any, IconProps>(({
   name,
   size = 'md',
   color,
+  textColor,
   intent,
   style,
   testID,
@@ -17,7 +18,7 @@ const Icon = forwardRef<any, IconProps>(({
   const { theme } = useUnistyles();
 
   // Call dynamic style with variants - includes theme-reactive color
-  const iconStyle = (iconStyles.icon as any)({ color, intent, size });
+  const iconStyle = (iconStyles.icon as any)({ color, textColor, intent, size });
 
   const iconSize = useMemo(() => {
     return iconStyle.width;

package/src/Icon/Icon.styles.tsx

@@ -3,7 +3,7 @@
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper, getColorFromString } from '@idealyst/theme';
-import type { Theme as BaseTheme, Intent, Color } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Color, Text } from '@idealyst/theme';
 import { IconSizeVariant } from './types';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
@@ -16,6 +16,7 @@ export type IconVariants = {
     size: IconSizeVariant;
     intent?: Intent;
     color?: Color;
+    textColor?: Text;
 };
 
 export type IconDynamicProps = Partial<IconVariants>;
@@ -24,7 +25,7 @@ export type IconDynamicProps = Partial<IconVariants>;
  * Icon styles with dynamic color/size handling.
  */
 export const iconStyles = defineStyle('Icon', (theme: Theme) => ({
-    icon: ({ color, intent, size = 'md' }: IconDynamicProps) => {
+    icon: ({ color, textColor, intent, size = 'md' }: IconDynamicProps) => {
         // Handle size - can be a named size or number
         let iconWidth: number;
         let iconHeight: number;
@@ -44,12 +45,15 @@ export const iconStyles = defineStyle('Icon', (theme: Theme) => ({
             }
         }
 
-        // Get color - intent takes priority, then color prop, then default
+        // Get color - priority: intent > color > textColor > default
+        // color takes precedence over textColor (as per design)
         const iconColor = intent
             ? theme.intents[intent]?.primary
             : color
                 ? getColorFromString(theme as unknown as BaseTheme, color)
-                : theme.colors.text.primary;
+                : textColor
+                    ? theme.colors.text[textColor]
+                    : theme.colors.text.primary;
 
         return {
             width: iconWidth,

package/src/Icon/Icon.web.tsx

@@ -5,7 +5,7 @@ import { iconStyles } from './Icon.styles';
 import { getWebProps } from 'react-native-unistyles/web';
 import { useUnistyles } from 'react-native-unistyles';
 import useMergeRefs from '../hooks/useMergeRefs';
-import { getColorFromString, Intent, Color } from '@idealyst/theme';
+import { getColorFromString, Intent, Color, Text } from '@idealyst/theme';
 import { IconRegistry } from './IconRegistry';
 
 /**
@@ -17,6 +17,7 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
     name,
     size = 'md',
     color,
+    textColor,
     intent,
     style,
     testID,
@@ -47,15 +48,18 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
     iconSize = typeof themeSize === 'number' ? themeSize : (themeSize?.width ?? 24);
   }
 
-  // Compute color from intent or color prop or default
+  // Compute color - priority: intent > color > textColor > default
+  // color takes precedence over textColor (as per design)
   const iconColor = intent
     ? theme.intents[intent as Intent]?.primary
     : color
       ? getColorFromString(theme, color as Color)
-      : theme.colors.text.primary;
+      : textColor
+        ? theme.colors.text[textColor as Text]
+        : theme.colors.text.primary;
 
   // Use getWebProps for className generation but override with computed values
-  const iconStyle = (iconStyles.icon as any)({ intent, color, size });
+  const iconStyle = (iconStyles.icon as any)({ intent, color, textColor, size });
   const iconProps = getWebProps([iconStyle, style]);
 
   const mergedRef = useMergeRefs(ref, iconProps.ref);

package/src/Icon/types.ts

@@ -1,12 +1,15 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from "./icon-types";
-import type { Size } from '@idealyst/theme';
+import type { Size, Text } from '@idealyst/theme';
 import { Color, Intent } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 
 export type IconSizeVariant = Size | number;
 
-export interface IconProps extends BaseProps {
+/**
+ * Base props shared by all Icon variants
+ */
+interface IconBaseProps extends BaseProps {
   /**
    * The name of the icon to display
    */
@@ -17,10 +20,6 @@ export interface IconProps extends BaseProps {
    */
   size?: IconSizeVariant;
 
-  /**
-   * Predefined color variant based on theme
-   */
-  color?: Color;
   /**
    * Intent variant for the icon
    */
@@ -40,4 +39,32 @@ export interface IconProps extends BaseProps {
    * Accessibility label for screen readers
    */
   accessibilityLabel?: string;
-}
+}
+
+/**
+ * Icon props with palette color (e.g., 'blue.500', 'red.100')
+ */
+interface IconWithColor extends IconBaseProps {
+  /**
+   * Predefined color variant based on theme palette
+   */
+  color?: Color;
+  textColor?: never;
+}
+
+/**
+ * Icon props with text color (e.g., 'primary', 'secondary')
+ */
+interface IconWithTextColor extends IconBaseProps {
+  color?: never;
+  /**
+   * Text color variant from theme (e.g., 'primary', 'secondary')
+   * Cannot be used together with `color` prop
+   */
+  textColor?: Text;
+}
+
+/**
+ * Icon component props - accepts either `color` (palette) or `textColor` (text colors), but not both
+ */
+export type IconProps = IconWithColor | IconWithTextColor;

package/src/Input/Input.styles.tsx

@@ -171,9 +171,13 @@ export const inputStyles = defineStyle('Input', (theme: Theme) => ({
             },
         },
         _web: {
-            background: 'transparent',
+            appearance: 'none',
+            background: 'none',
+            backgroundColor: 'transparent',
             border: 'none',
+            outline: 'none',
             cursor: 'pointer',
+            margin: 0,
             _hover: { opacity: 0.7 },
             _active: { opacity: 0.5 },
         },