@admin-layout/gluestack-ui-mobile 11.0.1-alpha.0 → 11.0.3-alpha.0

package/src/components/ui/heading/index.web.tsx

@@ -0,0 +1,177 @@
+import React, { forwardRef, memo } from 'react';
+import { headingStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+type IHeadingProps = VariantProps<typeof headingStyle> &
+    React.ComponentPropsWithoutRef<'h1'> & {
+        as?: React.ElementType;
+    };
+
+const MappedHeading = memo(
+    forwardRef<HTMLHeadingElement, IHeadingProps>(
+        ({ size, className, isTruncated, bold, underline, strikeThrough, sub, italic, highlight, ...props }, ref) => {
+            switch (size) {
+                case '5xl':
+                case '4xl':
+                case '3xl':
+                    return (
+                        <h1
+                            className={headingStyle({
+                                size,
+                                isTruncated,
+                                bold,
+                                underline,
+                                strikeThrough,
+                                sub,
+                                italic,
+                                highlight,
+                                class: className,
+                            })}
+                            {...props}
+                            ref={ref}
+                        />
+                    );
+                case '2xl':
+                    return (
+                        <h2
+                            className={headingStyle({
+                                size,
+                                isTruncated,
+                                bold,
+                                underline,
+                                strikeThrough,
+                                sub,
+                                italic,
+                                highlight,
+                                class: className,
+                            })}
+                            {...props}
+                            ref={ref}
+                        />
+                    );
+                case 'xl':
+                    return (
+                        <h3
+                            className={headingStyle({
+                                size,
+                                isTruncated,
+                                bold,
+                                underline,
+                                strikeThrough,
+                                sub,
+                                italic,
+                                highlight,
+                                class: className,
+                            })}
+                            {...props}
+                            ref={ref}
+                        />
+                    );
+                case 'lg':
+                    return (
+                        <h4
+                            className={headingStyle({
+                                size,
+                                isTruncated,
+                                bold,
+                                underline,
+                                strikeThrough,
+                                sub,
+                                italic,
+                                highlight,
+                                class: className,
+                            })}
+                            {...props}
+                            ref={ref}
+                        />
+                    );
+                case 'md':
+                    return (
+                        <h5
+                            className={headingStyle({
+                                size,
+                                isTruncated,
+                                bold,
+                                underline,
+                                strikeThrough,
+                                sub,
+                                italic,
+                                highlight,
+                                class: className,
+                            })}
+                            {...props}
+                            ref={ref}
+                        />
+                    );
+                case 'sm':
+                case 'xs':
+                    return (
+                        <h6
+                            className={headingStyle({
+                                size,
+                                isTruncated,
+                                bold,
+                                underline,
+                                strikeThrough,
+                                sub,
+                                italic,
+                                highlight,
+                                class: className,
+                            })}
+                            {...props}
+                            ref={ref}
+                        />
+                    );
+                default:
+                    return (
+                        <h4
+                            className={headingStyle({
+                                size,
+                                isTruncated,
+                                bold,
+                                underline,
+                                strikeThrough,
+                                sub,
+                                italic,
+                                highlight,
+                                class: className,
+                            })}
+                            {...props}
+                            ref={ref}
+                        />
+                    );
+            }
+        },
+    ),
+);
+
+const Heading = memo(
+    forwardRef<HTMLHeadingElement, IHeadingProps>(({ className, size = 'lg', as: AsComp, ...props }, ref) => {
+        const { isTruncated, bold, underline, strikeThrough, sub, italic, highlight } = props;
+
+        if (AsComp) {
+            return (
+                <AsComp
+                    className={headingStyle({
+                        size,
+                        isTruncated,
+                        bold,
+                        underline,
+                        strikeThrough,
+                        sub,
+                        italic,
+                        highlight,
+                        class: className,
+                    })}
+                    {...props}
+                    ref={ref}
+                />
+            );
+        }
+
+        return <MappedHeading className={className} size={size} ref={ref} {...props} />;
+    }),
+);
+
+Heading.displayName = 'Heading';
+
+export { Heading };

package/src/components/ui/heading/styles.tsx

@@ -0,0 +1,43 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+const baseStyle = isWeb
+    ? 'font-sans tracking-sm bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word'
+    : '';
+
+export const headingStyle = tva({
+    base: `text-typography-900 font-bold font-heading tracking-sm my-0 ${baseStyle}`,
+    variants: {
+        isTruncated: {
+            true: 'truncate',
+        },
+        bold: {
+            true: 'font-bold',
+        },
+        underline: {
+            true: 'underline',
+        },
+        strikeThrough: {
+            true: 'line-through',
+        },
+        sub: {
+            true: 'text-xs',
+        },
+        italic: {
+            true: 'italic',
+        },
+        highlight: {
+            true: 'bg-yellow-500',
+        },
+        size: {
+            '5xl': 'text-6xl',
+            '4xl': 'text-5xl',
+            '3xl': 'text-4xl',
+            '2xl': 'text-3xl',
+            xl: 'text-2xl',
+            lg: 'text-xl',
+            md: 'text-lg',
+            sm: 'text-base',
+            xs: 'text-sm',
+        },
+    },
+});

package/src/components/ui/hstack/index.tsx

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

package/src/components/ui/hstack/index.web.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { hstackStyle } from './styles';
+
+type IHStackProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof hstackStyle>;
+
+const HStack = React.forwardRef<React.ElementRef<'div'>, IHStackProps>(
+    ({ className, space, reversed, ...props }, ref) => {
+        return <div className={hstackStyle({ space, reversed, class: className })} {...props} ref={ref} />;
+    },
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack };

package/src/components/ui/hstack/styles.tsx

@@ -0,0 +1,25 @@
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+
+const baseStyle = isWeb
+    ? 'flex relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+    : '';
+
+export const hstackStyle = tva({
+    base: `flex-row ${baseStyle}`,
+    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',
+        },
+        reversed: {
+            true: 'flex-row-reverse',
+        },
+    },
+});