@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/dialog.d.ts

@@ -0,0 +1,74 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Dialog as Dialog$1 } from 'radix-ui';
+
+/**
+ * CVA variants for DialogContent sizing.
+ * Animation is handled by Framer Motion (overlayBackdrop + modalContent presets),
+ * so no CSS animation classes are included here.
+ */
+declare const dialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DialogSize = "sm" | "md" | "lg" | "full";
+interface DialogProps extends Dialog$1.DialogProps {
+    children: ReactNode;
+}
+interface DialogTriggerProps extends ComponentPropsWithoutRef<typeof Dialog$1.Trigger> {
+    className?: string;
+}
+interface DialogContentProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Content>, "asChild"> {
+    size?: DialogSize;
+    showClose?: boolean;
+    overlayClassName?: string;
+    className?: string;
+    children: ReactNode;
+}
+interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DialogTitleProps extends ComponentPropsWithoutRef<typeof Dialog$1.Title> {
+    className?: string;
+    children: ReactNode;
+}
+interface DialogDescriptionProps extends ComponentPropsWithoutRef<typeof Dialog$1.Description> {
+    className?: string;
+    children: ReactNode;
+}
+interface DialogCloseProps extends ComponentPropsWithoutRef<typeof Dialog$1.Close> {
+    className?: string;
+}
+declare function Dialog({ children, open: controlledOpen, onOpenChange, defaultOpen, ...rest }: DialogProps): react_jsx_runtime.JSX.Element;
+declare namespace Dialog {
+    var displayName: string;
+}
+declare const DialogTrigger: react.ForwardRefExoticComponent<DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({ className, children, ...rest }: DialogHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace DialogHeader {
+    var displayName: string;
+}
+declare function DialogBody({ className, children, ...rest }: DialogBodyProps): react_jsx_runtime.JSX.Element;
+declare namespace DialogBody {
+    var displayName: string;
+}
+declare function DialogFooter({ className, children, ...rest }: DialogFooterProps): react_jsx_runtime.JSX.Element;
+declare namespace DialogFooter {
+    var displayName: string;
+}
+declare const DialogTitle: react.ForwardRefExoticComponent<DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const DialogClose: react.ForwardRefExoticComponent<DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, dialogContentVariants };

package/dist/components/dialog.mjs

@@ -0,0 +1,292 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { modalContent, overlayBackdrop } from "../motion/index.mjs";
+import { cn } from "../utils/cn.mjs";
+import { focusRingClasses } from "../utils/focus-ring.mjs";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useState
+} from "react";
+const dialogContentVariants = cva(
+  [
+    // Positioning
+    "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+    // Z-index
+    "z-[var(--z-modal)]",
+    // Layout
+    "flex flex-col",
+    "w-full",
+    // Visual
+    "rounded-lg",
+    "border border-border",
+    "bg-background",
+    "shadow-xl",
+    // Overflow
+    "max-h-[85vh]",
+    // Focus
+    "outline-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-[480px]",
+        md: "max-w-[560px]",
+        lg: "max-w-[720px]",
+        full: "max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const DialogContext = createContext({ open: false });
+function useDialogContext() {
+  return useContext(DialogContext);
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function Dialog({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { open }, children: /* @__PURE__ */ jsx(
+    DialogPrimitive.Root,
+    {
+      open,
+      onOpenChange: handleOpenChange,
+      ...rest,
+      children
+    }
+  ) });
+}
+Dialog.displayName = "Dialog";
+const DialogTrigger = forwardRef(function DialogTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Trigger,
+    {
+      ref,
+      className,
+      "data-ds": "",
+      "data-ds-component": "dialog-trigger",
+      ...rest
+    }
+  );
+});
+DialogTrigger.displayName = "DialogTrigger";
+const DialogOverlay = forwardRef(function DialogOverlay2({ className, ...rest }, ref) {
+  const shouldReduce = useReducedMotion();
+  return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { ref, forceMount: true, asChild: true, ...rest, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: cn(
+        "fixed inset-0",
+        "z-[var(--z-overlay)]",
+        "bg-black/50",
+        className
+      ),
+      variants: shouldReduce ? void 0 : overlayBackdrop.variants,
+      initial: shouldReduce ? { opacity: 0 } : "initial",
+      animate: shouldReduce ? { opacity: 1 } : "animate",
+      exit: shouldReduce ? { opacity: 0 } : "exit",
+      transition: shouldReduce ? { duration: 0.15 } : overlayBackdrop.transition,
+      "data-ds-animated": ""
+    }
+  ) });
+});
+DialogOverlay.displayName = "DialogOverlay";
+const DialogContent = forwardRef(function DialogContent2({
+  size = "md",
+  showClose = true,
+  overlayClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const shouldReduce = useReducedMotion();
+  const { open } = useDialogContext();
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ jsx(DialogPrimitive.Content, { ref, forceMount: true, asChild: true, ...rest, children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: cn(
+          "not-prose",
+          dialogContentVariants({ size }),
+          className
+        ),
+        variants: shouldReduce ? void 0 : modalContent.variants,
+        initial: shouldReduce ? { opacity: 0 } : "initial",
+        animate: shouldReduce ? { opacity: 1 } : "animate",
+        exit: shouldReduce ? { opacity: 0 } : "exit",
+        transition: shouldReduce ? { duration: 0.2 } : modalContent.transition,
+        "data-ds": "",
+        "data-ds-component": "dialog",
+        "data-ds-size": size,
+        "data-ds-animated": "",
+        children: [
+          children,
+          showClose && /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              className: cn(
+                "absolute right-4 top-4",
+                "inline-flex items-center justify-center",
+                "rounded-sm p-1",
+                "text-muted-foreground hover:text-foreground",
+                "transition-colors duration-fast",
+                focusRingClasses
+              ),
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) }) });
+});
+DialogContent.displayName = "DialogContent";
+function DialogHeader({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col gap-1.5 px-6 pt-6", className),
+      "data-ds": "",
+      "data-ds-component": "dialog-header",
+      ...rest,
+      children
+    }
+  );
+}
+DialogHeader.displayName = "DialogHeader";
+function DialogBody({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex-1 overflow-y-auto px-6 py-4", className),
+      "data-ds": "",
+      "data-ds-component": "dialog-body",
+      ...rest,
+      children
+    }
+  );
+}
+DialogBody.displayName = "DialogBody";
+function DialogFooter({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-end gap-2 px-6 pb-6 pt-2",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "dialog-footer",
+      ...rest,
+      children
+    }
+  );
+}
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = forwardRef(function DialogTitle2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      ref,
+      className: cn(
+        "text-lg font-semibold leading-6 text-foreground",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "dialog-title",
+      ...rest,
+      children
+    }
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+const DialogDescription = forwardRef(function DialogDescription2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ref,
+      className: cn("text-sm leading-5 text-muted-foreground", className),
+      "data-ds": "",
+      "data-ds-component": "dialog-description",
+      ...rest,
+      children
+    }
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+const DialogClose = forwardRef(function DialogClose2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Close,
+    {
+      ref,
+      className,
+      "data-ds": "",
+      "data-ds-component": "dialog-close",
+      ...rest
+    }
+  );
+});
+DialogClose.displayName = "DialogClose";
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  dialogContentVariants
+};

package/dist/components/drawer.cjs

@@ -0,0 +1,262 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var drawer_exports = {};
+__export(drawer_exports, {
+  Drawer: () => Drawer,
+  DrawerBody: () => DrawerBody,
+  DrawerClose: () => DrawerClose,
+  DrawerContent: () => DrawerContent,
+  DrawerDescription: () => DrawerDescription,
+  DrawerFooter: () => DrawerFooter,
+  DrawerHandle: () => DrawerHandle,
+  DrawerHeader: () => DrawerHeader,
+  DrawerTitle: () => DrawerTitle,
+  DrawerTrigger: () => DrawerTrigger,
+  drawerContentVariants: () => drawerContentVariants
+});
+module.exports = __toCommonJS(drawer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("react");
+var import_vaul = require("vaul");
+const drawerContentVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Positioning — vaul handles the transform; we set the shell styles
+    "fixed inset-x-0 bottom-0",
+    // Z-index
+    "z-[var(--z-modal)]",
+    // Layout
+    "flex flex-col",
+    // Visual
+    "rounded-t-lg",
+    "border border-b-0 border-border",
+    "bg-background",
+    "shadow-xl",
+    // Focus
+    "outline-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-h-[30vh]",
+        md: "max-h-[50vh]",
+        lg: "max-h-[75vh]",
+        full: "max-h-[calc(100vh-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Drawer({
+  shouldScaleBackground = true,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_vaul.Drawer.Root,
+    {
+      shouldScaleBackground,
+      ...rest,
+      children
+    }
+  );
+}
+Drawer.displayName = "Drawer";
+const DrawerTrigger = (0, import_react.forwardRef)(function DrawerTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_vaul.Drawer.Trigger,
+    {
+      ref,
+      className,
+      "data-ds": "",
+      "data-ds-component": "drawer-trigger",
+      ...rest
+    }
+  );
+});
+DrawerTrigger.displayName = "DrawerTrigger";
+const DrawerOverlay = (0, import_react.forwardRef)(function DrawerOverlay2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_vaul.Drawer.Overlay,
+    {
+      ref,
+      className: (0, import_cn.cn)(
+        "fixed inset-0",
+        "z-[var(--z-overlay)]",
+        "bg-black/50",
+        className
+      ),
+      ...rest
+    }
+  );
+});
+DrawerOverlay.displayName = "DrawerOverlay";
+function DrawerHandle({ className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_cn.cn)("mx-auto mt-4 mb-2 flex justify-center", className),
+      "data-ds": "",
+      "data-ds-component": "drawer-handle",
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1.5 w-12 rounded-full bg-muted-foreground/25" })
+    }
+  );
+}
+DrawerHandle.displayName = "DrawerHandle";
+const DrawerContent = (0, import_react.forwardRef)(function DrawerContent2({
+  size = "md",
+  showHandle = true,
+  overlayClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_vaul.Drawer.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_vaul.Drawer.Content,
+      {
+        ref,
+        className: (0, import_cn.cn)("not-prose", drawerContentVariants({ size }), className),
+        "data-ds": "",
+        "data-ds-component": "drawer",
+        "data-ds-size": size,
+        ...rest,
+        children: [
+          showHandle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerHandle, {}),
+          children
+        ]
+      }
+    )
+  ] });
+});
+DrawerContent.displayName = "DrawerContent";
+function DrawerHeader({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_cn.cn)("flex flex-col gap-1.5 px-6 pt-4 pb-2", className),
+      "data-ds": "",
+      "data-ds-component": "drawer-header",
+      ...rest,
+      children
+    }
+  );
+}
+DrawerHeader.displayName = "DrawerHeader";
+function DrawerBody({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_cn.cn)("flex-1 overflow-y-auto px-6 py-4", className),
+      "data-ds": "",
+      "data-ds-component": "drawer-body",
+      ...rest,
+      children
+    }
+  );
+}
+DrawerBody.displayName = "DrawerBody";
+function DrawerFooter({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_cn.cn)(
+        "flex flex-col-reverse gap-2 px-6 pb-6 pt-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "drawer-footer",
+      ...rest,
+      children
+    }
+  );
+}
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = (0, import_react.forwardRef)(function DrawerTitle2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_vaul.Drawer.Title,
+    {
+      ref,
+      className: (0, import_cn.cn)(
+        "text-lg font-semibold leading-6 text-foreground",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "drawer-title",
+      ...rest,
+      children
+    }
+  );
+});
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = (0, import_react.forwardRef)(function DrawerDescription2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_vaul.Drawer.Description,
+    {
+      ref,
+      className: (0, import_cn.cn)("text-sm leading-5 text-muted-foreground", className),
+      "data-ds": "",
+      "data-ds-component": "drawer-description",
+      ...rest,
+      children
+    }
+  );
+});
+DrawerDescription.displayName = "DrawerDescription";
+const DrawerClose = (0, import_react.forwardRef)(function DrawerClose2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_vaul.Drawer.Close,
+    {
+      ref,
+      className,
+      "data-ds": "",
+      "data-ds-component": "drawer-close",
+      ...rest
+    }
+  );
+});
+DrawerClose.displayName = "DrawerClose";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHandle,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  drawerContentVariants
+});