mainstack-design-system 1.11.0 → 1.12.0

package/dist/assets/theme/tokenTheme.css

@@ -1016,6 +1016,14 @@ E.g: public:p-20 will apply padding 20px when data-ui-theme="public in html root
   --animate-content-fade-out: content-fade-out 500ms ease-in-out;
   --animate-content-scale-in: content-scale-in 250ms ease-out;
   --animate-content-scale-out: content-scale-out 350ms ease-in;
+  --animate-content-slide-in-left: content-slide-in-left 500ms ease-in-out;
+  --animate-content-slide-in-right: content-slide-in-right 500ms ease-in-out;
+  --animate-content-slide-in-top: content-slide-in-top 500ms ease-in-out;
+  --animate-content-slide-in-bottom: content-slide-in-bottom 500ms ease-in-out;
+  --animate-content-slide-out-left: content-slide-out-left 500ms ease-in-out;
+  --animate-content-slide-out-right: content-slide-out-right 500ms ease-in-out;
+  --animate-content-slide-out-top: content-slide-out-top 500ms ease-in-out;
+  --animate-content-slide-out-bottom: content-slide-out-bottom 500ms ease-in-out;
   --animate-caret-blink: caret-blink 1.25s ease-out infinite;
   @keyframes pulse-wiggle {
     0%,
@@ -1066,6 +1074,70 @@ E.g: public:p-20 will apply padding 20px when data-ui-theme="public in html root
       transform: scale(0.7);
     }
   }
+  @keyframes content-slide-in-left {
+    from {
+      translate: -200% 0%;
+    }
+    to {
+      translate: 0% 0%;
+    }
+  }
+  @keyframes content-slide-in-right {
+    from {
+      translate: 200% 0%;
+    }
+    to {
+      translate: 0% 0%;
+    }
+  }
+  @keyframes content-slide-in-top {
+    from {
+      translate: 0% -200%;
+    }
+    to {
+      translate: 0% 0%;
+    }
+  }
+  @keyframes content-slide-in-bottom {
+    from {
+      translate: 0% 200%;
+    }
+    to {
+      translate: 0% 0%;
+    }
+  }
+  @keyframes content-slide-out-left {
+    from {
+      translate: 0% 0%;
+    }
+    to {
+      translate: -200% 0%;
+    }
+  }
+  @keyframes content-slide-out-right {
+    from {
+      translate: 0% 0%;
+    }
+    to {
+      translate: 200% 0%;
+    }
+  }
+  @keyframes content-slide-out-top {
+    from {
+      translate: 0% 0%;
+    }
+    to {
+      translate: 0% -200%;
+    }
+  }
+  @keyframes content-slide-out-bottom {
+    from {
+      translate: 0% 0%;
+    }
+    to {
+      translate: 0% 200%;
+    }
+  }
   @keyframes caret-blink {
     0% {
       opacity: 1;

package/dist/index.d.ts

@@ -5791,6 +5791,9 @@ export declare const MilitaryTechIcon: ({ variant, ...props }: VariableIconProps
 export declare const ModalBody: ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
 export declare interface ModalBodyProps extends ComponentPropsWithRef<typeof DialogContent> {
+    layout?: "dialog" | "sidebar";
+    direction?: "left" | "right" | "top" | "bottom" | "center";
+    placement?: "left" | "right" | "top" | "bottom" | "center";
 }
 
 export declare const ModalClose: ForwardRefExoticComponent<Omit<ModalCloseProps, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dist/mainstack-design-system530.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("./index-HSoR75mY.cjs"),a=require("react"),l=require("./utils-sX9NhwD-.cjs"),i=require("./index-DvzX668K.cjs"),s=a.forwardRef(({children:m,className:t,...o},n)=>d.jsx("div",{className:"mds:fixed mds:w-full mds:h-full mds:flex mds:justify-center mds:top-0 mds:left-0 mds:items-end mds:z-100 mds:md:items-center ",children:d.jsxs(e.DialogContent,{ref:n,"data-slot":"modal-body",className:l.cn("mds:group/Modal-body mds:flex-1 mds:flex mds:will-change-transform mds:max-h-[90dvh] mds:max-w-980 mds:shadow-600 mds:rounded-t-20 mds:overflow-hidden  mds:bg-surface-neutral-l1 mds:animate-content-scale-out mds:data-[state=open]:animate-content-scale-in mds:md:rounded-20 mds:md:mx-20 ",t),...o,children:[m,d.jsx(i.VisuallyHidden,{children:d.jsx(e.DialogDescription,{})})]})}));s.displayName="ModalBody";exports.ModalBody=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("./index-HSoR75mY.cjs"),r=require("react"),c=require("./utils-sX9NhwD-.cjs"),u=require("./index-DvzX668K.cjs"),a=r.forwardRef(({children:d,className:s,layout:n="dialog",direction:m="center",placement:i="center",...o},l)=>t.jsx("div",{className:"mds:fixed mds:w-full mds:h-full mds:flex mds:justify-center mds:top-0 mds:left-0 mds:items-end mds:z-100 mds:sm:items-center mds:has-data-[placement=left]:sm:justify-start mds:has-data-[placement=right]:sm:justify-end mds:has-data-[placement=top]:sm:items-start mds:has-data-[placement=bottom]:sm:items-end ",children:t.jsxs(e.DialogContent,{ref:l,"data-slot":"modal-body","data-layout":n,"data-direction":m,"data-placement":i,className:c.cn("mds:group/Modal-body mds:flex-1 mds:flex mds:will-change-transform mds:max-h-[90dvh] mds:max-w-980 mds:shadow-600 mds:rounded-t-20 mds:overflow-hidden mds:bg-surface-neutral-l1 mds:sm:rounded-20 mds:sm:m-20 mds:data-[layout=sidebar]:max-w-456 mds:data-[layout=sidebar]:sm:min-h-[95dvh] ","mds:animate-content-slide-out-bottom mds:data-[state=open]:animate-content-slide-in-bottom mds:data-[direction=center]:sm:animate-content-scale-out mds:data-[direction=left]:sm:animate-content-slide-out-left mds:data-[direction=right]:sm:animate-content-slide-out-right mds:data-[direction=top]:sm:animate-content-slide-out-top mds:data-[direction=bottom]:sm:animate-content-slide-out-bottom mds:data-[direction=center]:data-[state=open]:sm:animate-content-scale-in mds:data-[direction=left]:data-[state=open]:sm:animate-content-slide-in-left mds:data-[direction=right]:data-[state=open]:sm:animate-content-slide-in-right mds:data-[direction=top]:data-[state=open]:sm:animate-content-slide-in-top mds:data-[direction=bottom]:data-[state=open]:sm:animate-content-slide-in-bottom",s),...o,children:[d,t.jsx(u.VisuallyHidden,{children:t.jsx(e.DialogDescription,{})})]})}));a.displayName="ModalBody";exports.ModalBody=a;

package/dist/mainstack-design-system530.js

@@ -1,28 +1,39 @@
 'use client';
-import { jsx as d, jsxs as a } from "react/jsx-runtime";
-import { D as t, a as l } from "./index-DDHQjaCF.js";
-import { forwardRef as r } from "react";
-import { c as n } from "./utils-BuJ7DVbu.js";
-import { V as i } from "./index-DJT9m8v7.js";
-const f = r(
-  ({ children: m, className: s, ...e }, o) => /* @__PURE__ */ d("div", { className: "mds:fixed mds:w-full mds:h-full mds:flex mds:justify-center mds:top-0 mds:left-0 mds:items-end mds:z-100 mds:md:items-center ", children: /* @__PURE__ */ a(
-    t,
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { D as l, a as r } from "./index-DDHQjaCF.js";
+import { forwardRef as c } from "react";
+import { c as p } from "./utils-BuJ7DVbu.js";
+import { V as f } from "./index-DJT9m8v7.js";
+const u = c(
+  ({
+    children: a,
+    className: d,
+    layout: e = "dialog",
+    direction: s = "center",
+    placement: m = "center",
+    ...o
+  }, n) => /* @__PURE__ */ t("div", { className: "mds:fixed mds:w-full mds:h-full mds:flex mds:justify-center mds:top-0 mds:left-0 mds:items-end mds:z-100 mds:sm:items-center mds:has-data-[placement=left]:sm:justify-start mds:has-data-[placement=right]:sm:justify-end mds:has-data-[placement=top]:sm:items-start mds:has-data-[placement=bottom]:sm:items-end ", children: /* @__PURE__ */ i(
+    l,
     {
-      ref: o,
+      ref: n,
       "data-slot": "modal-body",
-      className: n(
-        "mds:group/Modal-body mds:flex-1 mds:flex mds:will-change-transform mds:max-h-[90dvh] mds:max-w-980 mds:shadow-600 mds:rounded-t-20 mds:overflow-hidden  mds:bg-surface-neutral-l1 mds:animate-content-scale-out mds:data-[state=open]:animate-content-scale-in mds:md:rounded-20 mds:md:mx-20 ",
-        s
+      "data-layout": e,
+      "data-direction": s,
+      "data-placement": m,
+      className: p(
+        "mds:group/Modal-body mds:flex-1 mds:flex mds:will-change-transform mds:max-h-[90dvh] mds:max-w-980 mds:shadow-600 mds:rounded-t-20 mds:overflow-hidden mds:bg-surface-neutral-l1 mds:sm:rounded-20 mds:sm:m-20 mds:data-[layout=sidebar]:max-w-456 mds:data-[layout=sidebar]:sm:min-h-[95dvh] ",
+        "mds:animate-content-slide-out-bottom mds:data-[state=open]:animate-content-slide-in-bottom mds:data-[direction=center]:sm:animate-content-scale-out mds:data-[direction=left]:sm:animate-content-slide-out-left mds:data-[direction=right]:sm:animate-content-slide-out-right mds:data-[direction=top]:sm:animate-content-slide-out-top mds:data-[direction=bottom]:sm:animate-content-slide-out-bottom mds:data-[direction=center]:data-[state=open]:sm:animate-content-scale-in mds:data-[direction=left]:data-[state=open]:sm:animate-content-slide-in-left mds:data-[direction=right]:data-[state=open]:sm:animate-content-slide-in-right mds:data-[direction=top]:data-[state=open]:sm:animate-content-slide-in-top mds:data-[direction=bottom]:data-[state=open]:sm:animate-content-slide-in-bottom",
+        d
       ),
-      ...e,
+      ...o,
       children: [
-        m,
-        /* @__PURE__ */ d(i, { children: /* @__PURE__ */ d(l, {}) })
+        a,
+        /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(r, {}) })
       ]
     }
   ) })
 );
-f.displayName = "ModalBody";
+u.displayName = "ModalBody";
 export {
-  f as ModalBody
+  u as ModalBody
 };

package/dist/mainstack-design-system575.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),g=require("./index-C8aODXfJ.cjs"),E=require("./index-4R9KShCu.cjs"),o=require("react"),I=require("./mainstack-design-system588.cjs"),m=require("./mainstack-design-system602.cjs"),x=o.forwardRef(({isDisabled:y,isError:C,isMultiSelect:c=!1,isSuccess:b,children:v,value:d,defaultValue:n,inputReadOnly:h,isCreatableSelect:j,options:l=[],isOptionOpen:q,onOptionOpenChange:P,onValueChange:p,onOptionSelect:R},t)=>{const u=o.useRef(null),[r,A]=o.useState(m.parseSelectOptions(l)),[s,_]=g.useControllableState({prop:d,defaultProp:m.mapDefaultValuesToSelectedOption({isMultiSelect:c,defaultValue:n,options:l}),onChange:p}),[T,a]=o.useState(()=>typeof n=="string"&&r.map.get(n)?.label||""),[S,O]=g.useControllableState({prop:q,defaultProp:!1,onChange:P}),[D,f]=o.useState("idle");return i.jsx(I.SelectContext.Provider,{value:{defaultValue:n,options:r,selectedOption:s,isOptionOpen:S,isDisabled:y,isError:C,isMultiSelect:c,isSuccess:b,inputValue:T,inputReadOnly:h,previousAction:D,isCreatableSelect:j,rootElementRef:u,setOptions:A,setPreviousAction:f,setInputValue:a,setSelectedOption:_,onOptionOpenChange:O,onValueChange:p,onOptionSelect:R},children:i.jsx(E.Popover,{open:S,onOpenChange:e=>{O(e),s&&!Array.isArray(s)&&!e&&(a(r.map.get(s)?.label||""),f("selection"))},children:i.jsx("div",{ref:e=>{u.current=e,typeof t=="function"?t(e):typeof t=="object"&&t?.current&&(t.current=e)},"data-slot":"select-root",children:v})})})});x.displayName="SelectRoot";exports.SelectRoot=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),m=require("./index-C8aODXfJ.cjs"),E=require("./index-4R9KShCu.cjs"),o=require("react"),I=require("./mainstack-design-system588.cjs"),y=require("./mainstack-design-system602.cjs"),b=o.forwardRef(({isDisabled:x,isError:C,isMultiSelect:c=!1,isSuccess:d,children:h,value:i,defaultValue:n,inputReadOnly:j,isCreatableSelect:q,options:l=[],isOptionOpen:P,onOptionOpenChange:v,onValueChange:u,onOptionSelect:R},t)=>{const a=o.useRef(null),[s,A]=o.useState(y.parseSelectOptions(l)),[r,_]=m.useControllableState({prop:i,defaultProp:y.mapDefaultValuesToSelectedOption({isMultiSelect:c,defaultValue:n,options:l}),onChange:u}),[T,S]=o.useState(()=>typeof i=="string"?s.map.get(i)?.label||"":typeof n=="string"&&s.map.get(n)?.label||""),[O,f]=m.useControllableState({prop:P,defaultProp:!1,onChange:v}),[D,g]=o.useState("idle");return p.jsx(I.SelectContext.Provider,{value:{defaultValue:n,options:s,selectedOption:r,isOptionOpen:O,isDisabled:x,isError:C,isMultiSelect:c,isSuccess:d,inputValue:T,inputReadOnly:j,previousAction:D,isCreatableSelect:q,rootElementRef:a,setOptions:A,setPreviousAction:g,setInputValue:S,setSelectedOption:_,onOptionOpenChange:f,onValueChange:u,onOptionSelect:R},children:p.jsx(E.Popover,{open:O,onOpenChange:e=>{f(e),r&&!Array.isArray(r)&&!e&&(S(s.map.get(r)?.label||""),g("selection"))},children:p.jsx("div",{ref:e=>{a.current=e,typeof t=="function"?t(e):typeof t=="object"&&t?.current&&(t.current=e)},"data-slot":"select-root",children:h})})})});b.displayName="SelectRoot";exports.SelectRoot=b;

package/dist/mainstack-design-system575.js

@@ -1,82 +1,82 @@
 'use client';
-import { jsx as r } from "react/jsx-runtime";
-import { u as g } from "./index-437EL2iq.js";
+import { jsx as i } from "react/jsx-runtime";
+import { u as y } from "./index-437EL2iq.js";
 import { P as I } from "./index-RoCFhqzC.js";
-import { forwardRef as N, useRef as T, useState as i } from "react";
+import { forwardRef as N, useRef as T, useState as s } from "react";
 import { SelectContext as k } from "./mainstack-design-system588.js";
 import { parseSelectOptions as q, mapDefaultValuesToSelectedOption as z } from "./mainstack-design-system602.js";
 const B = N(
   ({
     isDisabled: S,
     isError: h,
-    isMultiSelect: s = !1,
-    isSuccess: v,
-    children: y,
-    value: C,
+    isMultiSelect: l = !1,
+    isSuccess: C,
+    children: P,
+    value: r,
     defaultValue: e,
-    inputReadOnly: P,
-    isCreatableSelect: b,
-    options: l = [],
+    inputReadOnly: b,
+    isCreatableSelect: v,
+    options: c = [],
     isOptionOpen: A,
     onOptionOpenChange: x,
-    onValueChange: c,
+    onValueChange: a,
     onOptionSelect: d
-  }, t) => {
-    const a = T(null), [p, j] = i(
-      q(l)
-    ), [n, R] = g({
-      prop: C,
+  }, o) => {
+    const m = T(null), [n, j] = s(
+      q(c)
+    ), [p, R] = y({
+      prop: r,
       defaultProp: z({
-        isMultiSelect: s,
+        isMultiSelect: l,
         defaultValue: e,
-        options: l
+        options: c
       }),
-      onChange: c
-    }), [D, m] = i(() => typeof e == "string" && p.map.get(e)?.label || ""), [u, f] = g({
+      onChange: a
+    }), [D, f] = s(() => typeof r == "string" ? n.map.get(r)?.label || "" : typeof e == "string" && n.map.get(e)?.label || ""), [u, O] = y({
       prop: A,
       defaultProp: !1,
       onChange: x
-    }), [E, O] = i("idle");
-    return /* @__PURE__ */ r(
+    }), [E, g] = s("idle");
+    return /* @__PURE__ */ i(
       k.Provider,
       {
         value: {
           defaultValue: e,
-          options: p,
-          selectedOption: n,
+          options: n,
+          selectedOption: p,
           isOptionOpen: u,
           isDisabled: S,
           isError: h,
-          isMultiSelect: s,
-          isSuccess: v,
+          isMultiSelect: l,
+          isSuccess: C,
           inputValue: D,
-          inputReadOnly: P,
+          inputReadOnly: b,
           previousAction: E,
-          isCreatableSelect: b,
-          rootElementRef: a,
+          isCreatableSelect: v,
+          rootElementRef: m,
           setOptions: j,
-          setPreviousAction: O,
-          setInputValue: m,
+          setPreviousAction: g,
+          setInputValue: f,
           setSelectedOption: R,
-          onOptionOpenChange: f,
-          onValueChange: c,
+          onOptionOpenChange: O,
+          onValueChange: a,
           onOptionSelect: d
         },
-        children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ i(
           I,
           {
             open: u,
-            onOpenChange: (o) => {
-              f(o), n && !Array.isArray(n) && !o && (m(p.map.get(n)?.label || ""), O("selection"));
+            onOpenChange: (t) => {
+              O(t), p && !Array.isArray(p) && !t && (f(n.map.get(p)?.label || ""), g("selection"));
             },
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ i(
               "div",
               {
-                ref: (o) => {
-                  a.current = o, typeof t == "function" ? t(o) : typeof t == "object" && t?.current && (t.current = o);
+                ref: (t) => {
+                  m.current = t, typeof o == "function" ? o(t) : typeof o == "object" && o?.current && (o.current = t);
                 },
                 "data-slot": "select-root",
-                children: y
+                children: P
               }
             )
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mainstack-design-system",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "type": "module",
   "main": "./dist/mainstack-design-system.cjs",
   "module": "./dist/mainstack-design-system.js",