@xaui/native 0.0.26 → 0.0.28

package/dist/chunk-KTLGDLCB.cjs

@@ -0,0 +1,287 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkQMYWIWSXcjs = require('./chunk-QMYWIWSX.cjs');
+
+
+var _chunkOQ2BLOOGcjs = require('./chunk-OQ2BLOOG.cjs');
+
+// src/components/fab/fab.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
+
+// src/components/fab/fab.style.ts
+
+var styles = _reactnative.StyleSheet.create({
+  container: {
+    alignSelf: "flex-start"
+  },
+  fab: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  contentContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12
+  },
+  label: {
+    fontWeight: "500"
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/fab/fab.hook.ts
+
+var _core = require('@xaui/core');
+function useFabSizeStyles(size) {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const sizeStyles = _react.useMemo.call(void 0, () => {
+    const sizes = {
+      sm: {
+        width: 40,
+        height: 40,
+        borderRadius: theme.borderRadius.lg,
+        iconSize: 24,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        width: 56,
+        height: 56,
+        borderRadius: theme.borderRadius.xl,
+        iconSize: 24,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        width: 96,
+        height: 96,
+        borderRadius: theme.borderRadius["2xl"],
+        iconSize: 36,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  const extendedSizeStyles = _react.useMemo.call(void 0, () => {
+    const sizes = {
+      sm: {
+        height: 40,
+        borderRadius: theme.borderRadius.lg,
+        paddingHorizontal: theme.spacing.md,
+        iconSize: 20,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        height: 56,
+        borderRadius: theme.borderRadius.xl,
+        paddingHorizontal: theme.spacing.lg,
+        iconSize: 24,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        height: 80,
+        borderRadius: theme.borderRadius["2xl"],
+        paddingHorizontal: theme.spacing.xl,
+        iconSize: 28,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  return { sizeStyles, extendedSizeStyles };
+}
+function useFabVariantStyles(themeColor, variant, elevation = 0) {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = _react.useMemo.call(void 0, () => {
+    const variantMap = {
+      solid: {
+        backgroundColor: colorScheme.main,
+        borderWidth: 0
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: 0
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: theme.borderWidth.md,
+        borderColor: colorScheme.main
+      }
+    };
+    const baseStyle = variantMap[variant];
+    const shouldApplyElevation = variant !== "outlined";
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...baseStyle,
+      ...shouldApplyElevation ? shadowStyles : {},
+      ...shouldApplyElevation && elevation > 0 ? { elevation } : {}
+    };
+  }, [variant, colorScheme, theme, elevation]);
+  return variantStyles;
+}
+function useFabIconColor(themeColor, variant) {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const iconColor = _react.useMemo.call(void 0, () => {
+    if (variant === "solid") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  return { iconColor };
+}
+function useFabRadiusValue(radius, fallback) {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  return _react.useMemo.call(void 0, () => {
+    if (!radius) return fallback;
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return radiusMap[radius];
+  }, [fallback, radius, theme]);
+}
+
+// src/components/fab/fab.animation.ts
+
+var runFabPressInAnimation = (animatedScale, animatedOpacity) => {
+  _reactnative.Animated.parallel([
+    _reactnative.Animated.spring(animatedScale, {
+      toValue: 0.92,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    _reactnative.Animated.timing(animatedOpacity, {
+      toValue: 0.85,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runFabPressOutAnimation = (animatedScale, animatedOpacity) => {
+  _reactnative.Animated.parallel([
+    _reactnative.Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    _reactnative.Animated.timing(animatedOpacity, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+
+// src/components/fab/fab.tsx
+var Fab = ({
+  icon,
+  label,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius,
+  isDisabled = false,
+  isLoading = false,
+  elevation = 0,
+  customAppearance,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut
+}) => {
+  const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
+  const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
+  const { sizeStyles, extendedSizeStyles } = useFabSizeStyles(size);
+  const variantStyles = useFabVariantStyles(themeColor, variant, elevation);
+  const { iconColor } = useFabIconColor(themeColor, variant);
+  const isExtended = !!label;
+  const resolvedRadius = useFabRadiusValue(
+    radius,
+    isExtended ? extendedSizeStyles.borderRadius : sizeStyles.borderRadius
+  );
+  const handlePressIn = (event) => {
+    if (!isDisabled && !isLoading) {
+      runFabPressInAnimation(animatedScale, animatedOpacity);
+    }
+    _optionalChain([onPressIn, 'optionalCall', _ => _(event)]);
+  };
+  const handlePressOut = (event) => {
+    if (!isDisabled && !isLoading) {
+      runFabPressOutAnimation(animatedScale, animatedOpacity);
+    }
+    _optionalChain([onPressOut, 'optionalCall', _2 => _2(event)]);
+  };
+  const fabDimensionStyles = isExtended ? {
+    height: extendedSizeStyles.height,
+    borderRadius: resolvedRadius,
+    paddingHorizontal: extendedSizeStyles.paddingHorizontal
+  } : {
+    width: sizeStyles.width,
+    height: sizeStyles.height,
+    borderRadius: resolvedRadius
+  };
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _3 => _3.container])] }, /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Pressable,
+    {
+      onPress: isDisabled || isLoading ? void 0 : onPress,
+      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled || isLoading
+    },
+    /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Animated.View,
+      {
+        style: [
+          styles.fab,
+          fabDimensionStyles,
+          variantStyles,
+          isDisabled && styles.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          _optionalChain([customAppearance, 'optionalAccess', _4 => _4.fab])
+        ]
+      },
+      isLoading ? /* @__PURE__ */ _react2.default.createElement(
+        _chunkQMYWIWSXcjs.ActivityIndicator,
+        {
+          variant: "circular",
+          themeColor: variant === "solid" ? void 0 : themeColor,
+          color: variant === "solid" ? iconColor : void 0,
+          size: isExtended ? extendedSizeStyles.iconSize : sizeStyles.iconSize
+        }
+      ) : /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.contentContainer }, icon, isExtended && /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.Text,
+        {
+          style: [
+            styles.label,
+            {
+              fontSize: isExtended ? extendedSizeStyles.fontSize : sizeStyles.fontSize,
+              color: iconColor
+            }
+          ]
+        },
+        label
+      ))
+    )
+  ));
+};
+
+
+
+exports.Fab = Fab;

package/dist/{chunk-GHCVNQET.js → chunk-LTKYHG5V.js}

@@ -1,9 +1,3 @@
-// src/core/theme-context.tsx
-import React3, { createContext as createContext2 } from "react";
-import { useColorScheme } from "react-native";
-import { defaultTheme } from "@xaui/core/theme";
-import { colors } from "@xaui/core/palette";
-
 // src/core/portal/portal.tsx
 import { useContext, useEffect, useLayoutEffect, useRef } from "react";
 
@@ -57,6 +51,10 @@ var PortalHost = ({ children }) => {
 };
 
 // src/core/theme-context.tsx
+import React3, { createContext as createContext2 } from "react";
+import { useColorScheme } from "react-native";
+import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
 var XUIThemeContext = createContext2(null);
 function XUIProvider({
   children,
@@ -128,9 +126,6 @@ function useBorderRadiusStyles(radius) {
   return borderRadius;
 }
 
-// src/core/index.ts
-import { defaultDarkTheme, defaultTheme as defaultTheme2 } from "@xaui/core/theme";
-
 export {
   Portal,
   PortalHost,
@@ -139,7 +134,5 @@ export {
   useXUITheme,
   useXUIColors,
   useXUIPalette,
-  useBorderRadiusStyles,
-  defaultDarkTheme,
-  defaultTheme2 as defaultTheme
+  useBorderRadiusStyles
 };

package/dist/{chunk-ULJSCNPE.js → chunk-LUBWRVI2.js}

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

package/dist/chunk-OQ2BLOOG.cjs

@@ -0,0 +1,138 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/core/portal/portal.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// src/core/portal/portal-context.ts
+
+var PortalContext = _react.createContext.call(void 0, null);
+
+// src/core/portal/portal.tsx
+var portalId = 0;
+var Portal = ({ children }) => {
+  const context = _react.useContext.call(void 0, PortalContext);
+  const keyRef = _react.useRef.call(void 0, `portal-${++portalId}`);
+  _react.useLayoutEffect.call(void 0, () => {
+    if (!context) return;
+    context.addPortal(keyRef.current, children);
+  }, [children, context]);
+  _react.useEffect.call(void 0, () => {
+    if (!context) return;
+    const key = keyRef.current;
+    return () => {
+      context.removePortal(key);
+    };
+  }, [context]);
+  return null;
+};
+
+// src/core/portal/portal-host.tsx
+
+var _reactnative = require('react-native');
+var hostStyles = _reactnative.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+var PortalHost = ({ children }) => {
+  const portals = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const [, forceUpdate] = _react.useState.call(void 0, 0);
+  const addPortal = _react.useCallback.call(void 0, (key, element) => {
+    portals.current.set(key, element);
+    forceUpdate((n) => n + 1);
+  }, []);
+  const removePortal = _react.useCallback.call(void 0, (key) => {
+    portals.current.delete(key);
+    forceUpdate((n) => n + 1);
+  }, []);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({ addPortal, removePortal }),
+    [addPortal, removePortal]
+  );
+  return /* @__PURE__ */ _react2.default.createElement(PortalContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: hostStyles.container }, children, Array.from(portals.current.entries()).map(([key, element]) => /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, { key }, element))));
+};
+
+// src/core/theme-context.tsx
+
+
+var _theme = require('@xaui/core/theme');
+var _palette = require('@xaui/core/palette');
+var XUIThemeContext = _react.createContext.call(void 0, null);
+function XUIProvider({
+  children,
+  theme: lightTheme,
+  darkTheme
+}) {
+  const colorScheme = _nullishCoalesce(_reactnative.useColorScheme.call(void 0, ), () => ( "light"));
+  const theme = _react2.default.useMemo(() => {
+    if (!darkTheme && !lightTheme) return _theme.defaultTheme;
+    const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
+    const mode = colorScheme === "dark" && darkTheme ? "dark" : "light";
+    if (!activeTheme) return _theme.defaultTheme;
+    return {
+      ..._theme.defaultTheme,
+      ...activeTheme,
+      mode,
+      colors: {
+        ..._theme.defaultTheme.colors,
+        ...activeTheme.colors
+      },
+      fontFamilies: {
+        ..._theme.defaultTheme.fontFamilies,
+        ...activeTheme.fontFamilies
+      },
+      fontSizes: {
+        ..._theme.defaultTheme.fontSizes,
+        ...activeTheme.fontSizes
+      },
+      palette: _palette.colors
+    };
+  }, [lightTheme, darkTheme, colorScheme]);
+  return /* @__PURE__ */ _react2.default.createElement(XUIThemeContext.Provider, { value: theme }, /* @__PURE__ */ _react2.default.createElement(PortalHost, null, children));
+}
+
+// src/core/theme-hooks.ts
+
+
+function useColorMode() {
+  const nativeScheme = _reactnative.useColorScheme.call(void 0, );
+  return _nullishCoalesce(nativeScheme, () => ( "light"));
+}
+function useXUITheme() {
+  const theme = _react.useContext.call(void 0, XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useXUIColors() {
+  const theme = useXUITheme();
+  return theme.colors;
+}
+function useXUIPalette() {
+  const theme = useXUITheme();
+  return _react.useMemo.call(void 0, () => theme.palette, [theme]);
+}
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = _react.useMemo.call(void 0, () => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
+
+
+
+
+
+
+
+
+
+
+exports.Portal = Portal; exports.PortalHost = PortalHost; exports.XUIProvider = XUIProvider; exports.useColorMode = useColorMode; exports.useXUITheme = useXUITheme; exports.useXUIColors = useXUIColors; exports.useXUIPalette = useXUIPalette; exports.useBorderRadiusStyles = useBorderRadiusStyles;