@mriqbox/ui-kit 4.1.0 → 4.3.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.1.0');
+    .version('4.3.0');
 
 program
     .command('add <component>')

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

@@ -0,0 +1,40 @@
+import { ElementType, ReactNode } from 'react';
+
+export interface MriTabsItem {
+    label: string;
+    route: string;
+    icon?: ElementType;
+    /** Badge opcional na direita (count, status, etc). */
+    badge?: ReactNode;
+    /** Desabilita o tab — mostra mas nao clicavel. */
+    disabled?: boolean;
+}
+export interface MriTabsProps {
+    items: MriTabsItem[];
+    activeRoute?: string;
+    onNavigate?: (route: string) => void;
+    /** Conteudo extra alinhado a direita do tab strip (ex: action button). */
+    rightContent?: ReactNode;
+    className?: string;
+}
+/**
+ * Sub-navegacao horizontal pra dividir uma pagina em abas. Uso tipico:
+ * pagina de admin com varias seccoes que nao merecem item proprio no
+ * sidebar do app. Funciona standalone OU dentro de iframe embedded — nao
+ * conflita com o sidebar do host.
+ *
+ * Visual: linha de tabs com underline animado no ativo (estilo
+ * GitHub/Linear/Stripe). Light weight — sem bg-card, sem h-16, so border-b.
+ *
+ * ```tsx
+ * <MriTabs
+ *   items={[
+ *     { label: 'Spawns', icon: MapPin, route: 'spawns' },
+ *     { label: 'Settings', icon: Settings, route: 'config' },
+ *   ]}
+ *   activeRoute={route}
+ *   onNavigate={setRoute}
+ * />
+ * ```
+ */
+export declare function MriTabs({ items, activeRoute, onNavigate, rightContent, className, }: MriTabsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriTabs } from './MriTabs';
+
+declare const meta: Meta<typeof MriTabs>;
+export default meta;
+export declare const Default: StoryObj<typeof MriTabs>;
+export declare const WithBadges_: StoryObj<typeof MriTabs>;
+export declare const WithRightAction_: StoryObj<typeof MriTabs>;
+export declare const WithDisabled_: StoryObj<typeof MriTabs>;

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

@@ -6,6 +6,13 @@ export interface MriDashboardLayoutProps {
     sidebar?: ReactNode;
     topbar?: ReactNode;
     header?: ReactNode;
+    /**
+     * Sub-navegacao da pagina (entre header e main). Tipico: <MriTabs/>,
+     * breadcrumbs, segmented control. Layout so reserva o espaco — content
+     * fica a cargo do consumer. Diferente do `header` semanticamente: header
+     * e titulo+acoes da pagina, subnav e navegacao entre subsessoes.
+     */
+    subnav?: ReactNode;
     footer?: ReactNode;
     children?: ReactNode;
     sidebarPosition?: MriDashboardSidebarPosition;
@@ -14,4 +21,4 @@ export interface MriDashboardLayoutProps {
     contentClassName?: string;
     mainClassName?: string;
 }
-export declare function MriDashboardLayout({ sidebar, topbar, header, footer, children, sidebarPosition, topbarPlacement, className, contentClassName, mainClassName, }: MriDashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriDashboardLayout({ sidebar, topbar, header, subnav, footer, children, sidebarPosition, topbarPlacement, className, contentClassName, mainClassName, }: MriDashboardLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,3 +6,14 @@ export default meta;
 export declare const Default: StoryObj<typeof MriDashboardLayout>;
 export declare const TopbarBelow: StoryObj<typeof MriDashboardLayout>;
 export declare const SidebarRightWithFooter: StoryObj<typeof MriDashboardLayout>;
+export declare const WithSubnav_: StoryObj<typeof MriDashboardLayout>;
+type PlaygroundArgs = {
+    showSidebar: boolean;
+    showHeader: boolean;
+    showSubnav: boolean;
+    showFooter: boolean;
+    showTopbar: boolean;
+    sidebarPosition: 'left' | 'right';
+    topbarPlacement: 'aside' | 'below';
+};
+export declare const Playground_: StoryObj<PlaygroundArgs>;

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

@@ -18,6 +18,7 @@ export * from './components/molecules/MriModal';
 export * from './components/molecules/MriPopover';
 export * from './components/molecules/MriSelect';
 export * from './components/molecules/MriThemeToggle';
+export * from './components/molecules/MriTabs';
 export * from './components/molecules/MriTimePicker';
 export * from './components/molecules/MriCommand';
 export * from './components/molecules/MriCopyButton';
@@ -39,4 +40,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';