@vertz/ui-primitives 0.2.0 → 0.2.2

package/dist/index.js

@@ -222,8 +222,261 @@ var Accordion = {
     return { root, state, Item };
   }
 };
-// src/button/button.ts
+// src/alert-dialog/alert-dialog.tsx
+import { __element, __on } from "@vertz/ui/internals";
 import { signal as signal2 } from "@vertz/ui";
+
+// src/utils/focus.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  "[contenteditable]"
+].join(", ");
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function trapFocus(container) {
+  function handleKeyDown(event) {
+    if (event.key !== "Tab")
+      return;
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0)
+      return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (!first || !last)
+      return;
+    if (event.shiftKey) {
+      if (document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+  container.addEventListener("keydown", handleKeyDown);
+  return () => {
+    container.removeEventListener("keydown", handleKeyDown);
+  };
+}
+function focusFirst(container) {
+  const focusable = getFocusableElements(container);
+  if (focusable.length > 0) {
+    focusable[0]?.focus();
+  }
+}
+function saveFocus() {
+  const previously = document.activeElement;
+  return () => {
+    if (previously && typeof previously.focus === "function") {
+      previously.focus();
+    }
+  };
+}
+function setRovingTabindex(items, activeIndex) {
+  for (let i = 0;i < items.length; i++) {
+    items[i]?.setAttribute("tabindex", i === activeIndex ? "0" : "-1");
+  }
+}
+
+// src/alert-dialog/alert-dialog.tsx
+function AlertDialogRoot(options = {}) {
+  const { defaultOpen = false, onOpenChange, onAction } = options;
+  const ids = linkedIds("alertdialog");
+  const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
+  const state = { open: signal2(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function show() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(overlay, false);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(overlay, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+    onOpenChange?.(true);
+  }
+  function hide() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(overlay, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(overlay, true);
+    setHiddenAnimated(content, true);
+    removeTrap?.();
+    removeTrap = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  const trigger = (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    {
+      const __v = ids.triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "true" : "false";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      if (!state.open.peek())
+        show();
+    });
+    return __el0;
+  })();
+  const overlay = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("data-alertdialog-overlay", "");
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("style", __v === true ? "" : __v);
+    }
+    return __el1;
+  })();
+  const content = (() => {
+    const __el2 = __element("div");
+    __el2.setAttribute("role", "alertdialog");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el2.setAttribute("aria-modal", "true");
+    {
+      const __v = titleId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-labelledby", __v === true ? "" : __v);
+    }
+    {
+      const __v = descriptionId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-describedby", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("style", __v === true ? "" : __v);
+    }
+    return __el2;
+  })();
+  const title = (() => {
+    const __el3 = __element("h2");
+    {
+      const __v = titleId;
+      if (__v != null && __v !== false)
+        __el3.setAttribute("id", __v === true ? "" : __v);
+    }
+    return __el3;
+  })();
+  const description = (() => {
+    const __el4 = __element("p");
+    {
+      const __v = descriptionId;
+      if (__v != null && __v !== false)
+        __el4.setAttribute("id", __v === true ? "" : __v);
+    }
+    return __el4;
+  })();
+  const cancel = (() => {
+    const __el5 = __element("button");
+    __el5.setAttribute("type", "button");
+    __on(__el5, "click", () => hide());
+    return __el5;
+  })();
+  const action = (() => {
+    const __el6 = __element("button");
+    __el6.setAttribute("type", "button");
+    __on(__el6, "click", () => {
+      onAction?.();
+      hide();
+    });
+    return __el6;
+  })();
+  if (defaultOpen) {
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+  }
+  return { trigger, overlay, content, title, description, cancel, action, state, show, hide };
+}
+var AlertDialog = {
+  Root: AlertDialogRoot
+};
+// src/badge/badge.tsx
+import { __element as __element2 } from "@vertz/ui/internals";
+function BadgeRoot(options = {}) {
+  const { variant = "default" } = options;
+  const badge = (() => {
+    const __el0 = __element2("span");
+    {
+      const __v = uniqueId("badge");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el0.setAttribute("data-slot", "badge");
+    {
+      const __v = variant;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-variant", __v === true ? "" : __v);
+    }
+    return __el0;
+  })();
+  return { badge };
+}
+var Badge = {
+  Root: BadgeRoot
+};
+// src/button/button.ts
+import { signal as signal3 } from "@vertz/ui";
 function createButtonRoot(state, options) {
   const el = document.createElement("button");
   el.setAttribute("type", "button");
@@ -256,15 +509,15 @@ function createButtonRoot(state, options) {
 var Button = {
   Root(options = {}) {
     const state = {
-      disabled: signal2(options.disabled ?? false),
-      pressed: signal2(false)
+      disabled: signal3(options.disabled ?? false),
+      pressed: signal3(false)
     };
     const root = createButtonRoot(state, options);
     return { root, state };
   }
 };
 // src/calendar/calendar.ts
-import { signal as signal3 } from "@vertz/ui";
+import { signal as signal4 } from "@vertz/ui";
 var MONTH_NAMES = [
   "January",
   "February",
@@ -303,9 +556,9 @@ var Calendar = {
     const weekStartsOn = options.weekStartsOn ?? 0;
     const mode = options.mode ?? "single";
     const state = {
-      value: signal3(options.defaultValue ?? null),
-      focusedDate: signal3(defaultMonth),
-      displayMonth: signal3(defaultMonth)
+      value: signal4(options.defaultValue ?? null),
+      focusedDate: signal4(defaultMonth),
+      displayMonth: signal4(defaultMonth)
     };
     const root = document.createElement("div");
     const header = document.createElement("div");
@@ -529,13 +782,13 @@ var Calendar = {
   }
 };
 // src/carousel/carousel.ts
-import { signal as signal4 } from "@vertz/ui";
+import { signal as signal5 } from "@vertz/ui";
 var Carousel = {
   Root(options = {}) {
     const { orientation = "horizontal", loop = false, defaultIndex = 0, onSlideChange } = options;
     const state = {
-      currentIndex: signal4(defaultIndex),
-      slideCount: signal4(0)
+      currentIndex: signal5(defaultIndex),
+      slideCount: signal5(0)
     };
     const slides = [];
     const root = document.createElement("div");
@@ -619,7 +872,7 @@ var Carousel = {
   }
 };
 // src/checkbox/checkbox.ts
-import { signal as signal5 } from "@vertz/ui";
+import { signal as signal6 } from "@vertz/ui";
 function dataStateFor(checked) {
   if (checked === "mixed")
     return "indeterminate";
@@ -629,8 +882,8 @@ var Checkbox = {
   Root(options = {}) {
     const { defaultChecked = false, disabled = false, onCheckedChange } = options;
     const state = {
-      checked: signal5(defaultChecked),
-      disabled: signal5(disabled)
+      checked: signal6(defaultChecked),
+      disabled: signal6(disabled)
     };
     const root = document.createElement("button");
     root.setAttribute("type", "button");
@@ -663,14 +916,14 @@ var Checkbox = {
   }
 };
 // src/collapsible/collapsible.ts
-import { signal as signal6 } from "@vertz/ui";
+import { signal as signal7 } from "@vertz/ui";
 var Collapsible = {
   Root(options = {}) {
     const { defaultOpen = false, disabled = false, onOpenChange } = options;
     const ids = linkedIds("collapsible");
     const state = {
-      open: signal6(defaultOpen),
-      disabled: signal6(disabled)
+      open: signal7(defaultOpen),
+      disabled: signal7(disabled)
     };
     const root = document.createElement("div");
     const trigger = document.createElement("button");
@@ -712,16 +965,16 @@ var Collapsible = {
   }
 };
 // src/combobox/combobox.ts
-import { signal as signal7 } from "@vertz/ui";
+import { signal as signal8 } from "@vertz/ui";
 var Combobox = {
   Root(options = {}) {
     const { defaultValue = "", onValueChange, onInputChange } = options;
     const ids = linkedIds("combobox");
     const state = {
-      open: signal7(false),
-      value: signal7(defaultValue),
-      inputValue: signal7(defaultValue),
-      activeIndex: signal7(-1)
+      open: signal8(false),
+      value: signal8(defaultValue),
+      inputValue: signal8(defaultValue),
+      activeIndex: signal8(-1)
     };
     const optionElements = [];
     const input = document.createElement("input");
@@ -843,14 +1096,14 @@ var Combobox = {
   }
 };
 // src/command/command.ts
-import { signal as signal8 } from "@vertz/ui";
+import { signal as signal9 } from "@vertz/ui";
 var Command = {
   Root(options = {}) {
     const { filter: customFilter, onSelect, onInputChange, placeholder } = options;
     const listId = uniqueId("command-list");
     const state = {
-      inputValue: signal8(""),
-      activeIndex: signal8(0)
+      inputValue: signal9(""),
+      activeIndex: signal9(0)
     };
     const allItems = [];
     const groups = new Map;
@@ -1005,7 +1258,7 @@ var Command = {
   }
 };
 // src/context-menu/context-menu.ts
-import { signal as signal9 } from "@vertz/ui";
+import { signal as signal10 } from "@vertz/ui";
 
 // src/utils/dismiss.ts
 function createDismiss(options) {
@@ -1120,8 +1373,8 @@ var ContextMenu = {
   Root(options = {}) {
     const { onSelect, positioning } = options;
     const state = {
-      open: signal9(false),
-      activeIndex: signal9(-1)
+      open: signal10(false),
+      activeIndex: signal10(-1)
     };
     const items = [];
     let floatingCleanup = null;
@@ -1271,78 +1524,15 @@ var ContextMenu = {
   }
 };
 // src/date-picker/date-picker.ts
-import { signal as signal11 } from "@vertz/ui";
-
-// src/popover/popover.ts
-import { signal as signal10 } from "@vertz/ui";
-
-// src/utils/focus.ts
-var FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  '[tabindex]:not([tabindex="-1"])',
-  "[contenteditable]"
-].join(", ");
-function getFocusableElements(container) {
-  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
-}
-function trapFocus(container) {
-  function handleKeyDown(event) {
-    if (event.key !== "Tab")
-      return;
-    const focusable = getFocusableElements(container);
-    if (focusable.length === 0)
-      return;
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (!first || !last)
-      return;
-    if (event.shiftKey) {
-      if (document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-      }
-    } else {
-      if (document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    }
-  }
-  container.addEventListener("keydown", handleKeyDown);
-  return () => {
-    container.removeEventListener("keydown", handleKeyDown);
-  };
-}
-function focusFirst(container) {
-  const focusable = getFocusableElements(container);
-  if (focusable.length > 0) {
-    focusable[0]?.focus();
-  }
-}
-function saveFocus() {
-  const previously = document.activeElement;
-  return () => {
-    if (previously && typeof previously.focus === "function") {
-      previously.focus();
-    }
-  };
-}
-function setRovingTabindex(items, activeIndex) {
-  for (let i = 0;i < items.length; i++) {
-    items[i]?.setAttribute("tabindex", i === activeIndex ? "0" : "-1");
-  }
-}
+import { signal as signal12 } from "@vertz/ui";
 
 // src/popover/popover.ts
+import { signal as signal11 } from "@vertz/ui";
 var Popover = {
   Root(options = {}) {
     const { defaultOpen = false, onOpenChange, positioning } = options;
     const ids = linkedIds("popover");
-    const state = { open: signal10(defaultOpen) };
+    const state = { open: signal11(defaultOpen) };
     let restoreFocus = null;
     let floatingCleanup = null;
     let dismissCleanup = null;
@@ -1463,8 +1653,8 @@ var DatePicker = {
     });
     popover.content.appendChild(calendarResult.root);
     const state = {
-      open: signal11(false),
-      value: signal11(defaultValue),
+      open: signal12(false),
+      value: signal12(defaultValue),
       displayMonth: calendarResult.state.displayMonth
     };
     function updateTriggerText() {
@@ -1507,13 +1697,13 @@ var DatePicker = {
   }
 };
 // src/dialog/dialog.ts
-import { signal as signal12 } from "@vertz/ui";
+import { signal as signal13 } from "@vertz/ui";
 var Dialog = {
   Root(options = {}) {
     const { modal = true, defaultOpen = false, onOpenChange } = options;
     const ids = linkedIds("dialog");
     const titleId = `${ids.contentId}-title`;
-    const state = { open: signal12(defaultOpen) };
+    const state = { open: signal13(defaultOpen) };
     let restoreFocus = null;
     let removeTrap = null;
     const trigger = document.createElement("button");
@@ -1593,14 +1783,14 @@ var Dialog = {
   }
 };
 // src/menu/menu.ts
-import { signal as signal13 } from "@vertz/ui";
+import { signal as signal14 } from "@vertz/ui";
 var Menu = {
   Root(options = {}) {
     const { onSelect, positioning } = options;
     const ids = linkedIds("menu");
     const state = {
-      open: signal13(false),
-      activeIndex: signal13(-1)
+      open: signal14(false),
+      activeIndex: signal14(-1)
     };
     const items = [];
     let floatingCleanup = null;
@@ -1800,12 +1990,12 @@ var DropdownMenu = {
   }
 };
 // src/hover-card/hover-card.ts
-import { signal as signal14 } from "@vertz/ui";
+import { signal as signal15 } from "@vertz/ui";
 var HoverCard = {
   Root(options = {}) {
     const { openDelay = 700, closeDelay = 300, onOpenChange, positioning } = options;
     const contentId = uniqueId("hovercard");
-    const state = { open: signal14(false) };
+    const state = { open: signal15(false) };
     let openTimeout = null;
     let closeTimeout = null;
     let floatingCleanup = null;
@@ -1932,11 +2122,11 @@ var HoverCard = {
   }
 };
 // src/menubar/menubar.ts
-import { signal as signal15 } from "@vertz/ui";
+import { signal as signal16 } from "@vertz/ui";
 var Menubar = {
   Root(options = {}) {
     const { onSelect, positioning } = options;
-    const state = { activeMenu: signal15(null) };
+    const state = { activeMenu: signal16(null) };
     const triggers = [];
     const menus = new Map;
     let floatingCleanup = null;
@@ -2141,11 +2331,11 @@ var Menubar = {
   }
 };
 // src/navigation-menu/navigation-menu.ts
-import { signal as signal16 } from "@vertz/ui";
+import { signal as signal17 } from "@vertz/ui";
 var NavigationMenu = {
   Root(options = {}) {
     const { orientation = "horizontal", delayOpen = 200, delayClose = 300 } = options;
-    const state = { activeItem: signal16(null) };
+    const state = { activeItem: signal17(null) };
     const triggers = [];
     const items = new Map;
     let openTimeout = null;
@@ -2289,11 +2479,11 @@ var NavigationMenu = {
   }
 };
 // src/progress/progress.ts
-import { signal as signal17 } from "@vertz/ui";
+import { signal as signal18 } from "@vertz/ui";
 var Progress = {
   Root(options = {}) {
     const { defaultValue = 0, min = 0, max = 100 } = options;
-    const state = { value: signal17(defaultValue) };
+    const state = { value: signal18(defaultValue) };
     const root = document.createElement("div");
     root.setAttribute("role", "progressbar");
     root.id = uniqueId("progress");
@@ -2328,11 +2518,11 @@ var Progress = {
   }
 };
 // src/radio/radio.ts
-import { signal as signal18 } from "@vertz/ui";
+import { signal as signal19 } from "@vertz/ui";
 var Radio = {
   Root(options = {}) {
     const { defaultValue = "", onValueChange } = options;
-    const state = { value: signal18(defaultValue) };
+    const state = { value: signal19(defaultValue) };
     const items = [];
     const itemValues = [];
     const root = document.createElement("div");
@@ -2385,11 +2575,11 @@ var Radio = {
   }
 };
 // src/resizable-panel/resizable-panel.ts
-import { signal as signal19 } from "@vertz/ui";
+import { signal as signal20 } from "@vertz/ui";
 var ResizablePanel = {
   Root(options = {}) {
     const { orientation = "horizontal", onResize } = options;
-    const state = { sizes: signal19([]) };
+    const state = { sizes: signal20([]) };
     const panels = [];
     const handles = [];
     const root = document.createElement("div");
@@ -2523,13 +2713,13 @@ var ResizablePanel = {
   }
 };
 // src/scroll-area/scroll-area.ts
-import { signal as signal20 } from "@vertz/ui";
+import { signal as signal21 } from "@vertz/ui";
 var ScrollArea = {
   Root(options = {}) {
     const { orientation = "vertical" } = options;
     const state = {
-      scrollTop: signal20(0),
-      scrollLeft: signal20(0)
+      scrollTop: signal21(0),
+      scrollLeft: signal21(0)
     };
     const root = document.createElement("div");
     root.style.position = "relative";
@@ -2640,15 +2830,15 @@ var ScrollArea = {
   }
 };
 // src/select/select.ts
-import { signal as signal21 } from "@vertz/ui";
+import { signal as signal22 } from "@vertz/ui";
 var Select = {
   Root(options = {}) {
     const { defaultValue = "", placeholder = "", onValueChange, positioning } = options;
     const ids = linkedIds("select");
     const state = {
-      open: signal21(false),
-      value: signal21(defaultValue),
-      activeIndex: signal21(-1)
+      open: signal22(false),
+      value: signal22(defaultValue),
+      activeIndex: signal22(-1)
     };
     const items = [];
     let floatingCleanup = null;
@@ -2840,8 +3030,162 @@ var Select = {
     return { trigger, content, state, Item, Group, Separator };
   }
 };
+// src/sheet/sheet.tsx
+import { __element as __element3, __on as __on2 } from "@vertz/ui/internals";
+import { signal as signal23 } from "@vertz/ui";
+function SheetRoot(options = {}) {
+  const { side = "right", defaultOpen = false, onOpenChange } = options;
+  const ids = linkedIds("sheet");
+  const state = { open: signal23(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function show() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(overlay, false);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(overlay, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => focusFirst(content));
+    onOpenChange?.(true);
+  }
+  function hide() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(overlay, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(overlay, true);
+    setHiddenAnimated(content, true);
+    removeTrap?.();
+    removeTrap = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  const SWIPE_THRESHOLD = 50;
+  let startX = 0;
+  let startY = 0;
+  function handlePointerDown(e) {
+    startX = e.clientX;
+    startY = e.clientY;
+  }
+  function handlePointerUp(e) {
+    if (!state.open.peek())
+      return;
+    const deltaX = e.clientX - startX;
+    const deltaY = e.clientY - startY;
+    const shouldDismiss = side === "right" && deltaX >= SWIPE_THRESHOLD || side === "left" && deltaX <= -SWIPE_THRESHOLD || side === "bottom" && deltaY >= SWIPE_THRESHOLD || side === "top" && deltaY <= -SWIPE_THRESHOLD;
+    if (shouldDismiss) {
+      hide();
+    }
+  }
+  const trigger = (() => {
+    const __el0 = __element3("button");
+    __el0.setAttribute("type", "button");
+    {
+      const __v = ids.triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "true" : "false";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on2(__el0, "click", () => {
+      state.open.peek() ? hide() : show();
+    });
+    return __el0;
+  })();
+  const overlay = (() => {
+    const __el1 = __element3("div");
+    __el1.setAttribute("data-sheet-overlay", "");
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("style", __v === true ? "" : __v);
+    }
+    __on2(__el1, "click", () => hide());
+    return __el1;
+  })();
+  const content = (() => {
+    const __el2 = __element3("div");
+    __el2.setAttribute("role", "dialog");
+    __el2.setAttribute("aria-modal", "true");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = side;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("data-side", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("style", __v === true ? "" : __v);
+    }
+    __on2(__el2, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        hide();
+      }
+    });
+    __on2(__el2, "pointerdown", handlePointerDown);
+    __on2(__el2, "pointerup", handlePointerUp);
+    return __el2;
+  })();
+  const close = (() => {
+    const __el3 = __element3("button");
+    __el3.setAttribute("type", "button");
+    __el3.setAttribute("aria-label", "Close");
+    __on2(__el3, "click", () => hide());
+    return __el3;
+  })();
+  return { trigger, overlay, content, close, state, show, hide };
+}
+var Sheet = {
+  Root: SheetRoot
+};
 // src/slider/slider.ts
-import { signal as signal22 } from "@vertz/ui";
+import { signal as signal24 } from "@vertz/ui";
 var Slider = {
   Root(options = {}) {
     const {
@@ -2853,8 +3197,8 @@ var Slider = {
       onValueChange
     } = options;
     const state = {
-      value: signal22(defaultValue),
-      disabled: signal22(disabled)
+      value: signal24(defaultValue),
+      disabled: signal24(disabled)
     };
     const root = document.createElement("div");
     root.id = uniqueId("slider");
@@ -2941,50 +3285,59 @@ var Slider = {
     return { root, thumb, track, state };
   }
 };
-// src/switch/switch.ts
-import { signal as signal23 } from "@vertz/ui";
-var Switch = {
-  Root(options = {}) {
-    const { defaultChecked = false, disabled = false, onCheckedChange } = options;
-    const state = {
-      checked: signal23(defaultChecked),
-      disabled: signal23(disabled)
-    };
-    const root = document.createElement("button");
-    root.setAttribute("type", "button");
-    root.setAttribute("role", "switch");
-    root.id = uniqueId("switch");
-    setChecked(root, defaultChecked);
-    setDataState(root, defaultChecked ? "checked" : "unchecked");
-    if (disabled) {
-      root.disabled = true;
-      root.setAttribute("aria-disabled", "true");
-    }
-    function toggle() {
-      if (state.disabled.peek())
-        return;
-      const next = !state.checked.peek();
-      state.checked.value = next;
-      setChecked(root, next);
-      setDataState(root, next ? "checked" : "unchecked");
-      onCheckedChange?.(next);
-    }
-    root.addEventListener("click", toggle);
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Space)) {
-        event.preventDefault();
+// src/switch/switch.tsx
+import { signal as signal25 } from "@vertz/ui";
+import { __attr, __element as __element4, __on as __on3 } from "@vertz/ui/internals";
+function SwitchRoot(options = {}) {
+  const { defaultChecked = false, disabled = false, onCheckedChange } = options;
+  const checked = signal25(defaultChecked);
+  function toggle() {
+    if (disabled)
+      return;
+    checked.value = !checked.value;
+    onCheckedChange?.(checked.value);
+  }
+  return (() => {
+    const __el0 = __element4("button");
+    __el0.setAttribute("data-v-id", "SwitchRoot");
+    __el0.setAttribute("type", "button");
+    __el0.setAttribute("role", "switch");
+    {
+      const __v = uniqueId("switch");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    __attr(__el0, "aria-checked", () => checked.value ? "true" : "false");
+    __attr(__el0, "data-state", () => checked.value ? "checked" : "unchecked");
+    {
+      const __v = disabled;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("disabled", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __on3(__el0, "click", toggle);
+    __on3(__el0, "keydown", (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
         toggle();
       }
     });
-    return { root, state };
-  }
+    return __el0;
+  })();
+}
+var Switch = {
+  Root: SwitchRoot
 };
 // src/tabs/tabs.ts
-import { signal as signal24 } from "@vertz/ui";
+import { signal as signal26 } from "@vertz/ui";
 var Tabs = {
   Root(options = {}) {
     const { defaultValue = "", orientation = "horizontal", onValueChange } = options;
-    const state = { value: signal24(defaultValue) };
+    const state = { value: signal26(defaultValue) };
     const triggers = [];
     const panels = [];
     const tabValues = [];
@@ -3061,11 +3414,11 @@ var Tabs = {
   }
 };
 // src/toast/toast.ts
-import { signal as signal25 } from "@vertz/ui";
+import { signal as signal27 } from "@vertz/ui";
 var Toast = {
   Root(options = {}) {
     const { duration = 5000, politeness = "polite" } = options;
-    const state = { messages: signal25([]) };
+    const state = { messages: signal27([]) };
     const region = document.createElement("div");
     region.setAttribute("role", "status");
     region.setAttribute("aria-live", politeness);
@@ -3103,45 +3456,54 @@ var Toast = {
     return { region, state, announce, dismiss };
   }
 };
-// src/toggle/toggle.ts
-import { signal as signal26 } from "@vertz/ui";
-var Toggle = {
-  Root(options = {}) {
-    const { defaultPressed = false, disabled = false, onPressedChange } = options;
-    const state = {
-      pressed: signal26(defaultPressed),
-      disabled: signal26(disabled)
-    };
-    const root = document.createElement("button");
-    root.setAttribute("type", "button");
-    root.id = uniqueId("toggle");
-    setPressed(root, defaultPressed);
-    setDataState(root, defaultPressed ? "on" : "off");
-    if (disabled) {
-      root.disabled = true;
-      root.setAttribute("aria-disabled", "true");
-    }
-    function toggle() {
-      if (state.disabled.peek())
-        return;
-      const next = !state.pressed.peek();
-      state.pressed.value = next;
-      setPressed(root, next);
-      setDataState(root, next ? "on" : "off");
-      onPressedChange?.(next);
-    }
-    root.addEventListener("click", toggle);
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Space)) {
-        event.preventDefault();
+// src/toggle/toggle.tsx
+import { signal as signal28 } from "@vertz/ui";
+import { __attr as __attr2, __element as __element5, __on as __on4 } from "@vertz/ui/internals";
+function ToggleRoot(options = {}) {
+  const { defaultPressed = false, disabled = false, onPressedChange } = options;
+  const pressed = signal28(defaultPressed);
+  function toggle() {
+    if (disabled)
+      return;
+    pressed.value = !pressed.value;
+    onPressedChange?.(pressed.value);
+  }
+  return (() => {
+    const __el0 = __element5("button");
+    __el0.setAttribute("data-v-id", "ToggleRoot");
+    __el0.setAttribute("type", "button");
+    {
+      const __v = uniqueId("toggle");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    __attr2(__el0, "aria-pressed", () => pressed.value ? "true" : "false");
+    __attr2(__el0, "data-state", () => pressed.value ? "on" : "off");
+    {
+      const __v = disabled;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("disabled", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __on4(__el0, "click", toggle);
+    __on4(__el0, "keydown", (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
         toggle();
       }
     });
-    return { root, state };
-  }
+    return __el0;
+  })();
+}
+var Toggle = {
+  Root: ToggleRoot
 };
 // src/toggle-group/toggle-group.ts
-import { signal as signal27 } from "@vertz/ui";
+import { signal as signal29 } from "@vertz/ui";
 var ToggleGroup = {
   Root(options = {}) {
     const {
@@ -3152,8 +3514,8 @@ var ToggleGroup = {
       onValueChange
     } = options;
     const state = {
-      value: signal27([...defaultValue]),
-      disabled: signal27(disabled)
+      value: signal29([...defaultValue]),
+      disabled: signal29(disabled)
     };
     const items = [];
     const root = document.createElement("div");
@@ -3219,12 +3581,12 @@ var ToggleGroup = {
   }
 };
 // src/tooltip/tooltip.ts
-import { signal as signal28 } from "@vertz/ui";
+import { signal as signal30 } from "@vertz/ui";
 var Tooltip = {
   Root(options = {}) {
     const { delay = 300, onOpenChange, positioning } = options;
     const contentId = uniqueId("tooltip");
-    const state = { open: signal28(false) };
+    const state = { open: signal30(false) };
     let showTimeout = null;
     let floatingCleanup = null;
     const trigger = document.createElement("span");
@@ -3285,6 +3647,7 @@ export {
   Tabs,
   Switch,
   Slider,
+  Sheet,
   Select,
   ScrollArea,
   ResizablePanel,
@@ -3306,5 +3669,7 @@ export {
   Carousel,
   Calendar,
   Button,
+  Badge,
+  AlertDialog,
   Accordion
 };