@avenue-ticketing/ui 0.2.0 → 0.4.0

package/dist/react/badge.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+/** Matches `button.tsx` primary / secondary — no separate outline variants. */
+declare const variantClass: {
+    readonly primary: "border border-transparent bg-primary text-background";
+    readonly secondary: "border border-primary/10 bg-transparent text-primary";
+};
+/** Same keys as `button.tsx` `roundedClass`. */
+declare const roundedClass: {
+    readonly full: "rounded-full";
+    readonly lg: "rounded-lg";
+    readonly md: "rounded-md";
+};
+declare const sizeClass: {
+    readonly md: "min-h-6 min-w-6 px-2 text-xs";
+    readonly lg: "min-h-7 min-w-7 px-2.5 text-sm";
+};
+type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /** @default secondary — same as Button default. */
+    variant?: keyof typeof variantClass;
+    /** @default md */
+    size?: keyof typeof sizeClass;
+    /**
+     * Corner radius — same options as `Button` (`full` | `lg` | `md`).
+     * @default full (pill)
+     */
+    rounded?: keyof typeof roundedClass;
+    /**
+     * When set, the label is the number capped at `max` with a "+" suffix
+     * (e.g. `max={99}` → `99+`). Ignores `children` for the visible text.
+     */
+    count?: number;
+    /** Upper bound before showing `{max}+`. Default `99`. */
+    max?: number;
+};
+declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /** @default secondary — same as Button default. */
+    variant?: keyof typeof variantClass;
+    /** @default md */
+    size?: keyof typeof sizeClass;
+    /**
+     * Corner radius — same options as `Button` (`full` | `lg` | `md`).
+     * @default full (pill)
+     */
+    rounded?: keyof typeof roundedClass;
+    /**
+     * When set, the label is the number capped at `max` with a "+" suffix
+     * (e.g. `max={99}` → `99+`). Ignores `children` for the visible text.
+     */
+    count?: number;
+    /** Upper bound before showing `{max}+`. Default `99`. */
+    max?: number;
+} & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeProps };

package/dist/react/badge.js

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var variantClass = {
+  primary: "border border-transparent bg-primary text-background",
+  secondary: "border border-primary/10 bg-transparent text-primary"
+};
+var roundedClass = {
+  full: "rounded-full",
+  lg: "rounded-lg",
+  md: "rounded-md"
+};
+var sizeClass = {
+  md: "min-h-6 min-w-6 px-2 text-xs",
+  lg: "min-h-7 min-w-7 px-2.5 text-sm"
+};
+function formatCount(count, max) {
+  if (count > max) return `${max}+`;
+  return String(count);
+}
+var Badge = React.forwardRef(
+  ({
+    className,
+    variant = "secondary",
+    size = "md",
+    rounded = "full",
+    count,
+    max = 99,
+    children,
+    "aria-label": ariaLabelProp,
+    ...props
+  }, ref) => {
+    const content = count !== void 0 ? formatCount(count, max) : children;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-slot": "badge",
+        "data-size": size,
+        "data-rounded": rounded,
+        "aria-label": ariaLabelProp,
+        className: cn(
+          "inline-flex shrink-0 items-center justify-center font-semibold leading-none tabular-nums",
+          roundedClass[rounded],
+          sizeClass[size],
+          variantClass[variant],
+          className
+        ),
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+export { Badge };
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/react/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/badge.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACEA,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EAAS,sDAAA;AAAA,EACT,SAAA,EAAW;AACb,CAAA;AAGA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,cAAA;AAAA,EACN,EAAA,EAAI,YAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,SAAA,GAAY;AAAA,EAChB,EAAA,EAAI,8BAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAqBA,SAAS,WAAA,CAAY,OAAe,GAAA,EAAqB;AACvD,EAAA,IAAI,KAAA,GAAQ,GAAA,EAAK,OAAO,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA;AAC9B,EAAA,OAAO,OAAO,KAAK,CAAA;AACrB;AAEA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA,GAAU,WAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,OAAA,GAAU,MAAA;AAAA,IACV,KAAA;AAAA,IACA,GAAA,GAAM,EAAA;AAAA,IACN,QAAA;AAAA,IACA,YAAA,EAAc,aAAA;AAAA,IACd,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,UAAU,KAAA,KAAU,MAAA,GAAY,WAAA,CAAY,KAAA,EAAO,GAAG,CAAA,GAAI,QAAA;AAEhE,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,OAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,cAAA,EAAc,OAAA;AAAA,QACd,YAAA,EAAY,aAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,0FAAA;AAAA,UACA,aAAa,OAAO,CAAA;AAAA,UACpB,UAAU,IAAI,CAAA;AAAA,UACd,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"badge.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** Matches `button.tsx` primary / secondary — no separate outline variants. */\nconst variantClass = {\n  primary: \"border border-transparent bg-primary text-background\",\n  secondary: \"border border-primary/10 bg-transparent text-primary\",\n} as const;\n\n/** Same keys as `button.tsx` `roundedClass`. */\nconst roundedClass = {\n  full: \"rounded-full\",\n  lg: \"rounded-lg\",\n  md: \"rounded-md\",\n} as const;\n\nconst sizeClass = {\n  md: \"min-h-6 min-w-6 px-2 text-xs\",\n  lg: \"min-h-7 min-w-7 px-2.5 text-sm\",\n} as const;\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n  /** @default secondary — same as Button default. */\n  variant?: keyof typeof variantClass;\n  /** @default md */\n  size?: keyof typeof sizeClass;\n  /**\n   * Corner radius — same options as `Button` (`full` | `lg` | `md`).\n   * @default full (pill)\n   */\n  rounded?: keyof typeof roundedClass;\n  /**\n   * When set, the label is the number capped at `max` with a \"+\" suffix\n   * (e.g. `max={99}` → `99+`). Ignores `children` for the visible text.\n   */\n  count?: number;\n  /** Upper bound before showing `{max}+`. Default `99`. */\n  max?: number;\n};\n\nfunction formatCount(count: number, max: number): string {\n  if (count > max) return `${max}+`;\n  return String(count);\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      variant = \"secondary\",\n      size = \"md\",\n      rounded = \"full\",\n      count,\n      max = 99,\n      children,\n      \"aria-label\": ariaLabelProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const content = count !== undefined ? formatCount(count, max) : children;\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        data-size={size}\n        data-rounded={rounded}\n        aria-label={ariaLabelProp}\n        className={cn(\n          \"inline-flex shrink-0 items-center justify-center font-semibold leading-none tabular-nums\",\n          roundedClass[rounded],\n          sizeClass[size],\n          variantClass[variant],\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n\nexport { Badge };\n"]}

package/dist/react/dialog.d.ts

@@ -14,14 +14,29 @@ declare const DialogClose: React__default.FC<{
     children: React__default.ReactNode;
     asChild?: boolean;
 }>;
+interface DialogCloseButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * Default dismiss control for {@link DialogContent}. Includes absolute top-right
+ * placement; pass `className` to adjust or replace positioning.
+ * When `onClick` is omitted, closes via the surrounding `Dialog` context (`setOpen(false)`).
+ */
+declare const DialogCloseButton: React__default.ForwardRefExoticComponent<DialogCloseButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 interface DialogContentProps extends React__default.HTMLAttributes<HTMLDivElement> {
     size?: "sm" | "md" | "lg" | "xl" | "full";
     duration?: number;
     closeOnOverlayClick?: boolean;
     showClose?: boolean;
+    /**
+     * When `true` (default), viewports ≤1024px use a bottom-anchored panel and
+     * slide-up motion (same breakpoint as {@link SheetContent}). Wider viewports
+     * keep the centered dialog. Set `false` to always use the centered dialog.
+     */
+    mobileBottomSheet?: boolean;
     /**
      * When `true`, panel uses translateY + opacity with fixed timing and separate
      * entry/exit curves (works with any `size`). Default `false` uses scale + fade.
+     * Ignored when `mobileBottomSheet` applies on a narrow viewport.
      */
     slideEntrance?: boolean;
     /** Override slide distance (px); default follows `size` via `SLIDE_ENTRANCE_OFFSET_PX`. */
@@ -37,4 +52,4 @@ declare const DialogFooter: React__default.FC<React__default.HTMLAttributes<HTML
 declare const DialogTitle: React__default.FC<React__default.HTMLAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React__default.FC<React__default.HTMLAttributes<HTMLParagraphElement>>;
 
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+export { Dialog, DialogClose, DialogCloseButton, type DialogCloseButtonProps, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/react/dialog.js

@@ -1,9 +1,9 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback, useState, useMemo, useEffect, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -11,6 +11,43 @@ function cn(...inputs) {
 var DIALOG_MOTION_MS = 200;
 var DIALOG_ENTRY_MOTION_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
 var DIALOG_EXIT_MOTION_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var DIALOG_MOBILE_BOTTOM_SHEET_MAX_PX = 1024;
+var DIALOG_Z_BASE = 50;
+var DIALOG_Z_STEP = 10;
+var dialogBodyScrollLockCount = 0;
+var dialogEscapeClosers = [];
+function dialogEscapeOnKeydown(e) {
+  if (e.key !== "Escape") return;
+  const top = dialogEscapeClosers[dialogEscapeClosers.length - 1];
+  if (!top) return;
+  e.preventDefault();
+  top();
+}
+function dialogPushEscapeCloser(closer) {
+  dialogEscapeClosers.push(closer);
+  if (dialogEscapeClosers.length === 1) {
+    window.addEventListener("keydown", dialogEscapeOnKeydown, true);
+  }
+}
+function dialogPopEscapeCloser(closer) {
+  const i = dialogEscapeClosers.lastIndexOf(closer);
+  if (i >= 0) dialogEscapeClosers.splice(i, 1);
+  if (dialogEscapeClosers.length === 0) {
+    window.removeEventListener("keydown", dialogEscapeOnKeydown, true);
+  }
+}
+function useDialogMobileBottomSheetViewport() {
+  const query = `(max-width: ${DIALOG_MOBILE_BOTTOM_SHEET_MAX_PX}px)`;
+  return useSyncExternalStore(
+    (onChange) => {
+      const mq = window.matchMedia(query);
+      mq.addEventListener("change", onChange);
+      return () => mq.removeEventListener("change", onChange);
+    },
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
 var SLIDE_ENTRANCE_OFFSET_PX = {
   sm: 16,
   md: 16,
@@ -18,6 +55,18 @@ var SLIDE_ENTRANCE_OFFSET_PX = {
   xl: 16,
   full: 120
 };
+var SIZE_CLASSES = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl"
+};
+var SIZE_CLASSES_LG_ONLY = {
+  sm: "lg:max-w-sm",
+  md: "lg:max-w-md",
+  lg: "lg:max-w-lg",
+  xl: "lg:max-w-xl"
+};
 function useDialogRenderLifecycle(open, panelCloseMs) {
   const [shouldRender, setShouldRender] = useState(open);
   const [isAnimating, setIsAnimating] = useState(false);
@@ -43,7 +92,9 @@ function useDialogRenderLifecycle(open, panelCloseMs) {
   }, [shouldRender, open]);
   return { shouldRender, isAnimating };
 }
-var DialogContext = React.createContext(void 0);
+var DialogContext = React.createContext(
+  void 0
+);
 function useDialog() {
   const context = React.useContext(DialogContext);
   if (!context) {
@@ -56,6 +107,9 @@ var Dialog = ({
   open: controlledOpen,
   onOpenChange
 }) => {
+  const parentCtx = React.useContext(DialogContext);
+  const parentDepth = parentCtx?.depth ?? 0;
+  const depth = parentDepth + 1;
   const [internalOpen, setInternalOpen] = useState(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
@@ -68,7 +122,11 @@ var Dialog = ({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { open, setOpen }, children });
+  const contextValue = useMemo(
+    () => ({ open, setOpen, depth }),
+    [open, setOpen, depth]
+  );
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children });
 };
 var DialogTrigger = ({ children, asChild }) => {
   const { setOpen } = useDialog();
@@ -98,6 +156,36 @@ var DialogClose = ({ children, asChild }) => {
   }
   return /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, children });
 };
+var DialogCloseButton = React.forwardRef(({ className, type = "button", onClick, ...props }, ref) => {
+  const { setOpen } = useDialog();
+  const handleClick = useCallback(
+    (e) => {
+      onClick?.(e);
+      if (onClick == null) {
+        setOpen(false);
+      }
+    },
+    [onClick, setOpen]
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "z-100 flex size-12 cursor-pointer items-center justify-center rounded-full transition-all hover:bg-secondary-background active:scale-[0.96]",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+});
+DialogCloseButton.displayName = "DialogCloseButton";
 var DialogContent = ({
   children,
   size = "md",
@@ -105,118 +193,171 @@ var DialogContent = ({
   duration = 200,
   closeOnOverlayClick = true,
   showClose = true,
+  mobileBottomSheet = true,
   slideEntrance = false,
   slideEntranceOffsetPx: slideEntranceOffsetPxProp,
-  ...props
+  ...rest
 }) => {
-  const { open, setOpen } = useDialog();
-  const closeDialog = useCallback(() => setOpen(false), [setOpen]);
-  const slideOffsetPx = slideEntranceOffsetPxProp ?? SLIDE_ENTRANCE_OFFSET_PX[size];
-  const panelCloseMs = slideEntrance ? DIALOG_MOTION_MS : duration;
+  const { open, setOpen, depth } = useDialog();
+  const isNarrowViewport = useDialogMobileBottomSheetViewport();
+  const useMobileBottomSheet = useMemo(
+    () => mobileBottomSheet !== false && isNarrowViewport,
+    [mobileBottomSheet, isNarrowViewport]
+  );
+  const useMobileBottomSheetChrome = useMemo(
+    () => mobileBottomSheet !== false && size !== "full",
+    [mobileBottomSheet, size]
+  );
+  const slideOffsetPx = useMemo(
+    () => slideEntranceOffsetPxProp ?? SLIDE_ENTRANCE_OFFSET_PX[size],
+    [slideEntranceOffsetPxProp, size]
+  );
+  const useBottomSheetMotion = useMobileBottomSheet;
+  const useDesktopSlideEntrance = slideEntrance && !useBottomSheetMotion;
+  const panelCloseMs = useMemo(
+    () => useBottomSheetMotion ? DIALOG_MOTION_MS : slideEntrance ? DIALOG_MOTION_MS : duration,
+    [useBottomSheetMotion, slideEntrance, duration]
+  );
   const { shouldRender, isAnimating } = useDialogRenderLifecycle(
     open,
     panelCloseMs
   );
-  const slideMotionEasing = open ? DIALOG_ENTRY_MOTION_EASING : DIALOG_EXIT_MOTION_EASING;
+  const slideMotionEasing = useMemo(
+    () => open ? DIALOG_ENTRY_MOTION_EASING : DIALOG_EXIT_MOTION_EASING,
+    [open]
+  );
+  const portalZIndex = useMemo(
+    () => DIALOG_Z_BASE + (depth - 1) * DIALOG_Z_STEP,
+    [depth]
+  );
+  const handleOverlayClick = useCallback(() => {
+    if (closeOnOverlayClick) setOpen(false);
+  }, [closeOnOverlayClick, setOpen]);
   useEffect(() => {
-    const handleEsc = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    if (open) {
-      if (typeof document !== "undefined") {
-        window.addEventListener("keydown", handleEsc);
-        document.body.style.overflow = "hidden";
-      }
+    if (!open || typeof document === "undefined") return;
+    const closer = () => setOpen(false);
+    dialogPushEscapeCloser(closer);
+    dialogBodyScrollLockCount += 1;
+    if (dialogBodyScrollLockCount === 1) {
+      document.body.style.overflow = "hidden";
     }
     return () => {
-      if (typeof document !== "undefined") {
-        window.removeEventListener("keydown", handleEsc);
+      dialogPopEscapeCloser(closer);
+      dialogBodyScrollLockCount -= 1;
+      if (dialogBodyScrollLockCount <= 0) {
+        dialogBodyScrollLockCount = 0;
         document.body.style.overflow = "";
       }
     };
   }, [open, setOpen]);
+  const rootClassName = useMemo(
+    () => cn(
+      "fixed inset-0 flex",
+      size === "full" ? "h-dvh w-full flex-col p-0" : mobileBottomSheet !== false ? "max-lg:items-end max-lg:justify-center max-lg:p-0 lg:items-center lg:justify-center lg:p-4" : "items-center justify-center p-4"
+    ),
+    [size, mobileBottomSheet]
+  );
+  const rootStyle = useMemo(
+    () => ({ zIndex: portalZIndex }),
+    [portalZIndex]
+  );
+  const overlayClassName = useMemo(
+    () => cn(
+      "fixed inset-0 bg-black/40 dark:bg-black/60",
+      !useBottomSheetMotion && !slideEntrance && "transition-opacity ease-in-out",
+      isAnimating ? "opacity-100" : "opacity-0"
+    ),
+    [useBottomSheetMotion, slideEntrance, isAnimating]
+  );
+  const overlayStyle = useMemo(() => {
+    const style = {
+      transitionDuration: `${panelCloseMs}ms`
+    };
+    if (useBottomSheetMotion || slideEntrance) {
+      style.transitionProperty = "opacity";
+      style.transitionTimingFunction = slideMotionEasing;
+    }
+    return style;
+  }, [panelCloseMs, useBottomSheetMotion, slideEntrance, slideMotionEasing]);
+  const panelClassName = useMemo(() => {
+    const sizeKey = size === "full" ? null : size;
+    return cn(
+      "bg-background relative z-10 w-full overflow-hidden shadow-2xl",
+      size === "full" ? "flex min-h-0 flex-1 flex-col max-w-none rounded-none" : cn(
+        "border-primary/10 border",
+        useMobileBottomSheetChrome ? "max-lg:max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] max-lg:rounded-t-2xl max-lg:rounded-b-none max-lg:border-x-0 max-lg:border-b-0 max-lg:border-t max-lg:border-primary/10 lg:rounded-2xl" : "rounded-2xl",
+        sizeKey && (useMobileBottomSheetChrome ? SIZE_CLASSES_LG_ONLY[sizeKey] : SIZE_CLASSES[sizeKey])
+      ),
+      !useBottomSheetMotion && !useDesktopSlideEntrance && cn(
+        "transition-all ease-in-out",
+        isAnimating ? "scale-100 opacity-100" : "scale-95 opacity-0"
+      ),
+      className
+    );
+  }, [
+    size,
+    useMobileBottomSheetChrome,
+    useBottomSheetMotion,
+    useDesktopSlideEntrance,
+    isAnimating,
+    className
+  ]);
+  const panelStyle = useMemo(() => {
+    const base = { ...rest.style };
+    if (useBottomSheetMotion) {
+      return {
+        ...base,
+        transform: isAnimating ? "translateY(0)" : "translateY(100%)",
+        opacity: isAnimating ? 1 : 0,
+        transitionProperty: "transform, opacity",
+        transitionDuration: `${DIALOG_MOTION_MS}ms`,
+        transitionTimingFunction: slideMotionEasing
+      };
+    }
+    if (useDesktopSlideEntrance) {
+      return {
+        ...base,
+        transform: isAnimating ? "translateY(0)" : `translateY(${slideOffsetPx}px)`,
+        opacity: isAnimating ? 1 : 0,
+        transitionProperty: "transform, opacity",
+        transitionDuration: `${DIALOG_MOTION_MS}ms`,
+        transitionTimingFunction: slideMotionEasing
+      };
+    }
+    return {
+      ...base,
+      transitionDuration: `${duration}ms`
+    };
+  }, [
+    rest.style,
+    useBottomSheetMotion,
+    useDesktopSlideEntrance,
+    isAnimating,
+    slideOffsetPx,
+    slideMotionEasing,
+    duration
+  ]);
   if (!shouldRender) return null;
-  const sizeClasses = {
-    sm: "sm:max-w-sm",
-    md: "sm:max-w-md",
-    lg: "sm:max-w-lg",
-    xl: "sm:max-w-xl"
-  };
   return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "fixed inset-0 z-50 flex",
-          size === "full" ? "h-dvh w-full flex-col p-0" : "items-center justify-center p-4"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "fixed inset-0 bg-black/40 dark:bg-black/60",
-                !slideEntrance && "transition-opacity ease-in-out",
-                isAnimating ? "opacity-100" : "opacity-0"
-              ),
-              style: {
-                transitionDuration: `${panelCloseMs}ms`,
-                ...slideEntrance ? {
-                  transitionProperty: "opacity",
-                  transitionTimingFunction: slideMotionEasing
-                } : {}
-              },
-              onClick: () => closeOnOverlayClick && setOpen(false)
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ...props,
-              className: cn(
-                "bg-background relative z-50 w-full overflow-hidden shadow-2xl",
-                size === "full" ? "flex min-h-0 flex-1 flex-col max-w-none rounded-none" : cn("border-primary/10 rounded-2xl border", sizeClasses[size]),
-                !slideEntrance && cn(
-                  "transition-all ease-in-out",
-                  isAnimating ? "scale-100 opacity-100" : "scale-95 opacity-0"
-                ),
-                className
-              ),
-              style: {
-                ...props.style,
-                ...slideEntrance ? {
-                  transform: isAnimating ? "translateY(0)" : `translateY(${slideOffsetPx}px)`,
-                  opacity: isAnimating ? 1 : 0,
-                  transitionProperty: "transform, opacity",
-                  transitionDuration: `${DIALOG_MOTION_MS}ms`,
-                  transitionTimingFunction: slideMotionEasing
-                } : {
-                  transitionDuration: `${duration}ms`
-                }
-              },
-              children: [
-                children,
-                showClose && /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: closeDialog,
-                    className: cn(
-                      // Above in-panel sticky layers (e.g. ScrollHeaderSticky z-40)
-                      "absolute top-4 right-4 z-100 flex size-12 cursor-pointer items-center justify-center rounded-full bg-background transition-all hover:bg-secondary-background active:scale-[0.96] md:top-4 md:right-4"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: rootClassName, style: rootStyle, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: overlayClassName,
+          style: overlayStyle,
+          onClick: handleOverlayClick
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { ...rest, className: panelClassName, style: panelStyle, children: [
+        children,
+        showClose && /* @__PURE__ */ jsx(
+          DialogCloseButton,
+          {
+            className: cn("absolute top-4 right-4 md:top-4 md:right-4")
+          }
+        )
+      ] })
+    ] }),
     document.body
   );
 };
@@ -262,6 +403,6 @@ var DialogDescription = ({ className, ...props }) => {
   return /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-sm", className), ...props });
 };
 
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+export { Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
 //# sourceMappingURL=dialog.js.map
 //# sourceMappingURL=dialog.js.map