@xaui/native 0.0.11 → 0.0.13

package/README.md

@@ -57,6 +57,7 @@ function Banner() {
 ## Key components
 
 ### `Button`
+
 - Variants: `solid`, `outlined`, `flat`, `light`, `elevated`, `faded`
 - Sizes: `xs`, `sm`, `md`, `lg`
 - Radii: `none`, `sm`, `md`, `lg`, `full`
@@ -80,12 +81,18 @@ function Banner() {
 `useButtonStyles` exposes the internal calculations if you need to derive custom layouts (spacing, colors, shadows, spinner size).
 
 ### `ActivityIndicator`
+
 - Variants: `circular` (default size 40) and `linear` (custom height)
 - Draws from the theme colors (`primary`, `secondary`, etc.) and optionally renders a track with `showTrack`
 - `disableAnimation` is provided for snapshots or silent loading states
 
 ```tsx
-<ActivityIndicator variant="linear" themeColor="secondary" showTrack borderRadius={4} />
+<ActivityIndicator
+  variant="linear"
+  themeColor="secondary"
+  showTrack
+  borderRadius={4}
+/>
 ```
 
 ## Theme hooks & utilities

package/dist/accordion/index.cjs

@@ -41,7 +41,9 @@ var import_react_native9 = require("react-native");
 
 // src/components/accordion/accordion-context.ts
 var import_react = require("react");
-var AccordionContext = (0, import_react.createContext)(void 0);
+var AccordionContext = (0, import_react.createContext)(
+  void 0
+);
 var useAccordionContext = () => {
   const context = (0, import_react.useContext)(AccordionContext);
   if (!context) {
@@ -563,7 +565,10 @@ var Accordion = (props) => {
   return /* @__PURE__ */ import_react14.default.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: [containerStyles, customAppearance?.container] }, childrenArray.map((child, index) => {
     const isLast = index === childrenArray.length - 1;
     const showBottomDivider = (showDivider || variant === "bordered") && !isLast && variant !== "splitted";
-    const resolvedChildKey = isAccordionItem(child) ? getItemKey(child.props.itemKey ?? normalizeElementKey(child.key), index) : getItemKey(
+    const resolvedChildKey = isAccordionItem(child) ? getItemKey(
+      child.props.itemKey ?? normalizeElementKey(child.key),
+      index
+    ) : getItemKey(
       import_react14.default.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
       index
     );

package/dist/accordion/index.js

@@ -12,7 +12,9 @@ import { View as View2 } from "react-native";
 
 // src/components/accordion/accordion-context.ts
 import { createContext, useContext } from "react";
-var AccordionContext = createContext(void 0);
+var AccordionContext = createContext(
+  void 0
+);
 var useAccordionContext = () => {
   const context = useContext(AccordionContext);
   if (!context) {
@@ -424,7 +426,10 @@ var Accordion = (props) => {
   return /* @__PURE__ */ React4.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View2, { style: [containerStyles, customAppearance?.container] }, childrenArray.map((child, index) => {
     const isLast = index === childrenArray.length - 1;
     const showBottomDivider = (showDivider || variant === "bordered") && !isLast && variant !== "splitted";
-    const resolvedChildKey = isAccordionItem(child) ? getItemKey(child.props.itemKey ?? normalizeElementKey(child.key), index) : getItemKey(
+    const resolvedChildKey = isAccordionItem(child) ? getItemKey(
+      child.props.itemKey ?? normalizeElementKey(child.key),
+      index
+    ) : getItemKey(
       React4.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
       index
     );

package/dist/alert/index.cjs

@@ -35,8 +35,8 @@ __export(alert_exports, {
 module.exports = __toCommonJS(alert_exports);
 
 // src/components/alert/alert.tsx
-var import_react9 = __toESM(require("react"), 1);
-var import_react_native6 = require("react-native");
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
 
 // src/components/alert/alert.style.ts
@@ -277,171 +277,8 @@ function DangerIcon({ color, size }) {
   ));
 }
 
-// src/components/icon/icons/close.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
-var import_react_native_svg2 = __toESM(require("react-native-svg"), 1);
-
-// 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/close.tsx
-var AnimatedPath = import_react_native5.Animated.createAnimatedComponent(import_react_native_svg2.Path);
-var CloseIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = (0, import_react8.useRef)(new import_react_native5.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react8.useRef)(new import_react_native5.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react8.useMemo)(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  (0, import_react8.useEffect)(() => {
-    if (isAnimated) {
-      import_react_native5.Animated.parallel([
-        import_react_native5.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        import_react_native5.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_react8.default.createElement(
-    AnimatedPath,
-    {
-      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__ */ import_react8.default.createElement(
-    AnimatedPath,
-    {
-      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__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.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_react8.default.createElement(
-    AnimatedPath,
-    {
-      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__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
-    import_react_native_svg2.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement(
-    AnimatedPath,
-    {
-      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__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
-    import_react_native_svg2.Rect,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement(
-    AnimatedPath,
-    {
-      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__ */ import_react8.default.createElement(
-    AnimatedPath,
-    {
-      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__ */ import_react8.default.createElement(
-    AnimatedPath,
-    {
-      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__ */ import_react8.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
-
 // src/components/alert/alert.tsx
+var import_icons = require("@xaui/icons");
 var iconMap = {
   default: InfoIcon,
   primary: InfoIcon,
@@ -467,8 +304,8 @@ var Alert = ({
   onClose,
   onVisibleChange
 }) => {
-  const [internalVisible, setInternalVisible] = (0, import_react9.useState)(isVisible ?? true);
-  const [shouldRender, setShouldRender] = (0, import_react9.useState)(isVisible ?? true);
+  const [internalVisible, setInternalVisible] = (0, import_react8.useState)(isVisible ?? true);
+  const [shouldRender, setShouldRender] = (0, import_react8.useState)(isVisible ?? true);
   const isControlled = typeof isVisible === "boolean";
   const visible = isControlled ? isVisible : internalVisible;
   const opacity = (0, import_react_native_reanimated.useSharedValue)(1);
@@ -477,7 +314,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_react9.useCallback)(() => {
+  const finishClosing = (0, import_react8.useCallback)(() => {
     setShouldRender(false);
     if (!isControlled) {
       setInternalVisible(false);
@@ -485,7 +322,7 @@ var Alert = ({
     onVisibleChange?.(false);
     onClose?.();
   }, [isControlled, onClose, onVisibleChange]);
-  const handleClose = (0, import_react9.useCallback)(() => {
+  const handleClose = (0, import_react8.useCallback)(() => {
     if (!visible) return;
     opacity.value = (0, import_react_native_reanimated.withTiming)(0, { duration: 250 });
     scale.value = (0, import_react_native_reanimated.withTiming)(0.95, { duration: 250 }, (finished) => {
@@ -494,7 +331,7 @@ var Alert = ({
       }
     });
   }, [finishClosing, opacity, scale, visible]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (visible && !shouldRender) {
       setShouldRender(true);
       opacity.value = 0;
@@ -515,19 +352,19 @@ var Alert = ({
   const shouldShowClose = Boolean(closeButton || isClosable || onClose);
   const renderIcon = () => {
     if (hideIcon) return null;
-    if (icon && (0, import_react9.isValidElement)(icon)) {
-      return (0, import_react9.cloneElement)(icon, { color: iconColor, size: 22 });
+    if (icon && (0, import_react8.isValidElement)(icon)) {
+      return (0, import_react8.cloneElement)(icon, { color: iconColor, size: 22 });
     }
     if (icon) {
-      return /* @__PURE__ */ import_react9.default.createElement(import_react_native6.Text, { style: [styles.iconText, { color: iconColor }] }, icon);
+      return /* @__PURE__ */ import_react8.default.createElement(import_react_native5.Text, { style: [styles.iconText, { color: iconColor }] }, icon);
     }
-    return /* @__PURE__ */ import_react9.default.createElement(IconComponent, { color: iconColor, size: 22 });
+    return /* @__PURE__ */ import_react8.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_react9.default.createElement(
-        import_react_native6.Text,
+      return /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native5.Text,
         {
           style: [
             styles.description,
@@ -540,20 +377,20 @@ var Alert = ({
     }
     return content;
   };
-  const titleNode = (0, import_react9.useMemo)(() => {
+  const titleNode = (0, import_react8.useMemo)(() => {
     if (title === null || title === void 0) return null;
     if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ import_react9.default.createElement(import_react_native6.Text, { style: [styles.title, titleStyles, customAppearance?.title] }, title);
+      return /* @__PURE__ */ import_react8.default.createElement(import_react_native5.Text, { style: [styles.title, titleStyles, customAppearance?.title] }, title);
     }
     return title;
   }, [title, customAppearance?.title, titleStyles]);
   const descriptionNode = renderContentText(description);
   const childrenNode = renderContentText(children);
-  const closeButtonNode = (0, import_react9.useMemo)(() => {
+  const closeButtonNode = (0, import_react8.useMemo)(() => {
     if (!closeButton) return null;
-    if (!(0, import_react9.isValidElement)(closeButton)) return closeButton;
+    if (!(0, import_react8.isValidElement)(closeButton)) return closeButton;
     const existingOnPress = closeButton.props.onPress;
-    return (0, import_react9.cloneElement)(closeButton, {
+    return (0, import_react8.cloneElement)(closeButton, {
       onPress: (event) => {
         existingOnPress?.(event);
         handleClose();
@@ -561,7 +398,7 @@ var Alert = ({
     });
   }, [closeButton, handleClose]);
   if (!shouldRender) return null;
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(
     import_react_native_reanimated.default.View,
     {
       accessibilityRole: "alert",
@@ -573,17 +410,17 @@ var Alert = ({
         animatedStyle
       ]
     },
-    !hideIcon && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: [styles.iconWrapper, iconWrapperStyles] }, renderIcon()),
-    /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.extraContent }, childrenNode)),
-    shouldShowClose && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, null, closeButtonNode ?? /* @__PURE__ */ import_react9.default.createElement(
-      import_react_native6.Pressable,
+    !hideIcon && /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: [styles.iconWrapper, iconWrapperStyles] }, renderIcon()),
+    /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.extraContent }, childrenNode)),
+    shouldShowClose && /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, null, closeButtonNode ?? /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native5.Pressable,
       {
         accessibilityRole: "button",
         accessibilityLabel: "Close",
         onPress: handleClose,
         style: styles.closeButton
       },
-      /* @__PURE__ */ import_react9.default.createElement(CloseIcon, { size: 20, color: closeButtonColor })
+      /* @__PURE__ */ import_react8.default.createElement(import_icons.CloseIcon, { size: 20, color: closeButtonColor })
     ))
   );
 };

package/dist/alert/index.js

@@ -1,7 +1,6 @@
 import {
   Alert
-} from "../chunk-OFYJYQ2M.js";
-import "../chunk-SIXET7TJ.js";
+} from "../chunk-2T6FKPJW.js";
 import "../chunk-NBRASCX4.js";
 export {
   Alert