@mriqbox/ui-kit 1.0.5 → 2.1.0

package/README.md

@@ -22,10 +22,10 @@ npm install @mriqbox/ui-kit
 
 **Uso:**
 ```tsx
-import { Button } from '@mriqbox/ui-kit';
+import { MriButton } from '@mriqbox/ui-kit';
 
 export default function MyComponent() {
-  return <Button>Clique aqui</Button>;
+  return <MriButton>Clique aqui</MriButton>;
 }
 ```
 
@@ -34,12 +34,15 @@ Ideal se você quer ter o código dos componentes no seu projeto para customizá
 
 Este projeto contém um arquivo `components.json` na raiz, permitindo o uso da CLI do shadcn.
 
-**Adicionar componente via CLI:**
-No diretório raiz deste projeto:
+**Adicionar componente via CLI (Novo):**
+Você pode adicionar componentes individualmente (estilo Shadcn) direto do nosso repositório:
+
 ```bash
-npx shadcn-ui@latest add button
+npx @mriqbox/ui-kit add mri-button
 ```
-Isso irá baixar o código do componente `Button` para `src/components/ui/button.tsx`.
+Isso irá baixar o código fonte do `MriButton.tsx` para `src/components/ui/MriButton.tsx` (ou diretório configurado, se detectado).
+
+**Nota:** A CLI irá baixar apenas o arquivo do componente. Verifique se ele possui dependências de outros componentes `Mri*` e adicione-os também se necessário.
 
 ## ⚙️ Configuração (Para uso via NPM)
 

package/bin/cli.js

@@ -0,0 +1,151 @@
+#!/usr/bin/env node
+
+/**
+ * Simple CLI to add Mri UI components to a project.
+ * Usage: npx @mriqbox/ui-kit add <component-name>
+ * Example: npx @mriqbox/ui-kit add mri-button
+ */
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import fs from 'fs';
+import path from 'path';
+import https from 'https';
+
+const program = new Command();
+const BASE_URL = 'https://raw.githubusercontent.com/mri-Qbox-Brasil/mri-ui-kit/main/src/components/ui';
+
+function toPascalCase(str) {
+    return str
+        .replace(/(^\w|-\w)/g, (clear) => clear.replace(/-/, "").toUpperCase());
+}
+function ensureDirectory(dir) {
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+}
+
+function downloadFile(url, dest) {
+    return new Promise((resolve, reject) => {
+        const file = fs.createWriteStream(dest);
+        https.get(url, (response) => {
+            if (response.statusCode === 200) {
+                response.pipe(file);
+                file.on('finish', () => {
+                    file.close(resolve);
+                });
+            } else {
+                fs.unlink(dest, () => { });
+                reject(new Error(`Failed to download: ${response.statusCode} ${response.statusMessage}`));
+            }
+        }).on('error', (err) => {
+            fs.unlink(dest, () => { });
+            reject(err);
+        });
+    });
+}
+
+const visited = new Set();
+
+async function processComponent(componentName, installDir) {
+    let targetName = componentName;
+
+    let fileName = componentName;
+    let isVariant = componentName.includes('variants');
+
+    if (!isVariant) {
+        if (!fileName.startsWith('Mri') && !fileName.match(/^[A-Z]/)) {
+            fileName = toPascalCase(fileName);
+        }
+        if (!fileName.startsWith('Mri')) {
+            fileName = `Mri${fileName}`;
+        }
+        if (!fileName.endsWith('.tsx')) fileName += '.tsx';
+    } else {
+        if (!fileName.endsWith('.ts')) fileName += '.ts';
+    }
+    if (visited.has(fileName)) return;
+    visited.add(fileName);
+
+    const destPath = path.join(installDir, fileName);
+    const fileUrl = `${BASE_URL}/${fileName}`;
+
+    if (fs.existsSync(destPath)) {
+        console.log(chalk.gray(`   ${fileName} already exists.`));
+        // Even if exists, we should scan it for dependencies?
+        // Maybe the user has an outdated version.
+        // For detailed recursion, strictly we should read it.
+        // But let's assume if it exists, its deps are likely handled or user manages it.
+        // To be safe for "fresh" installs, let's scan it anyway if we can read it.
+        // But standard 'add' usually skips or prompts overwrite.
+        // Let's just skip download but continues to scan deps if we want to be thorough.
+        // For this "Simple CLI", let's stop at existence to avoid overwriting user changes.
+        // BUT we must check its imports to ensure children exist.
+        checkDependencies(destPath, installDir);
+        return;
+    }
+
+    console.log(chalk.cyan(`⬇️  Downloading ${fileName}...`));
+    try {
+        await downloadFile(fileUrl, destPath);
+        console.log(chalk.green(`✅ ${fileName} added.`));
+
+        await checkDependencies(destPath, installDir);
+
+    } catch (err) {
+        console.error(chalk.red(`❌ Error downloading ${fileName}: ${err.message}`));
+    }
+}
+
+async function checkDependencies(filePath, installDir) {
+    try {
+        const content = fs.readFileSync(filePath, 'utf8');
+        const importRegex = /from\s+['"](?:@\/components\/ui\/|\.\/)([^'"]+)['"]/g;
+        let match;
+
+        while ((match = importRegex.exec(content)) !== null) {
+            const depName = match[1];
+            if (depName.startsWith('Mri') || depName.includes('variants')) {
+                await processComponent(depName, installDir);
+            }
+        }
+    } catch (e) {
+        console.warn(chalk.yellow(`Could not parse dependencies for ${filePath}`));
+    }
+}
+
+program
+    .name('mri-ui')
+    .description('Add Mri UI components to your project')
+    .version('2.0.0');
+
+program
+    .command('add <component>')
+    .description('Add a component to your project')
+    .action(async (componentName) => {
+        try {
+            console.log(chalk.blue(`🔹 Resolving ${componentName}...`));
+
+            let installDir = './src/components/ui';
+            if (fs.existsSync('components.json')) {
+                try {
+                    if (fs.existsSync('./components/ui')) installDir = './components/ui';
+                } catch (e) { }
+            } else if (fs.existsSync('./components/ui')) {
+                installDir = './components/ui';
+            }
+
+            console.log(chalk.gray(`   Target directory: ${installDir}`));
+            ensureDirectory(installDir);
+
+            await processComponent(componentName, installDir);
+
+            console.log(chalk.blue(`\n🎉 Done!`));
+            console.log(chalk.gray(`   Don't forget to install external libraries if prompted by your linter (lucide-react, etc).`));
+
+        } catch (error) {
+            console.error(chalk.red('An unexpected error occurred:'), error);
+        }
+    });
+
+program.parse();

package/dist/components/ui/MriBadge.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+import { mriBadgeVariants } from './mri-badge-variants';
+import * as React from "react";
+export interface MriBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof mriBadgeVariants> {
+}
+declare function MriBadge({ className, variant, ...props }: MriBadgeProps): import("react/jsx-runtime").JSX.Element;
+export { MriBadge };

package/dist/components/ui/{Badge.stories.d.ts → MriBadge.stories.d.ts}

@@ -1,9 +1,9 @@
 import { StoryObj } from '@storybook/react';
-import { Badge } from './Badge';
+import { MriBadge } from './MriBadge';
 
 declare const meta: {
     title: string;
-    component: typeof Badge;
+    component: typeof MriBadge;
     parameters: {
         layout: string;
     };

package/dist/components/ui/MriButton.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+import { mriButtonVariants } from './mri-button-variants';
+import * as React from "react";
+export interface MriButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof mriButtonVariants> {
+    asChild?: boolean;
+}
+export declare const MriButton: React.ForwardRefExoticComponent<MriButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/{Button.stories.d.ts → MriButton.stories.d.ts}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
+import { MriButton } from './MriButton';
 
-declare const meta: Meta<typeof Button>;
+declare const meta: Meta<typeof MriButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/dist/components/ui/{ButtonGroup.d.ts → MriButtonGroup.d.ts}

@@ -6,7 +6,7 @@ type Action = {
     onClick?: () => void;
     disabled?: boolean;
 };
-export default function ButtonGroup({ buttons }: {
+export default function MriButtonGroup({ buttons }: {
     buttons: Action[];
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/MriButtonGroup.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as MriButtonGroup } from './MriButtonGroup';
+
+declare const meta: Meta<typeof MriButtonGroup>;
+export default meta;
+type Story = StoryObj<typeof MriButtonGroup>;
+export declare const Default: Story;
+export declare const DisabledItem: Story;

package/dist/components/ui/MriCalendar.d.ts

@@ -0,0 +1,8 @@
+import { DayPicker } from 'react-day-picker';
+import * as React from "react";
+export type MriCalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function MriCalendar({ className, classNames, showOutsideDays, ...props }: MriCalendarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MriCalendar {
+    var displayName: string;
+}
+export { MriCalendar };

package/dist/components/ui/MriCard.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const MriCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const MriCardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const MriCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const MriCardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const MriCardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const MriCardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { MriCard, MriCardHeader, MriCardFooter, MriCardTitle, MriCardDescription, MriCardContent };

package/dist/components/ui/{Command.d.ts → MriCommand.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare const Command: React.ForwardRefExoticComponent<Omit<{
+declare const MriCommand: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -16,7 +16,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     disablePointerSelection?: boolean;
     vimBindings?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+declare const MriCommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
@@ -24,7 +24,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+declare const MriCommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -33,14 +33,14 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
 }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+declare const MriCommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
 }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+declare const MriCommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -51,14 +51,14 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+declare const MriCommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
 }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+declare const MriCommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -71,8 +71,8 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     keywords?: string[];
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandShortcut: {
+declare const MriCommandShortcut: {
     ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+export { MriCommand, MriCommandInput, MriCommandList, MriCommandEmpty, MriCommandGroup, MriCommandItem, MriCommandShortcut, MriCommandSeparator, };

package/dist/components/ui/MriCommand.stories.d.ts

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

package/dist/components/ui/{CompactSearch.d.ts → MriCompactSearch.d.ts}

@@ -2,7 +2,7 @@ interface Option {
     label: string;
     value: string | number;
 }
-interface CompactSearchProps {
+interface MriCompactSearchProps {
     options: Option[];
     value: string | number;
     onChange: (value: string) => void;
@@ -12,5 +12,5 @@ interface CompactSearchProps {
     className?: string;
     disabled?: boolean;
 }
-export declare function CompactSearch({ options, value, onChange, searchPlaceholder, emptyMessage, className, disabled }: CompactSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriCompactSearch({ options, value, onChange, searchPlaceholder, emptyMessage, className, disabled }: MriCompactSearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/{CompactSearch.stories.d.ts → MriCompactSearch.stories.d.ts}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { CompactSearch } from './CompactSearch';
+import { MriCompactSearch } from './MriCompactSearch';
 
-declare const meta: Meta<typeof CompactSearch>;
+declare const meta: Meta<typeof MriCompactSearch>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/dist/components/ui/{DatePicker.d.ts → MriDatePicker.d.ts}

@@ -1,11 +1,11 @@
 import { Locale } from 'date-fns';
 
-interface DatePickerProps {
+interface MriDatePickerProps {
     value?: Date | null;
     onChange: (date: Date | undefined) => void;
     placeholder?: string;
     disabled?: boolean;
     locale?: Locale;
 }
-export declare function DatePicker({ value, onChange, placeholder, disabled, locale }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriDatePicker({ value, onChange, placeholder, disabled, locale }: MriDatePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/{DatePicker.stories.d.ts → MriDatePicker.stories.d.ts}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { DatePicker } from './DatePicker';
+import { MriDatePicker } from './MriDatePicker';
 
-declare const meta: Meta<typeof DatePicker>;
+declare const meta: Meta<typeof MriDatePicker>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/dist/components/ui/{Dialog.d.ts → MriDialog.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare function Dialog({ title, children, onClose, className }: {
+export declare function MriDialog({ title, children, onClose, className }: {
     title?: string;
     children: React.ReactNode;
     onClose?: () => void;

package/dist/components/ui/MriDialog.stories.d.ts

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

package/dist/components/ui/{Icons.d.ts → MriIcons.d.ts}

@@ -1,34 +1,34 @@
-export declare const TeleportIcon: (props?: {
+export declare const MriTeleportIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const BringIcon: (props?: {
+export declare const MriBringIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const SendBackIcon: (props?: {
+export declare const MriSendBackIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const ReviveIcon: (props?: {
+export declare const MriReviveIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const VerifyIcon: (props?: {
+export declare const MriVerifyIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const MoneyIcon: (props?: {
+export declare const MriMoneyIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const ClothingIcon: (props?: {
+export declare const MriClothingIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const EyeIcon: (props?: {
+export declare const MriEyeIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const WarnIcon: (props?: {
+export declare const MriWarnIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const KickIcon: (props?: {
+export declare const MriKickIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const BanIcon: (props?: {
+export declare const MriBanIcon: (props?: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const _default: {};

package/dist/components/ui/MriInput.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function MriInput(props: React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/{Input.stories.d.ts → MriInput.stories.d.ts}

@@ -1,9 +1,9 @@
 import { StoryObj } from '@storybook/react';
-import { Input } from './Input';
+import { MriInput } from './MriInput';
 
 declare const meta: {
     title: string;
-    component: typeof Input;
+    component: typeof MriInput;
     parameters: {
         layout: string;
     };

package/dist/components/ui/{Modal.d.ts → MriModal.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function Modal({ children, onClose, className }: {
+export declare function MriModal({ children, onClose, className }: {
     children: React.ReactNode;
     onClose?: () => void;
     className?: string;

package/dist/components/ui/MriModal.stories.d.ts

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

package/dist/components/ui/MriPageHeader.d.ts

@@ -0,0 +1,11 @@
+import { LucideIcon } from 'lucide-react';
+import * as React from 'react';
+interface MriPageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    icon: LucideIcon;
+    count?: number;
+    countLabel?: string;
+    children?: React.ReactNode;
+}
+export declare function MriPageHeader({ title, icon: Icon, count, countLabel, children, className, ...props }: MriPageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/{PageHeader.stories.d.ts → MriPageHeader.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { PageHeader } from './PageHeader';
+import { MriPageHeader } from './MriPageHeader';
 
-declare const meta: Meta<typeof PageHeader>;
+declare const meta: Meta<typeof MriPageHeader>;
 export default meta;
-type Story = StoryObj<typeof PageHeader>;
+type Story = StoryObj<typeof MriPageHeader>;
 export declare const Default: Story;
 export declare const WithActions: Story;

package/dist/components/ui/MriPopover.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const MriPopover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const MriPopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const MriPopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MriPopover, MriPopoverTrigger, MriPopoverContent };

package/dist/components/ui/{Popover.stories.d.ts → MriPopover.stories.d.ts}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Popover } from './Popover';
+import { MriPopover } from './MriPopover';
 
-declare const meta: Meta<typeof Popover>;
+declare const meta: Meta<typeof MriPopover>;
 export default meta;
 export declare const Default: StoryObj;

package/dist/components/ui/MriScrollArea.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+declare const MriScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MriScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MriScrollArea, MriScrollBar };

package/dist/components/ui/{SelectSearch.d.ts → MriSelectSearch.d.ts}

@@ -2,7 +2,7 @@ interface Option {
     label: string;
     value: string | number;
 }
-interface SelectSearchProps {
+interface MriSelectSearchProps {
     options: Option[];
     value: string | number;
     onChange: (value: string) => void;
@@ -12,5 +12,5 @@ interface SelectSearchProps {
     className?: string;
     disabled?: boolean;
 }
-export declare function SelectSearch({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, className, disabled }: SelectSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriSelectSearch({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, className, disabled }: MriSelectSearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/MriSelectSearch.stories.d.ts

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

package/dist/components/ui/{Sidebar.d.ts → MriSidebar.d.ts}

@@ -1,14 +1,14 @@
 import { ElementType, ReactNode } from 'react';
 
-export interface SidebarItem {
+export interface MriSidebarItem {
     label: string;
     route?: string;
     icon: ElementType;
     onClick?: () => void;
     divider?: boolean;
 }
-export interface SidebarProps {
-    items: SidebarItem[];
+export interface MriSidebarProps {
+    items: MriSidebarItem[];
     activeRoute?: string;
     onNavigate?: (route: string) => void;
     collapsed?: boolean;
@@ -17,4 +17,4 @@ export interface SidebarProps {
     children?: ReactNode;
     className?: string;
 }
-export declare function Sidebar({ items, activeRoute, onNavigate, collapsed, onToggleCollapse, footer, children, className }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriSidebar({ items, activeRoute, onNavigate, collapsed, onToggleCollapse, footer, children, className }: MriSidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/MriSidebar.stories.d.ts

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

package/dist/components/ui/MriTable.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare const MriTable: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const MriTableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const MriTableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const MriTableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const MriTableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const MriTableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const MriTableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const MriTableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { MriTable, MriTableHeader, MriTableBody, MriTableFooter, MriTableHead, MriTableRow, MriTableCell, MriTableCaption, };

package/dist/components/ui/MriTable.stories.d.ts

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

package/dist/components/ui/{ThemeToggle.d.ts → MriThemeToggle.d.ts}

@@ -1,4 +1,4 @@
-export declare const ThemeToggle: ({ themeLabel, themeIconLabel, lightLabel, darkLabel, systemLabel }: {
+export declare const MriThemeToggle: ({ themeLabel, themeIconLabel, lightLabel, darkLabel, systemLabel }: {
     themeLabel?: string;
     themeIconLabel?: string;
     lightLabel?: string;