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

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/ReorderableList/ReorderableList.d.ts

@@ -0,0 +1,37 @@
+import { type ReactElement } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface ReorderableListItem<T> {
+    item: T;
+    index: number;
+    /** Place this handle inside the row; other row actions remain independent. */
+    dragHandle: ReactElement | null;
+}
+export interface ReorderableListProps<T> {
+    data: T[];
+    /** Use a stable item identity; index-only keys cannot survive reordering. */
+    keyExtractor: (item: T, index: number) => string;
+    getItemLabel: (item: T) => string;
+    renderItem: (info: ReorderableListItem<T>) => ReactElement;
+    /** Controlled order: update data immediately, then persist/rollback upstream. */
+    onReorder: (data: T[]) => void;
+    disabled?: boolean;
+    extraData?: unknown;
+    accessibilityHint?: string;
+    testID?: string;
+    styles?: {
+        container?: StyleProp<ViewStyle>;
+        content?: ViewStyle;
+        item?: StyleProp<ViewStyle>;
+        handle?: StyleProp<ViewStyle>;
+    };
+    renderHandle?: (info: {
+        item: T;
+        index: number;
+    }) => ReactElement;
+    onDragStateChange?: (dragging: boolean) => void;
+    onEndReached?: () => void;
+    ListEmptyComponent?: ReactElement;
+}
+/** Virtualized, handle-only reordering. Requires the host's GestureHandlerRootView. */
+export declare function ReorderableList<T>(props: ReorderableListProps<T>): ReactElement;
+//# sourceMappingURL=ReorderableList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReorderableList.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/ReorderableList/ReorderableList.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA+B,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAC7E,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAYtB,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,UAAU,EAAE,YAAY,GAAG,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,6EAA6E;IAC7E,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IAC3D,iFAAiF;IACjF,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,IAAI,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,KAAK,YAAY,CAAC;IAChE,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,kBAAkB,CAAC,EAAE,YAAY,CAAC;CACnC;AAED,uFAAuF;AACvF,wBAAgB,eAAe,CAAC,CAAC,EAC/B,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAC7B,YAAY,CAQd"}

package/components/uis/ReorderableList/ReorderableList.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from 'react';
+import { Platform, StyleSheet, View, } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { DraxHandle, DraxProvider, SortableContainer, SortableItem, useSortableList, } from 'react-native-drax';
+import { useTheme } from '../../../providers/ThemeProvider';
+import { Icon } from '../Icon/Icon';
+/** Virtualized, handle-only reordering. Requires the host's GestureHandlerRootView. */
+export function ReorderableList(props) {
+    return (_jsx(View, { style: [layout.container, props.styles?.container], children: _jsx(DraxProvider, { children: _jsx(ReorderableContent, { ...props }) }) }));
+}
+function ReorderableContent({ data, keyExtractor, getItemLabel, renderItem, onReorder, disabled = false, extraData, accessibilityHint = 'Hold and drag to reorder. Adjust up or down to move one place.', testID = 'reorderable-list', styles, renderHandle, onDragStateChange, onEndReached, ListEmptyComponent, }) {
+    const { theme } = useTheme();
+    const scrollRef = useRef(null);
+    const acceptedPositions = useMemo(() => new Map(data.map((item, index) => [keyExtractor(item, index), index + 1])), [data, keyExtractor]);
+    const sortable = useSortableList({
+        data,
+        keyExtractor,
+        onReorder: (event) => {
+            if (!disabled && event.fromIndex !== event.toIndex)
+                onReorder(event.data);
+        },
+        lockToMainAxis: true,
+        // Mouse dragging should begin immediately; touch keeps scroll protection.
+        longPressDelay: Platform.OS === 'web' ? 0 : 220,
+        animationConfig: 'spring',
+        inactiveItemStyle: { opacity: 0.8 },
+        onDragStart: () => onDragStateChange?.(true),
+        onDragEnd: () => onDragStateChange?.(false),
+    });
+    const moveAccessible = useCallback((item, rowIndex, direction) => {
+        if (disabled)
+            return;
+        const key = keyExtractor(item, rowIndex);
+        const from = data.findIndex((row, index) => keyExtractor(row, index) === key);
+        const to = from + direction;
+        if (from < 0 || to < 0 || to >= data.length)
+            return;
+        const next = [...data];
+        next.splice(from, 1);
+        next.splice(to, 0, item);
+        onReorder(next);
+    }, [data, disabled, keyExtractor, onReorder]);
+    return (_jsx(SortableContainer, { sortable: sortable, scrollRef: scrollRef, style: layout.container, children: _jsx(FlashList, { ref: scrollRef, data: sortable.data, extraData: extraData, 
+            // A committed reorder must not scroll to keep the former first item
+            // anchored. The gesture engine already owns motion and autoscroll.
+            maintainVisibleContentPosition: { disabled: true }, 
+            // Stable domain keys also keep recycled editors attached to their item.
+            keyExtractor: keyExtractor, contentContainerStyle: styles?.content, onScroll: sortable.onScroll, onContentSizeChange: sortable.onContentSizeChange, onEndReached: onEndReached, ListEmptyComponent: ListEmptyComponent, scrollEventThrottle: 16, testID: testID, renderItem: ({ item, index }) => (_jsx(SortableItem, { sortable: sortable, index: index, draggable: !disabled, dragHandle: true, style: styles?.item, accessible: false, accessibilityRole: "none", accessibilityLabel: undefined, accessibilityHint: undefined, children: renderItem({
+                    item,
+                    index,
+                    dragHandle: disabled ? null : (_jsx(DraxHandle, { children: _jsx(View, { accessible: true, focusable: true, ...(Platform.OS === 'web'
+                                ? {
+                                    tabIndex: 0,
+                                    onKeyDown: (event) => {
+                                        if (event.key !== 'ArrowUp' &&
+                                            event.key !== 'ArrowDown')
+                                            return;
+                                        event.preventDefault();
+                                        moveAccessible(item, index, event.key === 'ArrowUp' ? -1 : 1);
+                                    },
+                                }
+                                : {}), accessibilityRole: "adjustable", accessibilityLabel: getItemLabel(item), accessibilityHint: accessibilityHint, accessibilityValue: {
+                                min: 1,
+                                max: data.length,
+                                now: acceptedPositions.get(keyExtractor(item, index)) ??
+                                    index + 1,
+                            }, accessibilityActions: [
+                                { name: 'increment' },
+                                { name: 'decrement' },
+                            ], onAccessibilityAction: ({ nativeEvent }) => {
+                                if (nativeEvent.actionName === 'increment')
+                                    moveAccessible(item, index, 1);
+                                if (nativeEvent.actionName === 'decrement')
+                                    moveAccessible(item, index, -1);
+                            }, testID: `${testID}-handle-${keyExtractor(item, index)}`, style: [layout.handle, styles?.handle], children: renderHandle?.({ item, index }) ?? (_jsx(Icon, { name: "DotsSixVertical", size: 22, color: theme.text.label })) }) })),
+                }) })) }) }));
+}
+const layout = StyleSheet.create({
+    container: { flex: 1, minHeight: 0 },
+    handle: {
+        width: 48,
+        minHeight: 48,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/index.d.ts

@@ -18,6 +18,7 @@ export * from './components/uis/PageIndicator/PageIndicator';
 export * from './components/uis/PinchZoom/PinchZoom';
 export * from './components/uis/ParallaxHeader/ParallaxHeader';
 export * from './components/uis/Rating/Rating';
+export * from './components/uis/ReorderableList/ReorderableList';
 export * from './components/uis/RadioGroup/RadioGroup';
 export * from './components/uis/SegmentedControl/SegmentedControl';
 export * from './components/uis/StatusbarBrightness/StatusBarBrightness';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AAGtD,cAAc,iDAAiD,CAAC;AAGhE,cAAc,aAAa,CAAC;AAG5B,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,0DAA0D,CAAC;AACzE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AAGvD,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AAGtD,cAAc,iDAAiD,CAAC;AAGhE,cAAc,aAAa,CAAC;AAG5B,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kDAAkD,CAAC;AACjE,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,0DAA0D,CAAC;AACzE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AAGvD,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/index.js

@@ -22,6 +22,7 @@ export * from './components/uis/PageIndicator/PageIndicator';
 export * from './components/uis/PinchZoom/PinchZoom';
 export * from './components/uis/ParallaxHeader/ParallaxHeader';
 export * from './components/uis/Rating/Rating';
+export * from './components/uis/ReorderableList/ReorderableList';
 export * from './components/uis/RadioGroup/RadioGroup';
 export * from './components/uis/SegmentedControl/SegmentedControl';
 export * from './components/uis/StatusbarBrightness/StatusBarBrightness';

package/node_modules/react-native-drax/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-2026 Nuclear Pasta, SRL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.