@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/expansion-panel/index.cjs

@@ -1,441 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-
-var _chunkDJ4Q37UTcjs = require('../chunk-DJ4Q37UT.cjs');
-require('../chunk-56RPWZD2.cjs');
-
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/expansion-panel/expansion-panel.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/expansion-panel/expansion-panel-context.ts
-
-var ExpansionPanelContext = _react.createContext.call(void 0, void 0);
-var useExpansionPanelContext = () => {
-  const context = _react.useContext.call(void 0, ExpansionPanelContext);
-  if (!context) {
-    throw new Error(
-      "ExpansionPanelItem must be used within an ExpansionPanel component"
-    );
-  }
-  return context;
-};
-
-// src/components/expansion-panel/expansion-panel.hook.ts
-
-var useExpansionPanelStyles = ({
-  variant,
-  fullWidth
-}) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const palette2 = _chunk7UFBLUMVcjs.useXUIPalette.call(void 0, );
-  const containerStyles = _react.useMemo.call(void 0, () => {
-    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.paddingHorizontal = theme.spacing.sm;
-      base.overflow = "hidden";
-    }
-    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 useExpansionPanelSelection = ({
-  selectionMode,
-  expandedKeys,
-  defaultExpandedKeys,
-  onSelectionChange
-}) => {
-  const [internalExpandedKeys, setInternalExpandedKeys] = _react.useState.call(void 0, defaultExpandedKeys);
-  const isControlled = expandedKeys !== void 0;
-  const currentExpandedKeys = isControlled ? expandedKeys : internalExpandedKeys;
-  const toggleItem = _react.useCallback.call(void 0, 
-    (key) => {
-      const isExpanded = currentExpandedKeys.includes(key);
-      const newExpandedKeys = selectionMode === "toggle" ? isExpanded ? [] : [key] : isExpanded ? currentExpandedKeys.filter((k) => k !== key) : [...currentExpandedKeys, key];
-      if (!isControlled) {
-        setInternalExpandedKeys(newExpandedKeys);
-      }
-      _optionalChain([onSelectionChange, 'optionalCall', _ => _(newExpandedKeys)]);
-    },
-    [selectionMode, currentExpandedKeys, isControlled, onSelectionChange]
-  );
-  return { currentExpandedKeys, toggleItem };
-};
-var useExpansionPanelContextValue = (config) => {
-  const { currentExpandedKeys, toggleItem } = useExpansionPanelSelection({
-    selectionMode: config.selectionMode,
-    expandedKeys: config.expandedKeys,
-    defaultExpandedKeys: config.defaultExpandedKeys,
-    onSelectionChange: config.onSelectionChange
-  });
-  return _react.useMemo.call(void 0, 
-    () => ({
-      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/expansion-panel/expansion-panel-item.tsx
-
-
-
-// src/components/expansion-panel/expansion-panel-item.style.ts
-
-var styles = _reactnative.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/expansion-panel/expansion-panel-item.hook.ts
-
-
-
-
-
-var _palette = require('@xaui/core/palette');
-var _core = require('@xaui/core');
-var useExpansionPanelItemState = (itemKey) => {
-  const context = useExpansionPanelContext();
-  const resolvedItemKey = _nullishCoalesce(itemKey, () => ( ""));
-  const isExpanded = resolvedItemKey ? context.expandedKeys.includes(resolvedItemKey) : false;
-  const isDisabled = resolvedItemKey ? context.disabledKeys.includes(resolvedItemKey) : false;
-  const handlePress = _react.useCallback.call(void 0, () => {
-    if (isDisabled || !resolvedItemKey) return;
-    context.toggleItem(resolvedItemKey);
-  }, [isDisabled, resolvedItemKey, context]);
-  return { ...context, resolvedItemKey, isExpanded, isDisabled, handlePress };
-};
-var useExpansionPanelItemAnimation = (isExpanded, disableAnimation) => {
-  const [contentHeight, setContentHeight] = _react.useState.call(void 0, 0);
-  const [isMeasured, setIsMeasured] = _react.useState.call(void 0, false);
-  const animatedHeight = _react.useRef.call(void 0, new _reactnative.Animated.Value(isExpanded ? 1 : 0)).current;
-  const animatedRotation = _react.useRef.call(void 0, new _reactnative.Animated.Value(isExpanded ? 1 : 0)).current;
-  const prevContentHeight = _react.useRef.call(void 0, contentHeight);
-  _react.useEffect.call(void 0, () => {
-    if (disableAnimation) {
-      animatedHeight.setValue(isExpanded ? 1 : 0);
-      animatedRotation.setValue(isExpanded ? 1 : 0);
-      return;
-    }
-    _reactnative.Animated.parallel([
-      _reactnative.Animated.timing(animatedHeight, {
-        toValue: isExpanded ? 1 : 0,
-        duration: 300,
-        easing: _reactnative.Easing.bezier(0.4, 0, 0.2, 1),
-        useNativeDriver: false
-      }),
-      _reactnative.Animated.timing(animatedRotation, {
-        toValue: isExpanded ? 1 : 0,
-        duration: 300,
-        easing: _reactnative.Easing.bezier(0.4, 0, 0.2, 1),
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [isExpanded, disableAnimation, animatedHeight, animatedRotation]);
-  _react.useEffect.call(void 0, () => {
-    if (contentHeight <= 0 || contentHeight === prevContentHeight.current || !isExpanded)
-      return;
-    prevContentHeight.current = contentHeight;
-    if (!disableAnimation && isMeasured) {
-      _reactnative.Animated.timing(animatedHeight, {
-        toValue: 1,
-        duration: 200,
-        easing: _reactnative.Easing.out(_reactnative.Easing.ease),
-        useNativeDriver: false
-      }).start();
-    }
-  }, [contentHeight, isExpanded, disableAnimation, isMeasured, animatedHeight]);
-  const onContentLayout = _react.useCallback.call(void 0, (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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const baseStyles = _react.useMemo.call(void 0, () => {
-    const base = { overflow: "hidden" };
-    if (variant === "splitted") {
-      base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = _core.withOpacity.call(void 0, theme.colors.default.container, 0.5);
-      base.borderRadius = theme.borderRadius.md;
-      base.marginBottom = theme.spacing.xs;
-    } 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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const triggerStyles = _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const titleTextStyle = _react.useMemo.call(void 0, 
-    () => ({
-      fontSize: isCompact ? theme.fontSizes.md : theme.fontSizes.lg,
-      fontWeight: theme.fontWeights.medium,
-      color: theme.colors.foreground
-    }),
-    [isCompact, theme]
-  );
-  return titleTextStyle;
-};
-var useSubtitleTextStyle = () => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const subtitleTextStyle = _react.useMemo.call(void 0, 
-    () => ({
-      fontSize: theme.fontSizes.sm,
-      color: _palette.colors.gray[500],
-      marginTop: theme.spacing.xs
-    }),
-    [theme]
-  );
-  return subtitleTextStyle;
-};
-var useContentContainerStyle = (isCompact, variant) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const contentContainerStyle = _react.useMemo.call(void 0, 
-    () => ({
-      paddingBottom: isCompact ? theme.spacing.xs : theme.spacing.sm,
-      paddingHorizontal: variant === "light" ? theme.spacing.sm : 0
-    }),
-    [isCompact, variant, theme]
-  );
-  return contentContainerStyle;
-};
-var useForegroundColor = () => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return theme.colors.foreground;
-};
-
-// src/components/expansion-panel/chevron-right-icon.tsx
-
-var _reactnativesvg = require('react-native-svg'); var _reactnativesvg2 = _interopRequireDefault(_reactnativesvg);
-var ChevronRightIcon = ({
-  color = "#000",
-  size = 20
-}) => {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.Path,
-    {
-      d: "M9 18l6-6-6-6",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-};
-
-// src/components/expansion-panel/expansion-panel-item.tsx
-var ExpansionPanelItem = ({
-  itemKey,
-  children,
-  title,
-  subtitle,
-  startContent,
-  indicator,
-  customAppearance,
-  onSelected
-}) => {
-  const {
-    variant,
-    hideIndicator,
-    disableAnimation,
-    isCompact,
-    isExpanded,
-    isDisabled,
-    handlePress: togglePress
-  } = useExpansionPanelItemState(itemKey);
-  const handlePress = () => {
-    togglePress();
-    _optionalChain([onSelected, 'optionalCall', _2 => _2(!isExpanded)]);
-  };
-  const { onContentLayout, heightInterpolation, rotationInterpolation } = useExpansionPanelItemAnimation(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__ */ _react2.default.createElement(_reactnative.View, { style: [baseStyles, _optionalChain([customAppearance, 'optionalAccess', _3 => _3.base])] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _4 => _4.heading]) }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      style: [triggerStyles, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.trigger])],
-      onPress: handlePress,
-      disabled: isDisabled,
-      accessibilityRole: "button",
-      accessibilityState: { expanded: isExpanded, disabled: isDisabled }
-    },
-    startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.startContent, _optionalChain([customAppearance, 'optionalAccess', _6 => _6.startContent])] }, startContent),
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.titleWrapper }, typeof title === "string" ? /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [titleTextStyle, _optionalChain([customAppearance, 'optionalAccess', _7 => _7.title])] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [subtitleTextStyle, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.subtitle])] }, subtitle) : subtitle)),
-    !hideIndicator && /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Animated.View,
-      {
-        style: [
-          styles.indicator,
-          _optionalChain([customAppearance, 'optionalAccess', _9 => _9.indicator]),
-          { transform: [{ rotate: rotationInterpolation }] }
-        ]
-      },
-      indicator || /* @__PURE__ */ _react2.default.createElement(ChevronRightIcon, { color: foregroundColor })
-    )
-  )), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.hiddenMeasure, pointerEvents: "none" }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      onLayout: onContentLayout,
-      style: [contentContainerStyle, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.content])]
-    },
-    children
-  )), /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Animated.View,
-    {
-      style: [
-        styles.contentOverflow,
-        disableAnimation ? { height: isExpanded ? void 0 : 0 } : { height: heightInterpolation }
-      ]
-    },
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [contentContainerStyle, _optionalChain([customAppearance, 'optionalAccess', _11 => _11.content])] }, children)
-  ));
-};
-ExpansionPanelItem.displayName = "ExpansionPanelItem";
-
-// src/components/expansion-panel/expansion-panel.utils.ts
-
-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 isExpansionPanelItem = (value) => _react2.default.isValidElement(value) && (value.type === ExpansionPanelItem || typeof value.type === "function" && value.type.displayName === "ExpansionPanelItem");
-var buildExpansionPanelContextParams = (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/expansion-panel/expansion-panel.tsx
-var ExpansionPanel = (props) => {
-  const {
-    children,
-    variant = "light",
-    showDivider = false,
-    fullWidth = true,
-    customAppearance
-  } = props;
-  const { containerStyles, dividerColor } = useExpansionPanelStyles({
-    variant,
-    fullWidth
-  });
-  const contextParams = buildExpansionPanelContextParams(props);
-  const contextValue = useExpansionPanelContextValue(contextParams);
-  const childrenArray = _react2.default.Children.toArray(children);
-  return /* @__PURE__ */ _react2.default.createElement(ExpansionPanelContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [containerStyles, _optionalChain([customAppearance, 'optionalAccess', _12 => _12.container])] }, childrenArray.map((child, index) => {
-    const isLast = index === childrenArray.length - 1;
-    const showBottomDivider = (showDivider || variant === "bordered") && !isLast && variant !== "splitted";
-    const resolvedChildKey = isExpansionPanelItem(child) ? getItemKey(
-      _nullishCoalesce(child.props.itemKey, () => ( normalizeElementKey(child.key))),
-      index
-    ) : getItemKey(
-      _react2.default.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
-      index
-    );
-    return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { key: resolvedChildKey, style: _optionalChain([customAppearance, 'optionalAccess', _13 => _13.item]) }, isExpansionPanelItem(child) ? _react2.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ _react2.default.createElement(_chunkDJ4Q37UTcjs.Divider, { color: dividerColor, size: 1 }));
-  })));
-};
-
-
-
-exports.ExpansionPanel = ExpansionPanel; exports.ExpansionPanelItem = ExpansionPanelItem;

package/dist/expansion-panel/index.d.cts

@@ -1,153 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-
-type ExpansionPanelVariant = 'light' | 'bordered' | 'splitted';
-type ExpansionPanelSelectionMode = 'toggle' | 'multiple';
-type ExpansionPanelEvents = {
-    onSelectionChange?: (selectedKeys: string[]) => void;
-};
-type ExpansionPanelCustomAppearance = {
-    /**
-     * Custom styles for the container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for individual items
-     */
-    item?: ViewStyle;
-};
-type ExpansionPanelProps = {
-    /**
-     * List of ExpansionPanelItem components
-     */
-    children: ReactNode;
-    /**
-     * Visual variant of the expansion-panel
-     * @default 'light'
-     */
-    variant?: ExpansionPanelVariant;
-    /**
-     * Selection behavior mode
-     * - toggle: Only one expansion-panel item can be expanded at a time
-     * - multiple: Multiple expansion-panel items can be expanded simultaneously
-     * @default 'toggle'
-     */
-    selectionMode?: ExpansionPanelSelectionMode;
-    /**
-     * Show dividers between expansion-panel items
-     * @default false
-     */
-    showDivider?: boolean;
-    /**
-     * Hide the collapse/expand indicator
-     * @default false
-     */
-    hideIndicator?: boolean;
-    /**
-     * Whether the expansion-panel 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 expansion-panel items
-     */
-    disabledKeys?: string[];
-    /**
-     * Disable animations
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * Make the expansion-panel items more compact
-     * @default false
-     */
-    isCompact?: boolean;
-    /**
-     * Custom appearance styles for all expansion-panel parts
-     */
-    customAppearance?: ExpansionPanelCustomAppearance;
-} & ExpansionPanelEvents;
-
-declare const ExpansionPanel: React.FC<ExpansionPanelProps>;
-
-type ExpansionPanelItemEvents = {
-    onSelected?: (isSelected: boolean) => void;
-};
-type ExpansionPanelItemCustomAppearance = {
-    /**
-     * Custom styles for the base container
-     */
-    base?: ViewStyle;
-    /**
-     * Custom styles for the header container
-     */
-    heading?: ViewStyle;
-    /**
-     * Custom styles for the trigger button
-     */
-    trigger?: ViewStyle;
-    /**
-     * Custom styles for the title text
-     */
-    title?: TextStyle;
-    /**
-     * Custom styles for the subtitle text
-     */
-    subtitle?: TextStyle;
-    /**
-     * Custom styles for the content container
-     */
-    content?: ViewStyle;
-    /**
-     * Custom styles for the start content container
-     */
-    startContent?: ViewStyle;
-    /**
-     * Custom styles for the indicator
-     */
-    indicator?: ViewStyle;
-};
-type ExpansionPanelItemProps = {
-    /**
-     * Unique key for the expansion-panel item
-     */
-    itemKey?: string;
-    /**
-     * Content to display when expansion-panel item is expanded
-     */
-    children: ReactNode;
-    /**
-     * Title displayed in the expansion-panel 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 appearance styles for all expansion-panel item parts
-     */
-    customAppearance?: ExpansionPanelItemCustomAppearance;
-} & ExpansionPanelItemEvents;
-
-declare const ExpansionPanelItem: React.FC<ExpansionPanelItemProps>;
-
-export { ExpansionPanel, ExpansionPanelItem };