@onehat/ui 0.3.380 → 0.4.0

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

@@ -0,0 +1,310 @@
+'use client';
+import { createAlert } from '@gluestack-ui/alert';
+import { View, Text } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import React, { useMemo } from 'react';
+import { Svg } from 'react-native-svg';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const SCOPE = 'ALERT';
+
+const alertStyle = tva({
+  base: 'items-center py-3 px-4 rounded-md flex-row gap-2 border-outline-100',
+
+  variants: {
+    action: {
+      error: 'bg-background-error',
+      warning: 'bg-background-warning',
+      success: 'bg-background-success',
+      info: 'bg-background-info',
+      muted: 'bg-background-muted',
+    },
+
+    variant: {
+      solid: '',
+      outline: 'border bg-background-0',
+    },
+  },
+});
+
+const alertTextStyle = tva({
+  base: 'flex-1 font-normal font-body',
+
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-md',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+  parentVariants: {
+    action: {
+      error: 'text-error-800',
+      warning: 'text-warning-800',
+      success: 'text-success-800',
+      info: 'text-info-800',
+      muted: 'text-background-800',
+    },
+  },
+});
+
+const alertIconStyle = tva({
+  base: 'fill-none',
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+  parentVariants: {
+    action: {
+      error: 'text-error-800',
+      warning: 'text-warning-800',
+      success: 'text-success-800',
+      info: 'text-info-800',
+      muted: 'text-secondary-800',
+    },
+  },
+});
+
+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 IconWrapper = React.forwardRef<
+  React.ElementRef<typeof PrimitiveIcon>,
+  IPrimitiveIcon
+>(({ ...props }, ref) => {
+  return <PrimitiveIcon {...props} ref={ref} />;
+});
+
+export const UIAlert = createAlert({
+  Root: withStyleContext(View, SCOPE),
+  Text: Text,
+  Icon: IconWrapper,
+});
+
+cssInterop(UIAlert, { className: 'style' });
+//@ts-ignore
+cssInterop(UIAlert.Text, { className: 'style' });
+//@ts-ignore
+cssInterop(IconWrapper, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      //@ts-ignore
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+type IAlertProps = Omit<
+  React.ComponentPropsWithoutRef<typeof UIAlert>,
+  'context'
+> &
+  VariantProps<typeof alertStyle>;
+
+const Alert = React.forwardRef<React.ElementRef<typeof UIAlert>, IAlertProps>(
+  ({ className, variant = 'solid', action = 'muted', ...props }, ref) => {
+    return (
+      <UIAlert
+        className={alertStyle({ action, variant, class: className })}
+        context={{ variant, action }}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+type IAlertTextProps = React.ComponentPropsWithoutRef<typeof UIAlert.Text> &
+  VariantProps<typeof alertTextStyle>;
+
+const AlertText = React.forwardRef<
+  React.ElementRef<typeof UIAlert.Text>,
+  IAlertTextProps
+>(
+  (
+    {
+      className,
+      isTruncated,
+      bold,
+      underline,
+      strikeThrough,
+      size = 'md',
+      sub,
+      italic,
+      highlight,
+      ...props
+    },
+    ref
+  ) => {
+    const { action: parentAction } = useStyleContext(SCOPE);
+    return (
+      <UIAlert.Text
+        className={alertTextStyle({
+          isTruncated,
+          bold,
+          underline,
+          strikeThrough,
+          size,
+          sub,
+          italic,
+          highlight,
+          class: className,
+          parentVariants: {
+            action: parentAction,
+          },
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+type IAlertIconProps = React.ComponentPropsWithoutRef<typeof UIAlert.Icon> &
+  VariantProps<typeof alertIconStyle>;
+
+const AlertIcon = React.forwardRef<
+  React.ElementRef<typeof UIAlert.Icon>,
+  IAlertIconProps
+>(({ className, size = 'md', ...props }, ref) => {
+  const { action: parentAction } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UIAlert.Icon
+        ref={ref}
+        {...props}
+        className={alertIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIAlert.Icon
+        ref={ref}
+        {...props}
+        className={alertIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIAlert.Icon
+      className={alertIconStyle({
+        parentVariants: {
+          action: parentAction,
+        },
+        size,
+        class: className,
+      })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+Alert.displayName = 'Alert';
+AlertText.displayName = 'AlertText';
+AlertIcon.displayName = 'AlertIcon';
+
+export { Alert, AlertText, AlertIcon };

package/src/Components/Gluestack/alert-dialog/index.tsx

@@ -0,0 +1,295 @@
+'use client';
+import React from 'react';
+import { createAlertDialog } from '@gluestack-ui/alert-dialog';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import {
+  Motion,
+  AnimatePresence,
+  createMotionAnimatedComponent,
+} from '@legendapp/motion';
+import { View, Pressable, ScrollView, Platform } from 'react-native';
+
+const AnimatedPressable = createMotionAnimatedComponent(Pressable);
+
+const SCOPE = 'ALERT_DIALOG';
+
+const UIAccessibleAlertDialog = createAlertDialog({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(View, SCOPE)
+      : withStyleContextAndStates(View, SCOPE),
+  Body: ScrollView,
+  Content: Motion.View,
+  CloseButton: Pressable,
+  Header: View,
+  Footer: View,
+  Backdrop: AnimatedPressable,
+  AnimatePresence: AnimatePresence,
+});
+
+cssInterop(UIAccessibleAlertDialog, { className: 'style' });
+cssInterop(UIAccessibleAlertDialog.Content, { className: 'style' });
+cssInterop(UIAccessibleAlertDialog.CloseButton, { className: 'style' });
+cssInterop(UIAccessibleAlertDialog.Header, { className: 'style' });
+cssInterop(UIAccessibleAlertDialog.Footer, { className: 'style' });
+cssInterop(UIAccessibleAlertDialog.Body, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIAccessibleAlertDialog.Backdrop, { className: 'style' });
+
+const alertDialogStyle = tva({
+  base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',
+  parentVariants: {
+    size: {
+      xs: '',
+      sm: '',
+      md: '',
+      lg: '',
+      full: '',
+    },
+  },
+});
+
+const alertDialogContentStyle = tva({
+  base: 'bg-background-0 rounded-lg overflow-hidden border border-outline-100 p-6',
+  parentVariants: {
+    size: {
+      xs: 'w-[60%] max-w-[360px]',
+      sm: 'w-[70%] max-w-[420px]',
+      md: 'w-[80%] max-w-[510px]',
+      lg: 'w-[90%] max-w-[640px]',
+      full: 'w-full',
+    },
+  },
+});
+
+const alertDialogCloseButtonStyle = tva({
+  base: 'group/alert-dialog-close-button z-10 rounded-sm p-2 data-[focus-visible=true]:bg-background-100 web:cursor-pointer outline-0',
+});
+
+const alertDialogHeaderStyle = tva({
+  base: 'justify-between items-center flex-row',
+});
+
+const alertDialogFooterStyle = tva({
+  base: 'flex-row justify-end items-center gap-3',
+});
+
+const alertDialogBodyStyle = tva({ base: '' });
+
+const alertDialogBackdropStyle = tva({
+  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
+});
+
+type IAlertDialogProps = React.ComponentPropsWithoutRef<
+  typeof UIAccessibleAlertDialog
+> &
+  VariantProps<typeof alertDialogStyle>;
+
+type IAlertDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof UIAccessibleAlertDialog.Content
+> &
+  VariantProps<typeof alertDialogContentStyle> & { className?: string };
+
+type IAlertDialogCloseButtonProps = React.ComponentPropsWithoutRef<
+  typeof UIAccessibleAlertDialog.CloseButton
+> &
+  VariantProps<typeof alertDialogCloseButtonStyle>;
+
+type IAlertDialogHeaderProps = React.ComponentPropsWithoutRef<
+  typeof UIAccessibleAlertDialog.Header
+> &
+  VariantProps<typeof alertDialogHeaderStyle>;
+
+type IAlertDialogFooterProps = React.ComponentPropsWithoutRef<
+  typeof UIAccessibleAlertDialog.Footer
+> &
+  VariantProps<typeof alertDialogFooterStyle>;
+
+type IAlertDialogBodyProps = React.ComponentPropsWithoutRef<
+  typeof UIAccessibleAlertDialog.Body
+> &
+  VariantProps<typeof alertDialogBodyStyle>;
+
+type IAlertDialogBackdropProps = React.ComponentPropsWithoutRef<
+  typeof UIAccessibleAlertDialog.Backdrop
+> &
+  VariantProps<typeof alertDialogBackdropStyle> & { className?: string };
+
+const AlertDialog = React.forwardRef<
+  React.ElementRef<typeof UIAccessibleAlertDialog>,
+  IAlertDialogProps
+>(({ className, size = 'md', ...props }, ref) => {
+  return (
+    <UIAccessibleAlertDialog
+      ref={ref}
+      {...props}
+      className={alertDialogStyle({ class: className })}
+      context={{ size }}
+      pointerEvents="box-none"
+    />
+  );
+});
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof UIAccessibleAlertDialog.Content>,
+  IAlertDialogContentProps
+>(({ className, size, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIAccessibleAlertDialog.Content
+      pointerEvents="auto"
+      ref={ref}
+      initial={{
+        scale: 0.9,
+        opacity: 0,
+      }}
+      animate={{
+        scale: 1,
+        opacity: 1,
+      }}
+      exit={{
+        scale: 0.9,
+        opacity: 0,
+      }}
+      transition={{
+        type: 'spring',
+        damping: 18,
+        stiffness: 250,
+        opacity: {
+          type: 'timing',
+          duration: 250,
+        },
+      }}
+      {...props}
+      className={alertDialogContentStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
+});
+
+const AlertDialogCloseButton = React.forwardRef<
+  React.ElementRef<typeof UIAccessibleAlertDialog.CloseButton>,
+  IAlertDialogCloseButtonProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIAccessibleAlertDialog.CloseButton
+      ref={ref}
+      {...props}
+      className={alertDialogCloseButtonStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+const AlertDialogHeader = React.forwardRef<
+  React.ElementRef<typeof UIAccessibleAlertDialog.Header>,
+  IAlertDialogHeaderProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIAccessibleAlertDialog.Header
+      ref={ref}
+      {...props}
+      className={alertDialogHeaderStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+const AlertDialogFooter = React.forwardRef<
+  React.ElementRef<typeof UIAccessibleAlertDialog.Footer>,
+  IAlertDialogFooterProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIAccessibleAlertDialog.Footer
+      ref={ref}
+      {...props}
+      className={alertDialogFooterStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+const AlertDialogBody = React.forwardRef<
+  React.ElementRef<typeof UIAccessibleAlertDialog.Body>,
+  IAlertDialogBodyProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIAccessibleAlertDialog.Body
+      ref={ref}
+      {...props}
+      className={alertDialogBodyStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+const AlertDialogBackdrop = React.forwardRef<
+  React.ElementRef<typeof UIAccessibleAlertDialog.Backdrop>,
+  IAlertDialogBackdropProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIAccessibleAlertDialog.Backdrop
+      ref={ref}
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 0.5,
+      }}
+      exit={{
+        opacity: 0,
+      }}
+      transition={{
+        type: 'spring',
+        damping: 18,
+        stiffness: 250,
+        opacity: {
+          type: 'timing',
+          duration: 250,
+        },
+      }}
+      {...props}
+      className={alertDialogBackdropStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+AlertDialog.displayName = 'AlertDialog';
+AlertDialogContent.displayName = 'AlertDialogContent';
+AlertDialogCloseButton.displayName = 'AlertDialogCloseButton';
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+AlertDialogBody.displayName = 'AlertDialogBody';
+AlertDialogBackdrop.displayName = 'AlertDialogBackdrop';
+
+export {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogCloseButton,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogBody,
+  AlertDialogBackdrop,
+};