css-drawer 0.1.0

package/README.md

@@ -0,0 +1,470 @@
+# CSS Drawer
+
+A near drop-in replacement for [Vaul](https://vaul.emilkowal.ski) using native `<dialog>` and pure CSS animations.
+
+**Zero JavaScript animations.** The only JS: `dialog.showModal()` and `dialog.close()`.
+
+## Why?
+
+| Feature | Vaul | CSS Drawer |
+|---------|------|------------|
+| Bundle size | ~12KB | **1.4KB** JS + 8KB CSS (gzip: ~2.5KB total) |
+| Animation engine | JavaScript | Pure CSS |
+| Nesting | Manual setup | Automatic (CSS `:has()`) |
+| Accessibility | Built-in | Automatic (native `<dialog>` + `inert`) |
+| API | Controlled state | Native refs |
+
+## Installation
+
+```bash
+npm install css-drawer
+```
+
+---
+
+## Quick Start
+
+### React (Recommended)
+
+```tsx
+import { useRef } from 'react'
+import { Drawer } from 'css-drawer/react'
+
+function App() {
+  const ref = useRef<HTMLDialogElement>(null)
+
+  return (
+    <>
+      <button onClick={() => ref.current?.showModal()}>
+        Open
+      </button>
+
+      <Drawer.Root>
+        <Drawer.Content ref={ref}>
+          <Drawer.Handle />
+          <div className="drawer-content">
+            <Drawer.Title>Title</Drawer.Title>
+            <Drawer.Description>Description</Drawer.Description>
+            <button onClick={() => ref.current?.close()}>Close</button>
+          </div>
+        </Drawer.Content>
+      </Drawer.Root>
+    </>
+  )
+}
+```
+
+### Vanilla JS
+
+```ts
+import { open, close } from 'css-drawer'
+import 'css-drawer/styles'
+
+document.querySelector('#open-btn').onclick = () => open('my-drawer')
+```
+
+```html
+<button id="open-btn">Open</button>
+
+<dialog class="drawer" id="my-drawer">
+  <div class="drawer-handle"></div>
+  <div className="drawer-content">
+    <h2>Title</h2>
+    <p>Description</p>
+    <button onclick="this.closest('dialog').close()">Close</button>
+  </div>
+</dialog>
+```
+
+---
+
+## React API
+
+### Installation
+
+```tsx
+import { Drawer } from 'css-drawer/react'
+// Styles are auto-injected
+```
+
+### Drawer.Root
+
+Provides context for direction. Wrap your drawer content.
+
+```tsx
+<Drawer.Root direction="right">
+  <Drawer.Content ref={ref}>...</Drawer.Content>
+</Drawer.Root>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `direction` | `'bottom' \| 'top' \| 'left' \| 'right'` | `'bottom'` | Direction the drawer opens from |
+| `children` | `ReactNode` | - | Drawer content |
+
+### Drawer.Content
+
+The dialog element. Pass a ref to control open/close.
+
+```tsx
+const ref = useRef<HTMLDialogElement>(null)
+
+// Open
+ref.current?.showModal()
+
+// Close
+ref.current?.close()
+
+<Drawer.Content ref={ref}>...</Drawer.Content>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `ref` | `Ref<HTMLDialogElement>` | - | Ref to control the dialog |
+| `className` | `string` | - | Additional CSS classes |
+| `...props` | `DialogHTMLAttributes` | - | All native dialog props |
+
+### Drawer.Handle
+
+Visual drag handle indicator.
+
+```tsx
+<Drawer.Handle />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | - | Additional CSS classes |
+
+### Drawer.Title
+
+Semantic heading for accessibility.
+
+```tsx
+<Drawer.Title>Create Issue</Drawer.Title>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `HTMLAttributes<HTMLHeadingElement>` | - | All native h2 props |
+
+### Drawer.Description
+
+Semantic description for accessibility.
+
+```tsx
+<Drawer.Description>Fill out the form below.</Drawer.Description>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `HTMLAttributes<HTMLParagraphElement>` | - | All native p props |
+
+---
+
+## Vanilla JS API
+
+### Installation
+
+```ts
+import { open, close, closeAll } from 'css-drawer'
+import 'css-drawer/styles'
+```
+
+### open(drawer)
+
+Opens a drawer by ID or element reference.
+
+```ts
+open('my-drawer')
+open(document.getElementById('my-drawer'))
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `drawer` | `string \| HTMLDialogElement` | Drawer ID or element |
+
+### close(drawer)
+
+Closes a drawer by ID or element reference.
+
+```ts
+close('my-drawer')
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `drawer` | `string \| HTMLDialogElement` | Drawer ID or element |
+
+### closeAll()
+
+Closes all open drawers in reverse order (top to bottom).
+
+```ts
+closeAll()
+```
+
+### isOpen(drawer)
+
+Returns whether a drawer is open.
+
+```ts
+if (isOpen('my-drawer')) {
+  // ...
+}
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `drawer` | `string \| HTMLDialogElement` | Drawer ID or element |
+
+**Returns:** `boolean`
+
+### getOpen()
+
+Returns all currently open drawers.
+
+```ts
+const openDrawers = getOpen()
+```
+
+**Returns:** `HTMLDialogElement[]`
+
+### getTop()
+
+Returns the topmost open drawer.
+
+```ts
+const topDrawer = getTop()
+topDrawer?.close()
+```
+
+**Returns:** `HTMLDialogElement | null`
+
+### create(options)
+
+Creates a drawer element programmatically.
+
+```ts
+const drawer = create({
+  id: 'my-drawer',
+  content: '<h2>Hello</h2>',
+  handle: true,
+  className: 'custom-class'
+})
+
+mount(drawer)
+open(drawer)
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `id` | `string` | - | Drawer ID |
+| `content` | `string` | `''` | HTML content |
+| `handle` | `boolean` | `true` | Include drag handle |
+| `className` | `string` | `''` | Additional CSS classes |
+
+**Returns:** `HTMLDialogElement`
+
+### mount(drawer)
+
+Appends a drawer to the document body.
+
+```ts
+const drawer = create({ id: 'my-drawer' })
+mount(drawer)
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `drawer` | `HTMLDialogElement` | Drawer element |
+
+**Returns:** `HTMLDialogElement`
+
+### unmount(drawer)
+
+Removes a drawer from the DOM.
+
+```ts
+unmount('my-drawer')
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `drawer` | `string \| HTMLDialogElement` | Drawer ID or element |
+
+### subscribe(drawer, handlers)
+
+Subscribe to drawer events.
+
+```ts
+const unsubscribe = subscribe('my-drawer', {
+  onOpen: () => console.log('Opened'),
+  onClose: () => console.log('Closed'),
+  onCancel: () => console.log('Cancelled (Escape/backdrop)')
+})
+
+// Later
+unsubscribe()
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `drawer` | `string \| HTMLDialogElement` | Drawer ID or element |
+| `handlers.onOpen` | `() => void` | Called when drawer opens |
+| `handlers.onClose` | `() => void` | Called when drawer closes |
+| `handlers.onCancel` | `() => void` | Called on Escape or backdrop click |
+
+**Returns:** `() => void` (cleanup function)
+
+---
+
+## Directions
+
+### React
+
+```tsx
+<Drawer.Root direction="right">
+  <Drawer.Content ref={ref}>...</Drawer.Content>
+</Drawer.Root>
+```
+
+### Vanilla
+
+```html
+<dialog class="drawer" data-direction="right">...</dialog>
+```
+
+### Responsive Direction
+
+```tsx
+const isMobile = useMediaQuery('(max-width: 768px)')
+
+<Drawer.Root direction={isMobile ? 'bottom' : 'right'}>
+  ...
+</Drawer.Root>
+```
+
+| Direction | Description |
+|-----------|-------------|
+| `bottom` | Opens from bottom (default) |
+| `top` | Opens from top |
+| `left` | Opens from left |
+| `right` | Opens from right |
+
+---
+
+## Auto-Nesting
+
+Drawers automatically stack when opened. No configuration needed.
+
+```tsx
+const drawer1 = useRef<HTMLDialogElement>(null)
+const drawer2 = useRef<HTMLDialogElement>(null)
+
+// Open drawer1
+drawer1.current?.showModal()
+
+// Open drawer2 on top
+drawer2.current?.showModal()
+// drawer1 automatically scales down and dims
+```
+
+Works up to 5 levels. CSS `:has()` selectors handle the visual stacking.
+
+---
+
+## Accessibility
+
+Accessibility is automatic:
+
+- **Focus trapping**: Native `<dialog>` traps focus
+- **Escape to close**: Native `<dialog>` behavior
+- **Stacked drawers**: Underlying drawers get `inert` attribute automatically
+- **Screen readers**: Only the top drawer is accessible
+
+No setup required.
+
+---
+
+## CSS Customization
+
+Override CSS custom properties:
+
+```css
+:root {
+  --drawer-bg: #fff;
+  --drawer-radius: 24px;
+  --drawer-max-width: 500px;
+  --drawer-max-height: 96dvh;
+  --drawer-backdrop: hsl(0 0% 0% / 0.4);
+  --drawer-handle: hsl(0 0% 80%);
+  --drawer-duration: 0.5s;
+  --drawer-duration-close: 0.35s;
+  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+}
+```
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--drawer-bg` | `#fff` | Background color |
+| `--drawer-radius` | `24px` | Border radius |
+| `--drawer-max-width` | `500px` | Maximum width |
+| `--drawer-max-height` | `96dvh` | Maximum height |
+| `--drawer-backdrop` | `hsl(0 0% 0% / 0.4)` | Backdrop color |
+| `--drawer-handle` | `hsl(0 0% 80%)` | Handle color |
+| `--drawer-duration` | `0.5s` | Open animation duration |
+| `--drawer-duration-close` | `0.35s` | Close animation duration |
+| `--drawer-ease` | `cubic-bezier(0.32, 0.72, 0, 1)` | Animation easing |
+
+Dark mode is automatic via `prefers-color-scheme`.
+
+---
+
+## CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `.drawer` | Required on the dialog element |
+| `.drawer-handle` | Visual drag handle |
+| `.drawer-content` | Scrollable content area |
+
+---
+
+## Browser Support
+
+| Browser | Version |
+|---------|---------|
+| Chrome | 117+ |
+| Safari | 17.5+ |
+| Firefox | 129+ |
+
+Uses `@starting-style`, `:has()`, `allow-discrete`, and `dvh` units.
+
+---
+
+## TypeScript
+
+Full TypeScript support included.
+
+```tsx
+import {
+  Drawer,
+  type DrawerRootProps,
+  type DrawerContentProps,
+  type DrawerDirection
+} from 'css-drawer/react'
+
+import {
+  open,
+  close,
+  type DrawerElement,
+  type DrawerRef
+} from 'css-drawer'
+```
+
+---
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,4 @@
+if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}function e(e){return e?typeof e==`string`?document.getElementById(e):e:null}function t(t){e(t)?.showModal()}function n(t){e(t)?.close()}function r(){Array.from(document.querySelectorAll(`dialog.drawer[open]`)).reverse().forEach(e=>e.close())}function i(t){return e(t)?.open??!1}function a(){return Array.from(document.querySelectorAll(`dialog.drawer[open]`))}function o(){let e=a();return e[e.length-1]??null}function s(e={}){let{id:t,content:n=``,handle:r=!0,className:i=``}=e,a=document.createElement(`dialog`);return a.className=`drawer ${i}`.trim(),t&&(a.id=t),a.innerHTML=`
+    ${r?`<div class="drawer-handle"></div>`:``}
+    <div class="drawer-content">${n}</div>
+  `,a.addEventListener(`click`,e=>{e.target===a&&a.close()}),a}function c(e){return document.body.appendChild(e),e}function l(t){e(t)?.remove()}function u(){let e=e=>{let t=e.target;t.matches(`dialog.drawer`)&&t.close()};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)}function d(t,n){let r=e(t);if(!r)return()=>{};let{onOpen:i,onClose:a,onCancel:o}=n,s=()=>a?.(),c=()=>o?.(),l=new MutationObserver(e=>{for(let t of e)t.attributeName===`open`&&r.open&&i?.()});return r.addEventListener(`close`,s),r.addEventListener(`cancel`,c),l.observe(r,{attributes:!0}),()=>{r.removeEventListener(`close`,s),r.removeEventListener(`cancel`,c),l.disconnect()}}function f(e){return{id:e,className:`drawer`,onClick:e=>{e.target===e.currentTarget&&e.currentTarget.close()}}}exports.close=n,exports.closeAll=r,exports.create=s,exports.getOpen=a,exports.getTop=o,exports.init=u,exports.isOpen=i,exports.mount=c,exports.open=t,exports.props=f,exports.subscribe=d,exports.unmount=l;

package/dist/index.d.cts

@@ -0,0 +1,83 @@
+//#region src/index.d.ts
+/**
+ * CSS Drawer - Headless drawer component
+ * Works with any framework: React, Vue, Svelte, vanilla JS
+ */
+type DrawerElement = HTMLDialogElement;
+type DrawerRef = string | DrawerElement | null | undefined;
+interface CreateDrawerOptions {
+  /** Drawer ID */
+  id?: string;
+  /** HTML content for the drawer */
+  content?: string;
+  /** Include drag handle (default: true) */
+  handle?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+interface DrawerEventHandlers {
+  /** Called when drawer opens */
+  onOpen?: () => void;
+  /** Called when drawer closes */
+  onClose?: () => void;
+  /** Called when drawer is cancelled (backdrop click or Escape) */
+  onCancel?: () => void;
+}
+/**
+ * Open a drawer by ID or element reference
+ */
+declare function open(drawer: DrawerRef): void;
+/**
+ * Close a drawer by ID or element reference
+ */
+declare function close(drawer: DrawerRef): void;
+/**
+ * Close all open drawers (in reverse DOM order for proper animation)
+ */
+declare function closeAll(): void;
+/**
+ * Check if a drawer is open
+ */
+declare function isOpen(drawer: DrawerRef): boolean;
+/**
+ * Get all open drawers
+ */
+declare function getOpen(): DrawerElement[];
+/**
+ * Get the topmost open drawer
+ */
+declare function getTop(): DrawerElement | null;
+/**
+ * Create a drawer element programmatically
+ */
+declare function create(options?: CreateDrawerOptions): DrawerElement;
+/**
+ * Mount a drawer to the DOM (appends to body)
+ */
+declare function mount(drawer: DrawerElement): DrawerElement;
+/**
+ * Unmount a drawer from the DOM
+ */
+declare function unmount(drawer: DrawerRef): void;
+/**
+ * Initialize global backdrop-click-to-close behavior
+ * Alternative to adding onclick to each drawer
+ */
+declare function init(): () => void;
+/**
+ * Subscribe to drawer events
+ * @returns Cleanup function
+ */
+declare function subscribe(drawer: DrawerRef, handlers: DrawerEventHandlers): () => void;
+/**
+ * React-friendly hook helper - returns props to spread on dialog
+ * Usage: <dialog {...drawer.props('my-drawer')} />
+ */
+declare function props(id: string): {
+  readonly id: string;
+  readonly className: "drawer";
+  readonly onClick: (e: MouseEvent) => void;
+};
+//#endregion
+export { CreateDrawerOptions, DrawerElement, DrawerEventHandlers, DrawerRef, close, closeAll, create, getOpen, getTop, init, isOpen, mount, open, props, subscribe, unmount };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;AAwCA;AAEA;AAEA;AAWiB,KAfL,aAAA,GAAgB,iBAeQ;AAuBpB,KApCJ,SAAA,GAoCiB,MAAA,GApCI,aAoCK,GAAA,IAAA,GAAA,SAAA;AAQtB,UA1CC,mBAAA,CA0CsB;EAQvB;EAQA,EAAA,CAAA,EAAA,MAAM;EAQN;EAOA,OAAA,CAAA,EAAM,MAAA;EAQN;EAuBA,MAAA,CAAA,EAAK,OAAA;EAQL;EASA,SAAI,CAAA,EAAA,MAAA;AAgBpB;AAoCgB,UAlKC,mBAAA,CAsKU;;;;;;;;;;;iBA/IX,IAAA,SAAa;;;;iBAQb,KAAA,SAAc;;;;iBAQd,QAAA,CAAA;;;;iBAQA,MAAA,SAAe;;;;iBAQf,OAAA,CAAA,GAAW;;;;iBAOX,MAAA,CAAA,GAAU;;;;iBAQV,MAAA,WAAgB,sBAA2B;;;;iBAuB3C,KAAA,SAAc,gBAAgB;;;;iBAQ9B,OAAA,SAAgB;;;;;iBAShB,IAAA,CAAA;;;;;iBAgBA,SAAA,SACN,qBACE;;;;;iBAkCI,KAAA;;;wBAIC"}

package/dist/index.d.mts

@@ -0,0 +1,83 @@
+//#region src/index.d.ts
+/**
+ * CSS Drawer - Headless drawer component
+ * Works with any framework: React, Vue, Svelte, vanilla JS
+ */
+type DrawerElement = HTMLDialogElement;
+type DrawerRef = string | DrawerElement | null | undefined;
+interface CreateDrawerOptions {
+  /** Drawer ID */
+  id?: string;
+  /** HTML content for the drawer */
+  content?: string;
+  /** Include drag handle (default: true) */
+  handle?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+interface DrawerEventHandlers {
+  /** Called when drawer opens */
+  onOpen?: () => void;
+  /** Called when drawer closes */
+  onClose?: () => void;
+  /** Called when drawer is cancelled (backdrop click or Escape) */
+  onCancel?: () => void;
+}
+/**
+ * Open a drawer by ID or element reference
+ */
+declare function open(drawer: DrawerRef): void;
+/**
+ * Close a drawer by ID or element reference
+ */
+declare function close(drawer: DrawerRef): void;
+/**
+ * Close all open drawers (in reverse DOM order for proper animation)
+ */
+declare function closeAll(): void;
+/**
+ * Check if a drawer is open
+ */
+declare function isOpen(drawer: DrawerRef): boolean;
+/**
+ * Get all open drawers
+ */
+declare function getOpen(): DrawerElement[];
+/**
+ * Get the topmost open drawer
+ */
+declare function getTop(): DrawerElement | null;
+/**
+ * Create a drawer element programmatically
+ */
+declare function create(options?: CreateDrawerOptions): DrawerElement;
+/**
+ * Mount a drawer to the DOM (appends to body)
+ */
+declare function mount(drawer: DrawerElement): DrawerElement;
+/**
+ * Unmount a drawer from the DOM
+ */
+declare function unmount(drawer: DrawerRef): void;
+/**
+ * Initialize global backdrop-click-to-close behavior
+ * Alternative to adding onclick to each drawer
+ */
+declare function init(): () => void;
+/**
+ * Subscribe to drawer events
+ * @returns Cleanup function
+ */
+declare function subscribe(drawer: DrawerRef, handlers: DrawerEventHandlers): () => void;
+/**
+ * React-friendly hook helper - returns props to spread on dialog
+ * Usage: <dialog {...drawer.props('my-drawer')} />
+ */
+declare function props(id: string): {
+  readonly id: string;
+  readonly className: "drawer";
+  readonly onClick: (e: MouseEvent) => void;
+};
+//#endregion
+export { CreateDrawerOptions, DrawerElement, DrawerEventHandlers, DrawerRef, close, closeAll, create, getOpen, getTop, init, isOpen, mount, open, props, subscribe, unmount };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;AAwCA;AAEA;AAEA;AAWiB,KAfL,aAAA,GAAgB,iBAeQ;AAuBpB,KApCJ,SAAA,GAoCiB,MAAA,GApCI,aAoCK,GAAA,IAAA,GAAA,SAAA;AAQtB,UA1CC,mBAAA,CA0CsB;EAQvB;EAQA,EAAA,CAAA,EAAA,MAAM;EAQN;EAOA,OAAA,CAAA,EAAM,MAAA;EAQN;EAuBA,MAAA,CAAA,EAAK,OAAA;EAQL;EASA,SAAI,CAAA,EAAA,MAAA;AAgBpB;AAoCgB,UAlKC,mBAAA,CAsKU;;;;;;;;;;;iBA/IX,IAAA,SAAa;;;;iBAQb,KAAA,SAAc;;;;iBAQd,QAAA,CAAA;;;;iBAQA,MAAA,SAAe;;;;iBAQf,OAAA,CAAA,GAAW;;;;iBAOX,MAAA,CAAA,GAAU;;;;iBAQV,MAAA,WAAgB,sBAA2B;;;;iBAuB3C,KAAA,SAAc,gBAAgB;;;;iBAQ9B,OAAA,SAAgB;;;;;iBAShB,IAAA,CAAA;;;;;iBAgBA,SAAA,SACN,qBACE;;;;;iBAkCI,KAAA;;;wBAIC"}

package/dist/index.mjs

@@ -0,0 +1,5 @@
+if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}function e(e){return e?typeof e==`string`?document.getElementById(e):e:null}function t(t){e(t)?.showModal()}function n(t){e(t)?.close()}function r(){Array.from(document.querySelectorAll(`dialog.drawer[open]`)).reverse().forEach(e=>e.close())}function i(t){return e(t)?.open??!1}function a(){return Array.from(document.querySelectorAll(`dialog.drawer[open]`))}function o(){let e=a();return e[e.length-1]??null}function s(e={}){let{id:t,content:n=``,handle:r=!0,className:i=``}=e,a=document.createElement(`dialog`);return a.className=`drawer ${i}`.trim(),t&&(a.id=t),a.innerHTML=`
+    ${r?`<div class="drawer-handle"></div>`:``}
+    <div class="drawer-content">${n}</div>
+  `,a.addEventListener(`click`,e=>{e.target===a&&a.close()}),a}function c(e){return document.body.appendChild(e),e}function l(t){e(t)?.remove()}function u(){let e=e=>{let t=e.target;t.matches(`dialog.drawer`)&&t.close()};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)}function d(t,n){let r=e(t);if(!r)return()=>{};let{onOpen:i,onClose:a,onCancel:o}=n,s=()=>a?.(),c=()=>o?.(),l=new MutationObserver(e=>{for(let t of e)t.attributeName===`open`&&r.open&&i?.()});return r.addEventListener(`close`,s),r.addEventListener(`cancel`,c),l.observe(r,{attributes:!0}),()=>{r.removeEventListener(`close`,s),r.removeEventListener(`cancel`,c),l.disconnect()}}function f(e){return{id:e,className:`drawer`,onClick:e=>{e.target===e.currentTarget&&e.currentTarget.close()}}}export{n as close,r as closeAll,s as create,a as getOpen,o as getTop,u as init,i as isOpen,c as mount,t as open,f as props,d as subscribe,l as unmount};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["open"],"sources":["../src/index.ts"],"sourcesContent":["/**\n * CSS Drawer - Headless drawer component\n * Works with any framework: React, Vue, Svelte, vanilla JS\n */\n\n/* ===== Auto-enable accessibility for stacked drawers ===== */\nif (typeof window !== 'undefined') {\n  const updateInertState = () => {\n    const openDrawers = Array.from(\n      document.querySelectorAll<HTMLDialogElement>('dialog.drawer[open]')\n    )\n    openDrawers.forEach((drawer, index) => {\n      if (index === openDrawers.length - 1) {\n        drawer.removeAttribute('inert')\n      } else {\n        drawer.setAttribute('inert', '')\n      }\n    })\n  }\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (\n        mutation.type === 'attributes' &&\n        mutation.attributeName === 'open' &&\n        (mutation.target as HTMLElement).classList.contains('drawer')\n      ) {\n        updateInertState()\n        break\n      }\n    }\n  })\n\n  observer.observe(document.body, {\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['open'],\n  })\n}\n\nexport type DrawerElement = HTMLDialogElement\n\nexport type DrawerRef = string | DrawerElement | null | undefined\n\nexport interface CreateDrawerOptions {\n  /** Drawer ID */\n  id?: string\n  /** HTML content for the drawer */\n  content?: string\n  /** Include drag handle (default: true) */\n  handle?: boolean\n  /** Additional CSS classes */\n  className?: string\n}\n\nexport interface DrawerEventHandlers {\n  /** Called when drawer opens */\n  onOpen?: () => void\n  /** Called when drawer closes */\n  onClose?: () => void\n  /** Called when drawer is cancelled (backdrop click or Escape) */\n  onCancel?: () => void\n}\n\n/**\n * Resolve a drawer reference to an element\n */\nfunction resolve(drawer: DrawerRef): DrawerElement | null {\n  if (!drawer) return null\n  if (typeof drawer === 'string') {\n    return document.getElementById(drawer) as DrawerElement | null\n  }\n  return drawer\n}\n\n/**\n * Open a drawer by ID or element reference\n */\nexport function open(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.showModal()\n}\n\n/**\n * Close a drawer by ID or element reference\n */\nexport function close(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.close()\n}\n\n/**\n * Close all open drawers (in reverse DOM order for proper animation)\n */\nexport function closeAll(): void {\n  const drawers = Array.from(document.querySelectorAll<DrawerElement>('dialog.drawer[open]'))\n  drawers.reverse().forEach((d) => d.close())\n}\n\n/**\n * Check if a drawer is open\n */\nexport function isOpen(drawer: DrawerRef): boolean {\n  const el = resolve(drawer)\n  return el?.open ?? false\n}\n\n/**\n * Get all open drawers\n */\nexport function getOpen(): DrawerElement[] {\n  return Array.from(document.querySelectorAll<DrawerElement>('dialog.drawer[open]'))\n}\n\n/**\n * Get the topmost open drawer\n */\nexport function getTop(): DrawerElement | null {\n  const open = getOpen()\n  return open[open.length - 1] ?? null\n}\n\n/**\n * Create a drawer element programmatically\n */\nexport function create(options: CreateDrawerOptions = {}): DrawerElement {\n  const { id, content = '', handle = true, className = '' } = options\n\n  const dialog = document.createElement('dialog') as DrawerElement\n  dialog.className = `drawer ${className}`.trim()\n  if (id) dialog.id = id\n\n  dialog.innerHTML = `\n    ${handle ? '<div class=\"drawer-handle\"></div>' : ''}\n    <div class=\"drawer-content\">${content}</div>\n  `\n\n  // Backdrop click to close\n  dialog.addEventListener('click', (e) => {\n    if (e.target === dialog) dialog.close()\n  })\n\n  return dialog\n}\n\n/**\n * Mount a drawer to the DOM (appends to body)\n */\nexport function mount(drawer: DrawerElement): DrawerElement {\n  document.body.appendChild(drawer)\n  return drawer\n}\n\n/**\n * Unmount a drawer from the DOM\n */\nexport function unmount(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.remove()\n}\n\n/**\n * Initialize global backdrop-click-to-close behavior\n * Alternative to adding onclick to each drawer\n */\nexport function init(): () => void {\n  const handler = (e: MouseEvent) => {\n    const target = e.target as HTMLElement\n    if (target.matches('dialog.drawer')) {\n      ;(target as DrawerElement).close()\n    }\n  }\n\n  document.addEventListener('click', handler)\n  return () => document.removeEventListener('click', handler)\n}\n\n/**\n * Subscribe to drawer events\n * @returns Cleanup function\n */\nexport function subscribe(\n  drawer: DrawerRef,\n  handlers: DrawerEventHandlers\n): () => void {\n  const el = resolve(drawer)\n  if (!el) return () => {}\n\n  const { onOpen, onClose, onCancel } = handlers\n\n  const handleClose = () => onClose?.()\n  const handleCancel = () => onCancel?.()\n\n  // Use MutationObserver to detect open attribute\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (mutation.attributeName === 'open' && el.open) {\n        onOpen?.()\n      }\n    }\n  })\n\n  el.addEventListener('close', handleClose)\n  el.addEventListener('cancel', handleCancel)\n  observer.observe(el, { attributes: true })\n\n  return () => {\n    el.removeEventListener('close', handleClose)\n    el.removeEventListener('cancel', handleCancel)\n    observer.disconnect()\n  }\n}\n\n/**\n * React-friendly hook helper - returns props to spread on dialog\n * Usage: <dialog {...drawer.props('my-drawer')} />\n */\nexport function props(id: string) {\n  return {\n    id,\n    className: 'drawer',\n    onClick: (e: MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        ;(e.currentTarget as DrawerElement).close()\n      }\n    },\n  } as const\n}\n\n"],"mappings":"AAMA,GAAI,OAAO,OAAW,IAAa,CACjC,IAAM,MAAyB,CAC7B,IAAM,EAAc,MAAM,KACxB,SAAS,iBAAoC,sBAAsB,CACpE,CACD,EAAY,SAAS,EAAQ,IAAU,CACjC,IAAU,EAAY,OAAS,EACjC,EAAO,gBAAgB,QAAQ,CAE/B,EAAO,aAAa,QAAS,GAAG,EAElC,EAGa,IAAI,iBAAkB,GAAc,CACnD,IAAK,IAAM,KAAY,EACrB,GACE,EAAS,OAAS,cAClB,EAAS,gBAAkB,QAC1B,EAAS,OAAuB,UAAU,SAAS,SAAS,CAC7D,CACA,GAAkB,CAClB,QAGJ,CAEO,QAAQ,SAAS,KAAM,CAC9B,QAAS,GACT,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAC1B,CAAC,CA8BJ,SAAS,EAAQ,EAAyC,CAKxD,OAJK,EACD,OAAO,GAAW,SACb,SAAS,eAAe,EAAO,CAEjC,EAJa,KAUtB,SAAgB,EAAK,EAAyB,CACjC,EAAQ,EAAO,EACtB,WAAW,CAMjB,SAAgB,EAAM,EAAyB,CAClC,EAAQ,EAAO,EACtB,OAAO,CAMb,SAAgB,GAAiB,CACf,MAAM,KAAK,SAAS,iBAAgC,sBAAsB,CAAC,CACnF,SAAS,CAAC,QAAS,GAAM,EAAE,OAAO,CAAC,CAM7C,SAAgB,EAAO,EAA4B,CAEjD,OADW,EAAQ,EAAO,EACf,MAAQ,GAMrB,SAAgB,GAA2B,CACzC,OAAO,MAAM,KAAK,SAAS,iBAAgC,sBAAsB,CAAC,CAMpF,SAAgB,GAA+B,CAC7C,IAAMA,EAAO,GAAS,CACtB,OAAOA,EAAKA,EAAK,OAAS,IAAM,KAMlC,SAAgB,EAAO,EAA+B,EAAE,CAAiB,CACvE,GAAM,CAAE,KAAI,UAAU,GAAI,SAAS,GAAM,YAAY,IAAO,EAEtD,EAAS,SAAS,cAAc,SAAS,CAc/C,MAbA,GAAO,UAAY,UAAU,IAAY,MAAM,CAC3C,IAAI,EAAO,GAAK,GAEpB,EAAO,UAAY;MACf,EAAS,oCAAsC,GAAG;kCACtB,EAAQ;IAIxC,EAAO,iBAAiB,QAAU,GAAM,CAClC,EAAE,SAAW,GAAQ,EAAO,OAAO,EACvC,CAEK,EAMT,SAAgB,EAAM,EAAsC,CAE1D,OADA,SAAS,KAAK,YAAY,EAAO,CAC1B,EAMT,SAAgB,EAAQ,EAAyB,CACpC,EAAQ,EAAO,EACtB,QAAQ,CAOd,SAAgB,GAAmB,CACjC,IAAM,EAAW,GAAkB,CACjC,IAAM,EAAS,EAAE,OACb,EAAO,QAAQ,gBAAgB,EAC/B,EAAyB,OAAO,EAKtC,OADA,SAAS,iBAAiB,QAAS,EAAQ,KAC9B,SAAS,oBAAoB,QAAS,EAAQ,CAO7D,SAAgB,EACd,EACA,EACY,CACZ,IAAM,EAAK,EAAQ,EAAO,CAC1B,GAAI,CAAC,EAAI,UAAa,GAEtB,GAAM,CAAE,SAAQ,UAAS,YAAa,EAEhC,MAAoB,KAAW,CAC/B,MAAqB,KAAY,CAGjC,EAAW,IAAI,iBAAkB,GAAc,CACnD,IAAK,IAAM,KAAY,EACjB,EAAS,gBAAkB,QAAU,EAAG,MAC1C,KAAU,EAGd,CAMF,OAJA,EAAG,iBAAiB,QAAS,EAAY,CACzC,EAAG,iBAAiB,SAAU,EAAa,CAC3C,EAAS,QAAQ,EAAI,CAAE,WAAY,GAAM,CAAC,KAE7B,CACX,EAAG,oBAAoB,QAAS,EAAY,CAC5C,EAAG,oBAAoB,SAAU,EAAa,CAC9C,EAAS,YAAY,EAQzB,SAAgB,EAAM,EAAY,CAChC,MAAO,CACL,KACA,UAAW,SACX,QAAU,GAAkB,CACtB,EAAE,SAAW,EAAE,eACf,EAAE,cAAgC,OAAO,EAGhD"}

package/dist/react.cjs

@@ -0,0 +1,2 @@
+require('./react.css');
+let e=require(`react`),t=require(`react/jsx-runtime`);if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}const n=(0,e.createContext)({direction:void 0});function r(){return(0,e.useContext)(n)}function i({children:e,direction:r}){return(0,t.jsx)(n.Provider,{value:{direction:r},children:e})}const a=(0,e.forwardRef)(({children:e,className:n,...i},a)=>{let{direction:o}=r();return(0,t.jsx)(`dialog`,{ref:a,className:`drawer ${n??``}`.trim(),"data-direction":o,onClick:e=>{i.onClick?.(e),e.target===e.currentTarget&&e.currentTarget.close()},...i,children:e})});a.displayName=`Drawer.Content`;const o=(0,e.forwardRef)(({className:e,...n},r)=>(0,t.jsx)(`div`,{ref:r,className:`drawer-handle ${e??``}`.trim(),"aria-hidden":`true`,...n}));o.displayName=`Drawer.Handle`;const s=(0,e.forwardRef)((e,n)=>(0,t.jsx)(`h2`,{ref:n,...e}));s.displayName=`Drawer.Title`;const c=(0,e.forwardRef)((e,n)=>(0,t.jsx)(`p`,{ref:n,...e}));c.displayName=`Drawer.Description`;const l={Root:i,Content:a,Handle:o,Title:s,Description:c};exports.Drawer=l;

package/dist/react.css

@@ -0,0 +1,290 @@
+/* CSS Drawer - Vaul-quality drawer with auto-nesting and directions */
+
+:root {
+  --drawer-bg: #fff;
+  --drawer-radius: 24px;
+  --drawer-max-width: 500px;
+  --drawer-max-height: 96dvh;
+  --drawer-backdrop: hsl(0 0% 0% / 0.4);
+  --drawer-handle: hsl(0 0% 80%);
+  --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.12), 0 -4px 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);
+  --drawer-duration: 0.5s;
+  --drawer-duration-close: 0.35s;
+  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --drawer-bg: hsl(0 0% 12%);
+    --drawer-handle: hsl(0 0% 35%);
+    --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.4), 0 -4px 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.4), 0 4px 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.4), -4px 0 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.4), 4px 0 20px hsl(0 0% 0% / 0.3);
+  }
+}
+
+/* Background scale effect */
+body {
+  transition: scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);
+  transform-origin: center top;
+}
+
+body:has(.drawer[open]) {
+  overflow: hidden;
+  scale: 0.94;
+  border-radius: var(--drawer-radius);
+}
+
+/* Base drawer */
+.drawer {
+  border: none;
+  padding: 0;
+  margin: 0;
+  max-width: 100%;
+  max-height: 100%;
+  position: fixed;
+  background: var(--drawer-bg);
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    display var(--drawer-duration-close) allow-discrete,
+    overlay var(--drawer-duration-close) allow-discrete,
+    translate var(--drawer-duration-close) var(--drawer-ease),
+    scale var(--drawer-duration-close) var(--drawer-ease),
+    filter var(--drawer-duration-close) ease,
+    opacity var(--drawer-duration-close) ease;
+
+  /* Default: bottom */
+  --_translate-closed: 0 100%;
+  inset: auto 0 0 0;
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: auto;
+  max-height: var(--drawer-max-height);
+  border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;
+  box-shadow: var(--drawer-shadow-bottom);
+  translate: var(--_translate-closed);
+}
+
+.drawer::backdrop {
+  background: var(--drawer-backdrop);
+  opacity: 0;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  transition:
+    display var(--drawer-duration-close) allow-discrete,
+    overlay var(--drawer-duration-close) allow-discrete,
+    opacity var(--drawer-duration-close) ease;
+}
+
+.drawer[open] {
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    display var(--drawer-duration) allow-discrete,
+    overlay var(--drawer-duration) allow-discrete,
+    translate var(--drawer-duration) var(--drawer-ease),
+    scale var(--drawer-duration) var(--drawer-ease),
+    filter var(--drawer-duration) ease,
+    opacity 0.15s ease;
+}
+
+.drawer[open]::backdrop {
+  opacity: 1;
+  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity 0.2s ease;
+}
+
+@starting-style {
+  .drawer[open] { opacity: 0; translate: var(--_translate-closed); }
+  .drawer[open]::backdrop { opacity: 0; }
+}
+
+/* ===== DIRECTIONS ===== */
+
+/* Right */
+.drawer[data-direction="right"] {
+  --_translate-closed: 100% 0;
+  inset: 0 0 0 auto;
+  margin: 0;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);
+  box-shadow: var(--drawer-shadow-right);
+}
+
+/* Left */
+.drawer[data-direction="left"] {
+  --_translate-closed: -100% 0;
+  inset: 0 auto 0 0;
+  margin: 0;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
+  box-shadow: var(--drawer-shadow-left);
+}
+
+/* Top */
+.drawer[data-direction="top"] {
+  --_translate-closed: 0 -100%;
+  inset: 0 0 auto 0;
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: auto;
+  max-height: var(--drawer-max-height);
+  border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);
+  box-shadow: var(--drawer-shadow-top);
+}
+
+/* ===== AUTO-NESTING (up to 5 levels) ===== */
+/* Uses sibling combinators to count open drawers */
+
+/* 1+ open drawers after */
+.drawer[open]:has(~ .drawer[open]) {
+  scale: 0.94;
+  translate: 0 -20px;
+  border-radius: var(--drawer-radius);
+  filter: brightness(0.92);
+  pointer-events: none;
+}
+
+/* 2+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open]) {
+  scale: 0.88;
+  translate: 0 -40px;
+  filter: brightness(0.84);
+}
+
+/* 3+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: 0.82;
+  translate: 0 -60px;
+  filter: brightness(0.76);
+}
+
+/* 4+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: 0.76;
+  translate: 0 -80px;
+  filter: brightness(0.68);
+}
+
+/* 5+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: 0.70;
+  translate: 0 -100px;
+  filter: brightness(0.60);
+}
+
+/* Lighter backdrop for stacked drawers */
+.drawer[open] ~ .drawer[open]::backdrop {
+  background: hsl(0 0% 0% / 0.15);
+  backdrop-filter: none;
+}
+
+/* Handle */
+.drawer-handle {
+  display: flex;
+  justify-content: center;
+  padding: 1rem 0 0.5rem;
+  cursor: grab;
+}
+
+.drawer-handle::before {
+  content: '';
+  width: 48px;
+  height: 5px;
+  background: var(--drawer-handle);
+  border-radius: 100px;
+  transition: width 0.2s var(--drawer-ease), height 0.2s var(--drawer-ease), background 0.2s ease;
+}
+
+.drawer-handle:hover::before {
+  width: 56px;
+  background: hsl(0 0% 60%);
+}
+
+/* Vertical handle for left/right drawers */
+.drawer[data-direction="left"] .drawer-handle,
+.drawer[data-direction="right"] .drawer-handle {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  writing-mode: vertical-lr;
+}
+
+.drawer[data-direction="left"] .drawer-handle { right: 0; }
+.drawer[data-direction="right"] .drawer-handle { left: 0; }
+
+.drawer[data-direction="left"] .drawer-handle::before,
+.drawer[data-direction="right"] .drawer-handle::before {
+  width: 5px;
+  height: 48px;
+}
+
+.drawer[data-direction="left"] .drawer-handle:hover::before,
+.drawer[data-direction="right"] .drawer-handle:hover::before {
+  width: 5px;
+  height: 56px;
+}
+
+/* Content */
+.drawer-content {
+  padding: 0.5rem 1.5rem 2rem;
+  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  max-height: calc(var(--drawer-max-height) - 60px);
+}
+
+/* Content adjustments for directions */
+.drawer[data-direction="left"] .drawer-content,
+.drawer[data-direction="right"] .drawer-content {
+  padding: 1.5rem;
+  padding-left: 2.5rem;
+  max-height: 100%;
+  height: 100%;
+}
+
+.drawer[data-direction="top"] .drawer-content {
+  padding-bottom: 1.5rem;
+  padding-top: 0.5rem;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+  }
+
+  body:has(.drawer[open]) {
+    scale: 1;
+  }
+
+  .drawer[open]:has(~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+    scale: 1;
+    translate: 0 0;
+    filter: none;
+  }
+}
+
+
+/*# sourceMappingURL=react.css.map*/

package/dist/react.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.css","names":[],"sources":["../src/drawer.css"],"sourcesContent":["/* CSS Drawer - Vaul-quality drawer with auto-nesting and directions */\n\n:root {\n  --drawer-bg: #fff;\n  --drawer-radius: 24px;\n  --drawer-max-width: 500px;\n  --drawer-max-height: 96dvh;\n  --drawer-backdrop: hsl(0 0% 0% / 0.4);\n  --drawer-handle: hsl(0 0% 80%);\n  --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.12), 0 -4px 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);\n  --drawer-duration: 0.5s;\n  --drawer-duration-close: 0.35s;\n  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --drawer-bg: hsl(0 0% 12%);\n    --drawer-handle: hsl(0 0% 35%);\n    --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.4), 0 -4px 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.4), 0 4px 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.4), -4px 0 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.4), 4px 0 20px hsl(0 0% 0% / 0.3);\n  }\n}\n\n/* Background scale effect */\nbody {\n  transition: scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);\n  transform-origin: center top;\n}\n\nbody:has(.drawer[open]) {\n  overflow: hidden;\n  scale: 0.94;\n  border-radius: var(--drawer-radius);\n}\n\n/* Base drawer */\n.drawer {\n  border: none;\n  padding: 0;\n  margin: 0;\n  max-width: 100%;\n  max-height: 100%;\n  position: fixed;\n  background: var(--drawer-bg);\n  overflow: hidden;\n  opacity: 0;\n  transition:\n    display var(--drawer-duration-close) allow-discrete,\n    overlay var(--drawer-duration-close) allow-discrete,\n    translate var(--drawer-duration-close) var(--drawer-ease),\n    scale var(--drawer-duration-close) var(--drawer-ease),\n    filter var(--drawer-duration-close) ease,\n    opacity var(--drawer-duration-close) ease;\n\n  /* Default: bottom */\n  --_translate-closed: 0 100%;\n  inset: auto 0 0 0;\n  margin-inline: auto;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: auto;\n  max-height: var(--drawer-max-height);\n  border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;\n  box-shadow: var(--drawer-shadow-bottom);\n  translate: var(--_translate-closed);\n}\n\n.drawer::backdrop {\n  background: var(--drawer-backdrop);\n  opacity: 0;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  transition:\n    display var(--drawer-duration-close) allow-discrete,\n    overlay var(--drawer-duration-close) allow-discrete,\n    opacity var(--drawer-duration-close) ease;\n}\n\n.drawer[open] {\n  opacity: 1;\n  translate: 0 0;\n  transition:\n    display var(--drawer-duration) allow-discrete,\n    overlay var(--drawer-duration) allow-discrete,\n    translate var(--drawer-duration) var(--drawer-ease),\n    scale var(--drawer-duration) var(--drawer-ease),\n    filter var(--drawer-duration) ease,\n    opacity 0.15s ease;\n}\n\n.drawer[open]::backdrop {\n  opacity: 1;\n  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity 0.2s ease;\n}\n\n@starting-style {\n  .drawer[open] { opacity: 0; translate: var(--_translate-closed); }\n  .drawer[open]::backdrop { opacity: 0; }\n}\n\n/* ===== DIRECTIONS ===== */\n\n/* Right */\n.drawer[data-direction=\"right\"] {\n  --_translate-closed: 100% 0;\n  inset: 0 0 0 auto;\n  margin: 0;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: 100dvh;\n  max-height: 100dvh;\n  border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);\n  box-shadow: var(--drawer-shadow-right);\n}\n\n/* Left */\n.drawer[data-direction=\"left\"] {\n  --_translate-closed: -100% 0;\n  inset: 0 auto 0 0;\n  margin: 0;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: 100dvh;\n  max-height: 100dvh;\n  border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;\n  box-shadow: var(--drawer-shadow-left);\n}\n\n/* Top */\n.drawer[data-direction=\"top\"] {\n  --_translate-closed: 0 -100%;\n  inset: 0 0 auto 0;\n  margin-inline: auto;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: auto;\n  max-height: var(--drawer-max-height);\n  border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);\n  box-shadow: var(--drawer-shadow-top);\n}\n\n/* ===== AUTO-NESTING (up to 5 levels) ===== */\n/* Uses sibling combinators to count open drawers */\n\n/* 1+ open drawers after */\n.drawer[open]:has(~ .drawer[open]) {\n  scale: 0.94;\n  translate: 0 -20px;\n  border-radius: var(--drawer-radius);\n  filter: brightness(0.92);\n  pointer-events: none;\n}\n\n/* 2+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open]) {\n  scale: 0.88;\n  translate: 0 -40px;\n  filter: brightness(0.84);\n}\n\n/* 3+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: 0.82;\n  translate: 0 -60px;\n  filter: brightness(0.76);\n}\n\n/* 4+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: 0.76;\n  translate: 0 -80px;\n  filter: brightness(0.68);\n}\n\n/* 5+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: 0.70;\n  translate: 0 -100px;\n  filter: brightness(0.60);\n}\n\n/* Lighter backdrop for stacked drawers */\n.drawer[open] ~ .drawer[open]::backdrop {\n  background: hsl(0 0% 0% / 0.15);\n  backdrop-filter: none;\n}\n\n/* Handle */\n.drawer-handle {\n  display: flex;\n  justify-content: center;\n  padding: 1rem 0 0.5rem;\n  cursor: grab;\n}\n\n.drawer-handle::before {\n  content: '';\n  width: 48px;\n  height: 5px;\n  background: var(--drawer-handle);\n  border-radius: 100px;\n  transition: width 0.2s var(--drawer-ease), height 0.2s var(--drawer-ease), background 0.2s ease;\n}\n\n.drawer-handle:hover::before {\n  width: 56px;\n  background: hsl(0 0% 60%);\n}\n\n/* Vertical handle for left/right drawers */\n.drawer[data-direction=\"left\"] .drawer-handle,\n.drawer[data-direction=\"right\"] .drawer-handle {\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1rem 0.5rem 0.5rem;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  writing-mode: vertical-lr;\n}\n\n.drawer[data-direction=\"left\"] .drawer-handle { right: 0; }\n.drawer[data-direction=\"right\"] .drawer-handle { left: 0; }\n\n.drawer[data-direction=\"left\"] .drawer-handle::before,\n.drawer[data-direction=\"right\"] .drawer-handle::before {\n  width: 5px;\n  height: 48px;\n}\n\n.drawer[data-direction=\"left\"] .drawer-handle:hover::before,\n.drawer[data-direction=\"right\"] .drawer-handle:hover::before {\n  width: 5px;\n  height: 56px;\n}\n\n/* Content */\n.drawer-content {\n  padding: 0.5rem 1.5rem 2rem;\n  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  max-height: calc(var(--drawer-max-height) - 60px);\n}\n\n/* Content adjustments for directions */\n.drawer[data-direction=\"left\"] .drawer-content,\n.drawer[data-direction=\"right\"] .drawer-content {\n  padding: 1.5rem;\n  padding-left: 2.5rem;\n  max-height: 100%;\n  height: 100%;\n}\n\n.drawer[data-direction=\"top\"] .drawer-content {\n  padding-bottom: 1.5rem;\n  padding-top: 0.5rem;\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    transition-duration: 0.01ms !important;\n  }\n\n  body:has(.drawer[open]) {\n    scale: 1;\n  }\n\n  .drawer[open]:has(~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n    scale: 1;\n    translate: 0 0;\n    filter: none;\n  }\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/react.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react0 from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#region src/react.d.ts
+type Direction = 'bottom' | 'top' | 'left' | 'right';
+interface RootProps {
+  children: ReactNode;
+  /** Direction the drawer opens from */
+  direction?: Direction;
+}
+declare function Root({
+  children,
+  direction
+}: RootProps): react_jsx_runtime0.JSX.Element;
+interface ContentProps extends Omit<ComponentPropsWithoutRef<'dialog'>, 'open'> {}
+interface HandleProps extends ComponentPropsWithoutRef<'div'> {}
+interface TitleProps extends ComponentPropsWithoutRef<'h2'> {}
+interface DescriptionProps extends ComponentPropsWithoutRef<'p'> {}
+declare const Drawer: {
+  Root: typeof Root;
+  Content: react0.ForwardRefExoticComponent<ContentProps & react0.RefAttributes<HTMLDialogElement>>;
+  Handle: react0.ForwardRefExoticComponent<HandleProps & react0.RefAttributes<HTMLDivElement>>;
+  Title: react0.ForwardRefExoticComponent<TitleProps & react0.RefAttributes<HTMLHeadingElement>>;
+  Description: react0.ForwardRefExoticComponent<DescriptionProps & react0.RefAttributes<HTMLParagraphElement>>;
+};
+//#endregion
+export { Drawer, type ContentProps as DrawerContentProps, type DescriptionProps as DrawerDescriptionProps, type Direction as DrawerDirection, type HandleProps as DrawerHandleProps, type RootProps as DrawerRootProps, type TitleProps as DrawerTitleProps };
+//# sourceMappingURL=react.d.cts.map

package/dist/react.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.cts","names":[],"sources":["../src/react.tsx"],"sourcesContent":[],"mappings":";;;;;KA8CK,SAAA;UAcK,SAAA;YACE;EAfP;EAcK,SAAA,CAAA,EAGI,SAHK;AAGI;iBAGd,IAAA,CAAO;EAAA,QAAA;EAAA;AAAA,CAAA,EAAuB,SAAvB,CAAA,EAAgC,kBAAA,CAAA,GAAA,CAAA,OAAhC;UASN,YAAA,SAAqB,IATL,CASU,wBATV,CAAA,QAAA,CAAA,EAAA,MAAA,CAAA,CAAA;UAqChB,WAAA,SAAoB,wBArCkB,CAAA,KAAA,CAAA,CAAA;AAAA,UAkDtC,UAAA,SAAmB,wBAzCO,CAAA,IAAL,CAAA,CAAA,CAAI;AA4BmB,UAqB5C,gBAAA,SAAyB,wBARkB,CAAA,GAAA,CAAA,CAAA,CAAA;AAgBxC,cAAA,MAMZ,EAAA"}

package/dist/react.d.mts

@@ -0,0 +1,29 @@
+import * as react0 from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react.d.ts
+type Direction = 'bottom' | 'top' | 'left' | 'right';
+interface RootProps {
+  children: ReactNode;
+  /** Direction the drawer opens from */
+  direction?: Direction;
+}
+declare function Root({
+  children,
+  direction
+}: RootProps): react_jsx_runtime0.JSX.Element;
+interface ContentProps extends Omit<ComponentPropsWithoutRef<'dialog'>, 'open'> {}
+interface HandleProps extends ComponentPropsWithoutRef<'div'> {}
+interface TitleProps extends ComponentPropsWithoutRef<'h2'> {}
+interface DescriptionProps extends ComponentPropsWithoutRef<'p'> {}
+declare const Drawer: {
+  Root: typeof Root;
+  Content: react0.ForwardRefExoticComponent<ContentProps & react0.RefAttributes<HTMLDialogElement>>;
+  Handle: react0.ForwardRefExoticComponent<HandleProps & react0.RefAttributes<HTMLDivElement>>;
+  Title: react0.ForwardRefExoticComponent<TitleProps & react0.RefAttributes<HTMLHeadingElement>>;
+  Description: react0.ForwardRefExoticComponent<DescriptionProps & react0.RefAttributes<HTMLParagraphElement>>;
+};
+//#endregion
+export { Drawer, type ContentProps as DrawerContentProps, type DescriptionProps as DrawerDescriptionProps, type Direction as DrawerDirection, type HandleProps as DrawerHandleProps, type RootProps as DrawerRootProps, type TitleProps as DrawerTitleProps };
+//# sourceMappingURL=react.d.mts.map

package/dist/react.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.mts","names":[],"sources":["../src/react.tsx"],"sourcesContent":[],"mappings":";;;;;KA8CK,SAAA;UAcK,SAAA;YACE;EAfP;EAcK,SAAA,CAAA,EAGI,SAHK;AAGI;iBAGd,IAAA,CAAO;EAAA,QAAA;EAAA;AAAA,CAAA,EAAuB,SAAvB,CAAA,EAAgC,kBAAA,CAAA,GAAA,CAAA,OAAhC;UASN,YAAA,SAAqB,IATL,CASU,wBATV,CAAA,QAAA,CAAA,EAAA,MAAA,CAAA,CAAA;UAqChB,WAAA,SAAoB,wBArCkB,CAAA,KAAA,CAAA,CAAA;AAAA,UAkDtC,UAAA,SAAmB,wBAzCO,CAAA,IAAL,CAAA,CAAA,CAAI;AA4BmB,UAqB5C,gBAAA,SAAyB,wBARkB,CAAA,GAAA,CAAA,CAAA,CAAA;AAgBxC,cAAA,MAMZ,EAAA"}

package/dist/react.mjs

@@ -0,0 +1,3 @@
+import{createContext as e,forwardRef as t,useContext as n}from"react";import{jsx as r}from"react/jsx-runtime";import './react.css';
+if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}const i=e({direction:void 0});function a(){return n(i)}function o({children:e,direction:t}){return r(i.Provider,{value:{direction:t},children:e})}const s=t(({children:e,className:t,...n},i)=>{let{direction:o}=a();return r(`dialog`,{ref:i,className:`drawer ${t??``}`.trim(),"data-direction":o,onClick:e=>{n.onClick?.(e),e.target===e.currentTarget&&e.currentTarget.close()},...n,children:e})});s.displayName=`Drawer.Content`;const c=t(({className:e,...t},n)=>r(`div`,{ref:n,className:`drawer-handle ${e??``}`.trim(),"aria-hidden":`true`,...t}));c.displayName=`Drawer.Handle`;const l=t((e,t)=>r(`h2`,{ref:t,...e}));l.displayName=`Drawer.Title`;const u=t((e,t)=>r(`p`,{ref:t,...e}));u.displayName=`Drawer.Description`;const d={Root:o,Content:s,Handle:c,Title:l,Description:u};export{d as Drawer};
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","names":[],"sources":["../src/react.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  forwardRef,\n  type ReactNode,\n  type ComponentPropsWithoutRef,\n} from 'react'\nimport './drawer.css'\n\n/* ===== Auto-enable accessibility for stacked drawers ===== */\nif (typeof window !== 'undefined') {\n  const updateInertState = () => {\n    const openDrawers = Array.from(\n      document.querySelectorAll<HTMLDialogElement>('dialog.drawer[open]')\n    )\n    openDrawers.forEach((drawer, index) => {\n      const isTopmost = index === openDrawers.length - 1\n      if (isTopmost) {\n        drawer.removeAttribute('inert')\n      } else {\n        drawer.setAttribute('inert', '')\n      }\n    })\n  }\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (\n        mutation.type === 'attributes' &&\n        mutation.attributeName === 'open' &&\n        (mutation.target as HTMLElement).classList.contains('drawer')\n      ) {\n        updateInertState()\n        break\n      }\n    }\n  })\n\n  observer.observe(document.body, {\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['open'],\n  })\n}\n\n/* ===== Types ===== */\ntype Direction = 'bottom' | 'top' | 'left' | 'right'\n\ninterface DrawerContextValue {\n  direction?: Direction\n}\n\n/* ===== Context ===== */\nconst DrawerContext = createContext<DrawerContextValue>({ direction: undefined })\n\nfunction useDrawerContext() {\n  return useContext(DrawerContext)\n}\n\n/* ===== Root ===== */\ninterface RootProps {\n  children: ReactNode\n  /** Direction the drawer opens from */\n  direction?: Direction\n}\n\nfunction Root({ children, direction }: RootProps) {\n  return (\n    <DrawerContext.Provider value={{ direction }}>\n      {children}\n    </DrawerContext.Provider>\n  )\n}\n\n/* ===== Content ===== */\ninterface ContentProps extends Omit<ComponentPropsWithoutRef<'dialog'>, 'open'> {}\n\nconst Content = forwardRef<HTMLDialogElement, ContentProps>(\n  ({ children, className, ...props }, ref) => {\n    const { direction } = useDrawerContext()\n\n    return (\n      <dialog\n        ref={ref}\n        className={`drawer ${className ?? ''}`.trim()}\n        data-direction={direction}\n        onClick={(e) => {\n          props.onClick?.(e)\n          // Backdrop click - only if clicking the dialog element itself\n          if (e.target === e.currentTarget) {\n            e.currentTarget.close()\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </dialog>\n    )\n  }\n)\nContent.displayName = 'Drawer.Content'\n\n/* ===== Handle ===== */\ninterface HandleProps extends ComponentPropsWithoutRef<'div'> {}\n\nconst Handle = forwardRef<HTMLDivElement, HandleProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={`drawer-handle ${className ?? ''}`.trim()}\n    aria-hidden=\"true\"\n    {...props}\n  />\n))\nHandle.displayName = 'Drawer.Handle'\n\n/* ===== Title ===== */\ninterface TitleProps extends ComponentPropsWithoutRef<'h2'> {}\n\nconst Title = forwardRef<HTMLHeadingElement, TitleProps>((props, ref) => (\n  <h2 ref={ref} {...props} />\n))\nTitle.displayName = 'Drawer.Title'\n\n/* ===== Description ===== */\ninterface DescriptionProps extends ComponentPropsWithoutRef<'p'> {}\n\nconst Description = forwardRef<HTMLParagraphElement, DescriptionProps>((props, ref) => (\n  <p ref={ref} {...props} />\n))\nDescription.displayName = 'Drawer.Description'\n\n/* ===== Namespace Export ===== */\nexport const Drawer = {\n  Root,\n  Content,\n  Handle,\n  Title,\n  Description,\n}\n\nexport type {\n  RootProps as DrawerRootProps,\n  ContentProps as DrawerContentProps,\n  HandleProps as DrawerHandleProps,\n  TitleProps as DrawerTitleProps,\n  DescriptionProps as DrawerDescriptionProps,\n  Direction as DrawerDirection,\n}\n"],"mappings":"8GAUA,GAAI,OAAO,OAAW,IAAa,CACjC,IAAM,MAAyB,CAC7B,IAAM,EAAc,MAAM,KACxB,SAAS,iBAAoC,sBAAsB,CACpE,CACD,EAAY,SAAS,EAAQ,IAAU,CACnB,IAAU,EAAY,OAAS,EAE/C,EAAO,gBAAgB,QAAQ,CAE/B,EAAO,aAAa,QAAS,GAAG,EAElC,EAGa,IAAI,iBAAkB,GAAc,CACnD,IAAK,IAAM,KAAY,EACrB,GACE,EAAS,OAAS,cAClB,EAAS,gBAAkB,QAC1B,EAAS,OAAuB,UAAU,SAAS,SAAS,CAC7D,CACA,GAAkB,CAClB,QAGJ,CAEO,QAAQ,SAAS,KAAM,CAC9B,QAAS,GACT,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAC1B,CAAC,CAWJ,MAAM,EAAgB,EAAkC,CAAE,UAAW,IAAA,GAAW,CAAC,CAEjF,SAAS,GAAmB,CAC1B,OAAO,EAAW,EAAc,CAUlC,SAAS,EAAK,CAAE,WAAU,aAAwB,CAChD,OACE,EAAC,EAAc,SAAA,CAAS,MAAO,CAAE,YAAW,CACzC,YACsB,CAO7B,MAAM,EAAU,GACb,CAAE,WAAU,YAAW,GAAG,GAAS,IAAQ,CAC1C,GAAM,CAAE,aAAc,GAAkB,CAExC,OACE,EAAC,SAAA,CACM,MACL,UAAW,UAAU,GAAa,KAAK,MAAM,CAC7C,iBAAgB,EAChB,QAAU,GAAM,CACd,EAAM,UAAU,EAAE,CAEd,EAAE,SAAW,EAAE,eACjB,EAAE,cAAc,OAAO,EAG3B,GAAI,EAEH,YACM,EAGd,CACD,EAAQ,YAAc,iBAKtB,MAAM,EAAS,GAAyC,CAAE,YAAW,GAAG,GAAS,IAC/E,EAAC,MAAA,CACM,MACL,UAAW,iBAAiB,GAAa,KAAK,MAAM,CACpD,cAAY,OACZ,GAAI,GACJ,CACF,CACF,EAAO,YAAc,gBAKrB,MAAM,EAAQ,GAA4C,EAAO,IAC/D,EAAC,KAAA,CAAQ,MAAK,GAAI,GAAS,CAC3B,CACF,EAAM,YAAc,eAKpB,MAAM,EAAc,GAAoD,EAAO,IAC7E,EAAC,IAAA,CAAO,MAAK,GAAI,GAAS,CAC1B,CACF,EAAY,YAAc,qBAG1B,MAAa,EAAS,CACpB,OACA,UACA,SACA,QACA,cACD"}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "css-drawer",
+  "version": "0.1.0",
+  "description": "Vaul-quality drawer component using native <dialog> and pure CSS animations",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.mts",
+        "default": "./dist/react.mjs"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./styles": "./dist/react.css",
+    "./drawer.css": "./dist/react.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "react": "^19.1.0",
+    "tsdown": "^0.18.2",
+    "typescript": "^5.7.2"
+  },
+  "keywords": [
+    "drawer",
+    "bottom-sheet",
+    "dialog",
+    "modal",
+    "css",
+    "headless",
+    "vaul",
+    "react"
+  ],
+  "license": "MIT",
+  "author": "Saransh Chaudhary",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tark-ai/css-drawer.git"
+  },
+  "homepage": "https://github.com/tark-ai/css-drawer#readme",
+  "bugs": {
+    "url": "https://github.com/tark-ai/css-drawer/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css",
+    "./dist/index.mjs",
+    "./dist/index.cjs",
+    "./dist/react.mjs",
+    "./dist/react.cjs"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch"
+  }
+}