@admin-layout/gluestack-ui-mobile 11.0.4-alpha.0 → 12.0.16-alpha.0

package/lib/components/ui/tabs/index.web.d.ts

@@ -0,0 +1,351 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+declare const tabListStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+} | ({
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+} & {
+    align: {
+        start: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        center: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        end: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    size: {
+        sm: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        md: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        lg: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "flex border-b border-gray-200", import("tailwind-variants/dist/config").TVConfig<{
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "flex border-b border-gray-200", import("tailwind-variants/dist/config").TVConfig<{
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const tabStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    variant: {
+        line: string;
+        enclosed: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    state: {
+        active: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+        inactive: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+    };
+} | ({
+    variant: {
+        line: string;
+        enclosed: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    state: {
+        active: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+        inactive: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+    };
+} & {
+    variant: {
+        line: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        enclosed: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        soft: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    size: {
+        sm: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        md: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        lg: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    state: {
+        active: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        inactive: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-t-lg transition-colors", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        line: string;
+        enclosed: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    state: {
+        active: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+        inactive: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+    };
+}, {
+    variant: {
+        line: string;
+        enclosed: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    state: {
+        active: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+        inactive: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+    };
+}>, {
+    variant: {
+        line: string;
+        enclosed: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    state: {
+        active: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+        inactive: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    variant: {
+        line: string;
+        enclosed: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    state: {
+        active: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+        inactive: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+    };
+}, undefined, "px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-t-lg transition-colors", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        line: string;
+        enclosed: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    state: {
+        active: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+        inactive: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+    };
+}, {
+    variant: {
+        line: string;
+        enclosed: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    state: {
+        active: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+        inactive: {
+            line: string;
+            enclosed: string;
+            soft: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type ITabsProps = React.ComponentProps<'div'> & {
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    variant?: VariantProps<typeof tabStyle>['variant'];
+    size?: VariantProps<typeof tabStyle>['size'];
+};
+export declare const Tabs: React.ForwardRefExoticComponent<Omit<ITabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ITabListProps = React.ComponentProps<'div'> & {
+    align?: VariantProps<typeof tabListStyle>['align'];
+    size?: VariantProps<typeof tabListStyle>['size'];
+};
+export declare const TabList: React.ForwardRefExoticComponent<Omit<ITabListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ITabProps = Omit<React.ComponentProps<'button'>, 'value'> & {
+    index?: number;
+};
+export declare const Tab: React.ForwardRefExoticComponent<Omit<ITabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ITabPanelProps = React.ComponentProps<'div'> & {
+    index?: number;
+};
+export declare const TabPanel: React.ForwardRefExoticComponent<Omit<ITabPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/ui/tabs/index.web.js

@@ -0,0 +1,120 @@
+'use client';
+import React, { forwardRef, createContext, useContext, useState } from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+const SCOPE = 'TABS';
+const tabListStyle = tva({
+    base: 'flex border-b border-gray-200',
+    variants: {
+        align: {
+            start: 'justify-start',
+            center: 'justify-center',
+            end: 'justify-end',
+        },
+        size: {
+            sm: 'gap-2',
+            md: 'gap-4',
+            lg: 'gap-6',
+        },
+    },
+    defaultVariants: {
+        align: 'start',
+        size: 'md',
+    },
+});
+const tabStyle = tva({
+    base: 'px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-t-lg transition-colors',
+    variants: {
+        variant: {
+            line: '-mb-px border-b-2 hover:border-gray-300',
+            enclosed: 'border border-b-0 hover:bg-gray-50',
+            soft: 'hover:bg-gray-100 rounded-lg',
+        },
+        size: {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+        },
+        state: {
+            active: {
+                line: 'border-blue-500 text-blue-600',
+                enclosed: 'border-gray-200 bg-white',
+                soft: 'bg-gray-100 text-blue-600',
+            },
+            inactive: {
+                line: 'border-transparent text-gray-500',
+                enclosed: 'border-transparent text-gray-500',
+                soft: 'text-gray-500',
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'line',
+        size: 'md',
+        state: 'inactive',
+    },
+});
+const tabPanelStyle = tva({
+    base: 'mt-4 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-lg',
+});
+const TabsContext = createContext({
+    selectedIndex: 0,
+    onChange: () => { },
+});
+export const Tabs = forwardRef(({ defaultIndex = 0, onChange, variant = 'line', size = 'md', children, ...props }, ref) => {
+    const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
+    const handleChange = (index) => {
+        setSelectedIndex(index);
+        if (onChange)
+            onChange(index);
+    };
+    return (React.createElement(TabsContext.Provider, { value: { selectedIndex, onChange: handleChange, variant, size } },
+        React.createElement("div", { ref: ref, ...props }, children)));
+});
+Tabs.displayName = 'Tabs';
+export const TabList = forwardRef(({ className, align, size: sizeProp, children, ...props }, ref) => {
+    const { size } = useContext(TabsContext);
+    return (React.createElement("div", { ref: ref, role: "tablist", className: tabListStyle({ align, size: sizeProp || size, class: className }), ...props }, children));
+});
+TabList.displayName = 'TabList';
+export const Tab = forwardRef(({ className, index = 0, onClick, onKeyDown, children, ...props }, ref) => {
+    const { selectedIndex, onChange, variant, size } = useContext(TabsContext);
+    const isSelected = selectedIndex === index;
+    const handleClick = (e) => {
+        if (onClick)
+            onClick(e);
+        onChange(index);
+    };
+    const handleKeyDown = (e) => {
+        if (onKeyDown)
+            onKeyDown(e);
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+            e.preventDefault();
+            const tabList = e.currentTarget.parentElement;
+            if (tabList) {
+                const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
+                const currentIndex = tabs.indexOf(e.currentTarget);
+                const nextIndex = e.key === 'ArrowLeft' ? currentIndex - 1 : currentIndex + 1;
+                if (nextIndex >= 0 && nextIndex < tabs.length) {
+                    tabs[nextIndex].focus();
+                    onChange(nextIndex);
+                }
+            }
+        }
+    };
+    return (React.createElement("button", { ref: ref, role: "tab", "aria-selected": isSelected, tabIndex: isSelected ? 0 : -1, onClick: handleClick, onKeyDown: handleKeyDown, className: tabStyle({
+            variant,
+            size,
+            state: isSelected ? 'active' : 'inactive',
+            class: className,
+        }), ...props }, children));
+});
+Tab.displayName = 'Tab';
+export const TabPanel = forwardRef(({ className, index = 0, children, ...props }, ref) => {
+    const { selectedIndex } = useContext(TabsContext);
+    const isSelected = selectedIndex === index;
+    if (!isSelected)
+        return null;
+    return (React.createElement("div", { ref: ref, role: "tabpanel", tabIndex: 0, className: tabPanelStyle({ class: className }), ...props }, children));
+});
+TabPanel.displayName = 'TabPanel';
+//# sourceMappingURL=index.web.js.map

package/lib/components/ui/tabs/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/index.web.tsx"],"names":[],"mappings":"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"}

package/lib/components/ui/textarea/index.web.d.ts

@@ -0,0 +1,162 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+declare const StyledTextarea: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const textareaStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        filled: string;
+        unstyled: string;
+    };
+    state: {
+        error: string;
+        success: string;
+    };
+} | ({
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        filled: string;
+        unstyled: string;
+    };
+    state: {
+        error: string;
+        success: string;
+    };
+} & {
+    size: {
+        sm: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        md: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        lg: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    variant: {
+        outline: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        filled: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        unstyled: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    state: {
+        error: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        success: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        filled: string;
+        unstyled: string;
+    };
+    state: {
+        error: string;
+        success: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        filled: string;
+        unstyled: string;
+    };
+    state: {
+        error: string;
+        success: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        filled: string;
+        unstyled: string;
+    };
+    state: {
+        error: string;
+        success: string;
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        filled: string;
+        unstyled: string;
+    };
+    state: {
+        error: string;
+        success: string;
+    };
+}, undefined, "px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        filled: string;
+        unstyled: string;
+    };
+    state: {
+        error: string;
+        success: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        filled: string;
+        unstyled: string;
+    };
+    state: {
+        error: string;
+        success: string;
+    };
+}>, unknown, unknown, undefined>>;
+type ITextareaProps = React.ComponentProps<typeof StyledTextarea> & VariantProps<typeof textareaStyle> & {
+    className?: string;
+    onChangeText?: (text: string) => void;
+    placeholderTextColor?: string;
+};
+declare const Textarea: React.ForwardRefExoticComponent<Omit<ITextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/lib/components/ui/textarea/index.web.js

@@ -0,0 +1,50 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+const SCOPE = 'TEXTAREA';
+const StyledTextarea = forwardRef(({ onChangeText, onChange, placeholder, placeholderTextColor, ...props }, ref) => {
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+        if (onChangeText) {
+            onChangeText(e.target.value);
+        }
+    };
+    return (React.createElement("textarea", { ref: ref, placeholder: placeholder, onChange: handleChange, style: {
+            ...props.style,
+            '::placeholder': {
+                color: placeholderTextColor,
+            },
+        }, ...props }));
+});
+StyledTextarea.displayName = 'StyledTextarea';
+const textareaStyle = tva({
+    base: 'px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+    variants: {
+        size: {
+            sm: 'text-sm min-h-[80px]',
+            md: 'text-base min-h-[100px]',
+            lg: 'text-lg min-h-[120px]',
+        },
+        variant: {
+            outline: 'bg-transparent',
+            filled: 'bg-gray-100',
+            unstyled: '',
+        },
+        state: {
+            error: 'border-red-500 focus:ring-red-500',
+            success: 'border-green-500 focus:ring-green-500',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});
+const Textarea = React.forwardRef(({ className, size, variant, state, ...props }, ref) => {
+    return (React.createElement(StyledTextarea, { ref: ref, className: textareaStyle({ size, variant, state, class: className }), ...props }));
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };
+//# sourceMappingURL=index.web.js.map

package/lib/components/ui/textarea/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.js","sourceRoot":"","sources":["../../../../src/components/ui/textarea/index.web.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,GAAG,EAAE,MAAM,oCAAoC,CAAC;AAKzD,MAAM,KAAK,GAAG,UAAU,CAAC;AAEzB,MAAM,cAAc,GAAG,UAAU,CAC7B,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,oBAAoB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7E,MAAM,YAAY,GAAG,CAAC,CAAyC,EAAE,EAAE;QAC/D,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,CAAC,CAAC,CAAC,CAAC;QAChB,CAAC;QACD,IAAI,YAAY,EAAE,CAAC;YACf,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,kCACI,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE;YACH,GAAG,KAAK,CAAC,KAAK;YACd,eAAe,EAAE;gBACb,KAAK,EAAE,oBAAoB;aAC9B;SACJ,KACG,KAAK,GACX,CACL,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,MAAM,aAAa,GAAG,GAAG,CAAC;IACtB,IAAI,EAAE,0HAA0H;IAChI,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,yBAAyB;YAC7B,EAAE,EAAE,uBAAuB;SAC9B;QACD,OAAO,EAAE;YACL,OAAO,EAAE,gBAAgB;YACzB,MAAM,EAAE,aAAa;YACrB,QAAQ,EAAE,EAAE;SACf;QACD,KAAK,EAAE;YACH,KAAK,EAAE,mCAAmC;YAC1C,OAAO,EAAE,uCAAuC;SACnD;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACrB;CACJ,CAAC,CAAC;AASH,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnD,OAAO,CACH,oBAAC,cAAc,IACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,KAChE,KAAK,GACX,CACL,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}