@lmb-it/kitsconcerto-native 0.1.236

package/apps/mobile/src/ui/drawer/index.cjs

@@ -0,0 +1,264 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var creator = require('@gluestack-ui/core/modal/creator');
+var reactNative = require('react-native');
+var motion = require('@legendapp/motion');
+var nativewindUtils = require('@gluestack-ui/utils/nativewind-utils');
+var nativewind = require('nativewind');
+
+const AnimatedPressable = motion.createMotionAnimatedComponent(
+  reactNative.Pressable
+);
+const SCOPE = "MODAL";
+const screenWidth = reactNative.Dimensions.get("window").width;
+const screenHeight = reactNative.Dimensions.get("window").height;
+const sizes = {
+  sm: 0.25,
+  md: 0.5,
+  lg: 0.75,
+  full: 1
+};
+const MotionView = motion.Motion.View;
+const UIDrawer = creator.createModal({
+  Root: nativewindUtils.withStyleContext(reactNative.View, SCOPE),
+  Backdrop: AnimatedPressable,
+  Content: MotionView,
+  Body: reactNative.ScrollView,
+  CloseButton: reactNative.Pressable,
+  Footer: reactNative.View,
+  Header: reactNative.View,
+  AnimatePresence: motion.AnimatePresence
+});
+nativewind.cssInterop(AnimatedPressable, { className: "style" });
+nativewind.cssInterop(MotionView, { className: "style" });
+const drawerStyle = nativewindUtils.tva({
+  base: "w-full h-full web:pointer-events-none relative",
+  variants: {
+    size: {
+      sm: "",
+      md: "",
+      lg: "",
+      full: ""
+    },
+    anchor: {
+      left: "items-start",
+      right: "items-end",
+      top: "justify-start",
+      bottom: "justify-end"
+    }
+  }
+});
+const drawerBackdropStyle = nativewindUtils.tva({
+  base: "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default"
+});
+const drawerContentStyle = nativewindUtils.tva({
+  base: "bg-background-0 overflow-scroll border-outline-100 p-6 absolute",
+  parentVariants: {
+    size: {
+      sm: "w-1/4",
+      md: "w-1/2",
+      lg: "w-3/4",
+      full: "w-full"
+    },
+    anchor: {
+      left: "h-full border-r",
+      right: "h-full border-l",
+      top: "w-full border-b",
+      bottom: "w-full border-t"
+    }
+  },
+  parentCompoundVariants: [
+    {
+      anchor: "top",
+      size: "sm",
+      class: "h-1/4"
+    },
+    {
+      anchor: "top",
+      size: "md",
+      class: "h-1/2"
+    },
+    {
+      anchor: "top",
+      size: "lg",
+      class: "h-3/4"
+    },
+    {
+      anchor: "top",
+      size: "full",
+      class: "h-full"
+    },
+    {
+      anchor: "bottom",
+      size: "sm",
+      class: "h-1/4"
+    },
+    {
+      anchor: "bottom",
+      size: "md",
+      class: "h-1/2"
+    },
+    {
+      anchor: "bottom",
+      size: "lg",
+      class: "h-3/4"
+    },
+    {
+      anchor: "bottom",
+      size: "full",
+      class: "h-full"
+    }
+  ]
+});
+const drawerCloseButtonStyle = nativewindUtils.tva({
+  base: "z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer"
+});
+const drawerHeaderStyle = nativewindUtils.tva({
+  base: "justify-between items-center flex-row"
+});
+const drawerBodyStyle = nativewindUtils.tva({
+  base: "mt-4 mb-6 shrink-0"
+});
+const drawerFooterStyle = nativewindUtils.tva({
+  base: "flex-row justify-end items-center"
+});
+const Drawer = React.forwardRef(function Drawer2({ className, size = "sm", anchor = "left", ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIDrawer,
+    {
+      ref,
+      ...props,
+      pointerEvents: "box-none",
+      className: drawerStyle({ size, anchor, class: className }),
+      context: { size, anchor }
+    }
+  );
+});
+const DrawerBackdrop = React.forwardRef(function DrawerBackdrop2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIDrawer.Backdrop,
+    {
+      ref,
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 0.5
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        type: "spring",
+        damping: 18,
+        stiffness: 250,
+        opacity: {
+          type: "timing",
+          duration: 250
+        }
+      },
+      ...props,
+      className: drawerBackdropStyle({
+        class: className
+      })
+    }
+  );
+});
+const DrawerContent = React.forwardRef(function DrawerContent2({ className, ...props }, ref) {
+  const { size: parentSize, anchor: parentAnchor } = nativewindUtils.useStyleContext(SCOPE);
+  const drawerHeight = screenHeight * (sizes[parentSize] || sizes.md);
+  const drawerWidth = screenWidth * (sizes[parentSize] || sizes.md);
+  const isHorizontal = parentAnchor === "left" || parentAnchor === "right";
+  const initialObj = isHorizontal ? { x: parentAnchor === "left" ? -drawerWidth : drawerWidth } : { y: parentAnchor === "top" ? -drawerHeight : drawerHeight };
+  const animateObj = isHorizontal ? { x: 0 } : { y: 0 };
+  const exitObj = isHorizontal ? { x: parentAnchor === "left" ? -drawerWidth : drawerWidth } : { y: parentAnchor === "top" ? -drawerHeight : drawerHeight };
+  const customClass = isHorizontal ? `top-0 ${parentAnchor === "left" ? "left-0" : "right-0"}` : `left-0 ${parentAnchor === "top" ? "top-0" : "bottom-0"}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIDrawer.Content,
+    {
+      ref,
+      initial: initialObj,
+      animate: animateObj,
+      exit: exitObj,
+      transition: {
+        type: "timing",
+        duration: 300
+      },
+      ...props,
+      className: drawerContentStyle({
+        parentVariants: {
+          size: parentSize,
+          anchor: parentAnchor
+        },
+        class: `${className} ${customClass}`
+      }),
+      pointerEvents: "auto"
+    }
+  );
+});
+const DrawerHeader = React.forwardRef(function DrawerHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIDrawer.Header,
+    {
+      ref,
+      ...props,
+      className: drawerHeaderStyle({
+        class: className
+      })
+    }
+  );
+});
+const DrawerBody = React.forwardRef(function DrawerBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIDrawer.Body,
+    {
+      ref,
+      ...props,
+      className: drawerBodyStyle({
+        class: className
+      })
+    }
+  );
+});
+const DrawerFooter = React.forwardRef(function DrawerFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIDrawer.Footer,
+    {
+      ref,
+      ...props,
+      className: drawerFooterStyle({
+        class: className
+      })
+    }
+  );
+});
+const DrawerCloseButton = React.forwardRef(function DrawerCloseButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIDrawer.CloseButton,
+    {
+      ref,
+      ...props,
+      className: drawerCloseButtonStyle({
+        class: className
+      })
+    }
+  );
+});
+Drawer.displayName = "Drawer";
+DrawerBackdrop.displayName = "DrawerBackdrop";
+DrawerContent.displayName = "DrawerContent";
+DrawerHeader.displayName = "DrawerHeader";
+DrawerBody.displayName = "DrawerBody";
+DrawerFooter.displayName = "DrawerFooter";
+DrawerCloseButton.displayName = "DrawerCloseButton";
+
+exports.Drawer = Drawer;
+exports.DrawerBackdrop = DrawerBackdrop;
+exports.DrawerBody = DrawerBody;
+exports.DrawerCloseButton = DrawerCloseButton;
+exports.DrawerContent = DrawerContent;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+//# sourceMappingURL=index.cjs.map

package/apps/mobile/src/ui/drawer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../../../../apps/mobile/src/ui/drawer/index.tsx"],"sourcesContent":["'use client';\nimport React from 'react';\nimport { createModal as createDrawer } from '@gluestack-ui/core/modal/creator';\nimport {\n  Pressable,\n  View,\n  ScrollView,\n  Dimensions,\n  ViewStyle,\n} from 'react-native';\nimport {\n  Motion,\n  AnimatePresence,\n  createMotionAnimatedComponent,\n  MotionComponentProps,\n} from '@legendapp/motion';\nimport { tva } from '@gluestack-ui/utils/nativewind-utils';\nimport {\n  withStyleContext,\n  useStyleContext,\n} from '@gluestack-ui/utils/nativewind-utils';\nimport { cssInterop } from 'nativewind';\nimport type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';\nimport { IAnimatedPressableProps, IMotionViewProps } from '../';\n\nconst AnimatedPressable = createMotionAnimatedComponent(\n  Pressable\n) as React.ComponentType<IAnimatedPressableProps>;\n\nconst SCOPE = 'MODAL';\nconst screenWidth = Dimensions.get('window').width;\nconst screenHeight = Dimensions.get('window').height;\nconst sizes: { [key: string]: number } = {\n  sm: 0.25,\n  md: 0.5,\n  lg: 0.75,\n  full: 1,\n};\n\n\nconst MotionView = Motion.View as React.ComponentType<IMotionViewProps>;\n\nconst UIDrawer = createDrawer({\n  Root: withStyleContext(View, SCOPE),\n  Backdrop: AnimatedPressable,\n  Content: MotionView,\n  Body: ScrollView,\n  CloseButton: Pressable,\n  Footer: View,\n  Header: View,\n  AnimatePresence: AnimatePresence,\n});\n\ncssInterop(AnimatedPressable, { className: 'style' });\ncssInterop(MotionView, { className: 'style' });\n\nconst drawerStyle = tva({\n  base: 'w-full h-full web:pointer-events-none relative',\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      full: '',\n    },\n    anchor: {\n      left: 'items-start',\n      right: 'items-end',\n      top: 'justify-start',\n      bottom: 'justify-end',\n    },\n  },\n});\n\nconst drawerBackdropStyle = tva({\n  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',\n});\n\nconst drawerContentStyle = tva({\n  base: 'bg-background-0 overflow-scroll border-outline-100 p-6 absolute',\n  parentVariants: {\n    size: {\n      sm: 'w-1/4',\n      md: 'w-1/2',\n      lg: 'w-3/4',\n      full: 'w-full',\n    },\n    anchor: {\n      left: 'h-full border-r',\n      right: 'h-full border-l',\n      top: 'w-full border-b',\n      bottom: 'w-full border-t',\n    },\n  },\n  parentCompoundVariants: [\n    {\n      anchor: 'top',\n      size: 'sm',\n      class: 'h-1/4',\n    },\n    {\n      anchor: 'top',\n      size: 'md',\n      class: 'h-1/2',\n    },\n    {\n      anchor: 'top',\n      size: 'lg',\n      class: 'h-3/4',\n    },\n    {\n      anchor: 'top',\n      size: 'full',\n      class: 'h-full',\n    },\n    {\n      anchor: 'bottom',\n      size: 'sm',\n      class: 'h-1/4',\n    },\n    {\n      anchor: 'bottom',\n      size: 'md',\n      class: 'h-1/2',\n    },\n    {\n      anchor: 'bottom',\n      size: 'lg',\n      class: 'h-3/4',\n    },\n    {\n      anchor: 'bottom',\n      size: 'full',\n      class: 'h-full',\n    },\n  ],\n});\n\nconst drawerCloseButtonStyle = tva({\n  base: 'z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',\n});\n\nconst drawerHeaderStyle = tva({\n  base: 'justify-between items-center flex-row',\n});\n\nconst drawerBodyStyle = tva({\n  base: 'mt-4 mb-6 shrink-0',\n});\n\nconst drawerFooterStyle = tva({\n  base: 'flex-row justify-end items-center',\n});\n\nexport type IDrawerProps = React.ComponentProps<typeof UIDrawer> &\n  VariantProps<typeof drawerStyle> & { className?: string };\n\nexport type IDrawerBackdropProps = React.ComponentProps<typeof UIDrawer.Backdrop> &\n  VariantProps<typeof drawerBackdropStyle> & { className?: string };\n\nexport type IDrawerContentProps = React.ComponentProps<typeof UIDrawer.Content> &\n  VariantProps<typeof drawerContentStyle> & { className?: string };\n\nexport type IDrawerHeaderProps = React.ComponentProps<typeof UIDrawer.Header> &\n  VariantProps<typeof drawerHeaderStyle> & { className?: string };\n\nexport type IDrawerBodyProps = React.ComponentProps<typeof UIDrawer.Body> &\n  VariantProps<typeof drawerBodyStyle> & { className?: string };\n\nexport type IDrawerFooterProps = React.ComponentProps<typeof UIDrawer.Footer> &\n  VariantProps<typeof drawerFooterStyle> & { className?: string };\n\nexport type IDrawerCloseButtonProps = React.ComponentProps<\n  typeof UIDrawer.CloseButton\n> &\n  VariantProps<typeof drawerCloseButtonStyle> & { className?: string };\n\nconst Drawer = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer>,\n  IDrawerProps\n>(function Drawer({ className, size = 'sm', anchor = 'left', ...props }, ref) {\n  return (\n    <UIDrawer\n      ref={ref}\n      {...props}\n      pointerEvents=\"box-none\"\n      className={drawerStyle({ size, anchor, class: className })}\n      context={{ size, anchor }}\n    />\n  );\n});\n\nconst DrawerBackdrop = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Backdrop>,\n  IDrawerBackdropProps\n>(function DrawerBackdrop({ className, ...props }, ref) {\n  return (\n    <UIDrawer.Backdrop\n      ref={ref}\n      initial={{\n        opacity: 0,\n      }}\n      animate={{\n        opacity: 0.5,\n      }}\n      exit={{\n        opacity: 0,\n      }}\n      transition={{\n        type: 'spring',\n        damping: 18,\n        stiffness: 250,\n        opacity: {\n          type: 'timing',\n          duration: 250,\n        },\n      }}\n      {...props}\n      className={drawerBackdropStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst DrawerContent = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Content>,\n  IDrawerContentProps\n>(function DrawerContent({ className, ...props }, ref) {\n  const { size: parentSize, anchor: parentAnchor } = useStyleContext(SCOPE);\n\n  const drawerHeight = screenHeight * (sizes[parentSize] || sizes.md);\n  const drawerWidth = screenWidth * (sizes[parentSize] || sizes.md);\n\n  const isHorizontal = parentAnchor === 'left' || parentAnchor === 'right';\n\n  const initialObj = isHorizontal\n    ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }\n    : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };\n\n  const animateObj = isHorizontal ? { x: 0 } : { y: 0 };\n\n  const exitObj = isHorizontal\n    ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }\n    : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };\n\n  const customClass = isHorizontal\n    ? `top-0 ${parentAnchor === 'left' ? 'left-0' : 'right-0'}`\n    : `left-0 ${parentAnchor === 'top' ? 'top-0' : 'bottom-0'}`;\n\n  return (\n    <UIDrawer.Content\n      ref={ref}\n      initial={initialObj}\n      animate={animateObj}\n      exit={exitObj}\n      transition={{\n        type: 'timing',\n        duration: 300,\n      }}\n      {...props}\n      className={drawerContentStyle({\n        parentVariants: {\n          size: parentSize,\n          anchor: parentAnchor,\n        },\n        class: `${className} ${customClass}`,\n      })}\n      pointerEvents=\"auto\"\n    />\n  );\n});\n\nconst DrawerHeader = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Header>,\n  IDrawerHeaderProps\n>(function DrawerHeader({ className, ...props }, ref) {\n  return (\n    <UIDrawer.Header\n      ref={ref}\n      {...props}\n      className={drawerHeaderStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst DrawerBody = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Body>,\n  IDrawerBodyProps\n>(function DrawerBody({ className, ...props }, ref) {\n  return (\n    <UIDrawer.Body\n      ref={ref}\n      {...props}\n      className={drawerBodyStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst DrawerFooter = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Footer>,\n  IDrawerFooterProps\n>(function DrawerFooter({ className, ...props }, ref) {\n  return (\n    <UIDrawer.Footer\n      ref={ref}\n      {...props}\n      className={drawerFooterStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst DrawerCloseButton = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.CloseButton>,\n  IDrawerCloseButtonProps\n>(function DrawerCloseButton({ className, ...props }, ref) {\n  return (\n    <UIDrawer.CloseButton\n      ref={ref}\n      {...props}\n      className={drawerCloseButtonStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nDrawer.displayName = 'Drawer';\nDrawerBackdrop.displayName = 'DrawerBackdrop';\nDrawerContent.displayName = 'DrawerContent';\nDrawerHeader.displayName = 'DrawerHeader';\nDrawerBody.displayName = 'DrawerBody';\nDrawerFooter.displayName = 'DrawerFooter';\nDrawerCloseButton.displayName = 'DrawerCloseButton';\n\nexport {\n  Drawer,\n  DrawerBackdrop,\n  DrawerContent,\n  DrawerCloseButton,\n  DrawerHeader,\n  DrawerBody,\n  DrawerFooter,\n};\n"],"names":["createMotionAnimatedComponent","Pressable","Dimensions","Motion","createDrawer","withStyleContext","View","ScrollView","AnimatePresence","cssInterop","tva","Drawer","jsx","DrawerBackdrop","DrawerContent","useStyleContext","DrawerHeader","DrawerBody","DrawerFooter","DrawerCloseButton"],"mappings":"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"}

package/apps/mobile/src/ui/drawer/index.js

@@ -0,0 +1,256 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { createModal } from '@gluestack-ui/core/modal/creator';
+import { Pressable, Dimensions, View, ScrollView } from 'react-native';
+import { createMotionAnimatedComponent, Motion, AnimatePresence } from '@legendapp/motion';
+import { withStyleContext, tva, useStyleContext } from '@gluestack-ui/utils/nativewind-utils';
+import { cssInterop } from 'nativewind';
+
+const AnimatedPressable = createMotionAnimatedComponent(
+  Pressable
+);
+const SCOPE = "MODAL";
+const screenWidth = Dimensions.get("window").width;
+const screenHeight = Dimensions.get("window").height;
+const sizes = {
+  sm: 0.25,
+  md: 0.5,
+  lg: 0.75,
+  full: 1
+};
+const MotionView = Motion.View;
+const UIDrawer = createModal({
+  Root: withStyleContext(View, SCOPE),
+  Backdrop: AnimatedPressable,
+  Content: MotionView,
+  Body: ScrollView,
+  CloseButton: Pressable,
+  Footer: View,
+  Header: View,
+  AnimatePresence
+});
+cssInterop(AnimatedPressable, { className: "style" });
+cssInterop(MotionView, { className: "style" });
+const drawerStyle = tva({
+  base: "w-full h-full web:pointer-events-none relative",
+  variants: {
+    size: {
+      sm: "",
+      md: "",
+      lg: "",
+      full: ""
+    },
+    anchor: {
+      left: "items-start",
+      right: "items-end",
+      top: "justify-start",
+      bottom: "justify-end"
+    }
+  }
+});
+const drawerBackdropStyle = tva({
+  base: "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default"
+});
+const drawerContentStyle = tva({
+  base: "bg-background-0 overflow-scroll border-outline-100 p-6 absolute",
+  parentVariants: {
+    size: {
+      sm: "w-1/4",
+      md: "w-1/2",
+      lg: "w-3/4",
+      full: "w-full"
+    },
+    anchor: {
+      left: "h-full border-r",
+      right: "h-full border-l",
+      top: "w-full border-b",
+      bottom: "w-full border-t"
+    }
+  },
+  parentCompoundVariants: [
+    {
+      anchor: "top",
+      size: "sm",
+      class: "h-1/4"
+    },
+    {
+      anchor: "top",
+      size: "md",
+      class: "h-1/2"
+    },
+    {
+      anchor: "top",
+      size: "lg",
+      class: "h-3/4"
+    },
+    {
+      anchor: "top",
+      size: "full",
+      class: "h-full"
+    },
+    {
+      anchor: "bottom",
+      size: "sm",
+      class: "h-1/4"
+    },
+    {
+      anchor: "bottom",
+      size: "md",
+      class: "h-1/2"
+    },
+    {
+      anchor: "bottom",
+      size: "lg",
+      class: "h-3/4"
+    },
+    {
+      anchor: "bottom",
+      size: "full",
+      class: "h-full"
+    }
+  ]
+});
+const drawerCloseButtonStyle = tva({
+  base: "z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer"
+});
+const drawerHeaderStyle = tva({
+  base: "justify-between items-center flex-row"
+});
+const drawerBodyStyle = tva({
+  base: "mt-4 mb-6 shrink-0"
+});
+const drawerFooterStyle = tva({
+  base: "flex-row justify-end items-center"
+});
+const Drawer = React.forwardRef(function Drawer2({ className, size = "sm", anchor = "left", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIDrawer,
+    {
+      ref,
+      ...props,
+      pointerEvents: "box-none",
+      className: drawerStyle({ size, anchor, class: className }),
+      context: { size, anchor }
+    }
+  );
+});
+const DrawerBackdrop = React.forwardRef(function DrawerBackdrop2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIDrawer.Backdrop,
+    {
+      ref,
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 0.5
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        type: "spring",
+        damping: 18,
+        stiffness: 250,
+        opacity: {
+          type: "timing",
+          duration: 250
+        }
+      },
+      ...props,
+      className: drawerBackdropStyle({
+        class: className
+      })
+    }
+  );
+});
+const DrawerContent = React.forwardRef(function DrawerContent2({ className, ...props }, ref) {
+  const { size: parentSize, anchor: parentAnchor } = useStyleContext(SCOPE);
+  const drawerHeight = screenHeight * (sizes[parentSize] || sizes.md);
+  const drawerWidth = screenWidth * (sizes[parentSize] || sizes.md);
+  const isHorizontal = parentAnchor === "left" || parentAnchor === "right";
+  const initialObj = isHorizontal ? { x: parentAnchor === "left" ? -drawerWidth : drawerWidth } : { y: parentAnchor === "top" ? -drawerHeight : drawerHeight };
+  const animateObj = isHorizontal ? { x: 0 } : { y: 0 };
+  const exitObj = isHorizontal ? { x: parentAnchor === "left" ? -drawerWidth : drawerWidth } : { y: parentAnchor === "top" ? -drawerHeight : drawerHeight };
+  const customClass = isHorizontal ? `top-0 ${parentAnchor === "left" ? "left-0" : "right-0"}` : `left-0 ${parentAnchor === "top" ? "top-0" : "bottom-0"}`;
+  return /* @__PURE__ */ jsx(
+    UIDrawer.Content,
+    {
+      ref,
+      initial: initialObj,
+      animate: animateObj,
+      exit: exitObj,
+      transition: {
+        type: "timing",
+        duration: 300
+      },
+      ...props,
+      className: drawerContentStyle({
+        parentVariants: {
+          size: parentSize,
+          anchor: parentAnchor
+        },
+        class: `${className} ${customClass}`
+      }),
+      pointerEvents: "auto"
+    }
+  );
+});
+const DrawerHeader = React.forwardRef(function DrawerHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIDrawer.Header,
+    {
+      ref,
+      ...props,
+      className: drawerHeaderStyle({
+        class: className
+      })
+    }
+  );
+});
+const DrawerBody = React.forwardRef(function DrawerBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIDrawer.Body,
+    {
+      ref,
+      ...props,
+      className: drawerBodyStyle({
+        class: className
+      })
+    }
+  );
+});
+const DrawerFooter = React.forwardRef(function DrawerFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIDrawer.Footer,
+    {
+      ref,
+      ...props,
+      className: drawerFooterStyle({
+        class: className
+      })
+    }
+  );
+});
+const DrawerCloseButton = React.forwardRef(function DrawerCloseButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIDrawer.CloseButton,
+    {
+      ref,
+      ...props,
+      className: drawerCloseButtonStyle({
+        class: className
+      })
+    }
+  );
+});
+Drawer.displayName = "Drawer";
+DrawerBackdrop.displayName = "DrawerBackdrop";
+DrawerContent.displayName = "DrawerContent";
+DrawerHeader.displayName = "DrawerHeader";
+DrawerBody.displayName = "DrawerBody";
+DrawerFooter.displayName = "DrawerFooter";
+DrawerCloseButton.displayName = "DrawerCloseButton";
+
+export { Drawer, DrawerBackdrop, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader };
+//# sourceMappingURL=index.js.map

package/apps/mobile/src/ui/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../../apps/mobile/src/ui/drawer/index.tsx"],"sourcesContent":["'use client';\nimport React from 'react';\nimport { createModal as createDrawer } from '@gluestack-ui/core/modal/creator';\nimport {\n  Pressable,\n  View,\n  ScrollView,\n  Dimensions,\n  ViewStyle,\n} from 'react-native';\nimport {\n  Motion,\n  AnimatePresence,\n  createMotionAnimatedComponent,\n  MotionComponentProps,\n} from '@legendapp/motion';\nimport { tva } from '@gluestack-ui/utils/nativewind-utils';\nimport {\n  withStyleContext,\n  useStyleContext,\n} from '@gluestack-ui/utils/nativewind-utils';\nimport { cssInterop } from 'nativewind';\nimport type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';\nimport { IAnimatedPressableProps, IMotionViewProps } from '../';\n\nconst AnimatedPressable = createMotionAnimatedComponent(\n  Pressable\n) as React.ComponentType<IAnimatedPressableProps>;\n\nconst SCOPE = 'MODAL';\nconst screenWidth = Dimensions.get('window').width;\nconst screenHeight = Dimensions.get('window').height;\nconst sizes: { [key: string]: number } = {\n  sm: 0.25,\n  md: 0.5,\n  lg: 0.75,\n  full: 1,\n};\n\n\nconst MotionView = Motion.View as React.ComponentType<IMotionViewProps>;\n\nconst UIDrawer = createDrawer({\n  Root: withStyleContext(View, SCOPE),\n  Backdrop: AnimatedPressable,\n  Content: MotionView,\n  Body: ScrollView,\n  CloseButton: Pressable,\n  Footer: View,\n  Header: View,\n  AnimatePresence: AnimatePresence,\n});\n\ncssInterop(AnimatedPressable, { className: 'style' });\ncssInterop(MotionView, { className: 'style' });\n\nconst drawerStyle = tva({\n  base: 'w-full h-full web:pointer-events-none relative',\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      full: '',\n    },\n    anchor: {\n      left: 'items-start',\n      right: 'items-end',\n      top: 'justify-start',\n      bottom: 'justify-end',\n    },\n  },\n});\n\nconst drawerBackdropStyle = tva({\n  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',\n});\n\nconst drawerContentStyle = tva({\n  base: 'bg-background-0 overflow-scroll border-outline-100 p-6 absolute',\n  parentVariants: {\n    size: {\n      sm: 'w-1/4',\n      md: 'w-1/2',\n      lg: 'w-3/4',\n      full: 'w-full',\n    },\n    anchor: {\n      left: 'h-full border-r',\n      right: 'h-full border-l',\n      top: 'w-full border-b',\n      bottom: 'w-full border-t',\n    },\n  },\n  parentCompoundVariants: [\n    {\n      anchor: 'top',\n      size: 'sm',\n      class: 'h-1/4',\n    },\n    {\n      anchor: 'top',\n      size: 'md',\n      class: 'h-1/2',\n    },\n    {\n      anchor: 'top',\n      size: 'lg',\n      class: 'h-3/4',\n    },\n    {\n      anchor: 'top',\n      size: 'full',\n      class: 'h-full',\n    },\n    {\n      anchor: 'bottom',\n      size: 'sm',\n      class: 'h-1/4',\n    },\n    {\n      anchor: 'bottom',\n      size: 'md',\n      class: 'h-1/2',\n    },\n    {\n      anchor: 'bottom',\n      size: 'lg',\n      class: 'h-3/4',\n    },\n    {\n      anchor: 'bottom',\n      size: 'full',\n      class: 'h-full',\n    },\n  ],\n});\n\nconst drawerCloseButtonStyle = tva({\n  base: 'z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',\n});\n\nconst drawerHeaderStyle = tva({\n  base: 'justify-between items-center flex-row',\n});\n\nconst drawerBodyStyle = tva({\n  base: 'mt-4 mb-6 shrink-0',\n});\n\nconst drawerFooterStyle = tva({\n  base: 'flex-row justify-end items-center',\n});\n\nexport type IDrawerProps = React.ComponentProps<typeof UIDrawer> &\n  VariantProps<typeof drawerStyle> & { className?: string };\n\nexport type IDrawerBackdropProps = React.ComponentProps<typeof UIDrawer.Backdrop> &\n  VariantProps<typeof drawerBackdropStyle> & { className?: string };\n\nexport type IDrawerContentProps = React.ComponentProps<typeof UIDrawer.Content> &\n  VariantProps<typeof drawerContentStyle> & { className?: string };\n\nexport type IDrawerHeaderProps = React.ComponentProps<typeof UIDrawer.Header> &\n  VariantProps<typeof drawerHeaderStyle> & { className?: string };\n\nexport type IDrawerBodyProps = React.ComponentProps<typeof UIDrawer.Body> &\n  VariantProps<typeof drawerBodyStyle> & { className?: string };\n\nexport type IDrawerFooterProps = React.ComponentProps<typeof UIDrawer.Footer> &\n  VariantProps<typeof drawerFooterStyle> & { className?: string };\n\nexport type IDrawerCloseButtonProps = React.ComponentProps<\n  typeof UIDrawer.CloseButton\n> &\n  VariantProps<typeof drawerCloseButtonStyle> & { className?: string };\n\nconst Drawer = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer>,\n  IDrawerProps\n>(function Drawer({ className, size = 'sm', anchor = 'left', ...props }, ref) {\n  return (\n    <UIDrawer\n      ref={ref}\n      {...props}\n      pointerEvents=\"box-none\"\n      className={drawerStyle({ size, anchor, class: className })}\n      context={{ size, anchor }}\n    />\n  );\n});\n\nconst DrawerBackdrop = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Backdrop>,\n  IDrawerBackdropProps\n>(function DrawerBackdrop({ className, ...props }, ref) {\n  return (\n    <UIDrawer.Backdrop\n      ref={ref}\n      initial={{\n        opacity: 0,\n      }}\n      animate={{\n        opacity: 0.5,\n      }}\n      exit={{\n        opacity: 0,\n      }}\n      transition={{\n        type: 'spring',\n        damping: 18,\n        stiffness: 250,\n        opacity: {\n          type: 'timing',\n          duration: 250,\n        },\n      }}\n      {...props}\n      className={drawerBackdropStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst DrawerContent = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Content>,\n  IDrawerContentProps\n>(function DrawerContent({ className, ...props }, ref) {\n  const { size: parentSize, anchor: parentAnchor } = useStyleContext(SCOPE);\n\n  const drawerHeight = screenHeight * (sizes[parentSize] || sizes.md);\n  const drawerWidth = screenWidth * (sizes[parentSize] || sizes.md);\n\n  const isHorizontal = parentAnchor === 'left' || parentAnchor === 'right';\n\n  const initialObj = isHorizontal\n    ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }\n    : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };\n\n  const animateObj = isHorizontal ? { x: 0 } : { y: 0 };\n\n  const exitObj = isHorizontal\n    ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }\n    : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };\n\n  const customClass = isHorizontal\n    ? `top-0 ${parentAnchor === 'left' ? 'left-0' : 'right-0'}`\n    : `left-0 ${parentAnchor === 'top' ? 'top-0' : 'bottom-0'}`;\n\n  return (\n    <UIDrawer.Content\n      ref={ref}\n      initial={initialObj}\n      animate={animateObj}\n      exit={exitObj}\n      transition={{\n        type: 'timing',\n        duration: 300,\n      }}\n      {...props}\n      className={drawerContentStyle({\n        parentVariants: {\n          size: parentSize,\n          anchor: parentAnchor,\n        },\n        class: `${className} ${customClass}`,\n      })}\n      pointerEvents=\"auto\"\n    />\n  );\n});\n\nconst DrawerHeader = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Header>,\n  IDrawerHeaderProps\n>(function DrawerHeader({ className, ...props }, ref) {\n  return (\n    <UIDrawer.Header\n      ref={ref}\n      {...props}\n      className={drawerHeaderStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst DrawerBody = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Body>,\n  IDrawerBodyProps\n>(function DrawerBody({ className, ...props }, ref) {\n  return (\n    <UIDrawer.Body\n      ref={ref}\n      {...props}\n      className={drawerBodyStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst DrawerFooter = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.Footer>,\n  IDrawerFooterProps\n>(function DrawerFooter({ className, ...props }, ref) {\n  return (\n    <UIDrawer.Footer\n      ref={ref}\n      {...props}\n      className={drawerFooterStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst DrawerCloseButton = React.forwardRef<\n  React.ComponentRef<typeof UIDrawer.CloseButton>,\n  IDrawerCloseButtonProps\n>(function DrawerCloseButton({ className, ...props }, ref) {\n  return (\n    <UIDrawer.CloseButton\n      ref={ref}\n      {...props}\n      className={drawerCloseButtonStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nDrawer.displayName = 'Drawer';\nDrawerBackdrop.displayName = 'DrawerBackdrop';\nDrawerContent.displayName = 'DrawerContent';\nDrawerHeader.displayName = 'DrawerHeader';\nDrawerBody.displayName = 'DrawerBody';\nDrawerFooter.displayName = 'DrawerFooter';\nDrawerCloseButton.displayName = 'DrawerCloseButton';\n\nexport {\n  Drawer,\n  DrawerBackdrop,\n  DrawerContent,\n  DrawerCloseButton,\n  DrawerHeader,\n  DrawerBody,\n  DrawerFooter,\n};\n"],"names":["createDrawer","Drawer","DrawerBackdrop","DrawerContent","DrawerHeader","DrawerBody","DrawerFooter","DrawerCloseButton"],"mappings":"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"}