@xaui/native 0.0.10 → 0.0.12

package/dist/index.cjs

@@ -34,6 +34,10 @@ __export(src_exports, {
   Alert: () => Alert,
   Autocomplete: () => Autocomplete,
   AutocompleteItem: () => AutocompleteItem,
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup,
+  Badge: () => Badge,
+  DatePicker: () => DatePicker,
   Divider: () => Divider,
   Typography: () => Typography
 });
@@ -542,14 +546,477 @@ var Divider = ({
   );
 };
 
-// src/components/alert/alert.tsx
-var import_react15 = __toESM(require("react"), 1);
+// src/components/avatar/avatar.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native11 = require("react-native");
+
+// src/components/avatar/avatar.style.ts
+var import_react_native10 = require("react-native");
+var styles3 = import_react_native10.StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  fallback: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  group: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start"
+  }
+});
+
+// src/components/avatar/avatar.hook.ts
+var import_react12 = require("react");
+var import_core7 = require("@xaui/core");
+var sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48
+};
+function resolveAvatarSize(size) {
+  if (typeof size === "number") {
+    return size;
+  }
+  return sizeMap[size];
+}
+function useAvatarSizeStyles(size) {
+  const theme = useXUITheme();
+  const resolvedSize = (0, import_react12.useMemo)(() => resolveAvatarSize(size), [size]);
+  const fontSize = (0, import_react12.useMemo)(() => {
+    if (typeof size === "number") {
+      return Math.max(10, Math.round(size * 0.4));
+    }
+    return theme.fontSizes[size];
+  }, [size, theme]);
+  return {
+    size: resolvedSize,
+    fontSize
+  };
+}
+function useAvatarRadiusStyles(radius, size) {
+  const theme = useXUITheme();
+  return (0, import_react12.useMemo)(() => {
+    if (radius === "full") {
+      return { borderRadius: size / 2 };
+    }
+    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, size, theme]);
+}
+function useAvatarColors(themeColor, isDisabled) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const backgroundColor = (0, import_react12.useMemo)(() => {
+    if (isDisabled) {
+      return theme.colors.background;
+    }
+    return colorScheme.background;
+  }, [colorScheme.background, isDisabled, theme.colors.background]);
+  const textColor = (0, import_react12.useMemo)(() => {
+    if (safeThemeColor === "default") {
+      return theme.colors.foreground;
+    }
+    return colorScheme.main;
+  }, [safeThemeColor, colorScheme.main, theme.colors.foreground]);
+  return {
+    backgroundColor,
+    textColor,
+    borderColor: colorScheme.main
+  };
+}
+function getDefaultInitials(name) {
+  const trimmed = name.trim();
+  if (!trimmed) {
+    return "";
+  }
+  const parts = trimmed.split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase();
+  }
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+
+// src/components/avatar/avatar.tsx
+var Avatar = ({
+  src,
+  name,
+  icon,
+  fallback,
+  size = "md",
+  radius = "full",
+  themeColor = "default",
+  isBordered = false,
+  isDisabled = false,
+  showFallback = false,
+  getInitials,
+  customAppearance
+}) => {
+  const [isError, setIsError] = import_react13.default.useState(false);
+  const { size: resolvedSize, fontSize } = useAvatarSizeStyles(size);
+  const radiusStyles = useAvatarRadiusStyles(radius, resolvedSize);
+  const { backgroundColor, textColor, borderColor } = useAvatarColors(
+    themeColor,
+    isDisabled
+  );
+  const accessibilityLabel = name ?? "Avatar";
+  const shouldShowFallback = showFallback || !src || isError;
+  const initials = name ? (getInitials ?? getDefaultInitials)(name) : "";
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native11.View,
+    {
+      style: [
+        styles3.container,
+        {
+          width: resolvedSize,
+          height: resolvedSize,
+          backgroundColor,
+          opacity: isDisabled ? 0.6 : 1,
+          borderWidth: isBordered ? 1 : 0,
+          borderColor: isBordered ? borderColor : "transparent"
+        },
+        radiusStyles,
+        customAppearance?.container
+      ],
+      accessible: true,
+      accessibilityRole: "image",
+      accessibilityLabel
+    },
+    !shouldShowFallback && src ? /* @__PURE__ */ import_react13.default.createElement(
+      import_react_native11.Image,
+      {
+        source: { uri: src },
+        style: [styles3.image, radiusStyles, customAppearance?.image],
+        accessibilityLabel,
+        onError: () => setIsError(true)
+      }
+    ) : /* @__PURE__ */ import_react13.default.createElement(import_react_native11.View, { style: [styles3.fallback, { width: "100%", height: "100%" }] }, fallback ?? icon ?? /* @__PURE__ */ import_react13.default.createElement(
+      import_react_native11.Text,
+      {
+        style: [
+          {
+            color: textColor,
+            fontSize,
+            fontWeight: "600"
+          },
+          customAppearance?.text
+        ]
+      },
+      initials
+    ))
+  );
+};
+
+// src/components/avatar/avatar-group.tsx
+var import_react14 = __toESM(require("react"), 1);
 var import_react_native12 = require("react-native");
+var AvatarGroup = ({
+  children,
+  max,
+  total,
+  size = "md",
+  radius = "full",
+  themeColor = "default",
+  isBordered = false,
+  isDisabled = false,
+  isGrid = false,
+  renderCount,
+  customAppearance
+}) => {
+  const theme = useXUITheme();
+  const resolvedSize = resolveAvatarSize(size);
+  const spacing = theme.spacing.xs;
+  const overlap = Math.round(resolvedSize * 0.28);
+  const allChildren = import_react14.default.Children.toArray(children).filter(
+    (child) => import_react14.default.isValidElement(child)
+  );
+  const totalCount = total ?? allChildren.length;
+  const maxCount = max ?? totalCount;
+  const visibleChildren = allChildren.slice(0, maxCount);
+  const remaining = Math.max(0, totalCount - maxCount);
+  const enhanced = visibleChildren.map((child, index) => {
+    const childProps = child.props;
+    return /* @__PURE__ */ import_react14.default.createElement(
+      import_react_native12.View,
+      {
+        key: child.key ?? index,
+        style: isGrid ? { marginRight: spacing, marginBottom: spacing } : { marginLeft: index === 0 ? 0 : -overlap, zIndex: index }
+      },
+      import_react14.default.cloneElement(child, {
+        size: childProps.size ?? size,
+        radius: childProps.radius ?? radius,
+        themeColor: childProps.themeColor ?? themeColor,
+        isBordered: childProps.isBordered ?? isBordered,
+        isDisabled: childProps.isDisabled ?? isDisabled
+      })
+    );
+  });
+  const countNode = remaining > 0 ? renderCount?.(remaining) ?? /* @__PURE__ */ import_react14.default.createElement(
+    Avatar,
+    {
+      name: `+${remaining}`,
+      showFallback: true,
+      size,
+      radius,
+      themeColor,
+      isBordered,
+      isDisabled,
+      fallback: /* @__PURE__ */ import_react14.default.createElement(
+        import_react_native12.Text,
+        {
+          style: {
+            color: theme.colors.foreground,
+            fontSize: Math.max(10, Math.round(resolvedSize * 0.35)),
+            fontWeight: "600"
+          }
+        },
+        "+",
+        remaining
+      )
+    }
+  ) : null;
+  if (countNode) {
+    enhanced.push(
+      /* @__PURE__ */ import_react14.default.createElement(
+        import_react_native12.View,
+        {
+          key: "avatar-count",
+          style: isGrid ? { marginRight: spacing, marginBottom: spacing } : {
+            marginLeft: enhanced.length === 0 ? 0 : -overlap,
+            zIndex: enhanced.length
+          }
+        },
+        countNode
+      )
+    );
+  }
+  return /* @__PURE__ */ import_react14.default.createElement(
+    import_react_native12.View,
+    {
+      style: [isGrid ? styles3.grid : styles3.group, customAppearance?.container],
+      accessible: true
+    },
+    enhanced
+  );
+};
+
+// src/components/badge/badge.tsx
+var import_react16 = __toESM(require("react"), 1);
+var import_react_native14 = require("react-native");
+
+// src/components/badge/badge.style.ts
+var import_react_native13 = require("react-native");
+var styles4 = import_react_native13.StyleSheet.create({
+  container: {
+    position: "relative",
+    alignSelf: "flex-start"
+  },
+  badge: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  text: {
+    textAlign: "center",
+    fontWeight: "600",
+    includeFontPadding: false,
+    textAlignVertical: "center"
+  }
+});
+
+// src/components/badge/badge.hook.ts
+var import_react15 = require("react");
+var import_core10 = require("@xaui/core");
+var sizeMap2 = {
+  sm: { height: 16, minWidth: 16, dot: 8 },
+  md: { height: 20, minWidth: 20, dot: 10 },
+  lg: { height: 24, minWidth: 24, dot: 12 }
+};
+var fontSizeMap = {
+  sm: 9,
+  md: 10,
+  lg: 12
+};
+function useBadgeSizeStyles(size, isDot, isOneChar) {
+  const theme = useXUITheme();
+  return (0, import_react15.useMemo)(() => {
+    const { height, minWidth, dot } = sizeMap2[size];
+    const fontSize = fontSizeMap[size];
+    if (isDot) {
+      return {
+        height: dot,
+        minWidth: dot,
+        paddingHorizontal: 0,
+        fontSize
+      };
+    }
+    if (isOneChar) {
+      return {
+        height,
+        minWidth: height,
+        paddingHorizontal: 0,
+        fontSize
+      };
+    }
+    const paddingHorizontal = size === "sm" ? theme.spacing.xs : theme.spacing.sm;
+    return {
+      height,
+      minWidth,
+      paddingHorizontal,
+      fontSize
+    };
+  }, [isDot, isOneChar, size, theme]);
+}
+function useBadgeVariantStyles(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core10.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return (0, import_react15.useMemo)(() => {
+    if (variant === "flat") {
+      return {
+        backgroundColor: colorScheme.background,
+        color: colorScheme.main
+      };
+    }
+    if (variant === "faded") {
+      return {
+        backgroundColor: (0, import_core10.withOpacity)(colorScheme.background, 0.7),
+        color: colorScheme.main
+      };
+    }
+    if (variant === "shadow") {
+      return {
+        backgroundColor: colorScheme.main,
+        color: colorScheme.foreground,
+        shadow: theme.shadows.sm
+      };
+    }
+    return {
+      backgroundColor: colorScheme.main,
+      color: colorScheme.foreground
+    };
+  }, [colorScheme, theme, variant]);
+}
+function useBadgeRadiusStyles(radius, height) {
+  const theme = useXUITheme();
+  return (0, import_react15.useMemo)(() => {
+    if (radius === "full") {
+      return { borderRadius: height / 2 };
+    }
+    return { borderRadius: theme.borderRadius[radius] };
+  }, [height, radius, theme.borderRadius]);
+}
+function useBadgePlacementStyles(placement, height) {
+  return (0, import_react15.useMemo)(() => {
+    const offset = Math.round(height * 0.3);
+    switch (placement) {
+      case "top-left":
+        return { top: -offset, left: -offset };
+      case "bottom-right":
+        return { bottom: -offset, right: -offset };
+      case "bottom-left":
+        return { bottom: -offset, left: -offset };
+      case "top-right":
+      default:
+        return { top: -offset, right: -offset };
+    }
+  }, [height, placement]);
+}
+
+// src/components/badge/badge.tsx
+var Badge = ({
+  children,
+  content,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius = "full",
+  placement = "top-right",
+  showOutline = true,
+  disableOutline = false,
+  isInvisible = false,
+  isDot = false,
+  isOneChar = false,
+  disableAnimation = false,
+  customAppearance
+}) => {
+  const shouldRender = !isInvisible && (isDot || content !== void 0);
+  if (!shouldRender && !children) {
+    return null;
+  }
+  const forceOneChar = isOneChar || radius === "full";
+  const sizeStyles = useBadgeSizeStyles(size, isDot, forceOneChar);
+  const variantStyles = useBadgeVariantStyles(themeColor, variant);
+  const radiusStyles = useBadgeRadiusStyles(radius, sizeStyles.height);
+  const placementStyles = useBadgePlacementStyles(placement, sizeStyles.height);
+  const outlineEnabled = disableOutline ? false : showOutline;
+  const outlineStyles = outlineEnabled ? { borderWidth: 1, borderColor: "#FFFFFF" } : { borderWidth: 0, borderColor: "transparent" };
+  const badgeContent = isDot ? null : content;
+  return /* @__PURE__ */ import_react16.default.createElement(import_react_native14.View, { style: [styles4.container, customAppearance?.container] }, children, shouldRender && /* @__PURE__ */ import_react16.default.createElement(
+    import_react_native14.View,
+    {
+      style: [
+        styles4.badge,
+        {
+          minWidth: sizeStyles.minWidth,
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor: variantStyles.backgroundColor,
+          opacity: disableAnimation ? 1 : 1
+        },
+        radiusStyles,
+        placementStyles,
+        outlineStyles,
+        variantStyles.shadow,
+        customAppearance?.badge
+      ],
+      accessible: true,
+      accessibilityRole: "text"
+    },
+    badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native14.Text,
+      {
+        style: [
+          styles4.text,
+          {
+            fontSize: sizeStyles.fontSize,
+            color: variantStyles.color
+          },
+          customAppearance?.text
+        ]
+      },
+      badgeContent
+    )
+  ));
+};
+
+// src/components/alert/alert.tsx
+var import_react20 = __toESM(require("react"), 1);
+var import_react_native17 = require("react-native");
 var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"), 1);
 
 // src/components/alert/alert.style.ts
-var import_react_native10 = require("react-native");
-var styles3 = import_react_native10.StyleSheet.create({
+var import_react_native15 = require("react-native");
+var styles5 = import_react_native15.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -587,11 +1054,11 @@ var styles3 = import_react_native10.StyleSheet.create({
 });
 
 // src/components/alert/alert.hook.ts
-var import_react12 = require("react");
-var import_core7 = require("@xaui/core");
+var import_react17 = require("react");
+var import_core12 = require("@xaui/core");
 var useAlertColorScheme = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core12.getSafeThemeColor)(themeColor);
   return {
     theme,
     colorScheme: theme.colors[safeThemeColor],
@@ -600,10 +1067,10 @@ var useAlertColorScheme = (themeColor) => {
 };
 var useAlertContainerStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const containerStyles = (0, import_react12.useMemo)(() => {
-    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.background : variant === "faded" ? (0, import_core7.withOpacity)(colorScheme.background, 0.75) : "transparent";
+  const containerStyles = (0, import_react17.useMemo)(() => {
+    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.background : variant === "faded" ? (0, import_core12.withOpacity)(colorScheme.background, 0.75) : "transparent";
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
-    const borderColor = variant === "bordered" ? (0, import_core7.withOpacity)(colorScheme.main, 0.75) : variant === "faded" ? (0, import_core7.withOpacity)(isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
+    const borderColor = variant === "bordered" ? (0, import_core12.withOpacity)(colorScheme.main, 0.75) : variant === "faded" ? (0, import_core12.withOpacity)(isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
     return {
       backgroundColor,
       borderColor,
@@ -616,10 +1083,10 @@ var useAlertContainerStyles = (themeColor, variant) => {
 };
 var useAlertIconWrapperStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const iconWrapperStyles = (0, import_react12.useMemo)(() => {
-    const backgroundColor = variant === "solid" ? (0, import_core7.withOpacity)(colorScheme.foreground, 0.16) : (0, import_core7.withOpacity)(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
+  const iconWrapperStyles = (0, import_react17.useMemo)(() => {
+    const backgroundColor = variant === "solid" ? (0, import_core12.withOpacity)(colorScheme.foreground, 0.16) : (0, import_core12.withOpacity)(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
-    const borderColor = (0, import_core7.withOpacity)(
+    const borderColor = (0, import_core12.withOpacity)(
       isDefault ? theme.colors.foreground : colorScheme.main,
       0.2
     );
@@ -633,7 +1100,7 @@ var useAlertIconWrapperStyles = (themeColor, variant) => {
 };
 var useAlertTextStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const textStyles = (0, import_react12.useMemo)(() => {
+  const textStyles = (0, import_react17.useMemo)(() => {
     const baseTextColor = variant === "solid" ? colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
     return {
       titleStyles: {
@@ -642,7 +1109,7 @@ var useAlertTextStyles = (themeColor, variant) => {
         fontWeight: theme.fontWeights.semibold
       },
       descriptionStyles: {
-        color: (0, import_core7.withOpacity)(baseTextColor, 0.75),
+        color: (0, import_core12.withOpacity)(baseTextColor, 0.75),
         fontSize: theme.fontSizes.xs,
         fontWeight: theme.fontWeights.normal
       },
@@ -654,10 +1121,10 @@ var useAlertTextStyles = (themeColor, variant) => {
 };
 
 // src/components/alert/alert-icons.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 var import_react_native_svg = __toESM(require("react-native-svg"), 1);
 function InfoIcon({ color, size }) {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Line,
     {
       x1: 12,
@@ -668,10 +1135,10 @@ function InfoIcon({ color, size }) {
       strokeWidth: 2,
       strokeLinecap: "round"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 7, r: 1, fill: color }));
+  ), /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 7, r: 1, fill: color }));
 }
 function SuccessIcon({ color, size }) {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Path,
     {
       d: "M7 12.5L10.2 15.5L17 9",
@@ -683,7 +1150,7 @@ function SuccessIcon({ color, size }) {
   ));
 }
 function WarningIcon({ color, size }) {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Path,
     {
       d: "M12 3L22 20H2L12 3Z",
@@ -691,7 +1158,7 @@ function WarningIcon({ color, size }) {
       strokeWidth: 2,
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  ), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Line,
     {
       x1: 12,
@@ -702,10 +1169,10 @@ function WarningIcon({ color, size }) {
       strokeWidth: 2,
       strokeLinecap: "round"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 17, r: 1, fill: color }));
+  ), /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 17, r: 1, fill: color }));
 }
 function DangerIcon({ color, size }) {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Line,
     {
       x1: 9,
@@ -716,7 +1183,7 @@ function DangerIcon({ color, size }) {
       strokeWidth: 2,
       strokeLinecap: "round"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  ), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Line,
     {
       x1: 15,
@@ -731,8 +1198,8 @@ function DangerIcon({ color, size }) {
 }
 
 // src/components/icon/icons/close.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_react_native11 = require("react-native");
+var import_react19 = __toESM(require("react"), 1);
+var import_react_native16 = require("react-native");
 var import_react_native_svg2 = __toESM(require("react-native-svg"), 1);
 
 // src/components/icon/icon.utils.ts
@@ -750,7 +1217,7 @@ var isThemeColor = (color) => {
 };
 
 // src/components/icon/icons/close.tsx
-var AnimatedPath = import_react_native11.Animated.createAnimatedComponent(import_react_native_svg2.Path);
+var AnimatedPath = import_react_native16.Animated.createAnimatedComponent(import_react_native_svg2.Path);
 var CloseIcon = ({
   variant = "baseline",
   size = 24,
@@ -758,24 +1225,24 @@ var CloseIcon = ({
   isAnimated = false
 }) => {
   const theme = useXUITheme();
-  const scaleAnim = (0, import_react14.useRef)(new import_react_native11.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react14.useRef)(new import_react_native11.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react14.useMemo)(() => {
+  const scaleAnim = (0, import_react19.useRef)(new import_react_native16.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react19.useRef)(new import_react_native16.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react19.useMemo)(() => {
     if (typeof color === "string" && isThemeColor(color)) {
       return theme.colors[color].main;
     }
     return color;
   }, [color, theme]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isAnimated) {
-      import_react_native11.Animated.parallel([
-        import_react_native11.Animated.spring(scaleAnim, {
+      import_react_native16.Animated.parallel([
+        import_react_native16.Animated.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 50,
           friction: 7
         }),
-        import_react_native11.Animated.timing(opacityAnim, {
+        import_react_native16.Animated.timing(opacityAnim, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true
@@ -787,7 +1254,7 @@ var CloseIcon = ({
     transform: [{ scale: scaleAnim }],
     opacity: opacityAnim
   } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ import_react14.default.createElement(
+  const renderBaseline = () => /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -795,7 +1262,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   );
-  const renderFilled = () => /* @__PURE__ */ import_react14.default.createElement(
+  const renderFilled = () => /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -803,14 +1270,14 @@ var CloseIcon = ({
       ...animatedProps
     }
   );
-  const renderDuotone = () => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+  const renderDuotone = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
     import_react_native_svg2.Path,
     {
       fill: resolvedColor,
       opacity: 0.3,
       d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
     }
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -818,7 +1285,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   ));
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
     import_react_native_svg2.Circle,
     {
       cx: "256",
@@ -828,7 +1295,7 @@ var CloseIcon = ({
       stroke: resolvedColor,
       strokeWidth: 32
     }
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -836,7 +1303,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   ));
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
     import_react_native_svg2.Rect,
     {
       x: "64",
@@ -848,7 +1315,7 @@ var CloseIcon = ({
       stroke: resolvedColor,
       strokeWidth: 32
     }
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -856,7 +1323,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   ));
-  const renderRoundFilled = () => /* @__PURE__ */ import_react14.default.createElement(
+  const renderRoundFilled = () => /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -864,7 +1331,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   );
-  const renderSquareFilled = () => /* @__PURE__ */ import_react14.default.createElement(
+  const renderSquareFilled = () => /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -891,7 +1358,7 @@ var CloseIcon = ({
         return renderBaseline();
     }
   };
-  return /* @__PURE__ */ import_react14.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 
 // src/components/alert/alert.tsx
@@ -920,8 +1387,8 @@ var Alert = ({
   onClose,
   onVisibleChange
 }) => {
-  const [internalVisible, setInternalVisible] = (0, import_react15.useState)(isVisible ?? true);
-  const [shouldRender, setShouldRender] = (0, import_react15.useState)(isVisible ?? true);
+  const [internalVisible, setInternalVisible] = (0, import_react20.useState)(isVisible ?? true);
+  const [shouldRender, setShouldRender] = (0, import_react20.useState)(isVisible ?? true);
   const isControlled = typeof isVisible === "boolean";
   const visible = isControlled ? isVisible : internalVisible;
   const opacity = (0, import_react_native_reanimated3.useSharedValue)(1);
@@ -930,7 +1397,7 @@ var Alert = ({
   const containerStyles = useAlertContainerStyles(themeColor, variant);
   const iconWrapperStyles = useAlertIconWrapperStyles(themeColor, variant);
   const { titleStyles, descriptionStyles, iconColor, closeButtonColor } = useAlertTextStyles(themeColor, variant);
-  const finishClosing = (0, import_react15.useCallback)(() => {
+  const finishClosing = (0, import_react20.useCallback)(() => {
     setShouldRender(false);
     if (!isControlled) {
       setInternalVisible(false);
@@ -938,7 +1405,7 @@ var Alert = ({
     onVisibleChange?.(false);
     onClose?.();
   }, [isControlled, onClose, onVisibleChange]);
-  const handleClose = (0, import_react15.useCallback)(() => {
+  const handleClose = (0, import_react20.useCallback)(() => {
     if (!visible) return;
     opacity.value = (0, import_react_native_reanimated3.withTiming)(0, { duration: 250 });
     scale.value = (0, import_react_native_reanimated3.withTiming)(0.95, { duration: 250 }, (finished) => {
@@ -947,7 +1414,7 @@ var Alert = ({
       }
     });
   }, [finishClosing, opacity, scale, visible]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (visible && !shouldRender) {
       setShouldRender(true);
       opacity.value = 0;
@@ -968,22 +1435,22 @@ var Alert = ({
   const shouldShowClose = Boolean(closeButton || isClosable || onClose);
   const renderIcon = () => {
     if (hideIcon) return null;
-    if (icon && (0, import_react15.isValidElement)(icon)) {
-      return (0, import_react15.cloneElement)(icon, { color: iconColor, size: 22 });
+    if (icon && (0, import_react20.isValidElement)(icon)) {
+      return (0, import_react20.cloneElement)(icon, { color: iconColor, size: 22 });
     }
     if (icon) {
-      return /* @__PURE__ */ import_react15.default.createElement(import_react_native12.Text, { style: [styles3.iconText, { color: iconColor }] }, icon);
+      return /* @__PURE__ */ import_react20.default.createElement(import_react_native17.Text, { style: [styles5.iconText, { color: iconColor }] }, icon);
     }
-    return /* @__PURE__ */ import_react15.default.createElement(IconComponent, { color: iconColor, size: 22 });
+    return /* @__PURE__ */ import_react20.default.createElement(IconComponent, { color: iconColor, size: 22 });
   };
   const renderContentText = (content) => {
     if (content === null || content === void 0) return null;
     if (typeof content === "string" || typeof content === "number") {
-      return /* @__PURE__ */ import_react15.default.createElement(
-        import_react_native12.Text,
+      return /* @__PURE__ */ import_react20.default.createElement(
+        import_react_native17.Text,
         {
           style: [
-            styles3.description,
+            styles5.description,
             descriptionStyles,
             customAppearance?.description
           ]
@@ -993,20 +1460,20 @@ var Alert = ({
     }
     return content;
   };
-  const titleNode = (0, import_react15.useMemo)(() => {
+  const titleNode = (0, import_react20.useMemo)(() => {
     if (title === null || title === void 0) return null;
     if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ import_react15.default.createElement(import_react_native12.Text, { style: [styles3.title, titleStyles, customAppearance?.title] }, title);
+      return /* @__PURE__ */ import_react20.default.createElement(import_react_native17.Text, { style: [styles5.title, titleStyles, customAppearance?.title] }, title);
     }
     return title;
   }, [title, customAppearance?.title, titleStyles]);
   const descriptionNode = renderContentText(description);
   const childrenNode = renderContentText(children);
-  const closeButtonNode = (0, import_react15.useMemo)(() => {
+  const closeButtonNode = (0, import_react20.useMemo)(() => {
     if (!closeButton) return null;
-    if (!(0, import_react15.isValidElement)(closeButton)) return closeButton;
+    if (!(0, import_react20.isValidElement)(closeButton)) return closeButton;
     const existingOnPress = closeButton.props.onPress;
-    return (0, import_react15.cloneElement)(closeButton, {
+    return (0, import_react20.cloneElement)(closeButton, {
       onPress: (event) => {
         existingOnPress?.(event);
         handleClose();
@@ -1014,58 +1481,58 @@ var Alert = ({
     });
   }, [closeButton, handleClose]);
   if (!shouldRender) return null;
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     import_react_native_reanimated3.default.View,
     {
       accessibilityRole: "alert",
       style: [
-        styles3.container,
+        styles5.container,
         containerStyles,
         radiusStyles,
         customAppearance?.container,
         animatedStyle
       ]
     },
-    !hideIcon && /* @__PURE__ */ import_react15.default.createElement(import_react_native12.View, { style: [styles3.iconWrapper, iconWrapperStyles] }, renderIcon()),
-    /* @__PURE__ */ import_react15.default.createElement(import_react_native12.View, { style: styles3.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ import_react15.default.createElement(import_react_native12.View, { style: styles3.extraContent }, childrenNode)),
-    shouldShowClose && /* @__PURE__ */ import_react15.default.createElement(import_react_native12.View, null, closeButtonNode ?? /* @__PURE__ */ import_react15.default.createElement(
-      import_react_native12.Pressable,
+    !hideIcon && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: [styles5.iconWrapper, iconWrapperStyles] }, renderIcon()),
+    /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: styles5.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: styles5.extraContent }, childrenNode)),
+    shouldShowClose && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, null, closeButtonNode ?? /* @__PURE__ */ import_react20.default.createElement(
+      import_react_native17.Pressable,
       {
         accessibilityRole: "button",
         accessibilityLabel: "Close",
         onPress: handleClose,
-        style: styles3.closeButton
+        style: styles5.closeButton
       },
-      /* @__PURE__ */ import_react15.default.createElement(CloseIcon, { size: 20, color: closeButtonColor })
+      /* @__PURE__ */ import_react20.default.createElement(CloseIcon, { size: 20, color: closeButtonColor })
     ))
   );
 };
 
 // src/components/autocomplete/autocomplete.tsx
-var import_react27 = __toESM(require("react"), 1);
-var import_react_native22 = require("react-native");
+var import_react35 = __toESM(require("react"), 1);
+var import_react_native30 = require("react-native");
 
 // src/components/autocomplete/autocomplete-context.ts
-var import_react16 = require("react");
-var AutocompleteContext = (0, import_react16.createContext)({
+var import_react21 = require("react");
+var AutocompleteContext = (0, import_react21.createContext)({
   size: "md",
   themeColor: "default",
   isDisabled: false
 });
 
 // src/components/autocomplete/autocomplete.hook.ts
-var import_react17 = require("react");
-var import_core10 = require("@xaui/core");
+var import_react22 = require("react");
+var import_core15 = require("@xaui/core");
 var import_palette2 = require("@xaui/core/palette");
 var useAutocompleteColorScheme = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core10.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core15.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return { theme, colorScheme };
 };
 var useAutocompleteSizeStyles = (size) => {
   const theme = useXUITheme();
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     const sizes = {
       xs: {
         minHeight: 34,
@@ -1101,7 +1568,7 @@ var useAutocompleteSizeStyles = (size) => {
 };
 var useAutocompleteRadiusStyles = (radius) => {
   const theme = useXUITheme();
-  const radiusStyles = (0, import_react17.useMemo)(() => {
+  const radiusStyles = (0, import_react22.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -1111,7 +1578,7 @@ var useAutocompleteRadiusStyles = (radius) => {
     };
     return { borderRadius: radii[radius] };
   }, [radius, theme]);
-  const listboxRadius = (0, import_react17.useMemo)(() => {
+  const listboxRadius = (0, import_react22.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -1125,12 +1592,12 @@ var useAutocompleteRadiusStyles = (radius) => {
 };
 var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette2.colors.gray[300];
     }
-    const styles8 = {
+    const styles12 = {
       outlined: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
@@ -1155,12 +1622,12 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
         borderColor
       }
     };
-    return styles8[variant];
+    return styles12[variant];
   }, [variant, theme, colorScheme, isInvalid, themeColor]);
 };
 var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
   const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     let baseColor = theme.colors.foreground;
     if (isInvalid) {
       baseColor = theme.colors.danger.main;
@@ -1175,7 +1642,7 @@ var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
 };
 var useAutocompleteHelperColor = (isInvalid) => {
   const theme = useXUITheme();
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     if (isInvalid) {
       return theme.colors.danger.main;
     }
@@ -1184,8 +1651,8 @@ var useAutocompleteHelperColor = (isInvalid) => {
 };
 
 // src/components/autocomplete/autocomplete.style.ts
-var import_react_native13 = require("react-native");
-var styles4 = import_react_native13.StyleSheet.create({
+var import_react_native18 = require("react-native");
+var styles6 = import_react_native18.StyleSheet.create({
   container: {
     gap: 6,
     position: "relative"
@@ -1272,16 +1739,16 @@ var styles4 = import_react_native13.StyleSheet.create({
 });
 
 // src/components/autocomplete/autocomplete.state.hook.ts
-var import_react18 = require("react");
+var import_react23 = require("react");
 var useAutocompleteOpenState = ({
   isOpened,
   isDisabled,
   onOpenChange,
   onClose
 }) => {
-  const [internalIsOpen, setInternalIsOpen] = (0, import_react18.useState)(false);
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react23.useState)(false);
   const isOpen = isOpened !== void 0 ? isOpened : internalIsOpen;
-  const setOpen = (0, import_react18.useCallback)(
+  const setOpen = (0, import_react23.useCallback)(
     (open) => {
       if (isDisabled) {
         return;
@@ -1304,9 +1771,9 @@ var useAutocompleteInputState = ({
   selectedKey,
   onInputChange
 }) => {
-  const [internalInputValue, setInternalInputValue] = (0, import_react18.useState)(defaultInputValue ?? "");
+  const [internalInputValue, setInternalInputValue] = (0, import_react23.useState)(defaultInputValue ?? "");
   const currentInputValue = inputValue !== void 0 ? inputValue : internalInputValue;
-  const updateInputValue = (0, import_react18.useCallback)(
+  const updateInputValue = (0, import_react23.useCallback)(
     (value) => {
       if (inputValue === void 0) {
         setInternalInputValue(value);
@@ -1315,7 +1782,7 @@ var useAutocompleteInputState = ({
     },
     [inputValue, onInputChange]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (selectedKey === null && inputValue === void 0) {
       setInternalInputValue("");
     }
@@ -1325,8 +1792,8 @@ var useAutocompleteInputState = ({
 var useAutocompleteSelection = ({
   onSelectionChange
 }) => {
-  const [currentSelectedKey, setCurrentSelectedKey] = (0, import_react18.useState)(null);
-  const updateSelection = (0, import_react18.useCallback)(
+  const [currentSelectedKey, setCurrentSelectedKey] = (0, import_react23.useState)(null);
+  const updateSelection = (0, import_react23.useCallback)(
     (key) => {
       setCurrentSelectedKey(key);
       onSelectionChange?.(key);
@@ -1350,14 +1817,14 @@ var defaultFilterFunction = (textValue, inputValue) => {
 };
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
-var import_react25 = __toESM(require("react"), 1);
-var import_react_native20 = require("react-native");
+var import_react33 = __toESM(require("react"), 1);
+var import_react_native28 = require("react-native");
 
 // src/components/select/checkmark-icon.tsx
-var import_react19 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_react_native_svg3 = __toESM(require("react-native-svg"), 1);
 function CheckmarkIcon({ color, size }) {
-  return /* @__PURE__ */ import_react19.default.createElement(import_react_native_svg3.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(import_react_native_svg3.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ import_react24.default.createElement(
     import_react_native_svg3.Polyline,
     {
       points: "1 9 7 14 15 4",
@@ -1370,14 +1837,14 @@ function CheckmarkIcon({ color, size }) {
 }
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var import_react23 = __toESM(require("react"), 1);
-var import_react_native18 = require("react-native");
+var import_react31 = __toESM(require("react"), 1);
+var import_react_native26 = require("react-native");
 
 // src/components/icon/icons/arrow-back.tsx
-var import_react20 = __toESM(require("react"), 1);
-var import_react_native14 = require("react-native");
+var import_react25 = __toESM(require("react"), 1);
+var import_react_native19 = require("react-native");
 var import_react_native_svg4 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath2 = import_react_native14.Animated.createAnimatedComponent(import_react_native_svg4.Path);
+var AnimatedPath2 = import_react_native19.Animated.createAnimatedComponent(import_react_native_svg4.Path);
 var ArrowBackIcon = ({
   variant = "baseline",
   size = 24,
@@ -1385,24 +1852,24 @@ var ArrowBackIcon = ({
   isAnimated = false
 }) => {
   const theme = useXUITheme();
-  const scaleAnim = (0, import_react20.useRef)(new import_react_native14.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react20.useRef)(new import_react_native14.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react20.useMemo)(() => {
+  const scaleAnim = (0, import_react25.useRef)(new import_react_native19.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react25.useRef)(new import_react_native19.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react25.useMemo)(() => {
     if (typeof color === "string" && isThemeColor(color)) {
       return theme.colors[color].main;
     }
     return color;
   }, [color, theme]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (isAnimated) {
-      import_react_native14.Animated.parallel([
-        import_react_native14.Animated.spring(scaleAnim, {
+      import_react_native19.Animated.parallel([
+        import_react_native19.Animated.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 50,
           friction: 7
         }),
-        import_react_native14.Animated.timing(opacityAnim, {
+        import_react_native19.Animated.timing(opacityAnim, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true
@@ -1414,7 +1881,7 @@ var ArrowBackIcon = ({
     transform: [{ scale: scaleAnim }],
     opacity: opacityAnim
   } : void 0;
-  const renderArrow = () => /* @__PURE__ */ import_react20.default.createElement(
+  const renderArrow = () => /* @__PURE__ */ import_react25.default.createElement(
     AnimatedPath2,
     {
       fill: "none",
@@ -1426,7 +1893,7 @@ var ArrowBackIcon = ({
       ...animatedProps
     }
   );
-  const renderDuotone = () => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+  const renderDuotone = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
     import_react_native_svg4.Path,
     {
       fill: resolvedColor,
@@ -1434,7 +1901,7 @@ var ArrowBackIcon = ({
       d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
     }
   ), renderArrow());
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
     import_react_native_svg4.Circle,
     {
       cx: "256",
@@ -1445,7 +1912,7 @@ var ArrowBackIcon = ({
       strokeWidth: 32
     }
   ), renderArrow());
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
     import_react_native_svg4.Rect,
     {
       x: "64",
@@ -1474,284 +1941,2608 @@ var ArrowBackIcon = ({
         return renderArrow();
     }
   };
-  return /* @__PURE__ */ import_react20.default.createElement(import_react_native_svg4.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+  return /* @__PURE__ */ import_react25.default.createElement(import_react_native_svg4.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 
-// src/components/icon/icons/checkmark.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_react_native15 = require("react-native");
+// src/components/icon/icons/calendar.tsx
+var import_react26 = __toESM(require("react"), 1);
+var import_react_native20 = require("react-native");
 var import_react_native_svg5 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath3 = import_react_native15.Animated.createAnimatedComponent(import_react_native_svg5.Path);
-
-// src/components/icon/icons/chevron-down.tsx
-var import_react22 = __toESM(require("react"), 1);
-var import_react_native16 = require("react-native");
-var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath4 = import_react_native16.Animated.createAnimatedComponent(import_react_native_svg6.Path);
-
-// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.style.ts
-var import_react_native17 = require("react-native");
-var styles5 = import_react_native17.StyleSheet.create({
-  backdrop: {
-    ...import_react_native17.StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)"
-  },
-  dialogContainer: {
-    flex: 1,
-    zIndex: 1
+var AnimatedPath3 = import_react_native20.Animated.createAnimatedComponent(import_react_native_svg5.Path);
+var CalendarIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = (0, import_react26.useRef)(new import_react_native20.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react26.useRef)(new import_react_native20.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react26.useMemo)(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  (0, import_react26.useEffect)(() => {
+    if (isAnimated) {
+      import_react_native20.Animated.parallel([
+        import_react_native20.Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        import_react_native20.Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isAnimated, scaleAnim, opacityAnim]);
+  const animatedProps = isAnimated ? {
+    transform: [{ scale: scaleAnim }],
+    opacity: opacityAnim
+  } : void 0;
+  const renderBaseline = () => /* @__PURE__ */ import_react26.default.createElement(
+    AnimatedPath3,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 32,
+      d: "M48 112a48 48 0 0148-48h320a48 48 0 0148 48v320a48 48 0 01-48 48H96a48 48 0 01-48-48zm0 80h416M176 64v48M336 64v48",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ import_react26.default.createElement(
+    AnimatedPath3,
+    {
+      fill: resolvedColor,
+      d: "M416 64h-56V40a24 24 0 00-48 0v24H200V40a24 24 0 00-48 0v24H96a48 48 0 00-48 48v320a48 48 0 0048 48h320a48 48 0 0048-48V112a48 48 0 00-48-48zm0 368H96V208h320z",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(
+    import_react_native_svg5.Path,
+    {
+      fill: resolvedColor,
+      opacity: 0.3,
+      d: "M48 192h416v240a48 48 0 01-48 48H96a48 48 0 01-48-48z"
+    }
+  ), renderBaseline());
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(
+    import_react_native_svg5.Circle,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ import_react26.default.createElement(
+    AnimatedPath3,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 28,
+      d: "M152 176a24 24 0 0124-24h160a24 24 0 0124 24v176a24 24 0 01-24 24H176a24 24 0 01-24-24zm0 48h208M208 152v32M304 152v32",
+      ...animatedProps
+    }
+  ));
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(
+    import_react_native_svg5.Rect,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ import_react26.default.createElement(
+    AnimatedPath3,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 28,
+      d: "M152 176a24 24 0 0124-24h160a24 24 0 0124 24v176a24 24 0 01-24 24H176a24 24 0 01-24-24zm0 48h208M208 152v32M304 152v32",
+      ...animatedProps
+    }
+  ));
+  const renderVariant = () => {
+    switch (variant) {
+      case "filled":
+        return renderFilled();
+      case "duotone":
+        return renderDuotone();
+      case "round-outlined":
+        return renderRoundOutlined();
+      case "square-outlined":
+        return renderSquareOutlined();
+      case "round-filled":
+      case "square-filled":
+        return renderFilled();
+      case "baseline":
+      default:
+        return renderBaseline();
+    }
+  };
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_native_svg5.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/checkmark.tsx
+var import_react27 = __toESM(require("react"), 1);
+var import_react_native21 = require("react-native");
+var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
+var AnimatedPath4 = import_react_native21.Animated.createAnimatedComponent(import_react_native_svg6.Path);
+
+// src/components/icon/icons/chevron-down.tsx
+var import_react28 = __toESM(require("react"), 1);
+var import_react_native22 = require("react-native");
+var import_react_native_svg7 = __toESM(require("react-native-svg"), 1);
+var AnimatedPath5 = import_react_native22.Animated.createAnimatedComponent(import_react_native_svg7.Path);
+var ChevronDownIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = (0, import_react28.useRef)(new import_react_native22.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react28.useRef)(new import_react_native22.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react28.useMemo)(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  (0, import_react28.useEffect)(() => {
+    if (isAnimated) {
+      import_react_native22.Animated.parallel([
+        import_react_native22.Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        import_react_native22.Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isAnimated, scaleAnim, opacityAnim]);
+  const animatedProps = isAnimated ? {
+    transform: [{ scale: scaleAnim }],
+    opacity: opacityAnim
+  } : void 0;
+  const renderBaseline = () => /* @__PURE__ */ import_react28.default.createElement(
+    AnimatedPath5,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M112 184l144 144 144-144",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ import_react28.default.createElement(
+    AnimatedPath5,
+    {
+      fill: resolvedColor,
+      d: "M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(
+    import_react_native_svg7.Path,
+    {
+      fill: resolvedColor,
+      opacity: 0.3,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
+    }
+  ), /* @__PURE__ */ import_react28.default.createElement(
+    AnimatedPath5,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M112 184l144 144 144-144",
+      ...animatedProps
+    }
+  ));
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(
+    import_react_native_svg7.Circle,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ import_react28.default.createElement(
+    AnimatedPath5,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M112 184l144 144 144-144",
+      ...animatedProps
+    }
+  ));
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(
+    import_react_native_svg7.Rect,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ import_react28.default.createElement(
+    AnimatedPath5,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M112 184l144 144 144-144",
+      ...animatedProps
+    }
+  ));
+  const renderRoundFilled = () => /* @__PURE__ */ import_react28.default.createElement(
+    AnimatedPath5,
+    {
+      fill: resolvedColor,
+      d: "M464 256c0-114.87-93.13-208-208-208S48 141.13 48 256s93.13 208 208 208 208-93.13 208-208zm-100.69-28.69l-96 96a16 16 0 0 1-22.62 0l-96-96a16 16 0 0 1 22.62-22.62L256 289.37l84.69-84.68a16 16 0 0 1 22.62 22.62z",
+      ...animatedProps
+    }
+  );
+  const renderSquareFilled = () => /* @__PURE__ */ import_react28.default.createElement(
+    AnimatedPath5,
+    {
+      fill: resolvedColor,
+      d: "M400 64H112a48 48 0 0 0-48 48v288a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zm-36.69 163.31l-96 96a16 16 0 0 1-22.62 0l-96-96a16 16 0 0 1 22.62-22.62L256 289.37l84.69-84.68a16 16 0 0 1 22.62 22.62z",
+      ...animatedProps
+    }
+  );
+  const renderVariant = () => {
+    switch (variant) {
+      case "filled":
+        return renderFilled();
+      case "duotone":
+        return renderDuotone();
+      case "round-outlined":
+        return renderRoundOutlined();
+      case "square-outlined":
+        return renderSquareOutlined();
+      case "round-filled":
+        return renderRoundFilled();
+      case "square-filled":
+        return renderSquareFilled();
+      case "baseline":
+      default:
+        return renderBaseline();
+    }
+  };
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_native_svg7.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/chevron-left.tsx
+var import_react29 = __toESM(require("react"), 1);
+var import_react_native23 = require("react-native");
+var import_react_native_svg8 = __toESM(require("react-native-svg"), 1);
+var AnimatedPath6 = import_react_native23.Animated.createAnimatedComponent(import_react_native_svg8.Path);
+var ChevronLeftIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = (0, import_react29.useRef)(new import_react_native23.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react29.useRef)(new import_react_native23.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react29.useMemo)(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  (0, import_react29.useEffect)(() => {
+    if (isAnimated) {
+      import_react_native23.Animated.parallel([
+        import_react_native23.Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        import_react_native23.Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isAnimated, scaleAnim, opacityAnim]);
+  const animatedProps = isAnimated ? {
+    transform: [{ scale: scaleAnim }],
+    opacity: opacityAnim
+  } : void 0;
+  const renderBaseline = () => /* @__PURE__ */ import_react29.default.createElement(
+    AnimatedPath6,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M328 112L184 256l144 144",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ import_react29.default.createElement(
+    AnimatedPath6,
+    {
+      fill: resolvedColor,
+      d: "M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0s9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z",
+      rotation: 90,
+      origin: "256, 256",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
+    import_react_native_svg8.Path,
+    {
+      fill: resolvedColor,
+      opacity: 0.3,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
+    }
+  ), renderBaseline());
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
+    import_react_native_svg8.Circle,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderBaseline());
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
+    import_react_native_svg8.Rect,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderBaseline());
+  const renderVariant = () => {
+    switch (variant) {
+      case "filled":
+        return renderFilled();
+      case "duotone":
+        return renderDuotone();
+      case "round-outlined":
+        return renderRoundOutlined();
+      case "square-outlined":
+        return renderSquareOutlined();
+      case "round-filled":
+      case "square-filled":
+        return renderFilled();
+      case "baseline":
+      default:
+        return renderBaseline();
+    }
+  };
+  return /* @__PURE__ */ import_react29.default.createElement(import_react_native_svg8.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/chevron-right.tsx
+var import_react30 = __toESM(require("react"), 1);
+var import_react_native24 = require("react-native");
+var import_react_native_svg9 = __toESM(require("react-native-svg"), 1);
+var AnimatedPath7 = import_react_native24.Animated.createAnimatedComponent(import_react_native_svg9.Path);
+var ChevronRightIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = (0, import_react30.useRef)(new import_react_native24.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react30.useRef)(new import_react_native24.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react30.useMemo)(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  (0, import_react30.useEffect)(() => {
+    if (isAnimated) {
+      import_react_native24.Animated.parallel([
+        import_react_native24.Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        import_react_native24.Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isAnimated, scaleAnim, opacityAnim]);
+  const animatedProps = isAnimated ? {
+    transform: [{ scale: scaleAnim }],
+    opacity: opacityAnim
+  } : void 0;
+  const renderBaseline = () => /* @__PURE__ */ import_react30.default.createElement(
+    AnimatedPath7,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M184 112l144 144-144 144",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ import_react30.default.createElement(
+    AnimatedPath7,
+    {
+      fill: resolvedColor,
+      d: "M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z",
+      rotation: -90,
+      origin: "256, 256",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
+    import_react_native_svg9.Path,
+    {
+      fill: resolvedColor,
+      opacity: 0.3,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
+    }
+  ), renderBaseline());
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
+    import_react_native_svg9.Circle,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderBaseline());
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
+    import_react_native_svg9.Rect,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderBaseline());
+  const renderVariant = () => {
+    switch (variant) {
+      case "filled":
+        return renderFilled();
+      case "duotone":
+        return renderDuotone();
+      case "round-outlined":
+        return renderRoundOutlined();
+      case "square-outlined":
+        return renderSquareOutlined();
+      case "round-filled":
+      case "square-filled":
+        return renderFilled();
+      case "baseline":
+      default:
+        return renderBaseline();
+    }
+  };
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_native_svg9.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.style.ts
+var import_react_native25 = require("react-native");
+var styles7 = import_react_native25.StyleSheet.create({
+  backdrop: {
+    ...import_react_native25.StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  dialogContainer: {
+    flex: 1,
+    zIndex: 1
+  },
+  container: {
+    flex: 1,
+    paddingTop: 55,
+    paddingHorizontal: 16
+  },
+  header: {
+    marginBottom: 12
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 16
+  },
+  backButton: {
+    padding: 4
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "600"
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  inputWrapper: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    position: "relative"
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    paddingRight: 40,
+    borderRadius: 8,
+    fontSize: 16
+  },
+  clearInputButton: {
+    position: "absolute",
+    right: 8,
+    padding: 4
+  },
+  listContainer: {
+    flex: 1
+  },
+  listContentContainer: {
+    paddingBottom: 80
+  },
+  checkmarkButtonContainer: {
+    position: "absolute",
+    bottom: 24,
+    right: 24
+  },
+  checkmarkButton: {
+    width: 54,
+    height: 54,
+    borderRadius: 27,
+    justifyContent: "center",
+    alignItems: "center",
+    elevation: 8
+  }
+});
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
+var addOpacityToColor = (color, opacity) => {
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+var AutocompleteDialogHeader = ({
+  title,
+  inputValue,
+  placeholder = "Search...",
+  inputRef,
+  inputAnimatedStyle,
+  inputTextStyle,
+  onInputChange,
+  onClose,
+  onCheckmarkPress,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useXUITheme();
+  return /* @__PURE__ */ import_react31.default.createElement(import_react_native26.View, { style: styles7.header }, title ? /* @__PURE__ */ import_react31.default.createElement(import_react_native26.View, { style: styles7.titleRow }, /* @__PURE__ */ import_react31.default.createElement(
+    import_react_native26.Pressable,
+    {
+      style: styles7.backButton,
+      onPress: onClose,
+      accessibilityLabel: "Back",
+      accessibilityRole: "button"
+    },
+    /* @__PURE__ */ import_react31.default.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ import_react31.default.createElement(import_react_native26.Text, { style: [styles7.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react31.default.createElement(import_react_native26.View, { style: styles7.inputContainer }, /* @__PURE__ */ import_react31.default.createElement(import_react_native26.Animated.View, { style: [styles7.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react31.default.createElement(
+    import_react_native26.TextInput,
+    {
+      ref: inputRef,
+      value: inputValue,
+      onChangeText: onInputChange,
+      placeholder,
+      placeholderTextColor: addOpacityToColor(
+        theme.colors.foreground,
+        0.5
+      ),
+      style: [
+        styles7.input,
+        {
+          backgroundColor: theme.colors.default.background,
+          color: theme.colors.foreground
+        },
+        inputTextStyle
+      ],
+      autoFocus: true,
+      returnKeyType: "done",
+      onSubmitEditing: onCheckmarkPress,
+      onFocus,
+      onBlur
+    }
+  ), inputValue ? /* @__PURE__ */ import_react31.default.createElement(
+    import_react_native26.Pressable,
+    {
+      style: styles7.clearInputButton,
+      onPress: () => onInputChange?.(""),
+      accessibilityLabel: "Clear input",
+      accessibilityRole: "button"
+    },
+    /* @__PURE__ */ import_react31.default.createElement(CloseIcon, { color: theme.colors.foreground })
+  ) : null)));
+};
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.animation.ts
+var import_react32 = require("react");
+var import_react_native27 = require("react-native");
+var useAutocompleteDialogAnimation = ({
+  visible,
+  fadeAnim,
+  slideAnim,
+  scaleAnim
+}) => {
+  (0, import_react32.useEffect)(() => {
+    if (visible) {
+      import_react_native27.Animated.parallel([
+        import_react_native27.Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true
+        }),
+        import_react_native27.Animated.spring(slideAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 65,
+          friction: 10
+        }),
+        import_react_native27.Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 8
+        })
+      ]).start();
+    } else {
+      fadeAnim.setValue(0);
+      slideAnim.setValue(0);
+      scaleAnim.setValue(0);
+    }
+  }, [visible, fadeAnim, slideAnim, scaleAnim]);
+};
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
+var AutocompleteDialog = ({
+  visible,
+  inputValue,
+  placeholder = "Search...",
+  title,
+  themeColor = "primary",
+  children,
+  showCheckmark = true,
+  checkmarkIcon,
+  inputTextStyle,
+  style,
+  onInputChange,
+  onClose,
+  onCheckmark,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useXUITheme();
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native28.useWindowDimensions)();
+  const fadeAnim = (0, import_react33.useRef)(new import_react_native28.Animated.Value(0)).current;
+  const slideAnim = (0, import_react33.useRef)(new import_react_native28.Animated.Value(0)).current;
+  const scaleAnim = (0, import_react33.useRef)(new import_react_native28.Animated.Value(0)).current;
+  const inputRef = (0, import_react33.useRef)(null);
+  const [keyboardHeight, setKeyboardHeight] = (0, import_react33.useState)(0);
+  (0, import_react33.useEffect)(() => {
+    const showEvent = import_react_native28.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = import_react_native28.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = import_react_native28.Keyboard.addListener(showEvent, (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    const hideSub = import_react_native28.Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  const items = (0, import_react33.useMemo)(
+    () => import_react33.default.Children.toArray(children).filter(
+      import_react33.default.isValidElement
+    ),
+    [children]
+  );
+  const checkmarkColor = theme.colors[themeColor].main;
+  const checkmarkBackgroundColor = theme.colors[themeColor].background;
+  useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
+  (0, import_react33.useEffect)(() => {
+    if (!visible) return;
+    const sub = import_react_native28.BackHandler.addEventListener("hardwareBackPress", () => {
+      onClose?.();
+      return true;
+    });
+    return () => sub.remove();
+  }, [visible, onClose]);
+  const focusInput = (0, import_react33.useCallback)(() => {
+    const delay = import_react_native28.Platform.OS === "android" ? 300 : 100;
+    import_react_native28.InteractionManager.runAfterInteractions(() => {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, delay);
+    });
+  }, []);
+  const handleCheckmarkPress = () => {
+    onCheckmark?.();
+    import_react_native28.Keyboard.dismiss();
+  };
+  (0, import_react33.useEffect)(() => {
+    if (!visible) {
+      import_react_native28.Keyboard.dismiss();
+      return;
+    }
+    focusInput();
+  }, [focusInput, visible]);
+  const listBottomPadding = (0, import_react33.useMemo)(() => {
+    const basePadding = showCheckmark ? 96 : 64;
+    return (keyboardHeight > 0 ? keyboardHeight : 0) + basePadding;
+  }, [keyboardHeight, showCheckmark]);
+  if (!visible) return null;
+  const overlayStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: screenWidth,
+    height: screenHeight
+  };
+  const containerAnimatedStyle = {
+    transform: [
+      {
+        translateY: slideAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [screenHeight, 0]
+        })
+      }
+    ]
+  };
+  const inputAnimatedStyle = {
+    transform: [{ scaleX: scaleAnim }]
+  };
+  const listHeader = /* @__PURE__ */ import_react33.default.createElement(
+    AutocompleteDialogHeader,
+    {
+      title,
+      inputValue,
+      placeholder,
+      inputRef,
+      inputAnimatedStyle,
+      inputTextStyle,
+      onInputChange,
+      onClose,
+      onCheckmarkPress: handleCheckmarkPress,
+      onFocus,
+      onBlur
+    }
+  );
+  return /* @__PURE__ */ import_react33.default.createElement(Portal, null, /* @__PURE__ */ import_react33.default.createElement(import_react_native28.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react33.default.createElement(import_react_native28.Animated.View, { style: [styles7.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react33.default.createElement(import_react_native28.Animated.View, { style: [styles7.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react33.default.createElement(
+    import_react_native28.View,
+    {
+      style: [styles7.container, { backgroundColor: theme.colors.background }]
+    },
+    listHeader,
+    /* @__PURE__ */ import_react33.default.createElement(
+      import_react_native28.FlatList,
+      {
+        data: items,
+        renderItem: ({ item }) => item,
+        keyExtractor: (_, index) => String(index),
+        style: styles7.listContainer,
+        contentContainerStyle: {
+          paddingBottom: listBottomPadding
+        },
+        keyboardShouldPersistTaps: "always",
+        keyboardDismissMode: "none",
+        showsVerticalScrollIndicator: false
+      }
+    ),
+    showCheckmark ? /* @__PURE__ */ import_react33.default.createElement(import_react_native28.View, { style: styles7.checkmarkButtonContainer }, /* @__PURE__ */ import_react33.default.createElement(
+      import_react_native28.Pressable,
+      {
+        style: [
+          styles7.checkmarkButton,
+          { backgroundColor: checkmarkBackgroundColor }
+        ],
+        onPress: handleCheckmarkPress,
+        accessibilityLabel: "Confirm",
+        accessibilityRole: "button"
+      },
+      checkmarkIcon ?? /* @__PURE__ */ import_react33.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
+    )) : null
+  ))));
+};
+
+// src/components/autocomplete/autocomplete-trigger.tsx
+var import_react34 = __toESM(require("react"), 1);
+var import_react_native29 = require("react-native");
+var AutocompleteTrigger = ({
+  triggerRef,
+  isDisabled,
+  currentSelectedKey,
+  currentInputValue,
+  displayValue,
+  sizeStyles,
+  radiusStyles,
+  variantStyles,
+  theme,
+  isClearable,
+  label,
+  labelText,
+  isLabelInside,
+  clearIcon,
+  style,
+  textStyle,
+  onPress: handleTriggerPress,
+  onClear: handleClear,
+  onLayout: handleTriggerLayout
+}) => {
+  const renderLabel = isLabelInside && label;
+  return /* @__PURE__ */ import_react34.default.createElement(
+    import_react_native29.Pressable,
+    {
+      ref: triggerRef,
+      onPress: handleTriggerPress,
+      onLayout: handleTriggerLayout,
+      disabled: isDisabled,
+      style: [
+        styles6.trigger,
+        {
+          minHeight: sizeStyles.minHeight,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          paddingVertical: sizeStyles.paddingVertical
+        },
+        radiusStyles,
+        variantStyles,
+        isDisabled && styles6.disabled,
+        style
+      ],
+      accessibilityLabel: labelText ?? (typeof label === "string" ? label : void 0),
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isDisabled }
+    },
+    /* @__PURE__ */ import_react34.default.createElement(import_react_native29.View, { style: styles6.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native29.Text,
+      {
+        style: [
+          styles6.triggerText,
+          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
+          !currentSelectedKey && !currentInputValue && { opacity: 0.5 },
+          textStyle
+        ],
+        numberOfLines: 1,
+        ellipsizeMode: "tail"
+      },
+      displayValue
+    )),
+    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native29.TouchableOpacity,
+      {
+        onPress: handleClear,
+        style: styles6.clearButton,
+        hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
+      },
+      clearIcon ?? /* @__PURE__ */ import_react34.default.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
+    ) : null
+  );
+};
+
+// src/components/autocomplete/autocomplete.tsx
+var defaultPlaceholder = "Search...";
+var Autocomplete = ({
+  children,
+  variant = "flat",
+  themeColor = "default",
+  size = "md",
+  radius = "md",
+  placeholder = defaultPlaceholder,
+  labelPlacement = "outside",
+  label,
+  description,
+  errorMessage,
+  clearIcon,
+  fullWidth = false,
+  isDisabled = false,
+  isInvalid = false,
+  isClearable = true,
+  allowsCustomValue = false,
+  forceSelection = false,
+  allowsEmptyCollection = true,
+  disableLocalFilter = false,
+  inputValue,
+  defaultInputValue,
+  customAppearance,
+  onClose,
+  onOpenChange,
+  onSelectionChange,
+  onInputChange,
+  onClear
+}) => {
+  const { currentSelectedKey, updateSelection } = useAutocompleteSelection({
+    onSelectionChange
+  });
+  const { currentInputValue, updateInputValue } = useAutocompleteInputState({
+    inputValue,
+    defaultInputValue,
+    selectedKey: currentSelectedKey,
+    onInputChange
+  });
+  const { isOpen, setOpen } = useAutocompleteOpenState({
+    isOpened: void 0,
+    isDisabled,
+    onOpenChange,
+    onClose
+  });
+  const triggerRef = (0, import_react35.useRef)(null);
+  const [triggerLayout, setTriggerLayout] = (0, import_react35.useState)();
+  const handleTriggerLayout = (0, import_react35.useCallback)(() => {
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerLayout({ x, y, width, height });
+    });
+  }, []);
+  const items = (0, import_react35.useMemo)(() => {
+    const elements = import_react35.default.Children.toArray(children).filter(Boolean);
+    return elements.map((child, index) => {
+      if (!import_react35.default.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 filteredItems = (0, import_react35.useMemo)(() => {
+    if (disableLocalFilter || !currentInputValue.trim()) {
+      return items;
+    }
+    return items.filter(
+      (item) => defaultFilterFunction(item.labelText, currentInputValue)
+    );
+  }, [disableLocalFilter, items, currentInputValue]);
+  const theme = useXUITheme();
+  const sizeStyles = useAutocompleteSizeStyles(size);
+  const { radiusStyles } = useAutocompleteRadiusStyles(radius);
+  const variantStyles = useAutocompleteVariantStyles(themeColor, variant, isInvalid);
+  const labelStyle = useAutocompleteLabelStyle(
+    themeColor,
+    isInvalid,
+    sizeStyles.labelSize
+  );
+  const helperColor = useAutocompleteHelperColor(isInvalid);
+  const selectedItem = items.find((item) => item.key === currentSelectedKey);
+  const displayValue = forceSelection ? selectedItem?.labelText || placeholder : currentInputValue || placeholder;
+  const handleInputChange = (0, import_react35.useCallback)(
+    (text) => {
+      updateInputValue(text);
+      const selectedLabel = selectedItem?.labelText ?? "";
+      const shouldClearSelection = !text.trim() && !allowsCustomValue || currentSelectedKey !== null && text !== selectedLabel;
+      if (shouldClearSelection) {
+        updateSelection(null);
+      }
+    },
+    [
+      updateInputValue,
+      allowsCustomValue,
+      updateSelection,
+      selectedItem,
+      currentSelectedKey
+    ]
+  );
+  const handleItemSelection = (0, import_react35.useCallback)(
+    (key, itemLabel) => {
+      if (isDisabled) {
+        return;
+      }
+      updateSelection(key);
+      updateInputValue(itemLabel);
+      setTimeout(() => {
+        import_react_native30.Keyboard.dismiss();
+        setOpen(false);
+      }, 50);
+    },
+    [isDisabled, updateSelection, updateInputValue, setOpen]
+  );
+  const handleCheckmark = (0, import_react35.useCallback)(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const handleClear = (0, import_react35.useCallback)(() => {
+    if (isDisabled) {
+      return;
+    }
+    updateSelection(null);
+    updateInputValue("");
+    onClear?.();
+  }, [isDisabled, updateSelection, updateInputValue, onClear]);
+  const handleTriggerPress = (0, import_react35.useCallback)(() => {
+    if (!isDisabled) {
+      if (selectedItem && !currentInputValue) {
+        updateInputValue(selectedItem.labelText);
+      }
+      setOpen(true);
+    }
+  }, [isDisabled, setOpen, selectedItem, currentInputValue, updateInputValue]);
+  const listItems = filteredItems.map((item) => {
+    const itemProps = item.element.props;
+    const itemDisabled = isDisabled || itemProps.isDisabled;
+    const itemSelected = itemProps.isSelected ?? currentSelectedKey === item.key;
+    const handleItemSelected = () => {
+      if (itemDisabled || itemProps.isReadOnly) {
+        return;
+      }
+      handleItemSelection(item.key, item.labelText);
+      itemProps.onSelected?.();
+    };
+    return import_react35.default.cloneElement(item.element, {
+      key: item.key,
+      isDisabled: itemDisabled,
+      isSelected: itemSelected,
+      onSelected: handleItemSelected
+    });
+  });
+  const showEmptyMessage = !allowsEmptyCollection && listItems.length === 0;
+  const isLabelInside = labelPlacement === "inside";
+  const isLabelOutsideLeft = labelPlacement === "outside-left";
+  const isLabelOutside = labelPlacement === "outside" || labelPlacement === "outside-top";
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles6.label, labelStyle] }, label) : /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, null, label) : null;
+  const shouldShowHelper = Boolean(description || errorMessage);
+  const helperContent = isInvalid && errorMessage ? errorMessage : description;
+  const triggerContent = /* @__PURE__ */ import_react35.default.createElement(
+    AutocompleteTrigger,
+    {
+      triggerRef,
+      isDisabled,
+      currentSelectedKey,
+      currentInputValue,
+      displayValue,
+      sizeStyles,
+      radiusStyles,
+      variantStyles,
+      theme,
+      isClearable,
+      label: renderLabel,
+      labelText: typeof label === "string" ? label : void 0,
+      isLabelInside,
+      clearIcon,
+      style: customAppearance?.container,
+      textStyle: customAppearance?.text,
+      onPress: handleTriggerPress,
+      onClear: handleClear,
+      onLayout: handleTriggerLayout
+    }
+  );
+  const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
+  return /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, { style: [styles6.container, fullWidth ? styles6.fullWidth : styles6.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, { style: styles6.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles6.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, null, helperContent) : null, /* @__PURE__ */ import_react35.default.createElement(
+    AutocompleteDialog,
+    {
+      visible: isOpen,
+      inputValue: currentInputValue,
+      placeholder,
+      title: typeof label === "string" ? label : void 0,
+      themeColor,
+      _triggerLayout: triggerLayout,
+      showCheckmark: false,
+      onInputChange: handleInputChange,
+      onClose: () => setOpen(false),
+      onCheckmark: handleCheckmark
+    },
+    /* @__PURE__ */ import_react35.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles6.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
+  ));
+};
+
+// src/components/autocomplete/autocomplete-item.tsx
+var import_react37 = __toESM(require("react"), 1);
+var import_react_native32 = require("react-native");
+
+// src/components/autocomplete/autocomplete-item.style.ts
+var import_react_native31 = require("react-native");
+var styles8 = import_react_native31.StyleSheet.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/autocomplete/autocomplete-item.hook.ts
+var import_react36 = require("react");
+var import_core26 = require("@xaui/core");
+var useAutocompleteItemSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return (0, import_react36.useMemo)(() => {
+    const sizes = {
+      xs: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.xs,
+        descriptionSize: theme.fontSizes.xs
+      },
+      sm: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.sm,
+        descriptionSize: theme.fontSizes.xs
+      },
+      md: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.md,
+        descriptionSize: theme.fontSizes.xs
+      },
+      lg: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.lg,
+        descriptionSize: theme.fontSizes.md
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+};
+var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core26.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return (0, import_react36.useMemo)(() => {
+    return "transparent";
+  }, [isSelected, colorScheme]);
+};
+var useAutocompleteItemTextColors = () => {
+  const theme = useXUITheme();
+  return (0, import_react36.useMemo)(() => {
+    return {
+      textColor: theme.colors.foreground,
+      descriptionColor: theme.colors.foreground
+    };
+  }, [theme]);
+};
+var useAutocompleteItemCheckmarkColor = (themeColor) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core26.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return (0, import_react36.useMemo)(() => {
+    if (themeColor === "default") {
+      return theme.colors.primary.main;
+    }
+    return colorScheme.main;
+  }, [themeColor, colorScheme, theme]);
+};
+var useAutocompleteItemStyles = (isSelected, _isDisabled) => {
+  const context = (0, import_react36.useContext)(AutocompleteContext);
+  const backgroundColor = useAutocompleteItemBackgroundColor(
+    context.themeColor,
+    isSelected
+  );
+  const { textColor, descriptionColor } = useAutocompleteItemTextColors();
+  const checkmarkColor = useAutocompleteItemCheckmarkColor(context.themeColor);
+  return {
+    backgroundColor,
+    labelColor: textColor,
+    descriptionColor,
+    checkmarkColor
+  };
+};
+
+// src/components/autocomplete/autocomplete-item.tsx
+var defaultSize = "md";
+var AutocompleteItem = ({
+  label,
+  description,
+  startContent,
+  endContent,
+  selectedIcon: _selectedIcon,
+  isDisabled = false,
+  isSelected = false,
+  isReadOnly = false,
+  customAppearance,
+  onSelected
+}) => {
+  const context = (0, import_react37.useContext)(AutocompleteContext);
+  const size = context?.size ?? defaultSize;
+  const isItemDisabled = context?.isDisabled ? true : isDisabled;
+  const sizeStyles = useAutocompleteItemSizeStyles(size);
+  const { backgroundColor, labelColor, descriptionColor } = useAutocompleteItemStyles(isSelected, isItemDisabled);
+  const handlePress = () => {
+    if (isItemDisabled || isReadOnly) {
+      return;
+    }
+    onSelected?.();
+  };
+  return /* @__PURE__ */ import_react37.default.createElement(
+    import_react_native32.Pressable,
+    {
+      onPress: handlePress,
+      disabled: isItemDisabled,
+      style: [
+        styles8.item,
+        {
+          paddingVertical: sizeStyles.paddingVertical,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor
+        },
+        isItemDisabled && styles8.disabled,
+        customAppearance?.container
+      ]
+    },
+    startContent,
+    /* @__PURE__ */ import_react37.default.createElement(import_react_native32.View, { style: styles8.content }, /* @__PURE__ */ import_react37.default.createElement(
+      import_react_native32.Text,
+      {
+        style: [
+          styles8.title,
+          { fontSize: sizeStyles.titleSize, color: labelColor },
+          customAppearance?.text
+        ]
+      },
+      label
+    ), description && /* @__PURE__ */ import_react37.default.createElement(
+      import_react_native32.Text,
+      {
+        style: [
+          styles8.description,
+          { fontSize: sizeStyles.descriptionSize, color: descriptionColor }
+        ]
+      },
+      description
+    )),
+    endContent
+  );
+};
+
+// src/components/datepicker/datepicker.tsx
+var import_react47 = __toESM(require("react"), 1);
+var import_react_native42 = require("react-native");
+
+// src/components/datepicker/datepicker.hook.ts
+var import_react38 = require("react");
+var import_core28 = require("@xaui/core");
+var import_palette3 = require("@xaui/core/palette");
+var useDatePickerColorScheme = (themeColor) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core28.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return { theme, colorScheme };
+};
+var useDatePickerSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return (0, import_react38.useMemo)(() => {
+    const sizes = {
+      xs: {
+        minHeight: 34,
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        fontSize: theme.fontSizes.xs,
+        labelSize: theme.fontSizes.xs
+      },
+      sm: {
+        minHeight: 38,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        fontSize: theme.fontSizes.sm,
+        labelSize: theme.fontSizes.xs
+      },
+      md: {
+        minHeight: 42,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        fontSize: theme.fontSizes.md,
+        labelSize: theme.fontSizes.sm
+      },
+      lg: {
+        minHeight: 50,
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        fontSize: theme.fontSizes.lg,
+        labelSize: theme.fontSizes.md
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+};
+var useDatePickerRadiusStyles = (radius) => {
+  const theme = useXUITheme();
+  return (0, import_react38.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]);
+};
+var useDatePickerVariantStyles = (themeColor, variant, isInvalid) => {
+  const { theme, colorScheme } = useDatePickerColorScheme(themeColor);
+  return (0, import_react38.useMemo)(() => {
+    let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
+    if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
+      borderColor = import_palette3.colors.gray[300];
+    }
+    const variantStyles = {
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: theme.borderWidth.md,
+        borderColor
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: 0
+      },
+      light: {
+        backgroundColor: "transparent",
+        borderWidth: 0
+      },
+      faded: {
+        backgroundColor: `${colorScheme.background}90`,
+        borderWidth: theme.borderWidth.md,
+        borderColor
+      },
+      underlined: {
+        backgroundColor: "transparent",
+        borderBottomWidth: theme.borderWidth.md,
+        borderColor
+      }
+    };
+    return variantStyles[variant];
+  }, [variant, theme, colorScheme, isInvalid, themeColor]);
+};
+var useDatePickerLabelStyle = (themeColor, isInvalid, labelSize) => {
+  const { theme, colorScheme } = useDatePickerColorScheme(themeColor);
+  return (0, import_react38.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 useDatePickerHelperColor = (isInvalid) => {
+  const theme = useXUITheme();
+  return (0, import_react38.useMemo)(() => {
+    if (isInvalid) {
+      return theme.colors.danger.main;
+    }
+    return import_palette3.colors.gray[600];
+  }, [isInvalid, theme]);
+};
+
+// src/components/datepicker/datepicker.state.hook.ts
+var import_react39 = require("react");
+var useDatePickerState = ({
+  value,
+  defaultValue,
+  onChange
+}) => {
+  const [internalValue, setInternalValue] = (0, import_react39.useState)(
+    defaultValue ?? null
+  );
+  const selectedDate = value !== void 0 ? value : internalValue;
+  const updateDate = (0, import_react39.useCallback)(
+    (date) => {
+      if (value === void 0) {
+        setInternalValue(date);
+      }
+      onChange?.(date);
+    },
+    [value, onChange]
+  );
+  return { selectedDate, updateDate };
+};
+var useDatePickerOpenState = ({
+  isDisabled,
+  onOpenChange,
+  onOpen,
+  onClose
+}) => {
+  const [isOpen, setInternalOpen] = (0, import_react39.useState)(false);
+  const setOpen = (0, import_react39.useCallback)(
+    (open) => {
+      if (isDisabled && open) return;
+      setInternalOpen(open);
+      onOpenChange?.(open);
+      if (open) {
+        onOpen?.();
+      } else {
+        onClose?.();
+      }
+    },
+    [isDisabled, onOpenChange, onOpen, onClose]
+  );
+  return { isOpen, setOpen };
+};
+var useDatePickerViewState = (initialDate) => {
+  const now = /* @__PURE__ */ new Date();
+  const [viewDate, setViewDate] = (0, import_react39.useState)(initialDate ?? now);
+  const [viewMode, setViewMode] = (0, import_react39.useState)("calendar");
+  const goToPreviousMonth = (0, import_react39.useCallback)(() => {
+    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
+  }, []);
+  const goToNextMonth = (0, import_react39.useCallback)(() => {
+    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
+  }, []);
+  const goToYear = (0, import_react39.useCallback)((year) => {
+    setViewDate((prev) => new Date(year, prev.getMonth(), 1));
+    setViewMode("month");
+  }, []);
+  const goToMonth = (0, import_react39.useCallback)((month) => {
+    setViewDate((prev) => new Date(prev.getFullYear(), month, 1));
+    setViewMode("calendar");
+  }, []);
+  const goToToday = (0, import_react39.useCallback)(() => {
+    setViewDate(/* @__PURE__ */ new Date());
+    setViewMode("calendar");
+  }, []);
+  const toggleYearPicker = (0, import_react39.useCallback)(() => {
+    setViewMode((prev) => prev === "year" ? "calendar" : "year");
+  }, []);
+  const syncViewToDate = (0, import_react39.useCallback)((date) => {
+    setViewDate(date);
+  }, []);
+  return {
+    viewDate,
+    viewMode,
+    goToPreviousMonth,
+    goToNextMonth,
+    goToYear,
+    goToMonth,
+    goToToday,
+    toggleYearPicker,
+    syncViewToDate
+  };
+};
+
+// src/components/datepicker/datepicker.utils.ts
+var getWeekdayNames = (locale, firstDayOfWeek) => {
+  const baseDate = new Date(2024, 0, 1);
+  const dayIndex = baseDate.getDay();
+  const offset = firstDayOfWeek - dayIndex;
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(2024, 0, 1 + offset + i);
+    days.push(
+      date.toLocaleDateString(locale, { weekday: "short" }).slice(0, 2)
+    );
+  }
+  return days;
+};
+var getMonthNames = (locale) => {
+  const months = [];
+  for (let i = 0; i < 12; i++) {
+    const date = new Date(2024, i, 1);
+    months.push(date.toLocaleDateString(locale, { month: "long" }));
+  }
+  return months;
+};
+var getMonthName = (month, locale) => {
+  const date = new Date(2024, month, 1);
+  return date.toLocaleDateString(locale, { month: "long" });
+};
+var formatDate = (date, locale) => {
+  return date.toLocaleDateString(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+};
+var isSameDay = (a, b) => {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+};
+var isToday = (date) => {
+  return isSameDay(date, /* @__PURE__ */ new Date());
+};
+var isDateInRange = (date, minDate, maxDate) => {
+  const normalized = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  if (minDate) {
+    const minNormalized = new Date(
+      minDate.getFullYear(),
+      minDate.getMonth(),
+      minDate.getDate()
+    );
+    if (normalized < minNormalized) return false;
+  }
+  if (maxDate) {
+    const maxNormalized = new Date(
+      maxDate.getFullYear(),
+      maxDate.getMonth(),
+      maxDate.getDate()
+    );
+    if (normalized > maxNormalized) return false;
+  }
+  return true;
+};
+var getCalendarDays = (year, month, firstDayOfWeek, minDate, maxDate) => {
+  const firstOfMonth = new Date(year, month, 1);
+  const lastOfMonth = new Date(year, month + 1, 0);
+  const daysInMonth = lastOfMonth.getDate();
+  let startDayOfWeek = firstOfMonth.getDay() - firstDayOfWeek;
+  if (startDayOfWeek < 0) startDayOfWeek += 7;
+  const days = [];
+  const prevMonth = new Date(year, month, 0);
+  const prevMonthDays = prevMonth.getDate();
+  for (let i = startDayOfWeek - 1; i >= 0; i--) {
+    const day = prevMonthDays - i;
+    const date = new Date(year, month - 1, day);
+    days.push({
+      date,
+      day,
+      isCurrentMonth: false,
+      isToday: isToday(date),
+      isDisabled: !isDateInRange(date, minDate, maxDate)
+    });
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = new Date(year, month, day);
+    days.push({
+      date,
+      day,
+      isCurrentMonth: true,
+      isToday: isToday(date),
+      isDisabled: !isDateInRange(date, minDate, maxDate)
+    });
+  }
+  const remainingSlots = 42 - days.length;
+  for (let day = 1; day <= remainingSlots; day++) {
+    const date = new Date(year, month + 1, day);
+    days.push({
+      date,
+      day,
+      isCurrentMonth: false,
+      isToday: isToday(date),
+      isDisabled: !isDateInRange(date, minDate, maxDate)
+    });
+  }
+  return days;
+};
+var getYearRange = (minDate, maxDate) => {
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const startYear = minDate ? minDate.getFullYear() : currentYear - 50;
+  const endYear = maxDate ? maxDate.getFullYear() : currentYear + 50;
+  const years = [];
+  for (let year = startYear; year <= endYear; year++) {
+    years.push(year);
+  }
+  return years;
+};
+var LOCALE_LABELS = {
+  fr: { selectDate: "Choisir une date", today: "Aujourd'hui", confirm: "OK" },
+  de: { selectDate: "Datum ausw\xE4hlen", today: "Heute", confirm: "OK" },
+  es: { selectDate: "Seleccionar fecha", today: "Hoy", confirm: "OK" },
+  it: { selectDate: "Seleziona data", today: "Oggi", confirm: "OK" },
+  pt: { selectDate: "Selecionar data", today: "Hoje", confirm: "OK" },
+  nl: { selectDate: "Datum selecteren", today: "Vandaag", confirm: "OK" },
+  pl: { selectDate: "Wybierz dat\u0119", today: "Dzisiaj", confirm: "OK" },
+  ru: { selectDate: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0430\u0442\u0443", today: "\u0421\u0435\u0433\u043E\u0434\u043D\u044F", confirm: "OK" },
+  ja: { selectDate: "\u65E5\u4ED8\u3092\u9078\u629E", today: "\u4ECA\u65E5", confirm: "OK" },
+  ko: { selectDate: "\uB0A0\uC9DC \uC120\uD0DD", today: "\uC624\uB298", confirm: "\uD655\uC778" },
+  zh: { selectDate: "\u9009\u62E9\u65E5\u671F", today: "\u4ECA\u5929", confirm: "\u786E\u5B9A" },
+  ar: { selectDate: "\u0627\u062E\u062A\u0631 \u0627\u0644\u062A\u0627\u0631\u064A\u062E", today: "\u0627\u0644\u064A\u0648\u0645", confirm: "\u0645\u0648\u0627\u0641\u0642" },
+  tr: { selectDate: "Tarih se\xE7in", today: "Bug\xFCn", confirm: "Tamam" }
+};
+var DEFAULT_LABELS = {
+  selectDate: "Select date",
+  today: "Today",
+  confirm: "OK"
+};
+var getDatePickerLabels = (locale) => {
+  const baseLocale = locale.split("-")[0].toLowerCase();
+  return LOCALE_LABELS[baseLocale] ?? DEFAULT_LABELS;
+};
+var getFirstDayOfWeek = (locale) => {
+  const mondayLocales = [
+    "fr",
+    "de",
+    "es",
+    "it",
+    "pt",
+    "nl",
+    "pl",
+    "ru",
+    "sv",
+    "da",
+    "fi",
+    "nb",
+    "nn",
+    "cs",
+    "sk",
+    "hu",
+    "ro",
+    "bg",
+    "hr",
+    "sl",
+    "uk",
+    "tr",
+    "el",
+    "et",
+    "lt",
+    "lv"
+  ];
+  const baseLocale = locale.split("-")[0].toLowerCase();
+  return mondayLocales.includes(baseLocale) ? 1 : 0;
+};
+
+// src/components/datepicker/datepicker.style.ts
+var import_react_native33 = require("react-native");
+var styles9 = import_react_native33.StyleSheet.create({
+  container: {
+    gap: 6,
+    position: "relative"
+  },
+  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
+  },
+  triggerText: {
+    flex: 1
+  },
+  clearButton: {
+    padding: 2,
+    paddingLeft: 4,
+    marginRight: -4
+  },
+  helperText: {
+    fontSize: 12
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  outsideLeftRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  }
+});
+
+// src/components/dialogs/datepicker-dialog/datepicker-dialog.tsx
+var import_react45 = __toESM(require("react"), 1);
+var import_react_native40 = require("react-native");
+var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
+
+// src/components/dialogs/datepicker-dialog/datepicker-dialog.animation.ts
+var import_react40 = require("react");
+var import_react_native34 = require("react-native");
+var useDatePickerDialogAnimation = ({
+  visible,
+  fadeAnim,
+  slideAnim,
+  scaleAnim,
+  onCloseComplete
+}) => {
+  const [shouldRender, setShouldRender] = (0, import_react40.useState)(false);
+  const isClosingRef = (0, import_react40.useRef)(false);
+  (0, import_react40.useEffect)(() => {
+    if (visible) {
+      setShouldRender(true);
+      isClosingRef.current = false;
+      import_react_native34.Animated.parallel([
+        import_react_native34.Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 220,
+          useNativeDriver: true
+        }),
+        import_react_native34.Animated.spring(slideAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          damping: 20,
+          stiffness: 300,
+          mass: 0.8
+        }),
+        import_react_native34.Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          damping: 18,
+          stiffness: 280,
+          mass: 0.8
+        })
+      ]).start();
+      return;
+    }
+    if (!shouldRender || isClosingRef.current) return;
+    isClosingRef.current = true;
+    import_react_native34.Animated.parallel([
+      import_react_native34.Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 180,
+        easing: import_react_native34.Easing.out(import_react_native34.Easing.ease),
+        useNativeDriver: true
+      }),
+      import_react_native34.Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 180,
+        easing: import_react_native34.Easing.out(import_react_native34.Easing.ease),
+        useNativeDriver: true
+      }),
+      import_react_native34.Animated.timing(scaleAnim, {
+        toValue: 0,
+        duration: 180,
+        easing: import_react_native34.Easing.out(import_react_native34.Easing.ease),
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      setShouldRender(false);
+      isClosingRef.current = false;
+      onCloseComplete();
+    });
+  }, [visible, fadeAnim, slideAnim, scaleAnim, shouldRender, onCloseComplete]);
+  return { shouldRender };
+};
+var useViewTransitionAnimation = ({
+  fadeAnim
+}) => {
+  const animate = (0, import_react40.useCallback)(() => {
+    fadeAnim.setValue(0);
+    import_react_native34.Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [fadeAnim]);
+  return { animate };
+};
+var useMonthSlideAnimation = ({
+  slideAnim,
+  fadeAnim
+}) => {
+  const animate = (0, import_react40.useCallback)(
+    (direction) => {
+      const startX = direction === "right" ? 60 : -60;
+      slideAnim.setValue(startX);
+      fadeAnim.setValue(0);
+      import_react_native34.Animated.parallel([
+        import_react_native34.Animated.spring(slideAnim, {
+          toValue: 0,
+          useNativeDriver: true,
+          damping: 22,
+          stiffness: 280,
+          mass: 0.7
+        }),
+        import_react_native34.Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 180,
+          useNativeDriver: true
+        })
+      ]).start();
+    },
+    [slideAnim, fadeAnim]
+  );
+  return { animate };
+};
+
+// src/components/dialogs/datepicker-dialog/datepicker-dialog-calendar.tsx
+var import_react41 = __toESM(require("react"), 1);
+var import_react_native36 = require("react-native");
+var import_react_native_gesture_handler = require("react-native-gesture-handler");
+
+// src/components/dialogs/datepicker-dialog/datepicker-dialog.style.ts
+var import_react_native35 = require("react-native");
+var styles10 = import_react_native35.StyleSheet.create({
+  backdrop: {
+    ...import_react_native35.StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
   },
-  container: {
+  dialogContainer: {
     flex: 1,
-    paddingTop: 55,
-    paddingHorizontal: 16
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1,
+    paddingHorizontal: 24
+  },
+  container: {
+    width: "100%",
+    maxWidth: 360,
+    borderRadius: 16,
+    overflow: "hidden",
+    elevation: 6,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8
   },
   header: {
-    marginBottom: 12
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    paddingBottom: 12
   },
-  titleRow: {
+  headerLabel: {
+    fontSize: 12,
+    fontWeight: "500",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    marginBottom: 8
+  },
+  headerDateRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    marginBottom: 16
+    justifyContent: "space-between"
   },
-  backButton: {
-    padding: 4
+  headerDate: {
+    fontSize: 24,
+    fontWeight: "400"
   },
-  title: {
-    fontSize: 20,
+  navigationRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  monthYearButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 20
+  },
+  monthYearText: {
+    fontSize: 14,
     fontWeight: "600"
   },
-  inputContainer: {
+  navButtons: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8
+    gap: 4
   },
-  inputWrapper: {
-    flex: 1,
+  navButton: {
+    padding: 8,
+    borderRadius: 20
+  },
+  calendarGrid: {
+    paddingHorizontal: 12
+  },
+  weekdayRow: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    marginBottom: 4
+  },
+  weekdayCell: {
+    width: 44,
+    height: 32,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  weekdayText: {
+    fontSize: 12,
+    fontWeight: "500"
+  },
+  dayRow: {
+    flexDirection: "row",
+    justifyContent: "space-around"
+  },
+  dayCell: {
+    width: 44,
+    height: 44,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 22
+  },
+  dayText: {
+    fontSize: 14
+  },
+  todayCell: {
+    borderWidth: 1
+  },
+  selectedCell: {
+    borderWidth: 0
+  },
+  selectedCellInner: {
+    width: 44,
+    height: 44,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 22
+  },
+  disabledText: {
+    opacity: 0.3
+  },
+  otherMonthText: {
+    opacity: 0.4
+  },
+  footer: {
     flexDirection: "row",
+    justifyContent: "flex-end",
     alignItems: "center",
-    position: "relative"
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12
   },
-  input: {
-    flex: 1,
-    paddingVertical: 12,
+  footerButton: {
+    paddingVertical: 10,
     paddingHorizontal: 16,
-    paddingRight: 40,
-    borderRadius: 8,
-    fontSize: 16
+    borderRadius: 20
   },
-  clearInputButton: {
-    position: "absolute",
-    right: 8,
-    padding: 4
+  footerButtonText: {
+    fontSize: 14,
+    fontWeight: "600"
   },
-  listContainer: {
-    flex: 1
+  yearPickerContainer: {
+    paddingHorizontal: 12,
+    height: 280
   },
-  listContentContainer: {
-    paddingBottom: 80
+  yearGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 4
   },
-  checkmarkButtonContainer: {
-    position: "absolute",
-    bottom: 24,
-    right: 24
+  yearCell: {
+    width: 76,
+    height: 44,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 22,
+    margin: 2
   },
-  checkmarkButton: {
-    width: 54,
-    height: 54,
-    borderRadius: 27,
+  yearCellInner: {
+    width: 76,
+    height: 44,
     justifyContent: "center",
     alignItems: "center",
-    elevation: 8
+    borderRadius: 22
+  },
+  yearText: {
+    fontSize: 14
+  },
+  monthPickerContainer: {
+    paddingHorizontal: 24,
+    paddingVertical: 8
+  },
+  monthGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 8
+  },
+  monthCell: {
+    width: 90,
+    height: 44,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 22
+  },
+  monthCellInner: {
+    width: 90,
+    height: 44,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 22
+  },
+  monthText: {
+    fontSize: 14
   }
 });
 
-// src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var addOpacityToColor = (color, opacity) => {
-  const hex = color.replace("#", "");
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+// src/components/dialogs/datepicker-dialog/datepicker-dialog-calendar.tsx
+var AnimatedDayCell = ({
+  isSelected,
+  isToday: isToday2,
+  isCurrentMonth,
+  isDisabled,
+  day,
+  date,
+  locale,
+  themeColor,
+  onSelectDay
+}) => {
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
+  const isDefault = themeColor === "default";
+  const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const scaleAnim = (0, import_react41.useRef)(new import_react_native36.Animated.Value(isSelected ? 1 : 0)).current;
+  (0, import_react41.useEffect)(() => {
+    if (isSelected) {
+      scaleAnim.setValue(0.92);
+      import_react_native36.Animated.spring(scaleAnim, {
+        toValue: 1,
+        useNativeDriver: true,
+        damping: 20,
+        stiffness: 300,
+        mass: 0.6
+      }).start();
+    } else {
+      scaleAnim.setValue(0);
+    }
+  }, [isSelected, scaleAnim]);
+  const animatedStyle = isSelected ? { transform: [{ scale: scaleAnim }] } : void 0;
+  return /* @__PURE__ */ import_react41.default.createElement(
+    import_react_native36.Pressable,
+    {
+      style: [
+        styles10.dayCell,
+        isToday2 && !isSelected && {
+          ...styles10.todayCell,
+          borderColor: accentColor
+        }
+      ],
+      onPress: () => {
+        if (!isDisabled) {
+          onSelectDay(date);
+        }
+      },
+      disabled: isDisabled,
+      accessibilityLabel: date.toLocaleDateString(locale),
+      accessibilityRole: "button",
+      accessibilityState: {
+        selected: isSelected,
+        disabled: isDisabled
+      }
+    },
+    isSelected ? /* @__PURE__ */ import_react41.default.createElement(
+      import_react_native36.Animated.View,
+      {
+        style: [
+          styles10.selectedCellInner,
+          { backgroundColor: accentColor },
+          animatedStyle
+        ]
+      },
+      /* @__PURE__ */ import_react41.default.createElement(import_react_native36.Text, { style: [styles10.dayText, { color: accentFg }] }, day)
+    ) : /* @__PURE__ */ import_react41.default.createElement(
+      import_react_native36.Text,
+      {
+        style: [
+          styles10.dayText,
+          { color: theme.colors.foreground },
+          !isCurrentMonth && styles10.otherMonthText,
+          isDisabled && styles10.disabledText,
+          isToday2 && {
+            color: accentColor,
+            fontWeight: "600"
+          }
+        ]
+      },
+      day
+    )
+  );
 };
-var AutocompleteDialogHeader = ({
-  title,
-  inputValue,
-  placeholder = "Search...",
-  inputRef,
-  inputAnimatedStyle,
-  inputTextStyle,
-  onInputChange,
-  onClose,
-  onCheckmarkPress,
-  onFocus,
-  onBlur
+var DatePickerDialogCalendar = ({
+  viewDate,
+  selectedDate,
+  locale,
+  firstDayOfWeek,
+  themeColor,
+  minDate,
+  maxDate,
+  onSelectDay,
+  onPreviousMonth,
+  onNextMonth
 }) => {
   const theme = useXUITheme();
-  return /* @__PURE__ */ import_react23.default.createElement(import_react_native18.View, { style: styles5.header }, title ? /* @__PURE__ */ import_react23.default.createElement(import_react_native18.View, { style: styles5.titleRow }, /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native18.Pressable,
+  const swipeHandledRef = (0, import_react41.useRef)(false);
+  const weekdays = (0, import_react41.useMemo)(
+    () => getWeekdayNames(locale, firstDayOfWeek),
+    [locale, firstDayOfWeek]
+  );
+  const days = (0, import_react41.useMemo)(
+    () => getCalendarDays(
+      viewDate.getFullYear(),
+      viewDate.getMonth(),
+      firstDayOfWeek,
+      minDate,
+      maxDate
+    ),
+    [viewDate, firstDayOfWeek, minDate, maxDate]
+  );
+  const weeks = (0, import_react41.useMemo)(() => {
+    const result = [];
+    for (let i = 0; i < days.length; i += 7) {
+      result.push(days.slice(i, i + 7));
+    }
+    return result;
+  }, [days]);
+  const onSwipeEnd = (event) => {
+    const { state, translationX, velocityX } = event.nativeEvent;
+    if (state !== import_react_native_gesture_handler.State.END || swipeHandledRef.current) return;
+    const shouldSwipe = Math.abs(translationX) > 40 || Math.abs(velocityX) > 600;
+    if (!shouldSwipe) return;
+    swipeHandledRef.current = true;
+    if (translationX < 0) {
+      onNextMonth();
+    } else {
+      onPreviousMonth();
+    }
+  };
+  const onSwipeStateChange = (event) => {
+    if (event.nativeEvent.state === import_react_native_gesture_handler.State.BEGAN) {
+      swipeHandledRef.current = false;
+    }
+    onSwipeEnd(event);
+  };
+  return /* @__PURE__ */ import_react41.default.createElement(
+    import_react_native_gesture_handler.PanGestureHandler,
     {
-      style: styles5.backButton,
-      onPress: onClose,
-      accessibilityLabel: "Back",
+      activeOffsetX: [-12, 12],
+      failOffsetY: [-12, 12],
+      onHandlerStateChange: onSwipeStateChange
+    },
+    /* @__PURE__ */ import_react41.default.createElement(import_react_native36.View, { style: styles10.calendarGrid }, /* @__PURE__ */ import_react41.default.createElement(import_react_native36.View, { style: styles10.weekdayRow }, weekdays.map((day, index) => /* @__PURE__ */ import_react41.default.createElement(import_react_native36.View, { key: index, style: styles10.weekdayCell }, /* @__PURE__ */ import_react41.default.createElement(
+      import_react_native36.Text,
+      {
+        style: [
+          styles10.weekdayText,
+          { color: theme.colors.foreground, opacity: 0.6 }
+        ]
+      },
+      day
+    )))), weeks.map((week, weekIndex) => /* @__PURE__ */ import_react41.default.createElement(import_react_native36.View, { key: weekIndex, style: styles10.dayRow }, week.map((dayInfo, dayIndex) => /* @__PURE__ */ import_react41.default.createElement(
+      AnimatedDayCell,
+      {
+        key: dayIndex,
+        isSelected: !!(selectedDate && isSameDay(dayInfo.date, selectedDate)),
+        isToday: dayInfo.isToday,
+        isCurrentMonth: dayInfo.isCurrentMonth,
+        isDisabled: dayInfo.isDisabled,
+        day: dayInfo.day,
+        date: dayInfo.date,
+        locale,
+        themeColor,
+        onSelectDay
+      }
+    )))))
+  );
+};
+
+// src/components/dialogs/datepicker-dialog/datepicker-dialog-header.tsx
+var import_react42 = __toESM(require("react"), 1);
+var import_react_native37 = require("react-native");
+var DatePickerDialogHeader = ({
+  viewDate,
+  selectedDate,
+  locale,
+  themeColor,
+  selectDateLabel,
+  onClearValue,
+  onPreviousMonth,
+  onNextMonth,
+  onToggleYearPicker
+}) => {
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
+  const dateText = (0, import_react42.useMemo)(() => {
+    if (!selectedDate) return "---";
+    return formatDate(selectedDate, locale);
+  }, [selectedDate, locale]);
+  const monthYearLabel = (0, import_react42.useMemo)(() => {
+    const month = getMonthName(viewDate.getMonth(), locale);
+    return `${month} ${viewDate.getFullYear()}`;
+  }, [viewDate, locale]);
+  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(import_react_native37.View, { style: [styles10.header, { backgroundColor: colorScheme.main }] }, /* @__PURE__ */ import_react42.default.createElement(import_react_native37.Text, { style: [styles10.headerLabel, { color: colorScheme.foreground }] }, selectDateLabel), /* @__PURE__ */ import_react42.default.createElement(import_react_native37.View, { style: styles10.headerDateRow }, /* @__PURE__ */ import_react42.default.createElement(import_react_native37.Text, { style: [styles10.headerDate, { color: colorScheme.foreground }] }, dateText), /* @__PURE__ */ import_react42.default.createElement(
+    import_react_native37.Pressable,
+    {
+      onPress: onClearValue,
+      hitSlop: { top: 8, right: 8, bottom: 8, left: 8 },
+      accessibilityLabel: "Clear date",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react23.default.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
-  ), /* @__PURE__ */ import_react23.default.createElement(import_react_native18.Text, { style: [styles5.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react23.default.createElement(import_react_native18.View, { style: styles5.inputContainer }, /* @__PURE__ */ import_react23.default.createElement(import_react_native18.Animated.View, { style: [styles5.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native18.TextInput,
+    /* @__PURE__ */ import_react42.default.createElement(CloseIcon, { size: 20, color: colorScheme.foreground })
+  ))), /* @__PURE__ */ import_react42.default.createElement(import_react_native37.View, { style: styles10.navigationRow }, /* @__PURE__ */ import_react42.default.createElement(
+    import_react_native37.Pressable,
     {
-      ref: inputRef,
-      value: inputValue,
-      onChangeText: onInputChange,
-      placeholder,
-      placeholderTextColor: addOpacityToColor(
-        theme.colors.foreground,
-        0.5
-      ),
-      style: [
-        styles5.input,
-        {
-          backgroundColor: theme.colors.default.background,
-          color: theme.colors.foreground
-        },
-        inputTextStyle
-      ],
-      autoFocus: true,
-      returnKeyType: "done",
-      onSubmitEditing: onCheckmarkPress,
-      onFocus,
-      onBlur
-    }
-  ), inputValue ? /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native18.Pressable,
+      style: styles10.monthYearButton,
+      onPress: onToggleYearPicker,
+      accessibilityLabel: `${monthYearLabel}, tap to change`,
+      accessibilityRole: "button"
+    },
+    /* @__PURE__ */ import_react42.default.createElement(
+      import_react_native37.Text,
+      {
+        style: [styles10.monthYearText, { color: theme.colors.foreground }]
+      },
+      monthYearLabel
+    ),
+    /* @__PURE__ */ import_react42.default.createElement(
+      ChevronDownIcon,
+      {
+        size: 18,
+        color: theme.colors.foreground
+      }
+    )
+  ), /* @__PURE__ */ import_react42.default.createElement(import_react_native37.View, { style: styles10.navButtons }, /* @__PURE__ */ import_react42.default.createElement(
+    import_react_native37.Pressable,
     {
-      style: styles5.clearInputButton,
-      onPress: () => onInputChange?.(""),
-      accessibilityLabel: "Clear input",
+      style: styles10.navButton,
+      onPress: onPreviousMonth,
+      accessibilityLabel: "Previous month",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react23.default.createElement(CloseIcon, { color: theme.colors.foreground })
-  ) : null)));
+    /* @__PURE__ */ import_react42.default.createElement(ChevronLeftIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ import_react42.default.createElement(
+    import_react_native37.Pressable,
+    {
+      style: styles10.navButton,
+      onPress: onNextMonth,
+      accessibilityLabel: "Next month",
+      accessibilityRole: "button"
+    },
+    /* @__PURE__ */ import_react42.default.createElement(ChevronRightIcon, { size: 20, color: theme.colors.foreground })
+  ))));
+};
+
+// src/components/dialogs/datepicker-dialog/datepicker-dialog-month-picker.tsx
+var import_react43 = __toESM(require("react"), 1);
+var import_react_native38 = require("react-native");
+var DatePickerDialogMonthPicker = ({ viewDate, locale, themeColor, onSelectMonth }) => {
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
+  const isDefault = themeColor === "default";
+  const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const months = (0, import_react43.useMemo)(() => getMonthNames(locale), [locale]);
+  const currentMonth = viewDate.getMonth();
+  const groupAnim = (0, import_react43.useRef)(new import_react_native38.Animated.Value(0)).current;
+  (0, import_react43.useEffect)(() => {
+    groupAnim.setValue(0);
+    import_react_native38.Animated.timing(groupAnim, {
+      toValue: 1,
+      duration: 220,
+      easing: import_react_native38.Easing.out(import_react_native38.Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [groupAnim]);
+  return /* @__PURE__ */ import_react43.default.createElement(import_react_native38.View, { style: styles10.monthPickerContainer }, /* @__PURE__ */ import_react43.default.createElement(
+    import_react_native38.Animated.View,
+    {
+      style: {
+        opacity: groupAnim,
+        transform: [
+          {
+            translateY: groupAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [12, 0]
+            })
+          }
+        ]
+      }
+    },
+    /* @__PURE__ */ import_react43.default.createElement(import_react_native38.View, { style: styles10.monthGrid }, months.map((name, index) => {
+      const isCurrentMonth = index === currentMonth;
+      return /* @__PURE__ */ import_react43.default.createElement(
+        import_react_native38.Pressable,
+        {
+          key: index,
+          style: [
+            styles10.monthCell,
+            isCurrentMonth && { backgroundColor: accentColor }
+          ],
+          onPress: () => onSelectMonth(index),
+          accessibilityLabel: name,
+          accessibilityRole: "button",
+          accessibilityState: { selected: isCurrentMonth }
+        },
+        /* @__PURE__ */ import_react43.default.createElement(
+          import_react_native38.Text,
+          {
+            style: [
+              styles10.monthText,
+              { color: theme.colors.foreground },
+              isCurrentMonth && {
+                color: accentFg,
+                fontWeight: "600"
+              }
+            ]
+          },
+          name
+        )
+      );
+    }))
+  ));
 };
 
-// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.animation.ts
-var import_react24 = require("react");
-var import_react_native19 = require("react-native");
-var useAutocompleteDialogAnimation = ({
-  visible,
-  fadeAnim,
-  slideAnim,
-  scaleAnim
-}) => {
-  (0, import_react24.useEffect)(() => {
-    if (visible) {
-      import_react_native19.Animated.parallel([
-        import_react_native19.Animated.timing(fadeAnim, {
-          toValue: 1,
-          duration: 250,
-          useNativeDriver: true
-        }),
-        import_react_native19.Animated.spring(slideAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 65,
-          friction: 10
-        }),
-        import_react_native19.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 8
-        })
-      ]).start();
-    } else {
-      fadeAnim.setValue(0);
-      slideAnim.setValue(0);
-      scaleAnim.setValue(0);
-    }
-  }, [visible, fadeAnim, slideAnim, scaleAnim]);
+// src/components/dialogs/datepicker-dialog/datepicker-dialog-year-picker.tsx
+var import_react44 = __toESM(require("react"), 1);
+var import_react_native39 = require("react-native");
+var ITEM_HEIGHT = 48;
+var NUM_COLUMNS = 4;
+var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSelectYear }) => {
+  const listRef = (0, import_react44.useRef)(null);
+  const groupAnim = (0, import_react44.useRef)(new import_react_native39.Animated.Value(0)).current;
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
+  const isDefault = themeColor === "default";
+  const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const years = (0, import_react44.useMemo)(
+    () => getYearRange(minDate, maxDate),
+    [minDate, maxDate]
+  );
+  const currentYear = viewDate.getFullYear();
+  const initialIndex = (0, import_react44.useMemo)(() => {
+    const index = years.indexOf(currentYear);
+    const rowIndex = Math.floor(index / NUM_COLUMNS);
+    return Math.max(0, rowIndex);
+  }, [years, currentYear]);
+  (0, import_react44.useEffect)(() => {
+    groupAnim.setValue(0);
+    import_react_native39.Animated.timing(groupAnim, {
+      toValue: 1,
+      duration: 220,
+      easing: import_react_native39.Easing.out(import_react_native39.Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [groupAnim]);
+  const getItemLayout = (0, import_react44.useCallback)(
+    (_, index) => ({
+      length: ITEM_HEIGHT,
+      offset: ITEM_HEIGHT * index,
+      index
+    }),
+    []
+  );
+  const renderYear = (0, import_react44.useCallback)(
+    ({ item }) => {
+      const isCurrentYear = item === currentYear;
+      return /* @__PURE__ */ import_react44.default.createElement(
+        import_react_native39.Pressable,
+        {
+          style: [
+            styles10.yearCell,
+            isCurrentYear && { backgroundColor: accentColor }
+          ],
+          onPress: () => onSelectYear(item),
+          accessibilityLabel: `${item}`,
+          accessibilityRole: "button",
+          accessibilityState: { selected: isCurrentYear }
+        },
+        /* @__PURE__ */ import_react44.default.createElement(
+          import_react_native39.Text,
+          {
+            style: [
+              styles10.yearText,
+              { color: theme.colors.foreground },
+              isCurrentYear && {
+                color: accentFg,
+                fontWeight: "600"
+              }
+            ]
+          },
+          item
+        )
+      );
+    },
+    [currentYear, onSelectYear, accentColor, accentFg, theme.colors.foreground]
+  );
+  return /* @__PURE__ */ import_react44.default.createElement(import_react_native39.View, { style: styles10.yearPickerContainer }, /* @__PURE__ */ import_react44.default.createElement(
+    import_react_native39.Animated.View,
+    {
+      style: {
+        opacity: groupAnim,
+        transform: [
+          {
+            translateY: groupAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [12, 0]
+            })
+          }
+        ]
+      }
+    },
+    /* @__PURE__ */ import_react44.default.createElement(
+      import_react_native39.FlatList,
+      {
+        ref: listRef,
+        data: years,
+        renderItem: renderYear,
+        keyExtractor: (item) => String(item),
+        numColumns: NUM_COLUMNS,
+        getItemLayout,
+        initialScrollIndex: initialIndex,
+        showsVerticalScrollIndicator: false,
+        columnWrapperStyle: { justifyContent: "center" }
+      }
+    )
+  ));
 };
 
-// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
-var AutocompleteDialog = ({
+// src/components/dialogs/datepicker-dialog/datepicker-dialog.tsx
+var DatePickerDialog = ({
   visible,
-  inputValue,
-  placeholder = "Search...",
-  title,
+  selectedDate,
+  locale,
+  firstDayOfWeek,
   themeColor = "primary",
-  children,
-  showCheckmark = true,
-  checkmarkIcon,
-  inputTextStyle,
+  minDate,
+  maxDate,
   style,
-  onInputChange,
-  onClose,
-  onCheckmark,
-  onFocus,
-  onBlur
+  todayLabel,
+  confirmLabel,
+  onDateSelect,
+  onClearValue,
+  onClose
 }) => {
   const theme = useXUITheme();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native20.useWindowDimensions)();
-  const fadeAnim = (0, import_react25.useRef)(new import_react_native20.Animated.Value(0)).current;
-  const slideAnim = (0, import_react25.useRef)(new import_react_native20.Animated.Value(0)).current;
-  const scaleAnim = (0, import_react25.useRef)(new import_react_native20.Animated.Value(0)).current;
-  const inputRef = (0, import_react25.useRef)(null);
-  const [keyboardHeight, setKeyboardHeight] = (0, import_react25.useState)(0);
-  (0, import_react25.useEffect)(() => {
-    const showEvent = import_react_native20.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
-    const hideEvent = import_react_native20.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
-    const showSub = import_react_native20.Keyboard.addListener(showEvent, (e) => {
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    const hideSub = import_react_native20.Keyboard.addListener(hideEvent, () => {
-      setKeyboardHeight(0);
-    });
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, []);
-  const items = (0, import_react25.useMemo)(
-    () => import_react25.default.Children.toArray(children).filter(
-      import_react25.default.isValidElement
-    ),
-    [children]
-  );
-  const checkmarkColor = theme.colors[themeColor].main;
-  const checkmarkBackgroundColor = theme.colors[themeColor].background;
-  useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
-  (0, import_react25.useEffect)(() => {
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native40.useWindowDimensions)();
+  const fadeAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(0)).current;
+  const slideAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(0)).current;
+  const scaleAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(0)).current;
+  const viewFadeAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(1)).current;
+  const monthSlideXAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(0)).current;
+  const monthFadeAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(1)).current;
+  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
+  const isDefault = themeColor === "default";
+  const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
+  const labels = getDatePickerLabels(locale);
+  const resolvedTodayLabel = todayLabel ?? labels.today;
+  const resolvedConfirmLabel = confirmLabel ?? labels.confirm;
+  const {
+    viewDate,
+    viewMode,
+    goToPreviousMonth,
+    goToNextMonth,
+    goToYear,
+    goToMonth,
+    goToToday,
+    toggleYearPicker,
+    syncViewToDate
+  } = useDatePickerViewState(selectedDate);
+  const onCloseComplete = (0, import_react45.useCallback)(() => {
+    fadeAnim.setValue(0);
+    slideAnim.setValue(0);
+    scaleAnim.setValue(0);
+    viewFadeAnim.setValue(1);
+    monthSlideXAnim.setValue(0);
+    monthFadeAnim.setValue(1);
+  }, [fadeAnim, slideAnim, scaleAnim, viewFadeAnim, monthSlideXAnim, monthFadeAnim]);
+  const { shouldRender } = useDatePickerDialogAnimation({
+    visible,
+    fadeAnim,
+    slideAnim,
+    scaleAnim,
+    onCloseComplete
+  });
+  const { animate: animateViewTransition } = useViewTransitionAnimation({
+    fadeAnim: viewFadeAnim
+  });
+  const { animate: animateMonthSlide } = useMonthSlideAnimation({
+    slideAnim: monthSlideXAnim,
+    fadeAnim: monthFadeAnim
+  });
+  const prevViewModeRef = (0, import_react45.useRef)(viewMode);
+  (0, import_react45.useEffect)(() => {
+    if (prevViewModeRef.current !== viewMode) {
+      prevViewModeRef.current = viewMode;
+      animateViewTransition();
+    }
+  }, [viewMode, animateViewTransition]);
+  (0, import_react45.useEffect)(() => {
+    if (visible && selectedDate) {
+      syncViewToDate(selectedDate);
+    }
+  }, [visible, selectedDate, syncViewToDate]);
+  (0, import_react45.useEffect)(() => {
     if (!visible) return;
-    const sub = import_react_native20.BackHandler.addEventListener("hardwareBackPress", () => {
-      onClose?.();
+    const sub = import_react_native40.BackHandler.addEventListener("hardwareBackPress", () => {
+      onClose();
       return true;
     });
     return () => sub.remove();
   }, [visible, onClose]);
-  const focusInput = (0, import_react25.useCallback)(() => {
-    const delay = import_react_native20.Platform.OS === "android" ? 300 : 100;
-    import_react_native20.InteractionManager.runAfterInteractions(() => {
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, delay);
-    });
-  }, []);
-  const handleCheckmarkPress = () => {
-    onCheckmark?.();
-    import_react_native20.Keyboard.dismiss();
-  };
-  (0, import_react25.useEffect)(() => {
-    if (!visible) {
-      import_react_native20.Keyboard.dismiss();
-      return;
-    }
-    focusInput();
-  }, [focusInput, visible]);
-  const listBottomPadding = (0, import_react25.useMemo)(() => {
-    const basePadding = showCheckmark ? 96 : 64;
-    return (keyboardHeight > 0 ? keyboardHeight : 0) + basePadding;
-  }, [keyboardHeight, showCheckmark]);
-  if (!visible) return null;
+  const handlePreviousMonth = (0, import_react45.useCallback)(() => {
+    goToPreviousMonth();
+    animateMonthSlide("left");
+  }, [goToPreviousMonth, animateMonthSlide]);
+  const handleNextMonth = (0, import_react45.useCallback)(() => {
+    goToNextMonth();
+    animateMonthSlide("right");
+  }, [goToNextMonth, animateMonthSlide]);
+  const handleDaySelect = (0, import_react45.useCallback)(
+    (date) => {
+      onDateSelect(date);
+    },
+    [onDateSelect]
+  );
+  const handleTodayPress = (0, import_react45.useCallback)(() => {
+    const today = /* @__PURE__ */ new Date();
+    if (!isDateInRange(today, minDate, maxDate)) return;
+    goToToday();
+    onDateSelect(today);
+  }, [goToToday, onDateSelect, minDate, maxDate]);
+  if (!shouldRender) return null;
   const overlayStyle = {
     position: "absolute",
     top: 0,
@@ -1760,79 +4551,139 @@ var AutocompleteDialog = ({
     height: screenHeight
   };
   const containerAnimatedStyle = {
+    opacity: fadeAnim,
     transform: [
+      {
+        scale: scaleAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.92, 1]
+        })
+      },
       {
         translateY: slideAnim.interpolate({
           inputRange: [0, 1],
-          outputRange: [screenHeight, 0]
+          outputRange: [40, 0]
         })
       }
     ]
   };
-  const inputAnimatedStyle = {
-    transform: [{ scaleX: scaleAnim }]
+  const viewTransitionStyle = {
+    opacity: viewFadeAnim,
+    transform: [
+      {
+        translateY: viewFadeAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [8, 0]
+        })
+      }
+    ]
   };
-  const listHeader = /* @__PURE__ */ import_react25.default.createElement(
-    AutocompleteDialogHeader,
+  const monthSlideStyle = {
+    opacity: monthFadeAnim,
+    transform: [{ translateX: monthSlideXAnim }]
+  };
+  const renderContent = () => {
+    switch (viewMode) {
+      case "year":
+        return /* @__PURE__ */ import_react45.default.createElement(
+          DatePickerDialogYearPicker,
+          {
+            viewDate,
+            themeColor,
+            minDate,
+            maxDate,
+            onSelectYear: goToYear
+          }
+        );
+      case "month":
+        return /* @__PURE__ */ import_react45.default.createElement(
+          DatePickerDialogMonthPicker,
+          {
+            viewDate,
+            locale,
+            themeColor,
+            onSelectMonth: goToMonth
+          }
+        );
+      case "calendar":
+      default:
+        return /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Animated.View, { style: [viewTransitionStyle, monthSlideStyle] }, /* @__PURE__ */ import_react45.default.createElement(
+          DatePickerDialogCalendar,
+          {
+            viewDate,
+            selectedDate,
+            locale,
+            firstDayOfWeek,
+            themeColor,
+            minDate,
+            maxDate,
+            onSelectDay: handleDaySelect,
+            onPreviousMonth: handlePreviousMonth,
+            onNextMonth: handleNextMonth
+          }
+        ));
+    }
+  };
+  return /* @__PURE__ */ import_react45.default.createElement(Portal, null, /* @__PURE__ */ import_react45.default.createElement(import_react_native_gesture_handler2.GestureHandlerRootView, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react45.default.createElement(import_react_native40.View, { style: overlayStyle }, /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Animated.View, { style: [styles10.backdrop, { opacity: fadeAnim }] }, /* @__PURE__ */ import_react45.default.createElement(
+    import_react_native40.Pressable,
     {
-      title,
-      inputValue,
-      placeholder,
-      inputRef,
-      inputAnimatedStyle,
-      inputTextStyle,
-      onInputChange,
-      onClose,
-      onCheckmarkPress: handleCheckmarkPress,
-      onFocus,
-      onBlur
+      style: { flex: 1 },
+      onPress: onClose,
+      accessibilityLabel: "Close calendar",
+      accessibilityRole: "button"
     }
-  );
-  return /* @__PURE__ */ import_react25.default.createElement(Portal, null, /* @__PURE__ */ import_react25.default.createElement(import_react_native20.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react25.default.createElement(import_react_native20.Animated.View, { style: [styles5.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react25.default.createElement(import_react_native20.Animated.View, { style: [styles5.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react25.default.createElement(
-    import_react_native20.View,
+  )), /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Animated.View, { style: [styles10.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react45.default.createElement(
+    import_react_native40.View,
     {
-      style: [styles5.container, { backgroundColor: theme.colors.background }]
+      style: [
+        styles10.container,
+        { backgroundColor: theme.colors.background }
+      ]
     },
-    listHeader,
-    /* @__PURE__ */ import_react25.default.createElement(
-      import_react_native20.FlatList,
+    /* @__PURE__ */ import_react45.default.createElement(
+      DatePickerDialogHeader,
       {
-        data: items,
-        renderItem: ({ item }) => item,
-        keyExtractor: (_, index) => String(index),
-        style: styles5.listContainer,
-        contentContainerStyle: {
-          paddingBottom: listBottomPadding
-        },
-        keyboardShouldPersistTaps: "always",
-        keyboardDismissMode: "none",
-        showsVerticalScrollIndicator: false
+        viewDate,
+        selectedDate,
+        locale,
+        themeColor,
+        selectDateLabel: labels.selectDate,
+        onClearValue,
+        onPreviousMonth: handlePreviousMonth,
+        onNextMonth: handleNextMonth,
+        onToggleYearPicker: toggleYearPicker
       }
     ),
-    showCheckmark ? /* @__PURE__ */ import_react25.default.createElement(import_react_native20.View, { style: styles5.checkmarkButtonContainer }, /* @__PURE__ */ import_react25.default.createElement(
-      import_react_native20.Pressable,
+    renderContent(),
+    /* @__PURE__ */ import_react45.default.createElement(import_react_native40.View, { style: styles10.footer }, /* @__PURE__ */ import_react45.default.createElement(
+      import_react_native40.Pressable,
       {
-        style: [
-          styles5.checkmarkButton,
-          { backgroundColor: checkmarkBackgroundColor }
-        ],
-        onPress: handleCheckmarkPress,
-        accessibilityLabel: "Confirm",
+        style: styles10.footerButton,
+        onPress: handleTodayPress,
+        accessibilityLabel: resolvedTodayLabel,
         accessibilityRole: "button"
       },
-      checkmarkIcon ?? /* @__PURE__ */ import_react25.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
-    )) : null
-  ))));
+      /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Text, { style: [styles10.footerButtonText, { color: accentColor }] }, resolvedTodayLabel)
+    ), /* @__PURE__ */ import_react45.default.createElement(
+      import_react_native40.Pressable,
+      {
+        style: styles10.footerButton,
+        onPress: onClose,
+        accessibilityLabel: resolvedConfirmLabel,
+        accessibilityRole: "button"
+      },
+      /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Text, { style: [styles10.footerButtonText, { color: accentColor }] }, resolvedConfirmLabel)
+    ))
+  )))));
 };
 
-// src/components/autocomplete/autocomplete-trigger.tsx
-var import_react26 = __toESM(require("react"), 1);
-var import_react_native21 = require("react-native");
-var AutocompleteTrigger = ({
+// src/components/datepicker/datepicker-trigger.tsx
+var import_react46 = __toESM(require("react"), 1);
+var import_react_native41 = require("react-native");
+var DatePickerTrigger = ({
   triggerRef,
   isDisabled,
-  currentSelectedKey,
-  currentInputValue,
+  hasValue,
   displayValue,
   sizeStyles,
   radiusStyles,
@@ -1842,7 +4693,7 @@ var AutocompleteTrigger = ({
   label,
   labelText,
   isLabelInside,
-  clearIcon,
+  calendarIcon,
   style,
   textStyle,
   onPress: handleTriggerPress,
@@ -1850,15 +4701,15 @@ var AutocompleteTrigger = ({
   onLayout: handleTriggerLayout
 }) => {
   const renderLabel = isLabelInside && label;
-  return /* @__PURE__ */ import_react26.default.createElement(
-    import_react_native21.Pressable,
+  return /* @__PURE__ */ import_react46.default.createElement(
+    import_react_native41.Pressable,
     {
       ref: triggerRef,
       onPress: handleTriggerPress,
       onLayout: handleTriggerLayout,
       disabled: isDisabled,
       style: [
-        styles4.trigger,
+        styles9.trigger,
         {
           minHeight: sizeStyles.minHeight,
           paddingHorizontal: sizeStyles.paddingHorizontal,
@@ -1866,20 +4717,20 @@ var AutocompleteTrigger = ({
         },
         radiusStyles,
         variantStyles,
-        isDisabled && styles4.disabled,
+        isDisabled && styles9.disabled,
         style
       ],
       accessibilityLabel: labelText ?? (typeof label === "string" ? label : void 0),
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled }
     },
-    /* @__PURE__ */ import_react26.default.createElement(import_react_native21.View, { style: styles4.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react26.default.createElement(
-      import_react_native21.Text,
+    /* @__PURE__ */ import_react46.default.createElement(import_react_native41.View, { style: styles9.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react46.default.createElement(
+      import_react_native41.Text,
       {
         style: [
-          styles4.triggerText,
+          styles9.triggerText,
           { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
-          !currentSelectedKey && !currentInputValue && { opacity: 0.5 },
+          !hasValue && { opacity: 0.5 },
           textStyle
         ],
         numberOfLines: 1,
@@ -1887,188 +4738,109 @@ var AutocompleteTrigger = ({
       },
       displayValue
     )),
-    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ import_react26.default.createElement(
-      import_react_native21.TouchableOpacity,
+    isClearable && hasValue ? /* @__PURE__ */ import_react46.default.createElement(
+      import_react_native41.TouchableOpacity,
       {
         onPress: handleClear,
-        style: styles4.clearButton,
+        style: styles9.clearButton,
         hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
       },
-      clearIcon ?? /* @__PURE__ */ import_react26.default.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
-    ) : null
+      /* @__PURE__ */ import_react46.default.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
+    ) : calendarIcon ?? /* @__PURE__ */ import_react46.default.createElement(CalendarIcon, { color: theme.colors.foreground, size: 20 })
   );
 };
 
-// src/components/autocomplete/autocomplete.tsx
-var defaultPlaceholder = "Search...";
-var Autocomplete = ({
-  children,
+// src/components/datepicker/datepicker.tsx
+var DatePicker = ({
+  value,
+  defaultValue,
+  onChange,
+  locale = "en",
+  minDate,
+  maxDate,
+  firstDayOfWeek: firstDayOfWeekProp,
   variant = "flat",
   themeColor = "default",
   size = "md",
   radius = "md",
-  placeholder = defaultPlaceholder,
-  labelPlacement = "outside",
-  label,
-  description,
-  errorMessage,
-  clearIcon,
-  fullWidth = false,
-  isDisabled = false,
-  isInvalid = false,
-  isClearable = true,
-  allowsCustomValue = false,
-  forceSelection = false,
-  allowsEmptyCollection = true,
-  disableLocalFilter = false,
-  inputValue,
-  defaultInputValue,
-  customAppearance,
-  onClose,
-  onOpenChange,
-  onSelectionChange,
-  onInputChange,
-  onClear
-}) => {
-  const { currentSelectedKey, updateSelection } = useAutocompleteSelection({
-    onSelectionChange
-  });
-  const { currentInputValue, updateInputValue } = useAutocompleteInputState({
-    inputValue,
-    defaultInputValue,
-    selectedKey: currentSelectedKey,
-    onInputChange
-  });
-  const { isOpen, setOpen } = useAutocompleteOpenState({
-    isOpened: void 0,
-    isDisabled,
-    onOpenChange,
-    onClose
-  });
-  const triggerRef = (0, import_react27.useRef)(null);
-  const [triggerLayout, setTriggerLayout] = (0, import_react27.useState)();
-  const handleTriggerLayout = (0, import_react27.useCallback)(() => {
-    triggerRef.current?.measureInWindow((x, y, width, height) => {
-      setTriggerLayout({ x, y, width, height });
-    });
-  }, []);
-  const items = (0, import_react27.useMemo)(() => {
-    const elements = import_react27.default.Children.toArray(children).filter(Boolean);
-    return elements.map((child, index) => {
-      if (!import_react27.default.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 filteredItems = (0, import_react27.useMemo)(() => {
-    if (disableLocalFilter || !currentInputValue.trim()) {
-      return items;
-    }
-    return items.filter(
-      (item) => defaultFilterFunction(item.labelText, currentInputValue)
-    );
-  }, [disableLocalFilter, items, currentInputValue]);
+  label,
+  placeholder = "Select a date",
+  description,
+  errorMessage,
+  labelPlacement = "outside",
+  fullWidth = false,
+  isDisabled = false,
+  isInvalid = false,
+  isReadOnly = false,
+  isClearable = true,
+  customAppearance,
+  calendarIcon,
+  onOpen,
+  onClose,
+  onOpenChange
+}) => {
   const theme = useXUITheme();
-  const sizeStyles = useAutocompleteSizeStyles(size);
-  const { radiusStyles } = useAutocompleteRadiusStyles(radius);
-  const variantStyles = useAutocompleteVariantStyles(themeColor, variant, isInvalid);
-  const labelStyle = useAutocompleteLabelStyle(
+  const { selectedDate, updateDate } = useDatePickerState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const { isOpen, setOpen } = useDatePickerOpenState({
+    isDisabled: isDisabled || isReadOnly,
+    onOpenChange,
+    onOpen,
+    onClose
+  });
+  const triggerRef = (0, import_react47.useRef)(null);
+  const handleTriggerLayout = (0, import_react47.useCallback)(() => {
+  }, []);
+  const firstDayOfWeek = (0, import_react47.useMemo)(
+    () => firstDayOfWeekProp ?? getFirstDayOfWeek(locale),
+    [firstDayOfWeekProp, locale]
+  );
+  const sizeStyles = useDatePickerSizeStyles(size);
+  const radiusStyles = useDatePickerRadiusStyles(radius);
+  const variantStyles = useDatePickerVariantStyles(themeColor, variant, isInvalid);
+  const labelStyle = useDatePickerLabelStyle(
     themeColor,
     isInvalid,
     sizeStyles.labelSize
   );
-  const helperColor = useAutocompleteHelperColor(isInvalid);
-  const selectedItem = items.find((item) => item.key === currentSelectedKey);
-  const displayValue = forceSelection ? selectedItem?.labelText || placeholder : currentInputValue || placeholder;
-  const handleInputChange = (0, import_react27.useCallback)(
-    (text) => {
-      updateInputValue(text);
-      const selectedLabel = selectedItem?.labelText ?? "";
-      const shouldClearSelection = !text.trim() && !allowsCustomValue || currentSelectedKey !== null && text !== selectedLabel;
-      if (shouldClearSelection) {
-        updateSelection(null);
-      }
-    },
-    [
-      updateInputValue,
-      allowsCustomValue,
-      updateSelection,
-      selectedItem,
-      currentSelectedKey
-    ]
-  );
-  const handleItemSelection = (0, import_react27.useCallback)(
-    (key, itemLabel) => {
-      if (isDisabled) {
-        return;
-      }
-      updateSelection(key);
-      updateInputValue(itemLabel);
-      setTimeout(() => {
-        import_react_native22.Keyboard.dismiss();
-        setOpen(false);
-      }, 50);
+  const helperColor = useDatePickerHelperColor(isInvalid);
+  const displayValue = (0, import_react47.useMemo)(() => {
+    if (!selectedDate) return placeholder;
+    return formatDate(selectedDate, locale);
+  }, [selectedDate, locale, placeholder]);
+  const handleTriggerPress = (0, import_react47.useCallback)(() => {
+    if (!isDisabled && !isReadOnly) {
+      setOpen(true);
+    }
+  }, [isDisabled, isReadOnly, setOpen]);
+  const handleClear = (0, import_react47.useCallback)(() => {
+    if (isDisabled || isReadOnly) return;
+    updateDate(null);
+  }, [isDisabled, isReadOnly, updateDate]);
+  const handleDateSelect = (0, import_react47.useCallback)(
+    (date) => {
+      updateDate(date);
     },
-    [isDisabled, updateSelection, updateInputValue, setOpen]
+    [updateDate]
   );
-  const handleCheckmark = (0, import_react27.useCallback)(() => {
+  const handleClose = (0, import_react47.useCallback)(() => {
     setOpen(false);
   }, [setOpen]);
-  const handleClear = (0, import_react27.useCallback)(() => {
-    if (isDisabled) {
-      return;
-    }
-    updateSelection(null);
-    updateInputValue("");
-    onClear?.();
-  }, [isDisabled, updateSelection, updateInputValue, onClear]);
-  const handleTriggerPress = (0, import_react27.useCallback)(() => {
-    if (!isDisabled) {
-      if (selectedItem && !currentInputValue) {
-        updateInputValue(selectedItem.labelText);
-      }
-      setOpen(true);
-    }
-  }, [isDisabled, setOpen, selectedItem, currentInputValue, updateInputValue]);
-  const listItems = filteredItems.map((item) => {
-    const itemProps = item.element.props;
-    const itemDisabled = isDisabled || itemProps.isDisabled;
-    const itemSelected = itemProps.isSelected ?? currentSelectedKey === item.key;
-    const handleItemSelected = () => {
-      if (itemDisabled || itemProps.isReadOnly) {
-        return;
-      }
-      handleItemSelection(item.key, item.labelText);
-      itemProps.onSelected?.();
-    };
-    return import_react27.default.cloneElement(item.element, {
-      key: item.key,
-      isDisabled: itemDisabled,
-      isSelected: itemSelected,
-      onSelected: handleItemSelected
-    });
-  });
-  const showEmptyMessage = !allowsEmptyCollection && listItems.length === 0;
   const isLabelInside = labelPlacement === "inside";
   const isLabelOutsideLeft = labelPlacement === "outside-left";
   const isLabelOutside = labelPlacement === "outside" || labelPlacement === "outside-top";
-  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react27.default.createElement(import_react_native22.Text, { style: [styles4.label, labelStyle] }, label) : /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, null, label) : null;
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react47.default.createElement(import_react_native42.Text, { style: [styles9.label, labelStyle] }, label) : /* @__PURE__ */ import_react47.default.createElement(import_react_native42.View, null, label) : null;
   const shouldShowHelper = Boolean(description || errorMessage);
   const helperContent = isInvalid && errorMessage ? errorMessage : description;
-  const triggerContent = /* @__PURE__ */ import_react27.default.createElement(
-    AutocompleteTrigger,
+  const triggerContent = /* @__PURE__ */ import_react47.default.createElement(
+    DatePickerTrigger,
     {
       triggerRef,
-      isDisabled,
-      currentSelectedKey,
-      currentInputValue,
+      isDisabled: isDisabled || isReadOnly,
+      hasValue: !!selectedDate,
       displayValue,
       sizeStyles,
       radiusStyles,
@@ -2078,8 +4850,8 @@ var Autocomplete = ({
       label: renderLabel,
       labelText: typeof label === "string" ? label : void 0,
       isLabelInside,
-      clearIcon,
-      style: customAppearance?.container,
+      calendarIcon,
+      style: customAppearance?.trigger,
       textStyle: customAppearance?.text,
       onPress: handleTriggerPress,
       onClear: handleClear,
@@ -2087,211 +4859,52 @@ var Autocomplete = ({
     }
   );
   const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
-  return /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, { style: [styles4.container, fullWidth ? styles4.fullWidth : styles4.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, { style: styles4.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react27.default.createElement(import_react_native22.Text, { style: [styles4.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, null, helperContent) : null, /* @__PURE__ */ import_react27.default.createElement(
-    AutocompleteDialog,
-    {
-      visible: isOpen,
-      inputValue: currentInputValue,
-      placeholder,
-      title: typeof label === "string" ? label : void 0,
-      themeColor,
-      _triggerLayout: triggerLayout,
-      showCheckmark: false,
-      onInputChange: handleInputChange,
-      onClose: () => setOpen(false),
-      onCheckmark: handleCheckmark
-    },
-    /* @__PURE__ */ import_react27.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react27.default.createElement(import_react_native22.Text, { style: [styles4.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
-  ));
-};
-
-// src/components/autocomplete/autocomplete-item.tsx
-var import_react29 = __toESM(require("react"), 1);
-var import_react_native24 = require("react-native");
-
-// src/components/autocomplete/autocomplete-item.style.ts
-var import_react_native23 = require("react-native");
-var styles6 = import_react_native23.StyleSheet.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/autocomplete/autocomplete-item.hook.ts
-var import_react28 = require("react");
-var import_core18 = require("@xaui/core");
-var useAutocompleteItemSizeStyles = (size) => {
-  const theme = useXUITheme();
-  return (0, import_react28.useMemo)(() => {
-    const sizes = {
-      xs: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.sm,
-        titleSize: theme.fontSizes.xs,
-        descriptionSize: theme.fontSizes.xs
-      },
-      sm: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.sm,
-        titleSize: theme.fontSizes.sm,
-        descriptionSize: theme.fontSizes.xs
-      },
-      md: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.sm,
-        titleSize: theme.fontSizes.md,
-        descriptionSize: theme.fontSizes.xs
-      },
-      lg: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.sm,
-        titleSize: theme.fontSizes.lg,
-        descriptionSize: theme.fontSizes.md
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-};
-var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
-  const theme = useXUITheme();
-  const safeThemeColor = (0, import_core18.getSafeThemeColor)(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return (0, import_react28.useMemo)(() => {
-    return "transparent";
-  }, [isSelected, colorScheme]);
-};
-var useAutocompleteItemTextColors = () => {
-  const theme = useXUITheme();
-  return (0, import_react28.useMemo)(() => {
-    return {
-      textColor: theme.colors.foreground,
-      descriptionColor: theme.colors.foreground
-    };
-  }, [theme]);
-};
-var useAutocompleteItemCheckmarkColor = (themeColor) => {
-  const theme = useXUITheme();
-  const safeThemeColor = (0, import_core18.getSafeThemeColor)(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return (0, import_react28.useMemo)(() => {
-    if (themeColor === "default") {
-      return theme.colors.primary.main;
-    }
-    return colorScheme.main;
-  }, [themeColor, colorScheme, theme]);
-};
-var useAutocompleteItemStyles = (isSelected, _isDisabled) => {
-  const context = (0, import_react28.useContext)(AutocompleteContext);
-  const backgroundColor = useAutocompleteItemBackgroundColor(
-    context.themeColor,
-    isSelected
-  );
-  const { textColor, descriptionColor } = useAutocompleteItemTextColors();
-  const checkmarkColor = useAutocompleteItemCheckmarkColor(context.themeColor);
-  return {
-    backgroundColor,
-    labelColor: textColor,
-    descriptionColor,
-    checkmarkColor
-  };
-};
-
-// src/components/autocomplete/autocomplete-item.tsx
-var defaultSize = "md";
-var AutocompleteItem = ({
-  label,
-  description,
-  startContent,
-  endContent,
-  selectedIcon: _selectedIcon,
-  isDisabled = false,
-  isSelected = false,
-  isReadOnly = false,
-  customAppearance,
-  onSelected
-}) => {
-  const context = (0, import_react29.useContext)(AutocompleteContext);
-  const size = context?.size ?? defaultSize;
-  const isItemDisabled = context?.isDisabled ? true : isDisabled;
-  const sizeStyles = useAutocompleteItemSizeStyles(size);
-  const { backgroundColor, labelColor, descriptionColor } = useAutocompleteItemStyles(isSelected, isItemDisabled);
-  const handlePress = () => {
-    if (isItemDisabled || isReadOnly) {
-      return;
-    }
-    onSelected?.();
-  };
-  return /* @__PURE__ */ import_react29.default.createElement(
-    import_react_native24.Pressable,
+  return /* @__PURE__ */ import_react47.default.createElement(
+    import_react_native42.View,
     {
-      onPress: handlePress,
-      disabled: isItemDisabled,
       style: [
-        styles6.item,
-        {
-          paddingVertical: sizeStyles.paddingVertical,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor
-        },
-        isItemDisabled && styles6.disabled,
+        styles9.container,
+        fullWidth ? styles9.fullWidth : styles9.minWidth,
         customAppearance?.container
       ]
     },
-    startContent,
-    /* @__PURE__ */ import_react29.default.createElement(import_react_native24.View, { style: styles6.content }, /* @__PURE__ */ import_react29.default.createElement(
-      import_react_native24.Text,
-      {
-        style: [
-          styles6.title,
-          { fontSize: sizeStyles.titleSize, color: labelColor },
-          customAppearance?.text
-        ]
-      },
-      label
-    ), description && /* @__PURE__ */ import_react29.default.createElement(
-      import_react_native24.Text,
+    isLabelOutside && labelBlock,
+    isLabelOutsideLeft ? /* @__PURE__ */ import_react47.default.createElement(import_react_native42.View, { style: styles9.outsideLeftRow }, renderLabel, triggerContent) : triggerContent,
+    shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react47.default.createElement(import_react_native42.Text, { style: [styles9.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react47.default.createElement(import_react_native42.View, null, helperContent) : null,
+    /* @__PURE__ */ import_react47.default.createElement(
+      DatePickerDialog,
       {
-        style: [
-          styles6.description,
-          { fontSize: sizeStyles.descriptionSize, color: descriptionColor }
-        ]
-      },
-      description
-    )),
-    endContent
+        visible: isOpen,
+        selectedDate,
+        locale,
+        firstDayOfWeek,
+        themeColor,
+        minDate,
+        maxDate,
+        style: customAppearance?.calendar,
+        onDateSelect: handleDateSelect,
+        onClearValue: handleClear,
+        onClose: handleClose
+      }
+    )
   );
 };
 
 // src/components/typography/typography.tsx
-var import_react31 = __toESM(require("react"), 1);
-var import_react_native26 = require("react-native");
+var import_react49 = __toESM(require("react"), 1);
+var import_react_native44 = require("react-native");
 
 // src/components/typography/typography.style.ts
-var import_react_native25 = require("react-native");
-var styles7 = import_react_native25.StyleSheet.create({
+var import_react_native43 = require("react-native");
+var styles11 = import_react_native43.StyleSheet.create({
   text: {
     includeFontPadding: false
   }
 });
 
 // src/components/typography/typography.hook.ts
-var import_react30 = require("react");
-var import_core21 = require("@xaui/core");
+var import_react48 = require("react");
+var import_core37 = require("@xaui/core");
 var knownVariants = {
   caption: true,
   headlineLarge: true,
@@ -2309,18 +4922,18 @@ var isKnownVariant = (variant) => {
 };
 var useTypographyColor = (themeColor) => {
   const theme = useXUITheme();
-  const color = (0, import_react30.useMemo)(() => {
+  const color = (0, import_react48.useMemo)(() => {
     if (themeColor === "default") {
       return theme.colors.foreground;
     }
-    const safeThemeColor = (0, import_core21.getSafeThemeColor)(themeColor);
+    const safeThemeColor = (0, import_core37.getSafeThemeColor)(themeColor);
     return theme.colors[safeThemeColor].main;
   }, [theme, themeColor]);
   return color;
 };
 var useTypographyVariantStyles = (variant) => {
   const theme = useXUITheme();
-  const variantStyles = (0, import_react30.useMemo)(() => {
+  const variantStyles = (0, import_react48.useMemo)(() => {
     if (!isKnownVariant(variant)) {
       return {
         fontFamily: theme.fontFamilies.body,
@@ -2328,7 +4941,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       };
     }
-    const styles8 = {
+    const styles12 = {
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,
@@ -2380,7 +4993,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       }
     };
-    return styles8[variant];
+    return styles12[variant];
   }, [theme, variant]);
   return variantStyles;
 };
@@ -2398,18 +5011,18 @@ var Typography = ({
   const color = useTypographyColor(themeColor);
   const variantStyles = useTypographyVariantStyles(variant);
   const colorStyle = { color };
-  const ellipsizeMode = (0, import_react31.useMemo)(() => {
+  const ellipsizeMode = (0, import_react49.useMemo)(() => {
     if (!maxLines) return void 0;
     if (overflow === "clip") return "clip";
     return "tail";
   }, [maxLines, overflow]);
-  return /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native26.Text,
+  return /* @__PURE__ */ import_react49.default.createElement(
+    import_react_native44.Text,
     {
       numberOfLines: maxLines,
       ellipsizeMode,
       style: [
-        styles7.text,
+        styles11.text,
         variantStyles,
         align && { textAlign: align },
         colorStyle,
@@ -2425,6 +5038,10 @@ var Typography = ({
   Alert,
   Autocomplete,
   AutocompleteItem,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  DatePicker,
   Divider,
   Typography
 });