@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Gluestack/avatar/index.tsx

@@ -0,0 +1,190 @@
+'use client';
+import React from 'react';
+import { createAvatar } from '@gluestack-ui/avatar';
+
+import { View, Text, Image, Platform } from 'react-native';
+
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+const SCOPE = 'AVATAR';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const UIAvatar = createAvatar({
+  Root: withStyleContext(View, SCOPE),
+  Badge: View,
+  Group: View,
+  Image: Image,
+  FallbackText: Text,
+});
+
+cssInterop(UIAvatar, { className: 'style' });
+cssInterop(UIAvatar.Badge, { className: 'style' });
+cssInterop(UIAvatar.Group, { className: 'style' });
+cssInterop(UIAvatar.Image, { className: 'style' });
+cssInterop(UIAvatar.FallbackText, { className: 'style' });
+
+const avatarStyle = tva({
+  base: 'rounded-full justify-center items-center relative bg-primary-600 group-[.avatar-group]/avatar-group:-ml-2.5',
+  variants: {
+    size: {
+      'xs': 'w-6 h-6',
+      'sm': 'w-8 h-8',
+      'md': 'w-12 h-12',
+      'lg': 'w-16 h-16',
+      'xl': 'w-24 h-24',
+      '2xl': 'w-32 h-32',
+    },
+  },
+});
+
+const avatarFallbackTextStyle = tva({
+  base: 'text-typography-0 font-semibold overflow-hidden text-transform:uppercase web:cursor-default',
+
+  parentVariants: {
+    size: {
+      'xs': 'text-2xs',
+      'sm': 'text-xs',
+      'md': 'text-base',
+      'lg': 'text-xl',
+      'xl': 'text-3xl',
+      '2xl': 'text-5xl',
+    },
+  },
+});
+
+const avatarGroupStyle = tva({
+  base: 'group/avatar-group flex-row-reverse relative avatar-group',
+});
+
+const avatarBadgeStyle = tva({
+  base: 'w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-background-0 border-2',
+  parentVariants: {
+    size: {
+      'xs': 'w-2 h-2',
+      'sm': 'w-2 h-2',
+      'md': 'w-3 h-3',
+      'lg': 'w-4 h-4',
+      'xl': 'w-6 h-6',
+      '2xl': 'w-8 h-8',
+    },
+  },
+});
+
+const avatarImageStyle = tva({
+  base: 'h-full w-full rounded-full absolute',
+});
+
+type IAvatarProps = Omit<
+  React.ComponentPropsWithoutRef<typeof UIAvatar>,
+  'context'
+> &
+  VariantProps<typeof avatarStyle>;
+
+export const Avatar = React.forwardRef<
+  React.ElementRef<typeof UIAvatar>,
+  IAvatarProps
+>(({ className, size = 'md', ...props }, ref) => {
+  return (
+    <UIAvatar
+      ref={ref}
+      {...props}
+      className={avatarStyle({ size, class: className })}
+      context={{ size }}
+    />
+  );
+});
+
+type IAvatarBadgeProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Badge> &
+  VariantProps<typeof avatarBadgeStyle>;
+
+export const AvatarBadge = React.forwardRef<
+  React.ElementRef<typeof UIAvatar.Badge>,
+  IAvatarBadgeProps
+>(({ className, size, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIAvatar.Badge
+      ref={ref}
+      {...props}
+      className={avatarBadgeStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
+});
+
+type IAvatarFallbackTextProps = React.ComponentPropsWithoutRef<
+  typeof UIAvatar.FallbackText
+> &
+  VariantProps<typeof avatarFallbackTextStyle>;
+export const AvatarFallbackText = React.forwardRef<
+  React.ElementRef<typeof UIAvatar.FallbackText>,
+  IAvatarFallbackTextProps
+>(({ className, size, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIAvatar.FallbackText
+      ref={ref}
+      {...props}
+      className={avatarFallbackTextStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
+});
+
+type IAvatarImageProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Image> &
+  VariantProps<typeof avatarImageStyle>;
+
+export const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof UIAvatar.Image>,
+  IAvatarImageProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIAvatar.Image
+      ref={ref}
+      {...props}
+      className={avatarImageStyle({
+        class: className,
+      })}
+      // @ts-ignore
+      style={
+        Platform.OS === 'web'
+          ? { height: 'revert-layer', width: 'revert-layer' }
+          : undefined
+      }
+    />
+  );
+});
+
+type IAvatarGroupProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Group> &
+  VariantProps<typeof avatarGroupStyle>;
+
+export const AvatarGroup = React.forwardRef<
+  React.ElementRef<typeof UIAvatar.Group>,
+  IAvatarGroupProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIAvatar.Group
+      ref={ref}
+      {...props}
+      className={avatarGroupStyle({
+        class: className,
+      })}
+    />
+  );
+});

package/src/Components/Gluestack/badge/index.tsx

@@ -0,0 +1,272 @@
+'use client';
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { Svg } from 'react-native-svg';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+const SCOPE = 'BADGE';
+
+const badgeStyle = tva({
+  base: 'flex-row items-center rounded-sm data-[disabled=true]:opacity-50 px-2 py-1',
+  variants: {
+    action: {
+      error: 'bg-background-error border-error-300',
+      warning: 'bg-background-warning border-warning-300',
+      success: 'bg-background-success border-success-300',
+      info: 'bg-background-info border-info-300',
+      muted: 'bg-background-muted border-background-300',
+    },
+    variant: {
+      solid: '',
+      outline: 'border',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+});
+
+const badgeTextStyle = tva({
+  base: 'text-typography-700 font-body font-normal tracking-normal uppercase',
+
+  parentVariants: {
+    action: {
+      error: 'text-error-600',
+      warning: 'text-warning-600',
+      success: 'text-success-600',
+      info: 'text-info-600',
+      muted: 'text-secondary-600',
+    },
+    size: {
+      sm: 'text-2xs',
+      md: 'text-xs',
+      lg: 'text-sm',
+    },
+  },
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+const badgeIconStyle = tva({
+  base: 'fill-none',
+  parentVariants: {
+    action: {
+      error: 'text-error-600',
+      warning: 'text-warning-600',
+      success: 'text-success-600',
+      info: 'text-info-600',
+      muted: 'text-secondary-600',
+    },
+    size: {
+      sm: 'h-3 w-3',
+      md: 'h-3.5 w-3.5',
+      lg: 'h-4 w-4',
+    },
+  },
+});
+
+type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
+  height?: number | string;
+  width?: number | string;
+  fill?: string;
+  color?: string;
+  size?: number | string;
+  stroke?: string;
+  as?: React.ElementType;
+  className?: string;
+  classNameColor?: string;
+};
+
+const PrimitiveIcon = React.forwardRef<
+  React.ElementRef<typeof Svg>,
+  IPrimitiveIcon
+>(
+  (
+    {
+      height,
+      width,
+      fill,
+      color,
+      classNameColor,
+      size,
+      stroke = 'currentColor',
+      as: AsComp,
+      ...props
+    },
+    ref
+  ) => {
+    color = color ?? classNameColor;
+    const sizeProps = useMemo(() => {
+      if (size) return { size };
+      if (height && width) return { height, width };
+      if (height) return { height };
+      if (width) return { width };
+      return {};
+    }, [size, height, width]);
+
+    let colorProps = {};
+    if (fill) {
+      colorProps = { ...colorProps, fill: fill };
+    }
+    if (stroke !== 'currentColor') {
+      colorProps = { ...colorProps, stroke: stroke };
+    } else if (stroke === 'currentColor' && color !== undefined) {
+      colorProps = { ...colorProps, stroke: color };
+    }
+
+    if (AsComp) {
+      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+    }
+    return (
+      <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+    );
+  }
+);
+
+const ContextView = withStyleContext(View, SCOPE);
+cssInterop(ContextView, { className: 'style' });
+//@ts-ignore
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      //@ts-ignore
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+type IBadgeProps = React.ComponentPropsWithoutRef<typeof ContextView> &
+  VariantProps<typeof badgeStyle>;
+const Badge = ({
+  children,
+  action = 'muted',
+  variant = 'solid',
+  size = 'md',
+  className,
+  ...props
+}: { className?: string } & IBadgeProps) => {
+  return (
+    <ContextView
+      className={badgeStyle({ action, variant, class: className })}
+      {...props}
+      context={{
+        action,
+        variant,
+        size,
+      }}
+    >
+      {children}
+    </ContextView>
+  );
+};
+
+type IBadgeTextProps = React.ComponentPropsWithoutRef<typeof Text> &
+  VariantProps<typeof badgeTextStyle>;
+
+const BadgeText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  IBadgeTextProps
+>(({ children, className, size, ...props }, ref) => {
+  const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
+  return (
+    <Text
+      ref={ref}
+      className={badgeTextStyle({
+        parentVariants: {
+          size: parentSize,
+          action: parentAction,
+        },
+        size,
+        class: className,
+      })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+type IBadgeIconProps = React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+  VariantProps<typeof badgeIconStyle>;
+
+const BadgeIcon = React.forwardRef<
+  React.ElementRef<typeof PrimitiveIcon>,
+  IBadgeIconProps
+>(({ className, size, ...props }, ref) => {
+  const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <PrimitiveIcon
+        ref={ref}
+        {...props}
+        className={badgeIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <PrimitiveIcon
+        ref={ref}
+        {...props}
+        className={badgeIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <PrimitiveIcon
+      className={badgeIconStyle({
+        parentVariants: {
+          size: parentSize,
+          action: parentAction,
+        },
+        size,
+        class: className,
+      })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+Badge.displayName = 'Badge';
+BadgeText.displayName = 'BadgeText';
+BadgeIcon.displayName = 'BadgeIcon';
+
+export { Badge, BadgeIcon, BadgeText };