@avenue-ticketing/ui 0.1.0 → 0.3.0

package/dist/react/scroll-header.js

@@ -0,0 +1,169 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { createContext, useRef, useContext, useEffect, Children, isValidElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var DATA_ATTR = "data-scrolled";
+var ScrollHeaderContext = createContext({
+  revealAt: "center",
+  slideIn: true,
+  onRevealChange: void 0
+});
+function isScrollHeaderStickyEl(child) {
+  return child.type.displayName === "ScrollHeaderSticky";
+}
+function isScrollHeaderTopEl(child) {
+  return child.type.displayName === "ScrollHeaderTop";
+}
+function reorderScrollHeaderChildren(children) {
+  const sticky = [];
+  const top = [];
+  const rest = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      if (child != null && child !== false) rest.push(child);
+      return;
+    }
+    if (isScrollHeaderStickyEl(child)) sticky.push(child);
+    else if (isScrollHeaderTopEl(child)) top.push(child);
+    else rest.push(child);
+  });
+  return [...sticky, ...top, ...rest];
+}
+var ScrollHeader = ({
+  revealAt,
+  slideIn = true,
+  onRevealChange,
+  children,
+  className,
+  ...props
+}) => {
+  const ref = useRef(null);
+  const resolvedRevealAt = revealAt ?? (slideIn ? "center" : "start");
+  return /* @__PURE__ */ jsx(
+    ScrollHeaderContext.Provider,
+    {
+      value: {
+        revealAt: resolvedRevealAt,
+        slideIn,
+        onRevealChange
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-scrolled": "false",
+          className: cn(
+            "scroll-header bg-background flex h-full flex-col overflow-y-auto",
+            className
+          ),
+          ...props,
+          children: reorderScrollHeaderChildren(children)
+        }
+      )
+    }
+  );
+};
+var sentinelClass = "pointer-events-none h-px w-full shrink-0";
+var ScrollHeaderTop = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { revealAt, onRevealChange } = useContext(ScrollHeaderContext);
+  const sentinelRef = useRef(null);
+  const onRevealChangeRef = useRef(onRevealChange);
+  onRevealChangeRef.current = onRevealChange;
+  const lastRevealedRef = useRef(void 0);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const container = sentinel.closest("[data-scrolled]");
+    if (!container) return;
+    lastRevealedRef.current = void 0;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry) return;
+        const revealed = !entry.isIntersecting;
+        container.setAttribute(DATA_ATTR, revealed ? "true" : "false");
+        if (lastRevealedRef.current !== revealed) {
+          lastRevealedRef.current = revealed;
+          onRevealChangeRef.current?.(revealed);
+        }
+      },
+      { root: container, threshold: 0 }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [revealAt]);
+  if (revealAt === "end") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", className), ...props, children: [
+      children,
+      /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: sentinelClass, "aria-hidden": true })
+    ] });
+  }
+  if (revealAt === "center") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: sentinelRef,
+          className: cn(
+            sentinelClass,
+            "absolute left-0 right-0 top-1/2 z-0 -translate-y-1/2"
+          ),
+          "aria-hidden": true
+        }
+      ),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: sentinelClass, "aria-hidden": true }),
+    children
+  ] });
+};
+ScrollHeaderTop.displayName = "ScrollHeaderTop";
+var stickyChromeBgClass = "bg-background supports-backdrop-filter:bg-background";
+var stickyChromeBorderClass = "border-primary/10 border-b";
+var stickyChromeClass = cn(stickyChromeBgClass, stickyChromeBorderClass);
+var revealEase = "duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:duration-0 motion-reduce:transition-none";
+var ScrollHeaderSticky = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { slideIn } = useContext(ScrollHeaderContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sticky top-0 z-40",
+        slideIn ? "h-0 overflow-visible" : "shrink-0"
+      ),
+      children: slideIn ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            stickyChromeClass,
+            "transition-[opacity, transform]",
+            revealEase,
+            '[.scroll-header:not([data-scrolled="true"])_&]:pointer-events-none [.scroll-header:not([data-scrolled="true"])_&]:-translate-y-1 [.scroll-header:not([data-scrolled="true"])_&]:opacity-0',
+            '[.scroll-header[data-scrolled="true"]_&]:translate-y-0 [.scroll-header[data-scrolled="true"]_&]:opacity-100',
+            className
+          ),
+          ...props,
+          children
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: stickyChromeBgClass, children: /* @__PURE__ */ jsx("div", { className: cn(stickyChromeBorderClass, className), ...props, children }) })
+    }
+  );
+};
+ScrollHeaderSticky.displayName = "ScrollHeaderSticky";
+
+export { ScrollHeader, ScrollHeaderSticky, ScrollHeaderTop };
+//# sourceMappingURL=scroll-header.js.map
+//# sourceMappingURL=scroll-header.js.map

package/dist/react/scroll-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/scroll-header.tsx"],"names":[],"mappings":"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","file":"scroll-header.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 { cn } from \"@/lib/utils\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n} from \"react\";\n\nconst DATA_ATTR = \"data-scrolled\";\n\nexport type ScrollHeaderRevealAt = \"start\" | \"center\" | \"end\";\n\ninterface ScrollHeaderContextValue {\n  revealAt: ScrollHeaderRevealAt;\n  slideIn: boolean;\n  onRevealChange?: (revealed: boolean) => void;\n}\n\nconst ScrollHeaderContext = createContext<ScrollHeaderContextValue>({\n  revealAt: \"center\",\n  slideIn: true,\n  onRevealChange: undefined,\n});\n\nfunction isScrollHeaderStickyEl(child: ReactElement): boolean {\n  return (\n    (child.type as { displayName?: string }).displayName ===\n    \"ScrollHeaderSticky\"\n  );\n}\n\nfunction isScrollHeaderTopEl(child: ReactElement): boolean {\n  return (\n    (child.type as { displayName?: string }).displayName === \"ScrollHeaderTop\"\n  );\n}\n\n/** Sticky first so `position: sticky; top: 0` pins to the scrollport, not below the hero. */\nfunction reorderScrollHeaderChildren(children: ReactNode): ReactNode[] {\n  const sticky: ReactNode[] = [];\n  const top: ReactNode[] = [];\n  const rest: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      if (child != null && child !== false) rest.push(child);\n      return;\n    }\n    if (isScrollHeaderStickyEl(child)) sticky.push(child);\n    else if (isScrollHeaderTopEl(child)) top.push(child);\n    else rest.push(child);\n  });\n\n  return [...sticky, ...top, ...rest];\n}\n\ninterface ScrollHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Which part of `ScrollHeaderTop` must leave the scrollport before the sticky bar shows.\n   * `start` — top edge (earliest). `center` — vertical midpoint. `end` — bottom edge (latest).\n   * If omitted: defaults to `center` when `slideIn` is true, and `start` when `slideIn` is false (in-flow bar).\n   */\n  revealAt?: ScrollHeaderRevealAt;\n  /**\n   * When `true` (default), `ScrollHeaderSticky` overlays without layout height and slides in with opacity.\n   * When `false`, the sticky bar stays in document flow (takes vertical space); use `onRevealChange` and\n   * your own styles for any fade or toolbar behavior.\n   */\n  slideIn?: boolean;\n  /**\n   * Called when the sticky header reveal state changes after scroll.\n   * `true` once the top section has crossed the reveal threshold (same moment as `data-scrolled=\"true\"`).\n   */\n  onRevealChange?: (revealed: boolean) => void;\n}\n\nconst ScrollHeader: React.FC<ScrollHeaderProps> = ({\n  revealAt,\n  slideIn = true,\n  onRevealChange,\n  children,\n  className,\n  ...props\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const resolvedRevealAt = revealAt ?? (slideIn ? \"center\" : \"start\");\n\n  return (\n    <ScrollHeaderContext.Provider\n      value={{\n        revealAt: resolvedRevealAt,\n        slideIn,\n        onRevealChange,\n      }}\n    >\n      <div\n        ref={ref}\n        data-scrolled=\"false\"\n        className={cn(\n          \"scroll-header bg-background flex h-full flex-col overflow-y-auto\",\n          className,\n        )}\n        {...props}\n      >\n        {reorderScrollHeaderChildren(children)}\n      </div>\n    </ScrollHeaderContext.Provider>\n  );\n};\n\nconst sentinelClass = \"pointer-events-none h-px w-full shrink-0\";\n\nconst ScrollHeaderTop: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n  children,\n  className,\n  ...props\n}) => {\n  const { revealAt, onRevealChange } = useContext(ScrollHeaderContext);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const onRevealChangeRef = useRef(onRevealChange);\n  onRevealChangeRef.current = onRevealChange;\n  const lastRevealedRef = useRef<boolean | undefined>(undefined);\n\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const container = sentinel.closest<HTMLElement>(\"[data-scrolled]\");\n    if (!container) return;\n\n    lastRevealedRef.current = undefined;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry) return;\n        const revealed = !entry.isIntersecting;\n        container.setAttribute(DATA_ATTR, revealed ? \"true\" : \"false\");\n        if (lastRevealedRef.current !== revealed) {\n          lastRevealedRef.current = revealed;\n          onRevealChangeRef.current?.(revealed);\n        }\n      },\n      { root: container, threshold: 0 },\n    );\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [revealAt]);\n\n  if (revealAt === \"end\") {\n    return (\n      <div className={cn(\"shrink-0\", className)} {...props}>\n        {children}\n        <div ref={sentinelRef} className={sentinelClass} aria-hidden />\n      </div>\n    );\n  }\n\n  if (revealAt === \"center\") {\n    return (\n      <div className={cn(\"relative shrink-0\", className)} {...props}>\n        <div\n          ref={sentinelRef}\n          className={cn(\n            sentinelClass,\n            \"absolute left-0 right-0 top-1/2 z-0 -translate-y-1/2\",\n          )}\n          aria-hidden\n        />\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"shrink-0\", className)} {...props}>\n      <div ref={sentinelRef} className={sentinelClass} aria-hidden />\n      {children}\n    </div>\n  );\n};\n\nScrollHeaderTop.displayName = \"ScrollHeaderTop\";\n\nconst stickyChromeBgClass =\n  \"bg-background supports-backdrop-filter:bg-background\";\n\nconst stickyChromeBorderClass = \"border-primary/10 border-b\";\n\nconst stickyChromeClass = cn(stickyChromeBgClass, stickyChromeBorderClass);\n\nconst revealEase =\n  \"duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:duration-0 motion-reduce:transition-none\";\n\nconst ScrollHeaderSticky: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n  children,\n  className,\n  ...props\n}) => {\n  const { slideIn } = useContext(ScrollHeaderContext);\n\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-40\",\n        slideIn ? \"h-0 overflow-visible\" : \"shrink-0\",\n      )}\n    >\n      {slideIn ? (\n        <div\n          className={cn(\n            stickyChromeClass,\n            \"transition-[opacity, transform]\",\n            revealEase,\n            '[.scroll-header:not([data-scrolled=\"true\"])_&]:pointer-events-none [.scroll-header:not([data-scrolled=\"true\"])_&]:-translate-y-1 [.scroll-header:not([data-scrolled=\"true\"])_&]:opacity-0',\n            '[.scroll-header[data-scrolled=\"true\"]_&]:translate-y-0 [.scroll-header[data-scrolled=\"true\"]_&]:opacity-100',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      ) : (\n        <div className={stickyChromeBgClass}>\n          <div className={cn(stickyChromeBorderClass, className)} {...props}>\n            {children}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nScrollHeaderSticky.displayName = \"ScrollHeaderSticky\";\n\nexport { ScrollHeader, ScrollHeaderSticky, ScrollHeaderTop };\n"]}

package/dist/react/sheet.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
-declare const SheetBoundary: React.FC<React.HTMLAttributes<HTMLDivElement> & {
-    children: React.ReactNode;
+declare const SheetBoundary: React__default.FC<React__default.HTMLAttributes<HTMLDivElement> & {
+    children: React__default.ReactNode;
 }>;
-declare const Sheet: React.FC<{
-    children: React.ReactNode;
+declare const Sheet: React__default.FC<{
+    children: React__default.ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     /**
@@ -13,16 +13,30 @@ declare const Sheet: React.FC<{
      */
     showBackdrop?: boolean;
 }>;
-declare const SheetTrigger: React.FC<{
-    children: React.ReactNode;
+declare const SheetTrigger: React__default.FC<{
+    children: React__default.ReactNode;
     asChild?: boolean;
 }>;
-declare const SheetClose: React.FC<{
-    children: React.ReactNode;
+declare const SheetClose: React__default.FC<{
+    children: React__default.ReactNode;
     asChild?: boolean;
     afterClose?: () => void;
 }>;
-interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+type SheetCloseButtonSide = "top" | "right" | "bottom" | "left";
+interface SheetCloseButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Desktop offset matches {@link SheetContent} for the same `side`; default
+     * `right` matches `SheetContent` default.
+     */
+    side?: SheetCloseButtonSide;
+}
+/**
+ * Default dismiss control for {@link SheetContent}. Includes absolute placement
+ * for the given `side`; pass `className` to adjust or replace positioning.
+ * When `onClick` is omitted, uses sheet context to call `setOpen(false)`.
+ */
+declare const SheetCloseButton: React__default.ForwardRefExoticComponent<SheetCloseButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+interface SheetContentProps extends React__default.HTMLAttributes<HTMLDivElement> {
     side?: "top" | "right" | "bottom" | "left";
     size?: "sm" | "md" | "lg" | "xl" | "full";
     closeThreshold?: number;
@@ -31,15 +45,15 @@ interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
     showClose?: boolean;
     duration?: number;
 }
-declare const SheetContent: React.FC<SheetContentProps>;
-declare const SheetHeader: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+declare const SheetContent: React__default.FC<SheetContentProps>;
+declare const SheetHeader: React__default.FC<React__default.HTMLAttributes<HTMLDivElement> & {
     fixed?: boolean;
 }>;
-declare const SheetFooter: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+declare const SheetFooter: React__default.FC<React__default.HTMLAttributes<HTMLDivElement> & {
     fixed?: boolean;
 }>;
-declare const SheetTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>>;
-declare const SheetDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
+declare const SheetTitle: React__default.FC<React__default.HTMLAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React__default.FC<React__default.HTMLAttributes<HTMLParagraphElement>>;
 /**
  * Circular back control for nested sheets (arrow, same footprint as the default
  * sheet close icon). Wraps `SheetClose` with `asChild`.
@@ -49,8 +63,8 @@ declare const SheetDescription: React.FC<React.HTMLAttributes<HTMLParagraphEleme
  * over a delayed `onClick` when opening another sheet so the exit uses the
  * handoff timing built into `Sheet`.
  */
-declare const SheetNestedClose: React.FC<React.ComponentPropsWithoutRef<"button"> & {
-    children?: React.ReactNode;
+declare const SheetNestedClose: React__default.FC<React__default.ComponentPropsWithoutRef<"button"> & {
+    children?: React__default.ReactNode;
     /**
      * Runs after the close animation when chaining another sheet. Uses a shorter
      * exit (see `SheetSetOpenOptions.afterClose`).
@@ -58,4 +72,4 @@ declare const SheetNestedClose: React.FC<React.ComponentPropsWithoutRef<"button"
     afterClose?: () => void;
 }>;
 
-export { Sheet, SheetBoundary, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetNestedClose, SheetTitle, SheetTrigger };
+export { Sheet, SheetBoundary, SheetClose, SheetCloseButton, type SheetCloseButtonProps, type SheetCloseButtonSide, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetNestedClose, SheetTitle, SheetTrigger };

package/dist/react/sheet.js

@@ -1,9 +1,9 @@
-import React, { useState, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
+import React, { useCallback, useState, useMemo, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { X, ArrowLeft } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -29,6 +29,8 @@ var DIALOG_EXIT_MOTION_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
 var DIALOG_MOTION_OFFSET_PX = 120;
 var PANEL_OFF_X = "112%";
 var PANEL_OFF_Y = "100%";
+var SHEET_Z_PANEL_CLOSE = 100;
+var SHEET_Z_PORTAL_STEP = 10;
 var SIDE_LAYOUT = {
   top: "top-0 left-0 right-0 border-b border-primary/10",
   bottom: "bottom-0 left-0 right-0 border-t border-primary/10",
@@ -255,6 +257,39 @@ function useSheetScrollLock(open, setOpen, bounded, nestDepth) {
     return () => window.removeEventListener("keydown", handleEscNested, true);
   }, [open, setOpen, bounded, nestDepth]);
 }
+var SheetCloseButton = React.forwardRef(
+  ({ className, side = "right", style, type = "button", onClick, ...props }, ref) => {
+    const { setOpen } = useSheetContext();
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (onClick == null) {
+          setOpen(false);
+        }
+      },
+      [onClick, setOpen]
+    );
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        style: { zIndex: SHEET_Z_PANEL_CLOSE, ...style },
+        className: cn(
+          "flex size-12 cursor-pointer items-center justify-center rounded-full md:bg-background transition-all hover:bg-secondary-background active:scale-[0.96] md:border md:border-primary/10 md:shadow-xl hover:border-primary/20",
+          className
+        ),
+        onClick: handleClick,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ]
+      }
+    );
+  }
+);
+SheetCloseButton.displayName = "SheetCloseButton";
 var SheetContent = ({
   children,
   side = "right",
@@ -499,7 +534,7 @@ var SheetContent = ({
     [dialogMotion, isAnimating, side, bounded]
   );
   const boundaryDepth = boundaryCtx?.depth ?? 0;
-  const zIndex = bounded ? 10 + boundaryDepth * 10 + (nestDepth - 1) * 2 : 50 + (nestDepth - 1) * 10;
+  const zIndex = bounded ? SHEET_Z_PANEL_CLOSE + SHEET_Z_PORTAL_STEP + boundaryDepth * SHEET_Z_PORTAL_STEP + (nestDepth - 1) * 2 : SHEET_Z_PANEL_CLOSE - 5 * SHEET_Z_PORTAL_STEP + (nestDepth - 1) * SHEET_Z_PORTAL_STEP;
   const layerPosition = bounded ? "absolute" : "fixed";
   const backdropStyle = useMemo(() => {
     if (!showBackdrop) return { transition: "none" };
@@ -599,23 +634,17 @@ var SheetContent = ({
             onTouchEnd: swipeActive ? handleTouchEnd : void 0,
             children: [
               children,
-              showClose && /* @__PURE__ */ jsxs(
-                "button",
+              showClose && /* @__PURE__ */ jsx(
+                SheetCloseButton,
                 {
-                  type: "button",
-                  onClick: closeSheet,
+                  side,
                   className: cn(
-                    "absolute flex size-12 cursor-pointer items-center justify-center rounded-full md:border md:border-primary/10 bg-background md:shadow-xl transition-all hover:bg-secondary-background hover:border-primary/20 active:scale-[0.96]",
-                    "top-4 right-4",
+                    "absolute top-4 right-4",
                     side === "right" && "md:top-5 md:right-auto md:-left-16",
                     side === "left" && "md:top-5 md:-right-16 md:left-auto",
                     side === "top" && "md:top-auto md:right-auto md:-bottom-15 md:left-1/2 md:-translate-x-1/2",
                     side === "bottom" && "md:-top-15 md:right-auto md:bottom-auto md:left-1/2 md:-translate-x-1/2"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-                  ]
+                  )
                 }
               )
             ]
@@ -679,6 +708,6 @@ var SheetNestedClose = ({ className, children, onClick, afterClose, ...props })
   }
 ) });
 
-export { Sheet, SheetBoundary, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetNestedClose, SheetTitle, SheetTrigger };
+export { Sheet, SheetBoundary, SheetClose, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetNestedClose, SheetTitle, SheetTrigger };
 //# sourceMappingURL=sheet.js.map
 //# sourceMappingURL=sheet.js.map