@pactor-app/ui 1.9.0 → 1.11.0

package/dist/{chunk-KUFQSYTS.js → chunk-HW6M3BEF.js}

@@ -141,7 +141,7 @@ import {
   chartColor,
   navigationMenuTriggerStyle,
   toast
-} from "./chunk-VT5XP4U4.js";
+} from "./chunk-NVORKHWX.js";
 import {
   Dialog,
   DialogContent,
@@ -153,7 +153,7 @@ import {
   DrawerContent,
   DrawerHeader,
   DrawerTitle
-} from "./chunk-F42SGQNW.js";
+} from "./chunk-XUHJ5YSG.js";
 import {
   Accordion,
   AccordionContent,
@@ -325,13 +325,38 @@ function Badge2({ text, variant = "default", className, style }) {
 
 // src/components/components/Breadcrumb/index.tsx
 import { Fragment } from "react";
+
+// src/components/spa-link.ts
+import { useRenderer as useRenderer3 } from "@pactor-app/runtime";
+function shouldInterceptLinkClick(event, href, target) {
+  return typeof href === "string" && href.startsWith("/") && (target === void 0 || target === "_self") && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+function useSpaLinkClick() {
+  const { context } = useRenderer3();
+  return (event, href, target) => {
+    if (shouldInterceptLinkClick(event, href, target)) {
+      event.preventDefault();
+      context.route.navigate(href);
+    }
+  };
+}
+
+// src/components/components/Breadcrumb/index.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function Breadcrumb2({ items = [], className, style }) {
+  const handleSpaClick = useSpaLinkClick();
   return /* @__PURE__ */ jsx8(Breadcrumb, { className, style, children: /* @__PURE__ */ jsx8(BreadcrumbList, { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs5(Fragment, { children: [
       index > 0 ? /* @__PURE__ */ jsx8(BreadcrumbSeparator, {}) : null,
-      /* @__PURE__ */ jsx8(BreadcrumbItem, { children: isLast || !item.href ? /* @__PURE__ */ jsx8(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx8(BreadcrumbLink, { href: item.href, children: item.label }) })
+      /* @__PURE__ */ jsx8(BreadcrumbItem, { children: isLast || !item.href ? /* @__PURE__ */ jsx8(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx8(
+        BreadcrumbLink,
+        {
+          href: item.href,
+          onClick: (event) => handleSpaClick(event, item.href),
+          children: item.label
+        }
+      ) })
     ] }, `${item.label}-${index}`);
   }) }) });
 }
@@ -353,6 +378,7 @@ var sizeMap = {
 };
 function Button2({
   text,
+  icon,
   variant = "default",
   danger,
   size = "middle",
@@ -381,7 +407,7 @@ function Button2({
         className
       ),
       children: [
-        loading ? /* @__PURE__ */ jsx9(Loader2, { "aria-hidden": true, className: "animate-spin" }) : null,
+        loading ? /* @__PURE__ */ jsx9(Loader2, { "aria-hidden": true, className: "animate-spin" }) : icon ? /* @__PURE__ */ jsx9(Icon, { name: icon, size: "sm" }) : null,
         text ?? children
       ]
     }
@@ -499,7 +525,7 @@ function Card2({ title, bordered = true, rounded, className, style, children })
 }
 
 // src/components/components/Carousel/index.tsx
-import { useRenderer as useRenderer3 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer4 } from "@pactor-app/runtime";
 import { useEffect as useEffect2, useState as useState2 } from "react";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function isDslNode(item) {
@@ -512,7 +538,7 @@ function Carousel2({
   className,
   style
 }) {
-  const { renderChildren } = useRenderer3();
+  const { renderChildren } = useRenderer4();
   const [api, setApi] = useState2();
   useEffect2(() => {
     if (!api || !autoplay) return;
@@ -890,7 +916,7 @@ function Chart({
 }
 
 // src/components/components/ChatInput/index.tsx
-import { useRenderer as useRenderer4 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer5 } from "@pactor-app/runtime";
 import { ArrowUp } from "lucide-react";
 import {
   useRef,
@@ -912,7 +938,7 @@ function ChatInput({
   className,
   style
 }) {
-  const { renderChildren } = useRenderer4();
+  const { renderChildren } = useRenderer5();
   const controlled = value !== void 0;
   const [draft, setDraft] = useState5("");
   const text = controlled ? value : draft;
@@ -1032,7 +1058,7 @@ function ContextMenu2({
 }
 
 // src/components/components/DataTable/index.tsx
-import { useI18n as useI18n3, useRenderer as useRenderer5 } from "@pactor-app/runtime";
+import { useI18n as useI18n3, useRenderer as useRenderer6 } from "@pactor-app/runtime";
 import { ArrowDown, ArrowUp as ArrowUp2, ArrowUpDown } from "lucide-react";
 import { useMemo, useState as useState6 } from "react";
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -1062,7 +1088,7 @@ function DataTable({
   className,
   style
 }) {
-  const { renderChildren } = useRenderer5();
+  const { renderChildren } = useRenderer6();
   const { t } = useI18n3();
   const [sortState, setSortState] = useState6(sort);
   const [filters, setFilters] = useState6({});
@@ -1484,7 +1510,7 @@ function DatePicker(props) {
 }
 
 // src/components/components/Dialog/index.tsx
-import { useRenderer as useRenderer6 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer7 } from "@pactor-app/runtime";
 import { useState as useState8 } from "react";
 import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 function Dialog2({
@@ -1497,7 +1523,7 @@ function Dialog2({
   className,
   style
 }) {
-  const { renderChildren } = useRenderer6();
+  const { renderChildren } = useRenderer7();
   const [innerOpen, setInnerOpen] = useState8(false);
   const controlled = open !== void 0;
   const visible = controlled ? open : innerOpen;
@@ -1611,9 +1637,15 @@ function Empty2({ title, description, children, className, style }) {
 
 // src/components/components/Field/index.tsx
 import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
-function Field2({ label, description, error, children, className, style }) {
+function Field2({ label, required, description, error, children, className, style }) {
   return /* @__PURE__ */ jsxs23(Field, { className, style, children: [
-    label ? /* @__PURE__ */ jsx28(FieldLabel, { children: label }) : null,
+    label ? /* @__PURE__ */ jsxs23(FieldLabel, { children: [
+      required ? /* @__PURE__ */ jsxs23("span", { "aria-hidden": true, className: "text-destructive", children: [
+        "*",
+        " "
+      ] }) : null,
+      label
+    ] }) : null,
     children,
     description ? /* @__PURE__ */ jsx28(FieldDescription, { children: description }) : null,
     error ? /* @__PURE__ */ jsx28(FieldError, { match: true, children: error }) : null
@@ -1688,7 +1720,7 @@ function Footer({ className, style, children }) {
 }
 
 // src/components/components/Form/index.tsx
-import { useRenderer as useRenderer7 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer8 } from "@pactor-app/runtime";
 import {
   useCallback,
   useEffect as useEffect6,
@@ -1710,7 +1742,7 @@ function Form({
   onSubmit,
   onValuesChange
 }) {
-  const { context } = useRenderer7();
+  const { context } = useRenderer8();
   const [values, setValues] = useState9(() => ({
     ...initialValues
   }));
@@ -2020,13 +2052,13 @@ function HeaderLocalesArea({
 }
 
 // src/components/components/HoverCard/index.tsx
-import { useRenderer as useRenderer8 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer9 } from "@pactor-app/runtime";
 import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function isDslNode2(value) {
   return typeof value === "object" && value !== null && typeof value.type === "string";
 }
 function HoverCard2({ content, children, className, style }) {
-  const { renderChildren } = useRenderer8();
+  const { renderChildren } = useRenderer9();
   return /* @__PURE__ */ jsxs25(HoverCard, { children: [
     /* @__PURE__ */ jsx34(HoverCardTrigger, { render: triggerWrapper("hover-card-trigger-wrap"), children }),
     /* @__PURE__ */ jsx34(HoverCardContent, { className, style, children: isDslNode2(content) ? renderChildren([content]) : content })
@@ -2048,6 +2080,7 @@ function Input2({
   allowClear,
   onChange,
   className,
+  controlClassName,
   style
 }) {
   const form = useFormContext();
@@ -2079,7 +2112,10 @@ function Input2({
       value: currentValue,
       placeholder,
       disabled,
-      className: !inFormRoot && allowClear !== true ? className : void 0,
+      className: cn(
+        !inFormRoot && allowClear !== true && className,
+        allowClear !== true && controlClassName
+      ),
       style: !inFormRoot && allowClear !== true ? style : void 0,
       onChange: (event) => {
         if (inForm && form && name) {
@@ -2102,7 +2138,11 @@ function Input2({
   const control = allowClear === true ? /* @__PURE__ */ jsxs26(
     "span",
     {
-      className: cn("flex items-center gap-1", !inFormRoot && className),
+      className: cn(
+        "flex items-center gap-1",
+        !inFormRoot && className,
+        controlClassName
+      ),
       style: inFormRoot ? void 0 : style,
       children: [
         input,
@@ -2212,7 +2252,7 @@ function InputOTP2({
 }
 
 // src/components/components/Item/index.tsx
-import { useRenderer as useRenderer9 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer10 } from "@pactor-app/runtime";
 import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function Item2({
   title,
@@ -2222,7 +2262,7 @@ function Item2({
   className,
   style
 }) {
-  const { renderChildren } = useRenderer9();
+  const { renderChildren } = useRenderer10();
   const mediaNodes = media === void 0 ? [] : Array.isArray(media) ? media : [media];
   return /* @__PURE__ */ jsxs28(Item, { className, style, children: [
     mediaNodes.length > 0 ? /* @__PURE__ */ jsx38(ItemMedia, { children: renderChildren(mediaNodes) }) : null,
@@ -2248,10 +2288,10 @@ function Label2({ text, htmlFor, className, style }) {
 
 // src/components/components/Layout/index.tsx
 import { isDslSourceRef } from "@pactor-app/core";
-import { useRenderer as useRenderer10 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer11 } from "@pactor-app/runtime";
 import { jsx as jsx41 } from "react/jsx-runtime";
 function Layout({ direction, className, style, dslChildren }) {
-  const { renderChildren, context } = useRenderer10();
+  const { renderChildren, context } = useRenderer11();
   const hasSider = Array.isArray(dslChildren) ? dslChildren.some(
     (child) => !isDslSourceRef(child) && resolveRootType(child, context) === "Sider"
   ) : false;
@@ -2282,6 +2322,7 @@ function resolveRootType(node, context) {
 // src/components/components/Link/index.tsx
 import { jsx as jsx42 } from "react/jsx-runtime";
 function Link({ href, text, target, className, style, children }) {
+  const handleSpaClick = useSpaLinkClick();
   return /* @__PURE__ */ jsx42(
     "a",
     {
@@ -2291,6 +2332,7 @@ function Link({ href, text, target, className, style, children }) {
       rel: target === "_blank" ? "noreferrer" : void 0,
       className: cn("text-primary underline-offset-4 hover:underline", className),
       style,
+      onClick: (event) => handleSpaClick(event, href, target),
       children: text ?? children
     }
   );
@@ -2443,13 +2485,13 @@ function Pagination2({
 }
 
 // src/components/components/Popover/index.tsx
-import { useRenderer as useRenderer11 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer12 } from "@pactor-app/runtime";
 import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
 function isDslNode3(value) {
   return typeof value === "object" && value !== null && typeof value.type === "string";
 }
 function Popover2({ content, children, className, style }) {
-  const { renderChildren } = useRenderer11();
+  const { renderChildren } = useRenderer12();
   return /* @__PURE__ */ jsxs33(Popover, { children: [
     /* @__PURE__ */ jsx47(
       PopoverTrigger,
@@ -2513,6 +2555,7 @@ function RadioGroup2({
   label,
   rules,
   options = [],
+  direction = "vertical",
   value,
   disabled,
   onChange,
@@ -2544,10 +2587,14 @@ function RadioGroup2({
       onValueChange: handleChange,
       disabled,
       name: inForm ? name : void 0,
-      className: cn(!inForm && className),
+      className: cn(
+        direction === "horizontal" && "flex flex-wrap items-center gap-x-6 gap-y-2",
+        !inForm && className
+      ),
       style: inForm ? void 0 : style,
       children: options.map((option, index) => {
         const optionId = `${controlId}-${index}`;
+        const optionDisabled = disabled || option.disabled;
         return /* @__PURE__ */ jsxs35("span", { className: "inline-flex items-center gap-2", children: [
           /* @__PURE__ */ jsx50(
             RadioGroupItem,
@@ -2557,7 +2604,17 @@ function RadioGroup2({
               disabled: option.disabled
             }
           ),
-          /* @__PURE__ */ jsx50("label", { htmlFor: optionId, className: "text-sm leading-none font-medium", children: option.label })
+          /* @__PURE__ */ jsx50(
+            "label",
+            {
+              htmlFor: optionId,
+              className: cn(
+                "text-sm leading-none font-medium",
+                optionDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+              ),
+              children: option.label
+            }
+          )
         ] }, String(option.value));
       })
     }
@@ -2579,7 +2636,7 @@ function RadioGroup2({
 }
 
 // src/components/components/Resizable/index.tsx
-import { useRenderer as useRenderer12 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer13 } from "@pactor-app/runtime";
 import { Fragment as Fragment4 } from "react";
 import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
 function Resizable({
@@ -2588,7 +2645,7 @@ function Resizable({
   className,
   style
 }) {
-  const { renderChildren } = useRenderer12();
+  const { renderChildren } = useRenderer13();
   return /* @__PURE__ */ jsx51(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ jsxs36(Fragment4, { children: [
     index > 0 ? /* @__PURE__ */ jsx51(ResizableHandle, { withHandle: true }) : null,
     /* @__PURE__ */ jsx51(
@@ -2637,6 +2694,7 @@ function Select2({
   allowClear,
   onChange,
   className,
+  controlClassName,
   style
 }) {
   const form = useFormContext();
@@ -2662,7 +2720,11 @@ function Select2({
   const select = /* @__PURE__ */ jsxs37(
     "span",
     {
-      className: cn("inline-flex items-center gap-1", !inFormRoot && className),
+      className: cn(
+        "inline-flex items-center gap-1",
+        !inFormRoot && className,
+        controlClassName
+      ),
       style: inFormRoot ? void 0 : style,
       children: [
         /* @__PURE__ */ jsxs37(
@@ -2900,11 +2962,11 @@ function Slider2({
 }
 
 // src/components/components/Sonner/index.tsx
-import { useRenderer as useRenderer13 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer14 } from "@pactor-app/runtime";
 import { useEffect as useEffect12 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
 function Sonner({ className, style }) {
-  const { context } = useRenderer13();
+  const { context } = useRenderer14();
   useEffect12(() => {
     const { actions } = context;
     if (actions.has("toast")) {
@@ -3015,7 +3077,7 @@ function Switch2({
 }
 
 // src/components/components/Table/index.tsx
-import { useI18n as useI18n8, useRenderer as useRenderer14 } from "@pactor-app/runtime";
+import { useI18n as useI18n8, useRenderer as useRenderer15 } from "@pactor-app/runtime";
 import { useState as useState12 } from "react";
 import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
 function renderCellValue2(value) {
@@ -3037,7 +3099,7 @@ function Table2({
   className,
   style
 }) {
-  const { renderChildren } = useRenderer14();
+  const { renderChildren } = useRenderer15();
   const { t } = useI18n8();
   const [current, setCurrent] = useState12(1);
   const pageSize = pagination === false ? void 0 : pagination?.pageSize;
@@ -3104,10 +3166,10 @@ function Table2({
 }
 
 // src/components/components/Tabs/index.tsx
-import { useRenderer as useRenderer15 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer16 } from "@pactor-app/runtime";
 import { jsx as jsx64, jsxs as jsxs44 } from "react/jsx-runtime";
 function Tabs2({ items = [], activeKey, variant, onChange, className, style }) {
-  const { renderChildren } = useRenderer15();
+  const { renderChildren } = useRenderer16();
   return /* @__PURE__ */ jsxs44(
     Tabs,
     {

package/dist/{chunk-VT5XP4U4.js → chunk-NVORKHWX.js}

@@ -306,6 +306,7 @@ function Badge({
 
 // src/ui/breadcrumb.tsx
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import * as React from "react";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ jsx6("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
@@ -333,12 +334,27 @@ function BreadcrumbItem({ className, ...props }) {
     }
   );
 }
-function BreadcrumbLink({ className, ...props }) {
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}) {
+  const linkClassName = cn("transition-colors hover:text-foreground", className);
+  if (render) {
+    return React.cloneElement(render, {
+      "data-slot": "breadcrumb-link",
+      ...props,
+      className: cn(
+        linkClassName,
+        render.props.className
+      )
+    });
+  }
   return /* @__PURE__ */ jsx6(
     "a",
     {
       "data-slot": "breadcrumb-link",
-      className: cn("transition-colors hover:text-foreground", className),
+      className: linkClassName,
       ...props
     }
   );
@@ -485,11 +501,11 @@ function Calendar({
 // src/ui/carousel.tsx
 import useEmblaCarousel from "embla-carousel-react";
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon3 } from "lucide-react";
-import * as React from "react";
+import * as React2 from "react";
 import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
-var CarouselContext = React.createContext(null);
+var CarouselContext = React2.createContext(null);
 function useCarousel() {
-  const context = React.useContext(CarouselContext);
+  const context = React2.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -508,16 +524,16 @@ function Carousel({
     { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-  const onSelect = React.useCallback((carouselApi) => {
+  const [canScrollPrev, setCanScrollPrev] = React2.useState(false);
+  const [canScrollNext, setCanScrollNext] = React2.useState(false);
+  const onSelect = React2.useCallback((carouselApi) => {
     if (!carouselApi) return;
     setCanScrollPrev(carouselApi.canScrollPrev());
     setCanScrollNext(carouselApi.canScrollNext());
   }, []);
-  const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);
-  const handleKeyDown = React.useCallback(
+  const scrollPrev = React2.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React2.useCallback(() => api?.scrollNext(), [api]);
+  const handleKeyDown = React2.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -529,10 +545,10 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (api && setApi) setApi(api);
   }, [api, setApi]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -1423,7 +1439,7 @@ function InputGroupInput({
 // src/ui/input-otp.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
-import * as React2 from "react";
+import * as React3 from "react";
 import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
 function InputOTP({
   className,
@@ -1458,7 +1474,7 @@ function InputOTPSlot({
   className,
   ...props
 }) {
-  const inputOTPContext = React2.useContext(OTPInputContext);
+  const inputOTPContext = React3.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -2561,9 +2577,9 @@ function Toggle({
 // src/ui/toggle-group.tsx
 import { Toggle as TogglePrimitive2 } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
-import * as React3 from "react";
+import * as React4 from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
-var ToggleGroupContext = React3.createContext({
+var ToggleGroupContext = React4.createContext({
   size: "default",
   variant: "default"
 });
@@ -2596,7 +2612,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React3.useContext(ToggleGroupContext);
+  const context = React4.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx41(
     TogglePrimitive2,
     {

package/dist/{chunk-S3SMCICK.js → chunk-VRAVO5LE.js}

@@ -11,7 +11,7 @@ import {
   DrawerContent,
   DrawerHeader,
   DrawerTitle
-} from "./chunk-F42SGQNW.js";
+} from "./chunk-XUHJ5YSG.js";
 import {
   Button,
   cn

package/dist/{chunk-F42SGQNW.js → chunk-XUHJ5YSG.js}

@@ -35,7 +35,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 data-closed:fill-mode-forwards",
         className
       ),
       ...props
@@ -55,7 +55,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 shadow-lg shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 shadow-lg shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:fill-mode-forwards sm:max-w-lg",
           className
         ),
         ...props,