@idealyst/components 1.2.32 → 1.2.33

package/package.json

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

package/src/Accordion/Accordion.web.tsx

@@ -61,7 +61,11 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
       <button
         {...headerProps}
         id={headerId}
-        onClick={onToggle}
+        onClick={(e: React.MouseEvent) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onToggle();
+        }}
         onKeyDown={(e) => onKeyDown(e, item.id)}
         disabled={item.disabled}
         aria-expanded={isExpanded}
@@ -146,16 +150,20 @@ const Accordion: React.FC<AccordionProps> = ({
     // ArrowDown moves to next item
     if (key === 'ArrowDown') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
     // ArrowUp moves to previous item
     } else if (key === 'ArrowUp') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
     } else if (ACCORDION_KEYS.first.includes(key as 'Home')) {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = 0;
     } else if (ACCORDION_KEYS.last.includes(key as 'End')) {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = enabledItems.length - 1;
     }
 

package/src/Button/Button.web.tsx

@@ -64,10 +64,8 @@ const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    // Only stop propagation if we have a handler
-    // Otherwise, let clicks bubble up to parent handlers (e.g., Menu triggers)
+    e.stopPropagation();
     if (!isDisabled && pressHandler) {
-      e.stopPropagation();
       pressHandler();
     }
   };

package/src/Card/Card.web.tsx

@@ -72,7 +72,9 @@ const Card = forwardRef<IdealystElement, CardProps>(({
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled && clickable) {
       // Prefer onPress, fall back to deprecated onClick
       const handler = onPress ?? onClick;

package/src/Checkbox/Checkbox.web.tsx

@@ -53,6 +53,8 @@ const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   }, [checked]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
     if (disabled) return;
 
     const newChecked = event.target.checked;

package/src/Chip/Chip.web.tsx

@@ -61,7 +61,9 @@ const Chip = forwardRef<IdealystElement, ChipProps>(({
   const deleteButtonProps = getWebProps([(chipStyles.deleteButton as any)({ size })]);
   const deleteIconProps = getWebProps([(chipStyles.deleteIcon as any)({ size, intent, type, selected: isSelected })]);
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
     // Prefer onPress, fall back to deprecated onClick
     const handler = onPress ?? onClick;
@@ -71,6 +73,7 @@ const Chip = forwardRef<IdealystElement, ChipProps>(({
   };
 
   const handleDelete = (e: React.MouseEvent) => {
+    e.preventDefault();
     e.stopPropagation();
     if (disabled) return;
     if (onDelete) {

package/src/IconButton/IconButton.web.tsx

@@ -62,8 +62,8 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
+    e.stopPropagation();
     if (!isDisabled && pressHandler) {
-      e.stopPropagation();
       pressHandler();
     }
   };

package/src/List/ListItem.web.tsx

@@ -53,7 +53,9 @@ const ListItem: React.FC<ListItemProps & { isLast?: boolean }> = ({
   const leadingProps = getWebProps([leadingStyle]);
   const trailingProps = getWebProps([trailingStyle]);
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled && onPress) {
       onPress();
     }

package/src/Menu/MenuItem.web.tsx

@@ -69,7 +69,11 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
       {...itemProps}
       ref={mergedRef}
       style={buttonResetStyles}
-      onClick={() => onPress(item)}
+      onClick={(e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onPress(item);
+      }}
       disabled={item.disabled}
       role="menuitem"
       aria-disabled={item.disabled}

package/src/Pressable/Pressable.web.tsx

@@ -23,19 +23,25 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
 }, ref) => {
   const [_isPressed, setIsPressed] = useState(false);
 
-  const handleMouseDown = useCallback(() => {
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
     setIsPressed(true);
     onPressIn?.();
   }, [disabled, onPressIn]);
 
-  const handleMouseUp = useCallback(() => {
+  const handleMouseUp = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
     setIsPressed(false);
     onPressOut?.();
   }, [disabled, onPressOut]);
 
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
     onPress?.();
   }, [disabled, onPress]);
@@ -44,6 +50,7 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
     if (disabled) return;
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
+      event.stopPropagation();
       onPress?.();
     }
   }, [disabled, onPress]);

package/src/RadioButton/RadioButton.web.tsx

@@ -39,7 +39,9 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   const checked = group.value !== undefined ? group.value === value : checkedProp;
   const disabled = group.disabled || disabledProp;
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled) {
       if (group.onValueChange) {
         group.onValueChange(value);

package/src/Select/Select.styles.tsx

@@ -56,39 +56,43 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
         marginBottom: 4,
     }),
 
-    trigger: ({ type: _type = 'outlined', intent: _intent = 'neutral', disabled = false, error: _error = false, focused: _focused = false }: SelectDynamicProps) => ({
-        position: 'relative' as const,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'space-between' as const,
-        borderWidth: 1,
-        borderStyle: 'solid' as const,
-        opacity: disabled ? 0.6 : 1,
-        variants: {
-            type: {
-                filled: {
-                    backgroundColor: theme.colors.surface.secondary,
-                    borderColor: 'transparent',
-                },
-                outlined: {
-                    backgroundColor: theme.colors.surface.primary,
-                    borderWidth: 1,
-                    borderColor: theme.colors.border.primary,
-                }
+    trigger: ({ type = 'outlined', intent = 'neutral', disabled = false, error = false, focused = false }: SelectDynamicProps) => {
+        // Determine border color based on state priority: error > focused > default
+        const getBorderColor = () => {
+            if (error) return theme.intents.danger.primary;
+            if (focused) return theme.intents[intent]?.primary ?? theme.intents.primary.primary;
+            return type === 'filled' ? 'transparent' : theme.colors.border.primary;
+        };
+
+        const borderColor = getBorderColor();
+
+        return {
+            position: 'relative' as const,
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'space-between' as const,
+            borderWidth: 1,
+            borderStyle: 'solid' as const,
+            borderColor,
+            borderRadius: 8,
+            opacity: disabled ? 0.6 : 1,
+            backgroundColor: type === 'filled' ? theme.colors.surface.secondary : theme.colors.surface.primary,
+            variants: {
+                size: theme.sizes.$select,
             },
-            size: theme.sizes.$select,
-        },
-        _web: {
-            display: 'flex',
-            boxSizing: 'border-box',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            border: `1px solid`,
-            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-            _hover: disabled ? {} : { opacity: 0.9 },
-            _active: disabled ? {} : { opacity: 0.8 },
-            _focus: { outline: 'none' },
-        },
-    }),
+            _web: {
+                display: 'flex',
+                boxSizing: 'border-box',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                border: `1px solid ${borderColor}`,
+                boxShadow: focused && !error ? `0 0 0 2px ${theme.intents[intent]?.primary ?? theme.intents.primary.primary}33` : 'none',
+                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                _hover: disabled ? {} : { borderColor: focused || error ? borderColor : theme.colors.border.secondary },
+                _active: disabled ? {} : { opacity: 0.9 },
+                _focus: { outline: 'none' },
+            },
+        };
+    },
 
     triggerContent: (_props: SelectDynamicProps) => ({
         flex: 1,

package/src/Slider/Slider.web.tsx

@@ -101,6 +101,7 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
     if (disabled) return;
 
     e.preventDefault();
+    e.stopPropagation();
 
     // Check if click is on the thumb
     const isThumbClick = thumbRef.current && thumbRef.current.contains(e.target as Node);
@@ -145,21 +146,27 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
 
     if (matchesKey(e, SLIDER_KEYS.increase)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = clampValue(value + step);
     } else if (matchesKey(e, SLIDER_KEYS.decrease)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = clampValue(value - step);
     } else if (matchesKey(e, SLIDER_KEYS.min)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = min;
     } else if (matchesKey(e, SLIDER_KEYS.max)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = max;
     } else if (matchesKey(e, SLIDER_KEYS.increaseLarge)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = clampValue(value + largeStep);
     } else if (matchesKey(e, SLIDER_KEYS.decreaseLarge)) {
       e.preventDefault();
+      e.stopPropagation();
       newValue = clampValue(value - largeStep);
     }
 

package/src/Switch/Switch.web.tsx

@@ -39,7 +39,9 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
   accessibilityDescribedBy,
   accessibilityChecked,
 }, ref) => {
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!disabled && onChange) {
       onChange(!checked);
     }

package/src/TabBar/TabBar.web.tsx

@@ -36,7 +36,7 @@ function renderIcon(
 interface TabProps {
   item: TabBarItem;
   isActive: boolean;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
   onKeyDown: (e: React.KeyboardEvent) => void;
   size: TabBarProps['size'];
   type: TabBarProps['type'];
@@ -168,15 +168,19 @@ const TabBar: React.FC<TabBarProps> = ({
 
     if (key === 'ArrowRight') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
     } else if (key === 'ArrowLeft') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
     } else if (key === 'Home') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = 0;
     } else if (key === 'End') {
       e.preventDefault();
+      e.stopPropagation();
       nextIndex = enabledItems.length - 1;
     }
 
@@ -237,7 +241,9 @@ const TabBar: React.FC<TabBarProps> = ({
     updateIndicator();
   }, [items]);
 
-  const handleTabClick = (itemValue: string, disabled?: boolean) => {
+  const handleTabClick = (e: React.MouseEvent, itemValue: string, disabled?: boolean) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (disabled) return;
 
     if (controlledValue === undefined) {
@@ -306,7 +312,7 @@ const TabBar: React.FC<TabBarProps> = ({
             key={item.value}
             item={item}
             isActive={isActive}
-            onClick={() => handleTabClick(item.value, item.disabled)}
+            onClick={(e) => handleTabClick(e, item.value, item.disabled)}
             onKeyDown={(e) => handleKeyDown(e, item.value)}
             size={size}
             type={type}

package/src/TextArea/TextArea.web.tsx

@@ -168,6 +168,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   }, [value, autoGrow, minHeight, maxHeight]);
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    e.stopPropagation();
     const newValue = e.target.value;
 
     if (maxLength && newValue.length > maxLength) {

package/src/TextInput/TextInput.web.tsx

@@ -88,6 +88,7 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation();
     if (onChangeText) {
       onChangeText(e.target.value);
     }