@mriqbox/ui-kit 4.5.0 → 4.6.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.5.0');
+    .version('4.6.0');
 
 program
     .command('add <component>')

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

@@ -5,7 +5,21 @@ declare const MriDrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.
 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>>;
+export type MriDrawerSide = "top" | "bottom" | "left" | "right";
+interface MriDrawerContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Lado da tela de onde o drawer desliza. Default: `bottom` (mobile-style
+     * action sheet). Use `right` pra painel lateral de detalhes/formulario,
+     * `left` pra menu hamburger, `top` pra notificacoes.
+     */
+    side?: MriDrawerSide;
+    /**
+     * Esconde o handle (barra horizontal) no topo do drawer bottom. Sem efeito
+     * em outros lados. Default: false.
+     */
+    hideHandle?: boolean;
+}
+declare const MriDrawerContent: React.ForwardRefExoticComponent<MriDrawerContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const MriDrawerHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -11,3 +11,6 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const FromRight: Story;
+export declare const FromLeft: Story;
+export declare const FromTop: Story;

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

@@ -0,0 +1,56 @@
+import { LucideIcon } from 'lucide-react';
+import * as React from 'react';
+export interface MriSegmentedTabsItem {
+    id: string;
+    label: string | React.ReactNode;
+    icon?: LucideIcon | React.ElementType;
+    /** Classe extra so neste item. */
+    className?: string;
+}
+export type MriSegmentedTabsType = 'single' | 'multiple';
+export type MriSegmentedTabsVariant = 'default' | 'premium';
+type SingleProps = {
+    type?: 'single';
+    value: string;
+    onChange: (id: string) => void;
+};
+type MultipleProps = {
+    type: 'multiple';
+    value: string[];
+    onChange: (ids: string[]) => void;
+};
+type CommonProps = {
+    items: MriSegmentedTabsItem[];
+    /** `default` = rounded-lg; `premium` = rounded-xl com cantos mais arredondados. */
+    variant?: MriSegmentedTabsVariant;
+    className?: string;
+    itemClassName?: string;
+};
+export type MriSegmentedTabsProps = CommonProps & (SingleProps | MultipleProps);
+/**
+ * Segmented control — grupo de botoes lado-a-lado dentro de uma caixinha
+ * compartilhada. Diferente de `MriTabs` (que e underline pra navegacao de
+ * pagina), este e mais compacto e bom pra:
+ * - Filtros chip-style (`type="multiple"`)
+ * - Toggles de view (lista/grid, all/online/offline)
+ * - Sub-categorias densas
+ *
+ * ```tsx
+ * // Single (default) — picker de view
+ * <MriSegmentedTabs
+ *   items={[{ id: 'all', label: 'All' }, { id: 'online', label: 'Online' }]}
+ *   value={view}
+ *   onChange={setView}
+ * />
+ *
+ * // Multiple — filtros chip
+ * <MriSegmentedTabs
+ *   type="multiple"
+ *   items={categories}
+ *   value={selectedIds}
+ *   onChange={setSelectedIds}
+ * />
+ * ```
+ */
+export declare function MriSegmentedTabs(props: MriSegmentedTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriSegmentedTabs } from './MriSegmentedTabs';
+
+declare const meta: Meta<typeof MriSegmentedTabs>;
+export default meta;
+export declare const SingleSelect: StoryObj<typeof MriSegmentedTabs>;
+export declare const SingleWithIcons: StoryObj<typeof MriSegmentedTabs>;
+export declare const MultipleSelect: StoryObj<typeof MriSegmentedTabs>;
+export declare const PremiumVariant_: StoryObj<typeof MriSegmentedTabs>;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from './components/molecules/MriExpandableSearch';
 export * from './components/molecules/MriDialog';
 export * from './components/molecules/MriModal';
 export * from './components/molecules/MriPopover';
+export * from './components/molecules/MriSegmentedTabs';
 export * from './components/molecules/MriSelect';
 export * from './components/molecules/MriThemeToggle';
 export * from './components/molecules/MriTabs';