@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/avatar/index.cjs

@@ -1,281 +0,0 @@
-"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(); } } 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/avatar/avatar.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/avatar/avatar.style.ts
-
-var styles = _reactnative.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
-
-var _core = require('@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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const resolvedSize = _react.useMemo.call(void 0, () => resolveAvatarSize(size), [size]);
-  const fontSize = _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const backgroundColor = _react.useMemo.call(void 0, () => {
-    if (isDisabled) {
-      return theme.colors.background;
-    }
-    return colorScheme.container;
-  }, [colorScheme.container, isDisabled, theme.colors.background]);
-  const textColor = _react.useMemo.call(void 0, () => {
-    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] = _react2.default.useState(false);
-  const { size: resolvedSize, fontSize } = useAvatarSizeStyles(size);
-  const radiusStyles = useAvatarRadiusStyles(radius, resolvedSize);
-  const { backgroundColor, textColor, borderColor } = useAvatarColors(
-    themeColor,
-    isDisabled
-  );
-  const accessibilityLabel = _nullishCoalesce(name, () => ( "Avatar"));
-  const shouldShowFallback = showFallback || !src || isError;
-  const initials = name ? (_nullishCoalesce(getInitials, () => ( getDefaultInitials)))(name) : "";
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.container,
-        {
-          width: resolvedSize,
-          height: resolvedSize,
-          backgroundColor,
-          opacity: isDisabled ? 0.6 : 1,
-          borderWidth: isBordered ? 1 : 0,
-          borderColor: isBordered ? borderColor : "transparent"
-        },
-        radiusStyles,
-        _optionalChain([customAppearance, 'optionalAccess', _ => _.container])
-      ],
-      accessible: true,
-      accessibilityRole: "image",
-      accessibilityLabel
-    },
-    !shouldShowFallback && src ? /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Image,
-      {
-        source: { uri: src },
-        style: [styles.image, radiusStyles, _optionalChain([customAppearance, 'optionalAccess', _2 => _2.image])],
-        accessibilityLabel,
-        onError: () => setIsError(true)
-      }
-    ) : /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.fallback, { width: "100%", height: "100%" }] }, _nullishCoalesce(_nullishCoalesce(fallback, () => ( icon)), () => ( /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Text,
-      {
-        style: [
-          {
-            color: textColor,
-            fontSize,
-            fontWeight: "600"
-          },
-          _optionalChain([customAppearance, 'optionalAccess', _3 => _3.text])
-        ]
-      },
-      initials
-    ))))
-  );
-};
-
-// src/components/avatar/avatar-group.tsx
-
-
-var AvatarGroup = ({
-  children,
-  max,
-  total,
-  size = "md",
-  radius = "full",
-  themeColor = "default",
-  isBordered = false,
-  isDisabled = false,
-  isGrid = false,
-  renderCount,
-  customAppearance
-}) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const resolvedSize = resolveAvatarSize(size);
-  const spacing = theme.spacing.xs;
-  const overlap = Math.round(resolvedSize * 0.28);
-  const allChildren = _react2.default.Children.toArray(children).filter(
-    (child) => _react2.default.isValidElement(child)
-  );
-  const totalCount = _nullishCoalesce(total, () => ( allChildren.length));
-  const maxCount = _nullishCoalesce(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.default.createElement(
-      _reactnative.View,
-      {
-        key: _nullishCoalesce(child.key, () => ( index)),
-        style: isGrid ? { marginRight: spacing, marginBottom: spacing } : { marginLeft: index === 0 ? 0 : -overlap, zIndex: index }
-      },
-      _react2.default.cloneElement(child, {
-        size: _nullishCoalesce(childProps.size, () => ( size)),
-        radius: _nullishCoalesce(childProps.radius, () => ( radius)),
-        themeColor: _nullishCoalesce(childProps.themeColor, () => ( themeColor)),
-        isBordered: _nullishCoalesce(childProps.isBordered, () => ( isBordered)),
-        isDisabled: _nullishCoalesce(childProps.isDisabled, () => ( isDisabled))
-      })
-    );
-  });
-  const countNode = remaining > 0 ? _nullishCoalesce(_optionalChain([renderCount, 'optionalCall', _4 => _4(remaining)]), () => ( /* @__PURE__ */ _react2.default.createElement(
-    Avatar,
-    {
-      name: `+${remaining}`,
-      showFallback: true,
-      size,
-      radius,
-      themeColor,
-      isBordered,
-      isDisabled,
-      fallback: /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Text,
-        {
-          style: {
-            color: theme.colors.foreground,
-            fontSize: Math.max(10, Math.round(resolvedSize * 0.35)),
-            fontWeight: "600"
-          }
-        },
-        "+",
-        remaining
-      )
-    }
-  ))) : null;
-  if (countNode) {
-    enhanced.push(
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.View,
-        {
-          key: "avatar-count",
-          style: isGrid ? { marginRight: spacing, marginBottom: spacing } : {
-            marginLeft: enhanced.length === 0 ? 0 : -overlap,
-            zIndex: enhanced.length
-          }
-        },
-        countNode
-      )
-    );
-  }
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [isGrid ? styles.grid : styles.group, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.container])],
-      accessible: true
-    },
-    enhanced
-  );
-};
-
-
-
-exports.Avatar = Avatar; exports.AvatarGroup = AvatarGroup;

package/dist/avatar/index.d.cts

@@ -1,123 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, ImageStyle, TextStyle } from 'react-native';
-import { Size, Radius, ThemeColor } from '@xaui/core/types';
-
-type AvatarSize = Size | number;
-type AvatarCustomAppearance = {
-    /**
-     * Custom styles for the container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the image
-     */
-    image?: ImageStyle;
-    /**
-     * Custom styles for the fallback text
-     */
-    text?: TextStyle;
-};
-type AvatarProps = {
-    /**
-     * Avatar image source URL.
-     */
-    src?: string;
-    /**
-     * Avatar name used for initials fallback.
-     */
-    name?: string;
-    /**
-     * Custom icon rendered when no image is available.
-     */
-    icon?: ReactNode;
-    /**
-     * Custom fallback rendered when no image is available.
-     */
-    fallback?: ReactNode;
-    /**
-     * Avatar size preset or custom number.
-     * @default 'md'
-     */
-    size?: AvatarSize;
-    /**
-     * Avatar radius.
-     * @default 'full'
-     */
-    radius?: Radius;
-    /**
-     * Theme color for avatar background and text.
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Show border around avatar.
-     */
-    isBordered?: boolean;
-    /**
-     * Disabled state.
-     */
-    isDisabled?: boolean;
-    /**
-     * Show fallback content when image is missing or fails.
-     * @default false
-     */
-    showFallback?: boolean;
-    /**
-     * Custom initials generator.
-     */
-    getInitials?: (name: string) => string;
-    /**
-     * Custom appearance styles for avatar parts
-     */
-    customAppearance?: AvatarCustomAppearance;
-};
-type AvatarGroupProps = {
-    children?: ReactNode;
-    /**
-     * Max avatars to display before showing count.
-     */
-    max?: number;
-    /**
-     * Total avatars count if different from children length.
-     */
-    total?: number;
-    /**
-     * Shared avatar size.
-     */
-    size?: AvatarSize;
-    /**
-     * Shared avatar radius.
-     */
-    radius?: Radius;
-    /**
-     * Shared theme color.
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Show border around avatars.
-     */
-    isBordered?: boolean;
-    /**
-     * Disabled state for all avatars.
-     */
-    isDisabled?: boolean;
-    /**
-     * Render avatars in a grid layout.
-     */
-    isGrid?: boolean;
-    /**
-     * Custom renderer for the count avatar.
-     */
-    renderCount?: (count: number) => ReactNode;
-    /**
-     * Custom appearance styles for group container
-     */
-    customAppearance?: {
-        container?: ViewStyle;
-    };
-};
-
-declare const Avatar: React.FC<AvatarProps>;
-
-declare const AvatarGroup: React.FC<AvatarGroupProps>;
-
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps };

package/dist/avatar/index.d.ts

@@ -1,123 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, ImageStyle, TextStyle } from 'react-native';
-import { Size, Radius, ThemeColor } from '@xaui/core/types';
-
-type AvatarSize = Size | number;
-type AvatarCustomAppearance = {
-    /**
-     * Custom styles for the container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the image
-     */
-    image?: ImageStyle;
-    /**
-     * Custom styles for the fallback text
-     */
-    text?: TextStyle;
-};
-type AvatarProps = {
-    /**
-     * Avatar image source URL.
-     */
-    src?: string;
-    /**
-     * Avatar name used for initials fallback.
-     */
-    name?: string;
-    /**
-     * Custom icon rendered when no image is available.
-     */
-    icon?: ReactNode;
-    /**
-     * Custom fallback rendered when no image is available.
-     */
-    fallback?: ReactNode;
-    /**
-     * Avatar size preset or custom number.
-     * @default 'md'
-     */
-    size?: AvatarSize;
-    /**
-     * Avatar radius.
-     * @default 'full'
-     */
-    radius?: Radius;
-    /**
-     * Theme color for avatar background and text.
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Show border around avatar.
-     */
-    isBordered?: boolean;
-    /**
-     * Disabled state.
-     */
-    isDisabled?: boolean;
-    /**
-     * Show fallback content when image is missing or fails.
-     * @default false
-     */
-    showFallback?: boolean;
-    /**
-     * Custom initials generator.
-     */
-    getInitials?: (name: string) => string;
-    /**
-     * Custom appearance styles for avatar parts
-     */
-    customAppearance?: AvatarCustomAppearance;
-};
-type AvatarGroupProps = {
-    children?: ReactNode;
-    /**
-     * Max avatars to display before showing count.
-     */
-    max?: number;
-    /**
-     * Total avatars count if different from children length.
-     */
-    total?: number;
-    /**
-     * Shared avatar size.
-     */
-    size?: AvatarSize;
-    /**
-     * Shared avatar radius.
-     */
-    radius?: Radius;
-    /**
-     * Shared theme color.
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Show border around avatars.
-     */
-    isBordered?: boolean;
-    /**
-     * Disabled state for all avatars.
-     */
-    isDisabled?: boolean;
-    /**
-     * Render avatars in a grid layout.
-     */
-    isGrid?: boolean;
-    /**
-     * Custom renderer for the count avatar.
-     */
-    renderCount?: (count: number) => ReactNode;
-    /**
-     * Custom appearance styles for group container
-     */
-    customAppearance?: {
-        container?: ViewStyle;
-    };
-};
-
-declare const Avatar: React.FC<AvatarProps>;
-
-declare const AvatarGroup: React.FC<AvatarGroupProps>;
-
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps };