@xaui/native 0.0.3 → 0.0.5

package/dist/accordion/index.cjs

@@ -0,0 +1,551 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/accordion/index.ts
+var accordion_exports = {};
+__export(accordion_exports, {
+  Accordion: () => Accordion,
+  AccordionItem: () => AccordionItem
+});
+module.exports = __toCommonJS(accordion_exports);
+
+// src/components/accordion/accordion.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react_native8 = require("react-native");
+
+// src/components/accordion/accordion-context.ts
+var import_react = require("react");
+var AccordionContext = (0, import_react.createContext)(void 0);
+var useAccordionContext = () => {
+  const context = (0, import_react.useContext)(AccordionContext);
+  if (!context) {
+    throw new Error("AccordionItem must be used within an Accordion component");
+  }
+  return context;
+};
+
+// src/components/accordion/accordion.hook.ts
+var import_react4 = require("react");
+
+// src/core/theme-context.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+var XUIThemeContext = (0, import_react2.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react3 = require("react");
+var import_react_native2 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react3.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useXUIPalette() {
+  const theme = useXUITheme();
+  return (0, import_react3.useMemo)(() => theme.palette, [theme]);
+}
+
+// src/components/accordion/accordion.hook.ts
+var useAccordionStyles = ({ variant, fullWidth }) => {
+  const theme = useXUITheme();
+  const palette2 = useXUIPalette();
+  const containerStyles = (0, import_react4.useMemo)(() => {
+    const base = {};
+    if (fullWidth) {
+      base.width = "100%";
+    }
+    if (variant === "bordered") {
+      base.borderWidth = theme.borderWidth.md;
+      base.borderColor = theme.mode === "dark" ? palette2.gray[800] : theme.palette.gray[200];
+      base.borderRadius = theme.borderRadius.md;
+      base.marginHorizontal = theme.spacing.sm;
+      base.overflow = "hidden";
+    } else if (variant === "light") {
+      base.paddingHorizontal = theme.spacing.sm;
+    }
+    return base;
+  }, [variant, fullWidth, theme]);
+  const dividerColor = variant === "bordered" ? containerStyles.borderColor : theme.mode === "dark" ? palette2.gray[800] : theme.palette.gray[200];
+  const dividerOpacity = variant === "bordered" ? 1 : 0.2;
+  return { containerStyles, dividerColor, dividerOpacity };
+};
+var useAccordionSelection = ({
+  selectionMode,
+  expandedKeys,
+  defaultExpandedKeys,
+  onSelectionChange
+}) => {
+  const [internalExpandedKeys, setInternalExpandedKeys] = (0, import_react4.useState)(defaultExpandedKeys);
+  const isControlled = expandedKeys !== void 0;
+  const currentExpandedKeys = isControlled ? expandedKeys : internalExpandedKeys;
+  const toggleItem = (0, import_react4.useCallback)(
+    (key) => {
+      const isExpanded = currentExpandedKeys.includes(key);
+      const newExpandedKeys = selectionMode === "toggle" ? isExpanded ? [] : [key] : isExpanded ? currentExpandedKeys.filter((k) => k !== key) : [...currentExpandedKeys, key];
+      if (!isControlled) {
+        setInternalExpandedKeys(newExpandedKeys);
+      }
+      onSelectionChange?.(newExpandedKeys);
+    },
+    [selectionMode, currentExpandedKeys, isControlled, onSelectionChange]
+  );
+  return { currentExpandedKeys, toggleItem };
+};
+var useAccordionContextValue = (config) => {
+  const { currentExpandedKeys, toggleItem } = useAccordionSelection({
+    selectionMode: config.selectionMode,
+    expandedKeys: config.expandedKeys,
+    defaultExpandedKeys: config.defaultExpandedKeys,
+    onSelectionChange: config.onSelectionChange
+  });
+  return (0, import_react4.useMemo)(
+    () => ({
+      variant: config.variant,
+      hideIndicator: config.hideIndicator,
+      disableAnimation: config.disableAnimation,
+      isCompact: config.isCompact,
+      showDivider: config.showDivider,
+      expandedKeys: currentExpandedKeys,
+      disabledKeys: config.disabledKeys,
+      toggleItem
+    }),
+    [
+      config.variant,
+      config.hideIndicator,
+      config.disableAnimation,
+      config.isCompact,
+      config.showDivider,
+      currentExpandedKeys,
+      config.disabledKeys,
+      toggleItem
+    ]
+  );
+};
+
+// src/components/accordion/accordion-item.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/accordion/accordion-item.style.ts
+var import_react_native3 = require("react-native");
+var styles = import_react_native3.StyleSheet.create({
+  startContent: {
+    flexShrink: 0
+  },
+  titleWrapper: {
+    flex: 1
+  },
+  indicator: {
+    flexShrink: 0
+  },
+  hiddenMeasure: {
+    position: "absolute",
+    opacity: 0,
+    left: 0,
+    right: 0,
+    zIndex: -999
+  },
+  contentOverflow: {
+    overflow: "hidden"
+  }
+});
+
+// src/components/accordion/accordion-item.hook.ts
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
+var import_palette2 = require("@xaui/core/palette");
+var useAccordionItemState = (itemKey) => {
+  const context = useAccordionContext();
+  const resolvedItemKey = itemKey ?? "";
+  const isExpanded = resolvedItemKey ? context.expandedKeys.includes(resolvedItemKey) : false;
+  const isDisabled = resolvedItemKey ? context.disabledKeys.includes(resolvedItemKey) : false;
+  const handlePress = (0, import_react5.useCallback)(() => {
+    if (isDisabled || !resolvedItemKey) return;
+    context.toggleItem(resolvedItemKey);
+  }, [isDisabled, resolvedItemKey, context]);
+  return { ...context, resolvedItemKey, isExpanded, isDisabled, handlePress };
+};
+var useAccordionItemAnimation = (isExpanded, disableAnimation) => {
+  const [contentHeight, setContentHeight] = (0, import_react5.useState)(0);
+  const [isMeasured, setIsMeasured] = (0, import_react5.useState)(false);
+  const animatedHeight = (0, import_react5.useRef)(new import_react_native4.Animated.Value(isExpanded ? 1 : 0)).current;
+  const animatedRotation = (0, import_react5.useRef)(new import_react_native4.Animated.Value(isExpanded ? 1 : 0)).current;
+  const prevContentHeight = (0, import_react5.useRef)(contentHeight);
+  (0, import_react5.useEffect)(() => {
+    if (disableAnimation) {
+      animatedHeight.setValue(isExpanded ? 1 : 0);
+      animatedRotation.setValue(isExpanded ? 1 : 0);
+      return;
+    }
+    import_react_native4.Animated.parallel([
+      import_react_native4.Animated.timing(animatedHeight, {
+        toValue: isExpanded ? 1 : 0,
+        duration: 300,
+        easing: import_react_native4.Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: false
+      }),
+      import_react_native4.Animated.timing(animatedRotation, {
+        toValue: isExpanded ? 1 : 0,
+        duration: 300,
+        easing: import_react_native4.Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [isExpanded, disableAnimation, animatedHeight, animatedRotation]);
+  (0, import_react5.useEffect)(() => {
+    if (contentHeight <= 0 || contentHeight === prevContentHeight.current || !isExpanded)
+      return;
+    prevContentHeight.current = contentHeight;
+    if (!disableAnimation && isMeasured) {
+      import_react_native4.Animated.timing(animatedHeight, {
+        toValue: 1,
+        duration: 200,
+        easing: import_react_native4.Easing.out(import_react_native4.Easing.ease),
+        useNativeDriver: false
+      }).start();
+    }
+  }, [contentHeight, isExpanded, disableAnimation, isMeasured, animatedHeight]);
+  const onContentLayout = (0, import_react5.useCallback)((event) => {
+    const height = event.nativeEvent.layout.height;
+    if (height > 0) {
+      setContentHeight(height);
+      setIsMeasured(true);
+    }
+  }, []);
+  const heightInterpolation = animatedHeight.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, contentHeight]
+  });
+  const rotationInterpolation = animatedRotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "90deg"]
+  });
+  return {
+    onContentLayout,
+    heightInterpolation,
+    rotationInterpolation,
+    contentHeight
+  };
+};
+var useBaseStyles = (variant, isDisabled) => {
+  const theme = useXUITheme();
+  const baseStyles = (0, import_react5.useMemo)(() => {
+    const base = { overflow: "hidden" };
+    if (variant === "splitted") {
+      base.paddingHorizontal = theme.spacing.md;
+      base.backgroundColor = theme.colors.default.background;
+      base.borderRadius = theme.borderRadius.md;
+      base.marginBottom = theme.spacing.sm;
+    } else if (variant === "bordered") {
+      base.paddingHorizontal = theme.spacing.md;
+    }
+    if (isDisabled) {
+      base.opacity = 0.4;
+    }
+    return base;
+  }, [variant, isDisabled, theme]);
+  return baseStyles;
+};
+var useTriggerStyles = (variant, isCompact) => {
+  const theme = useXUITheme();
+  const triggerStyles = (0, import_react5.useMemo)(() => {
+    const trigger = {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: isCompact ? theme.spacing.xs : theme.spacing.md,
+      gap: theme.spacing.md
+    };
+    if (variant === "light") {
+      trigger.paddingHorizontal = theme.spacing.sm;
+    }
+    return trigger;
+  }, [variant, isCompact, theme]);
+  return triggerStyles;
+};
+var useTitleTextStyle = (isCompact) => {
+  const theme = useXUITheme();
+  const titleTextStyle = (0, import_react5.useMemo)(
+    () => ({
+      fontSize: isCompact ? theme.fontSizes.md : theme.fontSizes.lg,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.foreground
+    }),
+    [isCompact, theme]
+  );
+  return titleTextStyle;
+};
+var useSubtitleTextStyle = () => {
+  const theme = useXUITheme();
+  const subtitleTextStyle = (0, import_react5.useMemo)(
+    () => ({
+      fontSize: theme.fontSizes.sm,
+      color: import_palette2.colors.gray[500],
+      marginTop: theme.spacing.xs
+    }),
+    [theme]
+  );
+  return subtitleTextStyle;
+};
+var useContentContainerStyle = (isCompact, variant) => {
+  const theme = useXUITheme();
+  const contentContainerStyle = (0, import_react5.useMemo)(
+    () => ({
+      paddingBottom: isCompact ? theme.spacing.sm : theme.spacing.md,
+      paddingHorizontal: variant === "light" ? theme.spacing.sm : 0
+    }),
+    [isCompact, variant, theme]
+  );
+  return contentContainerStyle;
+};
+var useForegroundColor = () => {
+  const theme = useXUITheme();
+  return theme.colors.foreground;
+};
+
+// src/components/accordion/chevron-right-icon.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react_native_svg = __toESM(require("react-native-svg"), 1);
+var ChevronRightIcon = ({
+  color = "#000",
+  size = 20
+}) => {
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native_svg.Path,
+    {
+      d: "M9 18l6-6-6-6",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+};
+
+// src/components/accordion/accordion-item.tsx
+var AccordionItem = ({
+  itemKey,
+  children,
+  title,
+  subtitle,
+  startContent,
+  indicator,
+  baseStyle,
+  headingStyle,
+  triggerStyle,
+  titleStyle,
+  subtitleStyle,
+  contentStyle,
+  startContentStyle,
+  indicatorStyle,
+  onSelected
+}) => {
+  const {
+    variant,
+    hideIndicator,
+    disableAnimation,
+    isCompact,
+    isExpanded,
+    isDisabled,
+    handlePress: togglePress
+  } = useAccordionItemState(itemKey);
+  const handlePress = () => {
+    togglePress();
+    onSelected?.(!isExpanded);
+  };
+  const { onContentLayout, heightInterpolation, rotationInterpolation } = useAccordionItemAnimation(isExpanded, disableAnimation);
+  const baseStyles = useBaseStyles(variant, isDisabled);
+  const triggerStyles = useTriggerStyles(variant, isCompact);
+  const titleTextStyle = useTitleTextStyle(isCompact);
+  const subtitleTextStyle = useSubtitleTextStyle();
+  const contentContainerStyle = useContentContainerStyle(isCompact, variant);
+  const foregroundColor = useForegroundColor();
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [baseStyles, baseStyle] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: headingStyle }, /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.Pressable,
+    {
+      style: [triggerStyles, triggerStyle],
+      onPress: handlePress,
+      disabled: isDisabled,
+      accessibilityRole: "button",
+      accessibilityState: { expanded: isExpanded, disabled: isDisabled }
+    },
+    startContent && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.startContent, startContentStyle] }, startContent),
+    /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.titleWrapper }, typeof title === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Text, { style: [titleTextStyle, titleStyle] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Text, { style: [subtitleTextStyle, subtitleStyle] }, subtitle) : subtitle)),
+    !hideIndicator && /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Animated.View,
+      {
+        style: [
+          styles.indicator,
+          indicatorStyle,
+          { transform: [{ rotate: rotationInterpolation }] }
+        ]
+      },
+      indicator || /* @__PURE__ */ import_react7.default.createElement(ChevronRightIcon, { color: foregroundColor })
+    )
+  )), /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.hiddenMeasure, pointerEvents: "none" }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { onLayout: onContentLayout, style: [contentContainerStyle, contentStyle] }, children)), /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.Animated.View,
+    {
+      style: [
+        styles.contentOverflow,
+        disableAnimation ? { height: isExpanded ? void 0 : 0 } : { height: heightInterpolation }
+      ]
+    },
+    /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [contentContainerStyle, contentStyle] }, children)
+  ));
+};
+AccordionItem.displayName = "AccordionItem";
+
+// src/components/accordion/accordion.utils.ts
+var import_react8 = __toESM(require("react"), 1);
+var getItemKey = (value, fallback) => {
+  if (value === null || value === void 0) return String(fallback);
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  return String(fallback);
+};
+var normalizeElementKey = (value) => {
+  if (typeof value !== "string") return value;
+  return value.startsWith(".$") ? value.slice(2) : value.startsWith(".") ? value.slice(1) : value;
+};
+var isAccordionItem = (value) => import_react8.default.isValidElement(value) && (value.type === AccordionItem || typeof value.type === "function" && value.type.displayName === "AccordionItem");
+var buildAccordionContextParams = (props) => {
+  return {
+    variant: props.variant || "light",
+    hideIndicator: Boolean(props.hideIndicator),
+    disableAnimation: Boolean(props.disableAnimation),
+    isCompact: Boolean(props.isCompact),
+    showDivider: Boolean(props.showDivider),
+    expandedKeys: props.expandedKeys,
+    defaultExpandedKeys: props.defaultExpandedKeys || [],
+    disabledKeys: props.disabledKeys || [],
+    selectionMode: props.selectionMode || "toggle",
+    onSelectionChange: props.onSelectionChange
+  };
+};
+
+// src/components/divider/divider.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+
+// src/components/divider/divider.style.ts
+var import_react_native6 = require("react-native");
+var styles2 = import_react_native6.StyleSheet.create({
+  horizontal: {
+    height: 1,
+    width: "100%"
+  },
+  vertical: {
+    width: 1,
+    alignSelf: "stretch"
+  }
+});
+
+// src/components/divider/divider.hook.ts
+var import_react9 = require("react");
+var import_core4 = require("@xaui/core");
+var useDividerColor = (themeColor, customColor) => {
+  const theme = useXUITheme();
+  const dividerColor = (0, import_react9.useMemo)(() => {
+    if (customColor) {
+      return customColor;
+    }
+    const safeThemeColor = (0, import_core4.getSafeThemeColor)(themeColor);
+    return theme.colors[safeThemeColor].main;
+  }, [customColor, themeColor, theme]);
+  return dividerColor;
+};
+var useDividerSize = (size, orientation) => {
+  const sizeStyles = (0, import_react9.useMemo)(() => {
+    if (orientation === "horizontal") {
+      return {
+        height: size
+      };
+    }
+    return {
+      width: size
+    };
+  }, [size, orientation]);
+  return sizeStyles;
+};
+
+// src/components/divider/divider.tsx
+var Divider = ({
+  size = 1,
+  themeColor = "default",
+  color,
+  orientation = "horizontal"
+}) => {
+  const dividerColor = useDividerColor(themeColor, color);
+  const sizeStyles = useDividerSize(size, orientation);
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native7.View,
+    {
+      style: [
+        orientation === "horizontal" ? styles2.horizontal : styles2.vertical,
+        sizeStyles,
+        { backgroundColor: dividerColor }
+      ]
+    }
+  );
+};
+
+// src/components/accordion/accordion.tsx
+var Accordion = (props) => {
+  const {
+    children,
+    variant = "light",
+    showDivider = false,
+    fullWidth = true,
+    containerStyle,
+    itemStyle
+  } = props;
+  const { containerStyles, dividerColor } = useAccordionStyles({
+    variant,
+    fullWidth
+  });
+  const contextParams = buildAccordionContextParams(props);
+  const contextValue = useAccordionContextValue(contextParams);
+  const childrenArray = import_react11.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react11.default.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react11.default.createElement(import_react_native8.View, { style: [containerStyles, containerStyle] }, childrenArray.map((child, index) => {
+    const isLast = index === childrenArray.length - 1;
+    const showBottomDivider = (showDivider || variant === "bordered") && !isLast && variant !== "splitted";
+    const resolvedChildKey = isAccordionItem(child) ? getItemKey(child.props.itemKey ?? normalizeElementKey(child.key), index) : getItemKey(
+      import_react11.default.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
+      index
+    );
+    return /* @__PURE__ */ import_react11.default.createElement(import_react_native8.View, { key: resolvedChildKey, style: itemStyle }, isAccordionItem(child) ? import_react11.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ import_react11.default.createElement(Divider, { color: dividerColor, size: 2 }));
+  })));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionItem
+});

package/dist/accordion/index.d.cts

@@ -0,0 +1,141 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+type AccordionVariant = 'light' | 'bordered' | 'splitted';
+type AccordionSelectionMode = 'toggle' | 'multiple';
+type AccordionEvents = {
+    onSelectionChange?: (selectedKeys: string[]) => void;
+};
+type AccordionProps = {
+    /**
+     * List of AccordionItem components
+     */
+    children: ReactNode;
+    /**
+     * Visual variant of the accordion
+     * @default 'light'
+     */
+    variant?: AccordionVariant;
+    /**
+     * Selection behavior mode
+     * - toggle: Only one accordion item can be expanded at a time
+     * - multiple: Multiple accordion items can be expanded simultaneously
+     * @default 'toggle'
+     */
+    selectionMode?: AccordionSelectionMode;
+    /**
+     * Show dividers between accordion items
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Hide the collapse/expand indicator
+     * @default false
+     */
+    hideIndicator?: boolean;
+    /**
+     * Whether the accordion should take full width
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Controlled expanded keys
+     */
+    expandedKeys?: string[];
+    /**
+     * Default expanded keys for uncontrolled mode
+     * Items with these keys will be expanded by default
+     */
+    defaultExpandedKeys?: string[];
+    /**
+     * Keys of disabled accordion items
+     */
+    disabledKeys?: string[];
+    /**
+     * Disable animations
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Make the accordion items more compact
+     * @default false
+     */
+    isCompact?: boolean;
+    /**
+     * Custom styles for the container
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Custom styles for individual items
+     */
+    itemStyle?: ViewStyle;
+} & AccordionEvents;
+
+declare const Accordion: React.FC<AccordionProps>;
+
+type AccordionItemEvents = {
+    onSelected?: (isSelected: boolean) => void;
+};
+type AccordionItemProps = {
+    /**
+     * Unique key for the accordion item
+     */
+    itemKey?: string;
+    /**
+     * Content to display when accordion item is expanded
+     */
+    children: ReactNode;
+    /**
+     * Title displayed in the accordion header
+     */
+    title: ReactNode;
+    /**
+     * Optional subtitle displayed below the title
+     */
+    subtitle?: ReactNode;
+    /**
+     * Content displayed at the start of the header (left side)
+     */
+    startContent?: ReactNode;
+    /**
+     * Custom indicator for the expanded/collapsed state
+     * @default ChevronRight icon
+     */
+    indicator?: ReactNode;
+    /**
+     * Custom styles for the base container
+     */
+    baseStyle?: ViewStyle;
+    /**
+     * Custom styles for the header container
+     */
+    headingStyle?: ViewStyle;
+    /**
+     * Custom styles for the trigger button
+     */
+    triggerStyle?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    titleStyle?: TextStyle;
+    /**
+     * Custom styles for the subtitle text
+     */
+    subtitleStyle?: TextStyle;
+    /**
+     * Custom styles for the content container
+     */
+    contentStyle?: ViewStyle;
+    /**
+     * Custom styles for the start content container
+     */
+    startContentStyle?: ViewStyle;
+    /**
+     * Custom styles for the indicator
+     */
+    indicatorStyle?: ViewStyle;
+} & AccordionItemEvents;
+
+declare const AccordionItem: React.FC<AccordionItemProps>;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, type AccordionVariant };