@xaui/native 0.2.8 → 0.9.1-alpha.1

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

@@ -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 };

package/dist/expansion-panel/index.js

@@ -1,441 +0,0 @@
-import {
-  Divider
-} from "../chunk-ZY7IUTAT.js";
-import "../chunk-SHBDANQN.js";
-import {
-  useXUIPalette,
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/expansion-panel/expansion-panel.tsx
-import React4 from "react";
-import { View as View2 } from "react-native";
-
-// src/components/expansion-panel/expansion-panel-context.ts
-import { createContext, useContext } from "react";
-var ExpansionPanelContext = createContext(void 0);
-var useExpansionPanelContext = () => {
-  const context = useContext(ExpansionPanelContext);
-  if (!context) {
-    throw new Error(
-      "ExpansionPanelItem must be used within an ExpansionPanel component"
-    );
-  }
-  return context;
-};
-
-// src/components/expansion-panel/expansion-panel.hook.ts
-import { useState, useCallback, useMemo } from "react";
-var useExpansionPanelStyles = ({
-  variant,
-  fullWidth
-}) => {
-  const theme = useXUITheme();
-  const palette2 = useXUIPalette();
-  const containerStyles = 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.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] = useState(defaultExpandedKeys);
-  const isControlled = expandedKeys !== void 0;
-  const currentExpandedKeys = isControlled ? expandedKeys : internalExpandedKeys;
-  const toggleItem = 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 useExpansionPanelContextValue = (config) => {
-  const { currentExpandedKeys, toggleItem } = useExpansionPanelSelection({
-    selectionMode: config.selectionMode,
-    expandedKeys: config.expandedKeys,
-    defaultExpandedKeys: config.defaultExpandedKeys,
-    onSelectionChange: config.onSelectionChange
-  });
-  return 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/expansion-panel/expansion-panel-item.tsx
-import React2 from "react";
-import { View, Text, Pressable, Animated as Animated2 } from "react-native";
-
-// src/components/expansion-panel/expansion-panel-item.style.ts
-import { StyleSheet } from "react-native";
-var styles = 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
-import { useRef, useEffect, useState as useState2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
-import {
-  Animated,
-  Easing
-} from "react-native";
-import { colors as palette } from "@xaui/core/palette";
-import { withOpacity } from "@xaui/core";
-var useExpansionPanelItemState = (itemKey) => {
-  const context = useExpansionPanelContext();
-  const resolvedItemKey = itemKey ?? "";
-  const isExpanded = resolvedItemKey ? context.expandedKeys.includes(resolvedItemKey) : false;
-  const isDisabled = resolvedItemKey ? context.disabledKeys.includes(resolvedItemKey) : false;
-  const handlePress = useCallback2(() => {
-    if (isDisabled || !resolvedItemKey) return;
-    context.toggleItem(resolvedItemKey);
-  }, [isDisabled, resolvedItemKey, context]);
-  return { ...context, resolvedItemKey, isExpanded, isDisabled, handlePress };
-};
-var useExpansionPanelItemAnimation = (isExpanded, disableAnimation) => {
-  const [contentHeight, setContentHeight] = useState2(0);
-  const [isMeasured, setIsMeasured] = useState2(false);
-  const animatedHeight = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
-  const animatedRotation = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
-  const prevContentHeight = useRef(contentHeight);
-  useEffect(() => {
-    if (disableAnimation) {
-      animatedHeight.setValue(isExpanded ? 1 : 0);
-      animatedRotation.setValue(isExpanded ? 1 : 0);
-      return;
-    }
-    Animated.parallel([
-      Animated.timing(animatedHeight, {
-        toValue: isExpanded ? 1 : 0,
-        duration: 300,
-        easing: Easing.bezier(0.4, 0, 0.2, 1),
-        useNativeDriver: false
-      }),
-      Animated.timing(animatedRotation, {
-        toValue: isExpanded ? 1 : 0,
-        duration: 300,
-        easing: Easing.bezier(0.4, 0, 0.2, 1),
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [isExpanded, disableAnimation, animatedHeight, animatedRotation]);
-  useEffect(() => {
-    if (contentHeight <= 0 || contentHeight === prevContentHeight.current || !isExpanded)
-      return;
-    prevContentHeight.current = contentHeight;
-    if (!disableAnimation && isMeasured) {
-      Animated.timing(animatedHeight, {
-        toValue: 1,
-        duration: 200,
-        easing: Easing.out(Easing.ease),
-        useNativeDriver: false
-      }).start();
-    }
-  }, [contentHeight, isExpanded, disableAnimation, isMeasured, animatedHeight]);
-  const onContentLayout = useCallback2((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 = useMemo2(() => {
-    const base = { overflow: "hidden" };
-    if (variant === "splitted") {
-      base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = withOpacity(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 = useXUITheme();
-  const triggerStyles = useMemo2(() => {
-    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 = useMemo2(
-    () => ({
-      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 = useMemo2(
-    () => ({
-      fontSize: theme.fontSizes.sm,
-      color: palette.gray[500],
-      marginTop: theme.spacing.xs
-    }),
-    [theme]
-  );
-  return subtitleTextStyle;
-};
-var useContentContainerStyle = (isCompact, variant) => {
-  const theme = useXUITheme();
-  const contentContainerStyle = useMemo2(
-    () => ({
-      paddingBottom: isCompact ? theme.spacing.xs : theme.spacing.sm,
-      paddingHorizontal: variant === "light" ? theme.spacing.sm : 0
-    }),
-    [isCompact, variant, theme]
-  );
-  return contentContainerStyle;
-};
-var useForegroundColor = () => {
-  const theme = useXUITheme();
-  return theme.colors.foreground;
-};
-
-// src/components/expansion-panel/chevron-right-icon.tsx
-import React from "react";
-import Svg, { Path } from "react-native-svg";
-var ChevronRightIcon = ({
-  color = "#000",
-  size = 20
-}) => {
-  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
-    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();
-    onSelected?.(!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.createElement(View, { style: [baseStyles, customAppearance?.base] }, /* @__PURE__ */ React2.createElement(View, { style: customAppearance?.heading }, /* @__PURE__ */ React2.createElement(
-    Pressable,
-    {
-      style: [triggerStyles, customAppearance?.trigger],
-      onPress: handlePress,
-      disabled: isDisabled,
-      accessibilityRole: "button",
-      accessibilityState: { expanded: isExpanded, disabled: isDisabled }
-    },
-    startContent && /* @__PURE__ */ React2.createElement(View, { style: [styles.startContent, customAppearance?.startContent] }, startContent),
-    /* @__PURE__ */ React2.createElement(View, { style: styles.titleWrapper }, typeof title === "string" ? /* @__PURE__ */ React2.createElement(Text, { style: [titleTextStyle, customAppearance?.title] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ React2.createElement(Text, { style: [subtitleTextStyle, customAppearance?.subtitle] }, subtitle) : subtitle)),
-    !hideIndicator && /* @__PURE__ */ React2.createElement(
-      Animated2.View,
-      {
-        style: [
-          styles.indicator,
-          customAppearance?.indicator,
-          { transform: [{ rotate: rotationInterpolation }] }
-        ]
-      },
-      indicator || /* @__PURE__ */ React2.createElement(ChevronRightIcon, { color: foregroundColor })
-    )
-  )), /* @__PURE__ */ React2.createElement(View, { style: styles.hiddenMeasure, pointerEvents: "none" }, /* @__PURE__ */ React2.createElement(
-    View,
-    {
-      onLayout: onContentLayout,
-      style: [contentContainerStyle, customAppearance?.content]
-    },
-    children
-  )), /* @__PURE__ */ React2.createElement(
-    Animated2.View,
-    {
-      style: [
-        styles.contentOverflow,
-        disableAnimation ? { height: isExpanded ? void 0 : 0 } : { height: heightInterpolation }
-      ]
-    },
-    /* @__PURE__ */ React2.createElement(View, { style: [contentContainerStyle, customAppearance?.content] }, children)
-  ));
-};
-ExpansionPanelItem.displayName = "ExpansionPanelItem";
-
-// src/components/expansion-panel/expansion-panel.utils.ts
-import React3 from "react";
-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) => React3.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 = React4.Children.toArray(children);
-  return /* @__PURE__ */ React4.createElement(ExpansionPanelContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View2, { style: [containerStyles, customAppearance?.container] }, childrenArray.map((child, index) => {
-    const isLast = index === childrenArray.length - 1;
-    const showBottomDivider = (showDivider || variant === "bordered") && !isLast && variant !== "splitted";
-    const resolvedChildKey = isExpansionPanelItem(child) ? getItemKey(
-      child.props.itemKey ?? normalizeElementKey(child.key),
-      index
-    ) : getItemKey(
-      React4.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
-      index
-    );
-    return /* @__PURE__ */ React4.createElement(View2, { key: resolvedChildKey, style: customAppearance?.item }, isExpansionPanelItem(child) ? React4.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ React4.createElement(Divider, { color: dividerColor, size: 1 }));
-  })));
-};
-export {
-  ExpansionPanel,
-  ExpansionPanelItem
-};

package/dist/fab/index.cjs

@@ -1,9 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _chunkUGEINZM7cjs = require('../chunk-UGEINZM7.cjs');
-require('../chunk-YIEUN3G5.cjs');
-require('../chunk-56RPWZD2.cjs');
-require('../chunk-7UFBLUMV.cjs');
-
-
-exports.Fab = _chunkUGEINZM7cjs.Fab;

package/dist/fab/index.d.cts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { F as FabProps } from '../fab.type-DN0vtAh6.cjs';
-export { b as FabSize, a as FabVariant } from '../fab.type-DN0vtAh6.cjs';
-import 'react-native';
-import '@xaui/core/types';
-import '../button.type-j1ZdkkSl.cjs';
-
-declare const Fab: React.FC<FabProps>;
-
-export { Fab, FabProps };

package/dist/fab/index.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { F as FabProps } from '../fab.type-CkUHmXU_.js';
-export { b as FabSize, a as FabVariant } from '../fab.type-CkUHmXU_.js';
-import 'react-native';
-import '@xaui/core/types';
-import '../button.type-j1ZdkkSl.js';
-
-declare const Fab: React.FC<FabProps>;
-
-export { Fab, FabProps };

package/dist/fab/index.js

@@ -1,9 +0,0 @@
-import {
-  Fab
-} from "../chunk-UU4HHBDN.js";
-import "../chunk-VSZEXOUN.js";
-import "../chunk-SHBDANQN.js";
-import "../chunk-RBSA4NH4.js";
-export {
-  Fab
-};