@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/select/index.js

@@ -1,878 +0,0 @@
-import {
-  CheckmarkIcon
-} from "../chunk-GBHQCAKW.js";
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/select/select.tsx
-import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import {
-  Animated as Animated3,
-  Modal,
-  Pressable as Pressable2,
-  ScrollView,
-  Text as Text2,
-  View as View2,
-  useWindowDimensions
-} from "react-native";
-
-// src/components/select/select-context.ts
-import { createContext } from "react";
-var SelectContext = createContext(null);
-
-// src/components/select/select.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
-import { colors } from "@xaui/core/palette";
-var useSelectColorScheme = (themeColor) => {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return { theme, colorScheme };
-};
-var useSelectSizeStyles = (size) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    const sizes = {
-      xs: {
-        minHeight: theme.componentSizes.xs,
-        paddingHorizontal: theme.spacing.sm,
-        paddingVertical: theme.spacing.xs,
-        fontSize: theme.fontSizes.xs,
-        labelSize: theme.fontSizes.xs
-      },
-      sm: {
-        minHeight: theme.componentSizes.sm,
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.xs,
-        fontSize: theme.fontSizes.sm,
-        labelSize: theme.fontSizes.xs
-      },
-      md: {
-        minHeight: theme.componentSizes.md,
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.sm,
-        fontSize: theme.fontSizes.md,
-        labelSize: theme.fontSizes.sm
-      },
-      lg: {
-        minHeight: theme.componentSizes.lg,
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md,
-        fontSize: theme.fontSizes.lg,
-        labelSize: theme.fontSizes.md
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-};
-var useSelectRadiusStyles = (radius) => {
-  const theme = useXUITheme();
-  const radiusStyles = useMemo(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return { borderRadius: radii[radius] };
-  }, [radius, theme]);
-  const listboxRadius = useMemo(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return Math.min(radii[radius], theme.borderRadius.lg);
-  }, [radius, theme]);
-  return { radiusStyles, listboxRadius };
-};
-var useSelectVariantStyles = (themeColor, variant, isInvalid) => {
-  const { theme, colorScheme } = useSelectColorScheme(themeColor);
-  return useMemo(() => {
-    let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
-    if (variant === "bordered" && themeColor === "default") {
-      borderColor = colors.gray[300];
-    }
-    const styles3 = {
-      bordered: {
-        backgroundColor: "transparent",
-        borderWidth: theme.borderWidth.md,
-        borderColor
-      },
-      colored: {
-        backgroundColor: withOpacity(colorScheme.container, 0.5),
-        borderWidth: 0
-      },
-      light: {
-        backgroundColor: "transparent",
-        borderWidth: 0
-      },
-      underlined: {
-        backgroundColor: "transparent",
-        borderBottomWidth: theme.borderWidth.md,
-        borderColor
-      }
-    };
-    return styles3[variant];
-  }, [variant, theme, colorScheme, isInvalid, themeColor]);
-};
-var useSelectLabelStyle = (themeColor, isInvalid, labelSize) => {
-  const { theme, colorScheme } = useSelectColorScheme(themeColor);
-  return useMemo(() => {
-    let baseColor = theme.colors.foreground;
-    if (isInvalid) {
-      baseColor = theme.colors.danger.main;
-    } else if (themeColor !== "default") {
-      baseColor = colorScheme.main;
-    }
-    return {
-      fontSize: labelSize,
-      color: baseColor
-    };
-  }, [isInvalid, labelSize, theme, themeColor, colorScheme]);
-};
-var useSelectValueColor = (isInvalid, shouldShowPlaceholder) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    if (isInvalid) {
-      return theme.colors.danger.main;
-    }
-    if (shouldShowPlaceholder) {
-      return colors.gray[500];
-    }
-    return theme.colors.foreground;
-  }, [isInvalid, shouldShowPlaceholder, theme]);
-};
-var useSelectHelperColor = (isInvalid) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    if (isInvalid) {
-      return theme.colors.danger.main;
-    }
-    return colors.gray[600];
-  }, [isInvalid, theme]);
-};
-var useSelectSelectorColor = (isInvalid, shouldShowPlaceholder) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    if (isInvalid) {
-      return theme.colors.danger.main;
-    }
-    if (shouldShowPlaceholder) {
-      return colors.gray[600];
-    }
-    return theme.colors.foreground;
-  }, [isInvalid, shouldShowPlaceholder, theme]);
-};
-
-// src/components/select/select.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    gap: 6
-  },
-  fullWidth: {
-    flexShrink: 1,
-    flexBasis: "auto",
-    width: "100%"
-  },
-  minWidth: {
-    minWidth: 170
-  },
-  label: {
-    fontWeight: "500"
-  },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8
-  },
-  triggerContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    gap: 8
-  },
-  triggerContentColumn: {
-    flexDirection: "column",
-    alignItems: "flex-start"
-  },
-  valueWrapper: {
-    flex: 1,
-    gap: 2
-  },
-  valueText: {
-    flexShrink: 1
-  },
-  endSlot: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  clearButton: {
-    paddingHorizontal: 4,
-    paddingVertical: 2
-  },
-  clearText: {
-    fontSize: 12
-  },
-  helperText: {
-    fontSize: 12
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.70)",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  listbox: {
-    overflow: "hidden"
-  },
-  listboxContent: {
-    minWidth: "100%"
-  },
-  dialogTitle: {
-    fontWeight: "600",
-    paddingHorizontal: 16,
-    paddingVertical: 12
-  },
-  outsideLeftRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
-  }
-});
-
-// src/components/select/select-trigger.tsx
-import React2 from "react";
-import {
-  Pressable,
-  Text,
-  View
-} from "react-native";
-
-// src/components/select/chevron-down-icon.tsx
-import React, { useEffect, useRef } from "react";
-import { Animated } from "react-native";
-import Svg, { Path } from "react-native-svg";
-function ChevronDownIcon({
-  color,
-  size,
-  isOpen = false
-}) {
-  const rotation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
-  useEffect(() => {
-    Animated.timing(rotation, {
-      toValue: isOpen ? 1 : 0,
-      duration: 180,
-      useNativeDriver: true
-    }).start();
-  }, [isOpen, rotation]);
-  const rotate = rotation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "180deg"]
-  });
-  return /* @__PURE__ */ React.createElement(Animated.View, { style: { transform: [{ rotate }] } }, /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
-    Path,
-    {
-      d: "M6 9L12 15L18 9",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )));
-}
-
-// src/components/select/select-trigger.tsx
-var SelectTrigger = ({
-  triggerRef,
-  isOpen,
-  isDisabled,
-  onPress,
-  onLayout,
-  accessibilityLabel,
-  variant,
-  sizeStyles,
-  radiusStyles,
-  variantStyles,
-  displayValue,
-  valueColor,
-  selectorColor,
-  labelInside,
-  labelNode,
-  startContent,
-  endContent,
-  selectorIcon,
-  onClear,
-  showClear,
-  textStyle,
-  style
-}) => {
-  const renderSelectorIcon = selectorIcon ?? /* @__PURE__ */ React2.createElement(ChevronDownIcon, { color: selectorColor, size: 16, isOpen });
-  return /* @__PURE__ */ React2.createElement(View, { ref: triggerRef, collapsable: false }, /* @__PURE__ */ React2.createElement(
-    Pressable,
-    {
-      onPress,
-      disabled: isDisabled,
-      onLayout,
-      accessibilityRole: "button",
-      accessibilityLabel,
-      accessibilityState: { disabled: isDisabled, expanded: isOpen },
-      style: [
-        styles.trigger,
-        variant === "underlined" ? { borderRadius: 0 } : radiusStyles,
-        variantStyles,
-        {
-          minHeight: sizeStyles.minHeight,
-          paddingHorizontal: variant === "underlined" ? 2 : sizeStyles.paddingHorizontal,
-          paddingVertical: sizeStyles.paddingVertical
-        },
-        isDisabled && styles.disabled,
-        style
-      ]
-    },
-    /* @__PURE__ */ React2.createElement(
-      View,
-      {
-        style: [styles.triggerContent, labelInside && styles.triggerContentColumn]
-      },
-      startContent,
-      /* @__PURE__ */ React2.createElement(View, { style: styles.valueWrapper }, labelInside && labelNode, /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          style: [
-            styles.valueText,
-            { fontSize: sizeStyles.fontSize, color: valueColor },
-            textStyle
-          ]
-        },
-        displayValue
-      )),
-      endContent
-    ),
-    /* @__PURE__ */ React2.createElement(View, { style: styles.endSlot }, showClear && onClear && /* @__PURE__ */ React2.createElement(Pressable, { onPress: onClear, style: styles.clearButton }, /* @__PURE__ */ React2.createElement(Text, { style: [styles.clearText, { color: selectorColor }] }, "x")), renderSelectorIcon)
-  ));
-};
-
-// src/components/select/select.animation.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { Animated as Animated2 } from "react-native";
-var useSelectListboxAnimation = (isOpen) => {
-  const animationOpacity = useRef2(new Animated2.Value(0)).current;
-  const animationScale = useRef2(new Animated2.Value(0.98)).current;
-  useEffect2(() => {
-    if (!isOpen) {
-      return;
-    }
-    animationOpacity.setValue(0);
-    animationScale.setValue(0.98);
-    Animated2.parallel([
-      Animated2.timing(animationOpacity, {
-        toValue: 1,
-        duration: 180,
-        useNativeDriver: true
-      }),
-      Animated2.timing(animationScale, {
-        toValue: 1,
-        duration: 180,
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [isOpen, animationOpacity, animationScale]);
-  return { animationOpacity, animationScale };
-};
-
-// src/components/select/select.state.hook.ts
-import { useCallback, useEffect as useEffect3, useRef as useRef3, useState } from "react";
-var useSelectOpenState = ({
-  isOpened,
-  isDisabled,
-  onOpenChange,
-  onClose
-}) => {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isOpen = isOpened ?? internalOpen;
-  const setOpen = useCallback(
-    (nextOpen) => {
-      if (nextOpen && isDisabled) {
-        return;
-      }
-      if (isOpened === void 0) {
-        setInternalOpen(nextOpen);
-      }
-      onOpenChange?.(nextOpen);
-      if (!nextOpen) {
-        onClose?.();
-      }
-    },
-    [isDisabled, isOpened, onOpenChange, onClose]
-  );
-  return { isOpen, setOpen };
-};
-var useSelectSelection = ({
-  selectionMode,
-  selectedKeys,
-  defaultSelectedKeys,
-  onSelectionChange,
-  onClear
-}) => {
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState(
-    defaultSelectedKeys ?? []
-  );
-  const isControlledSelection = selectedKeys !== void 0;
-  const currentSelectedKeys = isControlledSelection ? selectedKeys ?? [] : internalSelectedKeys;
-  const updateSelection = useCallback(
-    (nextKeys) => {
-      if (!isControlledSelection) {
-        setInternalSelectedKeys(nextKeys);
-      }
-      onSelectionChange?.(nextKeys);
-      if (nextKeys.length === 0) {
-        onClear?.();
-      }
-    },
-    [isControlledSelection, onSelectionChange, onClear]
-  );
-  const getNextSelection = useCallback(
-    (key) => {
-      const isAlreadySelected = currentSelectedKeys.includes(key);
-      if (selectionMode === "multiple") {
-        return isAlreadySelected ? currentSelectedKeys.filter((existingKey) => existingKey !== key) : [...currentSelectedKeys, key];
-      }
-      if (!isAlreadySelected) {
-        return [key];
-      }
-      return currentSelectedKeys;
-    },
-    [currentSelectedKeys, selectionMode]
-  );
-  return { currentSelectedKeys, updateSelection, getNextSelection };
-};
-var useSelectTriggerMeasurements = (isOpen) => {
-  const triggerRef = useRef3(null);
-  const [triggerWidth, setTriggerWidth] = useState(null);
-  const [triggerPosition, setTriggerPosition] = useState(
-    null
-  );
-  const handleTriggerLayout = useCallback((event) => {
-    setTriggerWidth(event.nativeEvent.layout.width);
-  }, []);
-  useEffect3(() => {
-    if (!isOpen) {
-      return;
-    }
-    const measureTrigger = () => {
-      triggerRef.current?.measureInWindow((x, y, width, height) => {
-        setTriggerPosition({ x, y, width, height });
-      });
-    };
-    const frameId = globalThis.setTimeout(measureTrigger, 0);
-    return () => globalThis.clearTimeout(frameId);
-  }, [isOpen]);
-  return { triggerRef, triggerWidth, triggerPosition, handleTriggerLayout };
-};
-
-// src/components/select/select.utils.ts
-var getTextValue = (value) => {
-  if (typeof value === "string") return value;
-  if (typeof value === "number") return String(value);
-  return void 0;
-};
-
-// src/components/select/select.tsx
-var defaultPlaceholder = "Select an option";
-var Select = ({
-  children,
-  selectionMode = "single",
-  selectedKeys,
-  disabledKeys,
-  defaultSelectedKeys,
-  variant = "colored",
-  themeColor = "default",
-  size = "md",
-  radius = "md",
-  placeholder = defaultPlaceholder,
-  labelPlacement = "outside",
-  label,
-  hint,
-  errorMessage,
-  startContent,
-  endContent,
-  selectorIcon,
-  maxListboxHeight = 280,
-  fullWidth = false,
-  isOpened,
-  isDisabled = false,
-  isInvalid = false,
-  style,
-  textStyle,
-  onClose,
-  onOpenChange,
-  onSelectionChange,
-  onClear
-}) => {
-  const { isOpen, setOpen } = useSelectOpenState({
-    isOpened,
-    isDisabled,
-    onOpenChange,
-    onClose
-  });
-  const { currentSelectedKeys, updateSelection, getNextSelection } = useSelectSelection({
-    selectionMode,
-    selectedKeys,
-    defaultSelectedKeys,
-    onSelectionChange,
-    onClear
-  });
-  const { triggerRef, handleTriggerLayout } = useSelectTriggerMeasurements(isOpen);
-  const { animationOpacity, animationScale } = useSelectListboxAnimation(isOpen);
-  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const disabledKeySet = useMemo2(() => {
-    return new Set(disabledKeys ?? []);
-  }, [disabledKeys]);
-  const items = useMemo2(() => {
-    const elements = React3.Children.toArray(children).filter(Boolean);
-    return elements.map((child, index) => {
-      if (!React3.isValidElement(child)) {
-        return null;
-      }
-      const key = child.props.value ?? String(index);
-      const labelText = getTextValue(child.props.label) ?? key;
-      return {
-        key,
-        element: child,
-        labelText
-      };
-    }).filter((item) => item !== null);
-  }, [children]);
-  const selectedLabels = useMemo2(() => {
-    const labelMap = new Map(items.map((item) => [item.key, item.labelText]));
-    return currentSelectedKeys.map((key) => labelMap.get(key)).filter((value) => Boolean(value));
-  }, [currentSelectedKeys, items]);
-  const displayValue = selectedLabels.length ? selectedLabels.join(", ") : placeholder;
-  const shouldShowPlaceholder = selectedLabels.length === 0;
-  const theme = useXUITheme();
-  const sizeStyles = useSelectSizeStyles(size);
-  const { radiusStyles, listboxRadius } = useSelectRadiusStyles(radius);
-  const variantStyles = useSelectVariantStyles(themeColor, variant, isInvalid);
-  const labelStyle = useSelectLabelStyle(themeColor, isInvalid, sizeStyles.labelSize);
-  const valueColor = useSelectValueColor(isInvalid, shouldShowPlaceholder);
-  const helperColor = useSelectHelperColor(isInvalid);
-  const selectorColor = useSelectSelectorColor(isInvalid, shouldShowPlaceholder);
-  const handleItemSelection = useCallback2(
-    (key) => {
-      if (isDisabled) {
-        return;
-      }
-      const nextKeys = getNextSelection(key);
-      if (nextKeys !== currentSelectedKeys) {
-        updateSelection(nextKeys);
-      }
-      if (selectionMode === "single") {
-        setOpen(false);
-      }
-    },
-    [
-      currentSelectedKeys,
-      isDisabled,
-      selectionMode,
-      setOpen,
-      updateSelection,
-      getNextSelection
-    ]
-  );
-  const handleClear = () => {
-    if (isDisabled || currentSelectedKeys.length === 0) {
-      return;
-    }
-    updateSelection([]);
-  };
-  const handleOverlayPress = () => {
-    setOpen(false);
-  };
-  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ React3.createElement(Text2, { style: [styles.label, labelStyle] }, label) : /* @__PURE__ */ React3.createElement(View2, null, label) : null;
-  const dialogTitle = typeof label === "string" || typeof label === "number" ? String(label) : void 0;
-  const shouldShowHelper = Boolean(hint || errorMessage);
-  const helperContent = isInvalid && errorMessage ? errorMessage : hint;
-  const dialogWidth = screenWidth * 0.9;
-  const dialogMaxHeight = Math.min(screenHeight * 0.6, maxListboxHeight);
-  const listItems = items.map((item) => {
-    const itemProps = item.element.props;
-    const itemDisabled = isDisabled || itemProps.isDisabled || disabledKeySet.has(item.key);
-    const itemSelected = itemProps.isSelected ?? currentSelectedKeys.includes(item.key);
-    const handleItemSelected = () => {
-      if (itemDisabled || itemProps.isReadOnly) {
-        return;
-      }
-      handleItemSelection(item.key);
-      itemProps.onSelected?.();
-    };
-    return React3.cloneElement(item.element, {
-      key: item.key,
-      isDisabled: itemDisabled,
-      isSelected: itemSelected,
-      onSelected: handleItemSelected
-    });
-  });
-  const isLabelInside = labelPlacement === "inside";
-  const isLabelOutsideLeft = labelPlacement === "outside-left";
-  const isLabelOutside = labelPlacement === "outside" || labelPlacement === "outside-top";
-  const triggerContent = /* @__PURE__ */ React3.createElement(
-    SelectTrigger,
-    {
-      triggerRef,
-      isOpen,
-      isDisabled,
-      onPress: () => setOpen(!isOpen),
-      onLayout: handleTriggerLayout,
-      accessibilityLabel: typeof label === "string" ? label : void 0,
-      variant,
-      sizeStyles,
-      radiusStyles,
-      variantStyles,
-      displayValue,
-      valueColor,
-      selectorColor,
-      labelInside: isLabelInside,
-      labelNode: renderLabel,
-      startContent,
-      endContent,
-      selectorIcon,
-      onClear: handleClear,
-      showClear: Boolean(onClear && currentSelectedKeys.length > 0),
-      textStyle,
-      style
-    }
-  );
-  const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
-  return /* @__PURE__ */ React3.createElement(View2, { style: [styles.container, fullWidth ? styles.fullWidth : styles.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ React3.createElement(View2, { style: styles.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ React3.createElement(Text2, { style: [styles.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ React3.createElement(View2, null, helperContent) : null, /* @__PURE__ */ React3.createElement(
-    Modal,
-    {
-      visible: isOpen,
-      transparent: true,
-      animationType: "fade",
-      onRequestClose: handleOverlayPress
-    },
-    /* @__PURE__ */ React3.createElement(Pressable2, { style: styles.overlay, onPress: handleOverlayPress }, /* @__PURE__ */ React3.createElement(
-      Animated3.View,
-      {
-        style: [
-          styles.listbox,
-          {
-            width: dialogWidth,
-            maxHeight: dialogMaxHeight,
-            borderRadius: listboxRadius,
-            backgroundColor: theme.colors.background,
-            opacity: animationOpacity,
-            transform: [{ scale: animationScale }],
-            ...theme.shadows.md
-          }
-        ]
-      },
-      /* @__PURE__ */ React3.createElement(
-        Pressable2,
-        {
-          onPress: (event) => event.stopPropagation(),
-          style: { maxHeight: dialogMaxHeight }
-        },
-        /* @__PURE__ */ React3.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ React3.createElement(
-          View2,
-          {
-            style: [styles.listboxContent, { maxHeight: dialogMaxHeight }]
-          },
-          dialogTitle ? /* @__PURE__ */ React3.createElement(
-            Text2,
-            {
-              style: [
-                styles.dialogTitle,
-                { color: theme.colors.foreground }
-              ]
-            },
-            dialogTitle
-          ) : null,
-          /* @__PURE__ */ React3.createElement(ScrollView, { style: { maxHeight: dialogMaxHeight } }, listItems)
-        ))
-      )
-    ))
-  ));
-};
-
-// src/components/select/select-item.tsx
-import React4, { useContext } from "react";
-import { Pressable as Pressable3, Text as Text3, View as View3 } from "react-native";
-
-// src/components/select/select-item.hook.ts
-import { useMemo as useMemo3 } from "react";
-import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
-var useSelectItemSizeStyles = (size) => {
-  const theme = useXUITheme();
-  return useMemo3(() => {
-    const sizes = {
-      xs: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.xs,
-        titleSize: theme.fontSizes.xs,
-        descriptionSize: theme.fontSizes.xs
-      },
-      sm: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.md,
-        titleSize: theme.fontSizes.sm,
-        descriptionSize: theme.fontSizes.xs
-      },
-      md: {
-        paddingVertical: theme.spacing.md,
-        paddingHorizontal: theme.spacing.md,
-        titleSize: theme.fontSizes.md,
-        descriptionSize: theme.fontSizes.xs
-      },
-      lg: {
-        paddingVertical: theme.spacing.lg,
-        paddingHorizontal: theme.spacing.lg,
-        titleSize: theme.fontSizes.lg,
-        descriptionSize: theme.fontSizes.md
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-};
-var useSelectItemBackgroundColor = (themeColor, isSelected) => {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor2(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return useMemo3(() => {
-    if (isSelected) {
-      return colorScheme.container;
-    }
-    return "transparent";
-  }, [isSelected, colorScheme]);
-};
-var useSelectItemTextColors = () => {
-  const theme = useXUITheme();
-  return useMemo3(() => {
-    return {
-      textColor: theme.colors.foreground,
-      descriptionColor: theme.colors.foreground
-    };
-  }, [theme]);
-};
-var useSelectItemCheckmarkColor = (themeColor) => {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor2(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return useMemo3(() => {
-    if (themeColor === "default") {
-      return theme.colors.primary.main;
-    }
-    return colorScheme.main;
-  }, [themeColor, colorScheme, theme]);
-};
-
-// src/components/select/select-item.style.ts
-import { StyleSheet as StyleSheet2 } from "react-native";
-var styles2 = StyleSheet2.create({
-  item: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  content: {
-    flex: 1,
-    gap: 2
-  },
-  title: {
-    fontWeight: "500"
-  },
-  description: {
-    opacity: 0.7
-  },
-  disabled: {
-    opacity: 0.5
-  }
-});
-
-// src/components/select/select-item.tsx
-var defaultSize = "md";
-var SelectItem = ({
-  label,
-  description,
-  startContent,
-  endContent,
-  selectedIcon,
-  isDisabled = false,
-  isSelected = false,
-  isReadOnly = false,
-  style,
-  textStyle,
-  onSelected
-}) => {
-  const context = useContext(SelectContext);
-  const size = context?.size ?? defaultSize;
-  const themeColor = context?.themeColor ?? "default";
-  const isItemDisabled = context?.isDisabled ? true : isDisabled;
-  const sizeStyles = useSelectItemSizeStyles(size);
-  const backgroundColor = useSelectItemBackgroundColor(themeColor, isSelected);
-  const { textColor, descriptionColor } = useSelectItemTextColors();
-  const checkmarkColor = useSelectItemCheckmarkColor(themeColor);
-  const handlePress = () => {
-    if (isItemDisabled || isReadOnly) {
-      return;
-    }
-    onSelected?.();
-  };
-  return /* @__PURE__ */ React4.createElement(
-    Pressable3,
-    {
-      onPress: handlePress,
-      disabled: isItemDisabled,
-      style: [
-        styles2.item,
-        {
-          paddingVertical: sizeStyles.paddingVertical,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor
-        },
-        isItemDisabled && styles2.disabled,
-        style
-      ]
-    },
-    startContent,
-    /* @__PURE__ */ React4.createElement(View3, { style: styles2.content }, /* @__PURE__ */ React4.createElement(
-      Text3,
-      {
-        style: [
-          styles2.title,
-          { fontSize: sizeStyles.titleSize, color: textColor },
-          textStyle
-        ]
-      },
-      label
-    ), description && /* @__PURE__ */ React4.createElement(
-      Text3,
-      {
-        style: [
-          styles2.description,
-          { fontSize: sizeStyles.descriptionSize, color: descriptionColor }
-        ]
-      },
-      description
-    )),
-    isSelected && (selectedIcon || /* @__PURE__ */ React4.createElement(CheckmarkIcon, { color: checkmarkColor, size: 16 })),
-    endContent
-  );
-};
-export {
-  Select,
-  SelectItem
-};