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

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

@@ -0,0 +1,265 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+declare const checkboxStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        solid: string;
+    };
+    status: {
+        error: string;
+        success: string;
+        warning: string;
+    };
+} | ({
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        solid: string;
+    };
+    status: {
+        error: string;
+        success: string;
+        warning: 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;
+        };
+        solid: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    status: {
+        error: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        success: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        warning: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "form-checkbox rounded transition duration-150 ease-in-out", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        solid: string;
+    };
+    status: {
+        error: string;
+        success: string;
+        warning: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        solid: string;
+    };
+    status: {
+        error: string;
+        success: string;
+        warning: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        solid: string;
+    };
+    status: {
+        error: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        solid: string;
+    };
+    status: {
+        error: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, "form-checkbox rounded transition duration-150 ease-in-out", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        solid: string;
+    };
+    status: {
+        error: string;
+        success: string;
+        warning: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        outline: string;
+        solid: string;
+    };
+    status: {
+        error: string;
+        success: string;
+        warning: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const labelStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+} | ({
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: 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;
+        };
+    };
+    disabled: {
+        true: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "ml-2 select-none", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "ml-2 select-none", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+type CheckboxGroupContextType = {
+    values?: string[];
+    onChange?: (values: string[]) => void;
+    size?: VariantProps<typeof checkboxStyle>['size'];
+    status?: VariantProps<typeof checkboxStyle>['status'];
+    variant?: VariantProps<typeof checkboxStyle>['variant'];
+};
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & CheckboxGroupContextType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CheckboxLabel: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLLabelElement> & React.LabelHTMLAttributes<HTMLLabelElement> & {
+    size?: VariantProps<typeof labelStyle>["size"];
+    disabled?: boolean;
+}, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export declare const CheckboxIcon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ICheckboxProps = Omit<React.ComponentProps<'input'>, 'size'> & {
+    value: string;
+    size?: VariantProps<typeof checkboxStyle>['size'];
+    status?: VariantProps<typeof checkboxStyle>['status'];
+    variant?: VariantProps<typeof checkboxStyle>['variant'];
+};
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<ICheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };

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

@@ -0,0 +1,77 @@
+'use client';
+import React, { forwardRef, createContext, useContext } from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+const SCOPE = 'CHECKBOX';
+const checkboxStyle = tva({
+    base: 'form-checkbox rounded transition duration-150 ease-in-out',
+    variants: {
+        size: {
+            sm: 'h-3 w-3',
+            md: 'h-4 w-4',
+            lg: 'h-5 w-5',
+        },
+        variant: {
+            outline: 'border-2',
+            solid: 'bg-blue-600 border-transparent',
+        },
+        status: {
+            error: 'border-red-500 focus:border-red-500 focus:ring-red-500',
+            success: 'border-green-500 focus:border-green-500 focus:ring-green-500',
+            warning: 'border-yellow-500 focus:border-yellow-500 focus:ring-yellow-500',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});
+const labelStyle = tva({
+    base: 'ml-2 select-none',
+    variants: {
+        size: {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+        },
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+const CheckboxGroupContext = createContext({});
+export const CheckboxGroup = forwardRef(({ values, onChange, size, status, variant, ...props }, ref) => {
+    return (React.createElement(CheckboxGroupContext.Provider, { value: { values, onChange, size, status, variant } },
+        React.createElement("div", { ref: ref, role: "group", ...props })));
+});
+CheckboxGroup.displayName = 'CheckboxGroup';
+export const CheckboxLabel = forwardRef(({ className, size, disabled, ...props }, ref) => {
+    return React.createElement("label", { ref: ref, className: labelStyle({ size, disabled, class: className }), ...props });
+});
+CheckboxLabel.displayName = 'CheckboxLabel';
+export const CheckboxIcon = forwardRef(({ className, children, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: `flex items-center justify-center ${className || ''}`, ...props }, children));
+});
+CheckboxIcon.displayName = 'CheckboxIcon';
+const Checkbox = forwardRef(({ className, value, size: itemSize, status: itemStatus, variant: itemVariant, onChange, checked: controlledChecked, ...props }, ref) => {
+    const group = useContext(CheckboxGroupContext);
+    const size = itemSize || group.size;
+    const status = itemStatus || group.status;
+    const variant = itemVariant || group.variant;
+    const isChecked = group.values ? group.values.includes(value) : controlledChecked;
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+        if (group.onChange && group.values) {
+            const newValues = e.target.checked ? [...group.values, value] : group.values.filter((v) => v !== value);
+            group.onChange(newValues);
+        }
+    };
+    return (React.createElement("input", { ref: ref, type: "checkbox", value: value, checked: isChecked, onChange: handleChange, className: checkboxStyle({ size, status, variant, class: className }), ...props }));
+});
+Checkbox.displayName = 'Checkbox';
+export { Checkbox };
+//# sourceMappingURL=index.web.js.map

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

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

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+declare const Divider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+} | ({
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+} & {
+    orientation: {
+        vertical: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        horizontal: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "bg-background-200", import("tailwind-variants/dist/config").TVConfig<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}>, {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, "bg-background-200", import("tailwind-variants/dist/config").TVConfig<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}>, unknown, unknown, undefined>>> & React.RefAttributes<HTMLDivElement>>;
+export { Divider };

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

@@ -0,0 +1,21 @@
+'use client';
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+const dividerStyle = tva({
+    base: 'bg-background-200',
+    variants: {
+        orientation: {
+            vertical: 'w-px h-full',
+            horizontal: 'h-px w-full',
+        },
+    },
+});
+const Divider = React.forwardRef(({ className, orientation = 'horizontal', ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, ...props, "aria-orientation": orientation, role: "separator", className: dividerStyle({
+            orientation,
+            class: className,
+        }) }));
+});
+Divider.displayName = 'Divider';
+export { Divider };
+//# sourceMappingURL=index.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.js","sourceRoot":"","sources":["../../../../src/components/ui/divider/index.web.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,oCAAoC,CAAC;AAGzD,MAAM,YAAY,GAAG,GAAG,CAAC;IACrB,IAAI,EAAE,mBAAmB;IACzB,QAAQ,EAAE;QACN,WAAW,EAAE;YACT,QAAQ,EAAE,aAAa;YACvB,UAAU,EAAE,aAAa;SAC5B;KACJ;CACJ,CAAC,CAAC;AAIH,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,WAAW,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzD,OAAO,CACH,6BACI,GAAG,EAAE,GAAG,KACJ,KAAK,sBACS,WAAW,EAC7B,IAAI,EAAC,WAAW,EAChB,SAAS,EAAE,YAAY,CAAC;YACpB,WAAW;YACX,KAAK,EAAE,SAAS;SACnB,CAAC,GACJ,CACL,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+declare const drawerStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    placement: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+} | ({
+    placement: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+} & {
+    placement: {
+        left: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        right: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        top: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        bottom: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    size: {
+        xs: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        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;
+        };
+        xl: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        full: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "fixed bg-white shadow-xl transition-transform duration-300 ease-in-out", import("tailwind-variants/dist/config").TVConfig<{
+    placement: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, {
+    placement: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}>, {
+    placement: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    placement: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, undefined, "fixed bg-white shadow-xl transition-transform duration-300 ease-in-out", import("tailwind-variants/dist/config").TVConfig<{
+    placement: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, {
+    placement: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerCloseButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type IDrawerProps = {
+    isOpen?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    placement?: VariantProps<typeof drawerStyle>['placement'];
+    size?: VariantProps<typeof drawerStyle>['size'];
+    closeOnOverlayClick?: boolean;
+};
+declare const Drawer: React.ForwardRefExoticComponent<IDrawerProps & React.RefAttributes<HTMLDivElement>>;
+export { Drawer };

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

@@ -0,0 +1,65 @@
+'use client';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { createPortal } from 'react-dom';
+const SCOPE = 'DRAWER';
+const DrawerOverlay = ({ onPress, className }) => (React.createElement("div", { onClick: onPress, className: `fixed inset-0 bg-black bg-opacity-40 transition-opacity ${className || ''}`, "aria-hidden": "true" }));
+const drawerStyle = tva({
+    base: 'fixed bg-white shadow-xl transition-transform duration-300 ease-in-out',
+    variants: {
+        placement: {
+            left: 'left-0 top-0 bottom-0 transform -translate-x-full',
+            right: 'right-0 top-0 bottom-0 transform translate-x-full',
+            top: 'top-0 left-0 right-0 transform -translate-y-full',
+            bottom: 'bottom-0 left-0 right-0 transform translate-y-full',
+        },
+        size: {
+            xs: 'w-[95%] max-w-xs',
+            sm: 'w-[95%] max-w-sm',
+            md: 'w-[95%] max-w-md',
+            lg: 'w-[95%] max-w-lg',
+            xl: 'w-[95%] max-w-xl',
+            full: 'w-full',
+        },
+    },
+    defaultVariants: {
+        placement: 'right',
+        size: 'md',
+    },
+});
+export const DrawerContent = forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: `h-full flex flex-col ${className || ''}`, ...props })));
+DrawerContent.displayName = 'DrawerContent';
+export const DrawerHeader = forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: `px-6 py-4 border-b border-gray-200 ${className || ''}`, ...props })));
+DrawerHeader.displayName = 'DrawerHeader';
+export const DrawerBody = forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: `flex-1 p-6 overflow-y-auto ${className || ''}`, ...props })));
+DrawerBody.displayName = 'DrawerBody';
+export const DrawerFooter = forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: `px-6 py-4 border-t border-gray-200 ${className || ''}`, ...props })));
+DrawerFooter.displayName = 'DrawerFooter';
+export const DrawerCloseButton = forwardRef(({ className, onClick, ...props }, ref) => (React.createElement("button", { ref: ref, className: `absolute right-4 top-4 text-gray-400 hover:text-gray-600 ${className || ''}`, onClick: onClick, "aria-label": "Close drawer", ...props }, "\u00D7")));
+DrawerCloseButton.displayName = 'DrawerCloseButton';
+const Drawer = forwardRef(({ isOpen, onClose, children, className, placement, size, closeOnOverlayClick = true, ...props }, ref) => {
+    const drawerRef = useRef(null);
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && onClose) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    return createPortal(React.createElement(React.Fragment, null,
+        React.createElement(DrawerOverlay, { onPress: closeOnOverlayClick ? onClose : undefined }),
+        React.createElement("div", { ref: ref, className: `${drawerStyle({ placement, size, class: className })} ${isOpen ? 'translate-x-0 translate-y-0' : ''}`, role: "dialog", "aria-modal": "true", ...props }, children)), document.body);
+});
+Drawer.displayName = 'Drawer';
+export { Drawer };
+//# sourceMappingURL=index.web.js.map

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

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