@onehat/ui 0.3.380 → 0.4.0

package/src/Components/Gluestack/table/index.web.tsx

@@ -0,0 +1,142 @@
+import React, { createContext, useMemo, useContext } from 'react';
+import {
+  tableStyle,
+  tableHeaderStyle,
+  tableBodyStyle,
+  tableFooterStyle,
+  tableHeadStyle,
+  tableRowStyleStyle,
+  tableDataStyle,
+  tableCaptionStyle,
+} from './styles';
+
+const TableHeaderContext = createContext<any>({});
+const TableFooterContext = createContext<any>({});
+
+const Table = React.forwardRef(({ className, ...props }: any, ref?: any) => {
+  return (
+    <table ref={ref} className={tableStyle({ class: className })} {...props} />
+  );
+});
+
+const TableHeader = React.forwardRef(
+  ({ className, ...props }: any, ref?: any) => {
+    const contextValue = useMemo(() => {
+      return {
+        isHeaderRow: true,
+      };
+    }, []);
+    return (
+      <TableHeaderContext.Provider value={contextValue}>
+        <thead
+          ref={ref}
+          className={tableHeaderStyle({ class: className })}
+          {...props}
+        />
+      </TableHeaderContext.Provider>
+    );
+  }
+);
+
+const TableBody = React.forwardRef(
+  ({ className, ...props }: any, ref?: any) => {
+    return (
+      <tbody
+        ref={ref}
+        className={tableBodyStyle({ class: className })}
+        {...props}
+      />
+    );
+  }
+);
+
+const TableFooter = React.forwardRef(
+  ({ className, ...props }: any, ref?: any) => {
+    const contextValue = useMemo(() => {
+      return {
+        isFooterRow: true,
+      };
+    }, []);
+    return (
+      <TableFooterContext.Provider value={contextValue}>
+        <tfoot
+          ref={ref}
+          className={tableFooterStyle({ class: className })}
+          {...props}
+        />
+      </TableFooterContext.Provider>
+    );
+  }
+);
+
+const TableHead = React.forwardRef(
+  ({ className, ...props }: any, ref?: any) => {
+    return (
+      <th
+        ref={ref}
+        className={tableHeadStyle({ class: className })}
+        {...props}
+      />
+    );
+  }
+);
+
+const TableRow = React.forwardRef(({ className, ...props }: any, ref?: any) => {
+  const { isHeaderRow } = useContext(TableHeaderContext);
+  const { isFooterRow } = useContext(TableFooterContext);
+  return (
+    <tr
+      ref={ref}
+      className={tableRowStyleStyle({
+        isHeaderRow,
+        isFooterRow,
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+const TableData = React.forwardRef(
+  ({ className, ...props }: any, ref?: any) => {
+    return (
+      <td
+        ref={ref}
+        className={tableDataStyle({ class: className })}
+        {...props}
+      />
+    );
+  }
+);
+
+const TableCaption = React.forwardRef(
+  ({ className, ...props }: any, ref?: any) => {
+    return (
+      <caption
+        ref={ref}
+        className={tableCaptionStyle({ class: className })}
+        {...props}
+      />
+    );
+  }
+);
+
+Table.displayName = 'Table';
+TableHeader.displayName = 'TableHeader';
+TableBody.displayName = 'TableBody';
+TableFooter.displayName = 'TableFooter';
+TableHead.displayName = 'TableHead';
+TableRow.displayName = 'TableRow';
+TableData.displayName = 'TableData';
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableData,
+  TableCaption,
+};

package/src/Components/Gluestack/table/styles.tsx

@@ -0,0 +1,44 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const captionTableStyle = isWeb ? 'caption-bottom' : '';
+
+export const tableStyle = tva({
+  base: `table border-collapse border-collapse w-[800px]`,
+});
+
+export const tableHeaderStyle = tva({
+  base: '',
+});
+
+export const tableBodyStyle = tva({
+  base: '',
+});
+
+export const tableFooterStyle = tva({
+  base: '',
+});
+
+export const tableHeadStyle = tva({
+  base: 'flex-1 px-6 py-[14px] text-left font-bold text-[16px] leading-[22px] text-typography-800 font-roboto',
+});
+
+export const tableRowStyleStyle = tva({
+  base: 'border-0 border-b border-solid border-outline-200 bg-background-0',
+  variants: {
+    isHeaderRow: {
+      true: '',
+    },
+    isFooterRow: {
+      true: 'border-b-0 ',
+    },
+  },
+});
+
+export const tableDataStyle = tva({
+  base: 'flex-1 px-6 py-[14px] text-left text-[16px] font-medium leading-[22px] text-typography-800 font-roboto',
+});
+
+export const tableCaptionStyle = tva({
+  base: `${captionTableStyle} px-6 py-[14px] text-[16px] font-normal leading-[22px] text-typography-800 bg-background-50 font-roboto`,
+});

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { Text as RNText } from 'react-native';
+import { textStyle } from './styles';
+
+type ITextProps = React.ComponentProps<typeof RNText> &
+  VariantProps<typeof textStyle>;
+
+const Text = React.forwardRef<React.ElementRef<typeof RNText>, ITextProps>(
+  (
+    {
+      className,
+      isTruncated,
+      bold,
+      underline,
+      strikeThrough,
+      size = 'md',
+      sub,
+      italic,
+      highlight,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <RNText
+        className={textStyle({
+          isTruncated,
+          bold,
+          underline,
+          strikeThrough,
+          size,
+          sub,
+          italic,
+          highlight,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Text.displayName = 'Text';
+
+export { Text };

package/src/Components/Gluestack/text/index.web.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { textStyle } from './styles';
+
+type ITextProps = React.ComponentProps<'span'> & VariantProps<typeof textStyle>;
+
+const Text = React.forwardRef<React.ElementRef<'span'>, ITextProps>(
+  (
+    {
+      className,
+      isTruncated,
+      bold,
+      underline,
+      strikeThrough,
+      size = 'md',
+      sub,
+      italic,
+      highlight,
+      ...props
+    }: { className?: string } & ITextProps,
+    ref
+  ) => {
+    return (
+      <span
+        className={textStyle({
+          isTruncated,
+          bold,
+          underline,
+          strikeThrough,
+          size,
+          sub,
+          italic,
+          highlight,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Text.displayName = 'Text';
+
+export { Text };

package/src/Components/Gluestack/text/styles.tsx

@@ -0,0 +1,47 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const baseStyle = isWeb
+  ? 'font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word'
+  : '';
+
+export const textStyle = tva({
+  base: `text-typography-700 font-body ${baseStyle}`,
+
+  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-base',
+      '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',
+    },
+  },
+});

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

@@ -0,0 +1,108 @@
+'use client';
+import React from 'react';
+import { createTextarea } from '@gluestack-ui/textarea';
+import { View, TextInput, Platform } from 'react-native';
+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 { withStates } from '@gluestack-ui/nativewind-utils/withStates';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const TextareaWrapper = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentProps<typeof View>
+>(({ ...props }, ref) => {
+  return <View {...props} ref={ref} />;
+});
+
+const SCOPE = 'TEXTAREA';
+const UITextarea = createTextarea({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(TextareaWrapper, SCOPE)
+      : withStyleContextAndStates(TextareaWrapper, SCOPE),
+  Input: Platform.OS === 'web' ? TextInput : withStates(TextInput),
+});
+
+cssInterop(TextareaWrapper, { className: 'style' });
+cssInterop(UITextarea.Input, {
+  className: { target: 'style', nativeStyleToProp: { textAlign: true } },
+});
+
+const textareaStyle = tva({
+  base: 'w-full h-[100px] border border-background-300 rounded data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:data-[hover=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:data-[hover=true]:border-background-300',
+
+  variants: {
+    variant: {
+      default:
+        'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:border-primary-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-indicator-primary data-[invalid=true]:data-[disabled=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-indicator-error ',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+      xl: '',
+    },
+  },
+});
+
+const textareaInputStyle = tva({
+  base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+  parentVariants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+  },
+});
+
+type ITextareaProps = React.ComponentProps<typeof UITextarea> &
+  VariantProps<typeof textareaStyle>;
+
+const Textarea = React.forwardRef<
+  React.ElementRef<typeof UITextarea>,
+  ITextareaProps
+>(({ className, variant = 'default', size = 'md', ...props }, ref) => {
+  return (
+    <UITextarea
+      ref={ref}
+      {...props}
+      className={textareaStyle({ variant, class: className })}
+      context={{ size }}
+    />
+  );
+});
+
+type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> &
+  VariantProps<typeof textareaInputStyle>;
+
+const TextareaInput = React.forwardRef<
+  React.ElementRef<typeof UITextarea.Input>,
+  ITextareaInputProps
+>(({ className, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UITextarea.Input
+      ref={ref}
+      {...props}
+      className={textareaInputStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+Textarea.displayName = 'Textarea';
+TextareaInput.displayName = 'TextareaInput';
+
+export { Textarea, TextareaInput };

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

@@ -0,0 +1,225 @@
+'use client';
+import React from 'react';
+import { createToast, createToastHook } from '@gluestack-ui/toast';
+import { Text, View, Platform } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { cssInterop } from 'nativewind';
+import { Motion, AnimatePresence } from '@legendapp/motion';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+export const useToast = createToastHook(Motion.View, AnimatePresence);
+const SCOPE = 'TOAST';
+export const UIToast = createToast({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(View, SCOPE)
+      : withStyleContextAndStates(View, SCOPE),
+  Title: Text,
+  Description: Text,
+});
+
+cssInterop(Motion.View, { className: 'style' });
+cssInterop(UIToast, { className: 'style' });
+cssInterop(UIToast.Title, { className: 'style' });
+cssInterop(UIToast.Description, { className: 'style' });
+
+const toastStyle = tva({
+  base: 'p-4 m-1 rounded-md gap-1 web:pointer-events-auto shadow-hard-5 border-outline-100',
+  variants: {
+    action: {
+      error: 'bg-error-800',
+      warning: 'bg-warning-700',
+      success: 'bg-success-700',
+      info: 'bg-info-700',
+      muted: 'bg-secondary-700',
+    },
+
+    variant: {
+      solid: '',
+      outline: 'border bg-background-0',
+    },
+  },
+});
+
+const toastTitleStyle = tva({
+  base: 'text-typography-0 font-medium font-body tracking-md text-left',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+  },
+  parentVariants: {
+    variant: {
+      solid: '',
+      outline: '',
+    },
+    action: {
+      error: '',
+      warning: '',
+      success: '',
+      info: '',
+      muted: '',
+    },
+  },
+  parentCompoundVariants: [
+    {
+      variant: 'outline',
+      action: 'error',
+      class: 'text-error-800',
+    },
+    {
+      variant: 'outline',
+      action: 'warning',
+      class: 'text-warning-800',
+    },
+    {
+      variant: 'outline',
+      action: 'success',
+      class: 'text-success-800',
+    },
+    {
+      variant: 'outline',
+      action: 'info',
+      class: 'text-info-800',
+    },
+    {
+      variant: 'outline',
+      action: 'muted',
+      class: 'text-background-800',
+    },
+  ],
+});
+
+const toastDescriptionStyle = tva({
+  base: 'font-normal font-body tracking-md text-left',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+  },
+  parentVariants: {
+    variant: {
+      solid: 'text-typography-50',
+      outline: 'text-typography-900',
+    },
+  },
+});
+
+type IToastProps = React.ComponentProps<typeof UIToast> & {
+  className?: string;
+} & VariantProps<typeof toastStyle>;
+
+export const Toast = React.forwardRef<
+  React.ElementRef<typeof UIToast>,
+  IToastProps
+>(({ className, variant = 'solid', action = 'muted', ...props }, ref) => {
+  return (
+    <UIToast
+      ref={ref}
+      className={toastStyle({ variant, action, class: className })}
+      context={{ variant, action }}
+      {...props}
+    />
+  );
+});
+
+type IToastTitleProps = React.ComponentProps<typeof UIToast.Title> & {
+  className?: string;
+} & VariantProps<typeof toastTitleStyle>;
+
+export const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof UIToast.Title>,
+  IToastTitleProps
+>(({ className, size = 'md', ...props }, ref) => {
+  const { variant: parentVariant, action: parentAction } =
+    useStyleContext(SCOPE);
+  return (
+    <UIToast.Title
+      ref={ref}
+      {...props}
+      className={toastTitleStyle({
+        size,
+        class: className,
+        parentVariants: {
+          variant: parentVariant,
+          action: parentAction,
+        },
+      })}
+    />
+  );
+});
+
+type IToastDescriptionProps = React.ComponentProps<
+  typeof UIToast.Description
+> & {
+  className?: string;
+} & VariantProps<typeof toastDescriptionStyle>;
+
+export const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof UIToast.Description>,
+  IToastDescriptionProps
+>(({ className, size = 'md', ...props }, ref) => {
+  const { variant: parentVariant } = useStyleContext(SCOPE);
+  return (
+    <UIToast.Description
+      ref={ref}
+      {...props}
+      className={toastDescriptionStyle({
+        size,
+        class: className,
+        parentVariants: {
+          variant: parentVariant,
+        },
+      })}
+    />
+  );
+});