@onehat/ui 0.3.381 → 0.4.0

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

@@ -0,0 +1,494 @@
+'use client';
+import React, { useMemo } from 'react';
+import { createButton } from '@gluestack-ui/button';
+import { Svg } from 'react-native-svg';
+import type { PressableProps } 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 {
+  ActivityIndicator,
+  Pressable,
+  Text,
+  View,
+  Platform,
+} from 'react-native';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const SCOPE = 'BUTTON';
+const ButtonWrapper = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  PressableProps
+>(({ ...props }, ref) => {
+  return <Pressable {...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 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 Root =
+  Platform.OS === 'web'
+    ? withStyleContext(ButtonWrapper, SCOPE)
+    : withStyleContextAndStates(ButtonWrapper, SCOPE);
+
+const UIButton = createButton({
+  Root: Root,
+  Text,
+  Group: View,
+  Spinner: ActivityIndicator,
+  Icon: withStates(PrimitiveIcon),
+});
+
+cssInterop(Root, { className: 'style' });
+cssInterop(UIButton.Text, { className: 'style' });
+cssInterop(UIButton.Group, { className: 'style' });
+cssInterop(UIButton.Spinner, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+//@ts-ignore
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      //@ts-ignore
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const buttonStyle = tva({
+  base: 'group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2',
+  variants: {
+    action: {
+      primary:
+        'bg-primary-500 data-[hover=true]:bg-primary-600 data-[active=true]:bg-primary-700 border-primary-300 data-[hover=true]:border-primary-400 data-[active=true]:border-primary-500 data-[focus-visible=true]:web:ring-indicator-info',
+      secondary:
+        'bg-secondary-500 border-secondary-300 data-[hover=true]:bg-secondary-600 data-[hover=true]:border-secondary-400 data-[active=true]:bg-secondary-700 data-[active=true]:border-secondary-500 data-[focus-visible=true]:web:ring-indicator-info',
+      positive:
+        'bg-success-500 border-success-300 data-[hover=true]:bg-success-600 data-[hover=true]:border-success-400 data-[active=true]:bg-success-700 data-[active=true]:border-success-500 data-[focus-visible=true]:web:ring-indicator-info',
+      negative:
+        'bg-error-500 border-error-300 data-[hover=true]:bg-error-600 data-[hover=true]:border-error-400 data-[active=true]:bg-error-700 data-[active=true]:border-error-500 data-[focus-visible=true]:web:ring-indicator-info',
+      default:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+    variant: {
+      link: 'px-0',
+      outline:
+        'bg-transparent border data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+      solid: '',
+    },
+
+    size: {
+      xs: 'px-3.5 h-8',
+      sm: 'px-4 h-9',
+      md: 'px-5 h-10',
+      lg: 'px-6 h-11',
+      xl: 'px-7 h-12',
+    },
+  },
+  compoundVariants: [
+    {
+      action: 'primary',
+      variant: 'link',
+      class:
+        'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'secondary',
+      variant: 'link',
+      class:
+        'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'positive',
+      variant: 'link',
+      class:
+        'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'negative',
+      variant: 'link',
+      class:
+        'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'primary',
+      variant: 'outline',
+      class:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'secondary',
+      variant: 'outline',
+      class:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'positive',
+      variant: 'outline',
+      class:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'negative',
+      variant: 'outline',
+      class:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+  ],
+});
+
+const buttonTextStyle = tva({
+  base: 'text-typography-0 font-semibold web:select-none',
+  parentVariants: {
+    action: {
+      primary:
+        'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700',
+      secondary:
+        'text-secondary-600 data-[hover=true]:text-secondary-600 data-[active=true]:text-secondary-700',
+      positive:
+        'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700',
+      negative:
+        'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700',
+    },
+    variant: {
+      link: 'data-[hover=true]:underline data-[active=true]:underline',
+      outline: '',
+      solid:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+  },
+  parentCompoundVariants: [
+    {
+      variant: 'solid',
+      action: 'primary',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'secondary',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'positive',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'negative',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'outline',
+      action: 'primary',
+      class:
+        'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
+    },
+    {
+      variant: 'outline',
+      action: 'secondary',
+      class:
+        'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
+    },
+    {
+      variant: 'outline',
+      action: 'positive',
+      class:
+        'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
+    },
+    {
+      variant: 'outline',
+      action: 'negative',
+      class:
+        'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
+    },
+  ],
+});
+
+const buttonIconStyle = tva({
+  base: 'fill-none',
+  parentVariants: {
+    variant: {
+      link: 'data-[hover=true]:underline data-[active=true]:underline',
+      outline: '',
+      solid:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    size: {
+      xs: 'h-3.5 w-3.5',
+      sm: 'h-4 w-4',
+      md: 'h-[18px] w-[18px]',
+      lg: 'h-[18px] w-[18px]',
+      xl: 'h-5 w-5',
+    },
+    action: {
+      primary:
+        'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700',
+      secondary:
+        'text-secondary-600 data-[hover=true]:text-secondary-600 data-[active=true]:text-secondary-700',
+      positive:
+        'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700',
+
+      negative:
+        'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700',
+    },
+  },
+  parentCompoundVariants: [
+    {
+      variant: 'solid',
+      action: 'primary',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'secondary',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'positive',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'negative',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+  ],
+});
+
+const buttonGroupStyle = tva({
+  base: '',
+  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',
+    },
+    isAttached: {
+      true: 'gap-0',
+    },
+  },
+});
+
+type IButtonProps = Omit<
+  React.ComponentPropsWithoutRef<typeof UIButton>,
+  'context'
+> &
+  VariantProps<typeof buttonStyle> & { className?: string };
+
+const Button = React.forwardRef<
+  React.ElementRef<typeof UIButton>,
+  IButtonProps
+>(
+  (
+    { className, variant = 'solid', size = 'md', action = 'primary', ...props },
+    ref
+  ) => {
+    return (
+      <UIButton
+        ref={ref}
+        {...props}
+        className={buttonStyle({ variant, size, action, class: className })}
+        context={{ variant, size, action }}
+      />
+    );
+  }
+);
+
+type IButtonTextProps = React.ComponentPropsWithoutRef<typeof UIButton.Text> &
+  VariantProps<typeof buttonTextStyle> & { className?: string };
+
+const ButtonText = React.forwardRef<
+  React.ElementRef<typeof UIButton.Text>,
+  IButtonTextProps
+>(({ className, variant, size, action, ...props }, ref) => {
+  const {
+    variant: parentVariant,
+    size: parentSize,
+    action: parentAction,
+  } = useStyleContext(SCOPE);
+
+  return (
+    <UIButton.Text
+      ref={ref}
+      {...props}
+      className={buttonTextStyle({
+        parentVariants: {
+          variant: parentVariant,
+          size: parentSize,
+          action: parentAction,
+        },
+        variant,
+        size,
+        action,
+        class: className,
+      })}
+    />
+  );
+});
+
+const ButtonSpinner = UIButton.Spinner;
+
+type IButtonIcon = React.ComponentPropsWithoutRef<typeof UIButton.Icon> &
+  VariantProps<typeof buttonIconStyle> & {
+    className?: string | undefined;
+    as?: React.ElementType;
+  };
+
+const ButtonIcon = React.forwardRef<
+  React.ElementRef<typeof UIButton.Icon>,
+  IButtonIcon
+>(({ className, size, ...props }, ref) => {
+  const {
+    variant: parentVariant,
+    size: parentSize,
+    action: parentAction,
+  } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UIButton.Icon
+        ref={ref}
+        {...props}
+        className={buttonIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIButton.Icon
+        ref={ref}
+        {...props}
+        className={buttonIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIButton.Icon
+      {...props}
+      className={buttonIconStyle({
+        parentVariants: {
+          size: parentSize,
+          variant: parentVariant,
+          action: parentAction,
+        },
+        size,
+        class: className,
+      })}
+      ref={ref}
+    />
+  );
+});
+
+type IButtonGroupProps = React.ComponentPropsWithoutRef<typeof UIButton.Group> &
+  VariantProps<typeof buttonGroupStyle>;
+
+const ButtonGroup = React.forwardRef<
+  React.ElementRef<typeof UIButton.Group>,
+  IButtonGroupProps
+>(({ className, space = 'md', isAttached = false, ...props }, ref) => {
+  return (
+    <UIButton.Group
+      className={buttonGroupStyle({ class: className, space, isAttached })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+Button.displayName = 'Button';
+ButtonText.displayName = 'ButtonText';
+ButtonSpinner.displayName = 'ButtonSpinner';
+ButtonIcon.displayName = 'ButtonIcon';
+ButtonGroup.displayName = 'ButtonGroup';
+
+export { Button, ButtonText, ButtonSpinner, ButtonIcon, ButtonGroup };

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View, ViewProps } from 'react-native';
+import { cardStyle } from './styles';
+
+type ICardProps = ViewProps &
+  VariantProps<typeof cardStyle> & { className?: string };
+
+const Card = React.forwardRef<React.ElementRef<typeof View>, ICardProps>(
+  ({ className, size = 'md', variant = 'elevated', ...props }, ref) => {
+    return (
+      <View
+        className={cardStyle({ size, variant, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export { Card };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { cardStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type ICardProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof cardStyle>;
+
+const Card = React.forwardRef<HTMLDivElement, ICardProps>(
+  ({ className, size = 'md', variant = 'elevated', ...props }, ref) => {
+    return (
+      <div
+        className={cardStyle({ size, variant, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export { Card };

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

@@ -0,0 +1,20 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+
+export const cardStyle = tva({
+  base: baseStyle,
+  variants: {
+    size: {
+      sm: 'p-3 rounded',
+      md: 'p-4 rounded-md',
+      lg: 'p-6 rounded-xl',
+    },
+    variant: {
+      elevated: 'bg-background-0',
+      outline: 'border border-outline-200 ',
+      ghost: 'rounded-none',
+      filled: 'bg-background-50',
+    },
+  },
+});

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { centerStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type ICenterProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof centerStyle>;
+
+const Center = React.forwardRef<HTMLDivElement, ICenterProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div className={centerStyle({ class: className })} {...props} ref={ref} />
+    );
+  }
+);
+
+Center.displayName = 'Center';
+
+export { Center };

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

@@ -0,0 +1,8 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+
+export const centerStyle = tva({
+  base: `justify-center items-center ${baseStyle}`,
+});