@vertz/theme-shadcn 0.2.22 → 0.2.23

package/dist/index.d.ts

@@ -224,6 +224,7 @@ interface CalendarRootProps {
 	weekStartsOn?: ComposedCalendarProps["weekStartsOn"];
 	onValueChange?: ComposedCalendarProps["onValueChange"];
 	onMonthChange?: (month: Date) => void;
+	captionLayout?: ComposedCalendarProps["captionLayout"];
 }
 type ThemedCalendarComponent = (props: CalendarRootProps) => HTMLElement;
 import { ChildValue as ChildValue10 } from "@vertz/ui";
@@ -352,6 +353,7 @@ interface ThemedContextMenuComponent {
 	Separator: (props: ContextMenuSlotProps) => HTMLElement;
 }
 import { ChildValue as ChildValue15 } from "@vertz/ui";
+import { ComposedCalendarProps as ComposedCalendarProps2 } from "@vertz/ui-primitives";
 interface DatePickerRootProps {
 	mode?: "single" | "range";
 	defaultValue?: Date | {
@@ -369,6 +371,7 @@ interface DatePickerRootProps {
 		to: Date;
 	} | null) => void;
 	onOpenChange?: (open: boolean) => void;
+	captionLayout?: ComposedCalendarProps2["captionLayout"];
 	children?: ChildValue15;
 }
 interface DatePickerSlotProps {
@@ -870,6 +873,8 @@ type CalendarBlocks = {
 	headCell: StyleEntry8[];
 	cell: StyleEntry8[];
 	dayButton: StyleEntry8[];
+	monthSelect: StyleEntry8[];
+	yearSelect: StyleEntry8[];
 };
 /** Create calendar css() styles. */
 declare function createCalendarStyles(): CSSOutput16<CalendarBlocks>;
@@ -970,6 +975,7 @@ type PaginationBlocks = {
 	item: StyleEntry23[];
 	link: StyleEntry23[];
 	linkActive: StyleEntry23[];
+	navButton: StyleEntry23[];
 	ellipsis: StyleEntry23[];
 };
 /** Create pagination css() styles. */

package/dist/index.js

@@ -92,9 +92,9 @@ function createAvatarComponents(avatarStyles) {
 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);"
+    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)" }
   };
   return function Badge({
     color,
@@ -107,7 +107,7 @@ function createBadgeComponent(badgeStyles) {
     el.className = [badgeStyles({ color }), effectiveClass].filter(Boolean).join(" ");
     const inlineStyle = color ? colorStyles[color] : undefined;
     if (inlineStyle) {
-      el.style.cssText = inlineStyle;
+      Object.assign(el.style, inlineStyle);
     }
     for (const node of resolveChildren3(children)) {
       el.appendChild(node);
@@ -382,8 +382,10 @@ function createPaginationComponent(styles) {
     prevLi.classList.add(styles.item);
     const prevBtn = document.createElement("button");
     prevBtn.setAttribute("type", "button");
-    prevBtn.classList.add(styles.link);
-    prevBtn.textContent = "‹";
+    prevBtn.classList.add(styles.navButton);
+    prevBtn.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" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg><span>Previous</span>';
+    prevBtn.style.paddingLeft = "0.375rem";
+    prevBtn.style.paddingRight = "0.625rem";
     prevBtn.setAttribute("aria-label", "Previous page");
     if (currentPage <= 1) {
       prevBtn.disabled = true;
@@ -400,7 +402,7 @@ function createPaginationComponent(styles) {
         const span = document.createElement("span");
         span.setAttribute("aria-hidden", "true");
         span.classList.add(styles.ellipsis);
-        span.textContent = "…";
+        span.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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>';
         li.appendChild(span);
       } else {
         const btn = document.createElement("button");
@@ -421,8 +423,10 @@ function createPaginationComponent(styles) {
     nextLi.classList.add(styles.item);
     const nextBtn = document.createElement("button");
     nextBtn.setAttribute("type", "button");
-    nextBtn.classList.add(styles.link);
-    nextBtn.textContent = "›";
+    nextBtn.classList.add(styles.navButton);
+    nextBtn.innerHTML = '<span>Next</span><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" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>';
+    nextBtn.style.paddingLeft = "0.625rem";
+    nextBtn.style.paddingRight = "0.375rem";
     nextBtn.setAttribute("aria-label", "Next page");
     if (currentPage >= totalPages) {
       nextBtn.disabled = true;
@@ -501,7 +505,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);
@@ -652,7 +658,8 @@ function createThemedDatePicker(styles, calendarClasses) {
     formatDate,
     placeholder,
     onValueChange,
-    onOpenChange
+    onOpenChange,
+    captionLayout
   }) {
     return ComposedDatePicker({
       children,
@@ -666,6 +673,7 @@ function createThemedDatePicker(styles, calendarClasses) {
       placeholder,
       onValueChange,
       onOpenChange,
+      captionLayout,
       classes: {
         trigger: styles.trigger,
         content: styles.content,
@@ -694,7 +702,7 @@ function createThemedDialog(styles) {
 }
 
 // src/components/primitives/drawer.tsx
-import { __element, __enterChildren, __exitChildren, __insert } from "@vertz/ui/internals";
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __pushMountFrame } from "@vertz/ui/internals";
 import { resolveChildren as resolveChildren8 } from "@vertz/ui";
 import { ComposedSheet } from "@vertz/ui-primitives";
 var PANEL_CLASS_MAP = {
@@ -704,81 +712,86 @@ 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 = 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;
+      })();
+    }, DrawerFooter = function({ 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;
+      })();
+    }, 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
@@ -847,7 +860,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,
@@ -1472,7 +1485,7 @@ function createAlertDialogStyles() {
           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)",
@@ -1623,7 +1636,14 @@ 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"],
     breadcrumbLink: ["transition:colors", "text:foreground", { "&:hover": ["text:foreground"] }],
@@ -1653,27 +1673,77 @@ var focusRing2 = {
 };
 function createCalendarStyles() {
   const s = css6({
-    calendarRoot: ["p:3"],
-    calendarHeader: ["flex", "items:center", "justify:between", "py:2"],
-    calendarTitle: ["text:sm", "font:medium"],
+    calendarRoot: [
+      "w:fit",
+      "bg:background",
+      "rounded:lg",
+      "border:1",
+      "border:border",
+      {
+        "&": {
+          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"] },
+      "transition:all",
+      { "&:hover": ["bg:muted", "text:foreground"] },
       focusRing2,
       {
         "&": {
           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 +1755,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 +1769,8 @@ function createCalendarStyles() {
       {
         "&": {
           "text-align": "center",
-          padding: "0"
+          padding: "0",
+          "user-select": "none"
         }
       }
     ],
@@ -1706,24 +1778,64 @@ function createCalendarStyles() {
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
+      "rounded:lg",
       "text:sm",
+      "font:normal",
       "bg:transparent",
       "cursor:pointer",
-      "transition:colors",
+      "transition:all",
       focusRing2,
       {
         "&": {
-          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",
+      focusRing2,
+      {
+        "&": {
+          border: "none",
+          "padding-inline": "0.25rem",
+          appearance: "auto"
+        }
+      }
+    ],
+    calendarYearSelect: [
+      "text:sm",
+      "font:medium",
+      "bg:transparent",
+      "cursor:pointer",
+      focusRing2,
+      {
+        "&": {
+          border: "none",
+          "padding-inline": "0.25rem",
+          appearance: "auto"
+        }
+      }
     ]
   });
   return {
@@ -1735,6 +1847,8 @@ function createCalendarStyles() {
     headCell: s.calendarHeadCell,
     cell: s.calendarCell,
     dayButton: s.calendarDayButton,
+    monthSelect: s.calendarMonthSelect,
+    yearSelect: s.calendarYearSelect,
     css: s.css
   };
 }
@@ -1802,19 +1916,10 @@ function createCard() {
 import { css as css8 } from "@vertz/ui";
 function createCarouselStyles() {
   const s = css8({
-    carouselRoot: ["relative", "overflow-hidden"],
+    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"] }
+      { '&[data-state="inactive"]': [{ display: "none" }] }
     ],
     carouselPrevButton: [
       "absolute",
@@ -1908,10 +2013,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 {
@@ -1982,7 +2112,9 @@ function createCommandStyles() {
       focusRing4
     ],
     commandList: [
-      "p:1",
+      "px:1",
+      "pb:1",
+      "pt:2",
       {
         "&": {
           "max-height": "300px",
@@ -2053,11 +2185,15 @@ function createContextMenuStyles() {
       "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 +2204,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,
@@ -2192,7 +2339,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)",
@@ -2331,7 +2478,22 @@ function createDrawerStyles() {
           inset: "0 auto 0 0",
           width: "75%",
           "max-width": "24rem",
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
           "border-radius": "0 0.75rem 0.75rem 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 +2511,22 @@ function createDrawerStyles() {
           inset: "0 0 0 auto",
           width: "75%",
           "max-width": "24rem",
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
           "border-radius": "0.75rem 0 0 0.75rem"
+        },
+        '&: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 +2542,22 @@ function createDrawerStyles() {
       {
         "&": {
           inset: "0 0 auto 0",
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
           "border-radius": "0 0 0.75rem 0.75rem"
+        },
+        '&: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 +2573,22 @@ function createDrawerStyles() {
       {
         "&": {
           inset: "auto 0 0 0",
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
           "border-radius": "0.75rem 0.75rem 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"
         }
       },
       {
@@ -2526,21 +2733,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")
+        ]
       }
     ]
   });
@@ -2783,43 +2995,111 @@ 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",
+      "transition:all",
       focusRing8,
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
+      {
+        "&": {
+          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",
+      "cursor:pointer",
+      focusRing8,
+      {
+        "&": {
+          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",
+      focusRing8,
+      {
+        "&": {
+          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 +3107,7 @@ function createPaginationStyles() {
     item: s.paginationItem,
     link: s.paginationLink,
     linkActive: s.paginationLinkActive,
+    navButton: s.paginationNavButton,
     ellipsis: s.paginationEllipsis,
     css: s.css
   };
@@ -2975,7 +3256,7 @@ 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",
@@ -3111,21 +3392,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: [
@@ -3273,7 +3554,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 +3588,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 +3620,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 +3652,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)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/theme-shadcn",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "type": "module",
   "license": "MIT",
   "description": "Shadcn-inspired theme for Vertz — pre-built style definitions using variants() and css()",
@@ -39,12 +39,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vertz/ui": "^0.2.21",
-    "@vertz/ui-primitives": "^0.2.21"
+    "@vertz/ui": "^0.2.22",
+    "@vertz/ui-primitives": "^0.2.22"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.7.0",
-    "@vertz/ui-compiler": "^0.2.21",
+    "@vertz/ui-compiler": "^0.2.22",
     "bunup": "^0.16.31",
     "happy-dom": "^20.7.0",
     "typescript": "^5.7.0"