@xaui/native 0.0.17 → 0.0.19

package/dist/card/index.d.ts

@@ -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.js';
+import { E as ElevationLevel } from '../button.type-D8tzEBo7.js';
+
+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 };

package/dist/card/index.js

@@ -0,0 +1,336 @@
+import "../chunk-DXXNBF5P.js";
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/card/card.tsx
+import React from "react";
+import { Animated, Pressable, Text, View } from "react-native";
+
+// src/components/card/card.style.ts
+import { StyleSheet } from "react-native";
+var styles = 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
+import { useMemo } from "react";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
+var useCardContainerStyles = (themeColor, isBlurred) => {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    const safeThemeColor = 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: withOpacity(colorScheme.main, 0.05)
+    };
+  }, [isBlurred, theme, themeColor]);
+};
+var useCardElevationStyles = (elevation = 0) => {
+  const theme = useXUITheme();
+  return 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 useMemo(() => {
+    const safeThemeColor = getSafeThemeColor(themeColor);
+    const colorScheme = theme.colors[safeThemeColor];
+    return {
+      titleColor: colorScheme.main,
+      descriptionColor: theme.mode === "dark" ? withOpacity(theme.colors.foreground, 0.8) : withOpacity(theme.colors.foreground, 0.72)
+    };
+  }, [theme, themeColor]);
+};
+var useCardFooterStyles = (themeColor, isFooterBlurred) => {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    const safeThemeColor = 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" ? withOpacity(colorScheme.main, 0.4) : withOpacity(colorScheme.main, 0.18)
+    };
+  }, [isFooterBlurred, theme, themeColor]);
+};
+
+// src/components/card/card.tsx
+var CardContext = React.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 = React.useRef(new Animated.Value(1)).current;
+  const animatedOpacity = React.useRef(new Animated.Value(1)).current;
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const containerStyles = useCardContainerStyles(themeColor, isBlurred);
+  const elevationStyles = useCardElevationStyles(elevation);
+  const contextValue = React.useMemo(
+    () => ({
+      themeColor,
+      isFooterBlurred,
+      customAppearance
+    }),
+    [customAppearance, isFooterBlurred, themeColor]
+  );
+  const animateTo = React.useCallback(
+    (scale, opacity, duration) => {
+      if (disableAnimation) {
+        animatedScale.setValue(scale);
+        animatedOpacity.setValue(opacity);
+        return;
+      }
+      Animated.parallel([
+        Animated.timing(animatedScale, {
+          toValue: scale,
+          duration,
+          useNativeDriver: true
+        }),
+        Animated.timing(animatedOpacity, {
+          toValue: opacity,
+          duration,
+          useNativeDriver: true
+        })
+      ]).start();
+    },
+    [animatedOpacity, animatedScale, disableAnimation]
+  );
+  const handlePressIn = React.useCallback(
+    (event) => {
+      if (!isDisabled && isPressable) {
+        animateTo(0.985, 0.95, 110);
+      }
+      onPressIn?.(event);
+    },
+    [animateTo, isDisabled, isPressable, onPressIn]
+  );
+  const handlePressOut = React.useCallback(
+    (event) => {
+      if (!isDisabled && isPressable) {
+        animateTo(1, 1, 140);
+      }
+      onPressOut?.(event);
+    },
+    [animateTo, isDisabled, isPressable, onPressOut]
+  );
+  const handleHoverIn = React.useCallback(() => {
+    if (!isDisabled && isHoverable && !isPressable) {
+      animateTo(1.01, 1, 130);
+    }
+  }, [animateTo, isDisabled, isHoverable, isPressable]);
+  const handleHoverOut = React.useCallback(() => {
+    if (!isDisabled && isHoverable && !isPressable) {
+      animateTo(1, 1, 130);
+    }
+  }, [animateTo, isDisabled, isHoverable, isPressable]);
+  const cardContent = /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.card,
+        radiusStyles,
+        containerStyles,
+        elevationStyles,
+        fullWidth && styles.fullWidth,
+        isDisabled && styles.disabled,
+        {
+          transform: [{ scale: animatedScale }],
+          opacity: animatedOpacity
+        },
+        customAppearance?.container
+      ]
+    },
+    /* @__PURE__ */ React.createElement(CardContext.Provider, { value: contextValue }, children)
+  );
+  if (!isPressable) {
+    return cardContent;
+  }
+  return /* @__PURE__ */ React.createElement(
+    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 = React.useContext(CardContext);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.header,
+        cardContext.customAppearance?.header,
+        customAppearance?.container
+      ]
+    },
+    children
+  );
+};
+var CardBody = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = React.useContext(CardContext);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.body,
+        cardContext.customAppearance?.body,
+        customAppearance?.container
+      ]
+    },
+    children
+  );
+};
+var CardFooter = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = React.useContext(CardContext);
+  const footerStyles = useCardFooterStyles(
+    cardContext.themeColor,
+    cardContext.isFooterBlurred
+  );
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.footer,
+        footerStyles,
+        cardContext.customAppearance?.footer,
+        customAppearance?.container
+      ]
+    },
+    children
+  );
+};
+var CardTitle = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = React.useContext(CardContext);
+  const { titleColor } = useCardTextStyles(cardContext.themeColor);
+  return /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        styles.title,
+        { color: titleColor },
+        cardContext.customAppearance?.title,
+        customAppearance?.text
+      ]
+    },
+    children
+  );
+};
+var CardDescription = ({
+  children,
+  customAppearance
+}) => {
+  const cardContext = React.useContext(CardContext);
+  const { descriptionColor } = useCardTextStyles(cardContext.themeColor);
+  return /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        styles.description,
+        { color: descriptionColor },
+        cardContext.customAppearance?.description,
+        customAppearance?.text
+      ]
+    },
+    children
+  );
+};
+export {
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};