cpk-ui 0.8.0-beta.4 → 0.8.0-beta.5

package/components/uis/Accordion/Accordion.d.ts

@@ -10,6 +10,11 @@ type Styles = {
     toggleElement?: StyleProp<ViewStyle>;
 };
 export type AccordionSizeType = 'small' | 'medium' | 'large' | number;
+export type AccordionHeaderContext<T> = {
+    title: T;
+    expanded: boolean;
+    toggle: () => void;
+};
 export type AccordionBaseProps<T = string, K = string> = {
     data: AccordionItemDataType<T, K>[];
     style?: StyleProp<ViewStyle>;
@@ -22,16 +27,21 @@ export type AccordionBaseProps<T = string, K = string> = {
     expandAllOnStart?: boolean;
     /** Array of indexes that should be expanded on start. Overrides expandAllOnStart */
     defaultExpandedIndexes?: number[];
+    /** Controlled disclosure, including an empty array to close every item. */
+    expandedIndexes?: readonly number[];
+    onExpandedChange?: (index: number, expanded: boolean) => void;
     animDuration?: number;
     activeOpacity?: number;
     toggleElementPosition?: 'left' | 'right';
     toggleElement?: ReactElement | null;
     renderTitle?: (title: T) => ReactElement;
+    /** Own the entire header, including independent menu/drag controls. */
+    renderHeader?: (context: AccordionHeaderContext<T>) => ReactElement;
     renderItem?: (body: K) => ReactElement;
     onPressItem?: (title: T | string, body: K | string) => void;
 };
 export type AccordionProps<T = string, K = string> = AccordionBaseProps<T, K>;
-declare function Accordion<T, K>({ style, toggleElementPosition, size, data, collapseOnStart, expandAllOnStart, defaultExpandedIndexes, ...rest }: AccordionProps<T, K>): ReactElement;
+declare function Accordion<T, K>({ style, toggleElementPosition, size, data, collapseOnStart, expandAllOnStart, defaultExpandedIndexes, expandedIndexes, onExpandedChange, ...rest }: AccordionProps<T, K>): ReactElement;
 declare const _default: typeof Accordion;
 export default _default;
 export { Accordion };

package/components/uis/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAU,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIlE,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAO3D,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtE,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oFAAoF;IACpF,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzC,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,YAAY,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,YAAY,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE9E,iBAAS,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,EACvB,KAAK,EACL,qBAA+B,EAC/B,IAAe,EACf,IAAI,EACJ,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CAiDrC;wBAGuC,OAAO,SAAS;AAAxD,wBAAyD;AACzD,OAAO,EAAC,SAAS,EAAC,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}

package/components/uis/Accordion/Accordion.js

@@ -6,7 +6,7 @@ import { AccordionItem } from './AccordionItem';
 const Container = styled(View) `
   flex-direction: column;
 `;
-function Accordion({ style, toggleElementPosition = 'right', size = 'medium', data, collapseOnStart, expandAllOnStart, defaultExpandedIndexes, ...rest }) {
+function Accordion({ style, toggleElementPosition = 'right', size = 'medium', data, collapseOnStart, expandAllOnStart, defaultExpandedIndexes, expandedIndexes, onExpandedChange, ...rest }) {
     // Memoize accordion items rendering
     const accordionItems = useMemo(() => data.map((datum, titleKey) => {
         // Determine if this item should be collapsed on start
@@ -28,7 +28,7 @@ function Accordion({ style, toggleElementPosition = 'right', size = 'medium', da
             // Default: all items collapsed
             shouldCollapse = true;
         }
-        return (_jsx(AccordionItem, { data: datum, testID: `${titleKey}`, toggleElementPosition: toggleElementPosition, size: size, collapseOnStart: shouldCollapse, ...rest }, titleKey));
+        return (_jsx(AccordionItem, { data: datum, testID: `${titleKey}`, toggleElementPosition: toggleElementPosition, size: size, collapseOnStart: shouldCollapse, expanded: expandedIndexes?.includes(titleKey), onExpandedChange: (expanded) => onExpandedChange?.(titleKey, expanded), ...rest }, titleKey));
     }), [
         data,
         toggleElementPosition,
@@ -36,6 +36,8 @@ function Accordion({ style, toggleElementPosition = 'right', size = 'medium', da
         collapseOnStart,
         expandAllOnStart,
         defaultExpandedIndexes,
+        expandedIndexes,
+        onExpandedChange,
         rest,
     ]);
     return _jsx(Container, { style: style, children: accordionItems });

package/components/uis/Accordion/AccordionItem.d.ts

@@ -4,11 +4,14 @@ export type AccordionItemDataType<T, K> = {
     title: T;
     items: K[];
 };
-type Props<T, K> = Omit<AccordionBaseProps<T, K>, 'data' | 'style'> & {
+type Props<T, K> = Omit<AccordionBaseProps<T, K>, 'data' | 'style' | 'onExpandedChange'> & {
     testID: string;
-    data: AccordionItemDataType<string, string> | AccordionItemDataType<T, K>;
+    data: AccordionItemDataType<T, K>;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
 };
-export declare function AccordionItem<T, K>({ testID, data: data, size, shouldAnimate, collapseOnStart, animDuration, activeOpacity, toggleElement, toggleElementPosition, onPressItem, renderTitle, renderItem, styles, }: Props<T, K>): ReactElement;
+/** One mounted body: no invisible duplicate controls or JS-frame height loop. */
+export declare function AccordionItem<T, K>({ testID, data, size, shouldAnimate, collapseOnStart, expanded: controlledExpanded, onExpandedChange, animDuration, activeOpacity, toggleElement, toggleElementPosition, onPressItem, renderTitle, renderHeader, renderItem, styles, }: Props<T, K>): ReactElement;
 declare const _default: typeof AccordionItem;
 export default _default;
 //# sourceMappingURL=AccordionItem.d.ts.map

package/components/uis/Accordion/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAMZ,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AA+DpD,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,CAAC,IAAI;IACxC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC3E,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,EAClC,MAAM,EACN,IAAI,EAAE,IAAI,EACV,IAAe,EACf,aAAoB,EACpB,eAAsB,EACtB,YAAkB,EAClB,aAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,GACP,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CAmR5B;wBAG2C,OAAO,aAAa;AAAhE,wBAAiE"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAoB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAalE,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAEpD,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,CAAC,IAAI;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,CAAC,EAAE,CAAA;CAAC,CAAC;AAEjE,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CACrB,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EACxB,MAAM,GAAG,OAAO,GAAG,kBAAkB,CACtC,GAAG;IACF,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,EAClC,MAAM,EACN,IAAI,EACJ,IAAe,EACf,aAAoB,EACpB,eAAsB,EACtB,QAAQ,EAAE,kBAAkB,EAC5B,gBAAgB,EAChB,YAAkB,EAClB,aAAiB,EACjB,aAAa,EACb,qBAA+B,EAC/B,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,GACP,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CA+M5B;wBAQ2C,OAAO,aAAa;AAAhE,wBAAiE"}

package/components/uis/Accordion/AccordionItem.js

@@ -1,209 +1,121 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Caveat: Expo web needs React to be imported
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { Animated, Easing, TouchableOpacity, View } from 'react-native';
-import { styled, css } from 'kstyled';
+import React, { useMemo, useState } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, { Easing, FadeIn, FadeOut, LinearTransition, ReduceMotion, useReducedMotion, } from 'react-native-reanimated';
+import { useTheme } from '../../../providers/ThemeProvider';
 import { Icon } from '../Icon/Icon';
 import { Typography } from '../Typography/Typography';
-const TitleTouch = styled(TouchableOpacity) `
-  height: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 2.4;
-    return $size === 'small' ? 40 : $size === 'large' ? 56 : 48;
-}};
-  background-color: ${({ theme }) => theme.bg.basic};
-
-  flex-direction: row;
-  align-items: center;
-  padding-top: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.4;
-    return $size === 'small' ? 6 : $size === 'large' ? 10 : 8;
-}};
-  padding-bottom: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.4;
-    return $size === 'small' ? 6 : $size === 'large' ? 10 : 8;
-}};
-  padding-left: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.6;
-    return $size === 'small' ? 10 : $size === 'large' ? 14 : 12;
-}};
-  padding-right: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.6;
-    return $size === 'small' ? 10 : $size === 'large' ? 14 : 12;
-}};
-`;
-const StyledIcon = styled(Icon) `
-  color: ${({ theme }) => theme.text.basic};
-  font-weight: bold;
-  font-size: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.7;
-    return $size === 'small' ? 12 : $size === 'large' ? 16 : 14;
-}};
-`;
-const ItemTouch = styled(TouchableOpacity) `
-  background-color: ${({ theme }) => theme.bg.paper};
-  padding-top: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.4;
-    return $size === 'small' ? 6 : $size === 'large' ? 10 : 8;
-}};
-  padding-bottom: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.4;
-    return $size === 'small' ? 6 : $size === 'large' ? 10 : 8;
-}};
-  padding-left: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.6;
-    return $size === 'small' ? 10 : $size === 'large' ? 14 : 12;
-}};
-  padding-right: ${({ $size = 'medium' }) => {
-    if (typeof $size === 'number')
-        return $size * 0.6;
-    return $size === 'small' ? 10 : $size === 'large' ? 14 : 12;
-}};
-
-  flex-direction: row;
-  align-items: center;
-`;
-export function AccordionItem({ testID, data: data, size = 'medium', shouldAnimate = true, collapseOnStart = true, animDuration = 200, activeOpacity = 1, toggleElement, toggleElementPosition, onPressItem, renderTitle, renderItem, styles, }) {
-    // Calculate icon size based on accordion size
-    const iconSize = typeof size === 'number'
-        ? size * 0.7
+/** One mounted body: no invisible duplicate controls or JS-frame height loop. */
+export function AccordionItem({ testID, data, size = 'medium', shouldAnimate = true, collapseOnStart = true, expanded: controlledExpanded, onExpandedChange, animDuration = 200, activeOpacity = 1, toggleElement, toggleElementPosition = 'right', onPressItem, renderTitle, renderHeader, renderItem, styles, }) {
+    const { theme } = useTheme();
+    const reducedMotion = useReducedMotion();
+    const [localExpanded, setLocalExpanded] = useState(!collapseOnStart);
+    const expanded = controlledExpanded ?? localExpanded;
+    const duration = shouldAnimate && !reducedMotion ? animDuration : 0;
+    const transition = useMemo(() => LinearTransition.duration(duration)
+        .easing(Easing.bezier(0.23, 1, 0.32, 1))
+        .reduceMotion(ReduceMotion.System), [duration]);
+    const entering = useMemo(() => FadeIn.duration(duration).reduceMotion(ReduceMotion.System), [duration]);
+    const exiting = useMemo(() => FadeOut.duration(duration).reduceMotion(ReduceMotion.System), [duration]);
+    const toggle = () => {
+        if (controlledExpanded === undefined)
+            setLocalExpanded(!expanded);
+        onExpandedChange?.(!expanded);
+    };
+    const numeric = typeof size === 'number';
+    const titleHeight = numeric
+        ? size * 2.4
         : size === 'small'
-            ? 12
+            ? 40
             : size === 'large'
-                ? 16
-                : 14;
-    const defaultToggleElement = (_jsx(StyledIcon, { name: "CaretDown", "$size": size, size: iconSize }));
-    const dropDownAnimValueRef = useRef(new Animated.Value(0));
-    const rotateAnimValueRef = useRef(new Animated.Value(0));
-    const fadeItemAnim = useRef(new Animated.Value(0)).current;
-    const [itemHeight, setItemHeight] = useState(0);
-    const [collapsed, setCollapsed] = useState(collapseOnStart);
-    // Memoize animation configuration
-    const animationConfig = useMemo(() => ({
-        duration: animDuration,
-        easing: Easing.linear,
-        useNativeDriver: false,
-    }), [animDuration]);
-    useEffect(() => {
-        Animated.timing(fadeItemAnim, {
-            toValue: collapsed ? 0 : 1,
-            duration: !collapsed ? 300 : 100,
-            useNativeDriver: false,
-        }).start();
-    }, [fadeItemAnim, collapsed]);
-    useEffect(() => {
-        const targetValue = collapsed ? 0 : 1;
-        if (!shouldAnimate) {
-            rotateAnimValueRef.current.setValue(targetValue);
-            dropDownAnimValueRef.current.setValue(targetValue);
-            return;
-        }
-        const config = {
-            ...animationConfig,
-            toValue: targetValue,
-        };
-        Animated.parallel([
-            Animated.timing(rotateAnimValueRef.current, config),
-            Animated.timing(dropDownAnimValueRef.current, config),
-        ]).start();
-    }, [collapsed, shouldAnimate, animationConfig]);
-    // Memoize callbacks
-    const handleToggle = useCallback(() => {
-        setCollapsed(!collapsed);
-    }, [collapsed]);
-    const handleItemPress = useCallback((body) => {
-        onPressItem?.(data.title, body);
-    }, [onPressItem, data.title]);
-    const handleLayout = useCallback((e) => {
-        setItemHeight(e.nativeEvent.layout.height);
-    }, []);
-    // Calculate margin based on size
-    const toggleMargin = typeof size === 'number'
+                ? 56
+                : 48;
+    const vertical = numeric
+        ? size * 0.4
+        : size === 'small'
+            ? 6
+            : size === 'large'
+                ? 10
+                : 8;
+    const horizontal = numeric
         ? size * 0.6
         : size === 'small'
             ? 10
             : size === 'large'
                 ? 14
                 : 12;
-    // Memoize toggle element container
-    const toggleElContainer = useMemo(() => (_jsx(Animated.View, { style: [
-            css `
-            margin-right: ${toggleElementPosition === 'left'
-                ? toggleMargin
-                : 0}px;
-          `,
-            {
-                transform: [
-                    {
-                        rotate: rotateAnimValueRef.current.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: ['0deg', '180deg'],
-                        }),
-                    },
-                ],
-            },
-            styles?.toggleElement,
-        ], children: toggleElement || defaultToggleElement })), [
-        toggleElement,
-        defaultToggleElement,
-        toggleElementPosition,
-        toggleMargin,
-        styles?.toggleElement,
-    ]);
-    // Memoize container styles
-    const containerStyles = useMemo(() => [
-        css `
-        background-color: transparent;
-        overflow: hidden;
-        flex-direction: column-reverse;
-      `,
-        styles?.container,
-    ], [styles?.container]);
-    const titleContainerStyles = useMemo(() => [
-        css `
-        justify-content: ${toggleElementPosition === 'right'
-            ? 'space-between'
-            : 'flex-start'};
-      `,
-        styles?.titleContainer,
-    ], [toggleElementPosition, styles?.titleContainer]);
-    // Memoize animated styles
-    const animatedItemStyles = useMemo(() => [
-        {
-            opacity: fadeItemAnim,
-            height: dropDownAnimValueRef.current.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, itemHeight],
-            }),
-        },
-    ], [fadeItemAnim, itemHeight]);
-    // Calculate font sizes based on size prop
-    const titleFontSize = typeof size === 'number'
+    const titleFontSize = numeric
         ? size
         : size === 'small'
             ? 14
             : size === 'large'
                 ? 18
                 : 16;
-    const itemFontSize = typeof size === 'number'
+    const itemFontSize = numeric
         ? size * 0.875
         : size === 'small'
             ? 12
             : size === 'large'
                 ? 16
                 : 14;
-    return (_jsxs(Animated.View, { style: containerStyles, children: [_jsx(View, { accessibilityElementsHidden: true, "aria-hidden": true, importantForAccessibility: "no-hide-descendants", onLayout: handleLayout, style: css `
-          position: absolute;
-          opacity: 0;
-        `, testID: `measure-body-${testID}`, children: data.items.map((body, index) => (_jsx(ItemTouch, { accessible: false, activeOpacity: activeOpacity, disabled: true, onPress: () => handleItemPress(body), "$size": size, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsx(Animated.View, { accessibilityElementsHidden: collapsed, accessibilityState: { expanded: !collapsed }, "aria-hidden": collapsed, importantForAccessibility: collapsed ? 'no-hide-descendants' : 'auto', style: animatedItemStyles, testID: `body-${testID}`, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, disabled: collapsed, onPress: () => handleItemPress(body), style: styles?.itemContainer, "$size": size, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsxs(TitleTouch, { activeOpacity: activeOpacity, "aria-expanded": !collapsed, onPress: handleToggle, accessibilityRole: "button", accessibilityLabel: typeof data.title === 'string' ? data.title : 'Accordion section', accessibilityState: { expanded: !collapsed }, accessibilityHint: collapsed ? 'Double tap to expand' : 'Double tap to collapse', style: titleContainerStyles, testID: `title-${testID}`, "$size": size, children: [toggleElementPosition === 'left' ? toggleElContainer : null, typeof data.title === 'string' && !renderTitle ? (_jsx(Typography.Heading4, { style: [{ fontSize: titleFontSize }, styles?.titleText], children: data.title })) : (renderTitle?.(data.title)), toggleElementPosition === 'right' ? toggleElContainer : null] })] }));
+    const iconSize = numeric
+        ? size * 0.7
+        : size === 'small'
+            ? 12
+            : size === 'large'
+                ? 16
+                : 14;
+    const toggleView = (_jsx(Animated.View, { style: [
+            {
+                marginRight: toggleElementPosition === 'left' ? horizontal : 0,
+                transform: [{ rotate: expanded ? '180deg' : '0deg' }],
+                transitionProperty: 'transform',
+                transitionDuration: duration,
+                transitionTimingFunction: 'ease-out',
+            },
+            styles?.toggleElement,
+        ], children: toggleElement === undefined ? (_jsx(Icon, { name: "CaretDown", color: theme.text.basic, size: iconSize })) : (toggleElement) }));
+    return (_jsxs(Animated.View, { collapsable: false, layout: transition, style: [layout.container, styles?.container], children: [renderHeader ? (renderHeader({ title: data.title, expanded, toggle })) : (_jsxs(TouchableOpacity, { activeOpacity: activeOpacity, "aria-expanded": expanded, accessibilityRole: "button", accessibilityLabel: typeof data.title === 'string' ? data.title : 'Accordion section', accessibilityState: { expanded }, accessibilityHint: expanded ? 'Double tap to collapse' : 'Double tap to expand', onPress: toggle, style: [
+                    layout.title,
+                    {
+                        minHeight: titleHeight,
+                        paddingVertical: vertical,
+                        paddingHorizontal: horizontal,
+                        backgroundColor: theme.bg.basic,
+                        justifyContent: toggleElementPosition === 'right'
+                            ? 'space-between'
+                            : 'flex-start',
+                    },
+                    styles?.titleContainer,
+                ], testID: `title-${testID}`, children: [toggleElementPosition === 'left' ? toggleView : null, renderTitle ? (renderTitle(data.title)) : typeof data.title === 'string' ? (_jsx(Typography.Heading4, { style: [
+                            { fontSize: titleFontSize, flexShrink: 1 },
+                            styles?.titleText,
+                        ], children: data.title })) : null, toggleElementPosition === 'right' ? toggleView : null] })), _jsx(Animated.View, { collapsable: false, layout: transition, accessibilityElementsHidden: !expanded, accessibilityState: { expanded }, "aria-hidden": !expanded, importantForAccessibility: expanded ? 'auto' : 'no-hide-descendants', pointerEvents: expanded ? 'auto' : 'none', style: [
+                    layout.body,
+                    {
+                        height: expanded ? undefined : 0,
+                        opacity: expanded ? 1 : 0,
+                        transitionProperty: 'opacity',
+                        transitionDuration: duration,
+                        transitionTimingFunction: 'ease-out',
+                    },
+                ], testID: `body-${testID}`, children: expanded ? (_jsx(Animated.View, { collapsable: false, entering: entering, exiting: exiting, children: data.items.map((body, index) => {
+                        const content = renderItem ? (renderItem(body)) : typeof body === 'string' ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : null;
+                        const itemStyle = [
+                            {
+                                backgroundColor: theme.bg.paper,
+                                paddingVertical: vertical,
+                                paddingHorizontal: horizontal,
+                            },
+                            styles?.itemContainer,
+                        ];
+                        // Do not wrap custom controls in a second pressable.
+                        return onPressItem ? (_jsx(TouchableOpacity, { activeOpacity: activeOpacity, disabled: !expanded, onPress: () => onPressItem(data.title, body), style: itemStyle, children: content }, index)) : (_jsx(View, { style: itemStyle, children: content }, index));
+                    }) })) : null })] }));
 }
-// Export memoized component for better performance
+const layout = StyleSheet.create({
+    container: { overflow: 'hidden', flexDirection: 'column' },
+    title: { flexDirection: 'row', alignItems: 'center' },
+    body: { overflow: 'hidden' },
+});
 export default React.memo(AccordionItem);

package/components/uis/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EACV,MAAM,EACN,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,SAAS,EACV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACzD,uBAAuB,CAAC,EAAE,IAAI,CAC5B,uBAAuB,EACvB,SAAS,GAAG,eAAe,GAAG,OAAO,CACtC,CAAC;IACF,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAkKF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,IAAc,EACd,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,OAAe,EACf,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAmB,EACnB,uBAAuB,EACvB,YAAgB,EAChB,YAAY,EACZ,OAAgD,EAChD,cAAc,EACd,kBAAkB,GACnB,EAAE,KAAK,GAAG,YAAY,CA0MtB;wBAGoC,OAAO,MAAM;AAAlD,wBAAmD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EACV,MAAM,EAEN,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,SAAS,EACV,MAAM,cAAc,CAAC;AAUtB,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACzD,uBAAuB,CAAC,EAAE,IAAI,CAC5B,uBAAuB,EACvB,SAAS,GAAG,eAAe,GAAG,OAAO,CACtC,CAAC;IACF,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAkKF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,IAAc,EACd,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,OAAe,EACf,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAmB,EACnB,uBAAuB,EACvB,YAAgB,EAChB,YAAY,EACZ,OAAgD,EAChD,cAAc,EACd,kBAAkB,GACnB,EAAE,KAAK,GAAG,YAAY,CA2OtB;wBAGoC,OAAO,MAAM;AAAlD,wBAAmD"}

package/components/uis/Button/Button.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo } from 'react';
-import { TouchableHighlight, View } from 'react-native';
+import { Platform, TouchableHighlight, View } from 'react-native';
 import { styled, css } from 'kstyled';
 import { useTheme } from '../../../providers/ThemeProvider';
 import { cloneElemWithDefaultColors } from '../../../utils/guards';
 import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator';
 import { Typography } from '../Typography/Typography';
+import { CustomPressable } from '../CustomPressable/CustomPressable';
 import * as Haptics from 'expo-haptics';
 import { useHoverState } from '../../../hooks/useHoverState';
 const ButtonContainer = styled.View `
@@ -162,7 +163,9 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
                 element: startElement,
                 backgroundColor: viewStyle?.backgroundColor,
                 color: textStyle?.color,
-            }), !text || typeof text === 'string' ? (_jsx(Typography.Body2, { style: compositeStyles.text, children: text })) : (text), cloneElemWithDefaultColors({
+            }), !text || typeof text === 'string' ? (
+            // Keep command labels on one line during Android intrinsic remeasurement.
+            _jsx(Typography.Body2, { numberOfLines: 1, style: compositeStyles.text, children: text })) : (text), cloneElemWithDefaultColors({
                 element: endElement,
                 backgroundColor: viewStyle?.backgroundColor,
                 color: textStyle?.color,
@@ -175,7 +178,7 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
         textStyle?.color,
     ]);
     // Memoize container renderer
-    const renderContainer = useCallback(({ children, loadingView, }) => (_jsxs(ButtonContainer, { "$disabled": innerDisabled, "$size": size, style: [
+    const renderContainer = useCallback(({ children, loadingView, }) => (_jsxs(ButtonContainer, { collapsable: false, "$disabled": innerDisabled, "$size": size, style: [
             hovered && !innerDisabled && compositeStyles.hovered,
             compositeStyles.container,
             type === 'text' &&
@@ -184,7 +187,7 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
             `,
             innerDisabled && compositeStyles.disabled,
             !!borderRadius && { borderRadius },
-        ], testID: loading ? 'loading-view' : 'button-container', "$type": type, children: [_jsx(View, { collapsable: false, style: compositeStyles.content, children: children }), _jsx(View, { style: compositeStyles.loading, children: loading ? loadingView : null })] })), [
+        ], testID: loading ? 'loading-view' : 'button-container', "$type": type, children: [_jsx(View, { collapsable: false, style: compositeStyles.content, children: children }), _jsx(View, { collapsable: false, style: compositeStyles.loading, children: loading ? loadingView : null })] })), [
         innerDisabled,
         size,
         compositeStyles.container,
@@ -193,6 +196,7 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
         compositeStyles.content,
         compositeStyles.loading,
         hovered,
+        borderRadius,
         type,
         loading,
     ]);
@@ -209,8 +213,20 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
         style,
         css `
         border-radius: ${borderRadius}px;
+        overflow: hidden;
       `,
     ], [style, borderRadius, type]);
+    if (Platform.OS === 'android') {
+        return (_jsx(CustomPressable, { ...touchableHighlightProps, accessibilityLabel: accessibilityLabel ?? (typeof text === 'string' ? text : undefined), accessibilityRole: "button", accessibilityState: {
+                ...touchableHighlightProps?.accessibilityState,
+                busy: loading,
+                disabled: innerDisabled || loading,
+            }, disabled: innerDisabled || loading, hitSlop: hitSlop, onPress: handlePress, style: buttonStyles, testID: testID, android_ripple: {
+                color: touchableHighlightProps?.underlayColor ?? theme.role.underlay,
+                foreground: true,
+                borderless: false,
+            }, children: renderContainer({ children: ChildView, loadingView: LoadingView }) }));
+    }
     return (_jsx(TouchableHighlight, { accessibilityLabel: accessibilityLabel ?? (typeof text === 'string' ? text : undefined), accessibilityRole: "button", "aria-busy": loading, "aria-disabled": innerDisabled || loading || !onPress, activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: handlePress, style: buttonStyles, testID: testID, underlayColor: theme.role.underlay, ...touchableHighlightProps, accessibilityState: {
             ...touchableHighlightProps?.accessibilityState,
             busy: loading,

package/components/uis/CustomPressable/CustomPressable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPressable.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/CustomPressable/CustomPressable.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAU,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAOvE,iBAAS,eAAe,CACtB,KAAK,EAAE,cAAc,GAAG;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAC,GACrD,YAAY,CAyCd;wBAG6C,OAAO,eAAe;AAApE,wBAAqE;AACrE,OAAO,EAAC,eAAe,EAAC,CAAC"}
+{"version":3,"file":"CustomPressable.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/CustomPressable/CustomPressable.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAU,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAMvE,iBAAS,eAAe,CACtB,KAAK,EAAE,cAAc,GAAG;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAC,GACrD,YAAY,CAgDd;wBAG6C,OAAO,eAAe;AAApE,wBAAqE;AACrE,OAAO,EAAC,eAAe,EAAC,CAAC"}

package/components/uis/CustomPressable/CustomPressable.js

@@ -1,25 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { Pressable } from 'react-native';
-import { css } from 'kstyled';
+import { Platform, Pressable } from 'react-native';
 import { useTheme } from '../../../providers/ThemeProvider';
 const DEFAULT_HIT_SLOP = { top: 4, bottom: 4, left: 6, right: 6 };
 function CustomPressable(props) {
-    const { accessibilityRole = 'button', children, style, hitSlop, ...restProps } = props;
+    const { accessibilityRole = 'button', children, style, hitSlop, android_ripple, ...restProps } = props;
     const { theme } = useTheme();
-    const effectiveHitSlop = useMemo(() => hitSlop || DEFAULT_HIT_SLOP, [hitSlop]);
+    const effectiveHitSlop = useMemo(() => hitSlop ?? DEFAULT_HIT_SLOP, [hitSlop]);
     const styleFunction = useMemo(() => ({ pressed }) => {
-        if (pressed) {
-            return [
-                css `
-              background-color: ${theme.role.underlay};
-            `,
-                style,
-            ];
-        }
+        // Android paints one foreground ripple, including over filled children.
+        // Its native outline follows the caller's shape instead of the hit slop.
+        if (Platform.OS === 'android')
+            return [style, { overflow: 'hidden' }];
+        if (pressed)
+            return [style, { opacity: 0.72 }];
         return style;
     }, [theme.role.underlay, style]);
-    return (_jsx(Pressable, { accessibilityRole: accessibilityRole, hitSlop: effectiveHitSlop, style: styleFunction, ...restProps, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: accessibilityRole, hitSlop: effectiveHitSlop, android_ripple: Platform.OS === 'android'
+            ? {
+                color: theme.role.underlay,
+                foreground: true,
+                borderless: false,
+                ...android_ripple,
+            }
+            : android_ripple, style: styleFunction, ...restProps, children: children }));
 }
 // Export memoized component for better performance
 export default React.memo(CustomPressable);

package/components/uis/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAC,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIhF,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAK3C,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAGxC,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAEF,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAEhD,KAAK,eAAe,GAChB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AAEZ,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAkD5D,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB,CAAC,EAAE,IAAI,CAAC,uBAAuB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAc,EACd,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,OAAe,EACf,cAAc,EACd,IAAI,EACJ,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,kBAAkB,GACnB,EAAE,eAAe,GAAG,YAAY,CAwLhC;wBAGwC,OAAO,UAAU;AAA1D,wBAA2D"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAEV,SAAS,EACT,uBAAuB,EACvB,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAK3C,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAIxC,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAEF,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAEhD,KAAK,eAAe,GAChB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AAEZ,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAkD5D,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB,CAAC,EAAE,IAAI,CAAC,uBAAuB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAc,EACd,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,OAAe,EACf,cAAc,EACd,IAAI,EACJ,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,kBAAkB,GACnB,EAAE,eAAe,GAAG,YAAY,CAqNhC;wBAGwC,OAAO,UAAU;AAA1D,wBAA2D"}

package/components/uis/IconButton/IconButton.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useMemo } from 'react';
-import { TouchableHighlight, View } from 'react-native';
+import { Platform, TouchableHighlight, View } from 'react-native';
 import { css } from 'kstyled';
 import { Icon } from '../Icon/Icon';
 import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator';
 import { useTheme } from '../../../providers/ThemeProvider';
 import * as Haptics from 'expo-haptics';
 import { useHoverState } from '../../../hooks/useHoverState';
+import { CustomPressable } from '../CustomPressable/CustomPressable';
 // Memoized styles calculation function
 const ButtonStyles = ({ theme, type, color, loading, disabled, }) => {
     const isDisabled = disabled || loading;
-    let backgroundColor = theme.bg.basic;
+    let backgroundColor = 'transparent';
     let borderColor = 'transparent';
     let iconColor = theme.text.basic;
     if (type === 'solid') {
@@ -137,6 +138,13 @@ export function IconButton({ testID, type = 'solid', color = 'primary', size = '
         hovered && !disabled && compositeStyles.hovered,
         disabled && compositeStyles.disabled,
     ], [borderRadiusStr, compositeStyles, hovered, disabled]);
+    if (Platform.OS === 'android') {
+        return (_jsx(View, { style: containerStyles, children: _jsx(CustomPressable, { ...touchableHighlightProps, accessibilityLabel: accessibilityLabel ?? icon, accessibilityRole: "button", accessibilityState: {
+                    ...touchableHighlightProps?.accessibilityState,
+                    busy: loading,
+                    disabled: !!disabled || loading,
+                }, disabled: disabled || loading, onPress: handlePress, style: { borderRadius: 99 }, testID: testID, children: _jsx(View, { collapsable: false, style: innerContainerStyles, testID: loading ? 'loading-view' : 'button-container', children: loading ? LoadingView : IconView }) }) }));
+    }
     return (_jsx(View, { style: containerStyles, children: _jsx(TouchableHighlight, { accessibilityLabel: accessibilityLabel ?? icon, accessibilityRole: "button", "aria-busy": loading, "aria-disabled": !!disabled || loading, activeOpacity: activeOpacity, delayPressIn: 50, disabled: disabled || loading, onPress: handlePress, style: css `
           border-radius: ${borderRadiusStr};
         `, testID: testID, underlayColor: theme.role.underlay, ...touchableHighlightProps, accessibilityState: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.8.0-beta.4",
+  "version": "0.8.0-beta.5",
   "main": "index",
   "react-native": "index",
   "module": "index",