@xaui/native 0.0.17 → 0.0.19

package/dist/index.d.cts

@@ -1,19 +1,2 @@
-export { ActivityIndicator } from './indicator/index.cjs';
-export { Divider } from './divider/index.cjs';
-export { Avatar, AvatarGroup } from './avatar/index.cjs';
-export { Badge } from './badge/index.cjs';
-export { Alert } from './alert/index.cjs';
-export { Autocomplete, AutocompleteItem } from './autocomplete/index.cjs';
-export { DatePicker } from './datepicker/index.cjs';
-export { Typography } from './typography/index.cjs';
-export { Carousel } from './carousel/index.cjs';
-export { SegmentButton, SegmentButtonItem } from './segment-button/index.cjs';
-export { Chip, ChipGroup, ChipItem } from './chip/index.cjs';
-export { BottomSheet } from './bottom-sheet/index.cjs';
-export { Fab } from './fab/index.cjs';
-export { FabMenu, FabMenuItem } from './fab-menu/index.cjs';
-import 'react';
-import './index-BOw6tbkc.cjs';
-import 'react-native';
-import './fab.type-U09H8B7D.cjs';
-import './button.type-ikaWzhIg.cjs';
+
+export {  }

package/dist/index.d.ts

@@ -1,19 +1,2 @@
-export { ActivityIndicator } from './indicator/index.js';
-export { Divider } from './divider/index.js';
-export { Avatar, AvatarGroup } from './avatar/index.js';
-export { Badge } from './badge/index.js';
-export { Alert } from './alert/index.js';
-export { Autocomplete, AutocompleteItem } from './autocomplete/index.js';
-export { DatePicker } from './datepicker/index.js';
-export { Typography } from './typography/index.js';
-export { Carousel } from './carousel/index.js';
-export { SegmentButton, SegmentButtonItem } from './segment-button/index.js';
-export { Chip, ChipGroup, ChipItem } from './chip/index.js';
-export { BottomSheet } from './bottom-sheet/index.js';
-export { Fab } from './fab/index.js';
-export { FabMenu, FabMenuItem } from './fab-menu/index.js';
-import 'react';
-import './index-BOw6tbkc.js';
-import 'react-native';
-import './fab.type-Ba0QMprb.js';
-import './button.type-D8tzEBo7.js';
+
+export {  }

package/dist/index.js

@@ -1,73 +0,0 @@
-import {
-  Chip,
-  ChipGroup,
-  ChipItem
-} from "./chunk-6PXMB5CH.js";
-import {
-  BottomSheet
-} from "./chunk-S3MGBM3G.js";
-import {
-  FabMenu,
-  FabMenuItem
-} from "./chunk-DBKVHMSA.js";
-import {
-  Fab
-} from "./chunk-TJ2FPLLZ.js";
-import {
-  SegmentButton,
-  SegmentButtonItem
-} from "./chunk-STUNTRKJ.js";
-import {
-  Carousel
-} from "./chunk-EW5YLICE.js";
-import {
-  Avatar,
-  AvatarGroup
-} from "./chunk-K2HSVISE.js";
-import {
-  Badge
-} from "./chunk-UGDGCMGC.js";
-import {
-  Alert
-} from "./chunk-OXVIVNIJ.js";
-import {
-  Autocomplete,
-  AutocompleteItem
-} from "./chunk-XUYIAA3A.js";
-import "./chunk-GBHQCAKW.js";
-import {
-  DatePicker
-} from "./chunk-JJOVGRNI.js";
-import {
-  Typography
-} from "./chunk-PWCUULAL.js";
-import {
-  Divider
-} from "./chunk-RIVFFZRO.js";
-import {
-  ActivityIndicator
-} from "./chunk-VUVE6PK7.js";
-import "./chunk-DXXNBF5P.js";
-import "./chunk-MZL77KV5.js";
-export {
-  ActivityIndicator,
-  Alert,
-  Autocomplete,
-  AutocompleteItem,
-  Avatar,
-  AvatarGroup,
-  Badge,
-  BottomSheet,
-  Carousel,
-  Chip,
-  ChipGroup,
-  ChipItem,
-  DatePicker,
-  Divider,
-  Fab,
-  FabMenu,
-  FabMenuItem,
-  SegmentButton,
-  SegmentButtonItem,
-  Typography
-};

package/dist/indicator/index.js

@@ -1,8 +1,8 @@
 import {
   ActivityIndicator
-} from "../chunk-VUVE6PK7.js";
+} from "../chunk-F7WH4DMG.js";
 import "../chunk-DXXNBF5P.js";
-import "../chunk-MZL77KV5.js";
+import "../chunk-LTKYHG5V.js";
 export {
   ActivityIndicator
 };

package/dist/menu/index.js

@@ -1,7 +1,7 @@
 import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-MZL77KV5.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/menu/menu.tsx
 import React from "react";

package/dist/progress/index.js

@@ -1,7 +1,7 @@
 import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-MZL77KV5.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/progress/progress.tsx
 import React3 from "react";

package/dist/segment-button/index.cjs

@@ -183,7 +183,7 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
     const variants = {
       outlined: {
         containerBackground: "transparent",
-        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: colorScheme.main,
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",
@@ -210,7 +210,7 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
       },
       faded: {
         containerBackground: `${colorScheme.background}95`,
-        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",

package/dist/segment-button/index.js

@@ -1,9 +1,404 @@
-import {
-  SegmentButton,
-  SegmentButtonItem
-} from "../chunk-STUNTRKJ.js";
 import "../chunk-DXXNBF5P.js";
-import "../chunk-MZL77KV5.js";
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/segment-button/segment-button.tsx
+import React, { useCallback, useMemo as useMemo2, useState } from "react";
+import { View } from "react-native";
+
+// src/components/segment-button/segment-button.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    overflow: "hidden",
+    alignSelf: "flex-start"
+  },
+  fullWidth: {
+    width: "100%",
+    alignSelf: "stretch"
+  },
+  segment: {
+    flex: 1
+  },
+  segmentInner: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  segmentContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4
+  },
+  segmentText: {
+    fontWeight: "500",
+    textAlign: "center"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  divider: {
+    width: 1,
+    alignSelf: "stretch"
+  }
+});
+
+// src/components/segment-button/segment-button.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor, withPaletteNumber } from "@xaui/core";
+function useSegmentSizeStyles(size) {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    const sizes = {
+      xs: {
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 32,
+        fontSize: theme.fontSizes.xs,
+        iconSize: 14
+      },
+      sm: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 36,
+        fontSize: theme.fontSizes.sm,
+        iconSize: 16
+      },
+      md: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        minHeight: 40,
+        fontSize: theme.fontSizes.md,
+        iconSize: 18
+      },
+      lg: {
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        minHeight: 48,
+        fontSize: theme.fontSizes.lg,
+        iconSize: 20
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+}
+function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const selectedBackgroundColor = withPaletteNumber(colorScheme.main, 400);
+  return useMemo(() => {
+    const variants = {
+      outlined: {
+        containerBackground: "transparent",
+        containerBorderWidth: theme.borderWidth.md,
+        containerBorderColor: colorScheme.main,
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      flat: {
+        containerBackground: colorScheme.background,
+        containerBorderWidth: 0,
+        containerBorderColor: "transparent",
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      light: {
+        containerBackground: "transparent",
+        containerBorderWidth: 0,
+        containerBorderColor: "transparent",
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      faded: {
+        containerBackground: `${colorScheme.background}95`,
+        containerBorderWidth: theme.borderWidth.md,
+        containerBorderColor: `${colorScheme.main}90`,
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      }
+    };
+    const baseStyle = variants[variant] ?? variants.outlined;
+    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...baseStyle,
+      containerShadow: shouldApplyElevation && elevation > 0 ? shadowStyles : baseStyle.containerShadow
+    };
+  }, [variant, colorScheme, theme, elevation]);
+}
+
+// src/components/segment-button/segment-button-context.ts
+import { createContext, useContext } from "react";
+var SegmentButtonContext = createContext(void 0);
+var useSegmentButtonContext = () => {
+  const context = useContext(SegmentButtonContext);
+  if (!context) {
+    throw new Error(
+      "SegmentButtonItem must be used within a SegmentButton component"
+    );
+  }
+  return context;
+};
+
+// src/components/segment-button/segment-button.tsx
+var SegmentButton = ({
+  children,
+  selected: controlledSelected,
+  defaultSelected,
+  onSelectionChange,
+  selectionMode = "single",
+  themeColor = "primary",
+  variant = "outlined",
+  size = "md",
+  radius = "full",
+  fullWidth = false,
+  isDisabled = false,
+  showCheckmark = true,
+  elevation = 0,
+  customAppearance
+}) => {
+  const isControlled = controlledSelected !== void 0;
+  const [internalSelected, setInternalSelected] = useState(
+    () => defaultSelected ?? ""
+  );
+  const selected = isControlled ? controlledSelected : internalSelected;
+  const selectedKeys = useMemo2(() => {
+    if (Array.isArray(selected)) return selected;
+    return selected ? [selected] : [];
+  }, [selected]);
+  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const toggleItem = useCallback(
+    (key) => {
+      let nextSelected;
+      if (selectionMode === "single") {
+        nextSelected = key;
+      } else {
+        const isCurrentlySelected = selectedKeys.includes(key);
+        if (isCurrentlySelected && selectedKeys.length > 1) {
+          nextSelected = selectedKeys.filter((k) => k !== key);
+        } else if (!isCurrentlySelected) {
+          nextSelected = [...selectedKeys, key];
+        } else {
+          return;
+        }
+      }
+      if (!isControlled) {
+        setInternalSelected(nextSelected);
+      }
+      onSelectionChange?.(nextSelected);
+    },
+    [selectionMode, selectedKeys, onSelectionChange, isControlled]
+  );
+  const contextValue = useMemo2(
+    () => ({
+      selectedKeys,
+      toggleItem,
+      themeColor,
+      variant,
+      size,
+      elevation,
+      isDisabled,
+      showCheckmark
+    }),
+    [
+      selectedKeys,
+      toggleItem,
+      themeColor,
+      variant,
+      size,
+      elevation,
+      isDisabled,
+      showCheckmark
+    ]
+  );
+  const showDivider = variant === "outlined" || variant === "faded";
+  const childrenArray = React.Children.toArray(children);
+  const getItemKey = (child) => {
+    if (!React.isValidElement(child)) {
+      return void 0;
+    }
+    return child.props.itemKey;
+  };
+  return /* @__PURE__ */ React.createElement(SegmentButtonContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        {
+          backgroundColor: variantStyles.containerBackground,
+          borderWidth: variantStyles.containerBorderWidth,
+          borderColor: variantStyles.containerBorderColor,
+          borderRadius: radiusStyles.borderRadius,
+          ...variantStyles.containerShadow
+        },
+        fullWidth && styles.fullWidth,
+        customAppearance?.container
+      ]
+    },
+    childrenArray.map((child, index) => {
+      const isLast = index === childrenArray.length - 1;
+      const childItemKey = getItemKey(child);
+      const childKey = childItemKey ?? index;
+      const isSelected = selectedKeys.includes(String(childKey));
+      const nextChildKey = !isLast ? getItemKey(childrenArray[index + 1]) : void 0;
+      const nextSelected = nextChildKey ? selectedKeys.includes(String(nextChildKey)) : false;
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: childKey }, child, showDivider && !isLast && !isSelected && !nextSelected && /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: [
+            styles.divider,
+            {
+              backgroundColor: variantStyles.containerBorderColor
+            }
+          ]
+        }
+      ));
+    })
+  ));
+};
+
+// src/components/segment-button/segment-button-item.tsx
+import React2, { useEffect, useRef } from "react";
+import { Pressable, Text, View as View2, Animated as Animated2 } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+// src/components/segment-button/segment-button.animation.ts
+import { Animated } from "react-native";
+var runCheckmarkEnterAnimation = (animatedValue) => {
+  animatedValue.setValue(0);
+  Animated.timing(animatedValue, {
+    toValue: 1,
+    duration: 200,
+    useNativeDriver: true
+  }).start();
+};
+var runCheckmarkExitAnimation = (animatedValue) => {
+  Animated.timing(animatedValue, {
+    toValue: 0,
+    duration: 150,
+    useNativeDriver: true
+  }).start();
+};
+
+// src/components/segment-button/segment-button-item.tsx
+var CheckIcon = ({ size, color }) => /* @__PURE__ */ React2.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React2.createElement(
+  Path,
+  {
+    d: "M20 6L9 17l-5-5",
+    stroke: color,
+    strokeWidth: 2.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var SegmentButtonItem = ({
+  itemKey,
+  label,
+  startContent,
+  icon,
+  endContent,
+  checkIndicator,
+  isDisabled: itemDisabled = false,
+  customAppearance
+}) => {
+  const {
+    selectedKeys,
+    toggleItem,
+    themeColor,
+    variant,
+    size,
+    elevation,
+    isDisabled: groupDisabled,
+    showCheckmark
+  } = useSegmentButtonContext();
+  const isSelected = selectedKeys.includes(itemKey);
+  const disabled = groupDisabled || itemDisabled;
+  const checkmarkAnim = useRef(new Animated2.Value(isSelected ? 1 : 0)).current;
+  const prevSelected = useRef(isSelected);
+  useEffect(() => {
+    if (isSelected && !prevSelected.current) {
+      runCheckmarkEnterAnimation(checkmarkAnim);
+    } else if (!isSelected && prevSelected.current) {
+      runCheckmarkExitAnimation(checkmarkAnim);
+    }
+    prevSelected.current = isSelected;
+  }, [isSelected, checkmarkAnim]);
+  const sizeStyles = useSegmentSizeStyles(size);
+  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
+  const handlePress = () => {
+    if (!disabled) {
+      toggleItem(itemKey);
+    }
+  };
+  const backgroundColor = isSelected ? variantStyles.selectedBackground : variantStyles.unselectedBackground;
+  const textColor = isSelected ? variantStyles.selectedTextColor : variantStyles.unselectedTextColor;
+  const showCheck = isSelected && showCheckmark;
+  const startNode = showCheck ? checkIndicator ?? /* @__PURE__ */ React2.createElement(CheckIcon, { size: sizeStyles.iconSize, color: textColor }) : startContent ?? icon;
+  return /* @__PURE__ */ React2.createElement(
+    Pressable,
+    {
+      style: [styles.segment, disabled && styles.disabled],
+      onPress: handlePress,
+      disabled
+    },
+    /* @__PURE__ */ React2.createElement(
+      View2,
+      {
+        style: [
+          styles.segmentInner,
+          {
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            paddingVertical: sizeStyles.paddingVertical,
+            minHeight: sizeStyles.minHeight,
+            backgroundColor
+          },
+          isSelected ? customAppearance?.selectedSegment : customAppearance?.segment
+        ]
+      },
+      /* @__PURE__ */ React2.createElement(View2, { style: styles.segmentContent }, startNode && /* @__PURE__ */ React2.createElement(
+        Animated2.View,
+        {
+          style: {
+            opacity: showCheck ? checkmarkAnim : 1,
+            transform: [{ scale: showCheck ? checkmarkAnim : 1 }]
+          }
+        },
+        startNode
+      ), /* @__PURE__ */ React2.createElement(
+        Text,
+        {
+          numberOfLines: 1,
+          style: [
+            styles.segmentText,
+            {
+              fontSize: sizeStyles.fontSize,
+              color: textColor
+            },
+            isSelected ? customAppearance?.selectedText : customAppearance?.text
+          ]
+        },
+        label
+      ), endContent)
+    )
+  );
+};
+SegmentButtonItem.displayName = "SegmentButtonItem";
 export {
   SegmentButton,
   SegmentButtonItem

package/dist/select/index.js

@@ -4,7 +4,7 @@ import {
 import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-MZL77KV5.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/select/select.tsx
 import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";