@onehat/ui 0.3.381 → 0.4.0

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

@@ -0,0 +1,286 @@
+'use client';
+import React, { useMemo } from 'react';
+import { createFab } from '@gluestack-ui/fab';
+import { Platform, Text } from 'react-native';
+import { Pressable } from 'react-native';
+import { Svg } from 'react-native-svg';
+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';
+
+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 SCOPE = 'FAB';
+const UIFab = createFab({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(Pressable, SCOPE)
+      : withStyleContextAndStates(Pressable, SCOPE),
+  Label: Text,
+  Icon: PrimitiveIcon,
+});
+
+cssInterop(UIFab, { className: 'style' });
+cssInterop(UIFab.Label, { className: 'style' });
+//@ts-ignore
+cssInterop(UIFab.Icon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      //@ts-ignore
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const fabStyle = tva({
+  base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-info shadow-hard-2',
+  variants: {
+    size: {
+      sm: 'px-2.5 py-2.5',
+      md: 'px-3 py-3',
+      lg: 'px-4 py-4',
+    },
+    placement: {
+      'top right': 'top-4 right-4',
+      'top left': 'top-4 left-4',
+      'bottom right': 'bottom-4 right-4',
+      'bottom left': 'bottom-4 left-4',
+      'top center': 'top-4 self-center',
+      'bottom center': 'bottom-4 self-center',
+    },
+  },
+});
+
+const fabLabelStyle = tva({
+  base: 'text-typography-50 font-normal font-body tracking-md text-left mx-2',
+  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',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+  parentVariants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+});
+
+const fabIconStyle = tva({
+  base: 'text-typography-50 fill-none',
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'w-[18px] h-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+type IFabProps = Omit<React.ComponentPropsWithoutRef<typeof UIFab>, 'context'> &
+  VariantProps<typeof fabStyle>;
+
+const Fab = React.forwardRef<React.ElementRef<typeof UIFab>, IFabProps>(
+  ({ size = 'md', placement = 'bottom right', className, ...props }, ref) => {
+    return (
+      <UIFab
+        ref={ref}
+        {...props}
+        className={fabStyle({ size, placement, class: className })}
+        context={{ size }}
+      />
+    );
+  }
+);
+
+type IFabLabelProps = React.ComponentPropsWithoutRef<typeof UIFab.Label> &
+  VariantProps<typeof fabLabelStyle>;
+
+const FabLabel = React.forwardRef<
+  React.ElementRef<typeof UIFab.Label>,
+  IFabLabelProps
+>(
+  (
+    {
+      size,
+      isTruncated = false,
+      bold = false,
+      underline = false,
+      strikeThrough = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { size: parentSize } = useStyleContext(SCOPE);
+    return (
+      <UIFab.Label
+        ref={ref}
+        {...props}
+        className={fabLabelStyle({
+          parentVariants: {
+            size: parentSize,
+          },
+          size,
+          isTruncated,
+          bold,
+          underline,
+          strikeThrough,
+          class: className,
+        })}
+      />
+    );
+  }
+);
+
+type IFabIconProps = React.ComponentPropsWithoutRef<typeof UIFab.Icon> &
+  VariantProps<typeof fabIconStyle>;
+
+const FabIcon = React.forwardRef<
+  React.ElementRef<typeof UIFab.Icon>,
+  IFabIconProps
+>(({ size, className, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UIFab.Icon
+        ref={ref}
+        {...props}
+        className={fabIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIFab.Icon
+        ref={ref}
+        {...props}
+        className={fabIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIFab.Icon
+      ref={ref}
+      {...props}
+      className={fabIconStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
+});
+
+Fab.displayName = 'Fab';
+FabLabel.displayName = 'FabLabel';
+FabIcon.displayName = 'FabIcon';
+
+export { Fab, FabLabel, FabIcon };

package/src/Components/Gluestack/flat-list/index.tsx

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