@xaui/native 0.0.8 → 0.0.9

package/dist/chunk-7LXW4BXD.js

@@ -0,0 +1,606 @@
+import {
+  useXUITheme
+} from "./chunk-NBRASCX4.js";
+
+// src/components/icon/icons/arrow-back.tsx
+import React, { useEffect, useMemo, useRef } from "react";
+import { Animated } from "react-native";
+import Svg, { Circle, Path, Rect } from "react-native-svg";
+
+// src/components/icon/icon.utils.ts
+var isThemeColor = (color) => {
+  const themeColors = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "danger",
+    "warning",
+    "success",
+    "default"
+  ];
+  return themeColors.includes(color);
+};
+
+// src/components/icon/icons/arrow-back.tsx
+var AnimatedPath = Animated.createAnimatedComponent(Path);
+var ArrowBackIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = useRef(new Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef(new Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  useEffect(() => {
+    if (isAnimated) {
+      Animated.parallel([
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isAnimated, scaleAnim, opacityAnim]);
+  const animatedProps = isAnimated ? {
+    transform: [{ scale: scaleAnim }],
+    opacity: opacityAnim
+  } : void 0;
+  const renderArrow = () => /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M244 400L100 256l144-144M120 256h292",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    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"
+    }
+  ), renderArrow());
+  const renderRoundOutlined = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Circle,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderArrow());
+  const renderSquareOutlined = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Rect,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderArrow());
+  const renderVariant = () => {
+    switch (variant) {
+      case "duotone":
+        return renderDuotone();
+      case "round-outlined":
+        return renderRoundOutlined();
+      case "square-outlined":
+        return renderSquareOutlined();
+      case "filled":
+      case "round-filled":
+      case "square-filled":
+      case "baseline":
+      default:
+        return renderArrow();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/checkmark.tsx
+import React2, { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { Animated as Animated2 } from "react-native";
+import Svg2, { Path as Path2, Circle as Circle2, Rect as Rect2 } from "react-native-svg";
+var AnimatedPath2 = Animated2.createAnimatedComponent(Path2);
+var CheckmarkIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = useRef2(new Animated2.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef2(new Animated2.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo2(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  useEffect2(() => {
+    if (isAnimated) {
+      Animated2.parallel([
+        Animated2.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        Animated2.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__ */ React2.createElement(
+    AnimatedPath2,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 32,
+      d: "M416 128L192 384l-96-96",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ React2.createElement(
+    AnimatedPath2,
+    {
+      fill: resolvedColor,
+      d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192zm-257.9 78.9l-64-64a16 16 0 0 1 22.6-22.6l52.7 52.7 116.7-116.7a16 16 0 0 1 22.6 22.6l-128 128a16 16 0 0 1-22.6 0z",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    Path2,
+    {
+      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__ */ React2.createElement(
+    AnimatedPath2,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 32,
+      d: "M416 128L192 384l-96-96",
+      ...animatedProps
+    }
+  ));
+  const renderRoundOutlined = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    Circle2,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    AnimatedPath2,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 32,
+      d: "M416 128L192 384l-96-96",
+      ...animatedProps
+    }
+  ));
+  const renderSquareOutlined = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    Rect2,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    AnimatedPath2,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 32,
+      d: "M416 128L192 384l-96-96",
+      ...animatedProps
+    }
+  ));
+  const renderRoundFilled = () => /* @__PURE__ */ React2.createElement(
+    AnimatedPath2,
+    {
+      fill: resolvedColor,
+      d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192zm-257.9 78.9l-64-64a16 16 0 0 1 22.6-22.6l52.7 52.7 116.7-116.7a16 16 0 0 1 22.6 22.6l-128 128a16 16 0 0 1-22.6 0z",
+      ...animatedProps
+    }
+  );
+  const renderSquareFilled = () => /* @__PURE__ */ React2.createElement(
+    AnimatedPath2,
+    {
+      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-141.45 241.25l-116.36-103a16 16 0 0 1 21.62-23.58l104.18 92.23 145.69-145.69a16 16 0 0 1 22.62 22.62l-156 156a16 16 0 0 1-21.75.42z",
+      ...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__ */ React2.createElement(Svg2, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/chevron-down.tsx
+import React3, { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { Animated as Animated3 } from "react-native";
+import Svg3, { Path as Path3, Circle as Circle3, Rect as Rect3 } from "react-native-svg";
+var AnimatedPath3 = Animated3.createAnimatedComponent(Path3);
+var ChevronDownIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = useRef3(new Animated3.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef3(new Animated3.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo3(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  useEffect3(() => {
+    if (isAnimated) {
+      Animated3.parallel([
+        Animated3.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        Animated3.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__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M112 184l144 144 144-144",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      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__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    Path3,
+    {
+      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__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M112 184l144 144 144-144",
+      ...animatedProps
+    }
+  ));
+  const renderRoundOutlined = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    Circle3,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M112 184l144 144 144-144",
+      ...animatedProps
+    }
+  ));
+  const renderSquareOutlined = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    Rect3,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M112 184l144 144 144-144",
+      ...animatedProps
+    }
+  ));
+  const renderRoundFilled = () => /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      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__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      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__ */ React3.createElement(Svg3, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/close.tsx
+import React4, { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { Animated as Animated4 } from "react-native";
+import Svg4, { Path as Path4, Rect as Rect4, Circle as Circle4 } from "react-native-svg";
+var AnimatedPath4 = Animated4.createAnimatedComponent(Path4);
+var CloseIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = useRef4(new Animated4.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef4(new Animated4.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo4(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  useEffect4(() => {
+    if (isAnimated) {
+      Animated4.parallel([
+        Animated4.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        Animated4.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__ */ React4.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    Path4,
+    {
+      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__ */ React4.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
+      ...animatedProps
+    }
+  ));
+  const renderRoundOutlined = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    Circle4,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
+      ...animatedProps
+    }
+  ));
+  const renderSquareOutlined = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    Rect4,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
+      ...animatedProps
+    }
+  ));
+  const renderRoundFilled = () => /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z",
+      ...animatedProps
+    }
+  );
+  const renderSquareFilled = () => /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
+    {
+      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-59.31 244.69a16 16 0 1 1-22.62 22.62L256 278.63l-62.07 52.68a16 16 0 0 1-22.62-22.62L223.37 256l-52.06-52.69a16 16 0 0 1 22.62-22.62L256 233.37l62.07-52.68a16 16 0 0 1 22.62 22.62L288.63 256z",
+      ...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__ */ React4.createElement(Svg4, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+export {
+  ArrowBackIcon,
+  CheckmarkIcon,
+  ChevronDownIcon,
+  CloseIcon
+};

package/dist/chunk-GBHQCAKW.js

@@ -0,0 +1,19 @@
+// src/components/select/checkmark-icon.tsx
+import React from "react";
+import Svg, { Polyline } from "react-native-svg";
+function CheckmarkIcon({ color, size }) {
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ React.createElement(
+    Polyline,
+    {
+      points: "1 9 7 14 15 4",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+
+export {
+  CheckmarkIcon
+};

package/dist/{chunk-R34CVLCX.js → chunk-GNJIET26.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-ORMNMNOK.js";
+} from "./chunk-NBRASCX4.js";
 
 // src/components/divider/divider.tsx
 import React from "react";