@onehat/ui 0.3.380 → 0.4.0

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { skeletonStyle, skeletonTextStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type ISkeletonProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof skeletonStyle> & {
+    startColor?: string;
+    isLoaded?: boolean;
+  };
+
+const Skeleton = React.forwardRef<HTMLDivElement, ISkeletonProps>(
+  (
+    {
+      className,
+      variant = 'rounded',
+      children,
+      speed = 2,
+      startColor = 'bg-background-200',
+      isLoaded = false,
+      ...props
+    },
+    ref
+  ) => {
+    if (!isLoaded) {
+      return (
+        <div
+          ref={ref}
+          className={`animate-pulse ${startColor} ${skeletonStyle({
+            variant,
+            speed,
+            class: className,
+          })}`}
+          {...props}
+        />
+      );
+    } else {
+      return children;
+    }
+  }
+);
+
+type ISkeletonTextProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof skeletonTextStyle> & {
+    _lines?: number;
+    isLoaded?: boolean;
+    startColor?: string;
+  };
+
+const SkeletonText = React.forwardRef<HTMLDivElement, ISkeletonTextProps>(
+  (
+    {
+      className,
+      _lines,
+      isLoaded = false,
+      startColor = 'bg-background-200',
+      gap = 2,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    if (!isLoaded) {
+      if (_lines) {
+        return (
+          <div
+            ref={ref}
+            className={`flex flex-col ${skeletonTextStyle({
+              gap,
+            })}`}
+          >
+            {Array.from({ length: _lines }).map((_, index) => (
+              <div
+                key={index}
+                className={`animate-pulse ${startColor} ${skeletonTextStyle({
+                  class: className,
+                })}`}
+                {...props}
+              />
+            ))}
+          </div>
+        );
+      } else {
+        return (
+          <div
+            ref={ref}
+            className={`animate-pulse ${startColor} ${skeletonTextStyle({
+              class: className,
+            })}`}
+            {...props}
+          />
+        );
+      }
+    } else {
+      return children;
+    }
+  }
+);
+
+Skeleton.displayName = 'Skeleton';
+SkeletonText.displayName = 'SkeletonText';
+
+export { Skeleton, SkeletonText };

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

@@ -0,0 +1,35 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+
+export const skeletonStyle = tva({
+  base: 'w-full h-full',
+  variants: {
+    variant: {
+      sharp: 'rounded-none',
+      circular: 'rounded-full',
+      rounded: 'rounded-md',
+    },
+    speed: {
+      1: 'duration-75',
+      2: 'duration-100',
+      3: 'duration-150',
+      4: 'duration-200',
+    },
+  },
+});
+export const skeletonTextStyle = tva({
+  base: 'rounded-sm w-full',
+  variants: {
+    speed: {
+      1: 'duration-75',
+      2: 'duration-100',
+      3: 'duration-150',
+      4: 'duration-200',
+    },
+    gap: {
+      1: 'gap-1',
+      2: 'gap-2',
+      3: 'gap-3',
+      4: 'gap-4',
+    },
+  },
+});

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

@@ -0,0 +1,283 @@
+'use client';
+import { createSlider } from '@gluestack-ui/slider';
+import { Pressable } from 'react-native';
+import { View, Platform } from 'react-native';
+import React from 'react';
+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 ThumbWrapper = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentProps<typeof View>
+>((props, ref) => <View ref={ref} {...props} />);
+
+const FilledTrackWrapper = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentProps<typeof View>
+>((props, ref) => <View ref={ref} {...props} />);
+
+const SCOPE = 'SLIDER';
+export const UISlider = createSlider({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(View, SCOPE)
+      : withStyleContextAndStates(View, SCOPE),
+  Thumb: Platform.OS === 'web' ? ThumbWrapper : withStates(View),
+  Track: Pressable,
+  FilledTrack: Platform.OS === 'web' ? FilledTrackWrapper : withStates(View),
+  ThumbInteraction: View,
+});
+
+cssInterop(UISlider, { className: 'style' });
+cssInterop(ThumbWrapper, { className: 'style' });
+cssInterop(UISlider.Track, { className: 'style' });
+cssInterop(FilledTrackWrapper, { className: 'style' });
+
+const sliderStyle = tva({
+  base: 'justify-center items-center data-[disabled=true]:web:opacity-40 data-[disabled=true]:web:pointer-events-none',
+  variants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+    isReversed: {
+      true: '',
+      false: '',
+    },
+  },
+});
+
+const sliderThumbStyle = tva({
+  base: 'bg-primary-500 absolute rounded-full data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:data-[active=true]:outline web:data-[active=true]:outline-4 web:data-[active=true]:outline-primary-400 shadow-hard-1',
+
+  parentVariants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+    },
+  },
+});
+
+const sliderTrackStyle = tva({
+  base: 'bg-background-300 rounded-lg overflow-hidden',
+  parentVariants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    isReversed: {
+      true: '',
+      false: '',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+  parentCompoundVariants: [
+    {
+      orientation: 'horizontal',
+      size: 'sm',
+      class: 'h-1 flex-row',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'sm',
+      isReversed: true,
+      class: 'h-1 flex-row-reverse',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'md',
+      class: 'h-1 flex-row',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'md',
+      isReversed: true,
+      class: 'h-[5px] flex-row-reverse',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'lg',
+      class: 'h-1.5 flex-row',
+    },
+    {
+      orientation: 'horizontal',
+      size: 'lg',
+      isReversed: true,
+      class: 'h-1.5 flex-row-reverse',
+    },
+    {
+      orientation: 'vertical',
+      size: 'sm',
+      class: 'w-1 flex-col-reverse',
+    },
+    {
+      orientation: 'vertical',
+      size: 'sm',
+      isReversed: true,
+      class: 'w-1 flex-col',
+    },
+    {
+      orientation: 'vertical',
+      size: 'md',
+      class: 'w-[5px] flex-col-reverse',
+    },
+    {
+      orientation: 'vertical',
+      size: 'md',
+      isReversed: true,
+      class: 'w-[5px] flex-col',
+    },
+    {
+      orientation: 'vertical',
+      size: 'lg',
+      class: 'w-1.5 flex-col-reverse',
+    },
+    {
+      orientation: 'vertical',
+      size: 'lg',
+      isReversed: true,
+      class: 'w-1.5 flex-col',
+    },
+  ],
+});
+
+const sliderFilledTrackStyle = tva({
+  base: 'bg-primary-500 data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600',
+  parentVariants: {
+    orientation: {
+      horizontal: 'h-full',
+      vertical: 'w-full',
+    },
+  },
+});
+
+type ISliderProps = React.ComponentProps<typeof UISlider> &
+  VariantProps<typeof sliderStyle>;
+
+export const Slider = React.forwardRef<
+  React.ElementRef<typeof UISlider>,
+  ISliderProps
+>(
+  (
+    {
+      className,
+      size = 'md',
+      orientation = 'horizontal',
+      isReversed = false,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <UISlider
+        ref={ref}
+        isReversed={isReversed}
+        orientation={orientation}
+        {...props}
+        className={sliderStyle({
+          orientation,
+          isReversed,
+          class: className,
+        })}
+        context={{ size, orientation, isReversed }}
+      />
+    );
+  }
+);
+
+type ISliderThumbProps = React.ComponentProps<typeof UISlider.Thumb> &
+  VariantProps<typeof sliderThumbStyle>;
+
+export const SliderThumb = React.forwardRef<
+  React.ElementRef<typeof UISlider.Thumb>,
+  ISliderThumbProps
+>(({ className, size, ...props }, ref) => {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UISlider.Thumb
+      //@ts-ignore
+      ref={ref}
+      {...props}
+      className={sliderThumbStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        size,
+        class: className,
+      })}
+    />
+  );
+});
+
+type ISliderTrackProps = React.ComponentProps<typeof UISlider.Track> &
+  VariantProps<typeof sliderTrackStyle>;
+
+export const SliderTrack = React.forwardRef<
+  React.ElementRef<typeof UISlider.Track>,
+  ISliderTrackProps
+>(({ className, ...props }, ref) => {
+  const {
+    orientation: parentOrientation,
+    size: parentSize,
+    isReversed,
+  } = useStyleContext(SCOPE);
+
+  return (
+    <UISlider.Track
+      ref={ref}
+      {...props}
+      className={sliderTrackStyle({
+        parentVariants: {
+          orientation: parentOrientation,
+          size: parentSize,
+          isReversed,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+type ISliderFilledTrackProps = React.ComponentProps<
+  typeof UISlider.FilledTrack
+> &
+  VariantProps<typeof sliderFilledTrackStyle>;
+
+export const SliderFilledTrack = React.forwardRef<
+  React.ElementRef<typeof UISlider.FilledTrack>,
+  ISliderFilledTrackProps
+>(({ className, ...props }, ref) => {
+  const { orientation: parentOrientation } = useStyleContext(SCOPE);
+
+  return (
+    <UISlider.FilledTrack
+      //@ts-ignore
+      ref={ref}
+      {...props}
+      className={sliderFilledTrackStyle({
+        parentVariants: {
+          orientation: parentOrientation,
+        },
+        class: className,
+      })}
+    />
+  );
+});

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

@@ -0,0 +1,34 @@
+'use client';
+import { ActivityIndicator } from 'react-native';
+import React from 'react';
+import { createSpinner } from '@gluestack-ui/spinner';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { cssInterop } from 'nativewind';
+
+const UISpinner = createSpinner({ Root: ActivityIndicator });
+
+cssInterop(UISpinner, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+
+const spinnerStyle = tva({});
+
+type ISpinnerProps = React.ComponentProps<typeof UISpinner>;
+
+const Spinner = React.forwardRef<
+  React.ElementRef<typeof UISpinner>,
+  ISpinnerProps
+>(({ className, color, ...props }, ref) => {
+  return (
+    <UISpinner
+      ref={ref}
+      {...props}
+      color={color}
+      className={spinnerStyle({ class: className })}
+    />
+  );
+});
+
+Spinner.displayName = 'Spinner';
+
+export { Spinner };

package/src/Components/Gluestack/status-bar/index.tsx

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

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

@@ -0,0 +1,55 @@
+'use client';
+import React from 'react';
+import { Switch as RNSwitch, Platform } from 'react-native';
+import { createSwitch } from '@gluestack-ui/switch';
+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 type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const SwitchWrapper = React.forwardRef<
+  React.ElementRef<typeof RNSwitch>,
+  React.ComponentProps<typeof RNSwitch>
+>(({ ...props }, ref) => {
+  return <RNSwitch {...props} ref={ref} />;
+});
+
+const UISwitch = createSwitch({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(SwitchWrapper)
+      : withStyleContextAndStates(SwitchWrapper),
+});
+
+cssInterop(SwitchWrapper, { className: 'style' });
+
+const switchStyle = tva({
+  base: 'data-[focus=true]:outline-0 data-[focus=true]:ring-2 data-[focus=true]:ring-indicator-primary web:cursor-pointer disabled:cursor-not-allowed data-[disabled=true]:opacity-40 data-[invalid=true]:border-error-700 data-[invalid=true]:rounded-xl data-[invalid=true]:border-2',
+
+  variants: {
+    size: {
+      sm: 'scale-75',
+      md: '',
+      lg: 'scale-125',
+    },
+  },
+});
+
+type ISwitchProps = React.ComponentProps<typeof UISwitch> &
+  VariantProps<typeof switchStyle>;
+const Switch = React.forwardRef<
+  React.ElementRef<typeof UISwitch>,
+  ISwitchProps
+>(({ className, size = 'md', ...props }, ref) => {
+  return (
+    <UISwitch
+      ref={ref}
+      {...props}
+      className={switchStyle({ size, class: className })}
+    />
+  );
+});
+
+Switch.displayName = 'Switch';
+export { Switch };

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

@@ -0,0 +1,200 @@
+import React, { createContext, useMemo, useContext } from 'react';
+import {
+  Table as ExpoTable,
+  THead as ExpoTHead,
+  TBody as ExpoTBody,
+  TFoot as ExpoTFoot,
+  TR as ExpoTR,
+  Caption as ExpoTCaption,
+} from '@expo/html-elements';
+import {
+  tableStyle,
+  tableHeaderStyle,
+  tableBodyStyle,
+  tableFooterStyle,
+  tableHeadStyle,
+  tableRowStyleStyle,
+  tableDataStyle,
+  tableCaptionStyle,
+} from './styles';
+import { Text, View } from 'react-native';
+
+const TableHeaderContext = createContext<any>({});
+const TableFooterContext = createContext<any>({});
+
+type ITableProps = React.ComponentProps<typeof ExpoTable>;
+type ITableHeaderProps = React.ComponentProps<typeof ExpoTHead>;
+type ITableBodyProps = React.ComponentProps<typeof ExpoTBody>;
+type ITableFooterProps = React.ComponentProps<typeof ExpoTFoot>;
+type ITableHeadProps = React.ComponentProps<typeof View | typeof Text> & {
+  useRNView?: boolean;
+};
+type ITableRowProps = React.ComponentProps<typeof ExpoTR>;
+type ITableDataProps = React.ComponentProps<typeof View | typeof Text> & {
+  useRNView?: boolean;
+};
+type ITableCaptionProps = React.ComponentProps<typeof ExpoTCaption>;
+
+const Table = React.forwardRef<React.ElementRef<typeof ExpoTable>, ITableProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <ExpoTable
+        ref={ref}
+        className={tableStyle({ class: className })}
+        {...props}
+      />
+    );
+  }
+);
+
+const TableHeader = React.forwardRef<
+  React.ElementRef<typeof ExpoTHead>,
+  ITableHeaderProps
+>(({ className, ...props }, ref) => {
+  const contextValue = useMemo(() => {
+    return {
+      isHeaderRow: true,
+    };
+  }, []);
+  return (
+    <TableHeaderContext.Provider value={contextValue}>
+      <ExpoTHead
+        ref={ref}
+        className={tableHeaderStyle({ class: className })}
+        {...props}
+      />
+    </TableHeaderContext.Provider>
+  );
+});
+
+const TableBody = React.forwardRef<
+  React.ElementRef<typeof ExpoTBody>,
+  ITableBodyProps
+>(({ className, ...props }, ref) => {
+  return (
+    <ExpoTBody
+      ref={ref}
+      className={tableBodyStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+const TableFooter = React.forwardRef<
+  React.ElementRef<typeof ExpoTFoot>,
+  ITableFooterProps
+>(({ className, ...props }, ref) => {
+  const contextValue = useMemo(() => {
+    return {
+      isFooterRow: true,
+    };
+  }, []);
+  return (
+    <TableFooterContext.Provider value={contextValue}>
+      <ExpoTFoot
+        ref={ref}
+        className={tableFooterStyle({ class: className })}
+        {...props}
+      />
+    </TableFooterContext.Provider>
+  );
+});
+
+const TableHead = React.forwardRef<
+  React.ElementRef<typeof View | typeof Text>,
+  ITableHeadProps
+>(({ useRNView = false, className, ...props }, ref) => {
+  if (useRNView) {
+    return (
+      <View
+        ref={ref}
+        className={tableHeadStyle({ class: className })}
+        {...props}
+      />
+    );
+  } else {
+    return (
+      <Text
+        ref={ref}
+        className={tableHeadStyle({ class: className })}
+        {...props}
+      />
+    );
+  }
+});
+
+const TableRow = React.forwardRef<
+  React.ElementRef<typeof ExpoTR>,
+  ITableRowProps
+>(({ className, ...props }, ref) => {
+  const { isHeaderRow } = useContext(TableHeaderContext);
+  const { isFooterRow } = useContext(TableFooterContext);
+
+  return (
+    <ExpoTR
+      ref={ref}
+      className={tableRowStyleStyle({
+        isHeaderRow,
+        isFooterRow,
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+const TableData = React.forwardRef<
+  React.ElementRef<typeof View | typeof Text>,
+  ITableDataProps
+>(({ useRNView = false, className, ...props }, ref) => {
+  if (useRNView) {
+    return (
+      <View
+        ref={ref}
+        className={tableDataStyle({ class: className })}
+        {...props}
+      />
+    );
+  } else {
+    return (
+      <Text
+        ref={ref}
+        className={tableDataStyle({ class: className })}
+        {...props}
+      />
+    );
+  }
+});
+
+const TableCaption = React.forwardRef<
+  React.ElementRef<typeof ExpoTCaption>,
+  ITableCaptionProps
+>(({ className, ...props }, ref) => {
+  return (
+    <ExpoTCaption
+      ref={ref}
+      className={tableCaptionStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+Table.displayName = 'Table';
+TableHeader.displayName = 'TableHeader';
+TableBody.displayName = 'TableBody';
+TableFooter.displayName = 'TableFooter';
+TableHead.displayName = 'TableHead';
+TableRow.displayName = 'TableRow';
+TableData.displayName = 'TableData';
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableData,
+  TableCaption,
+};