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

package/README.md

@@ -82,7 +82,7 @@ dark theme tokens. Applications that provide product-specific tokens can pass
 | Actions          | Button, CustomPressable, Fab, IconButton                                         |
 | Inputs           | Calendar, Checkbox, EditText, RadioGroup, Rating, SegmentedControl, SwitchToggle |
 | Feedback         | AlertDialog, ErrorBoundary, LoadingIndicator, Snackbar                           |
-| Display          | Accordion, Card, Hr, Icon, ParallaxHeader, Typography                            |
+| Display          | Accordion, Card, Hr, Icon, ParallaxHeader, ReorderableList, Typography           |
 | Media and system | PinchZoom, StatusBarBrightness                                                   |
 
 Each public component has automated tests and Storybook coverage for its main
@@ -91,6 +91,41 @@ controls, responsive behavior, accessibility results, and source examples.
 
 ## Release Matrix
 
+### ReorderableList (0.8.0-beta.4)
+
+`ReorderableList<T>` composes FlashList and react-native-drax. Provide stable
+domain keys, `getItemLabel`, controlled `data`/`onReorder`, and place the
+supplied `dragHandle` inside `renderItem`. Keep the host within
+`GestureHandlerRootView` and give the list a bounded viewport. Apply the new
+order optimistically and roll back on persistence failure. `disabled` removes
+handles without hiding content. The 48pt handles also expose assistive
+increment/decrement actions; no visible Move up/Move down controls are needed.
+Variable row height, autoscroll and reduced motion are owned by the engine.
+FlashList's default visible-item anchoring is disabled for this reorderable
+surface: keeping the former first row anchored after a move would scroll the
+viewport unexpectedly. Accepted orders become real row layout, not permanent
+transforms, so subsequent inline editor height changes remain coherent.
+The row renderer owns text semantics: compact titles may truncate, body copy
+must not inherit that limit. See Display/ReorderableList stories.
+
+Requires FlashList 2 (New Architecture), React 19 and Reanimated 4. The package
+bundles its exact patched, JS-only Drax 1.1.0 dependency and MIT license. The
+reproducible patch is `patches/react-native-drax@1.1.0.patch`; the build refuses
+an unpatched engine. Consumers do not need a local patch, fork or postinstall
+mutation. In RN 0.85+ overlays use `StyleSheet.absoluteFill` instead of removed
+`absoluteFillObject`. Verify the packed engine, not only the source checkout.
+The same patch late-binds SortableItem's snap callback: the container registers
+it in a layout effect, so destructuring it during render captures `undefined`
+and prevents the completed drop from committing. Package-boundary regression
+guards cover source and module output; native drag/persistence remains required.
+The patch also supports partially measured single-column virtualized lists:
+hit testing uses known slots and displacement needs geometry only within the
+changed range. Unknown row heights are not guessed, and grid behavior remains
+unchanged. When the consumer accepts an order, flush the temporary visual
+permutation into actual data and clear shifts in the layout phase. Tests cover
+partial measurement, variable heights, horizontal lists and accepted order;
+native reorder → expand/edit → save → reopen must still be replayed.
+
 The 0.8.0 beta is verified with Expo 54, React Native 0.81, React 19,
 kstyled 0.4, and React Native Web 0.21. This is the release validation matrix,
 not a claim that every consumer must use those exact React or React Native
@@ -119,6 +154,33 @@ main-branch GitHub Actions publish workflow with provenance.
 - [Changelog](./CHANGELOG.md)
 - [Contributing](./CONTRIBUTING.md)
 
+### Custom dialog slots
+
+`AlertDialog` supports the same slots in controlled props and
+`useCPK().alertDialog.open(options)`: `renderHeader`, `renderBody`, and
+`renderActions`. Each receives `{close}`. Render functions take precedence
+over the existing `title`, `body`, and `actions` content; keep `title` as a
+plain string to name the dialog for assistive technology.
+
+```tsx
+alertDialog.open({
+  title: 'Transfer ownership',
+  renderHeader: () => <OwnershipHeader />,
+  renderBody: () => <OwnershipExplanation />,
+  renderActions: ({close}) => [
+    <Button key="cancel" text="Cancel" onPress={close} />,
+    <Button key="confirm" text="Transfer" onPress={requestTransfer} />,
+  ],
+  closeOnTouchOutside: false,
+});
+```
+
+The header may contain an icon or any custom content. Keep its root's height
+intrinsic (not `flex: 1` inside the title slot). Custom action `style` overrides
+the equal-width defaults; `flex: 0, flexBasis: 'auto'` works for intrinsic-width
+actions on native and web. Use `styles.actionContainer` to align the group.
+The backdrop consistently darkens either theme and respects `backdropOpacity`.
+
 ## License
 
 MIT

package/components/modals/AlertDialog/AlertDialog.d.ts

@@ -18,6 +18,13 @@ export type AlertDialogOptions = {
     actions?: ReactElement[];
     showCloseButton?: boolean;
     size?: AlertDialogSizeType;
+    /** Custom slots take precedence over title/body/actions. Keep title for a11y. */
+    renderHeader?: (context: AlertDialogRenderContext) => ReactElement | null;
+    renderBody?: (context: AlertDialogRenderContext) => ReactElement | null;
+    renderActions?: (context: AlertDialogRenderContext) => ReactElement[] | null;
+};
+export type AlertDialogRenderContext = {
+    close: () => void;
 };
 export type AlertDialogProps = {
     style?: StyleProp<ViewStyle>;

package/components/modals/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AA8DlE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,kBAAkB,CAAC;AAEvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpD,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;AAmUF,eAAO,MAAM,WAAW;YA3Ud,SAAS,CAAC,SAAS,CAAC;cAClB,OAAO;cACP,MAAM,IAAI;iEA2UrB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASZ,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AA8DlE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,YAAY,GAAG,IAAI,CAAC;IAC1E,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,YAAY,GAAG,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,YAAY,EAAE,GAAG,IAAI,CAAC;CAC9E,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,kBAAkB,CAAC;AAEvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpD,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;AAyVF,eAAO,MAAM,WAAW;YAjWd,SAAS,CAAC,SAAS,CAAC;cAClB,OAAO;cACP,MAAM,IAAI;iEAiWrB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/modals/AlertDialog/AlertDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useState, useCallback, useMemo, } from 'react';
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useState, useCallback, useMemo, isValidElement, } from 'react';
 import { KeyboardAvoidingView, Modal, Platform, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native';
 import { styled, css } from 'kstyled';
 import { useTheme } from '../../../providers/ThemeProvider';
@@ -52,10 +52,10 @@ const ActionRow = styled.View `
   padding-right: 4px;
   flex-direction: row;
 `;
-function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacityProp, body: bodyProp, closeOnTouchOutside: closeOnTouchOutsideProp, onClose, showCloseButton: showCloseButtonProp, size: sizeProp, style, styles: stylesProp, title: titleProp, visible: visibleProp, }, ref) {
+function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacityProp, body: bodyProp, closeOnTouchOutside: closeOnTouchOutsideProp, onClose, renderHeader: renderHeaderProp, renderBody: renderBodyProp, renderActions: renderActionsProp, showCloseButton: showCloseButtonProp, size: sizeProp, style, styles: stylesProp, title: titleProp, visible: visibleProp, }, ref) {
     const [openedOptions, setOpenedOptions] = useState(null);
     const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
-    const { theme, themeType } = useTheme();
+    const { theme } = useTheme();
     const isControlled = visibleProp !== undefined;
     const visible = isControlled ? visibleProp : uncontrolledVisible;
     const options = isControlled
@@ -63,6 +63,9 @@ function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacit
             actions: actionsProp,
             backdropOpacity: backdropOpacityProp,
             body: bodyProp,
+            renderHeader: renderHeaderProp,
+            renderBody: renderBodyProp,
+            renderActions: renderActionsProp,
             closeOnTouchOutside: closeOnTouchOutsideProp,
             showCloseButton: showCloseButtonProp,
             size: sizeProp,
@@ -95,7 +98,7 @@ function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacit
         open: handleOpen,
         close: handleClose,
     }), [handleOpen, handleClose]);
-    const { backdropOpacity = 0.2, title, body, styles, actions, closeOnTouchOutside = true, showCloseButton = true, size = 'medium', } = options ?? {};
+    const { backdropOpacity = 0.2, title, body, renderHeader, renderBody, renderActions, styles, actions, closeOnTouchOutside = true, showCloseButton = true, size = 'medium', } = options ?? {};
     // Calculate sizes based on size prop
     const sizeConfig = useMemo(() => {
         if (typeof size === 'number') {
@@ -138,10 +141,9 @@ function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacit
                 };
         }
     }, [size]);
-    // Memoize backdrop color calculation
-    const backdropColor = useMemo(() => themeType === 'light'
-        ? `rgba(0,0,0,${backdropOpacity})`
-        : `rgba(255,255,255,${backdropOpacity})`, [themeType, backdropOpacity]);
+    // A scrim subdues the background in either theme. A white dark-mode overlay
+    // washes out the page and reverses the dialog's foreground hierarchy.
+    const backdropColor = useMemo(() => `rgba(0,0,0,${backdropOpacity})`, [backdropOpacity]);
     // Memoize shadow styles
     const shadowStyles = useMemo(() => Platform.OS !== 'web'
         ? {
@@ -157,18 +159,31 @@ function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacit
             handleClose();
     }, [closeOnTouchOutside, handleClose]);
     const handleCloseButtonPress = handleClose;
+    const renderContext = useMemo(() => ({ close: handleClose }), [handleClose]);
     // Memoize title content
-    const titleContent = useMemo(() => typeof title === 'string' ? (_jsx(Typography.Heading3, { style: [{ fontSize: sizeConfig.titleFontSize }, styles?.title], children: title })) : (title), [title, sizeConfig.titleFontSize, styles?.title]);
+    const titleContent = useMemo(() => renderHeader ? (renderHeader(renderContext)) : typeof title === 'string' ? (_jsx(Typography.Heading3, { style: [{ fontSize: sizeConfig.titleFontSize }, styles?.title], children: title })) : (title), [
+        renderHeader,
+        renderContext,
+        title,
+        sizeConfig.titleFontSize,
+        styles?.title,
+    ]);
     // Memoize body content
-    const bodyContent = useMemo(() => typeof body === 'string' ? (_jsx(Typography.Body3, { style: [{ fontSize: sizeConfig.bodyFontSize }, styles?.body], children: body })) : (body), [body, sizeConfig.bodyFontSize, styles?.body]);
+    const bodyContent = useMemo(() => renderBody ? (renderBody(renderContext)) : typeof body === 'string' ? (_jsx(Typography.Body3, { style: [{ fontSize: sizeConfig.bodyFontSize }, styles?.body], children: body })) : (body), [renderBody, renderContext, body, sizeConfig.bodyFontSize, styles?.body]);
     // Memoize actions content
-    const actionsContent = useMemo(() => actions ? (_jsx(ActionRow, { "$marginTop": sizeConfig.actionMarginTop, style: styles?.actionContainer, children: actions.map((action, index) => cloneElement(action, {
-            key: `action-${index}`,
-            style: {
-                flex: 1,
-                marginLeft: index !== 0 ? 12 : 0,
-            },
-        })) })) : null, [actions, sizeConfig.actionMarginTop, styles?.actionContainer]);
+    const renderedActions = useMemo(() => (renderActions ? renderActions(renderContext) : actions), [renderActions, renderContext, actions]);
+    const actionsContent = useMemo(() => renderedActions ? (_jsx(ActionRow, { "$marginTop": sizeConfig.actionMarginTop, style: styles?.actionContainer, children: renderedActions.map((action, index) => isValidElement(action)
+            ? cloneElement(action, {
+                key: `action-${index}`,
+                style: [
+                    {
+                        flex: 1,
+                        marginLeft: index !== 0 ? 12 : 0,
+                    },
+                    action.props.style,
+                ],
+            })
+            : action) })) : null, [renderedActions, sizeConfig.actionMarginTop, styles?.actionContainer]);
     // Memoize close button content
     const closeButtonContent = useMemo(() => showCloseButton ? (_jsx(Button, { accessibilityLabel: "Close dialog", onPress: handleCloseButtonPress, borderRadius: 24, text: _jsx(Icon, { color: theme.text.basic, name: "X", size: sizeConfig.iconSize }), type: "text" })) : null, [
         showCloseButton,
@@ -177,7 +192,7 @@ function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacit
         theme.text.basic,
     ]);
     const titleSlotStyle = useMemo(() => ({ flex: 1, minWidth: 0 }), []);
-    const AlertDialogContent = useMemo(() => (_jsxs(Container, { style: css `
+    const AlertDialogContent = useMemo(() => (_jsxs(Container, { testID: "alert-dialog-overlay", style: css `
           background-color: ${backdropColor};
         `, children: [_jsx(TouchableWithoutFeedback, { onPress: handleBackdropPress, children: _jsx(View, { style: StyleSheet.absoluteFill, testID: "alert-dialog-backdrop" }) }), _jsxs(AlertDialogContainer, { "$size": size, accessibilityRole: "alert", accessibilityLabel: typeof title === 'string' ? title : 'Alert dialog', style: containerStyles, children: [_jsxs(TitleRow, { style: styles?.titleContainer, children: [_jsx(View, { style: titleSlotStyle, children: titleContent }), closeButtonContent] }), _jsx(BodyRow, { "$marginTop": sizeConfig.bodyMarginTop, "$marginBottom": sizeConfig.bodyMarginBottom, style: styles?.bodyContainer, children: bodyContent }), actionsContent] })] })), [
         backdropColor,
@@ -197,7 +212,7 @@ function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacit
     ]);
     return (
     // https://github.com/facebook/react-native/issues/48526#issuecomment-2579478884
-    _jsx(View, { style: style, children: _jsx(Modal, { animationType: "fade", onRequestClose: handleClose, transparent: true, visible: visible, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: keyboardAvoidingStyle, children: closeOnTouchOutside ? (_jsx(TouchableWithoutFeedback, { onPress: handleBackdropPress, children: AlertDialogContent })) : (AlertDialogContent) }) }) }));
+    _jsx(View, { style: style, children: _jsx(Modal, { animationType: "fade", onRequestClose: handleClose, transparent: true, visible: visible, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: keyboardAvoidingStyle, children: AlertDialogContent }) }) }));
 }
 const keyboardAvoidingStyle = { flex: 1 };
 export const AlertDialog = React.memo(forwardRef(AlertDialogImpl));

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);