cetec-design-system 1.2.1-next.0 → 1.2.1

package/dist/{cetec-preset-D4BY_Jqj.js → cetec-preset-D3bQHejk.js}

@@ -280,6 +280,27 @@ const keyframes = defineKeyframes({
       opacity: "0",
       transform: "translate(-50%, -50%) scale(0.95) translateY(-10px)"
     }
+  },
+  /** Top-aligned modal: horizontal center only (see modal recipe `position: top`) */
+  modalScaleInTop: {
+    "0%": {
+      opacity: "0",
+      transform: "translateX(-50%) scale(0.95) translateY(-10px)"
+    },
+    "100%": {
+      opacity: "1",
+      transform: "translateX(-50%) scale(1) translateY(0)"
+    }
+  },
+  modalScaleOutTop: {
+    "0%": {
+      opacity: "1",
+      transform: "translateX(-50%) scale(1) translateY(0)"
+    },
+    "100%": {
+      opacity: "0",
+      transform: "translateX(-50%) scale(0.95) translateY(-10px)"
+    }
   }
 });
 const fontVariants = {
@@ -7045,14 +7066,6 @@ const textInputBase = {
         borderColor: "border.input"
       }
     },
-    _readOnly: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      _focusWithin: {
-        outlineColor: "transparent",
-        borderColor: "border.input"
-      }
-    },
     _groupDisabled: {
       opacity: 1
       // let FormField handle disabled state opacity
@@ -7875,25 +7888,17 @@ const modalBase = {
   container: {
     ...globalBaseStyles,
     position: "fixed",
-    top: "50%",
     left: "50%",
     display: "flex",
     flexDirection: "column",
     width: "full",
+    maxW: "95vw",
     maxHeight: "95vh",
     bg: "surface.overlay",
     borderRadius: "12",
     boxShadow: "overlay",
     outline: "none",
-    zIndex: 1101,
-    // Initial state matches animation start
-    opacity: "0",
-    transform: "translate(-50%, -50%) scale(0.95) translateY(-10px)",
-    // Animation handled via data-state
-    animation: "modalScaleIn 150ms ease-out forwards",
-    '&[data-state="closing"]': {
-      animation: "modalScaleOut 150ms ease-out forwards"
-    }
+    zIndex: 1101
   },
   header: {
     display: "flex",
@@ -7931,31 +7936,39 @@ const modalBase = {
     borderTop: "default"
   }
 };
+const modalContainerCenteredOverlay = {
+  top: "50%",
+  transform: "translate(-50%, -50%) scale(0.95) translateY(-10px)",
+  animation: "modalScaleIn 150ms ease-out forwards",
+  '&[data-state="closing"]': {
+    animation: "modalScaleOut 150ms ease-out forwards"
+  }
+};
 const modalVariants = {
   size: {
     sm: {
       container: {
-        maxWidth: "md"
+        w: "md"
       }
     },
     md: {
       container: {
-        maxWidth: "xl"
+        w: "xl"
       }
     },
     lg: {
       container: {
-        maxWidth: "3xl"
+        w: "3xl"
       }
     },
     xl: {
       container: {
-        maxWidth: "5xl"
+        w: "5xl"
       }
     },
     full: {
       container: {
-        maxWidth: "95vw"
+        w: "95vw"
       }
     },
     mobile: {
@@ -7968,6 +7981,24 @@ const modalVariants = {
       }
     }
   },
+  position: {
+    centered: {
+      container: modalContainerCenteredOverlay
+    },
+    top: {
+      container: {
+        top: "min(2.5vh, token(spacing.64))",
+        transform: "translate(-50%, 0) scale(0.95) translateY(-10px)",
+        animation: "modalScaleInTop 150ms ease-out forwards",
+        '&[data-state="closing"]': {
+          animation: "modalScaleOutTop 150ms ease-out forwards"
+        },
+        // Align with default centered overlay at `xsDown` (full-viewport sheet):
+        // without this, `top` + fixed offset leaves a gap above the sheet.
+        xsDown: modalContainerCenteredOverlay
+      }
+    }
+  },
   variant: {
     default: {
       container: {
@@ -8003,9 +8034,19 @@ const modalRecipe = defineSlotRecipe({
   ],
   base: modalBase,
   variants: modalVariants,
+  compoundVariants: [
+    {
+      position: "top",
+      size: "mobile",
+      css: {
+        container: modalContainerCenteredOverlay
+      }
+    }
+  ],
   defaultVariants: {
     variant: "default",
-    size: "md"
+    size: "md",
+    position: "centered"
   }
 });
 const datePickerBase = {
@@ -9728,4 +9769,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-D4BY_Jqj.js.map
+//# sourceMappingURL=cetec-preset-D3bQHejk.js.map