@work-rjkashyap/unified-ui 0.3.4 → 0.3.5

package/dist/components/date-picker.mjs

@@ -0,0 +1,258 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { scaleIn } from "../motion/index";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { forwardRef, useCallback, useState } from "react";
+import { Calendar } from "./calendar";
+function CalendarIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })
+      ]
+    }
+  );
+}
+function XIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function formatDate(date, locale = "en-US") {
+  return date.toLocaleDateString(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function formatRange(range, locale = "en-US") {
+  const from = formatDate(range.from, locale);
+  const to = range.to ? formatDate(range.to, locale) : "...";
+  return `${from} \u2014 ${to}`;
+}
+const sizeClasses = {
+  sm: "h-8 px-3 text-xs gap-2 rounded-md",
+  md: "h-9 px-3 text-sm gap-2 rounded-md",
+  lg: "h-10 px-4 text-sm gap-2 rounded-md"
+};
+const iconSizeClasses = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-4"
+};
+const DatePicker = forwardRef(
+  function DatePicker2({
+    mode = "single",
+    value,
+    valueRange,
+    onSelect,
+    onSelectRange,
+    placeholder = "Pick a date",
+    size = "md",
+    disabled = false,
+    clearable = true,
+    locale = "en-US",
+    disabledDate,
+    minDate,
+    maxDate,
+    defaultMonth,
+    align = "start",
+    className,
+    contentClassName
+  }, ref) {
+    const shouldReduce = useReducedMotion();
+    const [open, setOpen] = useState(false);
+    const [internalDate, setInternalDate] = useState(null);
+    const [internalRange, setInternalRange] = useState(null);
+    const selectedDate = value !== void 0 ? value : internalDate;
+    const selectedRange = valueRange !== void 0 ? valueRange : internalRange;
+    const hasValue = mode === "single" ? selectedDate !== null : selectedRange !== null;
+    const displayValue = (() => {
+      if (mode === "single") {
+        return selectedDate ? formatDate(selectedDate, locale) : null;
+      }
+      return selectedRange ? formatRange(selectedRange, locale) : null;
+    })();
+    const handleSelect = useCallback(
+      (date) => {
+        if (value === void 0) setInternalDate(date);
+        onSelect?.(date);
+        if (mode === "single") setOpen(false);
+      },
+      [mode, value, onSelect]
+    );
+    const handleSelectRange = useCallback(
+      (range) => {
+        if (valueRange === void 0) setInternalRange(range);
+        onSelectRange?.(range);
+        if (range.to) setOpen(false);
+      },
+      [valueRange, onSelectRange]
+    );
+    const handleClear = useCallback(
+      (e) => {
+        e.stopPropagation();
+        if (value === void 0) setInternalDate(null);
+        if (valueRange === void 0) setInternalRange(null);
+        onSelect?.(null);
+        onSelectRange?.(null);
+      },
+      [value, valueRange, onSelect, onSelectRange]
+    );
+    return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          disabled,
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          className: cn(
+            // Layout
+            "inline-flex items-center justify-between",
+            // Base styles
+            "border border-input bg-background",
+            "text-left",
+            // Transitions
+            "transition-colors duration-fast",
+            // Disabled
+            "disabled:pointer-events-none disabled:opacity-50",
+            // Focus
+            focusRingClasses,
+            // Size
+            sizeClasses[size],
+            // Open state
+            open && "border-ring ring-2 ring-ring/20",
+            className
+          ),
+          "data-ds": "",
+          "data-ds-component": "date-picker",
+          "data-ds-size": size,
+          "data-ds-mode": mode,
+          "data-state": open ? "open" : "closed",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx(
+                CalendarIcon,
+                {
+                  className: cn(
+                    "shrink-0 text-muted-foreground",
+                    iconSizeClasses[size]
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "truncate",
+                    !displayValue && "text-muted-foreground"
+                  ),
+                  children: displayValue ?? placeholder
+                }
+              )
+            ] }),
+            clearable && hasValue && /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                onClick: handleClear,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ")
+                    handleClear(e);
+                },
+                className: cn(
+                  "shrink-0 ml-1",
+                  "inline-flex items-center justify-center rounded-sm",
+                  "text-muted-foreground hover:text-foreground",
+                  "transition-colors duration-fast",
+                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                ),
+                "aria-label": "Clear date",
+                children: /* @__PURE__ */ jsx(XIcon, { className: iconSizeClasses[size] })
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+        PopoverPrimitive.Content,
+        {
+          asChild: true,
+          align,
+          sideOffset: 6,
+          forceMount: true,
+          onInteractOutside: () => setOpen(false),
+          onEscapeKeyDown: () => setOpen(false),
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: cn(
+                "z-popover rounded-lg border border-border bg-background shadow-lg",
+                "outline-none",
+                contentClassName
+              ),
+              variants: scaleIn.variants,
+              initial: shouldReduce ? { opacity: 0 } : "initial",
+              animate: "animate",
+              exit: shouldReduce ? { opacity: 0 } : "exit",
+              transition: scaleIn.transition,
+              "data-ds-animated": "",
+              children: /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode,
+                  selected: mode === "single" ? selectedDate ?? void 0 : void 0,
+                  selectedRange: mode === "range" ? selectedRange ?? void 0 : void 0,
+                  onSelect: mode === "single" ? handleSelect : void 0,
+                  onSelectRange: mode === "range" ? handleSelectRange : void 0,
+                  defaultMonth: defaultMonth ?? (mode === "single" ? selectedDate ?? void 0 : selectedRange?.from ?? void 0),
+                  disabledDate,
+                  minDate,
+                  maxDate
+                }
+              )
+            }
+          )
+        }
+      ) }) })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};

package/dist/components/dialog.cjs

@@ -0,0 +1,319 @@
+"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 dialog_exports = {};
+__export(dialog_exports, {
+  Dialog: () => Dialog,
+  DialogBody: () => DialogBody,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
+  dialogContentVariants: () => dialogContentVariants
+});
+module.exports = __toCommonJS(dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index");
+var import_cn = require("../utils/cn");
+var import_focus_ring = require("../utils/focus-ring");
+var import_class_variance_authority = require("class-variance-authority");
+var import_framer_motion = require("framer-motion");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const dialogContentVariants = (0, import_class_variance_authority.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 = (0, import_react.createContext)({ open: false });
+function useDialogContext() {
+  return (0, import_react.useContext)(DialogContext);
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function Dialog({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react.useState)(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContext.Provider, { value: { open }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Dialog.Root,
+    {
+      open,
+      onOpenChange: handleOpenChange,
+      ...rest,
+      children
+    }
+  ) });
+}
+Dialog.displayName = "Dialog";
+const DialogTrigger = (0, import_react.forwardRef)(function DialogTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Dialog.Trigger,
+    {
+      ref,
+      className,
+      "data-ds": "",
+      "data-ds-component": "dialog-trigger",
+      ...rest
+    }
+  );
+});
+DialogTrigger.displayName = "DialogTrigger";
+const DialogOverlay = (0, import_react.forwardRef)(function DialogOverlay2({ className, ...rest }, ref) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Dialog.Overlay, { ref, forceMount: true, asChild: true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      className: (0, import_cn.cn)(
+        "fixed inset-0",
+        "z-[var(--z-overlay)]",
+        "bg-black/50",
+        className
+      ),
+      variants: shouldReduce ? void 0 : import_motion.overlayBackdrop.variants,
+      initial: shouldReduce ? { opacity: 0 } : "initial",
+      animate: shouldReduce ? { opacity: 1 } : "animate",
+      exit: shouldReduce ? { opacity: 0 } : "exit",
+      transition: shouldReduce ? { duration: 0.15 } : import_motion.overlayBackdrop.transition,
+      "data-ds-animated": ""
+    }
+  ) });
+});
+DialogOverlay.displayName = "DialogOverlay";
+const DialogContent = (0, import_react.forwardRef)(function DialogContent2({
+  size = "md",
+  showClose = true,
+  overlayClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  const { open } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Dialog.Portal, { forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Dialog.Content, { ref, forceMount: true, asChild: true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_framer_motion.motion.div,
+      {
+        className: (0, import_cn.cn)(
+          "not-prose",
+          dialogContentVariants({ size }),
+          className
+        ),
+        variants: shouldReduce ? void 0 : import_motion.modalContent.variants,
+        initial: shouldReduce ? { opacity: 0 } : "initial",
+        animate: shouldReduce ? { opacity: 1 } : "animate",
+        exit: shouldReduce ? { opacity: 0 } : "exit",
+        transition: shouldReduce ? { duration: 0.2 } : import_motion.modalContent.transition,
+        "data-ds": "",
+        "data-ds-component": "dialog",
+        "data-ds-size": size,
+        "data-ds-animated": "",
+        children: [
+          children,
+          showClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_radix_ui.Dialog.Close,
+            {
+              className: (0, import_cn.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",
+                import_focus_ring.focusRingClasses
+              ),
+              "aria-label": "Close",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) }) });
+});
+DialogContent.displayName = "DialogContent";
+function DialogHeader({
+  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-6", className),
+      "data-ds": "",
+      "data-ds-component": "dialog-header",
+      ...rest,
+      children
+    }
+  );
+}
+DialogHeader.displayName = "DialogHeader";
+function DialogBody({ 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": "dialog-body",
+      ...rest,
+      children
+    }
+  );
+}
+DialogBody.displayName = "DialogBody";
+function DialogFooter({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_cn.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 = (0, import_react.forwardRef)(function DialogTitle2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Dialog.Title,
+    {
+      ref,
+      className: (0, import_cn.cn)(
+        "text-lg font-semibold leading-6 text-foreground",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "dialog-title",
+      ...rest,
+      children
+    }
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+const DialogDescription = (0, import_react.forwardRef)(function DialogDescription2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Dialog.Description,
+    {
+      ref,
+      className: (0, import_cn.cn)("text-sm leading-5 text-muted-foreground", className),
+      "data-ds": "",
+      "data-ds-component": "dialog-description",
+      ...rest,
+      children
+    }
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+const DialogClose = (0, import_react.forwardRef)(function DialogClose2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Dialog.Close,
+    {
+      ref,
+      className,
+      "data-ds": "",
+      "data-ds-component": "dialog-close",
+      ...rest
+    }
+  );
+});
+DialogClose.displayName = "DialogClose";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  dialogContentVariants
+});

package/dist/components/dialog.d.cts

@@ -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 };