cetec-design-system 1.2.0 → 1.2.1

package/dist/index.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { forwardRef, useMemo, createElement, createContext, useContext, useLayoutEffect, useState, useRef, useId as useId$1, useEffect, Children, isValidElement, cloneElement, useReducer, useSyncExternalStore, useCallback } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
-import { b as breakpoints, c as containerSizes } from "./cetec-preset-kUkA_FyU.js";
-import { a } from "./cetec-preset-kUkA_FyU.js";
+import { b as breakpoints, c as containerSizes } from "./cetec-preset-D3bQHejk.js";
+import { a } from "./cetec-preset-D3bQHejk.js";
 function isObject(value) {
   return typeof value === "object" && value != null && !Array.isArray(value);
 }
@@ -2554,9 +2554,25 @@ const menu = /* @__PURE__ */ Object.assign(menuFn, {
 });
 const modalDefaultVariants = {
   "variant": "default",
-  "size": "md"
+  "size": "md",
+  "position": "centered"
 };
-const modalCompoundVariants = [];
+const modalCompoundVariants = [
+  {
+    "position": "top",
+    "size": "mobile",
+    "css": {
+      "container": {
+        "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 modalSlotNames = [
   [
     "overlay",
@@ -2593,6 +2609,7 @@ const modalFn = memo((props = {}) => {
 });
 const modalVariantKeys = [
   "size",
+  "position",
   "variant"
 ];
 const getVariantProps$3 = (variants) => ({ ...modalDefaultVariants, ...compact(variants) });
@@ -2611,6 +2628,10 @@ const modal = /* @__PURE__ */ Object.assign(modalFn, {
       "full",
       "mobile"
     ],
+    "position": [
+      "centered",
+      "top"
+    ],
     "variant": [
       "default",
       "confirmation"
@@ -16305,10 +16326,11 @@ const Modal = (props) => {
     children,
     id,
     variant = "default",
+    position = "centered",
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
-  const classes = modal({ size: size2, variant });
+  const classes = modal({ size: size2, variant, position });
   const [{ phase }, dispatch] = useReducer(modalStateReducer, {
     phase: open ? "open" : "closed"
   });