@onehat/ui 0.3.381 → 0.4.1

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

@@ -0,0 +1,305 @@
+'use client';
+import React, { useMemo } from 'react';
+import { createCheckbox } from '@gluestack-ui/checkbox';
+import { View, Pressable, Text } from 'react-native';
+import type { TextProps, ViewProps } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { Svg } from 'react-native-svg';
+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';
+import { Platform } from 'react-native';
+
+const IndicatorWrapper = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ViewProps
+>(({ ...props }, ref) => {
+  return <View {...props} ref={ref} />;
+});
+
+const LabelWrapper = React.forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ ...props }, ref) => {
+    return <Text {...props} ref={ref} />;
+  }
+);
+
+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 IconWrapper = React.forwardRef<
+  React.ElementRef<typeof PrimitiveIcon>,
+  IPrimitiveIcon
+>(({ ...props }, ref) => {
+  return <PrimitiveIcon {...props} ref={ref} />;
+});
+
+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 SCOPE = 'CHECKBOX';
+const UICheckbox = createCheckbox({
+  // @ts-ignore
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(View, SCOPE)
+      : withStyleContextAndStates(Pressable, SCOPE),
+  Group: Platform.OS === 'web' ? View : withStates(View),
+  Icon: Platform.OS === 'web' ? IconWrapper : withStates(IconWrapper),
+  Label: Platform.OS === 'web' ? LabelWrapper : withStates(LabelWrapper),
+  Indicator:
+    Platform.OS === 'web' ? IndicatorWrapper : withStates(IndicatorWrapper),
+});
+
+cssInterop(UICheckbox, { className: 'style' });
+cssInterop(UICheckbox.Group, { className: 'style' });
+cssInterop(LabelWrapper, { className: 'style' });
+cssInterop(IndicatorWrapper, { className: 'style' });
+//@ts-ignore
+cssInterop(IconWrapper, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      //@ts-ignore
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const checkboxStyle = tva({
+  base: 'group/checkbox flex-row items-center justify-start web:cursor-pointer data-[disabled=true]:cursor-not-allowed',
+  variants: {
+    size: {
+      lg: 'gap-2',
+      md: 'gap-2',
+      sm: 'gap-1.5',
+    },
+  },
+});
+
+const checkboxIndicatorStyle = tva({
+  base: 'justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-indicator-primary data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 data-[hover=true]:data-[checked=false]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[checked=true]:bg-primary-700 data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[checked=true]:data-[disabled=true]:border-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:bg-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[active=true]:data-[checked=true]:bg-primary-800 data-[active=true]:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40',
+  parentVariants: {
+    size: {
+      lg: 'w-6 h-6 border-[3px]',
+      md: 'w-5 h-5 border-2',
+      sm: 'w-4 h-4 border-2',
+    },
+  },
+});
+
+const checkboxLabelStyle = tva({
+  base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[checked=true]:text-typography-900 data-[hover=true]:data-[checked=true]:data-[disabled=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-400 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
+  parentVariants: {
+    size: {
+      lg: 'text-lg',
+      md: 'text-base',
+      sm: 'text-sm',
+    },
+  },
+});
+
+const checkboxIconStyle = tva({
+  base: 'text-typography-50 fill-none',
+
+  parentVariants: {
+    size: {
+      sm: 'h-3 w-3',
+      md: 'h-4 w-4',
+      lg: 'h-5 w-5',
+    },
+  },
+});
+
+const CheckboxGroup = UICheckbox.Group;
+
+type ICheckboxProps = React.ComponentPropsWithoutRef<typeof UICheckbox> &
+  VariantProps<typeof checkboxStyle>;
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof UICheckbox>,
+  ICheckboxProps
+>(({ className, size = 'md', ...props }, ref) => {
+  return (
+    <UICheckbox
+      className={checkboxStyle({
+        class: className,
+        size,
+      })}
+      {...props}
+      context={{
+        size,
+      }}
+      ref={ref}
+    />
+  );
+});
+
+type ICheckboxIndicatorProps = React.ComponentPropsWithoutRef<
+  typeof UICheckbox.Indicator
+> &
+  VariantProps<typeof checkboxIndicatorStyle>;
+
+const CheckboxIndicator = React.forwardRef<
+  React.ElementRef<typeof UICheckbox.Indicator>,
+  ICheckboxIndicatorProps
+>(({ className, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UICheckbox.Indicator
+      className={checkboxIndicatorStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+      })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+type ICheckboxLabelProps = React.ComponentPropsWithoutRef<
+  typeof UICheckbox.Label
+> &
+  VariantProps<typeof checkboxLabelStyle>;
+const CheckboxLabel = React.forwardRef<
+  React.ElementRef<typeof UICheckbox.Label>,
+  ICheckboxLabelProps
+>(({ className, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+  return (
+    <UICheckbox.Label
+      className={checkboxLabelStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+      })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+type ICheckboxIconProps = React.ComponentPropsWithoutRef<
+  typeof UICheckbox.Icon
+> &
+  VariantProps<typeof checkboxIconStyle>;
+
+const CheckboxIcon = React.forwardRef<
+  React.ElementRef<typeof UICheckbox.Icon>,
+  ICheckboxIconProps
+>(({ className, size, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UICheckbox.Icon
+        ref={ref}
+        {...props}
+        className={checkboxIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UICheckbox.Icon
+        ref={ref}
+        {...props}
+        className={checkboxIconStyle({ class: className })}
+      />
+    );
+  }
+
+  return (
+    <UICheckbox.Icon
+      className={checkboxIconStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+        size,
+      })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+Checkbox.displayName = 'Checkbox';
+CheckboxIndicator.displayName = 'CheckboxIndicator';
+CheckboxLabel.displayName = 'CheckboxLabel';
+CheckboxIcon.displayName = 'CheckboxIcon';
+
+export {
+  Checkbox,
+  CheckboxIndicator,
+  CheckboxLabel,
+  CheckboxIcon,
+  CheckboxGroup,
+};

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

@@ -0,0 +1,44 @@
+'use client';
+import React from 'react';
+import { createDivider } from '@gluestack-ui/divider';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const dividerStyle = tva({
+  base: 'bg-background-200',
+  variants: {
+    orientation: {
+      vertical: 'w-px h-full',
+      horizontal: 'h-px w-full',
+    },
+  },
+});
+
+const UIDivider = createDivider({ Root: View });
+
+cssInterop(UIDivider, { className: 'style' });
+
+type IUIDividerProps = React.ComponentPropsWithoutRef<typeof UIDivider> &
+  VariantProps<typeof dividerStyle>;
+
+const Divider = React.forwardRef<
+  React.ElementRef<typeof UIDivider>,
+  IUIDividerProps
+>(({ className, orientation = 'horizontal', ...props }, ref) => {
+  return (
+    <UIDivider
+      ref={ref}
+      {...props}
+      className={dividerStyle({
+        orientation,
+        class: className,
+      })}
+    />
+  );
+});
+
+Divider.displayName = 'Divider';
+
+export { Divider };

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

@@ -0,0 +1,354 @@
+'use client';
+import React from 'react';
+import { createModal as createDrawer } from '@gluestack-ui/modal';
+import {
+  Pressable,
+  View,
+  ScrollView,
+  Platform,
+  Dimensions,
+} from 'react-native';
+import {
+  Motion,
+  AnimatePresence,
+  createMotionAnimatedComponent,
+} from '@legendapp/motion';
+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';
+
+const AnimatedPressable = createMotionAnimatedComponent(Pressable);
+const SCOPE = 'MODAL';
+const screenWidth = Dimensions.get('window').width;
+const screenHeight = Dimensions.get('window').height;
+const sizes: { [key: string]: number } = {
+  sm: 0.25,
+  md: 0.5,
+  lg: 0.75,
+  full: 1,
+};
+
+const UIDrawer = createDrawer({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(View, SCOPE)
+      : withStyleContextAndStates(View, SCOPE),
+  Backdrop: AnimatedPressable,
+  Content: Motion.View,
+  Body: ScrollView,
+  CloseButton: Pressable,
+  Footer: View,
+  Header: View,
+  AnimatePresence: AnimatePresence,
+});
+cssInterop(UIDrawer, { className: 'style' });
+cssInterop(UIDrawer.Backdrop, { className: 'style' });
+cssInterop(UIDrawer.Content, { className: 'style' });
+cssInterop(UIDrawer.CloseButton, { className: 'style' });
+cssInterop(UIDrawer.Header, { className: 'style' });
+cssInterop(UIDrawer.Body, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIDrawer.Footer, { className: 'style' });
+
+const drawerStyle = tva({
+  base: 'w-full h-full web:pointer-events-none relative',
+  variants: {
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+      full: '',
+    },
+    anchor: {
+      left: 'items-start',
+      right: 'items-end',
+      top: 'justify-start',
+      bottom: 'justify-end',
+    },
+  },
+});
+
+const drawerBackdropStyle = tva({
+  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
+});
+
+const drawerContentStyle = tva({
+  base: 'bg-background-0 overflow-scroll border-outline-100 p-6 absolute',
+  parentVariants: {
+    size: {
+      sm: 'w-1/4',
+      md: 'w-1/2',
+      lg: 'w-3/4',
+      full: 'w-full',
+    },
+    anchor: {
+      left: 'h-full border-r',
+      right: 'h-full border-l',
+      top: 'w-full border-b',
+      bottom: 'w-full border-t',
+    },
+  },
+  parentCompoundVariants: [
+    {
+      anchor: 'top',
+      size: 'sm',
+      class: 'h-1/4',
+    },
+    {
+      anchor: 'top',
+      size: 'md',
+      class: 'h-1/2',
+    },
+    {
+      anchor: 'top',
+      size: 'lg',
+      class: 'h-3/4',
+    },
+    {
+      anchor: 'top',
+      size: 'full',
+      class: 'h-full',
+    },
+    {
+      anchor: 'bottom',
+      size: 'sm',
+      class: 'h-1/4',
+    },
+    {
+      anchor: 'bottom',
+      size: 'md',
+      class: 'h-1/2',
+    },
+    {
+      anchor: 'bottom',
+      size: 'lg',
+      class: 'h-3/4',
+    },
+    {
+      anchor: 'bottom',
+      size: 'full',
+      class: 'h-full',
+    },
+  ],
+});
+
+const drawerCloseButtonStyle = tva({
+  base: 'z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',
+});
+
+const drawerHeaderStyle = tva({
+  base: 'justify-between items-center flex-row',
+});
+
+const drawerBodyStyle = tva({
+  base: 'mt-4 mb-6 shrink-0',
+});
+
+const drawerFooterStyle = tva({
+  base: 'flex-row justify-end items-center',
+});
+
+type IDrawerProps = React.ComponentProps<typeof UIDrawer> &
+  VariantProps<typeof drawerStyle> & { className?: string };
+
+type IDrawerBackdropProps = React.ComponentProps<typeof UIDrawer.Backdrop> &
+  VariantProps<typeof drawerBackdropStyle> & { className?: string };
+
+type IDrawerContentProps = React.ComponentProps<typeof UIDrawer.Content> &
+  VariantProps<typeof drawerContentStyle> & { className?: string };
+
+type IDrawerHeaderProps = React.ComponentProps<typeof UIDrawer.Header> &
+  VariantProps<typeof drawerHeaderStyle> & { className?: string };
+
+type IDrawerBodyProps = React.ComponentProps<typeof UIDrawer.Body> &
+  VariantProps<typeof drawerBodyStyle> & { className?: string };
+
+type IDrawerFooterProps = React.ComponentProps<typeof UIDrawer.Footer> &
+  VariantProps<typeof drawerFooterStyle> & { className?: string };
+
+type IDrawerCloseButtonProps = React.ComponentProps<
+  typeof UIDrawer.CloseButton
+> &
+  VariantProps<typeof drawerCloseButtonStyle> & { className?: string };
+
+const Drawer = React.forwardRef<
+  React.ElementRef<typeof UIDrawer>,
+  IDrawerProps
+>(({ className, size = 'sm', anchor = 'left', ...props }, ref) => {
+  return (
+    <UIDrawer
+      ref={ref}
+      {...props}
+      pointerEvents="box-none"
+      className={drawerStyle({ size, anchor, class: className })}
+      context={{ size, anchor }}
+    />
+  );
+});
+
+const DrawerBackdrop = React.forwardRef<
+  React.ElementRef<typeof UIDrawer.Backdrop>,
+  IDrawerBackdropProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIDrawer.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={drawerBackdropStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof UIDrawer.Content>,
+  IDrawerContentProps
+>(({ className, ...props }, ref) => {
+  const { size: parentSize, anchor: parentAnchor } = useStyleContext(SCOPE);
+
+  const drawerHeight = screenHeight * (sizes[parentSize] || sizes.md);
+  const drawerWidth = screenWidth * (sizes[parentSize] || sizes.md);
+
+  const isHorizontal = parentAnchor === 'left' || parentAnchor === 'right';
+
+  const initialObj = isHorizontal
+    ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }
+    : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };
+
+  const animateObj = isHorizontal ? { x: 0 } : { y: 0 };
+
+  const exitObj = isHorizontal
+    ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }
+    : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };
+
+  const customClass = isHorizontal
+    ? `top-0 ${parentAnchor === 'left' ? 'left-0' : 'right-0'}`
+    : `left-0 ${parentAnchor === 'top' ? 'top-0' : 'bottom-0'}`;
+
+  return (
+    <UIDrawer.Content
+      ref={ref}
+      initial={initialObj}
+      animate={animateObj}
+      exit={exitObj}
+      transition={{
+        type: 'timing',
+        duration: 300,
+      }}
+      {...props}
+      className={drawerContentStyle({
+        parentVariants: {
+          size: parentSize,
+          anchor: parentAnchor,
+        },
+        class: `${className} ${customClass}`,
+      })}
+      pointerEvents="auto"
+    />
+  );
+});
+
+const DrawerHeader = React.forwardRef<
+  React.ElementRef<typeof UIDrawer.Header>,
+  IDrawerHeaderProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIDrawer.Header
+      ref={ref}
+      {...props}
+      className={drawerHeaderStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+const DrawerBody = React.forwardRef<
+  React.ElementRef<typeof UIDrawer.Body>,
+  IDrawerBodyProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIDrawer.Body
+      ref={ref}
+      {...props}
+      className={drawerBodyStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+const DrawerFooter = React.forwardRef<
+  React.ElementRef<typeof UIDrawer.Footer>,
+  IDrawerFooterProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIDrawer.Footer
+      ref={ref}
+      {...props}
+      className={drawerFooterStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+const DrawerCloseButton = React.forwardRef<
+  React.ElementRef<typeof UIDrawer.CloseButton>,
+  IDrawerCloseButtonProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UIDrawer.CloseButton
+      ref={ref}
+      {...props}
+      className={drawerCloseButtonStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+Drawer.displayName = 'Drawer';
+DrawerBackdrop.displayName = 'DrawerBackdrop';
+DrawerContent.displayName = 'DrawerContent';
+DrawerHeader.displayName = 'DrawerHeader';
+DrawerBody.displayName = 'DrawerBody';
+DrawerFooter.displayName = 'DrawerFooter';
+DrawerCloseButton.displayName = 'DrawerCloseButton';
+
+export {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+};