@mriqbox/ui-kit 3.0.0 → 3.2.0

package/bin/cli.js

@@ -18,6 +18,8 @@ const BASE_PREFIX = 'https://raw.githubusercontent.com/mri-Qbox-Brasil/mri-ui-ki
 const COMPONENT_MAP = {
     // Atoms
     'MriBadge': 'atoms',
+    'MriSkeleton': 'atoms',
+    'MriSpinner': 'atoms',
     'MriButton': 'atoms',
     'MriIcons': 'atoms',
     'MriInput': 'atoms',
@@ -27,6 +29,9 @@ const COMPONENT_MAP = {
     'mri-button-variants': 'atoms',
 
     // Molecules
+    'MriActionButton': 'molecules',
+    'MriActionDropdown': 'molecules',
+    'MriActionModal': 'molecules',
     'MriButtonGroup': 'molecules',
     'MriCard': 'molecules',
     'MriCompactSearch': 'molecules',
@@ -36,16 +41,20 @@ const COMPONENT_MAP = {
     'MriSelectSearch': 'molecules',
     'MriThemeToggle': 'molecules',
     'MriTimePicker': 'molecules',
+    'MriColorPicker': 'molecules',
     'MriCommand': 'molecules',
+    'MriCreatableCombobox': 'molecules',
     'MriCopyButton': 'molecules',
     'MriEconomyCard': 'molecules',
     'MriGridActionButton': 'molecules',
     'MriSearchInput': 'molecules',
     'MriSectionHeader': 'molecules',
     'MriDatePicker': 'molecules',
+    'MriDrawer': 'molecules',
 
     // Organisms
     'MriCalendar': 'organisms',
+    'MriKeyboardVisualizer': 'organisms',
     'MriPageHeader': 'organisms',
     'MriSidebar': 'organisms',
     'MriTable': 'organisms',
@@ -164,7 +173,7 @@ async function checkDependencies(filePath, installDir) {
 program
     .name('mri-ui')
     .description('Add Mri UI components to your project')
-    .version('3.0.0');
+    .version('3.2.0');
 
 program
     .command('add <component>')

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

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

package/dist/components/atoms/MriButton.stories.d.ts

@@ -12,3 +12,4 @@ export declare const Ghost: Story;
 export declare const Link: Story;
 export declare const Small: Story;
 export declare const Large: Story;
+export declare const Loading: Story;

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

@@ -1,2 +1,8 @@
 import * as React from 'react';
-export declare function MriInput(props: React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+export interface MriInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: 'default' | 'sm';
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    error?: boolean | string;
+}
+export declare const MriInput: React.ForwardRefExoticComponent<MriInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/MriInput.stories.d.ts

@@ -1,9 +1,8 @@
 import { StoryObj } from '@storybook/react';
-import { MriInput } from './MriInput';
 
 declare const meta: {
     title: string;
-    component: typeof MriInput;
+    component: import('react').ForwardRefExoticComponent<import('./MriInput').MriInputProps & import('react').RefAttributes<HTMLInputElement>>;
     parameters: {
         layout: string;
     };
@@ -22,3 +21,6 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Disabled: Story;
 export declare const WithValue: Story;
+export declare const Small: Story;
+export declare const WithIcons: Story;
+export declare const ErrorState: Story;

package/dist/components/atoms/MriSkeleton.d.ts

@@ -0,0 +1,2 @@
+declare function MriSkeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { MriSkeleton };

package/dist/components/atoms/MriSkeleton.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+import { MriSkeleton } from './MriSkeleton';
+
+declare const meta: {
+    title: string;
+    component: typeof MriSkeleton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Circle: Story;
+export declare const CardDemo: Story;

package/dist/components/atoms/MriSpinner.d.ts

@@ -0,0 +1,4 @@
+export interface MriSpinnerProps {
+    size?: "sm" | "md" | "lg";
+}
+export declare const MriSpinner: ({ size }: MriSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/MriSpinner.stories.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    title: string;
+    component: ({ size }: import('./MriSpinner').MriSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const Small: {
+    args: {
+        size: string;
+    };
+};
+export declare const Medium: {
+    args: {
+        size: string;
+    };
+};
+export declare const Large: {
+    args: {
+        size: string;
+    };
+};

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

@@ -0,0 +1,9 @@
+export interface MriActionButtonProps {
+    id?: string;
+    label: string;
+    isFavorite?: boolean;
+    isProcessing?: boolean;
+    onClick?: () => void;
+    onToggleFavorite?: (id: string) => void;
+}
+export declare const MriActionButton: ({ id, label, isFavorite, isProcessing, onClick, onToggleFavorite, }: MriActionButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+declare const _default: {
+    title: string;
+    component: ({ id, label, isFavorite, isProcessing, onClick, onToggleFavorite, }: import('./MriActionButton').MriActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onClick: {
+            action: string;
+        };
+        onToggleFavorite: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        label: string;
+    };
+};
+export declare const Favorite: {
+    args: {
+        label: string;
+        isFavorite: boolean;
+    };
+};
+export declare const Processing: {
+    args: {
+        label: string;
+        isProcessing: boolean;
+    };
+};

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

@@ -0,0 +1,28 @@
+export interface MriActionDropdownOption {
+    value: string;
+    label: string;
+}
+export type MriActionDropdownItemType = "text" | "dropdown" | "button";
+export interface MriActionDropdownItem {
+    id: string;
+    label: string;
+    option: MriActionDropdownItemType;
+    placeholder?: string;
+    options?: MriActionDropdownOption[];
+    onTextChange?: (id: string, value: string) => void;
+    onDropdownSelect?: (id: string, val: MriActionDropdownOption) => void;
+    onButtonClick?: (item: MriActionDropdownItem) => void;
+    selectedValue?: string;
+    selectedLabel?: string;
+    searchPlaceholder?: string;
+    noneFoundText?: string;
+    selectPlaceholder?: string;
+}
+export interface MriActionDropdownProps {
+    id?: string;
+    label: string;
+    isFavorite?: boolean;
+    dropdownItems?: MriActionDropdownItem[];
+    onToggleFavorite?: (id: string) => void;
+}
+export declare const MriActionDropdown: ({ id, label, isFavorite, dropdownItems, onToggleFavorite, }: MriActionDropdownProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,51 @@
+declare const _default: {
+    title: string;
+    component: ({ id, label, isFavorite, dropdownItems, onToggleFavorite, }: import('./MriActionDropdown').MriActionDropdownProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onToggleFavorite: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        label: string;
+        id: string;
+        isFavorite: boolean;
+        dropdownItems: ({
+            id: string;
+            label: string;
+            option: string;
+            options: {
+                value: string;
+                label: string;
+            }[];
+            selectedLabel: string;
+            selectedValue: undefined;
+            searchPlaceholder: string;
+            noneFoundText: string;
+            placeholder?: undefined;
+        } | {
+            id: string;
+            label: string;
+            option: string;
+            placeholder: string;
+            options?: undefined;
+            selectedLabel?: undefined;
+            selectedValue?: undefined;
+            searchPlaceholder?: undefined;
+            noneFoundText?: undefined;
+        } | {
+            id: string;
+            label: string;
+            option: string;
+            options?: undefined;
+            selectedLabel?: undefined;
+            selectedValue?: undefined;
+            searchPlaceholder?: undefined;
+            noneFoundText?: undefined;
+            placeholder?: undefined;
+        })[];
+    };
+};

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+export type MriActionModalVariant = "default" | "destructive" | "warning";
+export interface MriActionModalProps {
+    title: string;
+    icon: LucideIcon;
+    variant?: MriActionModalVariant;
+    onClose: () => void;
+    onConfirm?: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    isConfirmDisabled?: boolean;
+    maxWidth?: string;
+    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;

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

@@ -0,0 +1,15 @@
+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;
+    tags: string[];
+};
+export default _default;
+export declare const Default: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Warning: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Destructive: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,7 @@
+export interface MriColorPickerProps {
+    color: string;
+    onChange: (color: string) => void;
+    active: boolean;
+    format?: 'hex' | 'hsl-string';
+}
+export declare const MriColorPicker: ({ color, onChange, active, format }: MriColorPickerProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -11,6 +11,9 @@ interface MriCompactSearchProps {
     emptyMessage?: string;
     className?: string;
     disabled?: boolean;
+    size?: "default" | "sm";
+    error?: boolean | string;
+    clearable?: boolean;
 }
-export declare function MriCompactSearch({ options, value, onChange, searchPlaceholder, emptyMessage, className, disabled }: MriCompactSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriCompactSearch({ options, value, onChange, searchPlaceholder, emptyMessage, className, disabled, size, error, clearable }: MriCompactSearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,3 +6,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Preselected: Story;
+export declare const Small: Story;
+export declare const ErrorState: Story;
+export declare const Clearable: Story;

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

@@ -0,0 +1,17 @@
+export interface MriCreatableComboboxOption {
+    label: string;
+    value: string;
+    [key: string]: any;
+}
+export interface MriCreatableComboboxProps {
+    options: MriCreatableComboboxOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    className?: string;
+    allowCreate?: boolean;
+    emptyMessage?: string;
+    createLabelPrefix?: string;
+}
+export declare const MriCreatableCombobox: ({ options, value, onChange, placeholder, searchPlaceholder, className, allowCreate, emptyMessage, createLabelPrefix }: MriCreatableComboboxProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -6,6 +6,8 @@ interface MriDatePickerProps {
     placeholder?: string;
     disabled?: boolean;
     locale?: Locale;
+    size?: "default" | "sm";
+    error?: boolean | string;
 }
-export declare function MriDatePicker({ value, onChange, placeholder, disabled, locale }: MriDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriDatePicker({ value, onChange, placeholder, disabled, locale, size, error }: MriDatePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,3 +8,5 @@ export declare const Default: Story;
 export declare const WithValue: Story;
 export declare const EnglishLocale: Story;
 export declare const Disabled: Story;
+export declare const ErrorState: Story;
+export declare const Small: Story;

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const MriDrawer: React.FC<DialogPrimitive.DialogProps>;
+declare const MriDrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const MriDrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const MriDrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const MriDrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MriDrawerContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MriDrawerHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const MriDrawerFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const MriDrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const MriDrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { MriDrawer, MriDrawerPortal, MriDrawerOverlay, MriDrawerTrigger, MriDrawerClose, MriDrawerContent, MriDrawerHeader, MriDrawerFooter, MriDrawerTitle, MriDrawerDescription, };

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

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('@radix-ui/react-dialog').DialogProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -4,3 +4,4 @@ import { MriModal } from './MriModal';
 declare const meta: Meta<typeof MriModal>;
 export default meta;
 export declare const Default: StoryObj<typeof MriModal>;
+export declare const PortalTest: StoryObj<typeof MriModal>;

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

@@ -4,5 +4,7 @@ export interface MriSearchInputProps {
     placeholder?: string;
     className?: string;
     width?: string;
+    size?: "default" | "sm";
+    error?: boolean | string;
 }
-export declare function MriSearchInput({ value, onChange, placeholder, className, width }: MriSearchInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriSearchInput({ value, onChange, placeholder, className, width, size, error }: MriSearchInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,3 +6,5 @@ export default meta;
 type Story = StoryObj<typeof MriSearchInput>;
 export declare const Default: Story;
 export declare const CustomWidth: Story;
+export declare const Small: Story;
+export declare const ErrorState: Story;

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

@@ -11,6 +11,10 @@ interface MriSelectSearchProps {
     emptyMessage?: string;
     className?: string;
     disabled?: boolean;
+    size?: "default" | "sm";
+    isLoading?: boolean;
+    error?: boolean | string;
+    clearable?: boolean;
 }
-export declare function MriSelectSearch({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, className, disabled }: MriSelectSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriSelectSearch({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, className, disabled, size, isLoading, error, clearable }: MriSelectSearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,3 +4,7 @@ import { MriSelectSearch } from './MriSelectSearch';
 declare const meta: Meta<typeof MriSelectSearch>;
 export default meta;
 export declare const Default: StoryObj<typeof MriSelectSearch>;
+export declare const Loading: StoryObj<typeof MriSelectSearch>;
+export declare const ErrorState: StoryObj<typeof MriSelectSearch>;
+export declare const Clearable: StoryObj<typeof MriSelectSearch>;
+export declare const Small: StoryObj<typeof MriSelectSearch>;

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

@@ -4,6 +4,8 @@ interface MriTimePickerProps {
     disabled?: boolean;
     hourLabel?: string;
     minuteLabel?: string;
+    size?: "default" | "sm";
+    error?: boolean | string;
 }
-export declare function MriTimePicker({ value, onChange, disabled, hourLabel, minuteLabel }: MriTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MriTimePicker({ value, onChange, disabled, hourLabel, minuteLabel, size, error }: MriTimePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,3 +8,5 @@ export declare const Default: Story;
 export declare const WithPreselectedValue: Story;
 export declare const WithCustomLabels: Story;
 export declare const Disabled: Story;
+export declare const ErrorState: Story;
+export declare const Small: Story;

package/dist/components/organisms/MriKeyboardVisualizer.d.ts

@@ -0,0 +1,5 @@
+export interface MriKeyboardVisualizerProps {
+    pressedKeys: string[];
+    className?: string;
+}
+export declare const MriKeyboardVisualizer: ({ pressedKeys, className }: MriKeyboardVisualizerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/MriKeyboardVisualizer.stories.d.ts

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

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/atoms/MriScrollArea';
 export * from './components/atoms/MriStatusBadge';
 export * from './components/atoms/mri-badge-variants';
 export * from './components/atoms/mri-button-variants';
+export * from './components/atoms/MriSpinner';
 export * from './components/molecules/MriButtonGroup';
 export * from './components/molecules/MriCard';
 export * from './components/molecules/MriCompactSearch';
@@ -19,12 +20,18 @@ export * from './components/molecules/MriTimePicker';
 export * from './components/molecules/MriCommand';
 export * from './components/molecules/MriCopyButton';
 export * from './components/molecules/MriEconomyCard';
+export * from './components/molecules/MriActionButton';
+export * from './components/molecules/MriActionDropdown';
+export * from './components/molecules/MriActionModal';
 export * from './components/molecules/MriGridActionButton';
 export * from './components/molecules/MriSearchInput';
 export * from './components/molecules/MriSectionHeader';
 export * from './components/molecules/MriDatePicker';
+export * from './components/molecules/MriColorPicker';
+export * from './components/molecules/MriCreatableCombobox';
 export * from './components/organisms/MriCalendar';
 export * from './components/organisms/MriPageHeader';
 export * from './components/organisms/MriSidebar';
 export * from './components/organisms/MriTable';
+export * from './components/organisms/MriKeyboardVisualizer';
 export * from './lib/utils';