@mriqbox/ui-kit 1.0.1

package/README.md

@@ -0,0 +1,71 @@
+# Mri UI
+
+Biblioteca oficial de componentes de UI para o ecossistema Mri.
+
+Desenhada para ser moderna, responsiva e com suporte nativo a temas escuros (Dark Mode), utilizando **React**, **Tailwind CSS** e **Radix UI**.
+
+## Instalação
+
+```bash
+pnpm add @mriqbox/ui-kit
+# ou
+npm install @mriqbox/ui-kit
+```
+
+## Configuração
+
+### 1. CSS Global
+
+Adicione o CSS da biblioteca no arquivo de entrada da sua aplicação (ex: `main.tsx` ou `App.tsx`):
+
+```tsx
+import '@mriqbox/ui-kit/dist/style.css';
+```
+
+### 2. Tailwind CSS
+
+Para que o Tailwind da sua aplicação reconheça as classes da biblioteca, adicione o caminho do pacote ao seu `tailwind.config.js`:
+
+```js
+module.exports = {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@mriqbox/ui-kit/dist/**/*.{js,mjs}"
+  ],
+  // ...
+}
+```
+
+## Uso
+
+Importe os componentes diretamente do pacote:
+
+```tsx
+import { Button, Modal } from '@mriqbox/ui-kit';
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary">Clique Aqui</Button>
+
+      <Modal open={true}>
+        {/* Conteúdo do Modal */}
+      </Modal>
+    </div>
+  );
+}
+```
+
+## Documentação
+
+Para ver todos os componentes disponíveis e suas propriedades, consulte nosso Storybook:
+
+[Link para o Storybook](https://ui.mriqbox.com.br)
+
+## Desenvolvimento
+
+Para rodar o projeto localmente:
+
+1. Clone o repositório.
+2. Instale dependências: `pnpm install`
+3. Inicie o Storybook: `pnpm storybook`

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

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

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

@@ -0,0 +1,23 @@
+import { StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+
+declare const meta: {
+    title: string;
+    component: typeof Badge;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Secondary: Story;
+export declare const Destructive: Story;
+export declare const Outline: Story;

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

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Destructive: Story;
+export declare const Outline: Story;
+export declare const Secondary: Story;
+export declare const Ghost: Story;
+export declare const Link: Story;
+export declare const Small: Story;
+export declare const Large: Story;

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+type Action = {
+    icon?: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+};
+export default function ButtonGroup({ buttons }: {
+    buttons: Action[];
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

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

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Interactive: Story;
+export declare const WithBadge: Story;

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+declare const Command: 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>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    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>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: 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>> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: 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<{
+    children?: React.ReactNode;
+} & 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>>, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    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>> & {
+    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<{
+    children?: React.ReactNode;
+} & 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>>, "disabled" | "value" | "onSelect"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

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

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

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare function Dialog({ title, children, onClose, className }: {
+    title?: string;
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,35 @@
+export declare const TeleportIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BringIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SendBackIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ReviveIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const VerifyIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MoneyIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ClothingIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EyeIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const WarnIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const KickIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BanIcon: (props?: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+declare const meta: Meta;
+export default meta;
+export declare const AllIcons: StoryObj;

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

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

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

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+import { Input } from './Input';
+
+declare const meta: {
+    title: string;
+    component: typeof Input;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithValue: Story;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare function Modal({ children, onClose, className }: {
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

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

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

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+
+export * from './components/ui/Button';
+export * from './components/ui/Input';
+export * from './components/ui/Badge';
+export * from './components/ui/Card';
+export * from './components/ui/Command';
+export * from './components/ui/Dialog';
+export * from './components/ui/Icons';
+export * from './components/ui/Modal';
+export * from './components/ui/PageHeader';
+export * from './components/ui/Popover';
+export * from './components/ui/SelectSearch';
+export * from './components/ui/Table';
+export * from './lib/utils';
+export * from './components/ui/Sidebar';