@xaui/native 0.0.16 → 0.0.18

package/dist/card/index.cjs

@@ -0,0 +1,429 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/card/index.ts
+var card_exports = {};
+__export(card_exports, {
+  Card: () => Card,
+  CardBody: () => CardBody,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle
+});
+module.exports = __toCommonJS(card_exports);
+
+// src/components/card/card.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = (0, import_react5.useMemo)(() => {
+    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;
+}
+
+// src/components/card/card.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
+  card: {
+    overflow: "hidden",
+    borderWidth: 1
+  },
+  fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  disabled: {
+    opacity: 0.55
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 10
+  },
+  body: {
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: 14
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    includeFontPadding: false
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    includeFontPadding: false
+  }
+});
+
+// src/components/card/card.hook.ts
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/card/card.hook.ts
+var useCardContainerStyles = (themeColor, isBlurred) => {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+    const colorScheme = theme.colors[safeThemeColor];
+    const isDefaultThemeColor = safeThemeColor === "default";
+    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF";
+    return {
+      backgroundColor: isBlurred ? theme.mode === "dark" ? "rgba(24, 24, 27, 0.82)" : "rgba(255, 255, 255, 0.82)" : isDefaultThemeColor ? defaultBackgroundColor : colorScheme.background,
+      borderColor: (0, import_core.withOpacity)(colorScheme.main, 0.05)
+    };
+  }, [isBlurred, theme, themeColor]);
+};
+var useCardElevationStyles = (elevation = 0) => {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...shadowStyles,
+      ...elevation > 0 ? { elevation } : {}
+    };
+  }, [elevation, theme]);
+};
+var useCardTextStyles = (themeColor) => {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+    const colorScheme = theme.colors[safeThemeColor];
+    return {
+      titleColor: colorScheme.main,
+      descriptionColor: theme.mode === "dark" ? (0, import_core.withOpacity)(theme.colors.foreground, 0.8) : (0, import_core.withOpacity)(theme.colors.foreground, 0.72)
+    };
+  }, [theme, themeColor]);
+};
+var useCardFooterStyles = (themeColor, isFooterBlurred) => {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+    const colorScheme = theme.colors[safeThemeColor];
+    if (!isFooterBlurred) {
+      return {};
+    }
+    return {
+      backgroundColor: theme.mode === "dark" ? "rgba(24, 24, 27, 0.68)" : "rgba(255, 255, 255, 0.72)",
+      borderTopWidth: theme.borderWidth.sm,
+      borderTopColor: theme.mode === "dark" ? (0, import_core.withOpacity)(colorScheme.main, 0.4) : (0, import_core.withOpacity)(colorScheme.main, 0.18)
+    };
+  }, [isFooterBlurred, theme, themeColor]);
+};
+
+// src/components/card/card.tsx
+var CardContext = import_react7.default.createContext({
+  themeColor: "default",
+  isFooterBlurred: false
+});
+var Card = ({
+  children,
+  themeColor = "default",
+  radius = "lg",
+  elevation = 0,
+  fullWidth = false,
+  isHoverable = false,
+  isPressable = false,
+  isBlurred = false,
+  isFooterBlurred = false,
+  isDisabled = false,
+  disableAnimation = false,
+  disableRipple: _disableRipple = false,
+  allowTextSelectionOnPress: _allowTextSelectionOnPress = false,
+  customAppearance,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut
+}) => {
+  const animatedScale = import_react7.default.useRef(new import_react_native5.Animated.Value(1)).current;
+  const animatedOpacity = import_react7.default.useRef(new import_react_native5.Animated.Value(1)).current;
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const containerStyles = useCardContainerStyles(themeColor, isBlurred);
+  const elevationStyles = useCardElevationStyles(elevation);
+  const contextValue = import_react7.default.useMemo(
+    () => ({
+      themeColor,
+      isFooterBlurred,
+      customAppearance
+    }),
+    [customAppearance, isFooterBlurred, themeColor]
+  );
+  const animateTo = import_react7.default.useCallback(
+    (scale, opacity, duration) => {
+      if (disableAnimation) {
+        animatedScale.setValue(scale);
+        animatedOpacity.setValue(opacity);
+        return;
+      }
+      import_react_native5.Animated.parallel([
+        import_react_native5.Animated.timing(animatedScale, {
+          toValue: scale,
+          duration,
+          useNativeDriver: true
+        }),
+        import_react_native5.Animated.timing(animatedOpacity, {
+          toValue: opacity,
+          duration,
+          useNativeDriver: true
+        })
+      ]).start();
+    },
+    [animatedOpacity, animatedScale, disableAnimation]
+  );
+  const handlePressIn = import_react7.default.useCallback(
+    (event) => {
+      if (!isDisabled && isPressable) {
+        animateTo(0.985, 0.95, 110);
+      }
+      onPressIn?.(event);
+    },
+    [animateTo, isDisabled, isPressable, onPressIn]
+  );
+  const handlePressOut = import_react7.default.useCallback(
+    (event) => {
+      if (!isDisabled && isPressable) {
+        animateTo(1, 1, 140);
+      }
+      onPressOut?.(event);
+    },
+    [animateTo, isDisabled, isPressable, onPressOut]
+  );
+  const handleHoverIn = import_react7.default.useCallback(() => {
+    if (!isDisabled && isHoverable && !isPressable) {
+      animateTo(1.01, 1, 130);
+    }
+  }, [animateTo, isDisabled, isHoverable, isPressable]);
+  const handleHoverOut = import_react7.default.useCallback(() => {
+    if (!isDisabled && isHoverable && !isPressable) {
+      animateTo(1, 1, 130);
+    }
+  }, [animateTo, isDisabled, isHoverable, isPressable]);
+  const cardContent = /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.Animated.View,
+    {
+      style: [
+        styles.card,
+        radiusStyles,
+        containerStyles,
+        elevationStyles,
+        fullWidth && styles.fullWidth,
+        isDisabled && styles.disabled,
+        {
+          transform: [{ scale: animatedScale }],
+          opacity: animatedOpacity
+        },
+        customAppearance?.container
+      ]
+    },
+    /* @__PURE__ */ import_react7.default.createElement(CardContext.Provider, { value: contextValue }, children)
+  );
+  if (!isPressable) {
+    return cardContent;
+  }
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.Pressable,
+    {
+      onPress: isDisabled ? void 0 : onPress,
+      onLongPress: isDisabled ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onHoverIn: isHoverable ? handleHoverIn : void 0,
+      onHoverOut: isHoverable ? handleHoverOut : void 0,
+      disabled: isDisabled
+    },
+    cardContent
+  );
+};
+var CardHeader = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = import_react7.default.useContext(CardContext);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        styles.header,
+        cardContext.customAppearance?.header,
+        customAppearance?.container
+      ]
+    },
+    children
+  );
+};
+var CardBody = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = import_react7.default.useContext(CardContext);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        styles.body,
+        cardContext.customAppearance?.body,
+        customAppearance?.container
+      ]
+    },
+    children
+  );
+};
+var CardFooter = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = import_react7.default.useContext(CardContext);
+  const footerStyles = useCardFooterStyles(
+    cardContext.themeColor,
+    cardContext.isFooterBlurred
+  );
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        styles.footer,
+        footerStyles,
+        cardContext.customAppearance?.footer,
+        customAppearance?.container
+      ]
+    },
+    children
+  );
+};
+var CardTitle = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = import_react7.default.useContext(CardContext);
+  const { titleColor } = useCardTextStyles(cardContext.themeColor);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.Text,
+    {
+      style: [
+        styles.title,
+        { color: titleColor },
+        cardContext.customAppearance?.title,
+        customAppearance?.text
+      ]
+    },
+    children
+  );
+};
+var CardDescription = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = import_react7.default.useContext(CardContext);
+  const { descriptionColor } = useCardTextStyles(cardContext.themeColor);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.Text,
+    {
+      style: [
+        styles.description,
+        { color: descriptionColor },
+        cardContext.customAppearance?.description,
+        customAppearance?.text
+      ]
+    },
+    children
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+});

package/dist/card/index.d.cts

@@ -0,0 +1,186 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.cjs';
+import { E as ElevationLevel } from '../button.type-ikaWzhIg.cjs';
+
+type CardCustomAppearance = {
+    /**
+     * Custom styles for the card container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the card header section
+     */
+    header?: ViewStyle;
+    /**
+     * Custom styles for the card body section
+     */
+    body?: ViewStyle;
+    /**
+     * Custom styles for the card footer section
+     */
+    footer?: ViewStyle;
+    /**
+     * Custom styles for title text
+     */
+    title?: TextStyle;
+    /**
+     * Custom styles for description text
+     */
+    description?: TextStyle;
+};
+type CardProps = {
+    /**
+     * Content to render inside the card.
+     */
+    children: ReactNode;
+    /**
+     * The theme color of the card.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Card corner radius.
+     * @default 'lg'
+     */
+    radius?: Radius;
+    /**
+     * Android elevation level from 0 to 4.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Whether the card should take full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether hover interactions are enabled.
+     * @default false
+     */
+    isHoverable?: boolean;
+    /**
+     * Whether press interactions are enabled.
+     * @default false
+     */
+    isPressable?: boolean;
+    /**
+     * Whether the whole card should be blurred.
+     * @default false
+     */
+    isBlurred?: boolean;
+    /**
+     * Whether the footer section should be blurred.
+     * @default false
+     */
+    isFooterBlurred?: boolean;
+    /**
+     * Whether the card is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Disable all card animations.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Disable press ripple animation.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Allow text selection while pressing a pressable card.
+     * @default false
+     */
+    allowTextSelectionOnPress?: boolean;
+    /**
+     * Custom appearance styles for card parts.
+     */
+    customAppearance?: CardCustomAppearance;
+    /**
+     * Callback fired when card is pressed.
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when card is long pressed.
+     */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when card press starts.
+     */
+    onPressIn?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when card press ends.
+     */
+    onPressOut?: (event: GestureResponderEvent) => void;
+};
+type CardHeaderProps = {
+    /**
+     * Header content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the header container.
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+type CardBodyProps = {
+    /**
+     * Body content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the body container.
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+type CardFooterProps = {
+    /**
+     * Footer content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the footer container.
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+type CardTitleProps = {
+    /**
+     * Title content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the title text.
+     */
+    customAppearance?: {
+        text?: TextStyle;
+    };
+};
+type CardDescriptionProps = {
+    /**
+     * Description content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the description text.
+     */
+    customAppearance?: {
+        text?: TextStyle;
+    };
+};
+
+declare const Card: React.FC<CardProps>;
+declare const CardHeader: React.FC<CardHeaderProps>;
+declare const CardBody: React.FC<CardBodyProps>;
+declare const CardFooter: React.FC<CardFooterProps>;
+declare const CardTitle: React.FC<CardTitleProps>;
+declare const CardDescription: React.FC<CardDescriptionProps>;
+
+export { Card, CardBody, type CardBodyProps, type CardCustomAppearance, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps };