@mriqbox/ui-kit 4.0.1 → 4.2.0

package/bin/cli.js

@@ -182,7 +182,7 @@ async function checkDependencies(filePath, installDir) {
 program
     .name('mri-ui')
     .description('Add Mri UI components to your project')
-    .version('4.0.1');
+    .version('4.2.0');
 
 program
     .command('add <component>')

package/dist/components/molecules/MriActionModal.d.ts

@@ -12,6 +12,8 @@ export interface MriActionModalProps {
     cancelLabel?: string;
     isConfirmDisabled?: boolean;
     maxWidth?: string;
+    hideBlur?: boolean;
+    hideOverlay?: boolean;
     children: React.ReactNode;
 }
-export declare const MriActionModal: ({ title, icon: Icon, variant, onClose, onConfirm, confirmLabel, cancelLabel, isConfirmDisabled, maxWidth, children, }: MriActionModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MriActionModal: ({ title, icon: Icon, variant, onClose, onConfirm, confirmLabel, cancelLabel, isConfirmDisabled, maxWidth, hideBlur, hideOverlay, children, }: MriActionModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/MriActionModal.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: ({ title, icon: Icon, variant, onClose, onConfirm, confirmLabel, cancelLabel, isConfirmDisabled, maxWidth, children, }: import('./MriActionModal').MriActionModalProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, icon: Icon, variant, onClose, onConfirm, confirmLabel, cancelLabel, isConfirmDisabled, maxWidth, hideBlur, hideOverlay, children, }: import('./MriActionModal').MriActionModalProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default _default;

package/dist/components/templates/MriTabletFrame.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+
+export type MriTabletFrameSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+export interface MriTabletFrameProps {
+    /** Conteudo do tablet — geralmente um <MriDashboardLayout> ou panel custom. */
+    children: ReactNode;
+    /**
+     * Toggle de visibilidade. `false` usa display:none ao inves de unmount —
+     * preserva state interno (eg. video streamers, redux store) entre toggles.
+     */
+    visible?: boolean;
+    /**
+     * Zoom user-controlled (0-200, default 100). Aplicado via CSS transform
+     * scale a partir do centro — nao afeta layout interno.
+     */
+    scale?: number;
+    /**
+     * Preset de tamanho. Cada um combina porcentagem (responsivo) com max
+     * absoluto (clamp em telas grandes / 4K) e min absoluto (anti-colapso).
+     *
+     * - sm: ~80% até 1100x700, min 900x550
+     * - md: ~85% até 1400x900, min 1000x600 (default)
+     * - lg: ~90% até 1700x1080, min 1100x700
+     * - fullscreen: 100% sem border/radius (debug ou caso edge)
+     */
+    size?: MriTabletFrameSize;
+    /** Classes extras pro frame externo (sobrepoe sizing/border se necessario). */
+    className?: string;
+}
+/**
+ * Frame de tablet centralizado pra UIs FiveM. O body do consumer precisa de
+ * `background: transparent` pra deixar o jogo aparecer ao redor — nao da
+ * pra forcar isso de dentro do componente.
+ *
+ * Composivel com qualquer conteudo, mas o caso primario e envolver um
+ * <MriDashboardLayout>:
+ *
+ * ```tsx
+ * <MriTabletFrame size="md" visible={uiOpen} scale={userZoom}>
+ *   <MriDashboardLayout sidebar={...} header={...}>
+ *     {children}
+ *   </MriDashboardLayout>
+ * </MriTabletFrame>
+ * ```
+ */
+export declare function MriTabletFrame({ children, visible, scale, size, className, }: MriTabletFrameProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/templates/MriTabletFrame.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriTabletFrame } from './MriTabletFrame';
+
+declare const meta: Meta<typeof MriTabletFrame>;
+export default meta;
+export declare const Default: StoryObj<typeof MriTabletFrame>;
+export declare const Small: StoryObj<typeof MriTabletFrame>;
+export declare const Large: StoryObj<typeof MriTabletFrame>;
+export declare const Fullscreen: StoryObj<typeof MriTabletFrame>;
+export declare const WithUserScale: StoryObj<typeof MriTabletFrame>;
+export declare const Toggle: StoryObj<typeof MriTabletFrame>;

package/dist/index.d.ts

@@ -39,4 +39,5 @@ export * from './components/organisms/MriTopbar';
 export * from './components/organisms/MriKeyboardVisualizer';
 export * from './components/organisms/MriPlayerScreenStream';
 export * from './components/templates/MriDashboardLayout';
+export * from './components/templates/MriTabletFrame';
 export * from './lib/utils';

package/dist/index.es.js

@@ -3802,39 +3802,39 @@ const Eu = ne("Zap", [
   }
 );
 te.displayName = "MriButton";
-const ex = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+const tx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("path", { d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("circle", { cx: "12", cy: "9", r: "2.5", fill: "currentColor" })
-] }), tx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), rx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("path", { d: "M21 15v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("path", { d: "M7 10l5-5 5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("path", { d: "M12 5v12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-] }), rx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), nx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("path", { d: "M21 12H7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("path", { d: "M11 16l-4-4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-] }), nx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), ox = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("path", { d: "M21 12a9 9 0 11-3-6.6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("path", { d: "M12 8v8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("path", { d: "M8 12h8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-] }), ox = (e = {}) => /* @__PURE__ */ l.jsx("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ l.jsx("path", { d: "M20 6L9 17l-5-5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }), ax = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), ax = (e = {}) => /* @__PURE__ */ l.jsx("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ l.jsx("path", { d: "M20 6L9 17l-5-5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }), sx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ l.jsx("path", { d: "M12 11v6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("circle", { cx: "12", cy: "10", r: "1.5", fill: "currentColor" })
-] }), sx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), ix = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("path", { d: "M16 3l3 3v11a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6l3-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("path", { d: "M9 8h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-] }), ix = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), lx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("path", { d: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "1.5" })
-] }), lx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), cx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("path", { d: "M12 9v4", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("circle", { cx: "12", cy: "17", r: "0.8", fill: "currentColor" })
-] }), cx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), dx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ l.jsx("circle", { cx: "12", cy: "7", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ l.jsx("path", { d: "M15 10l-6-6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-] }), dx = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), ux = (e = {}) => /* @__PURE__ */ l.jsxs("svg", { className: e.className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ l.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ l.jsx("path", { d: "M4.93 4.93l14.14 14.14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
 ] }), Oo = m.forwardRef(
@@ -4621,7 +4621,7 @@ const _i = m.forwardRef(({ className: e, orientation: t = "vertical", ...r }, n)
   }
 ));
 _i.displayName = Ao.displayName;
-function ux({
+function fx({
   label: e,
   variant: t = "default",
   className: r,
@@ -5067,7 +5067,7 @@ function Hi(e) {
   return e ? "open" : "closed";
 }
 var kf = Di, _f = Ii, Mf = Fi, Yi = $i, Vi = zi;
-const fx = kf, Ef = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ l.jsx(
+const hx = kf, Ef = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ l.jsx(
   _f,
   {
     ref: r,
@@ -7945,7 +7945,7 @@ Dp.displayName = Jl;
 function aa(e) {
   return e ? "open" : "closed";
 }
-var ec = "DialogTitleWarning", [hx, tc] = $u(ec, {
+var ec = "DialogTitleWarning", [mx, tc] = $u(ec, {
   contentName: St,
   titleName: oa,
   docsSlug: "dialog"
@@ -8349,7 +8349,7 @@ const tv = ({
   }
 );
 tv.displayName = "MriCommandShortcut";
-function mx({
+function px({
   options: e,
   value: t,
   onChange: r,
@@ -8478,7 +8478,7 @@ function ia({
     )
   ] }) });
 }
-function px({ title: e, children: t, onClose: r, className: n }) {
+function vx({ title: e, children: t, onClose: r, className: n }) {
   return /* @__PURE__ */ l.jsxs(ia, { onClose: r, className: n, children: [
     /* @__PURE__ */ l.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
       /* @__PURE__ */ l.jsx("h3", { className: "text-xl font-bold tracking-tight text-foreground", children: e }),
@@ -8709,7 +8709,7 @@ function nv({
     ] }) })
   ] });
 }
-function vx(e) {
+function gx(e) {
   return e.multiple === !0 ? /* @__PURE__ */ l.jsx(nv, { ...e }) : /* @__PURE__ */ l.jsx(rv, { ...e });
 }
 var ov = (e, t, r, n, o, a, s, i) => {
@@ -8741,7 +8741,7 @@ m.memo(({ forcedTheme: e, storageKey: t, attribute: r, enableSystem: n, enableCo
   let u = JSON.stringify([r, t, a, e, i, s, n, o]).slice(1, -1);
   return m.createElement("script", { ...d, suppressHydrationWarning: !0, nonce: typeof window > "u" ? c : "", dangerouslySetInnerHTML: { __html: `(${ov.toString()})(${u})` } });
 });
-const gx = ({ themeLabel: e = "Tema", themeIconLabel: t = "Alterar tema", lightLabel: r = "Claro", darkLabel: n = "Escuro", systemLabel: o = "Sistema" }) => {
+const bx = ({ themeLabel: e = "Tema", themeIconLabel: t = "Alterar tema", lightLabel: r = "Claro", darkLabel: n = "Escuro", systemLabel: o = "Sistema" }) => {
   const { theme: a, setTheme: s } = iv(), [i, c] = fe(!1), d = Le(null);
   we(() => {
     const f = (h) => {
@@ -8798,7 +8798,7 @@ const gx = ({ themeLabel: e = "Tema", themeIconLabel: t = "Alterar tema", lightL
   const [r, n] = t, o = Number(r), a = Number(n);
   return !Number.isFinite(o) || !Number.isFinite(a) || o < 0 || o > 23 || a < 0 || a > 59 ? [0, 0] : [o, a];
 };
-function bx({ value: e, onChange: t, disabled: r, hourLabel: n = "Hora", minuteLabel: o = "Minuto", size: a = "default", error: s, minTime: i, maxTime: c }) {
+function xx({ value: e, onChange: t, disabled: r, hourLabel: n = "Hora", minuteLabel: o = "Minuto", size: a = "default", error: s, minTime: i, maxTime: c }) {
   const [d, u] = m.useState(!1), [f, h] = Gn(e), [p, g] = Gn(i), [v, b] = c ? Gn(c) : [23, 59], x = lv.map((C) => ({
     value: C,
     disabled: C < p || C > v
@@ -8872,7 +8872,7 @@ function bx({ value: e, onChange: t, disabled: r, hourLabel: n = "Hora", minuteL
     ] }) })
   ] });
 }
-function xx({
+function yx({
   text: e,
   className: t,
   iconSize: r = 4,
@@ -8893,7 +8893,7 @@ function xx({
     }
   );
 }
-function yx({
+function wx({
   label: e,
   amount: t,
   amountColorClass: r = "text-foreground",
@@ -8947,7 +8947,7 @@ function yx({
     ] })
   ] });
 }
-const wx = ({
+const Nx = ({
   id: e = "",
   label: t,
   icon: r = Eu,
@@ -9124,7 +9124,7 @@ const wx = ({
       ]
     }
   );
-}, Nx = ({
+}, Cx = ({
   title: e,
   icon: t,
   variant: r = "default",
@@ -9134,48 +9134,59 @@ const wx = ({
   cancelLabel: s = "Cancel",
   isConfirmDisabled: i = !1,
   maxWidth: c = "max-w-sm",
-  children: d
+  hideBlur: d = !1,
+  hideOverlay: u = !1,
+  children: f
 }) => {
-  const u = {
+  const h = {
     default: "bg-primary/10 text-primary",
     destructive: "bg-destructive/10 text-destructive",
     warning: "bg-yellow-500/10 text-yellow-500"
-  }, f = r === "destructive" ? "destructive" : "default";
-  return /* @__PURE__ */ l.jsxs(ia, { onClose: n, className: k("w-full", c), children: [
-    /* @__PURE__ */ l.jsxs("div", { className: "flex justify-between items-center mb-6", children: [
-      /* @__PURE__ */ l.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ l.jsx("div", { className: k("p-2 rounded-lg", u[r]), children: /* @__PURE__ */ l.jsx(t, { className: "w-5 h-5" }) }),
-        /* @__PURE__ */ l.jsx("p", { className: "font-bold text-lg text-foreground", children: e })
-      ] }),
-      /* @__PURE__ */ l.jsx(
-        "button",
-        {
-          onClick: n,
-          className: "text-muted-foreground hover:text-foreground transition-colors",
-          children: /* @__PURE__ */ l.jsx(dn, { className: "w-5 h-5" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l.jsx("div", { className: "space-y-4", children: d }),
-    /* @__PURE__ */ l.jsxs("div", { className: "mt-6 flex gap-3", children: [
-      /* @__PURE__ */ l.jsx(te, { onClick: n, variant: "ghost", className: "flex-1", children: s }),
-      o && /* @__PURE__ */ l.jsx(
-        te,
-        {
-          className: k(
-            "flex-1",
-            r === "destructive" && "bg-destructive hover:bg-destructive/90 text-destructive-foreground"
-          ),
-          onClick: o,
-          disabled: i,
-          variant: f,
-          children: a
-        }
-      )
-    ] })
-  ] });
+  }, p = r === "destructive" ? "destructive" : "default";
+  return /* @__PURE__ */ l.jsxs(
+    ia,
+    {
+      onClose: n,
+      className: k("w-full", c),
+      hideBlur: d,
+      hideOverlay: u,
+      children: [
+        /* @__PURE__ */ l.jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+          /* @__PURE__ */ l.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ l.jsx("div", { className: k("p-2 rounded-lg", h[r]), children: /* @__PURE__ */ l.jsx(t, { className: "w-5 h-5" }) }),
+            /* @__PURE__ */ l.jsx("p", { className: "font-bold text-lg text-foreground", children: e })
+          ] }),
+          /* @__PURE__ */ l.jsx(
+            "button",
+            {
+              onClick: n,
+              className: "text-muted-foreground hover:text-foreground transition-colors",
+              children: /* @__PURE__ */ l.jsx(dn, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l.jsx("div", { className: "space-y-4", children: f }),
+        /* @__PURE__ */ l.jsxs("div", { className: "mt-6 flex gap-3", children: [
+          /* @__PURE__ */ l.jsx(te, { onClick: n, variant: "ghost", className: "flex-1", children: s }),
+          o && /* @__PURE__ */ l.jsx(
+            te,
+            {
+              className: k(
+                "flex-1",
+                r === "destructive" && "bg-destructive hover:bg-destructive/90 text-destructive-foreground"
+              ),
+              onClick: o,
+              disabled: i,
+              variant: p,
+              children: a
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
-function Cx({
+function jx({
   icon: e,
   label: t,
   onClick: r,
@@ -9204,7 +9215,7 @@ function Cx({
     }
   );
 }
-function jx({
+function Sx({
   value: e,
   onChange: t,
   placeholder: r,
@@ -9228,7 +9239,7 @@ function jx({
     )
   ] });
 }
-function Sx({ icon: e, title: t, className: r }) {
+function kx({ icon: e, title: t, className: r }) {
   return /* @__PURE__ */ l.jsxs("h3", { className: k("text-muted-foreground text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2", r), children: [
     /* @__PURE__ */ l.jsx(e, { className: "w-3.5 h-3.5" }),
     " ",
@@ -12087,7 +12098,7 @@ function Oc({
   );
 }
 Oc.displayName = "MriCalendar";
-function kx({ value: e, onChange: t, placeholder: r = "Selecione", disabled: n, locale: o = wc, size: a = "default", error: s, fromDate: i, toDate: c }) {
+function _x({ value: e, onChange: t, placeholder: r = "Selecione", disabled: n, locale: o = wc, size: a = "default", error: s, fromDate: i, toDate: c }) {
   return /* @__PURE__ */ l.jsxs(Jt, { children: [
     /* @__PURE__ */ l.jsx(er, { asChild: !0, children: /* @__PURE__ */ l.jsxs("div", { className: "w-full space-y-1", children: [
       /* @__PURE__ */ l.jsxs(
@@ -12441,7 +12452,7 @@ function G0(e, t) {
   }, "name"]);
 }
 q0([G0]);
-const _x = ({ color: e, onChange: t, active: r, format: n = "hsl-string" }) => {
+const Mx = ({ color: e, onChange: t, active: r, format: n = "hsl-string" }) => {
   const o = (g) => /^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/.test(g) ? be(`hsl(${g})`).toHex() : be(g).toHex(), [a, s] = fe(o(e)), [i, c] = fe("hex"), d = be(a), [u, f] = fe({
     hex: a,
     rgb: d.toRgb(),
@@ -12611,7 +12622,7 @@ const _x = ({ color: e, onChange: t, active: r, format: n = "hsl-string" }) => {
   /* @__PURE__ */ l.jsx(Su, { className: "w-6 h-6 text-red-500/80" }),
   /* @__PURE__ */ l.jsx("span", { className: "text-[10px] font-black uppercase tracking-widest text-red-500/80", children: e })
 ] });
-function Mx({ vitals: e, size: t = "compact", onAction: r, onIconClick: n, className: o, labels: a, disabledVitals: s = [] }) {
+function Ex({ vitals: e, size: t = "compact", onAction: r, onIconClick: n, className: o, labels: a, disabledVitals: s = [] }) {
   var f;
   const i = ((f = e == null ? void 0 : e.metadata) == null ? void 0 : f.isdead) ?? !1, c = (a == null ? void 0 : a.dead) ?? "Dead", d = (h) => {
     var g;
@@ -12728,7 +12739,7 @@ const X0 = {
   thirst: { icon: ci, color: "text-cyan-500", bgColor: "bg-cyan-500", hex: "#06b6d4", label: "thirst", max: 100 },
   stress: { icon: ii, color: "text-purple-500", bgColor: "bg-purple-500", hex: "#a855f7", label: "stress", max: 100 }
 };
-function Ex({
+function Px({
   isOpen: e,
   onClose: t,
   onSubmit: r,
@@ -12877,7 +12888,7 @@ function Ex({
             ` })
   ] });
 }
-function Px({ title: e, icon: t, count: r, countLabel: n, children: o, className: a, ...s }) {
+function Rx({ title: e, icon: t, count: r, countLabel: n, children: o, className: a, ...s }) {
   return /* @__PURE__ */ l.jsxs("div", { className: k("w-full h-auto min-h-[5rem] border-b border-border flex items-center justify-between py-4 px-6 bg-card/30 shrink-0", a), ...s, children: [
     /* @__PURE__ */ l.jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ l.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -12893,7 +12904,7 @@ function Px({ title: e, icon: t, count: r, countLabel: n, children: o, className
     /* @__PURE__ */ l.jsx("div", { className: "flex items-center gap-3", children: o })
   ] });
 }
-function Rx({
+function Ox({
   items: e,
   activeRoute: t,
   onNavigate: r,
@@ -12949,7 +12960,7 @@ function Rx({
     ] })
   ] });
 }
-function Ox({
+function Dx({
   items: e,
   activeRoute: t,
   onNavigate: r,
@@ -13144,7 +13155,7 @@ const Nt = ({ label: e, className: t, style: r, active: n }) => /* @__PURE__ */
 }, Q0 = {
   iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
 };
-function Dx({
+function Ax({
   playerId: e,
   // playerName is not used in this component but kept for API consistency if needed
   className: t,
@@ -13372,7 +13383,7 @@ function Dx({
     /* @__PURE__ */ l.jsx("div", { className: "absolute inset-0 pointer-events-none shadow-[inset_0_0_100px_rgba(0,0,0,0.5)] opacity-40" })
   ] });
 }
-function Ax({
+function Tx({
   sidebar: e,
   topbar: t,
   header: r,
@@ -13399,19 +13410,52 @@ function Ax({
     h
   ] });
 }
+const Z0 = {
+  sm: "w-[80%] h-[80%] max-w-[1100px] max-h-[700px] min-w-[900px] min-h-[550px]",
+  md: "w-[85%] h-[85%] max-w-[1400px] max-h-[900px] min-w-[1000px] min-h-[600px]",
+  lg: "w-[90%] h-[90%] max-w-[1700px] max-h-[1080px] min-w-[1100px] min-h-[700px]",
+  fullscreen: "w-full h-full"
+};
+function Lx({
+  children: e,
+  visible: t = !0,
+  scale: r = 100,
+  size: n = "md",
+  className: o
+}) {
+  const a = n === "fullscreen";
+  return /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: k(
+        "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+        "bg-background text-foreground overflow-hidden",
+        !a && "border border-border rounded-xl shadow-2xl",
+        Z0[n],
+        o
+      ),
+      style: {
+        display: t ? "block" : "none",
+        transform: `translate(-50%, -50%) scale(${r / 100})`,
+        transformOrigin: "center center"
+      },
+      children: e
+    }
+  );
+}
 export {
-  fx as MriAccordion,
+  hx as MriAccordion,
   Rf as MriAccordionContent,
   Ef as MriAccordionItem,
   Pf as MriAccordionTrigger,
-  wx as MriActionCard,
-  Nx as MriActionModal,
+  Nx as MriActionCard,
+  Cx as MriActionModal,
   cu as MriAvatar,
   uu as MriAvatarFallback,
   du as MriAvatarImage,
   Ya as MriBadge,
-  dx as MriBanIcon,
-  tx as MriBringIcon,
+  ux as MriBanIcon,
+  rx as MriBringIcon,
   te as MriButton,
   Oc as MriCalendar,
   Of as MriCard,
@@ -13420,8 +13464,8 @@ export {
   If as MriCardFooter,
   Df as MriCardHeader,
   Af as MriCardTitle,
-  sx as MriClothingIcon,
-  _x as MriColorPicker,
+  ix as MriClothingIcon,
+  Mx as MriColorPicker,
   Cr as MriCommand,
   Sr as MriCommandEmpty,
   kr as MriCommandGroup,
@@ -13430,42 +13474,43 @@ export {
   jn as MriCommandList,
   ev as MriCommandSeparator,
   tv as MriCommandShortcut,
-  mx as MriCompactSearch,
-  xx as MriCopyButton,
-  Ax as MriDashboardLayout,
-  kx as MriDatePicker,
-  px as MriDialog,
-  yx as MriEconomyCard,
-  ix as MriEyeIcon,
-  Cx as MriGridActionButton,
+  px as MriCompactSearch,
+  yx as MriCopyButton,
+  Tx as MriDashboardLayout,
+  _x as MriDatePicker,
+  vx as MriDialog,
+  wx as MriEconomyCard,
+  lx as MriEyeIcon,
+  jx as MriGridActionButton,
   Oo as MriInput,
   K0 as MriKeyboardVisualizer,
-  cx as MriKickIcon,
+  dx as MriKickIcon,
   ia as MriModal,
-  ax as MriMoneyIcon,
-  Px as MriPageHeader,
-  Dx as MriPlayerScreenStream,
-  Mx as MriPlayerVitals,
+  sx as MriMoneyIcon,
+  Rx as MriPageHeader,
+  Ax as MriPlayerScreenStream,
+  Ex as MriPlayerVitals,
   Jt as MriPopover,
   Rt as MriPopoverContent,
   er as MriPopoverTrigger,
-  nx as MriReviveIcon,
+  ox as MriReviveIcon,
   Jr as MriScrollArea,
   _i as MriScrollBar,
-  jx as MriSearchInput,
-  Sx as MriSectionHeader,
-  vx as MriSelect,
-  rx as MriSendBackIcon,
-  Rx as MriSidebar,
+  Sx as MriSearchInput,
+  kx as MriSectionHeader,
+  gx as MriSelect,
+  nx as MriSendBackIcon,
+  Ox as MriSidebar,
   nf as MriSpinner,
-  ux as MriStatusBadge,
-  ex as MriTeleportIcon,
-  gx as MriThemeToggle,
-  bx as MriTimePicker,
-  Ox as MriTopbar,
-  ox as MriVerifyIcon,
-  Ex as MriVitalAdjustModal,
-  lx as MriWarnIcon,
+  fx as MriStatusBadge,
+  Lx as MriTabletFrame,
+  tx as MriTeleportIcon,
+  bx as MriThemeToggle,
+  xx as MriTimePicker,
+  Dx as MriTopbar,
+  ax as MriVerifyIcon,
+  Px as MriVitalAdjustModal,
+  cx as MriWarnIcon,
   k as cn,
   fu as mriBadgeVariants,
   lo as mriButtonVariants