@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/avatar/index.js

@@ -1,281 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/avatar/avatar.tsx
-import React from "react";
-import { Image, Text, View } from "react-native";
-
-// src/components/avatar/avatar.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    overflow: "hidden",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  image: {
-    width: "100%",
-    height: "100%"
-  },
-  fallback: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  group: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  grid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "flex-start"
-  }
-});
-
-// src/components/avatar/avatar.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
-var sizeMap = {
-  xs: 24,
-  sm: 32,
-  md: 40,
-  lg: 48
-};
-function resolveAvatarSize(size) {
-  if (typeof size === "number") {
-    return size;
-  }
-  return sizeMap[size];
-}
-function useAvatarSizeStyles(size) {
-  const theme = useXUITheme();
-  const resolvedSize = useMemo(() => resolveAvatarSize(size), [size]);
-  const fontSize = useMemo(() => {
-    if (typeof size === "number") {
-      return Math.max(10, Math.round(size * 0.4));
-    }
-    return theme.fontSizes[size];
-  }, [size, theme]);
-  return {
-    size: resolvedSize,
-    fontSize
-  };
-}
-function useAvatarRadiusStyles(radius, size) {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    if (radius === "full") {
-      return { borderRadius: size / 2 };
-    }
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return { borderRadius: radii[radius] };
-  }, [radius, size, theme]);
-}
-function useAvatarColors(themeColor, isDisabled) {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const backgroundColor = useMemo(() => {
-    if (isDisabled) {
-      return theme.colors.background;
-    }
-    return colorScheme.container;
-  }, [colorScheme.container, isDisabled, theme.colors.background]);
-  const textColor = useMemo(() => {
-    if (safeThemeColor === "default") {
-      return theme.colors.foreground;
-    }
-    return colorScheme.onContainer;
-  }, [safeThemeColor, colorScheme.onContainer, theme.colors.foreground]);
-  return {
-    backgroundColor,
-    textColor,
-    borderColor: colorScheme.main
-  };
-}
-function getDefaultInitials(name) {
-  const trimmed = name.trim();
-  if (!trimmed) {
-    return "";
-  }
-  const parts = trimmed.split(/\s+/);
-  if (parts.length === 1) {
-    return parts[0].slice(0, 2).toUpperCase();
-  }
-  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
-}
-
-// src/components/avatar/avatar.tsx
-var Avatar = ({
-  src,
-  name,
-  icon,
-  fallback,
-  size = "md",
-  radius = "full",
-  themeColor = "default",
-  isBordered = false,
-  isDisabled = false,
-  showFallback = false,
-  getInitials,
-  customAppearance
-}) => {
-  const [isError, setIsError] = React.useState(false);
-  const { size: resolvedSize, fontSize } = useAvatarSizeStyles(size);
-  const radiusStyles = useAvatarRadiusStyles(radius, resolvedSize);
-  const { backgroundColor, textColor, borderColor } = useAvatarColors(
-    themeColor,
-    isDisabled
-  );
-  const accessibilityLabel = name ?? "Avatar";
-  const shouldShowFallback = showFallback || !src || isError;
-  const initials = name ? (getInitials ?? getDefaultInitials)(name) : "";
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.container,
-        {
-          width: resolvedSize,
-          height: resolvedSize,
-          backgroundColor,
-          opacity: isDisabled ? 0.6 : 1,
-          borderWidth: isBordered ? 1 : 0,
-          borderColor: isBordered ? borderColor : "transparent"
-        },
-        radiusStyles,
-        customAppearance?.container
-      ],
-      accessible: true,
-      accessibilityRole: "image",
-      accessibilityLabel
-    },
-    !shouldShowFallback && src ? /* @__PURE__ */ React.createElement(
-      Image,
-      {
-        source: { uri: src },
-        style: [styles.image, radiusStyles, customAppearance?.image],
-        accessibilityLabel,
-        onError: () => setIsError(true)
-      }
-    ) : /* @__PURE__ */ React.createElement(View, { style: [styles.fallback, { width: "100%", height: "100%" }] }, fallback ?? icon ?? /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        style: [
-          {
-            color: textColor,
-            fontSize,
-            fontWeight: "600"
-          },
-          customAppearance?.text
-        ]
-      },
-      initials
-    ))
-  );
-};
-
-// src/components/avatar/avatar-group.tsx
-import React2 from "react";
-import { Text as Text2, View as View2 } from "react-native";
-var AvatarGroup = ({
-  children,
-  max,
-  total,
-  size = "md",
-  radius = "full",
-  themeColor = "default",
-  isBordered = false,
-  isDisabled = false,
-  isGrid = false,
-  renderCount,
-  customAppearance
-}) => {
-  const theme = useXUITheme();
-  const resolvedSize = resolveAvatarSize(size);
-  const spacing = theme.spacing.xs;
-  const overlap = Math.round(resolvedSize * 0.28);
-  const allChildren = React2.Children.toArray(children).filter(
-    (child) => React2.isValidElement(child)
-  );
-  const totalCount = total ?? allChildren.length;
-  const maxCount = max ?? totalCount;
-  const visibleChildren = allChildren.slice(0, maxCount);
-  const remaining = Math.max(0, totalCount - maxCount);
-  const enhanced = visibleChildren.map((child, index) => {
-    const childProps = child.props;
-    return /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        key: child.key ?? index,
-        style: isGrid ? { marginRight: spacing, marginBottom: spacing } : { marginLeft: index === 0 ? 0 : -overlap, zIndex: index }
-      },
-      React2.cloneElement(child, {
-        size: childProps.size ?? size,
-        radius: childProps.radius ?? radius,
-        themeColor: childProps.themeColor ?? themeColor,
-        isBordered: childProps.isBordered ?? isBordered,
-        isDisabled: childProps.isDisabled ?? isDisabled
-      })
-    );
-  });
-  const countNode = remaining > 0 ? renderCount?.(remaining) ?? /* @__PURE__ */ React2.createElement(
-    Avatar,
-    {
-      name: `+${remaining}`,
-      showFallback: true,
-      size,
-      radius,
-      themeColor,
-      isBordered,
-      isDisabled,
-      fallback: /* @__PURE__ */ React2.createElement(
-        Text2,
-        {
-          style: {
-            color: theme.colors.foreground,
-            fontSize: Math.max(10, Math.round(resolvedSize * 0.35)),
-            fontWeight: "600"
-          }
-        },
-        "+",
-        remaining
-      )
-    }
-  ) : null;
-  if (countNode) {
-    enhanced.push(
-      /* @__PURE__ */ React2.createElement(
-        View2,
-        {
-          key: "avatar-count",
-          style: isGrid ? { marginRight: spacing, marginBottom: spacing } : {
-            marginLeft: enhanced.length === 0 ? 0 : -overlap,
-            zIndex: enhanced.length
-          }
-        },
-        countNode
-      )
-    );
-  }
-  return /* @__PURE__ */ React2.createElement(
-    View2,
-    {
-      style: [isGrid ? styles.grid : styles.group, customAppearance?.container],
-      accessible: true
-    },
-    enhanced
-  );
-};
-export {
-  Avatar,
-  AvatarGroup
-};

package/dist/badge/index.cjs

@@ -1,197 +0,0 @@
-"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; }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/badge/badge.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/badge/badge.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    position: "relative",
-    alignSelf: "flex-start"
-  },
-  badge: {
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  text: {
-    textAlign: "center",
-    fontWeight: "700",
-    includeFontPadding: false,
-    textAlignVertical: "center"
-  }
-});
-
-// src/components/badge/badge.hook.ts
-
-var _core = require('@xaui/core');
-var sizeMap = {
-  sm: { height: 16, minWidth: 16, dot: 8 },
-  md: { height: 20, minWidth: 20, dot: 10 },
-  lg: { height: 24, minWidth: 24, dot: 12 }
-};
-var fontSizeMap = {
-  sm: 9,
-  md: 10,
-  lg: 12
-};
-function useBadgeSizeStyles(size, isDot, isOneChar) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    const { height, minWidth, dot } = sizeMap[size];
-    const fontSize = fontSizeMap[size];
-    if (isDot) {
-      return {
-        height: dot,
-        minWidth: dot,
-        paddingHorizontal: 0,
-        fontSize
-      };
-    }
-    if (isOneChar) {
-      return {
-        height,
-        minWidth: height,
-        paddingHorizontal: 0,
-        fontSize
-      };
-    }
-    const paddingHorizontal = size === "sm" ? theme.spacing.xs : theme.spacing.sm;
-    return {
-      height,
-      minWidth,
-      paddingHorizontal,
-      fontSize
-    };
-  }, [isDot, isOneChar, size, theme]);
-}
-function useBadgeVariantStyles(themeColor, variant) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return _react.useMemo.call(void 0, () => {
-    if (variant === "flat") {
-      return {
-        backgroundColor: colorScheme.container,
-        color: colorScheme.onContainer
-      };
-    }
-    if (variant === "faded") {
-      return {
-        backgroundColor: _core.withOpacity.call(void 0, colorScheme.container, 0.7),
-        color: colorScheme.onContainer
-      };
-    }
-    if (variant === "shadow") {
-      return {
-        backgroundColor: colorScheme.main,
-        color: colorScheme.onMain,
-        shadow: theme.shadows.sm
-      };
-    }
-    return {
-      backgroundColor: colorScheme.main,
-      color: colorScheme.onMain
-    };
-  }, [colorScheme, theme, variant]);
-}
-function useBadgeRadiusStyles(radius, height) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    if (radius === "full") {
-      return { borderRadius: height / 2 };
-    }
-    return { borderRadius: theme.borderRadius[radius] };
-  }, [height, radius, theme.borderRadius]);
-}
-function useBadgePlacementStyles(placement, height) {
-  return _react.useMemo.call(void 0, () => {
-    const offset = Math.round(height * 0.3);
-    switch (placement) {
-      case "top-left":
-        return { top: -offset, left: -offset };
-      case "bottom-right":
-        return { bottom: -offset, right: -offset };
-      case "bottom-left":
-        return { bottom: -offset, left: -offset };
-      case "top-right":
-      default:
-        return { top: -offset, right: -offset };
-    }
-  }, [height, placement]);
-}
-
-// src/components/badge/badge.tsx
-var Badge = ({
-  children,
-  content,
-  themeColor = "primary",
-  variant = "solid",
-  size = "md",
-  radius = "full",
-  placement = "top-right",
-  showOutline = true,
-  disableOutline = false,
-  isInvisible = false,
-  isDot = false,
-  isOneChar = false,
-  disableAnimation = false,
-  customAppearance
-}) => {
-  const shouldRender = !isInvisible && (isDot || content !== void 0);
-  if (!shouldRender && !children) {
-    return null;
-  }
-  const forceOneChar = isOneChar;
-  const sizeStyles = useBadgeSizeStyles(size, isDot, forceOneChar);
-  const variantStyles = useBadgeVariantStyles(themeColor, variant);
-  const radiusStyles = useBadgeRadiusStyles(radius, sizeStyles.height);
-  const placementStyles = useBadgePlacementStyles(placement, sizeStyles.height);
-  const outlineEnabled = disableOutline ? false : showOutline;
-  const outlineStyles = outlineEnabled ? { borderWidth: 1, borderColor: "#FFFFFF" } : { borderWidth: 0, borderColor: "transparent" };
-  const badgeContent = isDot ? null : content;
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _ => _.container])] }, children, shouldRender && /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.badge,
-        {
-          minWidth: sizeStyles.minWidth,
-          height: sizeStyles.height,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor: variantStyles.backgroundColor,
-          opacity: disableAnimation ? 1 : 1
-        },
-        radiusStyles,
-        placementStyles,
-        outlineStyles,
-        variantStyles.shadow,
-        _optionalChain([customAppearance, 'optionalAccess', _2 => _2.badge])
-      ],
-      accessible: true,
-      accessibilityRole: "text"
-    },
-    badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Text,
-      {
-        style: [
-          styles.text,
-          {
-            fontSize: sizeStyles.fontSize,
-            color: variantStyles.color
-          },
-          _optionalChain([customAppearance, 'optionalAccess', _3 => _3.text])
-        ]
-      },
-      badgeContent
-    )
-  ));
-};
-
-
-exports.Badge = Badge;

package/dist/badge/index.d.cts

@@ -1,94 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor, Radius } from '@xaui/core/types';
-
-type BadgeVariant = 'solid' | 'flat' | 'faded' | 'shadow';
-type BadgeSize = 'sm' | 'md' | 'lg';
-type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-type BadgeCustomAppearance = {
-    /**
-     * Custom styles for the container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the badge
-     */
-    badge?: ViewStyle;
-    /**
-     * Custom styles for the text
-     */
-    text?: TextStyle;
-};
-type BadgeProps = {
-    /**
-     * Content rendered inside the badge.
-     */
-    content?: ReactNode;
-    /**
-     * The badge color.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The badge variant.
-     * @default 'solid'
-     */
-    variant?: BadgeVariant;
-    /**
-     * The badge size.
-     * @default 'md'
-     */
-    size?: BadgeSize;
-    /**
-     * The badge radius.
-     * @default 'full'
-     */
-    radius?: Radius;
-    /**
-     * Placement relative to children.
-     * @default 'top-right'
-     */
-    placement?: BadgePlacement;
-    /**
-     * Show outline around badge.
-     * @default true
-     */
-    showOutline?: boolean;
-    /**
-     * Disable outline around badge.
-     * @default false
-     */
-    disableOutline?: boolean;
-    /**
-     * Hide the badge.
-     * @default false
-     */
-    isInvisible?: boolean;
-    /**
-     * Render dot style badge.
-     * @default false
-     */
-    isDot?: boolean;
-    /**
-     * Render badge as one character size.
-     * @default false
-     */
-    isOneChar?: boolean;
-    /**
-     * Disable badge animation.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * Custom appearance styles for badge parts
-     */
-    customAppearance?: BadgeCustomAppearance;
-    /**
-     * Wrapped component.
-     */
-    children?: ReactNode;
-};
-
-declare const Badge: React.FC<BadgeProps>;
-
-export { Badge, type BadgeProps };

package/dist/badge/index.d.ts

@@ -1,94 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor, Radius } from '@xaui/core/types';
-
-type BadgeVariant = 'solid' | 'flat' | 'faded' | 'shadow';
-type BadgeSize = 'sm' | 'md' | 'lg';
-type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-type BadgeCustomAppearance = {
-    /**
-     * Custom styles for the container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the badge
-     */
-    badge?: ViewStyle;
-    /**
-     * Custom styles for the text
-     */
-    text?: TextStyle;
-};
-type BadgeProps = {
-    /**
-     * Content rendered inside the badge.
-     */
-    content?: ReactNode;
-    /**
-     * The badge color.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The badge variant.
-     * @default 'solid'
-     */
-    variant?: BadgeVariant;
-    /**
-     * The badge size.
-     * @default 'md'
-     */
-    size?: BadgeSize;
-    /**
-     * The badge radius.
-     * @default 'full'
-     */
-    radius?: Radius;
-    /**
-     * Placement relative to children.
-     * @default 'top-right'
-     */
-    placement?: BadgePlacement;
-    /**
-     * Show outline around badge.
-     * @default true
-     */
-    showOutline?: boolean;
-    /**
-     * Disable outline around badge.
-     * @default false
-     */
-    disableOutline?: boolean;
-    /**
-     * Hide the badge.
-     * @default false
-     */
-    isInvisible?: boolean;
-    /**
-     * Render dot style badge.
-     * @default false
-     */
-    isDot?: boolean;
-    /**
-     * Render badge as one character size.
-     * @default false
-     */
-    isOneChar?: boolean;
-    /**
-     * Disable badge animation.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * Custom appearance styles for badge parts
-     */
-    customAppearance?: BadgeCustomAppearance;
-    /**
-     * Wrapped component.
-     */
-    children?: ReactNode;
-};
-
-declare const Badge: React.FC<BadgeProps>;
-
-export { Badge, type BadgeProps };