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

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

@@ -0,0 +1,41 @@
+import { ElementType } from 'react';
+import * as React from 'react';
+export type MriIconToggleButtonVariant = 'primary' | 'destructive';
+export type MriIconToggleButtonSize = 'sm' | 'default';
+export interface MriIconToggleButtonProps {
+    /** Estado on/off. */
+    active: boolean;
+    onClick: () => void;
+    /** Icone lucide (ou qualquer ElementType de svg). */
+    icon: ElementType;
+    /** Tooltip nativo via `title`. */
+    title?: string;
+    /** Cor do estado ativo. Default `primary`. `destructive` pra toggles "perigosos" (ex: muteCategory). */
+    variant?: MriIconToggleButtonVariant;
+    /** Tamanho. `sm` (28px) ou `default` (36px). */
+    size?: MriIconToggleButtonSize;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Botao toggle com icone — UI compacta pra ligar/desligar uma opcao.
+ * Diferente de `MriSwitch` (que e label+switch horizontal): este e um
+ * quadrado com icone que muda de cor quando ativo. Util em filtros, tabelas
+ * com colunas toggle, configuracoes densas.
+ *
+ * Estados:
+ * - active=true (variant=primary): fundo primary/15, icone primary
+ * - active=true (variant=destructive): fundo destructive/15, icone destructive
+ * - active=false: muted background no hover, icone esmaecido
+ * - disabled: opacidade 40%, sem hover
+ *
+ * ```tsx
+ * <MriIconToggleButton
+ *   active={cat.enabled}
+ *   onClick={() => toggle(cat.id)}
+ *   icon={Database}
+ *   title="Salvar no DB"
+ * />
+ * ```
+ */
+export declare const MriIconToggleButton: React.FC<MriIconToggleButtonProps>;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriIconToggleButton } from './MriIconToggleButton';
+
+declare const meta: Meta<typeof MriIconToggleButton>;
+export default meta;
+export declare const Default: StoryObj<typeof MriIconToggleButton>;
+export declare const Variants: StoryObj<typeof MriIconToggleButton>;
+export declare const Sizes: StoryObj<typeof MriIconToggleButton>;
+export declare const Disabled: StoryObj<typeof MriIconToggleButton>;
+export declare const InCategoryRow: StoryObj<typeof MriIconToggleButton>;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export interface MriSwitchProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Tamanho do switch — `sm` (w-7 h-4) ou `default` (w-9 h-5). */
+    size?: 'sm' | 'default';
+    /** Texto pra screen readers (recomendado quando o switch nao tem label visivel). */
+    'aria-label'?: string;
+    className?: string;
+    id?: string;
+}
+/**
+ * Switch (toggle iOS-style). Wrapper sobre `<input type="checkbox">` com
+ * styling Tailwind via `peer`. Sem dep extra — funciona com a a11y nativa
+ * do checkbox HTML (screen readers anunciam estado via `aria-checked` que
+ * o navegador deriva do `checked`).
+ *
+ * Uso controlado:
+ * ```tsx
+ * const [enabled, setEnabled] = useState(false)
+ * <MriSwitch checked={enabled} onCheckedChange={setEnabled} aria-label="Modo debug"/>
+ * ```
+ */
+export declare const MriSwitch: React.ForwardRefExoticComponent<MriSwitchProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export interface MriTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean | string;
+    /** Hint visible abaixo do textarea (texto cinza, info contextual). */
+    hint?: string;
+    /**
+     * `auto` cresce com o conteudo (sem scrollbar interna). Default: `vertical`
+     * (user-resizable). `none` trava o tamanho.
+     */
+    resize?: 'auto' | 'vertical' | 'none';
+}
+/**
+ * Textarea estilizado consistente com `MriInput`. Mesmo border/focus/disabled,
+ * apenas altura adaptavel. Pra single-line use `MriInput`.
+ *
+ * ```tsx
+ * <MriTextarea
+ *   value={text}
+ *   onChange={(e) => setText(e.target.value)}
+ *   rows={4}
+ *   placeholder="Descreva a acao..."
+ * />
+ * ```
+ */
+export declare const MriTextarea: React.ForwardRefExoticComponent<MriTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriTextarea } from './MriTextarea';
+
+declare const meta: Meta<typeof MriTextarea>;
+export default meta;
+export declare const Default: StoryObj<typeof MriTextarea>;
+export declare const WithHint: StoryObj<typeof MriTextarea>;
+export declare const WithError: StoryObj<typeof MriTextarea>;
+export declare const AutoResize: StoryObj<typeof MriTextarea>;
+export declare const NonResizable: StoryObj<typeof MriTextarea>;

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

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+
+export interface MriExpandableSearchProps {
+    value: string;
+    onChange: (val: string) => void;
+    placeholder?: string;
+    /** Largura quando expandido. Default: `w-64` (256px). */
+    expandedWidth?: string;
+    className?: string;
+}
+/**
+ * Search bar compacta — inicialmente colapsada como botao de icone (40x40),
+ * expande ao clicar e foca o input. Auto-colapsa no blur se o valor estiver
+ * vazio. ESC blura e colapsa.
+ *
+ * Util em headers de paginas admin onde a busca e secundaria — economiza
+ * espaco horizontal vs uma search bar sempre expandida.
+ *
+ * ```tsx
+ * const [query, setQuery] = useState('')
+ * <MriExpandableSearch
+ *   value={query}
+ *   onChange={setQuery}
+ *   placeholder="Buscar jogador..."
+ * />
+ * ```
+ */
+export declare const MriExpandableSearch: React.FC<MriExpandableSearchProps>;

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

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

package/dist/index.d.ts

@@ -9,10 +9,14 @@ 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/atoms/MriSwitch';
+export * from './components/atoms/MriTextarea';
+export * from './components/atoms/MriIconToggleButton';
 export * from './components/molecules/MriAccordion';
 export * from './components/molecules/MriButtonGroup';
 export * from './components/molecules/MriCard';
 export * from './components/molecules/MriCompactSearch';
+export * from './components/molecules/MriExpandableSearch';
 export * from './components/molecules/MriDialog';
 export * from './components/molecules/MriModal';
 export * from './components/molecules/MriPopover';