@vertz/theme-shadcn 0.2.20 → 0.2.22

package/dist/index.js

@@ -5,22 +5,23 @@ import {
   createBadge,
   createButton,
   textOpacity
-} from "./shared/chunk-qvb3evv2.js";
+} from "./shared/chunk-gzfp8m46.js";
 import {
   configureThemeBase
-} from "./shared/chunk-d2nh1syq.js";
+} from "./shared/chunk-gjsm05ga.js";
 
 // src/components/alert.ts
 import { resolveChildren } from "@vertz/ui";
 function createAlertComponents(alertStyles) {
-  function Alert({ variant, class: className, children }) {
+  function Alert({ variant, className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
     const classes = [alertStyles.root];
     if (variant === "destructive") {
       classes.push(alertStyles.destructive);
     }
-    if (className) {
-      classes.push(className);
+    if (effectiveClass) {
+      classes.push(effectiveClass);
     }
     el.className = classes.join(" ");
     el.setAttribute("role", "alert");
@@ -29,17 +30,19 @@ function createAlertComponents(alertStyles) {
     }
     return el;
   }
-  function AlertTitle({ class: className, children }) {
+  function AlertTitle({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("h5");
-    el.className = [alertStyles.title, className].filter(Boolean).join(" ");
+    el.className = [alertStyles.title, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function AlertDescription({ class: className, children }) {
+  function AlertDescription({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [alertStyles.description, className].filter(Boolean).join(" ");
+    el.className = [alertStyles.description, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren(children)) {
       el.appendChild(node);
     }
@@ -51,24 +54,32 @@ function createAlertComponents(alertStyles) {
 // src/components/avatar.ts
 import { resolveChildren as resolveChildren2 } from "@vertz/ui";
 function createAvatarComponents(avatarStyles) {
-  function Avatar({ class: className, children }) {
+  function Avatar({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [avatarStyles.root, className].filter(Boolean).join(" ");
+    el.className = [avatarStyles.root, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren2(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function AvatarImage({ src, alt, class: className }) {
+  function AvatarImage({
+    src,
+    alt,
+    className,
+    class: classProp
+  }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("img");
-    el.className = [avatarStyles.image, className].filter(Boolean).join(" ");
+    el.className = [avatarStyles.image, effectiveClass].filter(Boolean).join(" ");
     el.src = src;
     el.alt = alt;
     return el;
   }
-  function AvatarFallback({ class: className, children }) {
+  function AvatarFallback({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [avatarStyles.fallback, className].filter(Boolean).join(" ");
+    el.className = [avatarStyles.fallback, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren2(children)) {
       el.appendChild(node);
     }
@@ -85,9 +96,15 @@ function createBadgeComponent(badgeStyles) {
     green: "background-color: oklch(0.55 0.15 155); color: #fff;",
     yellow: "background-color: oklch(0.75 0.15 85); color: oklch(0.25 0.05 85);"
   };
-  return function Badge({ color, class: className, children }) {
+  return function Badge({
+    color,
+    className,
+    class: classProp,
+    children
+  }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("span");
-    el.className = [badgeStyles({ color }), className].filter(Boolean).join(" ");
+    el.className = [badgeStyles({ color }), effectiveClass].filter(Boolean).join(" ");
     const inlineStyle = color ? colorStyles[color] : undefined;
     if (inlineStyle) {
       el.style.cssText = inlineStyle;
@@ -102,13 +119,14 @@ function createBadgeComponent(badgeStyles) {
 // src/components/breadcrumb.ts
 function createBreadcrumbComponent(styles) {
   return function Breadcrumb(props) {
-    const { items, separator = "/", class: className } = props;
+    const { items, separator = "/", className, class: classProp } = props;
+    const effectiveClass = className ?? classProp;
     const nav = document.createElement("nav");
     nav.setAttribute("aria-label", "Breadcrumb");
     if (styles.nav)
       nav.className = styles.nav;
-    if (className) {
-      nav.className = [nav.className, className].filter(Boolean).join(" ");
+    if (effectiveClass) {
+      nav.className = [nav.className, effectiveClass].filter(Boolean).join(" ");
     }
     const ol = document.createElement("ol");
     ol.className = styles.list;
@@ -154,31 +172,25 @@ function createBreadcrumbComponent(styles) {
 
 // src/components/button.ts
 import { resolveChildren as resolveChildren4 } from "@vertz/ui";
+import { applyProps } from "@vertz/ui-primitives/utils";
 function createButtonComponent(buttonStyles) {
   return function Button({
     intent,
     size,
-    class: className,
+    className,
+    class: classProp,
     children,
     disabled,
     type,
-    ...attrs
+    ...rest
   }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("button");
     el.type = type ?? "button";
-    el.className = [buttonStyles({ intent, size }), className].filter(Boolean).join(" ");
+    el.className = [buttonStyles({ intent, size }), effectiveClass].filter(Boolean).join(" ");
     if (disabled)
       el.disabled = true;
-    for (const [key, value] of Object.entries(attrs)) {
-      if (value === undefined || value === null)
-        continue;
-      if (key.startsWith("on") && typeof value === "function") {
-        const event = key[2].toLowerCase() + key.slice(3);
-        el.addEventListener(event, value);
-      } else {
-        el.setAttribute(key, String(value));
-      }
-    }
+    applyProps(el, rest);
     for (const node of resolveChildren4(children)) {
       el.appendChild(node);
     }
@@ -189,57 +201,68 @@ function createButtonComponent(buttonStyles) {
 // src/components/card.ts
 import { resolveChildren as resolveChildren5 } from "@vertz/ui";
 function createCardComponents(cardStyles) {
-  function Card({ class: className, children }) {
+  function Card({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [cardStyles.root, className].filter(Boolean).join(" ");
+    el.className = [cardStyles.root, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren5(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function CardHeader({ class: className, children }) {
+  function CardHeader({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [cardStyles.header, className].filter(Boolean).join(" ");
+    el.className = [cardStyles.header, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren5(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function CardTitle({ class: className, children }) {
+  function CardTitle({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("h3");
-    el.className = [cardStyles.title, className].filter(Boolean).join(" ");
+    el.className = [cardStyles.title, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren5(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function CardDescription({ class: className, children }) {
+  function CardDescription({
+    className,
+    class: classProp,
+    children
+  }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("p");
-    el.className = [cardStyles.description, className].filter(Boolean).join(" ");
+    el.className = [cardStyles.description, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren5(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function CardContent({ class: className, children }) {
+  function CardContent({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [cardStyles.content, className].filter(Boolean).join(" ");
+    el.className = [cardStyles.content, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren5(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function CardFooter({ class: className, children }) {
+  function CardFooter({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [cardStyles.footer, className].filter(Boolean).join(" ");
+    el.className = [cardStyles.footer, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren5(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function CardAction({ class: className, children }) {
+  function CardAction({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [cardStyles.action, className].filter(Boolean).join(" ");
+    el.className = [cardStyles.action, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren5(children)) {
       el.appendChild(node);
     }
@@ -259,17 +282,19 @@ function createCardComponents(cardStyles) {
 // src/components/form-group.ts
 import { resolveChildren as resolveChildren6 } from "@vertz/ui";
 function createFormGroupComponents(formGroupStyles) {
-  function FormGroup({ class: className, children }) {
+  function FormGroup({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [formGroupStyles.base, className].filter(Boolean).join(" ");
+    el.className = [formGroupStyles.base, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren6(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function FormError({ class: className, children }) {
+  function FormError({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("span");
-    el.className = [formGroupStyles.error, className].filter(Boolean).join(" ");
+    el.className = [formGroupStyles.error, effectiveClass].filter(Boolean).join(" ");
     for (const node of resolveChildren6(children)) {
       el.appendChild(node);
     }
@@ -282,9 +307,11 @@ function createFormGroupComponents(formGroupStyles) {
 }
 
 // src/components/input.ts
+import { applyProps as applyProps2 } from "@vertz/ui-primitives/utils";
 function createInputComponent(inputStyles) {
   return function Input({
-    class: className,
+    className,
+    class: classProp,
     name,
     placeholder,
     type,
@@ -292,8 +319,9 @@ function createInputComponent(inputStyles) {
     value,
     ...attrs
   }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("input");
-    el.className = [inputStyles.base, className].filter(Boolean).join(" ");
+    el.className = [inputStyles.base, effectiveClass].filter(Boolean).join(" ");
     if (name !== undefined)
       el.name = name;
     if (placeholder !== undefined)
@@ -304,11 +332,7 @@ function createInputComponent(inputStyles) {
       el.disabled = true;
     if (value !== undefined)
       el.value = value;
-    for (const [key, val] of Object.entries(attrs)) {
-      if (val !== undefined && val !== null) {
-        el.setAttribute(key, String(val));
-      }
-    }
+    applyProps2(el, attrs);
     return el;
   };
 }
@@ -317,12 +341,14 @@ function createInputComponent(inputStyles) {
 import { resolveChildren as resolveChildren7 } from "@vertz/ui";
 function createLabelComponent(labelStyles) {
   return function Label({
-    class: className,
+    className,
+    class: classProp,
     for: htmlFor,
     children
   }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("label");
-    el.className = [labelStyles.base, className].filter(Boolean).join(" ");
+    el.className = [labelStyles.base, effectiveClass].filter(Boolean).join(" ");
     if (htmlFor !== undefined)
       el.htmlFor = htmlFor;
     for (const node of resolveChildren7(children)) {
@@ -335,13 +361,21 @@ function createLabelComponent(labelStyles) {
 // src/components/pagination.ts
 function createPaginationComponent(styles) {
   return function Pagination(props) {
-    const { currentPage, totalPages, onPageChange, siblingCount = 1, class: className } = props;
+    const {
+      currentPage,
+      totalPages,
+      onPageChange,
+      siblingCount = 1,
+      className,
+      class: classProp
+    } = props;
+    const effectiveClass = className ?? classProp;
     const nav = document.createElement("nav");
     nav.setAttribute("aria-label", "Pagination");
     if (styles.nav)
       nav.classList.add(styles.nav);
-    if (className)
-      nav.classList.add(className);
+    if (effectiveClass)
+      nav.classList.add(effectiveClass);
     const ul = document.createElement("ul");
     ul.classList.add(styles.list);
     const prevLi = document.createElement("li");
@@ -424,597 +458,245 @@ function generatePaginationRange(current, total, siblings) {
 }
 
 // src/components/primitives/accordion.ts
-import { resolveChildren as resolveChildren8 } from "@vertz/ui";
-import { Accordion } from "@vertz/ui-primitives";
+import { ComposedAccordion, withStyles } from "@vertz/ui-primitives";
 function createThemedAccordion(styles) {
-  function AccordionItem({
-    value,
-    children,
-    class: className
-  }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "accordion-item";
-    el.dataset.value = value;
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren8(children))
-      el.appendChild(node);
-    return el;
-  }
-  function AccordionTrigger({ children, class: className }) {
-    const el = document.createElement("span");
-    el.dataset.slot = "accordion-trigger";
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren8(children))
-      el.appendChild(node);
-    return el;
-  }
-  function AccordionContent({ children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "accordion-content";
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren8(children))
-      el.appendChild(node);
-    return el;
-  }
+  const StyledAccordion = withStyles(ComposedAccordion, {
+    item: styles.item,
+    trigger: styles.trigger,
+    content: styles.content
+  });
   function AccordionRoot({ type, defaultValue, children }) {
-    const result = Accordion.Root({
-      multiple: type === "multiple",
-      defaultValue
-    });
-    for (const node of resolveChildren8(children)) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      if (node.dataset.slot !== "accordion-item")
-        continue;
-      const value = node.dataset.value;
-      if (!value)
-        continue;
-      const item = result.Item(value);
-      item.item.classList.add(styles.item);
-      item.trigger.classList.add(styles.trigger);
-      item.content.classList.add(styles.content);
-      const inner = document.createElement("div");
-      inner.style.cssText = "padding: 0.5rem 0.5rem 1rem;";
-      for (const child of Array.from(node.childNodes)) {
-        if (!(child instanceof HTMLElement))
-          continue;
-        const slot = child.dataset.slot;
-        if (slot === "accordion-trigger") {
-          for (const n of Array.from(child.childNodes)) {
-            item.trigger.appendChild(n);
-          }
-        } else if (slot === "accordion-content") {
-          for (const n of Array.from(child.childNodes)) {
-            inner.appendChild(n);
-          }
-        }
-      }
-      if (inner.childNodes.length > 0)
-        item.content.appendChild(inner);
-    }
-    return result.root;
+    return StyledAccordion({ children, type, defaultValue });
   }
-  AccordionRoot.Item = AccordionItem;
-  AccordionRoot.Trigger = AccordionTrigger;
-  AccordionRoot.Content = AccordionContent;
-  return AccordionRoot;
+  return Object.assign(AccordionRoot, {
+    Item: ComposedAccordion.Item,
+    Trigger: ComposedAccordion.Trigger,
+    Content: ComposedAccordion.Content
+  });
 }
 
 // src/components/primitives/alert-dialog.ts
-import { resolveChildren as resolveChildren9 } from "@vertz/ui";
-import { Dialog } from "@vertz/ui-primitives";
-var idCounter = 0;
+import { ComposedAlertDialog, withStyles as withStyles2 } from "@vertz/ui-primitives";
 function createThemedAlertDialog(styles) {
-  function AlertDialogTrigger({ children }) {
-    const el = document.createElement("span");
-    el.dataset.slot = "alertdialog-trigger";
-    el.style.display = "contents";
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDialogContent({ children }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "alertdialog-content";
-    el.style.display = "contents";
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDialogTitle({
-    children,
-    class: className
-  }) {
-    const el = document.createElement("h2");
-    el.classList.add(styles.title);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDialogDescription({
-    children,
-    class: className
-  }) {
-    const el = document.createElement("p");
-    el.classList.add(styles.description);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDialogFooter({ children, class: className }) {
-    const el = document.createElement("div");
-    el.classList.add(styles.footer);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDialogCancel({
-    children,
-    class: className
-  }) {
-    const el = document.createElement("button");
-    el.setAttribute("type", "button");
-    el.classList.add(styles.cancel);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDialogAction({
-    children,
-    class: className
-  }) {
-    const el = document.createElement("button");
-    el.setAttribute("type", "button");
-    el.classList.add(styles.action);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDialogRoot({ children, ...options }) {
-    const onOpenChangeOrig = options.onOpenChange;
-    let userTrigger = null;
-    let contentChildren = [];
-    for (const node of resolveChildren9(children)) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "alertdialog-trigger") {
-        userTrigger = node.firstElementChild ?? node;
-      } else if (slot === "alertdialog-content") {
-        contentChildren = Array.from(node.childNodes);
-      }
-    }
-    const primitive = Dialog.Root({
-      modal: true,
-      ...options,
-      onOpenChange: (isOpen) => {
-        if (userTrigger) {
-          userTrigger.setAttribute("aria-expanded", String(isOpen));
-          userTrigger.setAttribute("data-state", isOpen ? "open" : "closed");
-        }
-        onOpenChangeOrig?.(isOpen);
-      }
-    });
-    primitive.content.setAttribute("role", "alertdialog");
-    primitive.overlay.addEventListener("click", (e) => {
-      e.stopImmediatePropagation();
-      e.preventDefault();
-    }, { capture: true });
-    primitive.content.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") {
-        e.stopImmediatePropagation();
-        e.preventDefault();
-      }
-    }, { capture: true });
-    primitive.overlay.classList.add(styles.overlay);
-    primitive.content.classList.add(styles.panel);
-    const descriptionId = `alertdialog-desc-${++idCounter}`;
-    for (const node of contentChildren) {
-      primitive.content.appendChild(node);
-    }
-    const descriptionEl = primitive.content.querySelector(`.${styles.description}`);
-    if (descriptionEl) {
-      descriptionEl.id = descriptionId;
-      primitive.content.setAttribute("aria-describedby", descriptionId);
-    }
-    const cancelButtons = primitive.content.querySelectorAll(`.${styles.cancel}`);
-    for (const btn of cancelButtons) {
-      btn.addEventListener("click", () => {
-        primitive.hide();
-      });
-    }
-    const actionButtons = primitive.content.querySelectorAll(`.${styles.action}`);
-    for (const btn of actionButtons) {
-      btn.addEventListener("click", () => {
-        primitive.hide();
-      });
-    }
-    document.body.appendChild(primitive.overlay);
-    document.body.appendChild(primitive.content);
-    if (userTrigger) {
-      userTrigger.setAttribute("aria-haspopup", "dialog");
-      userTrigger.setAttribute("aria-controls", primitive.content.id);
-      userTrigger.setAttribute("aria-expanded", String(options.defaultOpen ?? false));
-      userTrigger.setAttribute("data-state", options.defaultOpen ? "open" : "closed");
-      userTrigger.addEventListener("click", () => {
-        if (primitive.state.open.peek()) {
-          primitive.hide();
-        } else {
-          primitive.show();
-        }
-      });
-      return userTrigger;
-    }
-    return primitive.trigger;
-  }
-  AlertDialogRoot.Trigger = AlertDialogTrigger;
-  AlertDialogRoot.Content = AlertDialogContent;
-  AlertDialogRoot.Title = AlertDialogTitle;
-  AlertDialogRoot.Description = AlertDialogDescription;
-  AlertDialogRoot.Footer = AlertDialogFooter;
-  AlertDialogRoot.Cancel = AlertDialogCancel;
-  AlertDialogRoot.Action = AlertDialogAction;
-  return AlertDialogRoot;
+  return withStyles2(ComposedAlertDialog, {
+    overlay: styles.overlay,
+    content: styles.panel,
+    cancel: styles.cancel,
+    action: styles.action,
+    title: styles.title,
+    description: styles.description,
+    footer: styles.footer,
+    header: ""
+  });
 }
 
 // src/components/primitives/calendar.ts
-import { Calendar } from "@vertz/ui-primitives";
+import { ComposedCalendar, withStyles as withStyles3 } from "@vertz/ui-primitives";
 function createThemedCalendar(styles) {
-  return function themedCalendar(options) {
-    const result = Calendar.Root(options);
-    result.root.classList.add(styles.root);
-    result.header.classList.add(styles.header);
-    result.title.classList.add(styles.title);
-    result.prevButton.classList.add(styles.navButton);
-    result.nextButton.classList.add(styles.navButton);
-    result.grid.classList.add(styles.grid);
-    for (const th of result.grid.querySelectorAll("th")) {
-      th.classList.add(styles.headCell);
-    }
-    for (const td of result.grid.querySelectorAll("td")) {
-      td.classList.add(styles.cell);
-    }
-    for (const btn of result.grid.querySelectorAll("button")) {
-      btn.classList.add(styles.dayButton);
-    }
-    return result;
+  const StyledCalendar = withStyles3(ComposedCalendar, {
+    root: styles.root,
+    header: styles.header,
+    title: styles.title,
+    navButton: styles.navButton,
+    grid: styles.grid,
+    headCell: styles.headCell,
+    cell: styles.cell,
+    dayButton: styles.dayButton
+  });
+  return function CalendarRoot(props) {
+    return StyledCalendar(props);
   };
 }
 
 // src/components/primitives/carousel.ts
-import { Carousel } from "@vertz/ui-primitives";
+import { ComposedCarousel, withStyles as withStyles4 } from "@vertz/ui-primitives";
 function createThemedCarousel(styles) {
-  return function themedCarousel(options) {
-    const result = Carousel.Root(options);
-    const originalSlide = result.Slide;
-    result.root.classList.add(styles.root);
-    result.viewport.classList.add(styles.viewport);
-    result.prevButton.classList.add(styles.prevButton);
-    result.nextButton.classList.add(styles.nextButton);
-    return {
-      root: result.root,
-      viewport: result.viewport,
-      prevButton: result.prevButton,
-      nextButton: result.nextButton,
-      state: result.state,
-      goTo: result.goTo,
-      goNext: result.goNext,
-      goPrev: result.goPrev,
-      Slide: () => {
-        const slide = originalSlide();
-        slide.classList.add(styles.slide);
-        return slide;
-      }
-    };
-  };
+  const StyledCarousel = withStyles4(ComposedCarousel, {
+    root: styles.root,
+    viewport: styles.viewport,
+    slide: styles.slide,
+    prevButton: styles.prevButton,
+    nextButton: styles.nextButton
+  });
+  function CarouselRoot({
+    orientation,
+    loop,
+    defaultIndex,
+    onSlideChange,
+    children
+  }) {
+    return StyledCarousel({
+      children,
+      orientation,
+      loop,
+      defaultIndex,
+      onSlideChange
+    });
+  }
+  return Object.assign(CarouselRoot, {
+    Slide: ComposedCarousel.Slide,
+    Previous: ComposedCarousel.Previous,
+    Next: ComposedCarousel.Next
+  });
 }
 
 // src/components/primitives/checkbox.ts
-import { Checkbox } from "@vertz/ui-primitives";
-function createCheckIcon() {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("width", "12");
-  svg.setAttribute("height", "12");
-  svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("fill", "none");
-  svg.setAttribute("stroke", "currentColor");
-  svg.setAttribute("stroke-width", "3");
-  svg.setAttribute("stroke-linecap", "round");
-  svg.setAttribute("stroke-linejoin", "round");
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", "M20 6L9 17l-5-5");
-  svg.appendChild(path);
-  return svg;
-}
+import { ComposedCheckbox, withStyles as withStyles5 } from "@vertz/ui-primitives";
 function createThemedCheckbox(styles) {
-  return function themedCheckbox(options) {
-    const root = Checkbox.Root(options);
-    root.classList.add(styles.root);
-    const indicator = document.createElement("span");
-    indicator.classList.add(styles.indicator);
-    const dataState = root.getAttribute("data-state") ?? "unchecked";
-    indicator.setAttribute("data-state", dataState);
-    indicator.appendChild(createCheckIcon());
-    root.appendChild(indicator);
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.attributeName === "data-state") {
-          const newState = root.getAttribute("data-state") ?? "unchecked";
-          indicator.setAttribute("data-state", newState);
-        }
-      }
-    });
-    observer.observe(root, { attributes: true, attributeFilter: ["data-state"] });
-    return root;
+  const StyledCheckbox = withStyles5(ComposedCheckbox, {
+    root: styles.root,
+    indicator: styles.indicator
+  });
+  return function CheckboxRoot(props) {
+    return StyledCheckbox(props);
   };
 }
 
-// src/components/primitives/collapsible.ts
-import { Collapsible } from "@vertz/ui-primitives";
+// src/components/primitives/collapsible.tsx
+import { ComposedCollapsible } from "@vertz/ui-primitives";
 function createThemedCollapsible(styles) {
-  return function themedCollapsible(options) {
-    const result = Collapsible.Root(options);
-    result.content.classList.add(styles.content);
-    return result;
-  };
+  function CollapsibleRoot({
+    children,
+    defaultOpen,
+    disabled,
+    onOpenChange
+  }) {
+    return ComposedCollapsible({
+      children,
+      defaultOpen,
+      disabled,
+      onOpenChange,
+      classes: {
+        content: styles.content
+      }
+    });
+  }
+  return Object.assign(CollapsibleRoot, {
+    Trigger: ComposedCollapsible.Trigger,
+    Content: ComposedCollapsible.Content
+  });
 }
 
-// src/components/primitives/command.ts
-import { Command } from "@vertz/ui-primitives";
+// src/components/primitives/command.tsx
+import { ComposedCommand, withStyles as withStyles6 } from "@vertz/ui-primitives";
 function createThemedCommand(styles) {
-  return function themedCommand(options) {
-    const result = Command.Root(options);
-    result.root.classList.add(styles.root);
-    result.input.classList.add(styles.input);
-    result.list.classList.add(styles.list);
-    result.empty.classList.add(styles.empty);
-    const originalItem = result.Item;
-    const originalGroup = result.Group;
-    const originalSeparator = result.Separator;
-    result.Item = (value, label, keywords) => {
-      const item = originalItem(value, label, keywords);
-      item.classList.add(styles.item);
-      return item;
-    };
-    result.Group = (label) => {
-      const group = originalGroup(label);
-      group.el.classList.add(styles.group);
-      const labelId = group.el.getAttribute("aria-labelledby") ?? "";
-      const heading = group.el.querySelector(`#${labelId}`);
-      if (heading) {
-        heading.classList.add(styles.groupHeading);
-      }
-      const originalGroupItem = group.Item;
-      group.Item = (value, itemLabel, keywords) => {
-        const item = originalGroupItem(value, itemLabel, keywords);
-        item.classList.add(styles.item);
-        return item;
-      };
-      return group;
-    };
-    result.Separator = () => {
-      const sep = originalSeparator();
-      sep.classList.add(styles.separator);
-      return sep;
-    };
-    return result;
-  };
+  const Styled = withStyles6(ComposedCommand, {
+    root: styles.root,
+    input: styles.input,
+    list: styles.list,
+    item: styles.item,
+    group: styles.group,
+    groupHeading: styles.groupHeading,
+    separator: styles.separator,
+    empty: styles.empty
+  });
+  function CommandRoot({
+    children,
+    filter,
+    onSelect,
+    onInputChange,
+    placeholder
+  }) {
+    return Styled({
+      children,
+      filter,
+      onSelect,
+      onInputChange,
+      placeholder
+    });
+  }
+  return Object.assign(CommandRoot, {
+    Input: ComposedCommand.Input,
+    List: ComposedCommand.List,
+    Empty: ComposedCommand.Empty,
+    Item: ComposedCommand.Item,
+    Group: ComposedCommand.Group,
+    Separator: ComposedCommand.Separator
+  });
 }
 
 // src/components/primitives/context-menu.ts
-import { ContextMenu } from "@vertz/ui-primitives";
-var idCounter2 = 0;
+import { ComposedContextMenu, withStyles as withStyles7 } from "@vertz/ui-primitives";
 function createThemedContextMenu(styles) {
-  return function themedContextMenu(options) {
-    const result = ContextMenu.Root({
-      ...options,
-      positioning: { strategy: "fixed" }
-    });
-    result.content.classList.add(styles.content);
-    function themedItem(value, label) {
-      const item = result.Item(value, label);
-      item.classList.add(styles.item);
-      return item;
-    }
-    return {
-      trigger: result.trigger,
-      content: result.content,
-      state: result.state,
-      Item: themedItem,
-      Group: (label) => {
-        const group = result.Group(label);
-        group.el.classList.add(styles.group);
-        const labelEl = document.createElement("div");
-        labelEl.id = `ctx-menu-group-label-${++idCounter2}`;
-        labelEl.textContent = label;
-        labelEl.classList.add(styles.label);
-        group.el.removeAttribute("aria-label");
-        group.el.setAttribute("aria-labelledby", labelEl.id);
-        group.el.prepend(labelEl);
-        return {
-          el: group.el,
-          Item: (value, itemLabel) => {
-            const item = group.Item(value, itemLabel);
-            item.classList.add(styles.item);
-            return item;
-          }
-        };
-      },
-      Separator: () => {
-        const sep = result.Separator();
-        sep.classList.add(styles.separator);
-        return sep;
-      },
-      Label: (text) => {
-        const el = result.Label(text);
-        el.classList.add(styles.label);
-        return el;
-      }
-    };
-  };
-}
-
-// src/components/primitives/date-picker.ts
-import { DatePicker } from "@vertz/ui-primitives";
-function createThemedDatePicker(styles) {
-  return function themedDatePicker(options) {
-    const result = DatePicker.Root(options);
-    result.trigger.classList.add(styles.trigger);
-    result.content.classList.add(styles.content);
-    return result;
-  };
+  const Styled = withStyles7(ComposedContextMenu, {
+    content: styles.content,
+    item: styles.item,
+    group: styles.group,
+    label: styles.label,
+    separator: styles.separator
+  });
+  function ContextMenuRoot({ children, onSelect }) {
+    return Styled({ children, onSelect });
+  }
+  return Object.assign(ContextMenuRoot, {
+    Trigger: ComposedContextMenu.Trigger,
+    Content: ComposedContextMenu.Content,
+    Item: ComposedContextMenu.Item,
+    Group: ComposedContextMenu.Group,
+    Label: ComposedContextMenu.Label,
+    Separator: ComposedContextMenu.Separator
+  });
 }
 
-// src/components/primitives/dialog.ts
-import { resolveChildren as resolveChildren10 } from "@vertz/ui";
-import { Dialog as Dialog2 } from "@vertz/ui-primitives";
-function createThemedDialog(styles) {
-  function DialogTrigger({ children }) {
-    const el = document.createElement("span");
-    el.dataset.slot = "dialog-trigger";
-    el.style.display = "contents";
-    for (const node of resolveChildren10(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function DialogContent({ children }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "dialog-content";
-    el.style.display = "contents";
-    for (const node of resolveChildren10(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function DialogHeader({ children, class: className }) {
-    const el = document.createElement("div");
-    el.classList.add(styles.header);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren10(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function DialogTitle({ children, class: className }) {
-    const el = document.createElement("h2");
-    el.classList.add(styles.title);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren10(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function DialogDescription({
+// src/components/primitives/date-picker.tsx
+import { ComposedDatePicker } from "@vertz/ui-primitives";
+function createThemedDatePicker(styles, calendarClasses) {
+  function DatePickerRoot({
     children,
-    class: className
+    mode,
+    defaultValue,
+    defaultMonth,
+    minDate,
+    maxDate,
+    disabled,
+    formatDate,
+    placeholder,
+    onValueChange,
+    onOpenChange
   }) {
-    const el = document.createElement("p");
-    el.classList.add(styles.description);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren10(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function DialogFooter({ children, class: className }) {
-    const el = document.createElement("div");
-    el.classList.add(styles.footer);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren10(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function DialogRoot({ children, ...options }) {
-    const onOpenChangeOrig = options.onOpenChange;
-    let userTrigger = null;
-    let contentChildren = [];
-    for (const node of resolveChildren10(children)) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "dialog-trigger") {
-        userTrigger = node.firstElementChild ?? node;
-      } else if (slot === "dialog-content") {
-        contentChildren = Array.from(node.childNodes);
-      }
-    }
-    const primitive = Dialog2.Root({
-      ...options,
-      onOpenChange: (isOpen) => {
-        if (userTrigger) {
-          userTrigger.setAttribute("aria-expanded", String(isOpen));
-          userTrigger.setAttribute("data-state", isOpen ? "open" : "closed");
-        }
-        onOpenChangeOrig?.(isOpen);
+    return ComposedDatePicker({
+      children,
+      mode,
+      defaultValue,
+      defaultMonth,
+      minDate,
+      maxDate,
+      disabled,
+      formatDate,
+      placeholder,
+      onValueChange,
+      onOpenChange,
+      classes: {
+        trigger: styles.trigger,
+        content: styles.content,
+        calendar: calendarClasses
       }
     });
-    primitive.overlay.classList.add(styles.overlay);
-    primitive.content.classList.add(styles.panel);
-    primitive.close.classList.add(styles.close);
-    primitive.close.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
-    primitive.close.setAttribute("aria-label", "Close");
-    for (const node of contentChildren) {
-      primitive.content.appendChild(node);
-    }
-    primitive.content.appendChild(primitive.close);
-    document.body.appendChild(primitive.overlay);
-    document.body.appendChild(primitive.content);
-    if (userTrigger) {
-      userTrigger.setAttribute("aria-haspopup", "dialog");
-      userTrigger.setAttribute("aria-controls", primitive.content.id);
-      userTrigger.setAttribute("aria-expanded", String(options.defaultOpen ?? false));
-      userTrigger.setAttribute("data-state", options.defaultOpen ? "open" : "closed");
-      userTrigger.addEventListener("click", () => {
-        if (primitive.state.open.peek()) {
-          primitive.hide();
-        } else {
-          primitive.show();
-        }
-      });
-      return userTrigger;
-    }
-    return primitive.trigger;
   }
-  DialogRoot.Trigger = DialogTrigger;
-  DialogRoot.Content = DialogContent;
-  DialogRoot.Header = DialogHeader;
-  DialogRoot.Title = DialogTitle;
-  DialogRoot.Description = DialogDescription;
-  DialogRoot.Footer = DialogFooter;
-  return DialogRoot;
+  return Object.assign(DatePickerRoot, {
+    Trigger: ComposedDatePicker.Trigger,
+    Content: ComposedDatePicker.Content
+  });
+}
+
+// src/components/primitives/dialog.ts
+import { ComposedDialog, withStyles as withStyles8 } from "@vertz/ui-primitives";
+function createThemedDialog(styles) {
+  return withStyles8(ComposedDialog, {
+    overlay: styles.overlay,
+    content: styles.panel,
+    close: styles.close,
+    header: styles.header,
+    title: styles.title,
+    description: styles.description,
+    footer: styles.footer
+  });
 }
 
-// src/components/primitives/drawer.ts
-import { Dialog as Dialog3 } from "@vertz/ui-primitives";
+// src/components/primitives/drawer.tsx
+import { __element, __enterChildren, __exitChildren, __insert } from "@vertz/ui/internals";
+import { resolveChildren as resolveChildren8 } from "@vertz/ui";
+import { ComposedSheet } from "@vertz/ui-primitives";
 var PANEL_CLASS_MAP = {
   left: "panelLeft",
   right: "panelRight",
@@ -1022,557 +704,318 @@ var PANEL_CLASS_MAP = {
   bottom: "panelBottom"
 };
 function createThemedDrawer(styles) {
-  return function themedDrawer(options) {
-    const side = options?.side ?? "bottom";
-    const result = Dialog3.Root(options);
-    result.overlay.classList.add(styles.overlay);
-    result.content.classList.add(styles[PANEL_CLASS_MAP[side]]);
-    result.title.classList.add(styles.title);
-    result.close.classList.add(styles.close);
-    const handle = document.createElement("div");
-    handle.classList.add(styles.handle);
-    result.content.insertBefore(handle, result.content.firstChild);
-    const description = document.createElement("p");
-    description.classList.add(styles.description);
-    const descId = `${result.content.id}-description`;
-    description.id = descId;
-    result.content.setAttribute("aria-describedby", descId);
-    return { ...result, handle, description };
-  };
-}
-
-// src/components/primitives/dropdown-menu.ts
-import { resolveChildren as resolveChildren11 } from "@vertz/ui";
-import { Menu } from "@vertz/ui-primitives";
-var idCounter3 = 0;
-function createThemedDropdownMenu(styles) {
-  function MenuTrigger({ children }) {
-    const el = document.createElement("span");
-    el.dataset.slot = "menu-trigger";
-    el.style.display = "contents";
-    for (const node of resolveChildren11(children))
-      el.appendChild(node);
-    return el;
-  }
-  function MenuContent({ children }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "menu-content";
-    el.style.display = "contents";
-    for (const node of resolveChildren11(children))
-      el.appendChild(node);
-    return el;
-  }
-  function MenuItem({ value, children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "menu-item";
-    el.dataset.value = value;
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren11(children))
-      el.appendChild(node);
-    return el;
-  }
-  function MenuGroup({
-    label,
-    children,
-    class: className
-  }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "menu-group";
-    el.dataset.label = label;
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren11(children))
-      el.appendChild(node);
-    return el;
+  function DrawerRoot({ children, side, onOpenChange }) {
+    const resolvedSide = side ?? "bottom";
+    const panelClass = styles[PANEL_CLASS_MAP[resolvedSide]];
+    return ComposedSheet({
+      children,
+      side: resolvedSide,
+      onOpenChange,
+      classes: {
+        overlay: styles.overlay,
+        content: panelClass,
+        title: styles.title,
+        description: styles.description,
+        close: styles.close
+      }
+    });
   }
-  function MenuLabel({ children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "menu-label";
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren11(children))
-      el.appendChild(node);
-    return el;
+  function DrawerHeader({ children, className: cls, class: classProp }) {
+    const effectiveCls = cls ?? classProp;
+    const combined = [styles.header, effectiveCls].filter(Boolean).join(" ");
+    const resolved = resolveChildren8(children);
+    return (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-slot", "drawer-header");
+      {
+        const __v = combined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("class", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __insert(__el0, resolved);
+      __exitChildren();
+      return __el0;
+    })();
   }
-  function MenuSeparator() {
-    const el = document.createElement("hr");
-    el.dataset.slot = "menu-separator";
-    return el;
+  function DrawerFooter({ children, className: cls, class: classProp }) {
+    const effectiveCls = cls ?? classProp;
+    const combined = [styles.footer, effectiveCls].filter(Boolean).join(" ");
+    const resolved = resolveChildren8(children);
+    return (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("data-slot", "drawer-footer");
+      {
+        const __v = combined;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("class", __v === true ? "" : __v);
+      }
+      __enterChildren(__el1);
+      __insert(__el1, resolved);
+      __exitChildren();
+      return __el1;
+    })();
   }
-  function processItems(nodes, primitive, parentGroup) {
-    for (const node of nodes) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "menu-item") {
-        const value = node.dataset.value;
-        const label = node.textContent ?? undefined;
-        const item = parentGroup ? parentGroup.Item(value, label) : primitive.Item(value, label);
-        item.classList.add(styles.item);
-      } else if (slot === "menu-group") {
-        const groupLabel = node.dataset.label;
-        const group = primitive.Group(groupLabel);
-        group.el.classList.add(styles.group);
-        const labelEl = document.createElement("div");
-        labelEl.id = `menu-group-label-${++idCounter3}`;
-        labelEl.textContent = groupLabel;
-        labelEl.classList.add(styles.label);
-        group.el.removeAttribute("aria-label");
-        group.el.setAttribute("aria-labelledby", labelEl.id);
-        group.el.prepend(labelEl);
-        processItems(Array.from(node.childNodes), primitive, group);
-      } else if (slot === "menu-label") {
-        const labelEl = primitive.Label(node.textContent ?? "");
-        labelEl.classList.add(styles.label);
-      } else if (slot === "menu-separator") {
-        const sep = primitive.Separator();
-        sep.classList.add(styles.separator);
+  function DrawerHandle({ className: cls, class: classProp }) {
+    const effectiveCls = cls ?? classProp;
+    const combined = [styles.handle, effectiveCls].filter(Boolean).join(" ");
+    return (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("data-slot", "drawer-handle");
+      {
+        const __v = combined;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("class", __v === true ? "" : __v);
       }
-    }
+      return __el2;
+    })();
   }
+  return Object.assign(DrawerRoot, {
+    Trigger: ComposedSheet.Trigger,
+    Content: ComposedSheet.Content,
+    Header: DrawerHeader,
+    Title: ComposedSheet.Title,
+    Description: ComposedSheet.Description,
+    Footer: DrawerFooter,
+    Handle: DrawerHandle
+  });
+}
+
+// src/components/primitives/dropdown-menu.ts
+import { ComposedDropdownMenu, withStyles as withStyles9 } from "@vertz/ui-primitives";
+function createThemedDropdownMenu(styles) {
+  const Styled = withStyles9(ComposedDropdownMenu, {
+    content: styles.content,
+    item: styles.item,
+    group: styles.group,
+    label: styles.label,
+    separator: styles.separator
+  });
   function DropdownMenuRoot({
     children,
-    onOpenChange: onOpenChangeOrig,
-    ...menuOptions
+    onSelect,
+    onOpenChange
   }) {
-    let userTrigger = null;
-    let contentNodes = [];
-    for (const node of resolveChildren11(children)) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "menu-trigger") {
-        userTrigger = node.firstElementChild ?? node;
-      } else if (slot === "menu-content") {
-        contentNodes = Array.from(node.childNodes);
-      }
-    }
-    const primitive = Menu.Root({
-      ...menuOptions,
-      positioning: {
-        placement: "bottom-start",
-        portal: true,
-        ...userTrigger ? { referenceElement: userTrigger } : {}
-      }
-    });
-    primitive.content.classList.add(styles.content);
-    processItems(contentNodes, primitive);
-    const observer = new MutationObserver(() => {
-      const isOpen = primitive.trigger.getAttribute("aria-expanded") === "true";
-      if (userTrigger) {
-        userTrigger.setAttribute("aria-expanded", String(isOpen));
-        userTrigger.setAttribute("data-state", isOpen ? "open" : "closed");
-      }
-      onOpenChangeOrig?.(isOpen);
-    });
-    observer.observe(primitive.trigger, { attributes: true, attributeFilter: ["aria-expanded"] });
-    if (userTrigger) {
-      userTrigger.setAttribute("aria-haspopup", "menu");
-      userTrigger.setAttribute("aria-controls", primitive.content.id);
-      userTrigger.setAttribute("aria-expanded", "false");
-      userTrigger.setAttribute("data-state", "closed");
-      userTrigger.addEventListener("click", () => {
-        primitive.trigger.click();
-      });
-      return userTrigger;
-    }
-    return primitive.trigger;
+    return Styled({ children, onSelect, onOpenChange });
   }
-  DropdownMenuRoot.Trigger = MenuTrigger;
-  DropdownMenuRoot.Content = MenuContent;
-  DropdownMenuRoot.Item = MenuItem;
-  DropdownMenuRoot.Group = MenuGroup;
-  DropdownMenuRoot.Label = MenuLabel;
-  DropdownMenuRoot.Separator = MenuSeparator;
-  return DropdownMenuRoot;
+  return Object.assign(DropdownMenuRoot, {
+    Trigger: ComposedDropdownMenu.Trigger,
+    Content: ComposedDropdownMenu.Content,
+    Item: ComposedDropdownMenu.Item,
+    Group: ComposedDropdownMenu.Group,
+    Label: ComposedDropdownMenu.Label,
+    Separator: ComposedDropdownMenu.Separator
+  });
 }
 
-// src/components/primitives/hover-card.ts
-import { HoverCard } from "@vertz/ui-primitives";
+// src/components/primitives/hover-card.tsx
+import { ComposedHoverCard } from "@vertz/ui-primitives";
 function createThemedHoverCard(styles) {
-  return function themedHoverCard(options) {
-    const result = HoverCard.Root({
-      ...options,
-      positioning: { placement: "bottom", portal: true }
+  function HoverCardRoot({
+    children,
+    openDelay,
+    closeDelay,
+    onOpenChange
+  }) {
+    return ComposedHoverCard({
+      children,
+      openDelay,
+      closeDelay,
+      onOpenChange,
+      positioning: { placement: "bottom", portal: true },
+      classes: {
+        content: styles.content
+      }
     });
-    result.content.classList.add(styles.content);
-    return result;
-  };
+  }
+  return Object.assign(HoverCardRoot, {
+    Trigger: ComposedHoverCard.Trigger,
+    Content: ComposedHoverCard.Content
+  });
 }
 
 // src/components/primitives/menubar.ts
-import { Menubar } from "@vertz/ui-primitives";
+import { ComposedMenubar, withStyles as withStyles10 } from "@vertz/ui-primitives";
 function createThemedMenubar(styles) {
-  return function themedMenubar(options) {
-    const result = Menubar.Root(options);
-    result.root.classList.add(styles.root);
-    function themedMenu(value, label) {
-      const menu = result.Menu(value, label);
-      menu.trigger.classList.add(styles.trigger);
-      menu.content.classList.add(styles.content);
-      return {
-        trigger: menu.trigger,
-        content: menu.content,
-        Item: (val, itemLabel) => {
-          const item = menu.Item(val, itemLabel);
-          item.classList.add(styles.item);
-          return item;
-        },
-        Group: (groupLabel) => {
-          const group = menu.Group(groupLabel);
-          return {
-            el: group.el,
-            Item: (val, itemLabel) => {
-              const item = group.Item(val, itemLabel);
-              item.classList.add(styles.item);
-              return item;
-            }
-          };
-        },
-        Separator: () => {
-          const sep = menu.Separator();
-          sep.classList.add(styles.separator);
-          return sep;
-        }
-      };
-    }
-    return {
-      root: result.root,
-      state: result.state,
-      Menu: themedMenu
-    };
-  };
+  const Styled = withStyles10(ComposedMenubar, {
+    root: styles.root,
+    trigger: styles.trigger,
+    content: styles.content,
+    item: styles.item,
+    group: "",
+    label: styles.label,
+    separator: styles.separator
+  });
+  function MenubarRoot({ children, onSelect }) {
+    return Styled({ children, onSelect });
+  }
+  return Object.assign(MenubarRoot, {
+    Menu: ComposedMenubar.Menu,
+    Trigger: ComposedMenubar.Trigger,
+    Content: ComposedMenubar.Content,
+    Item: ComposedMenubar.Item,
+    Group: ComposedMenubar.Group,
+    Label: ComposedMenubar.Label,
+    Separator: ComposedMenubar.Separator
+  });
 }
 
-// src/components/primitives/navigation-menu.ts
-import { NavigationMenu } from "@vertz/ui-primitives";
+// src/components/primitives/navigation-menu.tsx
+import { ComposedNavigationMenu, withStyles as withStyles11 } from "@vertz/ui-primitives";
 function createThemedNavigationMenu(styles) {
-  return function themedNavigationMenu(options) {
-    const result = NavigationMenu.Root(options);
-    const originalItem = result.Item;
-    const originalLink = result.Link;
-    result.root.classList.add(styles.root);
-    result.list.classList.add(styles.list);
-    result.viewport.classList.add(styles.viewport);
-    return {
-      root: result.root,
-      list: result.list,
-      viewport: result.viewport,
-      state: result.state,
-      Item: (value, label) => {
-        const item = originalItem(value, label);
-        item.trigger.classList.add(styles.trigger);
-        item.content.classList.add(styles.content);
-        return item;
-      },
-      Link: (href, label) => {
-        const link = originalLink(href, label);
-        link.classList.add(styles.link);
-        return link;
-      }
-    };
-  };
+  const Styled = withStyles11(ComposedNavigationMenu, {
+    root: styles.root,
+    list: styles.list,
+    trigger: styles.trigger,
+    content: styles.content,
+    link: styles.link,
+    viewport: styles.viewport
+  });
+  function NavigationMenuRoot({
+    orientation,
+    delayOpen,
+    delayClose,
+    children
+  }) {
+    return Styled({
+      children,
+      orientation,
+      delayOpen,
+      delayClose
+    });
+  }
+  return Object.assign(NavigationMenuRoot, {
+    List: ComposedNavigationMenu.List,
+    Item: ComposedNavigationMenu.Item,
+    Trigger: ComposedNavigationMenu.Trigger,
+    Content: ComposedNavigationMenu.Content,
+    Link: ComposedNavigationMenu.Link,
+    Viewport: ComposedNavigationMenu.Viewport
+  });
 }
 
 // src/components/primitives/popover.ts
-import { resolveChildren as resolveChildren12 } from "@vertz/ui";
-import { Popover } from "@vertz/ui-primitives";
+import { ComposedPopover, withStyles as withStyles12 } from "@vertz/ui-primitives";
 function createThemedPopover(styles) {
-  function PopoverTrigger({ children }) {
-    const el = document.createElement("span");
-    el.dataset.slot = "popover-trigger";
-    el.style.display = "contents";
-    for (const node of resolveChildren12(children))
-      el.appendChild(node);
-    return el;
-  }
-  function PopoverContent({ children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "popover-content";
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren12(children))
-      el.appendChild(node);
-    return el;
-  }
-  function PopoverRoot({ children, ...options }) {
-    const onOpenChangeOrig = options.onOpenChange;
-    let userTrigger = null;
-    let contentChildren = [];
-    for (const node of resolveChildren12(children)) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "popover-trigger") {
-        userTrigger = node.firstElementChild ?? node;
-      } else if (slot === "popover-content") {
-        contentChildren = Array.from(node.childNodes);
-      }
-    }
-    const primitive = Popover.Root({
-      ...options,
-      positioning: { placement: "bottom-start", portal: true },
-      onOpenChange: (isOpen) => {
-        if (userTrigger) {
-          userTrigger.setAttribute("aria-expanded", String(isOpen));
-          userTrigger.setAttribute("data-state", isOpen ? "open" : "closed");
-        }
-        onOpenChangeOrig?.(isOpen);
-      }
-    });
-    primitive.content.classList.add(styles.content);
-    for (const node of contentChildren) {
-      primitive.content.appendChild(node);
-    }
-    if (userTrigger) {
-      userTrigger.setAttribute("aria-haspopup", "dialog");
-      userTrigger.setAttribute("aria-controls", primitive.content.id);
-      userTrigger.setAttribute("aria-expanded", String(options.defaultOpen ?? false));
-      userTrigger.setAttribute("data-state", options.defaultOpen ? "open" : "closed");
-      userTrigger.addEventListener("click", () => {
-        primitive.trigger.click();
-      });
-      return userTrigger;
-    }
-    return primitive.trigger;
+  const StyledPopover = withStyles12(ComposedPopover, {
+    content: styles.content
+  });
+  function PopoverRoot({ children, onOpenChange }) {
+    return StyledPopover({ children, onOpenChange });
   }
-  PopoverRoot.Trigger = PopoverTrigger;
-  PopoverRoot.Content = PopoverContent;
-  return PopoverRoot;
+  return Object.assign(PopoverRoot, {
+    Trigger: ComposedPopover.Trigger,
+    Content: ComposedPopover.Content
+  });
 }
 
 // src/components/primitives/progress.ts
-import { Progress } from "@vertz/ui-primitives";
+import { ComposedProgress } from "@vertz/ui-primitives";
 function createThemedProgress(styles) {
-  return function themedProgress(options) {
-    const result = Progress.Root(options);
-    result.root.classList.add(styles.root);
-    result.root.style.opacity = "1";
-    result.indicator.classList.add(styles.indicator);
-    return result;
+  return function ProgressRoot(props) {
+    return ComposedProgress({
+      ...props,
+      classes: { root: styles.root, indicator: styles.indicator }
+    });
   };
 }
 
 // src/components/primitives/radio-group.ts
-import { Radio } from "@vertz/ui-primitives";
-function createCircleIcon() {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("width", "8");
-  svg.setAttribute("height", "8");
-  svg.setAttribute("viewBox", "0 0 8 8");
-  svg.setAttribute("fill", "currentColor");
-  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  circle.setAttribute("cx", "4");
-  circle.setAttribute("cy", "4");
-  circle.setAttribute("r", "4");
-  svg.appendChild(circle);
-  return svg;
-}
+import { ComposedRadioGroup, withStyles as withStyles13 } from "@vertz/ui-primitives";
 function createThemedRadioGroup(styles) {
-  return function themedRadioGroup(options) {
-    const result = Radio.Root(options);
-    result.root.classList.add(styles.root);
-    const originalItem = result.Item;
-    return {
-      root: result.root,
-      state: result.state,
-      Item: (value, label) => {
-        const item = originalItem(value, label);
-        const labelText = item.textContent ?? "";
-        item.textContent = "";
-        item.classList.add(styles.item);
-        const indicator = document.createElement("span");
-        indicator.classList.add(styles.indicator);
-        const dataState = item.getAttribute("data-state") ?? "unchecked";
-        indicator.setAttribute("data-state", dataState);
-        indicator.appendChild(createCircleIcon());
-        item.appendChild(indicator);
-        const observer = new MutationObserver((mutations) => {
-          for (const mutation of mutations) {
-            if (mutation.attributeName === "data-state") {
-              const newState = item.getAttribute("data-state") ?? "unchecked";
-              indicator.setAttribute("data-state", newState);
-            }
-          }
-        });
-        observer.observe(item, { attributes: true, attributeFilter: ["data-state"] });
-        const wrapper = document.createElement("div");
-        wrapper.style.cssText = "display: flex; align-items: center; gap: 8px; cursor: pointer;";
-        item.remove();
-        wrapper.appendChild(item);
-        if (labelText) {
-          const labelEl = document.createElement("label");
-          labelEl.textContent = labelText;
-          labelEl.style.cssText = "font-size: 0.875rem; color: var(--color-foreground); cursor: pointer;";
-          labelEl.addEventListener("click", () => item.click());
-          wrapper.appendChild(labelEl);
-        }
-        result.root.appendChild(wrapper);
-        return wrapper;
-      }
-    };
-  };
+  const StyledRadioGroup = withStyles13(ComposedRadioGroup, {
+    root: styles.root,
+    item: styles.item,
+    indicator: styles.indicator,
+    indicatorIcon: styles.indicatorIcon
+  });
+  function RadioGroupRoot(props) {
+    return StyledRadioGroup(props);
+  }
+  return Object.assign(RadioGroupRoot, {
+    Item: ComposedRadioGroup.Item
+  });
 }
 
-// src/components/primitives/resizable-panel.ts
-import { ResizablePanel } from "@vertz/ui-primitives";
+// src/components/primitives/resizable-panel.tsx
+import { ComposedResizablePanel } from "@vertz/ui-primitives";
 function createThemedResizablePanel(styles) {
-  return function themedResizablePanel(options) {
-    const result = ResizablePanel.Root(options);
-    result.root.classList.add(styles.root);
-    const originalPanel = result.Panel;
-    const originalHandle = result.Handle;
-    return {
-      root: result.root,
-      state: result.state,
-      Panel: (panelOptions) => {
-        const panel = originalPanel(panelOptions);
-        panel.classList.add(styles.panel);
-        return panel;
-      },
-      Handle: () => {
-        const handle = originalHandle();
-        handle.classList.add(styles.handle);
-        return handle;
+  function ResizablePanelRoot({
+    children,
+    orientation,
+    onResize
+  }) {
+    return ComposedResizablePanel({
+      children,
+      orientation,
+      onResize,
+      classes: {
+        root: styles.root,
+        panel: styles.panel,
+        handle: styles.handle
       }
-    };
-  };
+    });
+  }
+  return Object.assign(ResizablePanelRoot, {
+    Panel: ComposedResizablePanel.Panel,
+    Handle: ComposedResizablePanel.Handle
+  });
 }
 
-// src/components/primitives/scroll-area.ts
-import { ScrollArea } from "@vertz/ui-primitives";
+// src/components/primitives/scroll-area.tsx
+import { ComposedScrollArea } from "@vertz/ui-primitives";
 function createThemedScrollArea(styles) {
-  return function themedScrollArea(options) {
-    const result = ScrollArea.Root(options);
-    result.root.classList.add(styles.root);
-    result.viewport.classList.add(styles.viewport);
-    result.scrollbarY.classList.add(styles.scrollbar);
-    result.thumbY.classList.add(styles.thumb);
-    result.scrollbarX.classList.add(styles.scrollbar);
-    result.thumbX.classList.add(styles.thumb);
-    return result;
-  };
+  function ScrollAreaRoot({ children, orientation }) {
+    return ComposedScrollArea({
+      children,
+      orientation,
+      classes: {
+        root: styles.root,
+        viewport: styles.viewport,
+        scrollbar: styles.scrollbar,
+        thumb: styles.thumb
+      }
+    });
+  }
+  return ScrollAreaRoot;
 }
 
 // src/components/primitives/select.ts
-import { resolveChildren as resolveChildren13 } from "@vertz/ui";
-import { Select } from "@vertz/ui-primitives";
-var idCounter4 = 0;
+import { ComposedSelect, withStyles as withStyles14 } from "@vertz/ui-primitives";
 function createThemedSelect(styles) {
-  function SelectTrigger({ children }) {
-    const el = document.createElement("span");
-    el.dataset.slot = "select-trigger";
-    el.style.display = "contents";
-    for (const node of resolveChildren13(children))
-      el.appendChild(node);
-    return el;
-  }
-  function SelectContent({ children }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "select-content";
-    el.style.display = "contents";
-    for (const node of resolveChildren13(children))
-      el.appendChild(node);
-    return el;
-  }
-  function SelectItem({ value, children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "select-item";
-    el.dataset.value = value;
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren13(children))
-      el.appendChild(node);
-    return el;
-  }
-  function SelectGroup({ label, children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "select-group";
-    el.dataset.label = label;
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren13(children))
-      el.appendChild(node);
-    return el;
-  }
-  function SelectSeparator() {
-    const el = document.createElement("hr");
-    el.dataset.slot = "select-separator";
-    return el;
-  }
-  function processItems(nodes, primitive, parentGroup) {
-    for (const node of nodes) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "select-item") {
-        const value = node.dataset.value;
-        const label = node.textContent ?? undefined;
-        const item = parentGroup ? parentGroup.Item(value, label) : primitive.Item(value, label);
-        item.classList.add(styles.item);
-        const indicator = document.createElement("span");
-        indicator.classList.add(styles.itemIndicator);
-        indicator.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
-        item.appendChild(indicator);
-      } else if (slot === "select-group") {
-        const groupLabel = node.dataset.label;
-        const group = primitive.Group(groupLabel);
-        group.el.classList.add(styles.group);
-        const labelEl = document.createElement("div");
-        labelEl.id = `select-group-label-${++idCounter4}`;
-        labelEl.textContent = groupLabel;
-        labelEl.classList.add(styles.label);
-        group.el.removeAttribute("aria-label");
-        group.el.setAttribute("aria-labelledby", labelEl.id);
-        group.el.prepend(labelEl);
-        processItems(Array.from(node.childNodes), primitive, group);
-      } else if (slot === "select-separator") {
-        const sep = primitive.Separator();
-        sep.classList.add(styles.separator);
-      }
-    }
-  }
-  function SelectRoot({ children, ...options }) {
-    let contentNodes = [];
-    for (const node of resolveChildren13(children)) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "select-trigger") {} else if (slot === "select-content") {
-        contentNodes = Array.from(node.childNodes);
-      }
-    }
-    const primitive = Select.Root({
-      ...options,
-      positioning: { placement: "bottom-start", portal: true, matchReferenceWidth: true }
+  const StyledSelect = withStyles14(ComposedSelect, {
+    trigger: styles.trigger,
+    content: styles.content,
+    item: styles.item,
+    itemIndicator: styles.itemIndicator,
+    group: styles.group,
+    label: styles.label,
+    separator: styles.separator
+  });
+  function SelectRoot({
+    defaultValue,
+    placeholder,
+    onValueChange,
+    children
+  }) {
+    return StyledSelect({
+      children,
+      defaultValue,
+      placeholder,
+      onValueChange
     });
-    primitive.trigger.classList.add(styles.trigger);
-    primitive.content.classList.add(styles.content);
-    const chevron = document.createElement("span");
-    chevron.style.cssText = "display:flex;align-items:center;opacity:0.5;flex-shrink:0;pointer-events:none;";
-    chevron.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>';
-    primitive.trigger.appendChild(chevron);
-    processItems(contentNodes, primitive);
-    return primitive.trigger;
   }
-  SelectRoot.Trigger = SelectTrigger;
-  SelectRoot.Content = SelectContent;
-  SelectRoot.Item = SelectItem;
-  SelectRoot.Group = SelectGroup;
-  SelectRoot.Separator = SelectSeparator;
-  return SelectRoot;
+  return Object.assign(SelectRoot, {
+    Trigger: ComposedSelect.Trigger,
+    Content: ComposedSelect.Content,
+    Item: ComposedSelect.Item,
+    Group: ComposedSelect.Group,
+    Separator: ComposedSelect.Separator
+  });
 }
 
 // src/components/primitives/sheet.ts
-import { resolveChildren as resolveChildren14 } from "@vertz/ui";
-import { Dialog as Dialog4 } from "@vertz/ui-primitives";
+import { ComposedSheet as ComposedSheet2 } from "@vertz/ui-primitives";
 var PANEL_CLASS_MAP2 = {
   left: "panelLeft",
   right: "panelRight",
@@ -1580,256 +1023,86 @@ var PANEL_CLASS_MAP2 = {
   bottom: "panelBottom"
 };
 function createThemedSheet(styles) {
-  function SheetTrigger({ children }) {
-    const el = document.createElement("span");
-    el.dataset.slot = "sheet-trigger";
-    el.style.display = "contents";
-    for (const node of resolveChildren14(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function SheetContent({ children }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "sheet-content";
-    el.style.display = "contents";
-    for (const node of resolveChildren14(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function SheetTitle({ children, class: className }) {
-    const el = document.createElement("h2");
-    el.classList.add(styles.title);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren14(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function SheetDescription({ children, class: className }) {
-    const el = document.createElement("p");
-    el.classList.add(styles.description);
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren14(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function SheetClose({ children, class: className }) {
-    const el = document.createElement("button");
-    el.dataset.slot = "sheet-close";
-    el.classList.add(styles.close);
-    if (className)
-      el.classList.add(className);
-    const childNodes = resolveChildren14(children);
-    if (childNodes.length > 0) {
-      for (const node of childNodes) {
-        el.appendChild(node);
-      }
-    } else {
-      el.textContent = "×";
-    }
-    return el;
-  }
-  function SheetRoot({ children, side, ...options }) {
+  function SheetRoot({ children, side, onOpenChange }) {
     const resolvedSide = side ?? "right";
-    const onOpenChangeOrig = options.onOpenChange;
-    let userTrigger = null;
-    let contentChildren = [];
-    for (const node of resolveChildren14(children)) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "sheet-trigger") {
-        userTrigger = node.firstElementChild ?? node;
-      } else if (slot === "sheet-content") {
-        contentChildren = Array.from(node.childNodes);
-      }
-    }
-    const primitive = Dialog4.Root({
-      ...options,
-      onOpenChange: (isOpen) => {
-        if (userTrigger) {
-          userTrigger.setAttribute("aria-expanded", String(isOpen));
-          userTrigger.setAttribute("data-state", isOpen ? "open" : "closed");
-        }
-        onOpenChangeOrig?.(isOpen);
+    const panelClass = styles[PANEL_CLASS_MAP2[resolvedSide]];
+    return ComposedSheet2({
+      children,
+      side: resolvedSide,
+      onOpenChange,
+      classes: {
+        overlay: styles.overlay,
+        content: panelClass,
+        title: styles.title,
+        description: styles.description,
+        close: styles.close
       }
     });
-    primitive.overlay.classList.add(styles.overlay);
-    primitive.content.classList.add(styles[PANEL_CLASS_MAP2[resolvedSide]]);
-    primitive.close.classList.add(styles.close);
-    primitive.close.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
-    primitive.close.setAttribute("aria-label", "Close");
-    primitive.content.style.top = "";
-    primitive.content.style.left = "";
-    primitive.content.style.transform = "";
-    for (const node of contentChildren) {
-      primitive.content.appendChild(node);
-    }
-    primitive.content.appendChild(primitive.close);
-    document.body.appendChild(primitive.overlay);
-    document.body.appendChild(primitive.content);
-    if (userTrigger) {
-      userTrigger.setAttribute("aria-haspopup", "dialog");
-      userTrigger.setAttribute("aria-controls", primitive.content.id);
-      userTrigger.setAttribute("aria-expanded", String(options.defaultOpen ?? false));
-      userTrigger.setAttribute("data-state", options.defaultOpen ? "open" : "closed");
-      userTrigger.addEventListener("click", () => {
-        if (primitive.state.open.peek()) {
-          primitive.hide();
-        } else {
-          primitive.show();
-        }
-      });
-      return userTrigger;
-    }
-    return primitive.trigger;
   }
-  SheetRoot.Trigger = SheetTrigger;
-  SheetRoot.Content = SheetContent;
-  SheetRoot.Title = SheetTitle;
-  SheetRoot.Description = SheetDescription;
-  SheetRoot.Close = SheetClose;
-  return SheetRoot;
+  return Object.assign(SheetRoot, {
+    Trigger: ComposedSheet2.Trigger,
+    Content: ComposedSheet2.Content,
+    Title: ComposedSheet2.Title,
+    Description: ComposedSheet2.Description,
+    Close: ComposedSheet2.Close
+  });
 }
 
 // src/components/primitives/slider.ts
-import { Slider } from "@vertz/ui-primitives";
+import { ComposedSlider } from "@vertz/ui-primitives";
 function createThemedSlider(styles) {
-  return function themedSlider(options) {
-    const result = Slider.Root(options);
-    result.root.classList.add(styles.root);
-    result.track.classList.add(styles.track);
-    result.thumb.classList.add(styles.thumb);
-    const fill = result.track.querySelector('[data-part="fill"]');
-    if (fill) {
-      fill.style.backgroundColor = "var(--color-primary)";
-    }
-    return result;
+  return function SliderRoot(props) {
+    return ComposedSlider({
+      ...props,
+      classes: {
+        root: styles.root,
+        track: styles.track,
+        range: styles.range,
+        thumb: styles.thumb
+      }
+    });
   };
 }
 
 // src/components/primitives/switch.ts
-import { Switch } from "@vertz/ui-primitives";
+import { ComposedSwitch, withStyles as withStyles15 } from "@vertz/ui-primitives";
 function createThemedSwitch(styles) {
-  return function themedSwitch(options) {
-    const { size, ...primitiveOptions } = options ?? {};
-    const root = Switch.Root(primitiveOptions);
-    root.classList.add(size === "sm" ? styles.rootSm : styles.root);
-    const thumb = document.createElement("span");
-    thumb.classList.add(size === "sm" ? styles.thumbSm : styles.thumb);
-    const initialState = root.getAttribute("data-state") ?? "unchecked";
-    thumb.setAttribute("data-state", initialState);
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.attributeName === "data-state") {
-          const newState = root.getAttribute("data-state") ?? "unchecked";
-          thumb.setAttribute("data-state", newState);
-        }
-      }
-    });
-    observer.observe(root, { attributes: true, attributeFilter: ["data-state"] });
-    root.appendChild(thumb);
-    return root;
+  const DefaultSwitch = withStyles15(ComposedSwitch, {
+    root: styles.root,
+    thumb: styles.thumb
+  });
+  const SmSwitch = withStyles15(ComposedSwitch, {
+    root: styles.rootSm,
+    thumb: styles.thumbSm
+  });
+  return function SwitchRoot({ size, ...props }) {
+    const Styled = size === "sm" ? SmSwitch : DefaultSwitch;
+    return Styled(props);
   };
 }
 
 // src/components/primitives/tabs.ts
-import { resolveChildren as resolveChildren15 } from "@vertz/ui";
-import { Tabs } from "@vertz/ui-primitives";
+import { ComposedTabs, withStyles as withStyles16 } from "@vertz/ui-primitives";
 function createThemedTabs(styles) {
-  function TabsList({ children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "tabs-list";
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren15(children))
-      el.appendChild(node);
-    return el;
-  }
-  function TabsTrigger({ value, children, class: className }) {
-    const el = document.createElement("button");
-    el.setAttribute("type", "button");
-    el.dataset.slot = "tabs-trigger";
-    el.dataset.value = value;
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren15(children))
-      el.appendChild(node);
-    return el;
-  }
-  function TabsContent({ value, children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "tabs-content";
-    el.dataset.value = value;
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren15(children))
-      el.appendChild(node);
-    return el;
-  }
+  const DefaultTabs = withStyles16(ComposedTabs, {
+    list: styles.list,
+    trigger: styles.trigger,
+    panel: styles.panel
+  });
+  const LineTabs = withStyles16(ComposedTabs, {
+    list: styles.listLine,
+    trigger: styles.triggerLine,
+    panel: styles.panel
+  });
   function TabsRoot({ defaultValue, variant, children }) {
-    const isLine = variant === "line";
-    const result = Tabs.Root({ defaultValue });
-    result.list.classList.add(isLine ? styles.listLine : styles.list);
-    const childNodes = resolveChildren15(children);
-    let listSlot = null;
-    const triggerSlots = [];
-    const contentSlots = [];
-    for (const node of childNodes) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "tabs-list") {
-        listSlot = node;
-      } else if (slot === "tabs-content") {
-        contentSlots.push(node);
-      }
-    }
-    if (listSlot) {
-      for (const child of Array.from(listSlot.childNodes)) {
-        if (child instanceof HTMLElement && child.dataset.slot === "tabs-trigger") {
-          triggerSlots.push(child);
-        }
-      }
-    }
-    const tabsByValue = new Map;
-    for (const triggerEl of triggerSlots) {
-      const value = triggerEl.dataset.value;
-      if (!value)
-        continue;
-      const tab = result.Tab(value);
-      tabsByValue.set(value, tab);
-      tab.trigger.classList.add(isLine ? styles.triggerLine : styles.trigger);
-      tab.trigger.textContent = "";
-      while (triggerEl.firstChild) {
-        tab.trigger.appendChild(triggerEl.firstChild);
-      }
-    }
-    for (const contentEl of contentSlots) {
-      const value = contentEl.dataset.value;
-      if (!value)
-        continue;
-      const tab = tabsByValue.get(value);
-      if (!tab)
-        continue;
-      tab.panel.classList.add(styles.panel);
-      while (contentEl.firstChild) {
-        tab.panel.appendChild(contentEl.firstChild);
-      }
-    }
-    return result.root;
+    const Styled = variant === "line" ? LineTabs : DefaultTabs;
+    return Styled({ children, defaultValue });
   }
-  TabsRoot.List = TabsList;
-  TabsRoot.Trigger = TabsTrigger;
-  TabsRoot.Content = TabsContent;
-  return TabsRoot;
+  return Object.assign(TabsRoot, {
+    List: ComposedTabs.List,
+    Trigger: ComposedTabs.Trigger,
+    Content: ComposedTabs.Content
+  });
 }
 
 // src/components/primitives/toast.ts
@@ -1849,98 +1122,74 @@ function createThemedToast(styles) {
 }
 
 // src/components/primitives/toggle.ts
-import { Toggle } from "@vertz/ui-primitives";
+import { ComposedToggle, withStyles as withStyles17 } from "@vertz/ui-primitives";
 function createThemedToggle(styles) {
-  return function themedToggle(options) {
-    const root = Toggle.Root(options);
-    root.classList.add(styles.root);
-    return root;
+  const StyledToggle = withStyles17(ComposedToggle, {
+    root: styles.root
+  });
+  return function ToggleRoot(props) {
+    return StyledToggle(props);
   };
 }
 
-// src/components/primitives/toggle-group.ts
-import { ToggleGroup } from "@vertz/ui-primitives";
+// src/components/primitives/toggle-group.tsx
+import { ComposedToggleGroup, withStyles as withStyles18 } from "@vertz/ui-primitives";
 function createThemedToggleGroup(styles) {
-  return function themedToggleGroup(options) {
-    const result = ToggleGroup.Root(options);
-    result.root.classList.add(styles.root);
-    const originalItem = result.Item;
-    result.Item = (value) => {
-      const item = originalItem(value);
-      item.classList.add(styles.item);
-      return item;
-    };
-    return result;
-  };
-}
-
-// src/components/primitives/tooltip.ts
-import { resolveChildren as resolveChildren16 } from "@vertz/ui";
-import { Tooltip } from "@vertz/ui-primitives";
-function createThemedTooltip(styles) {
-  function TooltipTrigger({ children }) {
-    const el = document.createElement("span");
-    el.dataset.slot = "tooltip-trigger";
-    el.style.display = "contents";
-    for (const node of resolveChildren16(children))
-      el.appendChild(node);
-    return el;
-  }
-  function TooltipContent({ children, class: className }) {
-    const el = document.createElement("div");
-    el.dataset.slot = "tooltip-content";
-    el.style.display = "contents";
-    if (className)
-      el.classList.add(className);
-    for (const node of resolveChildren16(children))
-      el.appendChild(node);
-    return el;
+  const StyledToggleGroup = withStyles18(ComposedToggleGroup, {
+    root: styles.root,
+    item: styles.item
+  });
+  function ToggleGroupRoot(props) {
+    return StyledToggleGroup(props);
   }
-  function TooltipRoot({ children, ...options }) {
-    let triggerChildren = [];
-    let contentChildren = [];
-    for (const node of resolveChildren16(children)) {
-      if (!(node instanceof HTMLElement))
-        continue;
-      const slot = node.dataset.slot;
-      if (slot === "tooltip-trigger") {
-        triggerChildren = Array.from(node.childNodes);
-      } else if (slot === "tooltip-content") {
-        contentChildren = Array.from(node.childNodes);
-      }
-    }
-    const primitive = Tooltip.Root({
-      ...options,
-      positioning: { placement: "top", portal: true }
-    });
-    primitive.content.classList.add(styles.content);
-    for (const node of triggerChildren) {
-      primitive.trigger.appendChild(node);
-    }
-    for (const node of contentChildren) {
-      primitive.content.appendChild(node);
-    }
-    return primitive.trigger;
+  return Object.assign(ToggleGroupRoot, {
+    Item: ComposedToggleGroup.Item
+  });
+}
+
+// src/components/primitives/tooltip.ts
+import { ComposedTooltip, withStyles as withStyles19 } from "@vertz/ui-primitives";
+function createThemedTooltip(styles) {
+  const StyledTooltip = withStyles19(ComposedTooltip, {
+    content: styles.content
+  });
+  function TooltipRoot({ children, delay }) {
+    return StyledTooltip({ children, delay });
   }
-  TooltipRoot.Trigger = TooltipTrigger;
-  TooltipRoot.Content = TooltipContent;
-  return TooltipRoot;
+  return Object.assign(TooltipRoot, {
+    Trigger: ComposedTooltip.Trigger,
+    Content: ComposedTooltip.Content
+  });
 }
 
 // src/components/separator.ts
 function createSeparatorComponent(separatorStyles) {
-  return function Separator({ class: className }) {
+  return function Separator({
+    orientation = "horizontal",
+    className,
+    class: classProp
+  }) {
+    const effectiveClass = className ?? classProp;
+    const orientationClass = orientation === "vertical" ? separatorStyles.vertical : separatorStyles.horizontal;
     const el = document.createElement("hr");
-    el.className = [separatorStyles.base, className].filter(Boolean).join(" ");
+    el.className = [separatorStyles.base, orientationClass, effectiveClass].filter(Boolean).join(" ");
+    el.setAttribute("role", "separator");
+    el.setAttribute("aria-orientation", orientation);
     return el;
   };
 }
 
 // src/components/skeleton.ts
 function createSkeletonComponents(skeletonStyles) {
-  function Skeleton({ class: className, width, height } = {}) {
+  function Skeleton({
+    className,
+    class: classProp,
+    width,
+    height
+  } = {}) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("div");
-    el.className = [skeletonStyles.base, className].filter(Boolean).join(" ");
+    el.className = [skeletonStyles.base, effectiveClass].filter(Boolean).join(" ");
     el.setAttribute("aria-hidden", "true");
     if (width)
       el.style.width = width;
@@ -1952,75 +1201,99 @@ function createSkeletonComponents(skeletonStyles) {
 }
 
 // src/components/table.ts
-import { resolveChildren as resolveChildren17 } from "@vertz/ui";
+import { resolveChildren as resolveChildren9 } from "@vertz/ui";
 function createTableComponents(tableStyles) {
-  function Table({ class: className, children }) {
+  function Table({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const wrapper = document.createElement("div");
     wrapper.style.position = "relative";
     wrapper.style.width = "100%";
     wrapper.style.overflowX = "auto";
     const table = document.createElement("table");
     table.style.borderCollapse = "collapse";
-    table.className = [tableStyles.root, className].filter(Boolean).join(" ");
-    for (const node of resolveChildren17(children)) {
+    table.className = [tableStyles.root, effectiveClass].filter(Boolean).join(" ");
+    for (const node of resolveChildren9(children)) {
       table.appendChild(node);
     }
     wrapper.appendChild(table);
     return wrapper;
   }
-  function TableHeader({ class: className, children }) {
+  function TableHeader({
+    className,
+    class: classProp,
+    children
+  }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("thead");
-    el.className = [tableStyles.header, className].filter(Boolean).join(" ");
-    for (const node of resolveChildren17(children)) {
+    el.className = [tableStyles.header, effectiveClass].filter(Boolean).join(" ");
+    for (const node of resolveChildren9(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function TableBody({ class: className, children }) {
+  function TableBody({
+    className,
+    class: classProp,
+    children
+  }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("tbody");
-    el.className = [tableStyles.body, className].filter(Boolean).join(" ");
-    for (const node of resolveChildren17(children)) {
+    el.className = [tableStyles.body, effectiveClass].filter(Boolean).join(" ");
+    for (const node of resolveChildren9(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function TableRow({ class: className, children }) {
+  function TableRow({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("tr");
-    el.className = [tableStyles.row, className].filter(Boolean).join(" ");
-    for (const node of resolveChildren17(children)) {
+    el.className = [tableStyles.row, effectiveClass].filter(Boolean).join(" ");
+    for (const node of resolveChildren9(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function TableHead({ class: className, children }) {
+  function TableHead({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("th");
     el.scope = "col";
-    el.className = [tableStyles.head, className].filter(Boolean).join(" ");
-    for (const node of resolveChildren17(children)) {
+    el.className = [tableStyles.head, effectiveClass].filter(Boolean).join(" ");
+    for (const node of resolveChildren9(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function TableCell({ class: className, children }) {
+  function TableCell({ className, class: classProp, children }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("td");
-    el.className = [tableStyles.cell, className].filter(Boolean).join(" ");
-    for (const node of resolveChildren17(children)) {
+    el.className = [tableStyles.cell, effectiveClass].filter(Boolean).join(" ");
+    for (const node of resolveChildren9(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function TableCaption({ class: className, children }) {
+  function TableCaption({
+    className,
+    class: classProp,
+    children
+  }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("caption");
-    el.className = [tableStyles.caption, className].filter(Boolean).join(" ");
-    for (const node of resolveChildren17(children)) {
+    el.className = [tableStyles.caption, effectiveClass].filter(Boolean).join(" ");
+    for (const node of resolveChildren9(children)) {
       el.appendChild(node);
     }
     return el;
   }
-  function TableFooter({ class: className, children }) {
+  function TableFooter({
+    className,
+    class: classProp,
+    children
+  }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("tfoot");
-    el.className = [tableStyles.footer, className].filter(Boolean).join(" ");
-    for (const node of resolveChildren17(children)) {
+    el.className = [tableStyles.footer, effectiveClass].filter(Boolean).join(" ");
+    for (const node of resolveChildren9(children)) {
       el.appendChild(node);
     }
     return el;
@@ -2038,9 +1311,11 @@ function createTableComponents(tableStyles) {
 }
 
 // src/components/textarea.ts
+import { applyProps as applyProps3 } from "@vertz/ui-primitives/utils";
 function createTextareaComponent(textareaStyles) {
   return function Textarea({
-    class: className,
+    className,
+    class: classProp,
     name,
     placeholder,
     disabled,
@@ -2048,8 +1323,9 @@ function createTextareaComponent(textareaStyles) {
     rows,
     ...attrs
   }) {
+    const effectiveClass = className ?? classProp;
     const el = document.createElement("textarea");
-    el.className = [textareaStyles.base, className].filter(Boolean).join(" ");
+    el.className = [textareaStyles.base, effectiveClass].filter(Boolean).join(" ");
     if (name !== undefined)
       el.name = name;
     if (placeholder !== undefined)
@@ -2060,11 +1336,7 @@ function createTextareaComponent(textareaStyles) {
       el.value = value;
     if (rows !== undefined)
       el.rows = rows;
-    for (const [key, val] of Object.entries(attrs)) {
-      if (val !== undefined && val !== null) {
-        el.setAttribute(key, String(val));
-      }
-    }
+    applyProps3(el, attrs);
     return el;
   };
 }
@@ -2092,12 +1364,12 @@ function createAccordionStyles() {
       "font:medium",
       "cursor:pointer",
       {
-        "&": [
-          { property: "border-radius", value: "0.5rem" },
-          { property: "padding-top", value: "0.625rem" },
-          { property: "padding-bottom", value: "0.625rem" }
-        ],
-        "&:hover": [{ property: "text-decoration", value: "underline" }]
+        "&": {
+          "border-radius": "0.5rem",
+          "padding-top": "0.625rem",
+          "padding-bottom": "0.625rem"
+        },
+        "&:hover": { "text-decoration": "underline" }
       }
     ],
     accordionContent: [
@@ -2108,6 +1380,12 @@ function createAccordionStyles() {
       },
       {
         '&[data-state="closed"]': [animationDecl(`${accordionUp} 200ms ease-out forwards`)]
+      },
+      {
+        '& [data-part="content-inner"]': {
+          "padding-bottom": "1rem",
+          "padding-top": "0"
+        }
       }
     ]
   });
@@ -2136,11 +1414,7 @@ function createAlertStyles() {
     ],
     alertDestructive: ["text:destructive", "bg:card"],
     alertTitle: ["font:medium", "leading:none", "tracking:tight", "mb:1"],
-    alertDescription: [
-      "text:muted-foreground",
-      "text:sm",
-      { "&": [{ property: "line-height", value: "1.625" }] }
-    ]
+    alertDescription: ["text:muted-foreground", "text:sm", { "&": { "line-height": "1.625" } }]
   });
   return {
     root: s.alertRoot,
@@ -2156,10 +1430,9 @@ var focusRing = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createAlertDialogStyles() {
@@ -2169,11 +1442,11 @@ function createAlertDialogStyles() {
       "inset:0",
       "z:50",
       {
-        "&": [
-          { property: "background-color", value: "oklch(0 0 0 / 10%)" },
-          { property: "backdrop-filter", value: "blur(4px)" },
-          { property: "-webkit-backdrop-filter", value: "blur(4px)" }
-        ]
+        "&": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-fade-in 100ms ease-out forwards")]
@@ -2183,27 +1456,35 @@ function createAlertDialogStyles() {
       }
     ],
     alertDialogPanel: [
-      "fixed",
-      "z:50",
       "bg:background",
       "gap:4",
       {
-        "&": [
-          { property: "display", value: "grid" },
-          { property: "width", value: "100%" },
-          { property: "max-width", value: "calc(100% - 2rem)" },
-          {
-            property: "box-shadow",
-            value: "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)"
-          },
-          { property: "border-radius", value: "0.75rem" },
-          { property: "padding", value: "1rem" },
-          { property: "inset", value: "0" },
-          { property: "margin", value: "auto" },
-          { property: "height", value: "fit-content" },
-          { property: "container-type", value: "inline-size" }
-        ],
-        "@media (min-width: 640px)": [{ property: "max-width", value: "24rem" }]
+        "&": {
+          display: "grid",
+          width: "100%",
+          "max-width": "calc(100% - 2rem)",
+          "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)",
+          "border-radius": "0.75rem",
+          padding: "1rem",
+          margin: "auto",
+          height: "fit-content",
+          outline: "none",
+          border: "none",
+          "container-type": "inline-size"
+        },
+        "&:not([open])": { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 100ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 100ms ease-out forwards"
+        },
+        "@media (min-width: 640px)": { "max-width": "24rem" }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-zoom-in 100ms ease-out forwards")]
@@ -2214,10 +1495,10 @@ function createAlertDialogStyles() {
     ],
     alertDialogTitle: [
       {
-        "&": [
-          { property: "font-size", value: "1rem" },
-          { property: "font-weight", value: "500" }
-        ]
+        "&": {
+          "font-size": "1rem",
+          "font-weight": "500"
+        }
       }
     ],
     alertDialogDescription: ["text:sm", "text:muted-foreground"],
@@ -2225,21 +1506,18 @@ function createAlertDialogStyles() {
       "flex",
       "gap:2",
       {
-        "&": [
-          { property: "flex-direction", value: "column-reverse" },
-          {
-            property: "background-color",
-            value: "color-mix(in oklch, var(--color-muted) 50%, transparent)"
-          },
-          { property: "margin", value: "0 -1rem -1rem -1rem" },
-          { property: "border-radius", value: "0 0 0.75rem 0.75rem" },
-          { property: "border-top", value: "1px solid var(--color-border)" },
-          { property: "padding", value: "1rem" }
-        ],
-        "@container (min-width: 20rem)": [
-          { property: "flex-direction", value: "row" },
-          { property: "justify-content", value: "flex-end" }
-        ]
+        "&": {
+          "flex-direction": "column-reverse",
+          "background-color": "color-mix(in oklch, var(--color-muted) 50%, transparent)",
+          margin: "0 -1rem -1rem -1rem",
+          "border-radius": "0 0 0.75rem 0.75rem",
+          "border-top": "1px solid var(--color-border)",
+          padding: "1rem"
+        },
+        "@container (min-width: 20rem)": {
+          "flex-direction": "row",
+          "justify-content": "flex-end"
+        }
       }
     ],
     alertDialogCancel: [
@@ -2272,7 +1550,7 @@ function createAlertDialogStyles() {
       "font:medium",
       "cursor:pointer",
       "transition:colors",
-      { "&:hover": [{ property: "opacity", value: "0.9" }] },
+      { "&:hover": [{ opacity: "0.9" }] },
       focusRing
     ]
   });
@@ -2296,10 +1574,10 @@ function createAvatarStyles() {
       "h:full",
       "w:full",
       {
-        "&": [
-          { property: "aspect-ratio", value: "1 / 1" },
-          { property: "object-fit", value: "cover" }
-        ]
+        "&": {
+          "aspect-ratio": "1 / 1",
+          "object-fit": "cover"
+        }
       }
     ],
     avatarFallback: [
@@ -2317,7 +1595,7 @@ function createAvatarStyles() {
     avatarRootSm: ["h:6", "w:6"],
     avatarRootLg: ["h:10", "w:10"],
     avatarRootXl: ["h:12", "w:12"],
-    avatarFallbackSm: [{ "&": [{ property: "font-size", value: "0.625rem" }] }],
+    avatarFallbackSm: [{ "&": { "font-size": "0.625rem" } }],
     avatarFallbackLg: ["text:sm"],
     avatarFallbackXl: ["text:base"]
   });
@@ -2368,10 +1646,9 @@ var focusRing2 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createCalendarStyles() {
@@ -2392,18 +1669,18 @@ function createCalendarStyles() {
       { "&:hover": ["bg:accent", "text:accent-foreground"] },
       focusRing2,
       {
-        "&": [
-          { property: "height", value: "1.75rem" },
-          { property: "width", value: "1.75rem" }
-        ]
+        "&": {
+          height: "1.75rem",
+          width: "1.75rem"
+        }
       }
     ],
     calendarGrid: [
       {
-        "&": [
-          { property: "width", value: "100%" },
-          { property: "border-collapse", value: "collapse" }
-        ]
+        "&": {
+          width: "100%",
+          "border-collapse": "collapse"
+        }
       }
     ],
     calendarHeadCell: [
@@ -2411,18 +1688,18 @@ function createCalendarStyles() {
       "text:xs",
       "font:medium",
       {
-        "&": [
-          { property: "width", value: "2rem" },
-          { property: "text-align", value: "center" }
-        ]
+        "&": {
+          width: "2rem",
+          "text-align": "center"
+        }
       }
     ],
     calendarCell: [
       {
-        "&": [
-          { property: "text-align", value: "center" },
-          { property: "padding", value: "0" }
-        ]
+        "&": {
+          "text-align": "center",
+          padding: "0"
+        }
       }
     ],
     calendarDayButton: [
@@ -2436,10 +1713,10 @@ function createCalendarStyles() {
       "transition:colors",
       focusRing2,
       {
-        "&": [
-          { property: "height", value: "2rem" },
-          { property: "width", value: "2rem" }
-        ]
+        "&": {
+          height: "2rem",
+          width: "2rem"
+        }
       },
       { "&:hover": ["bg:accent", "text:accent-foreground"] },
       { '&[aria-selected="true"]': ["bg:primary", "text:primary-foreground"] },
@@ -2475,23 +1752,20 @@ function createCard() {
       "py:4",
       "text:sm",
       {
-        "&": [
-          { property: "border-radius", value: "0.75rem" },
-          {
-            property: "box-shadow",
-            value: "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)"
-          }
-        ]
+        "&": {
+          "border-radius": "0.75rem",
+          "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)"
+        }
       }
     ],
     cardHeader: ["flex", "flex-col", "gap:1", "px:4"],
     cardTitle: [
       "font:medium",
       {
-        "&": [
-          { property: "font-size", value: "1rem" },
-          { property: "line-height", value: "1.375" }
-        ]
+        "&": {
+          "font-size": "1rem",
+          "line-height": "1.375"
+        }
       }
     ],
     cardDescription: ["text:sm", "text:muted-foreground"],
@@ -2504,14 +1778,11 @@ function createCard() {
       "border-t:1",
       "border:border",
       {
-        "&": [
-          {
-            property: "background-color",
-            value: "color-mix(in oklch, var(--color-muted) 50%, transparent)"
-          },
-          { property: "border-radius", value: "0 0 0.75rem 0.75rem" },
-          { property: "margin-bottom", value: "-1rem" }
-        ]
+        "&": {
+          "background-color": "color-mix(in oklch, var(--color-muted) 50%, transparent)",
+          "border-radius": "0 0 0.75rem 0.75rem",
+          "margin-bottom": "-1rem"
+        }
       }
     ],
     cardAction: ["ml:auto"]
@@ -2536,11 +1807,11 @@ function createCarouselStyles() {
     carouselSlide: [
       "shrink-0",
       {
-        "&": [
-          { property: "min-width", value: "0" },
-          { property: "flex-grow", value: "0" },
-          { property: "flex-basis", value: "100%" }
-        ]
+        "&": {
+          "min-width": "0",
+          "flex-grow": "0",
+          "flex-basis": "100%"
+        }
       },
       { '&[data-state="inactive"]': ["opacity:0"] },
       { '&[data-state="active"]': ["opacity:1"] }
@@ -2558,11 +1829,11 @@ function createCarouselStyles() {
       "justify:center",
       "cursor:pointer",
       {
-        "&": [
-          { property: "left", value: "0.5rem" },
-          { property: "top", value: "50%" },
-          { property: "transform", value: "translateY(-50%)" }
-        ]
+        "&": {
+          left: "0.5rem",
+          top: "50%",
+          transform: "translateY(-50%)"
+        }
       },
       { "&:hover": ["bg:accent", "text:accent-foreground"] },
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] }
@@ -2580,11 +1851,11 @@ function createCarouselStyles() {
       "justify:center",
       "cursor:pointer",
       {
-        "&": [
-          { property: "right", value: "0.5rem" },
-          { property: "top", value: "50%" },
-          { property: "transform", value: "translateY(-50%)" }
-        ]
+        "&": {
+          right: "0.5rem",
+          top: "50%",
+          transform: "translateY(-50%)"
+        }
       },
       { "&:hover": ["bg:accent", "text:accent-foreground"] },
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] }
@@ -2606,8 +1877,7 @@ var focusRing3 = {
     "outline-none",
     "border:ring",
     {
-      property: "box-shadow",
-      value: "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      "box-shadow": "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
     }
   ]
 };
@@ -2624,9 +1894,7 @@ function createCheckboxStyles() {
       "border:input",
       "cursor:pointer",
       "transition:colors",
-      { "&": [{ property: "padding", value: "0" }] },
-      { "&": [{ property: "background", value: "transparent" }] },
-      { "&": [{ property: "border-radius", value: "4px" }] },
+      { "&": { padding: "0", background: "transparent", "border-radius": "4px" } },
       { [DARK]: [bgOpacity("input", 30)] },
       focusRing3,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
@@ -2678,10 +1946,9 @@ var focusRing4 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createCommandStyles() {
@@ -2707,21 +1974,21 @@ function createCommandStyles() {
       "outline-none",
       { "&::placeholder": ["text:muted-foreground"] },
       {
-        "&": [
-          { property: "height", value: "2.5rem" },
-          { property: "border-bottom", value: "1px solid var(--color-border)" }
-        ]
+        "&": {
+          height: "2.5rem",
+          "border-bottom": "1px solid var(--color-border)"
+        }
       },
       focusRing4
     ],
     commandList: [
       "p:1",
       {
-        "&": [
-          { property: "max-height", value: "300px" },
-          { property: "overflow-y", value: "auto" },
-          { property: "overflow-x", value: "hidden" }
-        ]
+        "&": {
+          "max-height": "300px",
+          "overflow-y": "auto",
+          "overflow-x": "hidden"
+        }
       }
     ],
     commandItem: [
@@ -2732,10 +1999,10 @@ function createCommandStyles() {
       "text:sm",
       "cursor:pointer",
       {
-        "&": [
-          { property: "padding-top", value: "0.375rem" },
-          { property: "padding-bottom", value: "0.375rem" }
-        ]
+        "&": {
+          "padding-top": "0.375rem",
+          "padding-bottom": "0.375rem"
+        }
       },
       { '&[aria-selected="true"]': ["bg:accent", "text:accent-foreground"] }
     ],
@@ -2746,21 +2013,21 @@ function createCommandStyles() {
       "font:medium",
       "text:muted-foreground",
       {
-        "&": [
-          { property: "padding-top", value: "0.375rem" },
-          { property: "padding-bottom", value: "0.375rem" }
-        ]
+        "&": {
+          "padding-top": "0.375rem",
+          "padding-bottom": "0.375rem"
+        }
       }
     ],
     commandSeparator: [
       {
-        "&": [
-          { property: "margin-left", value: "-0.25rem" },
-          { property: "margin-right", value: "-0.25rem" },
-          { property: "height", value: "1px" },
-          { property: "background-color", value: "var(--color-border)" },
-          { property: "border", value: "none" }
-        ]
+        "&": {
+          "margin-left": "-0.25rem",
+          "margin-right": "-0.25rem",
+          height: "1px",
+          "background-color": "var(--color-border)",
+          border: "none"
+        }
       }
     ],
     commandEmpty: ["py:6", "text:center", "text:sm", "text:muted-foreground"]
@@ -2813,13 +2080,7 @@ function createContextMenuStyles() {
     ],
     cmGroup: ["py:1"],
     cmLabel: ["px:2", "py:1.5", "text:xs", "font:semibold", "text:muted-foreground"],
-    cmSeparator: [
-      "mx:1",
-      "my:1",
-      "border-t:1",
-      "border:muted",
-      { "&": [{ property: "height", value: "1px" }] }
-    ]
+    cmSeparator: ["mx:1", "my:1", "border-t:1", "border:muted", { "&": { height: "1px" } }]
   });
   return {
     content: s.cmContent,
@@ -2836,10 +2097,9 @@ var focusRing5 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createDatePickerStyles() {
@@ -2858,11 +2118,11 @@ function createDatePickerStyles() {
       "transition:colors",
       focusRing5,
       {
-        "&": [
-          { property: "height", value: "2.5rem" },
-          { property: "width", value: "100%" },
-          { property: "padding", value: "0.5rem 0.75rem" }
-        ]
+        "&": {
+          height: "2.5rem",
+          width: "100%",
+          padding: "0.5rem 0.75rem"
+        }
       },
       { "&:hover": ["bg:accent", "text:accent-foreground"] },
       { '&[data-placeholder="true"]': ["text:muted-foreground"] }
@@ -2874,7 +2134,7 @@ function createDatePickerStyles() {
       "border:1",
       "border:border",
       "shadow:md",
-      { "&": [{ property: "padding", value: "0" }] }
+      { "&": { padding: "0" } }
     ]
   });
   return {
@@ -2889,10 +2149,9 @@ var focusRing6 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createDialogStyles() {
@@ -2902,11 +2161,11 @@ function createDialogStyles() {
       "inset:0",
       "z:50",
       {
-        "&": [
-          { property: "background-color", value: "oklch(0 0 0 / 10%)" },
-          { property: "backdrop-filter", value: "blur(4px)" },
-          { property: "-webkit-backdrop-filter", value: "blur(4px)" }
-        ]
+        "&": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-fade-in 100ms ease-out forwards")]
@@ -2916,29 +2175,36 @@ function createDialogStyles() {
       }
     ],
     dialogPanel: [
-      "fixed",
-      "z:50",
       "bg:background",
       "gap:4",
       {
-        "&": [
-          { property: "display", value: "grid" },
-          { property: "width", value: "100%" },
-          { property: "max-width", value: "calc(100% - 2rem)" },
-          {
-            property: "box-shadow",
-            value: "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)"
-          },
-          { property: "border-radius", value: "0.75rem" },
-          { property: "padding", value: "1rem" },
-          { property: "font-size", value: "0.875rem" },
-          { property: "inset", value: "0" },
-          { property: "margin", value: "auto" },
-          { property: "height", value: "fit-content" },
-          { property: "outline", value: "none" },
-          { property: "container-type", value: "inline-size" }
-        ],
-        "@media (min-width: 640px)": [{ property: "max-width", value: "24rem" }]
+        "&": {
+          display: "grid",
+          width: "100%",
+          "max-width": "calc(100% - 2rem)",
+          "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)",
+          "border-radius": "0.75rem",
+          padding: "1rem",
+          "font-size": "0.875rem",
+          margin: "auto",
+          height: "fit-content",
+          outline: "none",
+          border: "none",
+          "container-type": "inline-size"
+        },
+        "&:not([open])": { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 100ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 100ms ease-out forwards"
+        },
+        "@media (min-width: 640px)": { "max-width": "24rem" }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-zoom-in 100ms ease-out forwards")]
@@ -2952,16 +2218,16 @@ function createDialogStyles() {
       "flex-col",
       "gap:2",
       {
-        "@media (min-width: 640px)": [{ property: "text-align", value: "left" }]
+        "@media (min-width: 640px)": { "text-align": "left" }
       }
     ],
     dialogTitle: [
       {
-        "&": [
-          { property: "font-size", value: "1rem" },
-          { property: "line-height", value: "1" },
-          { property: "font-weight", value: "500" }
-        ]
+        "&": {
+          "font-size": "1rem",
+          "line-height": "1",
+          "font-weight": "500"
+        }
       }
     ],
     dialogDescription: ["text:sm", "text:muted-foreground"],
@@ -2970,23 +2236,23 @@ function createDialogStyles() {
       "rounded:xs",
       "cursor:pointer",
       {
-        "&": [
-          { property: "top", value: "0.5rem" },
-          { property: "right", value: "0.5rem" },
-          { property: "opacity", value: "0.7" },
-          { property: "transition", value: "opacity 150ms" },
-          { property: "display", value: "inline-flex" },
-          { property: "align-items", value: "center" },
-          { property: "justify-content", value: "center" },
-          { property: "width", value: "1rem" },
-          { property: "height", value: "1rem" },
-          { property: "background", value: "none" },
-          { property: "border", value: "none" },
-          { property: "color", value: "currentColor" },
-          { property: "padding", value: "0" }
-        ],
-        "&:hover": [{ property: "opacity", value: "1" }],
-        "&:disabled": [{ property: "pointer-events", value: "none" }]
+        "&": {
+          top: "0.5rem",
+          right: "0.5rem",
+          opacity: "0.7",
+          transition: "opacity 150ms",
+          display: "inline-flex",
+          "align-items": "center",
+          "justify-content": "center",
+          width: "1rem",
+          height: "1rem",
+          background: "none",
+          border: "none",
+          color: "currentColor",
+          padding: "0"
+        },
+        "&:hover": { opacity: "1" },
+        "&:disabled": { "pointer-events": "none" }
       },
       focusRing6
     ],
@@ -2994,21 +2260,18 @@ function createDialogStyles() {
       "flex",
       "gap:2",
       {
-        "&": [
-          { property: "flex-direction", value: "column-reverse" },
-          {
-            property: "background-color",
-            value: "color-mix(in oklch, var(--color-muted) 50%, transparent)"
-          },
-          { property: "margin", value: "0 -1rem -1rem -1rem" },
-          { property: "border-radius", value: "0 0 0.75rem 0.75rem" },
-          { property: "border-top", value: "1px solid var(--color-border)" },
-          { property: "padding", value: "1rem" }
-        ],
-        "@container (min-width: 20rem)": [
-          { property: "flex-direction", value: "row" },
-          { property: "justify-content", value: "flex-end" }
-        ]
+        "&": {
+          "flex-direction": "column-reverse",
+          "background-color": "color-mix(in oklch, var(--color-muted) 50%, transparent)",
+          margin: "0 -1rem -1rem -1rem",
+          "border-radius": "0 0 0.75rem 0.75rem",
+          "border-top": "1px solid var(--color-border)",
+          padding: "1rem"
+        },
+        "@container (min-width: 20rem)": {
+          "flex-direction": "row",
+          "justify-content": "flex-end"
+        }
       }
     ]
   });
@@ -3029,10 +2292,9 @@ var focusRing7 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 var PANEL_BASE = [
@@ -3052,7 +2314,7 @@ function createDrawerStyles() {
       "inset:0",
       "z:50",
       {
-        "&": [{ property: "background-color", value: "oklch(0 0 0 / 50%)" }]
+        "&": { "background-color": "oklch(0 0 0 / 50%)" }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-fade-in 150ms ease-out forwards")]
@@ -3065,12 +2327,12 @@ function createDrawerStyles() {
       ...PANEL_BASE,
       "border-r:1",
       {
-        "&": [
-          { property: "inset", value: "0 auto 0 0" },
-          { property: "width", value: "75%" },
-          { property: "max-width", value: "24rem" },
-          { property: "border-radius", value: "0 0.75rem 0.75rem 0" }
-        ]
+        "&": {
+          inset: "0 auto 0 0",
+          width: "75%",
+          "max-width": "24rem",
+          "border-radius": "0 0.75rem 0.75rem 0"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-left 300ms ease-out forwards")]
@@ -3083,12 +2345,12 @@ function createDrawerStyles() {
       ...PANEL_BASE,
       "border-l:1",
       {
-        "&": [
-          { property: "inset", value: "0 0 0 auto" },
-          { property: "width", value: "75%" },
-          { property: "max-width", value: "24rem" },
-          { property: "border-radius", value: "0.75rem 0 0 0.75rem" }
-        ]
+        "&": {
+          inset: "0 0 0 auto",
+          width: "75%",
+          "max-width": "24rem",
+          "border-radius": "0.75rem 0 0 0.75rem"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-right 300ms ease-out forwards")]
@@ -3101,10 +2363,10 @@ function createDrawerStyles() {
       ...PANEL_BASE,
       "border-b:1",
       {
-        "&": [
-          { property: "inset", value: "0 0 auto 0" },
-          { property: "border-radius", value: "0 0 0.75rem 0.75rem" }
-        ]
+        "&": {
+          inset: "0 0 auto 0",
+          "border-radius": "0 0 0.75rem 0.75rem"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-top 300ms ease-out forwards")]
@@ -3117,10 +2379,10 @@ function createDrawerStyles() {
       ...PANEL_BASE,
       "border-t:1",
       {
-        "&": [
-          { property: "inset", value: "auto 0 0 0" },
-          { property: "border-radius", value: "0.75rem 0.75rem 0 0" }
-        ]
+        "&": {
+          inset: "auto 0 0 0",
+          "border-radius": "0.75rem 0.75rem 0 0"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-bottom 300ms ease-out forwards")]
@@ -3129,19 +2391,33 @@ function createDrawerStyles() {
         '&[data-state="closed"]': [animationDecl("vz-slide-out-to-bottom 300ms ease-out forwards")]
       }
     ],
+    drawerHeader: ["flex", "flex-col", "gap:1.5"],
     drawerTitle: ["text:lg", "font:semibold", "leading:none", "tracking:tight"],
     drawerDescription: ["text:sm", "text:muted-foreground"],
+    drawerFooter: [
+      "flex",
+      "gap:2",
+      {
+        "&": {
+          "flex-direction": "column-reverse"
+        },
+        "@media (min-width: 640px)": {
+          "flex-direction": "row",
+          "justify-content": "flex-end"
+        }
+      }
+    ],
     drawerHandle: [
       {
-        "&": [
-          { property: "margin-left", value: "auto" },
-          { property: "margin-right", value: "auto" },
-          { property: "margin-top", value: "1rem" },
-          { property: "height", value: "0.5rem" },
-          { property: "width", value: "100px" },
-          { property: "border-radius", value: "9999px" },
-          { property: "background-color", value: "var(--color-muted)" }
-        ]
+        "&": {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "margin-top": "1rem",
+          height: "0.5rem",
+          width: "100px",
+          "border-radius": "9999px",
+          "background-color": "var(--color-muted)"
+        }
       }
     ],
     drawerClose: [
@@ -3160,8 +2436,10 @@ function createDrawerStyles() {
     panelRight: s.drawerPanelRight,
     panelTop: s.drawerPanelTop,
     panelBottom: s.drawerPanelBottom,
+    header: s.drawerHeader,
     title: s.drawerTitle,
     description: s.drawerDescription,
+    footer: s.drawerFooter,
     handle: s.drawerHandle,
     close: s.drawerClose,
     css: s.css
@@ -3177,15 +2455,13 @@ function createDropdownMenuStyles() {
       "bg:popover",
       "text:popover-foreground",
       "rounded:lg",
+      "w:fit",
       "p:1",
       {
-        "&": [
-          {
-            property: "box-shadow",
-            value: "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
-          },
-          { property: "min-width", value: "8rem" }
-        ]
+        "&": {
+          "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+          "min-width": "8rem"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-zoom-in 100ms ease-out forwards")]
@@ -3214,11 +2490,11 @@ function createDropdownMenuStyles() {
       "my:1",
       "bg:border",
       {
-        "&": [
-          { property: "margin-left", value: "-0.25rem" },
-          { property: "margin-right", value: "-0.25rem" },
-          { property: "height", value: "1px" }
-        ]
+        "&": {
+          "margin-left": "-0.25rem",
+          "margin-right": "-0.25rem",
+          height: "1px"
+        }
       }
     ]
   });
@@ -3258,7 +2534,7 @@ function createHoverCardStyles() {
       "shadow:md",
       "p:4",
       {
-        "&": [{ property: "width", value: "16rem" }]
+        "&": { width: "16rem" }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-fade-in 150ms ease-out forwards")]
@@ -3281,10 +2557,9 @@ function createInput() {
       "outline-none",
       "border:ring",
       {
-        property: "outline",
-        value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+        outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
       },
-      { property: "outline-offset", value: "2px" }
+      { "outline-offset": "2px" }
     ]
   };
   const s = css19({
@@ -3297,11 +2572,11 @@ function createInput() {
       "bg:transparent",
       "py:1",
       {
-        "&": [
-          { property: "height", value: "2rem" },
-          { property: "padding-left", value: "0.625rem" },
-          { property: "padding-right", value: "0.625rem" }
-        ]
+        "&": {
+          height: "2rem",
+          "padding-left": "0.625rem",
+          "padding-right": "0.625rem"
+        }
       },
       "text:sm",
       "text:foreground",
@@ -3359,7 +2634,7 @@ function createMenubarStyles() {
       "border:border",
       "bg:background",
       "p:1",
-      { "&": [{ property: "column-gap", value: "0.25rem" }] }
+      { "&": { "column-gap": "0.25rem" } }
     ],
     mbTrigger: [
       "flex",
@@ -3407,13 +2682,7 @@ function createMenubarStyles() {
       { "&:focus": ["bg:accent", "text:accent-foreground"] },
       { "&[data-disabled]": ["pointer-events-none", "opacity:0.5"] }
     ],
-    mbSeparator: [
-      "mx:1",
-      "my:1",
-      "border-t:1",
-      "border:muted",
-      { "&": [{ property: "height", value: "1px" }] }
-    ],
+    mbSeparator: ["mx:1", "my:1", "border-t:1", "border:muted", { "&": { height: "1px" } }],
     mbLabel: ["px:2", "py:1.5", "text:xs", "font:semibold", "text:muted-foreground"]
   });
   return {
@@ -3457,10 +2726,10 @@ function createNavigationMenuStyles() {
       "shadow:lg",
       "text:popover-foreground",
       {
-        "&": [
-          { property: "left", value: "0" },
-          { property: "top", value: "100%" }
-        ]
+        "&": {
+          left: "0",
+          top: "100%"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-fade-in 150ms ease-out forwards")]
@@ -3476,7 +2745,7 @@ function createNavigationMenuStyles() {
       "text:sm",
       "leading:none",
       {
-        "&": [{ property: "text-decoration-line", value: "none" }]
+        "&": { "text-decoration-line": "none" }
       },
       { "&:hover": ["bg:accent", "text:accent-foreground"] }
     ],
@@ -3484,10 +2753,10 @@ function createNavigationMenuStyles() {
       "absolute",
       "w:full",
       {
-        "&": [
-          { property: "left", value: "0" },
-          { property: "top", value: "100%" }
-        ]
+        "&": {
+          left: "0",
+          top: "100%"
+        }
       }
     ]
   });
@@ -3507,10 +2776,9 @@ var focusRing8 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createPaginationStyles() {
@@ -3573,18 +2841,16 @@ function createPopoverStyles() {
       "bg:popover",
       "text:popover-foreground",
       "rounded:lg",
+      "w:fit",
       "flex",
       "flex-col",
       "gap:2.5",
       "p:2.5",
       "text:sm",
       {
-        "&": [
-          {
-            property: "box-shadow",
-            value: "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
-          }
-        ]
+        "&": {
+          "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-zoom-in 100ms ease-out forwards")]
@@ -3609,14 +2875,9 @@ function createProgressStyles() {
       "overflow-hidden",
       "rounded:full",
       "bg:muted",
-      { "&": [{ property: "height", value: "0.25rem" }] }
+      { "&": { height: "0.25rem" } }
     ],
-    progressIndicator: [
-      "h:full",
-      "w:full",
-      "bg:primary",
-      { "&": [{ property: "transition", value: "all 150ms" }] }
-    ]
+    progressIndicator: ["h:full", "w:full", "bg:primary", { "&": { transition: "all 150ms" } }]
   });
   return {
     root: s.progressRoot,
@@ -3631,8 +2892,7 @@ var focusRing9 = {
     "outline-none",
     "border:ring",
     {
-      property: "box-shadow",
-      value: "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      "box-shadow": "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
     }
   ]
 };
@@ -3652,11 +2912,11 @@ function createRadioGroupStyles() {
       "cursor:pointer",
       "transition:colors",
       {
-        "&": [
-          { property: "aspect-ratio", value: "1 / 1" },
-          { property: "padding", value: "0" },
-          { property: "background", value: "transparent" }
-        ]
+        "&": {
+          "aspect-ratio": "1 / 1",
+          padding: "0",
+          background: "transparent"
+        }
       },
       { [DARK]: [bgOpacity("input", 30)] },
       focusRing9,
@@ -3675,7 +2935,7 @@ function createRadioGroupStyles() {
       "items:center",
       "justify:center",
       {
-        '&[data-state="unchecked"]': [{ property: "display", value: "none" }]
+        '&[data-state="unchecked"]': [{ display: "none" }]
       }
     ],
     radioGroupIndicatorIcon: [
@@ -3684,12 +2944,12 @@ function createRadioGroupStyles() {
       "w:2",
       "bg:primary-foreground",
       {
-        "&": [
-          { property: "position", value: "absolute" },
-          { property: "top", value: "50%" },
-          { property: "left", value: "50%" },
-          { property: "transform", value: "translate(-50%, -50%)" }
-        ]
+        "&": {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        }
       }
     ]
   });
@@ -3707,10 +2967,9 @@ var focusRing10 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createResizablePanelStyles() {
@@ -3728,22 +2987,16 @@ function createResizablePanelStyles() {
         "&:hover": ["bg:muted-foreground"]
       },
       {
-        '&[data-orientation="horizontal"]': [
-          { property: "width", value: "1px" },
-          {
-            property: "cursor",
-            value: "col-resize"
-          }
-        ]
+        '&[data-orientation="horizontal"]': {
+          width: "1px",
+          cursor: "col-resize"
+        }
       },
       {
-        '&[data-orientation="vertical"]': [
-          { property: "height", value: "1px" },
-          {
-            property: "cursor",
-            value: "row-resize"
-          }
-        ]
+        '&[data-orientation="vertical"]': {
+          height: "1px",
+          cursor: "row-resize"
+        }
       },
       {
         '&[data-state="dragging"]': ["bg:primary"]
@@ -3762,21 +3015,17 @@ import { css as css28 } from "@vertz/ui";
 function createScrollAreaStyles() {
   const s = css28({
     scrollAreaRoot: ["relative", "overflow-hidden"],
-    scrollAreaViewport: [
-      "h:full",
-      "w:full",
-      { "&": [{ property: "border-radius", value: "inherit" }] }
-    ],
+    scrollAreaViewport: ["h:full", "w:full", { "&": { "border-radius": "inherit" } }],
     scrollAreaScrollbar: [
       "flex",
       {
-        "&": [
-          { property: "touch-action", value: "none" },
-          { property: "user-select", value: "none" }
-        ]
+        "&": {
+          "touch-action": "none",
+          "user-select": "none",
+          padding: "1px"
+        }
       },
       "transition:colors",
-      { "&": [{ property: "padding", value: "1px" }] },
       {
         '&[data-orientation="vertical"]': ["h:full", "w:2.5", "border-l:1", "border:transparent"]
       },
@@ -3805,10 +3054,9 @@ var focusRing11 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createSelectStyles() {
@@ -3827,18 +3075,26 @@ function createSelectStyles() {
       "text:sm",
       "cursor:pointer",
       {
-        "&": [
-          { property: "height", value: "2rem" },
-          { property: "padding-top", value: "0.5rem" },
-          { property: "padding-bottom", value: "0.5rem" },
-          { property: "padding-right", value: "0.5rem" },
-          { property: "padding-left", value: "0.625rem" }
-        ]
+        "&": {
+          height: "2rem",
+          "padding-top": "0.5rem",
+          "padding-bottom": "0.5rem",
+          "padding-right": "0.5rem",
+          "padding-left": "0.625rem"
+        }
       },
       focusRing11,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { '&[data-state="open"]': ["border:ring"] },
-      { [DARK]: [bgOpacity("input", 30)] }
+      { [DARK]: [bgOpacity("input", 30)] },
+      {
+        '& [data-part="chevron"]': {
+          opacity: "0.5",
+          "flex-shrink": "0",
+          display: "flex",
+          "align-items": "center"
+        }
+      }
     ],
     selectContent: [
       "z:50",
@@ -3848,13 +3104,10 @@ function createSelectStyles() {
       "rounded:lg",
       "p:1",
       {
-        "&": [
-          {
-            property: "box-shadow",
-            value: "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
-          },
-          { property: "min-width", value: "9rem" }
-        ]
+        "&": {
+          "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+          "min-width": "9rem"
+        }
       },
       {
         '&[data-state="open"][data-side="bottom"]': [
@@ -3886,10 +3139,10 @@ function createSelectStyles() {
       "outline-none",
       "relative",
       {
-        "&": [
-          { property: "padding-right", value: "2rem" },
-          { property: "padding-left", value: "0.5rem" }
-        ]
+        "&": {
+          "padding-right": "2rem",
+          "padding-left": "0.5rem"
+        }
       },
       { '&:hover:not([aria-selected="true"])': ["bg:accent", "text:accent-foreground"] },
       { '&:focus:not([aria-selected="true"])': ["bg:accent", "text:accent-foreground"] },
@@ -3901,15 +3154,15 @@ function createSelectStyles() {
       "items:center",
       "justify:center",
       {
-        "&": [
-          { property: "right", value: "0.5rem" },
-          { property: "width", value: "0.875rem" },
-          { property: "height", value: "0.875rem" },
-          { property: "display", value: "none" }
-        ]
+        "&": {
+          right: "0.5rem",
+          width: "0.875rem",
+          height: "0.875rem",
+          display: "none"
+        }
       },
       {
-        '[aria-selected="true"] > &': [{ property: "display", value: "flex" }]
+        '[aria-selected="true"] > &': { display: "flex" }
       }
     ],
     selectGroup: ["p:1"],
@@ -3918,11 +3171,11 @@ function createSelectStyles() {
       "my:1",
       "bg:border",
       {
-        "&": [
-          { property: "margin-left", value: "-0.25rem" },
-          { property: "margin-right", value: "-0.25rem" },
-          { property: "height", value: "1px" }
-        ]
+        "&": {
+          "margin-left": "-0.25rem",
+          "margin-right": "-0.25rem",
+          height: "1px"
+        }
       }
     ],
     selectScrollButton: ["flex", "items:center", "justify:center", "py:1", "cursor:default"]
@@ -3944,13 +3197,13 @@ import { css as css30 } from "@vertz/ui";
 function createSeparator() {
   const s = css30({
     separatorBase: ["bg:border", "shrink-0"],
-    separatorHorizontal: ["w:full", { "&": [{ property: "height", value: "1px" }] }],
+    separatorHorizontal: ["w:full", { "&": { height: "1px" } }],
     separatorVertical: [
       {
-        "&": [
-          { property: "height", value: "100%" },
-          { property: "width", value: "1px" }
-        ]
+        "&": {
+          height: "100%",
+          width: "1px"
+        }
       }
     ]
   });
@@ -3967,10 +3220,9 @@ var focusRing12 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 var PANEL_BASE2 = [
@@ -3991,28 +3243,48 @@ function createSheetStyles() {
       "inset:0",
       "z:50",
       {
-        "&": [
-          { property: "background-color", value: "oklch(0 0 0 / 10%)" },
-          { property: "backdrop-filter", value: "blur(4px)" },
-          { property: "-webkit-backdrop-filter", value: "blur(4px)" }
-        ]
+        "&": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-fade-in 100ms ease-out forwards")]
       },
       {
-        '&[data-state="closed"]': [animationDecl("vz-fade-out 100ms ease-out forwards")]
+        '&[data-state="closed"]': [
+          animationDecl("vz-fade-out 100ms ease-out forwards"),
+          { "pointer-events": "none" }
+        ]
       }
     ],
     sheetPanelLeft: [
       ...PANEL_BASE2,
       "border-r:1",
       {
-        "&": [
-          { property: "inset", value: "0 auto 0 0" },
-          { property: "width", value: "75%" },
-          { property: "max-width", value: "24rem" }
-        ]
+        "&": {
+          inset: "0 auto 0 0",
+          width: "75%",
+          "max-width": "24rem",
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none"
+        },
+        "&:not([open])": { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 100ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-left 300ms ease-out forwards")]
@@ -4025,11 +3297,28 @@ function createSheetStyles() {
       ...PANEL_BASE2,
       "border-l:1",
       {
-        "&": [
-          { property: "inset", value: "0 0 0 auto" },
-          { property: "width", value: "75%" },
-          { property: "max-width", value: "24rem" }
-        ]
+        "&": {
+          inset: "0 0 0 auto",
+          width: "75%",
+          "max-width": "24rem",
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none"
+        },
+        "&:not([open])": { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 100ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-right 300ms ease-out forwards")]
@@ -4042,7 +3331,26 @@ function createSheetStyles() {
       ...PANEL_BASE2,
       "border-b:1",
       {
-        "&": [{ property: "inset", value: "0 0 auto 0" }]
+        "&": {
+          inset: "0 0 auto 0",
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none"
+        },
+        "&:not([open])": { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 100ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-top 300ms ease-out forwards")]
@@ -4055,7 +3363,26 @@ function createSheetStyles() {
       ...PANEL_BASE2,
       "border-t:1",
       {
-        "&": [{ property: "inset", value: "auto 0 0 0" }]
+        "&": {
+          inset: "auto 0 0 0",
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none"
+        },
+        "&:not([open])": { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 10%)",
+          "backdrop-filter": "blur(4px)",
+          "-webkit-backdrop-filter": "blur(4px)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 100ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-bottom 300ms ease-out forwards")]
@@ -4071,21 +3398,21 @@ function createSheetStyles() {
       "rounded:xs",
       "cursor:pointer",
       {
-        "&": [
-          { property: "top", value: "0.75rem" },
-          { property: "right", value: "0.75rem" },
-          { property: "opacity", value: "0.7" },
-          { property: "transition", value: "opacity 150ms" },
-          { property: "display", value: "inline-flex" },
-          { property: "align-items", value: "center" },
-          { property: "justify-content", value: "center" },
-          { property: "width", value: "1rem" },
-          { property: "height", value: "1rem" },
-          { property: "background", value: "none" },
-          { property: "border", value: "none" },
-          { property: "color", value: "currentColor" },
-          { property: "padding", value: "0" }
-        ]
+        "&": {
+          top: "0.75rem",
+          right: "0.75rem",
+          opacity: "0.7",
+          transition: "opacity 150ms",
+          display: "inline-flex",
+          "align-items": "center",
+          "justify-content": "center",
+          width: "1rem",
+          height: "1rem",
+          background: "none",
+          border: "none",
+          color: "currentColor",
+          padding: "0"
+        }
       },
       { "&:hover": ["opacity:1"] },
       focusRing12
@@ -4111,18 +3438,13 @@ var pulse = keyframes2("vz-skeleton-pulse", {
 });
 function createSkeletonStyles() {
   return css32({
-    base: [
-      "bg:muted",
-      "rounded:md",
-      { "&": [{ property: "animation", value: `${pulse} 2s ease-in-out infinite` }] }
-    ]
+    base: ["bg:muted", "rounded:md", { "&": { animation: `${pulse} 2s ease-in-out infinite` } }]
   });
 }
 // src/styles/slider.ts
 import { css as css33 } from "@vertz/ui";
 var ringStyle = {
-  property: "box-shadow",
-  value: "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
+  "box-shadow": "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
 };
 function createSliderStyles() {
   const s = css33({
@@ -4132,12 +3454,12 @@ function createSliderStyles() {
       "w:full",
       "items:center",
       {
-        "&": [
-          { property: "touch-action", value: "none" },
-          { property: "user-select", value: "none" },
-          { property: "height", value: "20px" },
-          { property: "cursor", value: "pointer" }
-        ]
+        "&": {
+          "touch-action": "none",
+          "user-select": "none",
+          height: "20px",
+          cursor: "pointer"
+        }
       }
     ],
     sliderTrack: [
@@ -4146,10 +3468,10 @@ function createSliderStyles() {
       "rounded:full",
       "bg:muted",
       {
-        "&": [
-          { property: "height", value: "0.25rem" },
-          { property: "overflow", value: "visible" }
-        ]
+        "&": {
+          height: "0.25rem",
+          overflow: "visible"
+        }
       }
     ],
     sliderRange: ["bg:primary"],
@@ -4162,18 +3484,18 @@ function createSliderStyles() {
       "border:ring",
       "cursor:pointer",
       {
-        "&": [
-          { property: "background", value: "white" },
-          { property: "transition", value: "color 150ms, box-shadow 150ms" },
-          { property: "top", value: "50%" }
-        ]
+        "&": {
+          background: "white",
+          transition: "color 150ms, box-shadow 150ms",
+          top: "50%"
+        }
       },
       {
-        "&::after": [
-          { property: "content", value: '""' },
-          { property: "position", value: "absolute" },
-          { property: "inset", value: "-0.5rem" }
-        ]
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          inset: "-0.5rem"
+        }
       },
       {
         "&:hover": ["outline-none", ringStyle]
@@ -4202,8 +3524,7 @@ var focusRing13 = {
     "outline-none",
     "border:ring",
     {
-      property: "box-shadow",
-      value: "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      "box-shadow": "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
     }
   ]
 };
@@ -4236,37 +3557,24 @@ function createSwitchStyles() {
       "rounded:full",
       "bg:background",
       {
-        "&": [
-          {
-            property: "transition",
-            value: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0.4, 0, 0.2, 1)"
-          }
-        ]
+        "&": {
+          transition: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+        }
       },
       {
-        '&[data-state="unchecked"]': [{ property: "transform", value: "translateX(0)" }],
-        '&[data-state="checked"]': [
-          { property: "transform", value: "translateX(calc(100% - 2px))" }
-        ]
+        '&[data-state="unchecked"]': [{ transform: "translateX(0)" }],
+        '&[data-state="checked"]': [{ transform: "translateX(calc(100% - 2px))" }]
       },
       {
-        'button:active > &[data-state="unchecked"]': [
-          "w:5",
-          { property: "transform", value: "translateX(0)" }
-        ],
-        'button:active > &[data-state="checked"]': [
-          "w:5",
-          { property: "transform", value: "translateX(0.625rem)" }
-        ]
+        'button:active > &[data-state="unchecked"]': ["w:5", { transform: "translateX(0)" }],
+        'button:active > &[data-state="checked"]': ["w:5", { transform: "translateX(0.625rem)" }]
       },
       {
-        [`${DARK}[data-state="unchecked"]`]: [
-          { property: "background-color", value: "var(--color-foreground)" }
-        ]
+        [`${DARK}[data-state="unchecked"]`]: [{ "background-color": "var(--color-foreground)" }]
       },
       {
         [`${DARK}[data-state="checked"]`]: [
-          { property: "background-color", value: "var(--color-primary-foreground)" }
+          { "background-color": "var(--color-primary-foreground)" }
         ]
       }
     ],
@@ -4297,37 +3605,24 @@ function createSwitchStyles() {
       "rounded:full",
       "bg:background",
       {
-        "&": [
-          {
-            property: "transition",
-            value: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0.4, 0, 0.2, 1)"
-          }
-        ]
+        "&": {
+          transition: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+        }
       },
       {
-        '&[data-state="unchecked"]': [{ property: "transform", value: "translateX(0)" }],
-        '&[data-state="checked"]': [
-          { property: "transform", value: "translateX(calc(100% - 2px))" }
-        ]
+        '&[data-state="unchecked"]': [{ transform: "translateX(0)" }],
+        '&[data-state="checked"]': [{ transform: "translateX(calc(100% - 2px))" }]
       },
       {
-        'button:active > &[data-state="unchecked"]': [
-          "w:3.5",
-          { property: "transform", value: "translateX(0)" }
-        ],
-        'button:active > &[data-state="checked"]': [
-          "w:3.5",
-          { property: "transform", value: "translateX(0.5rem)" }
-        ]
+        'button:active > &[data-state="unchecked"]': ["w:3.5", { transform: "translateX(0)" }],
+        'button:active > &[data-state="checked"]': ["w:3.5", { transform: "translateX(0.5rem)" }]
       },
       {
-        [`${DARK}[data-state="unchecked"]`]: [
-          { property: "background-color", value: "var(--color-foreground)" }
-        ]
+        [`${DARK}[data-state="unchecked"]`]: [{ "background-color": "var(--color-foreground)" }]
       },
       {
         [`${DARK}[data-state="checked"]`]: [
-          { property: "background-color", value: "var(--color-primary-foreground)" }
+          { "background-color": "var(--color-primary-foreground)" }
         ]
       }
     ]
@@ -4348,14 +3643,14 @@ function createTableStyles() {
       "w:full",
       "text:sm",
       {
-        "&": [
-          { property: "caption-side", value: "bottom" },
-          { property: "border-collapse", value: "collapse" }
-        ]
+        "&": {
+          "caption-side": "bottom",
+          "border-collapse": "collapse"
+        }
       }
     ],
     tableHeader: [{ "& tr": ["border-b:1", "border:border"] }],
-    tableBody: [{ "& tr:last-child": [{ property: "border-bottom", value: "0" }] }],
+    tableBody: [{ "& tr:last-child": { "border-bottom": "0" } }],
     tableRow: [
       "border-b:1",
       "border:border",
@@ -4370,24 +3665,20 @@ function createTableStyles() {
       "text:foreground",
       "whitespace-nowrap",
       {
-        "&": [
-          { property: "vertical-align", value: "middle" },
-          { property: "height", value: "2.5rem" }
-        ]
+        "&": {
+          "vertical-align": "middle",
+          height: "2.5rem"
+        }
       }
     ],
-    tableCell: [
-      "p:2",
-      "whitespace-nowrap",
-      { "&": [{ property: "vertical-align", value: "middle" }] }
-    ],
+    tableCell: ["p:2", "whitespace-nowrap", { "&": { "vertical-align": "middle" } }],
     tableCaption: ["mt:4", "text:sm", "text:muted-foreground"],
     tableFooter: [
       "border-t:1",
       "border:border",
       "font:medium",
       { "&": [bgOpacity("muted", 50)] },
-      { "&>tr:last-child": [{ property: "border-bottom", value: "0" }] }
+      { "&>tr:last-child": { "border-bottom": "0" } }
     ]
   });
   return {
@@ -4414,10 +3705,10 @@ function createTabsStyles() {
       "bg:muted",
       "text:muted-foreground",
       {
-        "&": [
-          { property: "padding", value: "3px" },
-          { property: "height", value: "2rem" }
-        ]
+        "&": {
+          padding: "3px",
+          height: "2rem"
+        }
       }
     ],
     tabsTrigger: [
@@ -4431,11 +3722,11 @@ function createTabsStyles() {
       "cursor:pointer",
       "transition:colors",
       {
-        "&": [
-          { property: "background", value: "transparent" },
-          { property: "padding", value: "0.125rem 0.375rem" },
-          { property: "border", value: "1px solid transparent" }
-        ]
+        "&": {
+          background: "transparent",
+          padding: "0.125rem 0.375rem",
+          border: "1px solid transparent"
+        }
       },
       { '&[data-state="inactive"]': [textOpacity("foreground", 60)] },
       {
@@ -4463,11 +3754,11 @@ function createTabsStyles() {
       "cursor:pointer",
       "border:0",
       {
-        "&": [
-          { property: "background", value: "transparent" },
-          { property: "margin-bottom", value: "-1px" },
-          { property: "transition", value: "color 150ms, box-shadow 150ms" }
-        ]
+        "&": {
+          background: "transparent",
+          "margin-bottom": "-1px",
+          transition: "color 150ms, box-shadow 150ms"
+        }
       },
       { '&[data-state="inactive"]': [textOpacity("foreground", 60)] },
       { '&[data-state="inactive"]:hover': [textOpacity("foreground", 80)] },
@@ -4475,8 +3766,7 @@ function createTabsStyles() {
         '&[data-state="active"]': [
           "text:foreground",
           {
-            property: "box-shadow",
-            value: "inset 0 -2px 0 0 currentColor"
+            "box-shadow": "inset 0 -2px 0 0 currentColor"
           }
         ]
       },
@@ -4500,10 +3790,9 @@ function createTextarea() {
       "outline-none",
       "border:ring",
       {
-        property: "outline",
-        value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+        outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
       },
-      { property: "outline-offset", value: "2px" }
+      { "outline-offset": "2px" }
     ]
   };
   const s = css37({
@@ -4516,20 +3805,16 @@ function createTextarea() {
       "bg:transparent",
       "py:2",
       {
-        "&": [
-          { property: "padding-left", value: "0.625rem" },
-          { property: "padding-right", value: "0.625rem" }
-        ]
+        "&": {
+          "padding-left": "0.625rem",
+          "padding-right": "0.625rem",
+          "min-height": "60px",
+          "field-sizing": "content"
+        }
       },
       "text:sm",
       "text:foreground",
       "transition:colors",
-      {
-        "&": [
-          { property: "min-height", value: "60px" },
-          { property: "field-sizing", value: "content" }
-        ]
-      },
       focusRing14,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { [DARK]: [bgOpacity("input", 30)] }
@@ -4546,10 +3831,9 @@ var focusRing14 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createToastStyles() {
@@ -4562,14 +3846,14 @@ function createToastStyles() {
       "gap:2",
       "p:4",
       {
-        "&": [
-          { property: "bottom", value: "0" },
-          { property: "right", value: "0" },
-          { property: "max-height", value: "100vh" },
-          { property: "width", value: "420px" },
-          { property: "max-width", value: "100vw" },
-          { property: "pointer-events", value: "none" }
-        ]
+        "&": {
+          bottom: "0",
+          right: "0",
+          "max-height": "100vh",
+          width: "420px",
+          "max-width": "100vw",
+          "pointer-events": "none"
+        }
       }
     ],
     toastRoot: [
@@ -4585,7 +3869,7 @@ function createToastStyles() {
       "p:4",
       "shadow:lg",
       {
-        "&": [{ property: "pointer-events", value: "auto" }]
+        "&": { "pointer-events": "auto" }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-bottom 200ms ease-out forwards")]
@@ -4608,7 +3892,7 @@ function createToastStyles() {
       "font:medium",
       "transition:colors",
       "shrink-0",
-      { "&": [{ property: "height", value: "2rem" }] },
+      { "&": { height: "2rem" } },
       { "&:hover": ["bg:secondary"] },
       focusRing14
     ],
@@ -4638,10 +3922,9 @@ var focusRing15 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createToggleStyles() {
@@ -4677,10 +3960,9 @@ var focusRing16 = {
   "&:focus-visible": [
     "outline-none",
     {
-      property: "outline",
-      value: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
+      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
     },
-    { property: "outline-offset", value: "2px" }
+    { "outline-offset": "2px" }
   ]
 };
 function createToggleGroupStyles() {
@@ -4725,7 +4007,7 @@ function createTooltipStyles() {
       "py:1.5",
       "text:xs",
       {
-        "&": [{ property: "white-space", value: "nowrap" }]
+        "&": { "white-space": "nowrap" }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-fade-in 100ms ease-out forwards")]
@@ -4852,30 +4134,30 @@ function configureTheme(config) {
       DropdownMenu: createThemedDropdownMenu(dropdownMenuStyles),
       Select: createThemedSelect(selectStyles),
       Tabs: createThemedTabs(tabsStyles),
-      checkbox: createThemedCheckbox(checkboxStyles),
-      switch: createThemedSwitch(switchStyles),
+      Checkbox: createThemedCheckbox(checkboxStyles),
+      Switch: createThemedSwitch(switchStyles),
       Popover: createThemedPopover(popoverStyles),
-      progress: createThemedProgress(progressStyles),
-      radioGroup: createThemedRadioGroup(radioGroupStyles),
-      slider: createThemedSlider(sliderStyles),
+      Progress: createThemedProgress(progressStyles),
+      RadioGroup: createThemedRadioGroup(radioGroupStyles),
+      Slider: createThemedSlider(sliderStyles),
       Accordion: createThemedAccordion(accordionStyles),
-      toast: createThemedToast(toastStyles),
+      Toast: createThemedToast(toastStyles),
       Tooltip: createThemedTooltip(tooltipStyles),
       Sheet: createThemedSheet(sheetStyles),
-      calendar: createThemedCalendar(calendarStyles),
-      carousel: createThemedCarousel(carouselStyles),
-      collapsible: createThemedCollapsible(collapsibleStyles),
-      command: createThemedCommand(commandStyles),
-      contextMenu: createThemedContextMenu(contextMenuStyles),
-      datePicker: createThemedDatePicker(datePickerStyles),
-      drawer: createThemedDrawer(drawerStyles),
-      hoverCard: createThemedHoverCard(hoverCardStyles),
-      menubar: createThemedMenubar(menubarStyles),
-      navigationMenu: createThemedNavigationMenu(navigationMenuStyles),
-      resizablePanel: createThemedResizablePanel(resizablePanelStyles),
-      scrollArea: createThemedScrollArea(scrollAreaStyles),
-      toggle: createThemedToggle(toggleStyles),
-      toggleGroup: createThemedToggleGroup(toggleGroupStyles)
+      Calendar: createThemedCalendar(calendarStyles),
+      Carousel: createThemedCarousel(carouselStyles),
+      Collapsible: createThemedCollapsible(collapsibleStyles),
+      Command: createThemedCommand(commandStyles),
+      ContextMenu: createThemedContextMenu(contextMenuStyles),
+      DatePicker: createThemedDatePicker(datePickerStyles, calendarStyles),
+      Drawer: createThemedDrawer(drawerStyles),
+      HoverCard: createThemedHoverCard(hoverCardStyles),
+      Menubar: createThemedMenubar(menubarStyles),
+      NavigationMenu: createThemedNavigationMenu(navigationMenuStyles),
+      ResizablePanel: createThemedResizablePanel(resizablePanelStyles),
+      ScrollArea: createThemedScrollArea(scrollAreaStyles),
+      Toggle: createThemedToggle(toggleStyles),
+      ToggleGroup: createThemedToggleGroup(toggleGroupStyles)
     }
   };
   return { theme, globals, styles, components };