hazo_ui 2.8.1 → 2.9.0

package/README.md

@@ -2965,6 +2965,61 @@ function FormDialog() {
 | `footerClassName` | `string` | - | Footer CSS classes |
 | `showCloseButton` | `boolean` | `true` | Show X close button |
 
+## Drawer
+
+A vaul-backed bottom sheet primitive. Intended for mobile UIs; on desktop, prefer `Dialog`.
+
+```typescript
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+  useMediaQuery,
+} from "hazo_ui";
+
+function Example() {
+  const is_mobile = useMediaQuery("(max-width: 640px)");
+
+  if (!is_mobile) {
+    // Render a Dialog instead on desktop
+    return null;
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <button>Open</button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Title</DrawerTitle>
+          <DrawerDescription>Optional description</DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <button>Close</button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+```
+
+**Behavior:**
+- Drag the grab handle downward to dismiss
+- ESC closes
+- Click overlay to dismiss
+- `max-h-[96dvh]` keeps the sheet usable on iOS Safari when the address bar toggles
+- Focus trap, `aria-labelledby`, and background `aria-hidden` are wired automatically by vaul
+
+**Not yet supported (deferred):** snap points, side-anchored drawers, nested drawers.
+
 ---
 
 ## Troubleshooting

package/dist/index.cjs

@@ -57,6 +57,7 @@ var TabsPrimitive = require('@radix-ui/react-tabs');
 var Suggestion = require('@tiptap/suggestion');
 var state = require('@tiptap/pm/state');
 var reactDom = require('react-dom');
+var vaul = require('vaul');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
@@ -6798,6 +6799,112 @@ function HazoUiConfirmDialog({
     )
   ] }) });
 }
+var Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, { shouldScaleBackground, ...props });
+Drawer.displayName = "Drawer";
+var DrawerTrigger = vaul.Drawer.Trigger;
+var DrawerPortal = vaul.Drawer.Portal;
+var DrawerClose = vaul.Drawer.Close;
+var DrawerOverlay = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  vaul.Drawer.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerContent = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    vaul.Drawer.Content,
+    {
+      ref,
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto max-h-[96dvh] flex-col rounded-t-[10px] border bg-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
+    ...props
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("mt-auto flex flex-col gap-2 p-4", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  vaul.Drawer.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  vaul.Drawer.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = "DrawerDescription";
+function useMediaQuery(query) {
+  const get_match = React27__namespace.useCallback(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return false;
+    }
+    return window.matchMedia(query).matches;
+  }, [query]);
+  const [matches, set_matches] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const media_query_list = window.matchMedia(query);
+    set_matches(media_query_list.matches);
+    const handle_change = (event) => set_matches(event.matches);
+    if (typeof media_query_list.addEventListener === "function") {
+      media_query_list.addEventListener("change", handle_change);
+      return () => media_query_list.removeEventListener("change", handle_change);
+    }
+    media_query_list.addListener(handle_change);
+    return () => media_query_list.removeListener(handle_change);
+  }, [query, get_match]);
+  return matches;
+}
 var Accordion = AccordionPrimitive__namespace.Root;
 var AccordionItem = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Item,
@@ -7237,6 +7344,16 @@ exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.CommandNodeExtension = CommandNodeExtension;
 exports.CommandPill = CommandPill;
 exports.CommandPopover = CommandPopover;
+exports.Drawer = Drawer;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = DropdownMenuContent;
@@ -7324,5 +7441,6 @@ exports.resolve_animation_classes = resolve_animation_classes;
 exports.set_hazo_ui_config = set_hazo_ui_config;
 exports.text_to_tiptap_content = text_to_tiptap_content;
 exports.toggleVariants = toggleVariants;
+exports.useMediaQuery = useMediaQuery;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map