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

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

@@ -13,6 +13,7 @@ interface MriCompactSearchProps {
     disabled?: boolean;
     size?: "default" | "sm";
     error?: boolean | string;
+    clearable?: boolean;
 }
-export declare function MriCompactSearch({ options, value, onChange, searchPlaceholder, emptyMessage, className, disabled, size, error }: 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

@@ -8,3 +8,4 @@ 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]: unknown;
+}
+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

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

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

@@ -10,3 +10,4 @@ export declare const EnglishLocale: Story;
 export declare const Disabled: Story;
 export declare const ErrorState: Story;
 export declare const Small: Story;
+export declare const WithRangeLimit: Story;

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

@@ -14,6 +14,7 @@ interface MriSelectSearchProps {
     size?: "default" | "sm";
     isLoading?: boolean;
     error?: boolean | string;
+    clearable?: boolean;
 }
-export declare function MriSelectSearch({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, className, disabled, size, isLoading, error }: 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

@@ -6,4 +6,5 @@ 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

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

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

@@ -10,3 +10,4 @@ export declare const WithCustomLabels: Story;
 export declare const Disabled: Story;
 export declare const ErrorState: Story;
 export declare const Small: Story;
+export declare const WithTimeLimit: Story;

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

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

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

@@ -0,0 +1,28 @@
+import { StoryObj } from '@storybook/react';
+import { MriCalendar } from './MriCalendar';
+
+declare const meta: {
+    title: string;
+    component: typeof MriCalendar;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        mode: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        showOutsideDays: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const MultipleDates: Story;
+export declare const DateRange: Story;
+export declare const WithRangeLimit: 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';