@vertz/theme-shadcn 0.2.22 → 0.2.24

package/dist/index.js

@@ -5,457 +5,31 @@ import {
   createBadge,
   createButton,
   textOpacity
-} from "./shared/chunk-gzfp8m46.js";
+} from "./shared/chunk-kmh677y0.js";
 import {
-  configureThemeBase
-} from "./shared/chunk-gjsm05ga.js";
-
-// src/components/alert.ts
-import { resolveChildren } from "@vertz/ui";
-function createAlertComponents(alertStyles) {
-  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 (effectiveClass) {
-      classes.push(effectiveClass);
-    }
-    el.className = classes.join(" ");
-    el.setAttribute("role", "alert");
-    for (const node of resolveChildren(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertTitle({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("h5");
-    el.className = [alertStyles.title, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDescription({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [alertStyles.description, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return { Alert, AlertTitle, AlertDescription };
-}
-
-// src/components/avatar.ts
-import { resolveChildren as resolveChildren2 } from "@vertz/ui";
-function createAvatarComponents(avatarStyles) {
-  function Avatar({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [avatarStyles.root, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren2(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AvatarImage({
-    src,
-    alt,
-    className,
-    class: classProp
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("img");
-    el.className = [avatarStyles.image, effectiveClass].filter(Boolean).join(" ");
-    el.src = src;
-    el.alt = alt;
-    return el;
-  }
-  function AvatarFallback({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [avatarStyles.fallback, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren2(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return { Avatar, AvatarImage, AvatarFallback };
-}
-
-// src/components/badge.ts
-import { resolveChildren as resolveChildren3 } from "@vertz/ui";
-function createBadgeComponent(badgeStyles) {
-  const colorStyles = {
-    blue: "background-color: oklch(0.55 0.15 250); color: #fff;",
-    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,
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("span");
-    el.className = [badgeStyles({ color }), effectiveClass].filter(Boolean).join(" ");
-    const inlineStyle = color ? colorStyles[color] : undefined;
-    if (inlineStyle) {
-      el.style.cssText = inlineStyle;
-    }
-    for (const node of resolveChildren3(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  };
-}
-
-// src/components/breadcrumb.ts
-function createBreadcrumbComponent(styles) {
-  return function Breadcrumb(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 (effectiveClass) {
-      nav.className = [nav.className, effectiveClass].filter(Boolean).join(" ");
-    }
-    const ol = document.createElement("ol");
-    ol.className = styles.list;
-    for (let i = 0;i < items.length; i++) {
-      const item = items[i];
-      const li = document.createElement("li");
-      li.className = styles.item;
-      const isLast = i === items.length - 1;
-      if (isLast) {
-        const span = document.createElement("span");
-        span.setAttribute("aria-current", "page");
-        span.className = styles.page;
-        span.textContent = item.label;
-        li.appendChild(span);
-      } else {
-        if (item.href) {
-          const a = document.createElement("a");
-          a.href = item.href;
-          a.className = styles.link;
-          a.textContent = item.label;
-          li.appendChild(a);
-        } else {
-          const span = document.createElement("span");
-          span.className = styles.link;
-          span.textContent = item.label;
-          li.appendChild(span);
-        }
-      }
-      ol.appendChild(li);
-      if (!isLast) {
-        const sepLi = document.createElement("li");
-        sepLi.setAttribute("role", "presentation");
-        sepLi.setAttribute("aria-hidden", "true");
-        sepLi.className = styles.separator;
-        sepLi.textContent = separator;
-        ol.appendChild(sepLi);
-      }
-    }
-    nav.appendChild(ol);
-    return nav;
-  };
-}
-
-// 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,
-    className,
-    class: classProp,
-    children,
-    disabled,
-    type,
-    ...rest
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("button");
-    el.type = type ?? "button";
-    el.className = [buttonStyles({ intent, size }), effectiveClass].filter(Boolean).join(" ");
-    if (disabled)
-      el.disabled = true;
-    applyProps(el, rest);
-    for (const node of resolveChildren4(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  };
-}
-
-// src/components/card.ts
-import { resolveChildren as resolveChildren5 } from "@vertz/ui";
-function createCardComponents(cardStyles) {
-  function Card({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.root, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardHeader({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.header, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardTitle({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("h3");
-    el.className = [cardStyles.title, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardDescription({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("p");
-    el.className = [cardStyles.description, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardContent({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.content, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardFooter({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.footer, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardAction({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.action, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return {
-    Card,
-    CardHeader,
-    CardTitle,
-    CardDescription,
-    CardContent,
-    CardFooter,
-    CardAction
-  };
-}
-
-// src/components/form-group.ts
-import { resolveChildren as resolveChildren6 } from "@vertz/ui";
-function createFormGroupComponents(formGroupStyles) {
-  function FormGroup({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [formGroupStyles.base, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren6(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function FormError({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("span");
-    el.className = [formGroupStyles.error, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren6(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return {
-    FormGroup,
-    FormError
-  };
-}
-
-// src/components/input.ts
-import { applyProps as applyProps2 } from "@vertz/ui-primitives/utils";
-function createInputComponent(inputStyles) {
-  return function Input({
-    className,
-    class: classProp,
-    name,
-    placeholder,
-    type,
-    disabled,
-    value,
-    ...attrs
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("input");
-    el.className = [inputStyles.base, effectiveClass].filter(Boolean).join(" ");
-    if (name !== undefined)
-      el.name = name;
-    if (placeholder !== undefined)
-      el.placeholder = placeholder;
-    if (type !== undefined)
-      el.type = type;
-    if (disabled)
-      el.disabled = true;
-    if (value !== undefined)
-      el.value = value;
-    applyProps2(el, attrs);
-    return el;
-  };
-}
-
-// src/components/label.ts
-import { resolveChildren as resolveChildren7 } from "@vertz/ui";
-function createLabelComponent(labelStyles) {
-  return function Label({
-    className,
-    class: classProp,
-    for: htmlFor,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("label");
-    el.className = [labelStyles.base, effectiveClass].filter(Boolean).join(" ");
-    if (htmlFor !== undefined)
-      el.htmlFor = htmlFor;
-    for (const node of resolveChildren7(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  };
-}
-
-// src/components/pagination.ts
-function createPaginationComponent(styles) {
-  return function Pagination(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 (effectiveClass)
-      nav.classList.add(effectiveClass);
-    const ul = document.createElement("ul");
-    ul.classList.add(styles.list);
-    const prevLi = document.createElement("li");
-    prevLi.classList.add(styles.item);
-    const prevBtn = document.createElement("button");
-    prevBtn.setAttribute("type", "button");
-    prevBtn.classList.add(styles.link);
-    prevBtn.textContent = "‹";
-    prevBtn.setAttribute("aria-label", "Previous page");
-    if (currentPage <= 1) {
-      prevBtn.disabled = true;
-    } else {
-      prevBtn.addEventListener("click", () => onPageChange(currentPage - 1));
-    }
-    prevLi.appendChild(prevBtn);
-    ul.appendChild(prevLi);
-    const range = generatePaginationRange(currentPage, totalPages, siblingCount);
-    for (const page of range) {
-      const li = document.createElement("li");
-      li.classList.add(styles.item);
-      if (page === "...") {
-        const span = document.createElement("span");
-        span.setAttribute("aria-hidden", "true");
-        span.classList.add(styles.ellipsis);
-        span.textContent = "…";
-        li.appendChild(span);
-      } else {
-        const btn = document.createElement("button");
-        btn.setAttribute("type", "button");
-        btn.textContent = String(page);
-        if (page === currentPage) {
-          btn.classList.add(styles.linkActive);
-          btn.setAttribute("aria-current", "page");
-        } else {
-          btn.classList.add(styles.link);
-          btn.addEventListener("click", () => onPageChange(page));
-        }
-        li.appendChild(btn);
-      }
-      ul.appendChild(li);
-    }
-    const nextLi = document.createElement("li");
-    nextLi.classList.add(styles.item);
-    const nextBtn = document.createElement("button");
-    nextBtn.setAttribute("type", "button");
-    nextBtn.classList.add(styles.link);
-    nextBtn.textContent = "›";
-    nextBtn.setAttribute("aria-label", "Next page");
-    if (currentPage >= totalPages) {
-      nextBtn.disabled = true;
-    } else {
-      nextBtn.addEventListener("click", () => onPageChange(currentPage + 1));
-    }
-    nextLi.appendChild(nextBtn);
-    ul.appendChild(nextLi);
-    nav.appendChild(ul);
-    return nav;
-  };
-}
-function generatePaginationRange(current, total, siblings) {
-  const range = [];
-  const left = Math.max(2, current - siblings);
-  const right = Math.min(total - 1, current + siblings);
-  range.push(1);
-  if (left > 2) {
-    range.push("...");
-  }
-  for (let i = left;i <= right; i++) {
-    if (i !== 1 && i !== total) {
-      range.push(i);
-    }
-  }
-  if (right < total - 1) {
-    range.push("...");
-  }
-  if (total > 1) {
-    range.push(total);
-  }
-  return range;
-}
+  RADIUS_VALUES,
+  configureThemeBase,
+  palettes
+} from "./shared/chunk-f0wk9320.js";
+// src/configure.ts
+import {
+  ComposedAlert,
+  ComposedAvatar,
+  ComposedBadge,
+  ComposedBreadcrumb,
+  ComposedButton,
+  ComposedCard,
+  ComposedEmptyState,
+  ComposedFormGroup,
+  ComposedInput,
+  ComposedLabel,
+  ComposedPagination,
+  ComposedSeparator,
+  ComposedSkeleton,
+  ComposedTable,
+  ComposedTextarea,
+  withStyles as withStyles18
+} from "@vertz/ui-primitives";
 
 // src/components/primitives/accordion.ts
 import { ComposedAccordion, withStyles } from "@vertz/ui-primitives";
@@ -475,25 +49,10 @@ function createThemedAccordion(styles) {
   });
 }
 
-// src/components/primitives/alert-dialog.ts
-import { ComposedAlertDialog, withStyles as withStyles2 } from "@vertz/ui-primitives";
-function createThemedAlertDialog(styles) {
-  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 { ComposedCalendar, withStyles as withStyles3 } from "@vertz/ui-primitives";
+import { ComposedCalendar, withStyles as withStyles2 } from "@vertz/ui-primitives";
 function createThemedCalendar(styles) {
-  const StyledCalendar = withStyles3(ComposedCalendar, {
+  const StyledCalendar = withStyles2(ComposedCalendar, {
     root: styles.root,
     header: styles.header,
     title: styles.title,
@@ -501,7 +60,9 @@ function createThemedCalendar(styles) {
     grid: styles.grid,
     headCell: styles.headCell,
     cell: styles.cell,
-    dayButton: styles.dayButton
+    dayButton: styles.dayButton,
+    monthSelect: styles.monthSelect,
+    yearSelect: styles.yearSelect
   });
   return function CalendarRoot(props) {
     return StyledCalendar(props);
@@ -509,9 +70,9 @@ function createThemedCalendar(styles) {
 }
 
 // src/components/primitives/carousel.ts
-import { ComposedCarousel, withStyles as withStyles4 } from "@vertz/ui-primitives";
+import { ComposedCarousel, withStyles as withStyles3 } from "@vertz/ui-primitives";
 function createThemedCarousel(styles) {
-  const StyledCarousel = withStyles4(ComposedCarousel, {
+  const StyledCarousel = withStyles3(ComposedCarousel, {
     root: styles.root,
     viewport: styles.viewport,
     slide: styles.slide,
@@ -541,9 +102,9 @@ function createThemedCarousel(styles) {
 }
 
 // src/components/primitives/checkbox.ts
-import { ComposedCheckbox, withStyles as withStyles5 } from "@vertz/ui-primitives";
+import { ComposedCheckbox, withStyles as withStyles4 } from "@vertz/ui-primitives";
 function createThemedCheckbox(styles) {
-  const StyledCheckbox = withStyles5(ComposedCheckbox, {
+  const StyledCheckbox = withStyles4(ComposedCheckbox, {
     root: styles.root,
     indicator: styles.indicator
   });
@@ -578,9 +139,9 @@ function createThemedCollapsible(styles) {
 }
 
 // src/components/primitives/command.tsx
-import { ComposedCommand, withStyles as withStyles6 } from "@vertz/ui-primitives";
+import { ComposedCommand, withStyles as withStyles5 } from "@vertz/ui-primitives";
 function createThemedCommand(styles) {
-  const Styled = withStyles6(ComposedCommand, {
+  const Styled = withStyles5(ComposedCommand, {
     root: styles.root,
     input: styles.input,
     list: styles.list,
@@ -616,9 +177,9 @@ function createThemedCommand(styles) {
 }
 
 // src/components/primitives/context-menu.ts
-import { ComposedContextMenu, withStyles as withStyles7 } from "@vertz/ui-primitives";
+import { ComposedContextMenu, withStyles as withStyles6 } from "@vertz/ui-primitives";
 function createThemedContextMenu(styles) {
-  const Styled = withStyles7(ComposedContextMenu, {
+  const Styled = withStyles6(ComposedContextMenu, {
     content: styles.content,
     item: styles.item,
     group: styles.group,
@@ -652,7 +213,8 @@ function createThemedDatePicker(styles, calendarClasses) {
     formatDate,
     placeholder,
     onValueChange,
-    onOpenChange
+    onOpenChange,
+    captionLayout
   }) {
     return ComposedDatePicker({
       children,
@@ -666,6 +228,7 @@ function createThemedDatePicker(styles, calendarClasses) {
       placeholder,
       onValueChange,
       onOpenChange,
+      captionLayout,
       classes: {
         trigger: styles.trigger,
         content: styles.content,
@@ -680,22 +243,30 @@ function createThemedDatePicker(styles, calendarClasses) {
 }
 
 // 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
-  });
+import {
+  StackDialogBody,
+  StackDialogCancel,
+  StackDialogClose,
+  StackDialogDescription,
+  StackDialogFooter,
+  StackDialogHeader,
+  StackDialogTitle
+} from "@vertz/ui-primitives";
+function createThemedDialog() {
+  return {
+    Header: StackDialogHeader,
+    Title: StackDialogTitle,
+    Description: StackDialogDescription,
+    Footer: StackDialogFooter,
+    Body: StackDialogBody,
+    Close: StackDialogClose,
+    Cancel: StackDialogCancel
+  };
 }
 
 // src/components/primitives/drawer.tsx
-import { __element, __enterChildren, __exitChildren, __insert } from "@vertz/ui/internals";
-import { resolveChildren as resolveChildren8 } from "@vertz/ui";
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __pushMountFrame } from "@vertz/ui/internals";
+import { resolveChildren } from "@vertz/ui";
 import { ComposedSheet } from "@vertz/ui-primitives";
 var PANEL_CLASS_MAP = {
   left: "panelLeft",
@@ -704,87 +275,92 @@ var PANEL_CLASS_MAP = {
   bottom: "panelBottom"
 };
 function createThemedDrawer(styles) {
-  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
-      }
+  const __mfDepth = __pushMountFrame();
+  try {
+    let DrawerRoot = function({ 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
+        }
+      });
+    }, DrawerHeader = function({ children, className: cls, class: classProp }) {
+      const effectiveCls = cls ?? classProp;
+      const combined = [styles.header, effectiveCls].filter(Boolean).join(" ");
+      const resolved = resolveChildren(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;
+      })();
+    }, DrawerFooter = function({ children, className: cls, class: classProp }) {
+      const effectiveCls = cls ?? classProp;
+      const combined = [styles.footer, effectiveCls].filter(Boolean).join(" ");
+      const resolved = resolveChildren(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;
+      })();
+    }, DrawerHandle = function({ 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;
+      })();
+    };
+    const __mfResult0 = Object.assign(DrawerRoot, {
+      Trigger: ComposedSheet.Trigger,
+      Content: ComposedSheet.Content,
+      Header: DrawerHeader,
+      Title: ComposedSheet.Title,
+      Description: ComposedSheet.Description,
+      Footer: DrawerFooter,
+      Handle: DrawerHandle
     });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
   }
-  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 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 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";
+import { ComposedDropdownMenu, withStyles as withStyles7 } from "@vertz/ui-primitives";
 function createThemedDropdownMenu(styles) {
-  const Styled = withStyles9(ComposedDropdownMenu, {
+  const Styled = withStyles7(ComposedDropdownMenu, {
     content: styles.content,
     item: styles.item,
     group: styles.group,
@@ -835,9 +411,9 @@ function createThemedHoverCard(styles) {
 }
 
 // src/components/primitives/menubar.ts
-import { ComposedMenubar, withStyles as withStyles10 } from "@vertz/ui-primitives";
+import { ComposedMenubar, withStyles as withStyles8 } from "@vertz/ui-primitives";
 function createThemedMenubar(styles) {
-  const Styled = withStyles10(ComposedMenubar, {
+  const Styled = withStyles8(ComposedMenubar, {
     root: styles.root,
     trigger: styles.trigger,
     content: styles.content,
@@ -847,7 +423,7 @@ function createThemedMenubar(styles) {
     separator: styles.separator
   });
   function MenubarRoot({ children, onSelect }) {
-    return Styled({ children, onSelect });
+    return Styled({ children, onSelect, positioning: { placement: "bottom-start" } });
   }
   return Object.assign(MenubarRoot, {
     Menu: ComposedMenubar.Menu,
@@ -861,9 +437,9 @@ function createThemedMenubar(styles) {
 }
 
 // src/components/primitives/navigation-menu.tsx
-import { ComposedNavigationMenu, withStyles as withStyles11 } from "@vertz/ui-primitives";
+import { ComposedNavigationMenu, withStyles as withStyles9 } from "@vertz/ui-primitives";
 function createThemedNavigationMenu(styles) {
-  const Styled = withStyles11(ComposedNavigationMenu, {
+  const Styled = withStyles9(ComposedNavigationMenu, {
     root: styles.root,
     list: styles.list,
     trigger: styles.trigger,
@@ -895,9 +471,9 @@ function createThemedNavigationMenu(styles) {
 }
 
 // src/components/primitives/popover.ts
-import { ComposedPopover, withStyles as withStyles12 } from "@vertz/ui-primitives";
+import { ComposedPopover, withStyles as withStyles10 } from "@vertz/ui-primitives";
 function createThemedPopover(styles) {
-  const StyledPopover = withStyles12(ComposedPopover, {
+  const StyledPopover = withStyles10(ComposedPopover, {
     content: styles.content
   });
   function PopoverRoot({ children, onOpenChange }) {
@@ -921,9 +497,9 @@ function createThemedProgress(styles) {
 }
 
 // src/components/primitives/radio-group.ts
-import { ComposedRadioGroup, withStyles as withStyles13 } from "@vertz/ui-primitives";
+import { ComposedRadioGroup, withStyles as withStyles11 } from "@vertz/ui-primitives";
 function createThemedRadioGroup(styles) {
-  const StyledRadioGroup = withStyles13(ComposedRadioGroup, {
+  const StyledRadioGroup = withStyles11(ComposedRadioGroup, {
     root: styles.root,
     item: styles.item,
     indicator: styles.indicator,
@@ -981,9 +557,9 @@ function createThemedScrollArea(styles) {
 }
 
 // src/components/primitives/select.ts
-import { ComposedSelect, withStyles as withStyles14 } from "@vertz/ui-primitives";
+import { ComposedSelect, withStyles as withStyles12 } from "@vertz/ui-primitives";
 function createThemedSelect(styles) {
-  const StyledSelect = withStyles14(ComposedSelect, {
+  const StyledSelect = withStyles12(ComposedSelect, {
     trigger: styles.trigger,
     content: styles.content,
     item: styles.item,
@@ -1065,13 +641,13 @@ function createThemedSlider(styles) {
 }
 
 // src/components/primitives/switch.ts
-import { ComposedSwitch, withStyles as withStyles15 } from "@vertz/ui-primitives";
+import { ComposedSwitch, withStyles as withStyles13 } from "@vertz/ui-primitives";
 function createThemedSwitch(styles) {
-  const DefaultSwitch = withStyles15(ComposedSwitch, {
+  const DefaultSwitch = withStyles13(ComposedSwitch, {
     root: styles.root,
     thumb: styles.thumb
   });
-  const SmSwitch = withStyles15(ComposedSwitch, {
+  const SmSwitch = withStyles13(ComposedSwitch, {
     root: styles.rootSm,
     thumb: styles.thumbSm
   });
@@ -1082,14 +658,14 @@ function createThemedSwitch(styles) {
 }
 
 // src/components/primitives/tabs.ts
-import { ComposedTabs, withStyles as withStyles16 } from "@vertz/ui-primitives";
+import { ComposedTabs, withStyles as withStyles14 } from "@vertz/ui-primitives";
 function createThemedTabs(styles) {
-  const DefaultTabs = withStyles16(ComposedTabs, {
+  const DefaultTabs = withStyles14(ComposedTabs, {
     list: styles.list,
     trigger: styles.trigger,
     panel: styles.panel
   });
-  const LineTabs = withStyles16(ComposedTabs, {
+  const LineTabs = withStyles14(ComposedTabs, {
     list: styles.listLine,
     trigger: styles.triggerLine,
     panel: styles.panel
@@ -1122,9 +698,9 @@ function createThemedToast(styles) {
 }
 
 // src/components/primitives/toggle.ts
-import { ComposedToggle, withStyles as withStyles17 } from "@vertz/ui-primitives";
+import { ComposedToggle, withStyles as withStyles15 } from "@vertz/ui-primitives";
 function createThemedToggle(styles) {
-  const StyledToggle = withStyles17(ComposedToggle, {
+  const StyledToggle = withStyles15(ComposedToggle, {
     root: styles.root
   });
   return function ToggleRoot(props) {
@@ -1133,9 +709,9 @@ function createThemedToggle(styles) {
 }
 
 // src/components/primitives/toggle-group.tsx
-import { ComposedToggleGroup, withStyles as withStyles18 } from "@vertz/ui-primitives";
+import { ComposedToggleGroup, withStyles as withStyles16 } from "@vertz/ui-primitives";
 function createThemedToggleGroup(styles) {
-  const StyledToggleGroup = withStyles18(ComposedToggleGroup, {
+  const StyledToggleGroup = withStyles16(ComposedToggleGroup, {
     root: styles.root,
     item: styles.item
   });
@@ -1148,9 +724,9 @@ function createThemedToggleGroup(styles) {
 }
 
 // src/components/primitives/tooltip.ts
-import { ComposedTooltip, withStyles as withStyles19 } from "@vertz/ui-primitives";
+import { ComposedTooltip, withStyles as withStyles17 } from "@vertz/ui-primitives";
 function createThemedTooltip(styles) {
-  const StyledTooltip = withStyles19(ComposedTooltip, {
+  const StyledTooltip = withStyles17(ComposedTooltip, {
     content: styles.content
   });
   function TooltipRoot({ children, delay }) {
@@ -1162,185 +738,6 @@ function createThemedTooltip(styles) {
   });
 }
 
-// src/components/separator.ts
-function createSeparatorComponent(separatorStyles) {
-  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, 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({
-    className,
-    class: classProp,
-    width,
-    height
-  } = {}) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [skeletonStyles.base, effectiveClass].filter(Boolean).join(" ");
-    el.setAttribute("aria-hidden", "true");
-    if (width)
-      el.style.width = width;
-    if (height)
-      el.style.height = height;
-    return el;
-  }
-  return { Skeleton };
-}
-
-// src/components/table.ts
-import { resolveChildren as resolveChildren9 } from "@vertz/ui";
-function createTableComponents(tableStyles) {
-  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, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      table.appendChild(node);
-    }
-    wrapper.appendChild(table);
-    return wrapper;
-  }
-  function TableHeader({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("thead");
-    el.className = [tableStyles.header, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableBody({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("tbody");
-    el.className = [tableStyles.body, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableRow({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("tr");
-    el.className = [tableStyles.row, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableHead({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("th");
-    el.scope = "col";
-    el.className = [tableStyles.head, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableCell({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("td");
-    el.className = [tableStyles.cell, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableCaption({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("caption");
-    el.className = [tableStyles.caption, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableFooter({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("tfoot");
-    el.className = [tableStyles.footer, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return {
-    Table,
-    TableHeader,
-    TableBody,
-    TableRow,
-    TableHead,
-    TableCell,
-    TableCaption,
-    TableFooter
-  };
-}
-
-// src/components/textarea.ts
-import { applyProps as applyProps3 } from "@vertz/ui-primitives/utils";
-function createTextareaComponent(textareaStyles) {
-  return function Textarea({
-    className,
-    class: classProp,
-    name,
-    placeholder,
-    disabled,
-    value,
-    rows,
-    ...attrs
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("textarea");
-    el.className = [textareaStyles.base, effectiveClass].filter(Boolean).join(" ");
-    if (name !== undefined)
-      el.name = name;
-    if (placeholder !== undefined)
-      el.placeholder = placeholder;
-    if (disabled)
-      el.disabled = true;
-    if (value !== undefined)
-      el.value = value;
-    if (rows !== undefined)
-      el.rows = rows;
-    applyProps3(el, attrs);
-    return el;
-  };
-}
-
 // src/styles/accordion.ts
 import { css, keyframes } from "@vertz/ui";
 var accordionDown = keyframes("vz-accordion-down", {
@@ -1362,10 +759,13 @@ function createAccordionStyles() {
       "px:2",
       "text:sm",
       "font:medium",
+      "text:foreground",
       "cursor:pointer",
+      "bg:transparent",
       {
         "&": {
-          "border-radius": "0.5rem",
+          border: "none",
+          "border-radius": "calc(var(--radius) * 1.33)",
           "padding-top": "0.625rem",
           "padding-bottom": "0.625rem"
         },
@@ -1375,6 +775,7 @@ function createAccordionStyles() {
     accordionContent: [
       "overflow-hidden",
       "text:sm",
+      "text:muted-foreground",
       {
         '&[data-state="open"]': [animationDecl(`${accordionDown} 200ms ease-out forwards`)]
       },
@@ -1424,151 +825,10 @@ function createAlertStyles() {
     css: s.css
   };
 }
-// src/styles/alert-dialog.ts
-import { css as css3 } from "@vertz/ui";
-var focusRing = {
-  "&:focus-visible": [
-    "outline-none",
-    {
-      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
-    },
-    { "outline-offset": "2px" }
-  ]
-};
-function createAlertDialogStyles() {
-  const s = css3({
-    alertDialogOverlay: [
-      "fixed",
-      "inset:0",
-      "z:50",
-      {
-        "&": {
-          "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")]
-      }
-    ],
-    alertDialogPanel: [
-      "bg:background",
-      "gap:4",
-      {
-        "&": {
-          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")]
-      },
-      {
-        '&[data-state="closed"]': [animationDecl("vz-zoom-out 100ms ease-out forwards")]
-      }
-    ],
-    alertDialogTitle: [
-      {
-        "&": {
-          "font-size": "1rem",
-          "font-weight": "500"
-        }
-      }
-    ],
-    alertDialogDescription: ["text:sm", "text:muted-foreground"],
-    alertDialogFooter: [
-      "flex",
-      "gap:2",
-      {
-        "&": {
-          "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: [
-      "inline-flex",
-      "items:center",
-      "justify:center",
-      "rounded:md",
-      "border:1",
-      "border:input",
-      "bg:background",
-      "px:4",
-      "py:2",
-      "text:sm",
-      "font:medium",
-      "cursor:pointer",
-      "transition:colors",
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
-      focusRing
-    ],
-    alertDialogAction: [
-      "inline-flex",
-      "items:center",
-      "justify:center",
-      "rounded:md",
-      "bg:primary",
-      "text:primary-foreground",
-      "px:4",
-      "py:2",
-      "text:sm",
-      "font:medium",
-      "cursor:pointer",
-      "transition:colors",
-      { "&:hover": [{ opacity: "0.9" }] },
-      focusRing
-    ]
-  });
-  return {
-    overlay: s.alertDialogOverlay,
-    panel: s.alertDialogPanel,
-    title: s.alertDialogTitle,
-    description: s.alertDialogDescription,
-    footer: s.alertDialogFooter,
-    cancel: s.alertDialogCancel,
-    action: s.alertDialogAction,
-    css: s.css
-  };
-}
 // src/styles/avatar.ts
-import { css as css4 } from "@vertz/ui";
+import { css as css3 } from "@vertz/ui";
 function createAvatarStyles() {
-  const s = css4({
+  const s = css3({
     avatarRoot: ["relative", "flex", "h:8", "w:8", "shrink-0", "overflow-hidden", "rounded:full"],
     avatarImage: [
       "h:full",
@@ -1613,9 +873,9 @@ function createAvatarStyles() {
   };
 }
 // src/styles/breadcrumb.ts
-import { css as css5 } from "@vertz/ui";
+import { css as css4 } from "@vertz/ui";
 function createBreadcrumbStyles() {
-  const s = css5({
+  const s = css4({
     breadcrumbNav: [],
     breadcrumbList: [
       "flex",
@@ -1623,9 +883,21 @@ function createBreadcrumbStyles() {
       "items:center",
       "gap:1.5",
       "text:sm",
-      "text:muted-foreground"
+      "text:muted-foreground",
+      {
+        "&": {
+          "list-style": "none",
+          margin: "0",
+          padding: "0"
+        }
+      }
+    ],
+    breadcrumbItem: [
+      "inline-flex",
+      "items:center",
+      "gap:1.5",
+      { '&:first-child > [role="presentation"]': { display: "none" } }
     ],
-    breadcrumbItem: ["inline-flex", "items:center", "gap:1.5"],
     breadcrumbLink: ["transition:colors", "text:foreground", { "&:hover": ["text:foreground"] }],
     breadcrumbPage: ["font:normal", "text:foreground"],
     breadcrumbSeparator: []
@@ -1641,8 +913,8 @@ function createBreadcrumbStyles() {
   };
 }
 // src/styles/calendar.ts
-import { css as css6 } from "@vertz/ui";
-var focusRing2 = {
+import { css as css5 } from "@vertz/ui";
+var focusRing = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -1652,28 +924,90 @@ var focusRing2 = {
   ]
 };
 function createCalendarStyles() {
-  const s = css6({
-    calendarRoot: ["p:3"],
-    calendarHeader: ["flex", "items:center", "justify:between", "py:2"],
-    calendarTitle: ["text:sm", "font:medium"],
+  const s = css5({
+    calendarRoot: [
+      "w:fit",
+      "bg:background",
+      "text:foreground",
+      "rounded:lg",
+      "border:1",
+      "border:border",
+      {
+        "&": {
+          padding: "0.5rem"
+        }
+      }
+    ],
+    calendarRootNoBorder: [
+      "w:fit",
+      "bg:background",
+      "text:foreground",
+      "rounded:md",
+      {
+        "&": {
+          padding: "0.5rem"
+        }
+      }
+    ],
+    calendarHeader: [
+      "flex",
+      "items:center",
+      "justify:between",
+      {
+        "&": {
+          position: "relative",
+          height: "1.75rem",
+          width: "100%"
+        },
+        '&[data-caption-layout="dropdown"]': {
+          "justify-content": "center",
+          gap: "0.25rem"
+        },
+        '&[data-caption-layout="dropdown-buttons"]': {
+          gap: "0.25rem"
+        }
+      }
+    ],
+    calendarTitle: [
+      "text:sm",
+      "font:medium",
+      {
+        "&": {
+          position: "absolute",
+          inset: "0",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "pointer-events": "none",
+          "user-select": "none"
+        }
+      }
+    ],
     calendarNavButton: [
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
-      "border:1",
-      "border:input",
+      "rounded:lg",
       "bg:transparent",
       "cursor:pointer",
-      "transition:colors",
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
-      focusRing2,
+      "transition:all",
+      { "&:hover": ["bg:muted", "text:foreground"] },
+      focusRing,
       {
         "&": {
           height: "1.75rem",
-          width: "1.75rem"
+          width: "1.75rem",
+          padding: "0",
+          border: "1px solid transparent",
+          "user-select": "none",
+          "z-index": "1"
+        },
+        '& svg:not([class*="size-"])': {
+          width: "1rem",
+          height: "1rem"
         }
-      }
+      },
+      { '&[aria-disabled="true"]': ["opacity:0.5"] }
     ],
     calendarGrid: [
       {
@@ -1685,12 +1019,13 @@ function createCalendarStyles() {
     ],
     calendarHeadCell: [
       "text:muted-foreground",
-      "text:xs",
-      "font:medium",
+      "font:normal",
       {
         "&": {
-          width: "2rem",
-          "text-align": "center"
+          width: "1.75rem",
+          "text-align": "center",
+          "font-size": "0.8rem",
+          "user-select": "none"
         }
       }
     ],
@@ -1698,7 +1033,8 @@ function createCalendarStyles() {
       {
         "&": {
           "text-align": "center",
-          padding: "0"
+          padding: "0",
+          "user-select": "none"
         }
       }
     ],
@@ -1706,28 +1042,69 @@ function createCalendarStyles() {
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
+      "rounded:lg",
       "text:sm",
+      "font:normal",
       "bg:transparent",
       "cursor:pointer",
-      "transition:colors",
-      focusRing2,
+      "transition:all",
+      focusRing,
       {
         "&": {
-          height: "2rem",
-          width: "2rem"
+          height: "1.75rem",
+          width: "1.75rem",
+          border: "1px solid transparent",
+          padding: "0"
         }
       },
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
+      { "&:hover": ["bg:muted", "text:foreground"] },
       { '&[aria-selected="true"]': ["bg:primary", "text:primary-foreground"] },
-      { '&[data-today="true"]': ["border:1", "border:accent"] },
-      { '&[aria-disabled="true"]': ["opacity:0.5", "pointer-events-none"] },
-      { '&[data-outside-month="true"]': ["text:muted-foreground", "opacity:0.5"] },
-      { '&[data-in-range="true"]': ["bg:accent"] }
+      {
+        '&[data-today="true"]': ["bg:muted", "text:foreground"]
+      },
+      {
+        '&[data-today="true"][aria-selected="true"]': ["bg:primary", "text:primary-foreground"]
+      },
+      {
+        '&[aria-disabled="true"]': ["text:muted-foreground", "opacity:0.5", "pointer-events-none"]
+      },
+      {
+        '&[data-outside-month="true"]': ["text:muted-foreground"]
+      },
+      { '&[data-in-range="true"]': ["bg:muted", "text:foreground"] }
+    ],
+    calendarMonthSelect: [
+      "text:sm",
+      "font:medium",
+      "bg:transparent",
+      "cursor:pointer",
+      focusRing,
+      {
+        "&": {
+          border: "none",
+          "padding-inline": "0.25rem",
+          appearance: "auto"
+        }
+      }
+    ],
+    calendarYearSelect: [
+      "text:sm",
+      "font:medium",
+      "bg:transparent",
+      "cursor:pointer",
+      focusRing,
+      {
+        "&": {
+          border: "none",
+          "padding-inline": "0.25rem",
+          appearance: "auto"
+        }
+      }
     ]
   });
   return {
     root: s.calendarRoot,
+    rootNoBorder: s.calendarRootNoBorder,
     header: s.calendarHeader,
     title: s.calendarTitle,
     navButton: s.calendarNavButton,
@@ -1735,13 +1112,15 @@ function createCalendarStyles() {
     headCell: s.calendarHeadCell,
     cell: s.calendarCell,
     dayButton: s.calendarDayButton,
+    monthSelect: s.calendarMonthSelect,
+    yearSelect: s.calendarYearSelect,
     css: s.css
   };
 }
 // src/styles/card.ts
-import { css as css7 } from "@vertz/ui";
+import { css as css6 } from "@vertz/ui";
 function createCard() {
-  const s = css7({
+  const s = css6({
     cardRoot: [
       "flex",
       "flex-col",
@@ -1753,7 +1132,7 @@ function createCard() {
       "text:sm",
       {
         "&": {
-          "border-radius": "0.75rem",
+          "border-radius": "calc(var(--radius) * 2)",
           "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)"
         }
       }
@@ -1780,7 +1159,7 @@ function createCard() {
       {
         "&": {
           "background-color": "color-mix(in oklch, var(--color-muted) 50%, transparent)",
-          "border-radius": "0 0 0.75rem 0.75rem",
+          "border-radius": "0 0 calc(var(--radius) * 2) calc(var(--radius) * 2)",
           "margin-bottom": "-1rem"
         }
       }
@@ -1799,23 +1178,12 @@ function createCard() {
   };
 }
 // src/styles/carousel.ts
-import { css as css8 } from "@vertz/ui";
+import { css as css7 } from "@vertz/ui";
 function createCarouselStyles() {
-  const s = css8({
-    carouselRoot: ["relative", "overflow-hidden"],
+  const s = css7({
+    carouselRoot: ["relative"],
     carouselViewport: ["overflow-hidden"],
-    carouselSlide: [
-      "shrink-0",
-      {
-        "&": {
-          "min-width": "0",
-          "flex-grow": "0",
-          "flex-basis": "100%"
-        }
-      },
-      { '&[data-state="inactive"]': ["opacity:0"] },
-      { '&[data-state="active"]': ["opacity:1"] }
-    ],
+    carouselSlide: [{ '&[data-state="inactive"]': [{ display: "none" }] }],
     carouselPrevButton: [
       "absolute",
       "h:8",
@@ -1824,6 +1192,7 @@ function createCarouselStyles() {
       "border:1",
       "border:border",
       "bg:background",
+      "text:foreground",
       "inline-flex",
       "items:center",
       "justify:center",
@@ -1846,6 +1215,7 @@ function createCarouselStyles() {
       "border:1",
       "border:border",
       "bg:background",
+      "text:foreground",
       "inline-flex",
       "items:center",
       "justify:center",
@@ -1871,8 +1241,8 @@ function createCarouselStyles() {
   };
 }
 // src/styles/checkbox.ts
-import { css as css9 } from "@vertz/ui";
-var focusRing3 = {
+import { css as css8 } from "@vertz/ui";
+var focusRing2 = {
   "&:focus-visible": [
     "outline-none",
     "border:ring",
@@ -1882,7 +1252,7 @@ var focusRing3 = {
   ]
 };
 function createCheckboxStyles() {
-  const s = css9({
+  const s = css8({
     checkboxRoot: [
       "shrink-0",
       "flex",
@@ -1894,9 +1264,9 @@ function createCheckboxStyles() {
       "border:input",
       "cursor:pointer",
       "transition:colors",
-      { "&": { padding: "0", background: "transparent", "border-radius": "4px" } },
+      { "&": { padding: "0", background: "transparent", "border-radius": "calc(var(--radius) * 0.67)" } },
       { [DARK]: [bgOpacity("input", 30)] },
-      focusRing3,
+      focusRing2,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
         '&[data-state="checked"]': ["bg:primary", "text:primary-foreground", "border:primary"],
@@ -1908,10 +1278,35 @@ function createCheckboxStyles() {
       }
     ],
     checkboxIndicator: [
+      "relative",
       "flex",
       "items:center",
       "justify:center",
-      { '&[data-state="unchecked"]': ["hidden"] }
+      {
+        '& [data-part="indicator-icon"]': {
+          position: "absolute",
+          inset: "0",
+          opacity: "0",
+          transform: "scale(0.5)",
+          transition: "opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), " + "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+        },
+        '& [data-icon="check"] path': {
+          "stroke-dasharray": "30",
+          "stroke-dashoffset": "30",
+          transition: "stroke-dashoffset 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms"
+        },
+        '&[data-state="checked"] [data-icon="check"]': {
+          opacity: "1",
+          transform: "scale(1)"
+        },
+        '&[data-state="checked"] [data-icon="check"] path': {
+          "stroke-dashoffset": "0"
+        },
+        '&[data-state="indeterminate"] [data-icon="minus"]': {
+          opacity: "1",
+          transform: "scale(1)"
+        }
+      }
     ]
   });
   return {
@@ -1921,9 +1316,9 @@ function createCheckboxStyles() {
   };
 }
 // src/styles/collapsible.ts
-import { css as css10 } from "@vertz/ui";
+import { css as css9 } from "@vertz/ui";
 function createCollapsibleStyles() {
-  const s = css10({
+  const s = css9({
     collapsibleContent: [
       "overflow-hidden",
       "text:sm",
@@ -1941,8 +1336,8 @@ function createCollapsibleStyles() {
   };
 }
 // src/styles/command.ts
-import { css as css11 } from "@vertz/ui";
-var focusRing4 = {
+import { css as css10 } from "@vertz/ui";
+var focusRing3 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -1952,7 +1347,7 @@ var focusRing4 = {
   ]
 };
 function createCommandStyles() {
-  const s = css11({
+  const s = css10({
     commandRoot: [
       "flex",
       "flex-col",
@@ -1979,10 +1374,12 @@ function createCommandStyles() {
           "border-bottom": "1px solid var(--color-border)"
         }
       },
-      focusRing4
+      focusRing3
     ],
     commandList: [
-      "p:1",
+      "px:1",
+      "pb:1",
+      "pt:2",
       {
         "&": {
           "max-height": "300px",
@@ -2045,19 +1442,23 @@ function createCommandStyles() {
   };
 }
 // src/styles/context-menu.ts
-import { css as css12 } from "@vertz/ui";
+import { css as css11 } from "@vertz/ui";
 function createContextMenuStyles() {
-  const s = css12({
+  const s = css11({
     cmContent: [
       "z:50",
       "overflow-hidden",
       "bg:popover",
       "text:popover-foreground",
-      "rounded:md",
-      "border:1",
-      "border:border",
-      "shadow:md",
-      "py:1",
+      "rounded:lg",
+      "w:fit",
+      "p: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)",
+          "min-width": "8rem"
+        }
+      },
       {
         '&[data-state="open"]': [animationDecl("vz-zoom-in 150ms ease-out forwards")]
       },
@@ -2068,19 +1469,30 @@ function createContextMenuStyles() {
     cmItem: [
       "flex",
       "items:center",
-      "px:2",
-      "py:1.5",
+      "gap:1.5",
+      "px:1.5",
+      "py:1",
       "text:sm",
       "cursor:pointer",
-      "rounded:sm",
+      "rounded:md",
       "outline-none",
       { "&:hover": ["bg:accent", "text:accent-foreground"] },
       { "&:focus": ["bg:accent", "text:accent-foreground"] },
       { "&[data-disabled]": ["pointer-events-none", "opacity:0.5"] }
     ],
     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", { "&": { height: "1px" } }]
+    cmLabel: ["px:1.5", "py:1", "text:xs", "font:medium", "text:muted-foreground"],
+    cmSeparator: [
+      "my:1",
+      "bg:border",
+      {
+        "&": {
+          "margin-left": "-0.25rem",
+          "margin-right": "-0.25rem",
+          height: "1px"
+        }
+      }
+    ]
   });
   return {
     content: s.cmContent,
@@ -2092,8 +1504,8 @@ function createContextMenuStyles() {
   };
 }
 // src/styles/date-picker.ts
-import { css as css13 } from "@vertz/ui";
-var focusRing5 = {
+import { css as css12 } from "@vertz/ui";
+var focusRing4 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2103,7 +1515,7 @@ var focusRing5 = {
   ]
 };
 function createDatePickerStyles() {
-  const s = css13({
+  const s = css12({
     datePickerTrigger: [
       "inline-flex",
       "items:center",
@@ -2112,11 +1524,12 @@ function createDatePickerStyles() {
       "border:1",
       "border:input",
       "bg:background",
+      "text:foreground",
       "text:sm",
       "font:normal",
       "cursor:pointer",
       "transition:colors",
-      focusRing5,
+      focusRing4,
       {
         "&": {
           height: "2.5rem",
@@ -2134,6 +1547,7 @@ function createDatePickerStyles() {
       "border:1",
       "border:border",
       "shadow:md",
+      "overflow-hidden",
       { "&": { padding: "0" } }
     ]
   });
@@ -2144,8 +1558,8 @@ function createDatePickerStyles() {
   };
 }
 // src/styles/dialog.ts
-import { css as css14 } from "@vertz/ui";
-var focusRing6 = {
+import { css as css13, globalCss, injectCSS } from "@vertz/ui";
+var focusRing5 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2155,7 +1569,7 @@ var focusRing6 = {
   ]
 };
 function createDialogStyles() {
-  const s = css14({
+  const s = css13({
     dialogOverlay: [
       "fixed",
       "inset:0",
@@ -2176,6 +1590,7 @@ function createDialogStyles() {
     ],
     dialogPanel: [
       "bg:background",
+      "text:foreground",
       "gap:4",
       {
         "&": {
@@ -2183,7 +1598,7 @@ function createDialogStyles() {
           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",
+          "border-radius": "calc(var(--radius) * 2)",
           padding: "1rem",
           "font-size": "0.875rem",
           margin: "auto",
@@ -2192,7 +1607,7 @@ function createDialogStyles() {
           border: "none",
           "container-type": "inline-size"
         },
-        "&:not([open])": { display: "none" },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
           "background-color": "oklch(0 0 0 / 10%)",
           "backdrop-filter": "blur(4px)",
@@ -2222,6 +1637,7 @@ function createDialogStyles() {
       }
     ],
     dialogTitle: [
+      "text:foreground",
       {
         "&": {
           "font-size": "1rem",
@@ -2254,7 +1670,7 @@ function createDialogStyles() {
         "&:hover": { opacity: "1" },
         "&:disabled": { "pointer-events": "none" }
       },
-      focusRing6
+      focusRing5
     ],
     dialogFooter: [
       "flex",
@@ -2264,7 +1680,7 @@ function createDialogStyles() {
           "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-radius": "0 0 calc(var(--radius) * 2) calc(var(--radius) * 2)",
           "border-top": "1px solid var(--color-border)",
           padding: "1rem"
         },
@@ -2286,9 +1702,148 @@ function createDialogStyles() {
     css: s.css
   };
 }
+function createDialogGlobalStyles() {
+  const output = globalCss({
+    "dialog[data-dialog-wrapper]": {
+      background: "transparent",
+      border: "none",
+      padding: "0",
+      maxWidth: "100vw",
+      maxHeight: "100vh",
+      overflow: "visible"
+    },
+    "dialog[data-dialog-wrapper]::backdrop": {
+      backgroundColor: "oklch(0 0 0 / 10%)",
+      backdropFilter: "blur(4px)",
+      WebkitBackdropFilter: "blur(4px)"
+    },
+    'dialog[data-dialog-wrapper][data-state="open"]::backdrop': {
+      animation: "vz-fade-in 100ms ease-out forwards"
+    },
+    'dialog[data-dialog-wrapper][data-state="closed"]::backdrop': {
+      animation: "vz-fade-out 100ms ease-out forwards"
+    },
+    'dialog[data-dialog-wrapper] > [data-part="panel"]': {
+      position: "relative",
+      display: "grid",
+      gap: "1rem",
+      width: "100%",
+      maxWidth: "calc(100% - 2rem)",
+      boxShadow: "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)",
+      borderRadius: "calc(var(--radius) * 2)",
+      padding: "1rem",
+      fontSize: "0.875rem",
+      margin: "auto",
+      height: "fit-content",
+      outline: "none",
+      containerType: "inline-size",
+      backgroundColor: "var(--color-background)"
+    },
+    'dialog[data-dialog-wrapper][data-state="open"] > [data-part="panel"]': {
+      animation: "vz-zoom-in 100ms ease-out forwards"
+    },
+    'dialog[data-dialog-wrapper][data-state="closed"] > [data-part="panel"]': {
+      animation: "vz-zoom-out 100ms ease-out forwards"
+    },
+    'dialog[data-dialog-wrapper] [data-part="header"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5rem"
+    },
+    'dialog[data-dialog-wrapper] [data-part="title"]': {
+      fontSize: "1rem",
+      lineHeight: "1",
+      fontWeight: "500"
+    },
+    'dialog[data-dialog-wrapper] [data-part="description"]': {
+      fontSize: "0.875rem",
+      color: "var(--color-muted-foreground)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="body"]': {
+      overflow: "auto"
+    },
+    'dialog[data-dialog-wrapper] [data-part="footer"]': {
+      display: "flex",
+      gap: "0.5rem",
+      flexDirection: "column-reverse",
+      backgroundColor: "color-mix(in oklch, var(--color-muted) 50%, transparent)",
+      margin: "0 -1rem -1rem -1rem",
+      borderRadius: "0 0 calc(var(--radius) * 2) calc(var(--radius) * 2)",
+      borderTop: "1px solid var(--color-border)",
+      padding: "1rem"
+    },
+    'dialog[data-dialog-wrapper] [data-part="close"]': {
+      position: "absolute",
+      top: "0.5rem",
+      right: "0.5rem",
+      opacity: "0.7",
+      transition: "opacity 150ms",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "1rem",
+      height: "1rem",
+      background: "none",
+      border: "none",
+      color: "currentColor",
+      padding: "0",
+      cursor: "pointer",
+      borderRadius: "calc(var(--radius) * 0.33)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="close"]:hover': {
+      opacity: "1"
+    },
+    'dialog[data-dialog-wrapper] [data-part="cancel"]': {
+      background: "none",
+      border: "1px solid var(--color-border)",
+      borderRadius: "var(--radius)",
+      padding: "0.5rem 1rem",
+      cursor: "pointer",
+      fontSize: "0.875rem",
+      color: "var(--color-foreground)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="confirm-cancel"]': {
+      background: "none",
+      border: "1px solid var(--color-border)",
+      borderRadius: "var(--radius)",
+      padding: "0.5rem 1rem",
+      cursor: "pointer",
+      fontSize: "0.875rem",
+      color: "var(--color-foreground)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="confirm-action"]': {
+      border: "none",
+      borderRadius: "var(--radius)",
+      padding: "0.5rem 1rem",
+      cursor: "pointer",
+      fontSize: "0.875rem",
+      fontWeight: "500",
+      color: "var(--color-primary-foreground)",
+      backgroundColor: "var(--color-primary)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="confirm-action"][data-intent="danger"]': {
+      color: "var(--color-destructive-foreground)",
+      backgroundColor: "var(--color-destructive)"
+    }
+  });
+  injectCSS(`
+@media (min-width: 640px) {
+  dialog[data-dialog-wrapper] > [data-part="panel"] {
+    max-width: 24rem;
+  }
+}
+@container (min-width: 20rem) {
+  dialog[data-dialog-wrapper] [data-part="footer"] {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+  `.trim());
+  return output;
+}
 // src/styles/drawer.ts
-import { css as css15 } from "@vertz/ui";
-var focusRing7 = {
+import { css as css14 } from "@vertz/ui";
+var focusRing6 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2308,7 +1863,7 @@ var PANEL_BASE = [
   "gap:4"
 ];
 function createDrawerStyles() {
-  const s = css15({
+  const s = css14({
     drawerOverlay: [
       "fixed",
       "inset:0",
@@ -2331,7 +1886,22 @@ function createDrawerStyles() {
           inset: "0 auto 0 0",
           width: "75%",
           "max-width": "24rem",
-          "border-radius": "0 0.75rem 0.75rem 0"
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
+          "border-radius": "0 calc(var(--radius) * 2) calc(var(--radius) * 2) 0"
+        },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 50%)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 150ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
         }
       },
       {
@@ -2349,7 +1919,22 @@ function createDrawerStyles() {
           inset: "0 0 0 auto",
           width: "75%",
           "max-width": "24rem",
-          "border-radius": "0.75rem 0 0 0.75rem"
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
+          "border-radius": "calc(var(--radius) * 2) 0 0 calc(var(--radius) * 2)"
+        },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 50%)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 150ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
         }
       },
       {
@@ -2365,7 +1950,22 @@ function createDrawerStyles() {
       {
         "&": {
           inset: "0 0 auto 0",
-          "border-radius": "0 0 0.75rem 0.75rem"
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
+          "border-radius": "0 0 calc(var(--radius) * 2) calc(var(--radius) * 2)"
+        },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 50%)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 150ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
         }
       },
       {
@@ -2381,7 +1981,22 @@ function createDrawerStyles() {
       {
         "&": {
           inset: "auto 0 0 0",
-          "border-radius": "0.75rem 0.75rem 0 0"
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
+          "border-radius": "calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0"
+        },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 50%)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 150ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
         }
       },
       {
@@ -2427,7 +2042,7 @@ function createDrawerStyles() {
       "cursor:pointer",
       "transition:colors",
       { "&:hover": ["opacity:1"] },
-      focusRing7
+      focusRing6
     ]
   });
   return {
@@ -2446,9 +2061,9 @@ function createDrawerStyles() {
   };
 }
 // src/styles/dropdown-menu.ts
-import { css as css16 } from "@vertz/ui";
+import { css as css15 } from "@vertz/ui";
 function createDropdownMenuStyles() {
-  const s = css16({
+  const s = css15({
     dmContent: [
       "z:50",
       "overflow-hidden",
@@ -2507,6 +2122,17 @@ function createDropdownMenuStyles() {
     css: s.css
   };
 }
+// src/styles/empty-state.ts
+import { css as css16 } from "@vertz/ui";
+function createEmptyStateStyles() {
+  return css16({
+    root: ["flex", "flex-col", "items:center", "justify:center", "py:12", "text:center"],
+    icon: ["mb:3", "text:muted-foreground"],
+    title: ["font:lg", "font:semibold", "text:foreground", "mb:1"],
+    description: ["text:sm", "text:muted-foreground", "mb:4", "max-w:md"],
+    action: ["mt:2"]
+  });
+}
 // src/styles/form-group.ts
 import { css as css17 } from "@vertz/ui";
 function createFormGroup() {
@@ -2526,21 +2152,26 @@ function createHoverCardStyles() {
   const s = css18({
     hoverCardContent: [
       "z:50",
-      "rounded:md",
+      "rounded:lg",
       "border:1",
       "border:border",
       "bg:popover",
       "text:popover-foreground",
       "shadow:md",
+      "outline-none",
       "p:4",
       {
         "&": { width: "16rem" }
       },
       {
-        '&[data-state="open"]': [animationDecl("vz-fade-in 150ms ease-out forwards")]
+        '&[data-state="open"]': [
+          animationDecl("vz-fade-in 150ms ease-out forwards, vz-zoom-in 150ms ease-out forwards")
+        ]
       },
       {
-        '&[data-state="closed"]': [animationDecl("vz-fade-out 150ms ease-out forwards")]
+        '&[data-state="closed"]': [
+          animationDecl("vz-fade-out 150ms ease-out forwards, vz-zoom-out 150ms ease-out forwards")
+        ]
       }
     ]
   });
@@ -2552,7 +2183,7 @@ function createHoverCardStyles() {
 // src/styles/input.ts
 import { css as css19 } from "@vertz/ui";
 function createInput() {
-  const focusRing8 = {
+  const focusRing7 = {
     "&:focus-visible": [
       "outline-none",
       "border:ring",
@@ -2581,7 +2212,7 @@ function createInput() {
       "text:sm",
       "text:foreground",
       "transition:colors",
-      focusRing8,
+      focusRing7,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { [DARK]: [bgOpacity("input", 30)] },
       {
@@ -2633,6 +2264,7 @@ function createMenubarStyles() {
       "border:1",
       "border:border",
       "bg:background",
+      "text:foreground",
       "p:1",
       { "&": { "column-gap": "0.25rem" } }
     ],
@@ -2772,7 +2404,7 @@ function createNavigationMenuStyles() {
 }
 // src/styles/pagination.ts
 import { css as css23 } from "@vertz/ui";
-var focusRing8 = {
+var focusRing7 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2783,43 +2415,112 @@ var focusRing8 = {
 };
 function createPaginationStyles() {
   const s = css23({
-    paginationNav: [],
-    paginationList: ["flex", "flex-wrap", "items:center", "gap:1"],
+    paginationNav: [
+      "flex",
+      "justify:center",
+      {
+        "&": {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          width: "100%"
+        }
+      }
+    ],
+    paginationList: [
+      "flex",
+      "items:center",
+      {
+        "&": {
+          gap: "0.125rem",
+          "list-style": "none",
+          margin: "0",
+          padding: "0"
+        }
+      }
+    ],
     paginationItem: [],
     paginationLink: [
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
+      "rounded:lg",
       "text:sm",
       "font:medium",
-      "h:9",
-      "w:9",
-      "border:1",
-      "border:input",
-      "bg:background",
+      "bg:transparent",
       "cursor:pointer",
-      "transition:colors",
-      focusRing8,
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
+      "transition:all",
+      focusRing7,
+      {
+        "&": {
+          height: "2rem",
+          width: "2rem",
+          border: "1px solid transparent",
+          "white-space": "nowrap"
+        }
+      },
+      { "&:hover": ["bg:muted", "text:foreground"] },
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] }
     ],
     paginationLinkActive: [
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
+      "rounded:lg",
       "text:sm",
       "font:medium",
-      "h:9",
-      "w:9",
-      "bg:primary",
-      "text:primary-foreground",
       "border:1",
-      "border:primary",
-      focusRing8
+      "border:border",
+      "bg:background",
+      "text:foreground",
+      "cursor:pointer",
+      focusRing7,
+      {
+        "&": {
+          height: "2rem",
+          width: "2rem"
+        }
+      },
+      { "&:hover": ["bg:muted", "text:foreground"] }
+    ],
+    paginationNavButton: [
+      "inline-flex",
+      "items:center",
+      "justify:center",
+      "rounded:lg",
+      "text:sm",
+      "font:medium",
+      "bg:transparent",
+      "cursor:pointer",
+      "transition:all",
+      focusRing7,
+      {
+        "&": {
+          height: "2rem",
+          border: "1px solid transparent",
+          "white-space": "nowrap",
+          gap: "0.375rem",
+          "padding-left": "0.375rem",
+          "padding-right": "0.625rem"
+        }
+      },
+      { "&:hover": ["bg:muted", "text:foreground"] },
+      { "&:disabled": ["pointer-events-none", "opacity:0.5"] }
     ],
-    paginationEllipsis: ["inline-flex", "items:center", "justify:center", "h:9", "w:9", "text:sm"]
+    paginationEllipsis: [
+      "inline-flex",
+      "items:center",
+      "justify:center",
+      {
+        "&": {
+          height: "2rem",
+          width: "2rem"
+        },
+        '& svg:not([class*="size-"])': {
+          width: "1rem",
+          height: "1rem"
+        }
+      }
+    ]
   });
   return {
     nav: s.paginationNav,
@@ -2827,6 +2528,7 @@ function createPaginationStyles() {
     item: s.paginationItem,
     link: s.paginationLink,
     linkActive: s.paginationLinkActive,
+    navButton: s.paginationNavButton,
     ellipsis: s.paginationEllipsis,
     css: s.css
   };
@@ -2887,7 +2589,7 @@ function createProgressStyles() {
 }
 // src/styles/radio-group.ts
 import { css as css26 } from "@vertz/ui";
-var focusRing9 = {
+var focusRing8 = {
   "&:focus-visible": [
     "outline-none",
     "border:ring",
@@ -2919,7 +2621,7 @@ function createRadioGroupStyles() {
         }
       },
       { [DARK]: [bgOpacity("input", 30)] },
-      focusRing9,
+      focusRing8,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
         '&[data-state="checked"]': ["bg:primary", "text:primary-foreground", "border:primary"]
@@ -2963,7 +2665,7 @@ function createRadioGroupStyles() {
 }
 // src/styles/resizable-panel.ts
 import { css as css27 } from "@vertz/ui";
-var focusRing10 = {
+var focusRing9 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2975,14 +2677,14 @@ var focusRing10 = {
 function createResizablePanelStyles() {
   const s = css27({
     resizableRoot: ["flex", "h:full", "w:full"],
-    resizablePanel: ["overflow-hidden"],
+    resizablePanel: ["overflow-hidden", { "&": [{ "white-space": "nowrap" }] }],
     resizableHandle: [
       "relative",
       "flex",
       "items:center",
       "justify:center",
       "bg:border",
-      focusRing10,
+      focusRing9,
       {
         "&:hover": ["bg:muted-foreground"]
       },
@@ -3038,7 +2740,12 @@ function createScrollAreaStyles() {
         ]
       }
     ],
-    scrollAreaThumb: ["relative", "flex-1", "rounded:full", "bg:border"]
+    scrollAreaThumb: [
+      "relative",
+      "flex-1",
+      "rounded:full",
+      { "&": { "background-color": "color-mix(in oklch, var(--color-foreground) 40%, transparent)" } }
+    ]
   });
   return {
     root: s.scrollAreaRoot,
@@ -3050,7 +2757,7 @@ function createScrollAreaStyles() {
 }
 // src/styles/select.ts
 import { css as css29 } from "@vertz/ui";
-var focusRing11 = {
+var focusRing10 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3083,7 +2790,7 @@ function createSelectStyles() {
           "padding-left": "0.625rem"
         }
       },
-      focusRing11,
+      focusRing10,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { '&[data-state="open"]': ["border:ring"] },
       { [DARK]: [bgOpacity("input", 30)] },
@@ -3111,21 +2818,21 @@ function createSelectStyles() {
       },
       {
         '&[data-state="open"][data-side="bottom"]': [
-          animationDecl("vz-slide-down-in 100ms ease-out forwards")
+          animationDecl("vz-slide-in-from-top 150ms ease-out forwards")
         ]
       },
       {
         '&[data-state="open"][data-side="top"]': [
-          animationDecl("vz-slide-up-in 100ms ease-out forwards")
+          animationDecl("vz-slide-in-from-bottom 150ms ease-out forwards")
         ]
       },
       {
         '&[data-state="open"]:not([data-side])': [
-          animationDecl("vz-zoom-in 100ms ease-out forwards")
+          animationDecl("vz-zoom-in 150ms ease-out forwards")
         ]
       },
       {
-        '&[data-state="closed"]': [animationDecl("vz-zoom-out 100ms ease-out forwards")]
+        '&[data-state="closed"]': [animationDecl("vz-zoom-out 150ms ease-out forwards")]
       }
     ],
     selectItem: [
@@ -3216,7 +2923,7 @@ function createSeparator() {
 }
 // src/styles/sheet.ts
 import { css as css31 } from "@vertz/ui";
-var focusRing12 = {
+var focusRing11 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3273,7 +2980,7 @@ function createSheetStyles() {
           outline: "none",
           border: "none"
         },
-        "&:not([open])": { display: "none" },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
           "background-color": "oklch(0 0 0 / 10%)",
           "backdrop-filter": "blur(4px)",
@@ -3307,7 +3014,7 @@ function createSheetStyles() {
           outline: "none",
           border: "none"
         },
-        "&:not([open])": { display: "none" },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
           "background-color": "oklch(0 0 0 / 10%)",
           "backdrop-filter": "blur(4px)",
@@ -3339,7 +3046,7 @@ function createSheetStyles() {
           outline: "none",
           border: "none"
         },
-        "&:not([open])": { display: "none" },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
           "background-color": "oklch(0 0 0 / 10%)",
           "backdrop-filter": "blur(4px)",
@@ -3371,7 +3078,7 @@ function createSheetStyles() {
           outline: "none",
           border: "none"
         },
-        "&:not([open])": { display: "none" },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
           "background-color": "oklch(0 0 0 / 10%)",
           "backdrop-filter": "blur(4px)",
@@ -3415,7 +3122,7 @@ function createSheetStyles() {
         }
       },
       { "&:hover": ["opacity:1"] },
-      focusRing12
+      focusRing11
     ]
   });
   return {
@@ -3436,9 +3143,17 @@ var pulse = keyframes2("vz-skeleton-pulse", {
   "0%, 100%": { opacity: "1" },
   "50%": { opacity: "0.5" }
 });
+var skeletonBase = [
+  "bg:muted",
+  "rounded:md",
+  { "&": { animation: `${pulse} 2s ease-in-out infinite` } }
+];
 function createSkeletonStyles() {
   return css32({
-    base: ["bg:muted", "rounded:md", { "&": { animation: `${pulse} 2s ease-in-out infinite` } }]
+    root: [...skeletonBase],
+    textRoot: ["flex", "flex-col"],
+    textLine: [...skeletonBase, "h:4"],
+    circleRoot: [...skeletonBase, { "&": { borderRadius: "50%" } }]
   });
 }
 // src/styles/slider.ts
@@ -3519,7 +3234,7 @@ function createSliderStyles() {
 }
 // src/styles/switch.ts
 import { css as css34 } from "@vertz/ui";
-var focusRing13 = {
+var focusRing12 = {
   "&:focus-visible": [
     "outline-none",
     "border:ring",
@@ -3543,7 +3258,7 @@ function createSwitchStyles() {
       "h:5",
       "w:8",
       { [DARK]: [bgOpacity("input", 80)] },
-      focusRing13,
+      focusRing12,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
         '&[data-state="checked"]': ["bg:primary"],
@@ -3591,7 +3306,7 @@ function createSwitchStyles() {
       "h:3.5",
       "w:6",
       { [DARK]: [bgOpacity("input", 80)] },
-      focusRing13,
+      focusRing12,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
         '&[data-state="checked"]': ["bg:primary"],
@@ -3785,7 +3500,7 @@ function createTabsStyles() {
 // src/styles/textarea.ts
 import { css as css37 } from "@vertz/ui";
 function createTextarea() {
-  const focusRing14 = {
+  const focusRing13 = {
     "&:focus-visible": [
       "outline-none",
       "border:ring",
@@ -3815,7 +3530,7 @@ function createTextarea() {
       "text:sm",
       "text:foreground",
       "transition:colors",
-      focusRing14,
+      focusRing13,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { [DARK]: [bgOpacity("input", 30)] }
     ]
@@ -3827,7 +3542,7 @@ function createTextarea() {
 }
 // src/styles/toast.ts
 import { css as css38 } from "@vertz/ui";
-var focusRing14 = {
+var focusRing13 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3894,7 +3609,7 @@ function createToastStyles() {
       "shrink-0",
       { "&": { height: "2rem" } },
       { "&:hover": ["bg:secondary"] },
-      focusRing14
+      focusRing13
     ],
     toastClose: [
       "absolute",
@@ -3903,7 +3618,7 @@ function createToastStyles() {
       "cursor:pointer",
       "transition:colors",
       { "&:hover": ["opacity:1"] },
-      focusRing14
+      focusRing13
     ]
   });
   return {
@@ -3918,7 +3633,7 @@ function createToastStyles() {
 }
 // src/styles/toggle.ts
 import { css as css39 } from "@vertz/ui";
-var focusRing15 = {
+var focusRing14 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3941,7 +3656,7 @@ function createToggleStyles() {
       "gap:2",
       "px:3",
       "h:9",
-      focusRing15,
+      focusRing14,
       { "&:hover": ["bg:muted", "text:muted-foreground"] },
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
@@ -3956,7 +3671,7 @@ function createToggleStyles() {
 }
 // src/styles/toggle-group.ts
 import { css as css40 } from "@vertz/ui";
-var focusRing16 = {
+var focusRing15 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3980,7 +3695,7 @@ function createToggleGroupStyles() {
       "bg:transparent",
       "cursor:pointer",
       "transition:colors",
-      focusRing16,
+      focusRing15,
       { "&:hover": ["bg:muted", "text:muted-foreground"] },
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
@@ -4033,6 +3748,7 @@ function configureTheme(config) {
   const separatorStyles = createSeparator();
   const formGroupStyles = createFormGroup();
   const dialogStyles = createDialogStyles();
+  createDialogGlobalStyles();
   const dropdownMenuStyles = createDropdownMenuStyles();
   const selectStyles = createSelectStyles();
   const tabsStyles = createTabsStyles();
@@ -4043,12 +3759,12 @@ function configureTheme(config) {
   const radioGroupStyles = createRadioGroupStyles();
   const sliderStyles = createSliderStyles();
   const alertStyles = createAlertStyles();
-  const alertDialogStyles = createAlertDialogStyles();
   const accordionStyles = createAccordionStyles();
   const textareaStyles = createTextarea();
   const toastStyles = createToastStyles();
   const tooltipStyles = createTooltipStyles();
   const avatarStyles = createAvatarStyles();
+  const emptyStateStyles = createEmptyStateStyles();
   const skeletonStyles = createSkeletonStyles();
   const tableStyles = createTableStyles();
   const sheetStyles = createSheetStyles();
@@ -4070,7 +3786,6 @@ function configureTheme(config) {
   const toggleGroupStyles = createToggleGroupStyles();
   const styles = {
     alert: alertStyles,
-    alertDialog: alertDialogStyles,
     button: buttonStyles,
     badge: badgeStyles,
     card: cardStyles,
@@ -4093,6 +3808,7 @@ function configureTheme(config) {
     toast: toastStyles,
     tooltip: tooltipStyles,
     avatar: avatarStyles,
+    emptyState: emptyStateStyles,
     skeleton: skeletonStyles,
     table: tableStyles,
     sheet: sheetStyles,
@@ -4113,24 +3829,109 @@ function configureTheme(config) {
     toggle: toggleStyles,
     toggleGroup: toggleGroupStyles
   };
+  const badgeColorInlineStyles = {
+    blue: { backgroundColor: "oklch(0.55 0.15 250)", color: "#fff" },
+    green: { backgroundColor: "oklch(0.55 0.15 155)", color: "#fff" },
+    yellow: { backgroundColor: "oklch(0.75 0.15 85)", color: "oklch(0.25 0.05 85)" }
+  };
+  const DefaultAlert = withStyles18(ComposedAlert, {
+    root: alertStyles.root,
+    title: alertStyles.title,
+    description: alertStyles.description
+  });
+  const DestructiveAlert = withStyles18(ComposedAlert, {
+    root: [alertStyles.root, alertStyles.destructive].join(" "),
+    title: alertStyles.title,
+    description: alertStyles.description
+  });
+  function ThemedAlert({ variant, ...rest }) {
+    return (variant === "destructive" ? DestructiveAlert : DefaultAlert)(rest);
+  }
+  const Alert = Object.assign(ThemedAlert, {
+    Title: ComposedAlert.Title,
+    Description: ComposedAlert.Description
+  });
   const components = {
-    Alert: createAlertComponents(alertStyles),
-    Button: createButtonComponent(buttonStyles),
-    Badge: createBadgeComponent(badgeStyles),
-    Breadcrumb: createBreadcrumbComponent(breadcrumbStyles),
-    Card: createCardComponents(cardStyles),
-    Input: createInputComponent(inputStyles),
-    Textarea: createTextareaComponent(textareaStyles),
-    Label: createLabelComponent(labelStyles),
-    Pagination: createPaginationComponent(paginationStyles),
-    Separator: createSeparatorComponent(separatorStyles),
-    FormGroup: createFormGroupComponents(formGroupStyles),
-    Avatar: createAvatarComponents(avatarStyles),
-    Skeleton: createSkeletonComponents(skeletonStyles),
-    Table: createTableComponents(tableStyles),
+    Alert,
+    Button: ({ intent, size, ...rest }) => ComposedButton({ ...rest, classes: { base: buttonStyles({ intent, size }) } }),
+    Badge: ({ color, ...rest }) => {
+      const style = color ? badgeColorInlineStyles[color] : undefined;
+      return ComposedBadge({ ...rest, classes: { base: badgeStyles({ color }) }, style });
+    },
+    Breadcrumb: withStyles18(ComposedBreadcrumb, {
+      nav: breadcrumbStyles.nav,
+      list: breadcrumbStyles.list,
+      item: breadcrumbStyles.item,
+      link: breadcrumbStyles.link,
+      page: breadcrumbStyles.page,
+      separator: breadcrumbStyles.separator
+    }),
+    Card: withStyles18(ComposedCard, {
+      root: cardStyles.root,
+      header: cardStyles.header,
+      title: cardStyles.title,
+      description: cardStyles.description,
+      content: cardStyles.content,
+      footer: cardStyles.footer,
+      action: cardStyles.action
+    }),
+    Input: withStyles18(ComposedInput, { base: inputStyles.base }),
+    Textarea: withStyles18(ComposedTextarea, { base: textareaStyles.base }),
+    Label: withStyles18(ComposedLabel, { base: labelStyles.base }),
+    Pagination: (props) => ComposedPagination({
+      ...props,
+      classes: {
+        nav: paginationStyles.nav,
+        list: paginationStyles.list,
+        item: paginationStyles.item,
+        link: paginationStyles.link,
+        linkActive: paginationStyles.linkActive,
+        navButton: paginationStyles.navButton,
+        ellipsis: paginationStyles.ellipsis
+      }
+    }),
+    Separator: withStyles18(ComposedSeparator, {
+      base: separatorStyles.base,
+      horizontal: separatorStyles.horizontal,
+      vertical: separatorStyles.vertical
+    }),
+    FormGroup: withStyles18(ComposedFormGroup, {
+      base: formGroupStyles.base,
+      error: formGroupStyles.error
+    }),
+    Avatar: withStyles18(ComposedAvatar, {
+      root: avatarStyles.root,
+      image: avatarStyles.image,
+      fallback: avatarStyles.fallback
+    }),
+    EmptyState: withStyles18(ComposedEmptyState, {
+      root: emptyStateStyles.root,
+      icon: emptyStateStyles.icon,
+      title: emptyStateStyles.title,
+      description: emptyStateStyles.description,
+      action: emptyStateStyles.action
+    }),
+    Skeleton: Object.assign(withStyles18(ComposedSkeleton, { root: skeletonStyles.root }), {
+      Text: withStyles18(ComposedSkeleton.Text, {
+        root: skeletonStyles.textRoot,
+        line: skeletonStyles.textLine
+      }),
+      Circle: withStyles18(ComposedSkeleton.Circle, {
+        root: skeletonStyles.circleRoot
+      })
+    }),
+    Table: withStyles18(ComposedTable, {
+      root: tableStyles.root,
+      header: tableStyles.header,
+      body: tableStyles.body,
+      row: tableStyles.row,
+      head: tableStyles.head,
+      cell: tableStyles.cell,
+      caption: tableStyles.caption,
+      footer: tableStyles.footer
+    }),
     primitives: {
-      AlertDialog: createThemedAlertDialog(alertDialogStyles),
-      Dialog: createThemedDialog(dialogStyles),
+      Dialog: createThemedDialog(),
       DropdownMenu: createThemedDropdownMenu(dropdownMenuStyles),
       Select: createThemedSelect(selectStyles),
       Tabs: createThemedTabs(tabsStyles),
@@ -4149,7 +3950,10 @@ function configureTheme(config) {
       Collapsible: createThemedCollapsible(collapsibleStyles),
       Command: createThemedCommand(commandStyles),
       ContextMenu: createThemedContextMenu(contextMenuStyles),
-      DatePicker: createThemedDatePicker(datePickerStyles, calendarStyles),
+      DatePicker: createThemedDatePicker(datePickerStyles, {
+        ...calendarStyles,
+        root: calendarStyles.rootNoBorder
+      }),
       Drawer: createThemedDrawer(drawerStyles),
       HoverCard: createThemedHoverCard(hoverCardStyles),
       Menubar: createThemedMenubar(menubarStyles),
@@ -4163,5 +3967,7 @@ function configureTheme(config) {
   return { theme, globals, styles, components };
 }
 export {
-  configureTheme
+  palettes,
+  configureTheme,
+  RADIUS_VALUES
 };