@onehat/ui 0.3.381 → 0.4.1

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

@@ -0,0 +1,287 @@
+'use client';
+import React, { useMemo } from 'react';
+import { createInput } from '@gluestack-ui/input';
+import { Svg } from 'react-native-svg';
+import { View, Pressable, 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 SCOPE = 'INPUT';
+
+type IPrimitiveIcon = {
+  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 InputWrapper = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentProps<typeof View>
+>(({ ...props }, ref) => {
+  return <View {...props} ref={ref} />;
+});
+
+const UIInput = createInput({
+  // @ts-ignore
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(InputWrapper, SCOPE)
+      : withStyleContextAndStates(InputWrapper, SCOPE),
+  Icon: PrimitiveIcon,
+  Slot: Pressable,
+  Input: Platform.OS === 'web' ? TextInput : withStates(TextInput),
+});
+
+const inputStyle = tva({
+  base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300 items-center',
+
+  variants: {
+    size: {
+      xl: 'h-12',
+      lg: 'h-11',
+      md: 'h-10',
+      sm: 'h-9',
+    },
+
+    variant: {
+      underlined:
+        'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700',
+
+      outline:
+        'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
+
+      rounded:
+        'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
+    },
+  },
+});
+
+const inputIconStyle = tva({
+  base: 'justify-center items-center text-typography-400 fill-none',
+  parentVariants: {
+    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',
+    },
+  },
+});
+
+const inputSlotStyle = tva({
+  base: 'justify-center items-center web:disabled:cursor-not-allowed',
+});
+
+const inputFieldStyle = tva({
+  base: 'flex-1 text-typography-900 py-auto px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+
+  parentVariants: {
+    variant: {
+      underlined: 'web:outline-0 web:outline-none px-0',
+      outline: 'web:outline-0 web:outline-none',
+      rounded: 'web:outline-0 web:outline-none px-4',
+    },
+
+    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',
+    },
+  },
+});
+
+cssInterop(InputWrapper, { className: 'style' });
+cssInterop(UIInput.Slot, { className: 'style' });
+cssInterop(UIInput.Input, {
+  className: { target: 'style', nativeStyleToProp: { textAlign: true } },
+});
+//@ts-ignore
+cssInterop(UIInput.Icon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+type IInputProps = React.ComponentProps<typeof UIInput> &
+  VariantProps<typeof inputStyle> & { className?: string };
+const Input = React.forwardRef<React.ElementRef<typeof UIInput>, IInputProps>(
+  ({ className, variant = 'outline', size = 'md', ...props }, ref) => {
+    return (
+      <UIInput
+        ref={ref}
+        {...props}
+        className={inputStyle({ variant, size, class: className })}
+        context={{ variant, size }}
+      />
+    );
+  }
+);
+
+type IInputIconProps = React.ComponentProps<typeof UIInput.Icon> & {
+  className?: string;
+};
+
+const InputIcon = React.forwardRef<
+  React.ElementRef<typeof UIInput.Icon>,
+  IInputIconProps
+>(({ className, size, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UIInput.Icon
+        ref={ref}
+        {...props}
+        className={inputIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIInput.Icon
+        ref={ref}
+        {...props}
+        className={inputIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIInput.Icon
+      ref={ref}
+      {...props}
+      className={inputIconStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+type IInputSlotProps = React.ComponentProps<typeof UIInput.Slot> &
+  VariantProps<typeof inputSlotStyle> & { className?: string };
+
+const InputSlot = React.forwardRef<
+  React.ElementRef<typeof UIInput.Slot>,
+  IInputSlotProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIInput.Slot
+      ref={ref}
+      {...props}
+      className={inputSlotStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+type IInputFieldProps = React.ComponentProps<typeof UIInput.Input> &
+  VariantProps<typeof inputFieldStyle> & { className?: string };
+
+const InputField = React.forwardRef<
+  React.ElementRef<typeof UIInput.Input>,
+  IInputFieldProps
+>(({ className, ...props }, ref) => {
+  const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIInput.Input
+      ref={ref}
+      {...props}
+      className={inputFieldStyle({
+        parentVariants: {
+          variant: parentVariant,
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+InputIcon.displayName = 'InputIcon';
+InputSlot.displayName = 'InputSlot';
+InputField.displayName = 'InputField';
+
+export { Input, InputField, InputIcon, InputSlot };

package/src/Components/Gluestack/input-accessory-view/index.tsx

@@ -0,0 +1,2 @@
+'use client';
+export { InputAccessoryView } from 'react-native';

package/src/Components/Gluestack/keyboard-avoiding-view/index.tsx

@@ -0,0 +1,2 @@
+'use client';
+export { KeyboardAvoidingView } from 'react-native';

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

@@ -0,0 +1,107 @@
+'use client';
+import { createLink } from '@gluestack-ui/link';
+import { Pressable, Platform } from 'react-native';
+import { Text } from 'react-native';
+
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } 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';
+
+import React from 'react';
+export const UILink = createLink({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(Pressable)
+      : withStyleContextAndStates(Pressable),
+  Text: Platform.OS === 'web' ? Text : withStates(Text),
+});
+
+cssInterop(UILink, { className: 'style' });
+cssInterop(UILink.Text, { className: 'style' });
+
+const linkStyle = tva({
+  base: 'group/link web:outline-0 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-primary data-[focus-visible=true]:web:outline-0 data-[disabled=true]:opacity-4 ',
+});
+
+const linkTextStyle = tva({
+  base: 'underline text-info-700 data-[hover=true]:text-info-600 data-[hover=true]:no-underline data-[active=true]:text-info-700 font-normal font-body web:font-sans web:tracking-sm web:my-0 web:bg-transparent web:border-0 web:box-border web:display-inline web:list-none web:margin-0 web:padding-0 web:position-relative web:text-start web:whitespace-pre-wrap web:word-wrap-break-word',
+
+  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',
+    },
+  },
+});
+
+type ILinkProps = React.ComponentProps<typeof UILink> &
+  VariantProps<typeof linkStyle> & { className?: string };
+
+const Link = React.forwardRef<React.ElementRef<typeof UILink>, ILinkProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <UILink
+        ref={ref}
+        {...props}
+        className={linkStyle({ class: className })}
+      />
+    );
+  }
+);
+
+type ILinkTextProps = React.ComponentProps<typeof UILink.Text> &
+  VariantProps<typeof linkTextStyle> & { className?: string };
+
+const LinkText = React.forwardRef<
+  React.ElementRef<typeof UILink.Text>,
+  ILinkTextProps
+>(({ className, size = 'md', ...props }, ref) => {
+  return (
+    <UILink.Text
+      ref={ref}
+      {...props}
+      className={linkTextStyle({
+        class: className,
+        size,
+      })}
+    />
+  );
+});
+
+Link.displayName = 'Link';
+LinkText.displayName = 'LinkText';
+
+export { Link, LinkText };

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

@@ -0,0 +1,210 @@
+'use client';
+import React from 'react';
+import { createMenu } from '@gluestack-ui/menu';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { cssInterop } from 'nativewind';
+import { Pressable, Text, Platform, View } from 'react-native';
+import { Motion, AnimatePresence } from '@legendapp/motion';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
+
+const menuStyle = tva({
+  base: 'rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5',
+});
+
+const menuItemStyle = tva({
+  base: 'min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent',
+});
+
+const menuBackdropStyle = tva({
+  base: 'absolute top-0 bottom-0 left-0 right-0 web:cursor-default',
+  // add this classnames if you want to give background color to backdrop
+  // opacity-50 bg-background-500,
+});
+
+const menuSeparatorStyle = tva({
+  base: 'bg-background-200 h-px w-full',
+});
+
+const menuItemLabelStyle = tva({
+  base: 'text-typography-700 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-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',
+    },
+  },
+});
+
+const BackdropPressable = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable> &
+    VariantProps<typeof menuBackdropStyle>
+>(({ className, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      className={menuBackdropStyle({
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+type IMenuItemProps = VariantProps<typeof menuItemStyle> & {
+  className?: string;
+} & React.ComponentPropsWithoutRef<typeof Pressable>;
+
+const Item = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  IMenuItemProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      className={menuItemStyle({
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+const Separator = React.forwardRef(
+  ({ className, ...props }: any, ref?: any) => {
+    return (
+      <View
+        ref={ref}
+        className={menuSeparatorStyle({ class: className })}
+        {...props}
+      />
+    );
+  }
+);
+export const UIMenu = createMenu({
+  Root: Motion.View,
+  Item: Platform.OS === 'web' ? Item : withStates(Item),
+  Label: Text,
+  Backdrop: BackdropPressable,
+  AnimatePresence: AnimatePresence,
+  Separator: Separator,
+});
+
+cssInterop(UIMenu, { className: 'style' });
+cssInterop(UIMenu.ItemLabel, { className: 'style' });
+
+type IMenuProps = React.ComponentProps<typeof UIMenu> &
+  VariantProps<typeof menuStyle> & { className?: string };
+type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> &
+  VariantProps<typeof menuItemLabelStyle> & { className?: string };
+
+const Menu = React.forwardRef<React.ElementRef<typeof UIMenu>, IMenuProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <UIMenu
+        ref={ref}
+        initial={{
+          opacity: 0,
+          scale: 0.8,
+        }}
+        animate={{
+          opacity: 1,
+          scale: 1,
+        }}
+        exit={{
+          opacity: 0,
+          scale: 0.8,
+        }}
+        transition={{
+          type: 'timing',
+          duration: 100,
+        }}
+        className={menuStyle({
+          class: className,
+        })}
+        {...props}
+      />
+    );
+  }
+);
+
+const MenuItem = UIMenu.Item;
+
+const MenuItemLabel = React.forwardRef<
+  React.ElementRef<typeof UIMenu.ItemLabel>,
+  IMenuItemLabelProps
+>(
+  (
+    {
+      className,
+      isTruncated,
+      bold,
+      underline,
+      strikeThrough,
+      size = 'md',
+      sub,
+      italic,
+      highlight,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <UIMenu.ItemLabel
+        ref={ref}
+        className={menuItemLabelStyle({
+          isTruncated,
+          bold,
+          underline,
+          strikeThrough,
+          size,
+          sub,
+          italic,
+          highlight,
+          class: className,
+        })}
+        {...props}
+      />
+    );
+  }
+);
+
+const MenuSeparator = UIMenu.Separator;
+
+Menu.displayName = 'Menu';
+MenuItem.displayName = 'MenuItem';
+MenuItemLabel.displayName = 'MenuItemLabel';
+MenuSeparator.displayName = 'MenuSeperator';
+export { Menu, MenuItem, MenuItemLabel, MenuSeparator };