zkit-ui 1.0.0

package/dist/ui/Accordion/index.js

@@ -0,0 +1,777 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+exports.AccordionContent = AccordionContent;
+exports.AccordionIndicator = AccordionIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const Text_1 = require("../Text");
+const DEFAULT_DURATION = 220;
+const DEFAULT_EASING = react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic);
+const PRESS_IN_DURATION = 90;
+const PRESS_OUT_DURATION = 140;
+const SEMANTIC_COLORS = {
+    danger: '#DC2626',
+    error: '#DC2626',
+    info: '#2563EB',
+    success: '#16A34A',
+    warn: '#D97706',
+    warning: '#D97706',
+};
+const SIZE_TOKENS = {
+    sm: {
+        itemGap: 8,
+        itemRadius: 12,
+        triggerMinHeight: 44,
+        triggerPaddingHorizontal: 12,
+        triggerPaddingVertical: 10,
+        triggerGap: 8,
+        titleFontSize: 14,
+        titleLineHeight: 19,
+        descriptionFontSize: 12,
+        descriptionLineHeight: 17,
+        contentPaddingHorizontal: 12,
+        contentPaddingTop: 8,
+        contentPaddingBottom: 12,
+        contentOffset: 4,
+        indicatorSize: 20,
+        indicatorStrokeWidth: 2,
+    },
+    md: {
+        itemGap: 10,
+        itemRadius: 14,
+        triggerMinHeight: 46,
+        triggerPaddingHorizontal: 14,
+        triggerPaddingVertical: 12,
+        triggerGap: 10,
+        titleFontSize: 15,
+        titleLineHeight: 21,
+        descriptionFontSize: 13,
+        descriptionLineHeight: 18,
+        contentPaddingHorizontal: 14,
+        contentPaddingTop: 10,
+        contentPaddingBottom: 14,
+        contentOffset: 5,
+        indicatorSize: 22,
+        indicatorStrokeWidth: 2,
+    },
+    lg: {
+        itemGap: 12,
+        itemRadius: 16,
+        triggerMinHeight: 52,
+        triggerPaddingHorizontal: 16,
+        triggerPaddingVertical: 14,
+        triggerGap: 12,
+        titleFontSize: 16,
+        titleLineHeight: 23,
+        descriptionFontSize: 14,
+        descriptionLineHeight: 20,
+        contentPaddingHorizontal: 16,
+        contentPaddingTop: 12,
+        contentPaddingBottom: 16,
+        contentOffset: 6,
+        indicatorSize: 24,
+        indicatorStrokeWidth: 2.25,
+    },
+};
+const AccordionContext = React.createContext(null);
+const AccordionItemContext = React.createContext(null);
+function sameValue(a, b) {
+    return Object.is(a, b) || a === b;
+}
+function hasValue(values, value) {
+    return values.some((item) => sameValue(item, value));
+}
+function uniqueValues(values) {
+    const next = [];
+    for (const value of values) {
+        if (!hasValue(next, value))
+            next.push(value);
+    }
+    return next;
+}
+function areValuesEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i += 1) {
+        if (!sameValue(a[i], b[i]))
+            return false;
+    }
+    return true;
+}
+function normalizePropValues(type, value) {
+    if (type === 'multiple') {
+        return Array.isArray(value) ? uniqueValues(value) : [];
+    }
+    if (value == null || Array.isArray(value))
+        return [];
+    return [value];
+}
+function getNextValues(current, value, open, type, collapsible) {
+    const isOpen = hasValue(current, value);
+    if (type === 'single') {
+        if (open)
+            return isOpen ? current.slice() : [value];
+        if (!isOpen)
+            return current.slice();
+        return collapsible ? [] : current.slice();
+    }
+    if (open)
+        return isOpen ? current.slice() : [...current, value];
+    return isOpen ? current.filter((item) => !sameValue(item, value)) : current.slice();
+}
+function resolveDuration(duration) {
+    if (duration == null || !Number.isFinite(duration))
+        return DEFAULT_DURATION;
+    return Math.max(0, duration);
+}
+function resolveAnimation(animation) {
+    var _a, _b;
+    const duration = animation === false ? 0 : resolveDuration(animation === null || animation === void 0 ? void 0 : animation.duration);
+    const easing = animation === false ? DEFAULT_EASING : (_a = animation === null || animation === void 0 ? void 0 : animation.easing) !== null && _a !== void 0 ? _a : DEFAULT_EASING;
+    const reduceMotion = animation === false ? react_native_reanimated_1.ReduceMotion.Always : (_b = animation === null || animation === void 0 ? void 0 : animation.reduceMotion) !== null && _b !== void 0 ? _b : react_native_reanimated_1.ReduceMotion.System;
+    return {
+        duration,
+        easing,
+        timing: {
+            duration,
+            easing,
+            reduceMotion,
+        },
+    };
+}
+function resolveMetrics(size) {
+    var _a;
+    const token = (_a = SIZE_TOKENS[size]) !== null && _a !== void 0 ? _a : SIZE_TOKENS.md;
+    return {
+        itemGap: (0, zkit_tools_1.wp)(token.itemGap),
+        itemRadius: (0, zkit_tools_1.wp)(token.itemRadius),
+        triggerMinHeight: (0, zkit_tools_1.wp)(token.triggerMinHeight),
+        triggerPaddingHorizontal: (0, zkit_tools_1.wp)(token.triggerPaddingHorizontal),
+        triggerPaddingVertical: (0, zkit_tools_1.wp)(token.triggerPaddingVertical),
+        triggerGap: (0, zkit_tools_1.wp)(token.triggerGap),
+        titleFontSize: (0, zkit_tools_1.wp)(token.titleFontSize),
+        titleLineHeight: (0, zkit_tools_1.wp)(token.titleLineHeight),
+        descriptionFontSize: (0, zkit_tools_1.wp)(token.descriptionFontSize),
+        descriptionLineHeight: (0, zkit_tools_1.wp)(token.descriptionLineHeight),
+        contentPaddingHorizontal: (0, zkit_tools_1.wp)(token.contentPaddingHorizontal),
+        contentPaddingTop: (0, zkit_tools_1.wp)(token.contentPaddingTop),
+        contentPaddingBottom: (0, zkit_tools_1.wp)(token.contentPaddingBottom),
+        contentOffset: (0, zkit_tools_1.wp)(token.contentOffset),
+        indicatorSize: (0, zkit_tools_1.wp)(token.indicatorSize),
+        indicatorStrokeWidth: (0, zkit_tools_1.wp)(token.indicatorStrokeWidth),
+        borderWidth: (0, zkit_tools_1.wp)(1),
+    };
+}
+function isProcessableColor(color) {
+    return (0, react_native_1.processColor)(color) != null;
+}
+function colorToRgba(color, alpha) {
+    const processed = (0, react_native_1.processColor)(color);
+    if (typeof processed !== 'number')
+        return undefined;
+    const normalized = processed >>> 0;
+    const r = (normalized >> 16) & 255;
+    const g = (normalized >> 8) & 255;
+    const b = normalized & 255;
+    const a = Math.max(0, Math.min(1, alpha));
+    return `rgba(${r},${g},${b},${a})`;
+}
+function resolveColorToken(input, fallback, theme) {
+    var _a;
+    if (input == null)
+        return fallback;
+    const key = input.trim();
+    if (!key)
+        return fallback;
+    const resolved = key === 'primary'
+        ? theme.colors.primary
+        : key === 'onPrimary'
+            ? theme.colors.onPrimary
+            : key === 'secondary' || key === 'neutral'
+                ? theme.colors.secondary
+                : key === 'onSecondary'
+                    ? theme.colors.onSecondary
+                    : key === 'surface'
+                        ? theme.colors.surface
+                        : key === 'onSurface'
+                            ? theme.colors.onSurface
+                            : key === 'border'
+                                ? theme.colors.border
+                                : key === 'muted'
+                                    ? theme.colors.muted
+                                    : key === 'disabled'
+                                        ? theme.colors.disabled
+                                        : (_a = SEMANTIC_COLORS[key]) !== null && _a !== void 0 ? _a : key;
+    return isProcessableColor(resolved) ? resolved : fallback;
+}
+function resolveToneColor(tone, theme) {
+    if (tone === 'primary')
+        return theme.colors.primary;
+    if (tone === 'success')
+        return SEMANTIC_COLORS.success;
+    if (tone === 'warning')
+        return SEMANTIC_COLORS.warning;
+    if (tone === 'danger')
+        return SEMANTIC_COLORS.danger;
+    if (tone === 'info')
+        return SEMANTIC_COLORS.info;
+    return theme.colors.muted;
+}
+function resolveColors(variant, tone, color, theme) {
+    const accent = resolveColorToken(color, resolveToneColor(tone, theme), theme);
+    const accentSoft = colorToRgba(accent, 0.08);
+    const dividerSoft = colorToRgba(accent, 0.16);
+    if (variant === 'filled') {
+        return {
+            accent,
+            surface: tone === 'neutral' ? theme.colors.secondary : accentSoft !== null && accentSoft !== void 0 ? accentSoft : theme.colors.secondary,
+            border: 'transparent',
+            divider: dividerSoft !== null && dividerSoft !== void 0 ? dividerSoft : theme.colors.border,
+            title: theme.colors.onSurface,
+            description: theme.colors.muted,
+            disabled: theme.colors.disabled,
+        };
+    }
+    if (variant === 'plain') {
+        return {
+            accent,
+            surface: 'transparent',
+            border: 'transparent',
+            divider: theme.colors.border,
+            title: theme.colors.onSurface,
+            description: theme.colors.muted,
+            disabled: theme.colors.disabled,
+        };
+    }
+    return {
+        accent,
+        surface: theme.colors.surface,
+        border: theme.colors.border,
+        divider: theme.colors.border,
+        title: theme.colors.onSurface,
+        description: theme.colors.muted,
+        disabled: theme.colors.disabled,
+    };
+}
+function resolveSlot(slot, state) {
+    return typeof slot === 'function' ? slot(state) : slot;
+}
+function hasRenderableNode(node) {
+    return node !== null && node !== undefined && node !== false;
+}
+function isPrimitiveTextNode(node) {
+    return typeof node === 'string' || typeof node === 'number';
+}
+function sanitizeNativeId(input) {
+    return input.replace(/[^a-zA-Z0-9_-]/g, '');
+}
+function useAccordionContext() {
+    const ctx = React.useContext(AccordionContext);
+    if (!ctx) {
+        throw new Error('[zkit-ui] Accordion components must be wrapped in <Accordion />');
+    }
+    return ctx;
+}
+function useAccordionItemContext() {
+    const ctx = React.useContext(AccordionItemContext);
+    if (!ctx) {
+        throw new Error('[zkit-ui] AccordionTrigger/Content/Indicator must be wrapped in <AccordionItem />');
+    }
+    return ctx;
+}
+class AccordionStore {
+    constructor(initialValues) {
+        this.listeners = new Set();
+        this.subscribe = (listener) => {
+            this.listeners.add(listener);
+            return () => {
+                this.listeners.delete(listener);
+            };
+        };
+        this.getValues = () => this.values;
+        this.isOpen = (value) => hasValue(this.values, value);
+        this.setValues = (values) => {
+            const next = uniqueValues(values);
+            if (areValuesEqual(this.values, next))
+                return false;
+            this.values = next;
+            this.emit();
+            return true;
+        };
+        this.values = uniqueValues(initialValues);
+    }
+    emit() {
+        for (const listener of this.listeners)
+            listener();
+    }
+}
+function Accordion(props) {
+    var _a, _b;
+    const { children, disabled = false, variant = 'card', tone = 'neutral', size = 'md', color, animation, mountStrategy = 'eager', itemGap, itemStyle, style, ...viewProps } = props;
+    const theme = (0, useTheme_1.useTheme)();
+    const type = (_a = props.type) !== null && _a !== void 0 ? _a : 'single';
+    const collapsible = type === 'single' ? (_b = props.collapsible) !== null && _b !== void 0 ? _b : true : true;
+    const isControlled = props.value !== undefined;
+    const controlledValues = React.useMemo(() => (isControlled ? normalizePropValues(type, props.value) : []), [isControlled, props.value, type]);
+    const storeRef = React.useRef(null);
+    if (!storeRef.current) {
+        const initialValue = isControlled ? props.value : props.defaultValue;
+        storeRef.current = new AccordionStore(normalizePropValues(type, initialValue));
+    }
+    const store = storeRef.current;
+    const onChange = props.onChange;
+    React.useLayoutEffect(() => {
+        if (!isControlled)
+            return;
+        store.setValues(controlledValues);
+    }, [controlledValues, isControlled, store]);
+    React.useLayoutEffect(() => {
+        if (isControlled || type !== 'single')
+            return;
+        const current = store.getValues();
+        if (current.length > 1)
+            store.setValues(current.slice(0, 1));
+    }, [isControlled, store, type]);
+    const emitChange = React.useCallback((next) => {
+        var _a;
+        if (type === 'multiple') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(next.slice());
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange((_a = next[0]) !== null && _a !== void 0 ? _a : null);
+    }, [onChange, type]);
+    const setItemOpen = React.useCallback((value, open) => {
+        if (disabled)
+            return;
+        const current = store.getValues();
+        const next = getNextValues(current, value, open, type, collapsible);
+        if (areValuesEqual(current, next))
+            return;
+        if (!isControlled)
+            store.setValues(next);
+        emitChange(next);
+    }, [collapsible, disabled, emitChange, isControlled, store, type]);
+    const metrics = React.useMemo(() => {
+        const resolved = resolveMetrics(size);
+        return itemGap === undefined ? resolved : { ...resolved, itemGap };
+    }, [itemGap, size]);
+    const colors = React.useMemo(() => resolveColors(variant, tone, color, theme), [color, theme, tone, variant]);
+    const resolvedAnimation = React.useMemo(() => resolveAnimation(animation), [animation]);
+    const rootStyle = React.useMemo(() => [{ gap: metrics.itemGap }, style], [metrics.itemGap, style]);
+    const ctx = React.useMemo(() => ({
+        store,
+        type,
+        collapsible,
+        disabled,
+        variant,
+        size,
+        tone,
+        mountStrategy,
+        metrics,
+        colors,
+        animation: resolvedAnimation,
+        itemStyle,
+        setItemOpen,
+    }), [
+        store,
+        type,
+        collapsible,
+        disabled,
+        variant,
+        size,
+        tone,
+        mountStrategy,
+        metrics,
+        colors,
+        resolvedAnimation,
+        itemStyle,
+        setItemOpen,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(AccordionContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ...viewProps, style: rootStyle, children: children }) }));
+}
+function AccordionItem({ value, disabled = false, style, children, accessibilityState, ...viewProps }) {
+    const accordion = useAccordionContext();
+    const reactId = React.useId();
+    const idBase = React.useMemo(() => `zkit-accordion-${sanitizeNativeId(reactId)}`, [reactId]);
+    const triggerId = `${idBase}-trigger`;
+    const contentId = `${idBase}-content`;
+    const getOpenSnapshot = React.useCallback(() => accordion.store.isOpen(value), [accordion.store, value]);
+    const open = React.useSyncExternalStore(accordion.store.subscribe, getOpenSnapshot, getOpenSnapshot);
+    const resolvedDisabled = accordion.disabled || disabled;
+    const openProgress = (0, react_native_reanimated_1.useSharedValue)(open ? 1 : 0);
+    React.useEffect(() => {
+        openProgress.value = (0, react_native_reanimated_1.withTiming)(open ? 1 : 0, accordion.animation.timing);
+    }, [accordion.animation, open, openProgress]);
+    const setOpen = React.useCallback((nextOpen) => {
+        if (resolvedDisabled)
+            return;
+        accordion.setItemOpen(value, nextOpen);
+    }, [accordion, resolvedDisabled, value]);
+    const toggle = React.useCallback(() => {
+        setOpen(!open);
+    }, [open, setOpen]);
+    const itemCtx = React.useMemo(() => ({
+        open,
+        disabled: resolvedDisabled,
+        value,
+        toggle,
+        setOpen,
+        openProgress,
+        metrics: accordion.metrics,
+        colors: accordion.colors,
+        animation: accordion.animation,
+        mountStrategy: accordion.mountStrategy,
+        triggerId,
+        contentId,
+    }), [
+        accordion.animation,
+        accordion.colors,
+        accordion.metrics,
+        accordion.mountStrategy,
+        contentId,
+        open,
+        openProgress,
+        resolvedDisabled,
+        setOpen,
+        toggle,
+        triggerId,
+        value,
+    ]);
+    const itemStyle = React.useMemo(() => [
+        styles.item,
+        {
+            backgroundColor: accordion.colors.surface,
+            borderColor: accordion.colors.border,
+            borderRadius: accordion.metrics.itemRadius,
+            borderWidth: accordion.variant === 'plain' ? 0 : accordion.metrics.borderWidth,
+        },
+        accordion.itemStyle,
+        style,
+    ], [
+        accordion.colors.border,
+        accordion.colors.surface,
+        accordion.itemStyle,
+        accordion.metrics.borderWidth,
+        accordion.metrics.itemRadius,
+        accordion.variant,
+        style,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(AccordionItemContext.Provider, { value: itemCtx, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { ...viewProps, accessibilityState: {
+                ...accessibilityState,
+                disabled: resolvedDisabled,
+                expanded: open,
+            }, style: itemStyle, children: children }) }));
+}
+function AccordionTrigger({ children, title, description, leading, trailing, indicator, disabled: disabledProp = false, pressEffect = 'opacity', titleNumberOfLines = 1, descriptionNumberOfLines = 2, style, contentStyle, textContainerStyle, titleStyle, descriptionStyle, onPress, onPressIn, onPressOut, accessibilityRole, accessibilityState, nativeID, ...pressableProps }) {
+    const item = useAccordionItemContext();
+    const disabled = item.disabled || disabledProp;
+    const pressSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const state = React.useMemo(() => ({
+        open: item.open,
+        disabled,
+        value: item.value,
+        toggle: item.toggle,
+        setOpen: item.setOpen,
+    }), [disabled, item.open, item.setOpen, item.toggle, item.value]);
+    const leadingNode = resolveSlot(leading, state);
+    const trailingNode = resolveSlot(trailing, state);
+    const indicatorNode = indicator === false
+        ? null
+        : resolveSlot(indicator === undefined ? (0, jsx_runtime_1.jsx)(AccordionIndicator, {}) : indicator, state);
+    const childNode = resolveSlot(children, state);
+    const titleNode = resolveSlot(title, state);
+    const descriptionNode = resolveSlot(description, state);
+    const hasCustomChildren = hasRenderableNode(childNode);
+    const pressInTiming = React.useMemo(() => ({
+        duration: PRESS_IN_DURATION,
+        easing: item.animation.easing,
+        reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+    }), [item.animation.easing]);
+    const pressOutTiming = React.useMemo(() => ({
+        duration: PRESS_OUT_DURATION,
+        easing: item.animation.easing,
+        reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+    }), [item.animation.easing]);
+    React.useEffect(() => {
+        if (!disabled)
+            return;
+        pressSv.value = (0, react_native_reanimated_1.withTiming)(0, pressOutTiming);
+    }, [disabled, pressOutTiming, pressSv]);
+    const animatedContentStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacityEnabled = pressEffect === 'opacity' || pressEffect === 'scale-opacity';
+        const scaleEnabled = pressEffect === 'scale' || pressEffect === 'scale-opacity';
+        const opacity = disabled ? 0.52 : opacityEnabled ? (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [1, 0.86]) : 1;
+        const scale = scaleEnabled ? (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [1, 0.992]) : 1;
+        return {
+            opacity,
+            transform: [{ scale }],
+        };
+    }, [disabled, pressEffect]);
+    const renderedTitle = isPrimitiveTextNode(titleNode) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: titleNumberOfLines, style: [
+            styles.title,
+            {
+                color: disabled ? item.colors.disabled : item.colors.title,
+                fontSize: item.metrics.titleFontSize,
+                lineHeight: item.metrics.titleLineHeight,
+            },
+            titleStyle,
+        ], children: titleNode })) : (titleNode);
+    const renderedDescription = isPrimitiveTextNode(descriptionNode) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: descriptionNumberOfLines, style: [
+            styles.description,
+            {
+                color: disabled ? item.colors.disabled : item.colors.description,
+                fontSize: item.metrics.descriptionFontSize,
+                lineHeight: item.metrics.descriptionLineHeight,
+            },
+            descriptionStyle,
+        ], children: descriptionNode })) : (descriptionNode);
+    const renderedMain = hasCustomChildren ? (childNode) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.textStack, textContainerStyle], children: [hasRenderableNode(renderedTitle) ? renderedTitle : null, hasRenderableNode(renderedDescription) ? renderedDescription : null] }));
+    const resolvedStyle = React.useCallback((stateArg) => {
+        const userStyle = typeof style === 'function' ? style(stateArg) : style;
+        return [
+            styles.trigger,
+            {
+                minHeight: item.metrics.triggerMinHeight,
+                paddingHorizontal: item.metrics.triggerPaddingHorizontal,
+                paddingVertical: item.metrics.triggerPaddingVertical,
+                borderBottomColor: item.open ? item.colors.divider : 'transparent',
+                borderBottomWidth: item.metrics.borderWidth,
+            },
+            userStyle,
+        ];
+    }, [
+        item.colors.divider,
+        item.metrics.borderWidth,
+        item.metrics.triggerMinHeight,
+        item.metrics.triggerPaddingHorizontal,
+        item.metrics.triggerPaddingVertical,
+        item.open,
+        style,
+    ]);
+    const handlePress = React.useCallback((event) => {
+        if (disabled)
+            return;
+        item.toggle();
+        onPress === null || onPress === void 0 ? void 0 : onPress(event);
+    }, [disabled, item, onPress]);
+    const handlePressIn = React.useCallback((event) => {
+        if (!disabled && pressEffect !== 'none') {
+            pressSv.value = (0, react_native_reanimated_1.withTiming)(1, pressInTiming);
+        }
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+    }, [disabled, onPressIn, pressEffect, pressInTiming, pressSv]);
+    const handlePressOut = React.useCallback((event) => {
+        pressSv.value = (0, react_native_reanimated_1.withTiming)(0, pressOutTiming);
+        onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+    }, [onPressOut, pressOutTiming, pressSv]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...pressableProps, nativeID: nativeID !== null && nativeID !== void 0 ? nativeID : item.triggerId, accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : 'button', accessibilityState: {
+            ...accessibilityState,
+            expanded: item.open,
+            disabled,
+        }, disabled: disabled, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: resolvedStyle, children: (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [
+                styles.triggerContent,
+                { gap: item.metrics.triggerGap },
+                animatedContentStyle,
+                contentStyle,
+            ], children: [hasRenderableNode(leadingNode) ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.leading, children: leadingNode }) : null, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.main, children: renderedMain }), hasRenderableNode(trailingNode) ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.trailing, children: trailingNode }) : null, hasRenderableNode(indicatorNode) ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.indicatorSlot, children: indicatorNode }) : null] }) }));
+}
+function AccordionContent({ children, mountStrategy, style, containerStyle, nativeID, accessibilityElementsHidden, importantForAccessibility, onLayout, ...viewProps }) {
+    const item = useAccordionItemContext();
+    const strategy = mountStrategy !== null && mountStrategy !== void 0 ? mountStrategy : item.mountStrategy;
+    const measuredHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    const lastMeasuredHeightRef = React.useRef(0);
+    const [hasOpened, setHasOpened] = React.useState(item.open);
+    const [renderForExit, setRenderForExit] = React.useState(strategy === 'eager' || strategy === 'lazy' || item.open);
+    React.useEffect(() => {
+        if (item.open) {
+            setHasOpened(true);
+            setRenderForExit(true);
+            return undefined;
+        }
+        if (strategy === 'eager' || strategy === 'lazy') {
+            setRenderForExit(true);
+            return undefined;
+        }
+        if (item.animation.duration <= 0) {
+            setRenderForExit(false);
+            return undefined;
+        }
+        let cancelled = false;
+        const timeout = setTimeout(() => {
+            if (!cancelled)
+                setRenderForExit(false);
+        }, item.animation.duration);
+        return () => {
+            cancelled = true;
+            clearTimeout(timeout);
+        };
+    }, [item.animation.duration, item.open, strategy]);
+    const shouldRender = strategy === 'eager' ||
+        item.open ||
+        (strategy === 'lazy' && hasOpened) ||
+        (strategy === 'unmountOnExit' && renderForExit);
+    const animatedContainerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const progress = item.openProgress.value;
+        return {
+            height: measuredHeight.value * progress,
+            opacity: (0, react_native_reanimated_1.interpolate)(progress, [0, 0.2, 1], [0, 1, 1]),
+        };
+    }, []);
+    const animatedInnerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            transform: [
+                {
+                    translateY: (0, react_native_reanimated_1.interpolate)(item.openProgress.value, [0, 1], [-item.metrics.contentOffset, 0]),
+                },
+            ],
+        };
+    }, [item.metrics.contentOffset]);
+    const handleLayout = React.useCallback((event) => {
+        const nextHeight = event.nativeEvent.layout.height;
+        const prevHeight = lastMeasuredHeightRef.current;
+        lastMeasuredHeightRef.current = nextHeight;
+        if (item.open && prevHeight > 0 && item.animation.duration > 0) {
+            measuredHeight.value = (0, react_native_reanimated_1.withTiming)(nextHeight, item.animation.timing);
+        }
+        else {
+            measuredHeight.value = nextHeight;
+        }
+        onLayout === null || onLayout === void 0 ? void 0 : onLayout(event);
+    }, [item.animation.duration, item.animation.timing, item.open, measuredHeight, onLayout]);
+    React.useEffect(() => {
+        if (shouldRender)
+            return;
+        lastMeasuredHeightRef.current = 0;
+        measuredHeight.value = 0;
+    }, [measuredHeight, shouldRender]);
+    if (!shouldRender)
+        return null;
+    const hidden = !item.open;
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: item.open ? 'auto' : 'none', style: [styles.contentContainer, animatedContainerStyle, containerStyle], children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.contentInner, animatedInnerStyle], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ...viewProps, collapsable: false, nativeID: nativeID !== null && nativeID !== void 0 ? nativeID : item.contentId, accessibilityElementsHidden: accessibilityElementsHidden !== null && accessibilityElementsHidden !== void 0 ? accessibilityElementsHidden : hidden, importantForAccessibility: importantForAccessibility !== null && importantForAccessibility !== void 0 ? importantForAccessibility : (hidden ? 'no-hide-descendants' : 'auto'), onLayout: handleLayout, style: [
+                    styles.content,
+                    {
+                        paddingBottom: item.metrics.contentPaddingBottom,
+                        paddingHorizontal: item.metrics.contentPaddingHorizontal,
+                        paddingTop: item.metrics.contentPaddingTop,
+                    },
+                    style,
+                ], children: children }) }) }));
+}
+function AccordionIndicator({ children, style, color, size, strokeWidth, closedRotation = -90, openRotation = 0, }) {
+    const item = useAccordionItemContext();
+    const resolvedSize = size !== null && size !== void 0 ? size : item.metrics.indicatorSize;
+    const resolvedStrokeWidth = strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : item.metrics.indicatorStrokeWidth;
+    const chevronSize = Math.max((0, zkit_tools_1.wp)(6), Math.round(resolvedSize * 0.34));
+    const resolvedColor = color !== null && color !== void 0 ? color : (item.disabled ? item.colors.disabled : item.colors.accent);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const deg = closedRotation + (openRotation - closedRotation) * item.openProgress.value;
+        return {
+            transform: [{ rotateZ: `${deg}deg` }],
+        };
+    }, [closedRotation, openRotation]);
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [styles.indicator, { width: resolvedSize, height: resolvedSize }, animatedStyle, style], children: children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                styles.chevron,
+                {
+                    width: chevronSize,
+                    height: chevronSize,
+                    borderRightWidth: resolvedStrokeWidth,
+                    borderBottomWidth: resolvedStrokeWidth,
+                    borderRightColor: resolvedColor,
+                    borderBottomColor: resolvedColor,
+                },
+            ] })) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    item: {
+        overflow: 'hidden',
+    },
+    trigger: {
+        justifyContent: 'center',
+    },
+    triggerContent: {
+        alignItems: 'center',
+        flexDirection: 'row',
+    },
+    leading: {
+        flexShrink: 0,
+    },
+    main: {
+        flex: 1,
+        minWidth: 0,
+    },
+    trailing: {
+        flexShrink: 0,
+    },
+    indicatorSlot: {
+        flexShrink: 0,
+    },
+    textStack: {
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    title: {
+        fontWeight: '600',
+        includeFontPadding: false,
+    },
+    description: {
+        includeFontPadding: false,
+        marginTop: (0, zkit_tools_1.wp)(2),
+    },
+    contentContainer: {
+        overflow: 'hidden',
+    },
+    contentInner: {
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+    content: {},
+    indicator: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    chevron: {
+        transform: [{ rotate: '45deg' }],
+    },
+});