@kopexa/drawer 0.0.0-canary-20250718183330

package/README.md

@@ -0,0 +1,24 @@
+# @kopexa/drawer
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @kopexa/drawer
+# or
+npm i @kopexa/drawer
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).

package/dist/chunk-IPVFJD7Z.mjs

@@ -0,0 +1,37 @@
+"use client";
+import {
+  DrawerBody,
+  DrawerClose,
+  DrawerCloseTrigger,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerRoot,
+  DrawerTitle,
+  DrawerTrigger,
+  __export
+} from "./chunk-P5E6W3AQ.mjs";
+
+// src/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+  Body: () => DrawerBody,
+  Close: () => DrawerClose,
+  CloseTrigger: () => DrawerCloseTrigger,
+  Content: () => DrawerContent,
+  Description: () => DrawerDescription,
+  Footer: () => DrawerFooter,
+  Header: () => DrawerHeader,
+  Overlay: () => DrawerOverlay,
+  Portal: () => DrawerPortal,
+  Root: () => DrawerRoot,
+  Title: () => DrawerTitle,
+  Trigger: () => DrawerTrigger
+});
+
+export {
+  namespace_exports
+};

package/dist/chunk-P5E6W3AQ.mjs

@@ -0,0 +1,281 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/drawer.tsx
+import { CloseIcon } from "@kopexa/icons";
+import { TRANSITION_EASINGS, TRANSITION_VARIANTS } from "@kopexa/motion-utils";
+import { createContext } from "@kopexa/react-utils";
+import { drawer } from "@kopexa/theme";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {
+  AnimatePresence,
+  domAnimation,
+  LazyMotion,
+  motion
+} from "motion/react";
+import { useMemo as useMemo2 } from "react";
+
+// ../../hooks/use-callback-ref/src/index.ts
+import { useCallback, useInsertionEffect, useRef } from "react";
+function useCallbackRef(callback, deps = []) {
+  const callbackRef = useRef(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  useInsertionEffect(() => {
+    callbackRef.current = callback;
+  });
+  return useCallback((...args) => {
+    var _a;
+    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
+  }, deps);
+}
+
+// ../../hooks/use-controllable-state/src/index.ts
+import { useMemo, useState } from "react";
+function useControllableState(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    shouldUpdate = (prev, next) => prev !== next
+  } = props;
+  const onChangeProp = useCallbackRef(onChange);
+  const shouldUpdateProp = useCallbackRef(shouldUpdate);
+  const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
+  const controlled = valueProp !== void 0;
+  const value = controlled ? valueProp : uncontrolledState;
+  const setValue = useCallbackRef(
+    (next) => {
+      const setter = next;
+      const nextValue = typeof next === "function" ? setter(value) : next;
+      if (!shouldUpdateProp(value, nextValue)) {
+        return;
+      }
+      if (!controlled) {
+        setUncontrolledState(nextValue);
+      }
+      onChangeProp(nextValue);
+    },
+    [controlled, onChangeProp, value, shouldUpdateProp]
+  );
+  return [value, setValue];
+}
+
+// src/drawer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var [DrawerProvider, useDrawerContext] = createContext();
+var DrawerRoot = (props) => {
+  const {
+    open: openProp,
+    onOpenChange,
+    size,
+    radius,
+    placement = "right",
+    ...restProps
+  } = props;
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    onChange: onOpenChange,
+    defaultValue: false
+  });
+  const styles = drawer({ size, radius, placement });
+  return /* @__PURE__ */ jsx(DrawerProvider, { value: { styles, open, placement }, children: /* @__PURE__ */ jsx(
+    DialogPrimitive.Root,
+    {
+      "data-slot": "dialog",
+      open,
+      onOpenChange: setOpen,
+      ...restProps
+    }
+  ) });
+};
+function DrawerTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+  const { styles } = useDrawerContext();
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: styles.overlay({
+        className
+      }),
+      ...props,
+      asChild: true,
+      children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          animate: "enter",
+          exit: "exit",
+          initial: "exit",
+          variants: TRANSITION_VARIANTS.fade
+        }
+      )
+    }
+  ) });
+}
+var DrawerContent = (props) => {
+  const { className, children, showCloseButton, ...rest } = props;
+  const { open, styles, placement } = useDrawerContext();
+  const motionProps = useMemo2(() => {
+    const key = placement === "left" || placement === "right" ? "x" : "y";
+    return {
+      variants: {
+        enter: {
+          [key]: 0,
+          transition: {
+            [key]: {
+              duration: 0.2,
+              ease: TRANSITION_EASINGS.easeOut
+            }
+          }
+        },
+        exit: {
+          [key]: placement === "top" || placement === "left" ? "-100%" : "100%",
+          transition: {
+            [key]: {
+              duration: 0.1,
+              ease: TRANSITION_EASINGS.easeIn
+            }
+          }
+        }
+      }
+    };
+  }, [placement]);
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", forceMount: true, children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "drawer-content",
+        className: styles.content({ className }),
+        asChild: true,
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            animate: "enter",
+            exit: "exit",
+            initial: "exit",
+            ...motionProps,
+            children: [
+              children,
+              showCloseButton && /* @__PURE__ */ jsxs(
+                DialogPrimitive.Close,
+                {
+                  "data-slot": "dialog-close",
+                  className: styles.close(),
+                  children: [
+                    /* @__PURE__ */ jsx(CloseIcon, {}),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] }) : null });
+};
+function DrawerHeader({ className, ...props }) {
+  const { styles } = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: styles.header({ className }),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  const { styles } = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: styles.footer({ className }),
+      ...props
+    }
+  );
+}
+function DrawerBody({ className, ...props }) {
+  const { styles } = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-body",
+      className: styles.body({ className }),
+      ...props
+    }
+  );
+}
+function DrawerTitle({ className, ...props }) {
+  const { styles } = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "drawer-title",
+      className: styles.title({ className }),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  const { styles } = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "drawer-description",
+      className: styles.description({ className }),
+      ...props
+    }
+  );
+}
+function DrawerCloseTrigger({
+  className,
+  ...props
+}) {
+  const { styles } = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Close,
+    {
+      "data-slot": "drawer-close-trigger",
+      className: styles.closeTrigger({ className }),
+      ...props
+    }
+  );
+}
+
+export {
+  __export,
+  DrawerProvider,
+  useDrawerContext,
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerBody,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerCloseTrigger
+};

package/dist/drawer.d.mts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { drawer, DrawerVariantProps } from '@kopexa/theme';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type DrawerContextValue = {
+    styles: ReturnType<typeof drawer>;
+    open: boolean;
+    placement: "top" | "bottom" | "left" | "right";
+};
+declare const DrawerProvider: react.Provider<DrawerContextValue>;
+declare const useDrawerContext: () => DrawerContextValue;
+
+type DrawerRootProps = ComponentProps<typeof DialogPrimitive.Root> & DrawerVariantProps;
+declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
+type DrawerTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+declare function DrawerTrigger({ ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+type DrawerPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+declare function DrawerPortal({ ...props }: DrawerPortalProps): react_jsx_runtime.JSX.Element;
+type DrawerCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+declare function DrawerClose({ ...props }: DrawerCloseProps): react_jsx_runtime.JSX.Element;
+type DrawerOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): react_jsx_runtime.JSX.Element;
+type DrawerContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+};
+declare const DrawerContent: (props: DrawerContentProps) => react_jsx_runtime.JSX.Element;
+type DrawerHeaderProps = ComponentProps<"div">;
+declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): react_jsx_runtime.JSX.Element;
+type DrawerFooterProps = ComponentProps<"div">;
+declare function DrawerFooter({ className, ...props }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
+type DrawerBodyProps = ComponentProps<"div">;
+declare function DrawerBody({ className, ...props }: DrawerBodyProps): react_jsx_runtime.JSX.Element;
+type DrawerTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+declare function DrawerTitle({ className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
+type DrawerDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
+type DrawerCloseTriggerProps = ComponentProps<typeof DialogPrimitive.Close>;
+declare function DrawerCloseTrigger({ className, ...props }: DrawerCloseTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerCloseTrigger, type DrawerCloseTriggerProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, DrawerPortal, type DrawerPortalProps, DrawerProvider, DrawerRoot, type DrawerRootProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, useDrawerContext };

package/dist/drawer.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { drawer, DrawerVariantProps } from '@kopexa/theme';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type DrawerContextValue = {
+    styles: ReturnType<typeof drawer>;
+    open: boolean;
+    placement: "top" | "bottom" | "left" | "right";
+};
+declare const DrawerProvider: react.Provider<DrawerContextValue>;
+declare const useDrawerContext: () => DrawerContextValue;
+
+type DrawerRootProps = ComponentProps<typeof DialogPrimitive.Root> & DrawerVariantProps;
+declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
+type DrawerTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+declare function DrawerTrigger({ ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+type DrawerPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+declare function DrawerPortal({ ...props }: DrawerPortalProps): react_jsx_runtime.JSX.Element;
+type DrawerCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+declare function DrawerClose({ ...props }: DrawerCloseProps): react_jsx_runtime.JSX.Element;
+type DrawerOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): react_jsx_runtime.JSX.Element;
+type DrawerContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+};
+declare const DrawerContent: (props: DrawerContentProps) => react_jsx_runtime.JSX.Element;
+type DrawerHeaderProps = ComponentProps<"div">;
+declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): react_jsx_runtime.JSX.Element;
+type DrawerFooterProps = ComponentProps<"div">;
+declare function DrawerFooter({ className, ...props }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
+type DrawerBodyProps = ComponentProps<"div">;
+declare function DrawerBody({ className, ...props }: DrawerBodyProps): react_jsx_runtime.JSX.Element;
+type DrawerTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+declare function DrawerTitle({ className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
+type DrawerDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
+type DrawerCloseTriggerProps = ComponentProps<typeof DialogPrimitive.Close>;
+declare function DrawerCloseTrigger({ className, ...props }: DrawerCloseTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerCloseTrigger, type DrawerCloseTriggerProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, DrawerPortal, type DrawerPortalProps, DrawerProvider, DrawerRoot, type DrawerRootProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, useDrawerContext };