@onehat/ui 0.3.381 → 0.4.1

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

@@ -0,0 +1,203 @@
+import React, { forwardRef, memo } from 'react';
+import { headingStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+type IHeadingProps = VariantProps<typeof headingStyle> &
+  React.ComponentPropsWithoutRef<'h1'> & {
+    as?: React.ElementType;
+  };
+
+const MappedHeading = memo(
+  forwardRef<HTMLHeadingElement, IHeadingProps>(
+    (
+      {
+        size,
+        className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        sub,
+        italic,
+        highlight,
+        ...props
+      },
+      ref
+    ) => {
+      switch (size) {
+        case '5xl':
+        case '4xl':
+        case '3xl':
+          return (
+            <h1
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case '2xl':
+          return (
+            <h2
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case 'xl':
+          return (
+            <h3
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case 'lg':
+          return (
+            <h4
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case 'md':
+          return (
+            <h5
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case 'sm':
+        case 'xs':
+          return (
+            <h6
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        default:
+          return (
+            <h4
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+      }
+    }
+  )
+);
+
+const Heading = memo(
+  forwardRef<HTMLHeadingElement, IHeadingProps>(
+    ({ className, size = 'lg', as: AsComp, ...props }, ref) => {
+      const {
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        sub,
+        italic,
+        highlight,
+      } = props;
+
+      if (AsComp) {
+        return (
+          <AsComp
+            className={headingStyle({
+              size,
+              isTruncated,
+              bold,
+              underline,
+              strikeThrough,
+              sub,
+              italic,
+              highlight,
+              class: className,
+            })}
+            {...props}
+            ref={ref}
+          />
+        );
+      }
+
+      return (
+        <MappedHeading className={className} size={size} ref={ref} {...props} />
+      );
+    }
+  )
+);
+
+Heading.displayName = 'Heading';
+
+export { Heading };

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

@@ -0,0 +1,43 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+const baseStyle = isWeb
+  ? 'font-sans tracking-sm 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 headingStyle = tva({
+  base: `text-typography-900 font-bold font-heading tracking-sm my-0 ${baseStyle}`,
+  variants: {
+    isTruncated: {
+      true: 'truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+    size: {
+      '5xl': 'text-6xl',
+      '4xl': 'text-5xl',
+      '3xl': 'text-4xl',
+      '2xl': 'text-3xl',
+      'xl': 'text-2xl',
+      'lg': 'text-xl',
+      'md': 'text-lg',
+      'sm': 'text-base',
+      'xs': 'text-sm',
+    },
+  },
+});

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { hstackStyle } from './styles';
+
+type IHStackProps = ViewProps & VariantProps<typeof hstackStyle>;
+
+const HStack = React.forwardRef<React.ElementRef<typeof View>, IHStackProps>(
+  ({ className, space, reversed, ...props }, ref) => {
+    return (
+      <View
+        className={hstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { hstackStyle } from './styles';
+
+type IHStackProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof hstackStyle>;
+
+const HStack = React.forwardRef<React.ElementRef<'div'>, IHStackProps>(
+  ({ className, space, reversed, ...props }, ref) => {
+    return (
+      <div
+        className={hstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack };

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

@@ -0,0 +1,25 @@
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+
+const baseStyle = isWeb
+  ? 'flex relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
+export const hstackStyle = tva({
+  base: `flex-row ${baseStyle}`,
+  variants: {
+    space: {
+      'xs': 'gap-1',
+      'sm': 'gap-2',
+      'md': 'gap-3',
+      'lg': 'gap-4',
+      'xl': 'gap-5',
+      '2xl': 'gap-6',
+      '3xl': 'gap-7',
+      '4xl': 'gap-8',
+    },
+    reversed: {
+      true: 'flex-row-reverse',
+    },
+  },
+});

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

@@ -0,0 +1,52 @@
+'use client';
+import React from 'react';
+import { createImage } from '@gluestack-ui/image';
+import { Platform, Image as RNImage } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { cssInterop } from 'nativewind';
+
+const imageStyle = tva({
+  base: 'max-w-full',
+  variants: {
+    size: {
+      '2xs': 'h-6 w-6',
+      'xs': 'h-10 w-10',
+      'sm': 'h-16 w-16',
+      'md': 'h-20 w-20',
+      'lg': 'h-24 w-24',
+      'xl': 'h-32 w-32',
+      '2xl': 'h-64 w-64',
+      'full': 'h-full w-full',
+      'none': '',
+    },
+  },
+});
+
+const UIImage = createImage({ Root: RNImage });
+cssInterop(UIImage, { className: 'style' });
+
+type ImageProps = VariantProps<typeof imageStyle> &
+  React.ComponentProps<typeof UIImage>;
+const Image = React.forwardRef<
+  React.ElementRef<typeof UIImage>,
+  ImageProps & { className?: string }
+>(({ size = 'md', className, ...props }, ref) => {
+  return (
+    <UIImage
+      className={imageStyle({ size, class: className })}
+      {...props}
+      ref={ref}
+      //@ts-ignore
+      style={
+        Platform.OS === 'web'
+          ? // eslint-disable-next-line react-native/no-inline-styles
+            { height: 'revert-layer', width: 'revert-layer' }
+          : undefined
+      }
+    />
+  );
+});
+
+Image.displayName = 'Image';
+export { Image };

package/src/Components/Gluestack/image-background/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { ImageBackground as RNImageBackground } from 'react-native';
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+
+const imageBackgroundStyle = tva({});
+
+export const ImageBackground = React.forwardRef<
+  React.ElementRef<typeof RNImageBackground>,
+  React.ComponentProps<typeof RNImageBackground>
+>(({ className, ...props }, ref) => {
+  return (
+    <RNImageBackground
+      className={imageBackgroundStyle({
+        class: className,
+      })}
+      {...props}
+      ref={ref}
+    />
+  );
+});

package/src/Components/Gluestack/index.js

@@ -0,0 +1,116 @@
+import { Accordion } from './accordion';
+import { ActionSheet } from './actionsheet';
+import { Alert } from './alert';
+import { AlertDialog, AlertDialogBackdrop, AlertDialogContent, AlertDialogCloseButton, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, } from './alert-dialog';
+import { Avatar } from './avatar';
+import { Badge } from './badge';
+// import { BottomSheet } from './bottomsheet';
+import { Box } from './box';
+import { Box as BoxNative } from "./box/index.tsx"; // explicitly import the native version
+import { Button, ButtonText, ButtonSpinner, ButtonIcon, ButtonGroup, } from './button';
+import { Card } from './card';
+import { Center } from './center';
+import { Checkbox, CheckboxGroup, } from './checkbox';
+import { Divider } from './divider';
+import { Drawer } from './drawer';
+import { Fab } from './fab';
+import { FlatList } from './flat-list';
+import { FormControl } from './form-control';
+import { Grid } from './grid';
+import { Heading } from './heading';
+import { HStack } from './hstack';
+import { HStack as HStackNative } from "./hstack/index.tsx"; // explicitly import the native version
+import { Icon } from './icon';
+import { Image } from './image';
+import { ImageBackground } from './image-background';
+import { Input, InputField, InputIcon, InputSlot, } from './input';
+import { InputAccessoryView } from './input-accessory-view';
+import { KeyboardAvoidingView } from './keyboard-avoiding-view';
+import { Link } from './link';
+import { Menu } from './menu';
+import { Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter, } from './modal';
+import { Popover, PopoverBackdrop, PopoverContent, PopoverBody, } from './popover';
+import { Portal } from './portal';
+import { Pressable } from './pressable';
+import { Progress } from './progress';
+import { Radio, RadioGroup, } from './radio';
+import { RefreshControl } from './refresh-control';
+import { SafeAreaView } from './safe-area-view';
+import { ScrollView } from './scroll-view';
+import { SectionList } from './section-list';
+import { Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectIcon,  SelectItem,  SelectPortal, SelectTrigger, } from './select';
+import { Skeleton } from './skeleton';
+import { Slider } from './slider';
+import { Spinner } from './spinner';
+import { StatusBar } from './status-bar';
+import { Switch } from './switch';
+import { Table } from './table';
+import { Text } from './text';
+import { Text as TextNative } from './text/index.tsx'; // explicitly import the native version
+import { Textarea, TextareaInput } from './textarea';
+import { Toast } from './toast';
+import { Tooltip } from './tooltip';
+import { View } from './view';
+import { VirtualizedList } from './virtualized-list';
+import { VStack } from './vstack';
+import { VStack as VStackNative } from "./vstack/index.tsx"; // explicitly import the native version
+
+
+export {
+	Accordion,
+	ActionSheet,
+	Alert,
+	AlertDialog, AlertDialogBackdrop, AlertDialogContent, AlertDialogCloseButton, AlertDialogHeader, AlertDialogBody, AlertDialogFooter,
+	Avatar,
+	Badge,
+	// BottomSheet,
+	Box,
+	BoxNative,
+	Button, ButtonText, ButtonSpinner, ButtonIcon, ButtonGroup,
+	Card,
+	Center,
+	Checkbox, CheckboxGroup,
+	Divider,
+	Drawer,
+	Fab,
+	FlatList,
+	FormControl,
+	Grid,
+	Heading,
+	HStack,
+	HStackNative,
+	Icon,
+	Image,
+	ImageBackground,
+	Input, InputField, InputIcon, InputSlot,
+	InputAccessoryView,
+	KeyboardAvoidingView,
+	Link,
+	Menu,
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Popover, PopoverBackdrop, PopoverContent, PopoverBody,
+	Portal,
+	Pressable,
+	Progress,
+	Radio, RadioGroup,
+	RefreshControl,
+	SafeAreaView,
+	ScrollView,
+	SectionList,
+	Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectIcon,  SelectItem,  SelectPortal, SelectTrigger,
+	Skeleton,
+	Slider,
+	Spinner,
+	StatusBar,
+	Switch,
+	Table,
+	Text,
+	TextNative,
+	Textarea, TextareaInput,
+	Toast,
+	Tooltip,
+	View,
+	VirtualizedList,
+	VStack,
+	VStackNative,
+};