@motor-hero/ui-kit 0.35.0 → 0.36.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/filter-toolbar.d.ts +67 -0
- package/dist/components/filter-toolbar.d.ts.map +1 -0
- package/dist/index.cjs +1565 -1398
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +46 -44
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1619 -1455
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/filter-toolbar.tsx +244 -0
- package/src/index.ts +83 -61
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { type LucideIcon } from "lucide-react";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Barra de filtros compacta para telas com muitos filtros.
|
|
5
|
+
*
|
|
6
|
+
* Mantém poucos controles visíveis (uma busca + 1–2 filtros primários) e recolhe
|
|
7
|
+
* o restante atrás de um botão "Filtros" com contador, no lugar de uma fileira
|
|
8
|
+
* poluída de dropdowns. Composicional e router-agnóstico: o app fornece os
|
|
9
|
+
* controles reais (Combobox, listas) dentro de cada `FilterPopover`.
|
|
10
|
+
*/
|
|
11
|
+
export interface FilterToolbarProps {
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
/** Mostra o botão "Limpar filtros" quando `true`. */
|
|
14
|
+
isFilterActive?: boolean;
|
|
15
|
+
onClear?: () => void;
|
|
16
|
+
clearLabel?: string;
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
19
|
+
export declare function FilterToolbar({ children, isFilterActive, onClear, clearLabel, className, }: FilterToolbarProps): React.JSX.Element;
|
|
20
|
+
type FilterPopoverContent = React.ReactNode | ((api: {
|
|
21
|
+
close: () => void;
|
|
22
|
+
}) => React.ReactNode);
|
|
23
|
+
export interface FilterPopoverProps {
|
|
24
|
+
/** Rótulo do gatilho (nome do filtro). */
|
|
25
|
+
label: string;
|
|
26
|
+
/** Ícone opcional à esquerda (ex.: `Filter` no botão de overflow). */
|
|
27
|
+
icon?: LucideIcon;
|
|
28
|
+
/** Ativo → gatilho destacado e badge visível. */
|
|
29
|
+
active?: boolean;
|
|
30
|
+
/** Conteúdo do badge quando ativo: uma contagem ou o rótulo do valor. */
|
|
31
|
+
badge?: React.ReactNode;
|
|
32
|
+
/** Largura/estilo do conteúdo no desktop. Padrão: `w-60`. */
|
|
33
|
+
contentClassName?: string;
|
|
34
|
+
align?: "start" | "center" | "end";
|
|
35
|
+
/** Título do drawer no mobile (acessibilidade). Padrão: `label`. */
|
|
36
|
+
title?: string;
|
|
37
|
+
/** Nó ou render-prop que recebe `{ close }` para fechar após selecionar. */
|
|
38
|
+
children: FilterPopoverContent;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Gatilho compacto + popover (desktop) / drawer (mobile) para um filtro.
|
|
42
|
+
* Mesmo idiom do `Combobox`: popover não-modal no desktop, bottom sheet no touch.
|
|
43
|
+
*/
|
|
44
|
+
export declare function FilterPopover({ label, icon: Icon, active, badge, contentClassName, align, title, children, }: FilterPopoverProps): React.JSX.Element;
|
|
45
|
+
export interface FilterOption {
|
|
46
|
+
value: string;
|
|
47
|
+
label: string;
|
|
48
|
+
/** Classe do "dot" à esquerda (ex.: `bg-emerald-500` para um status). */
|
|
49
|
+
dotClassName?: string;
|
|
50
|
+
}
|
|
51
|
+
export interface FilterOptionListProps {
|
|
52
|
+
options: FilterOption[];
|
|
53
|
+
/** `string` no modo simples; `string[]` no modo múltiplo. */
|
|
54
|
+
value: string | string[];
|
|
55
|
+
onChange: (value: string | string[]) => void;
|
|
56
|
+
multiple?: boolean;
|
|
57
|
+
/** Mostra o link "Limpar" no rodapé quando há seleção. */
|
|
58
|
+
clearable?: boolean;
|
|
59
|
+
clearLabel?: string;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Lista de opções (seleção simples ou múltipla) para o conteúdo de um
|
|
63
|
+
* `FilterPopover` — evita aninhar um Combobox para enums curtos.
|
|
64
|
+
*/
|
|
65
|
+
export declare function FilterOptionList({ options, value, onChange, multiple, clearable, clearLabel, }: FilterOptionListProps): React.JSX.Element;
|
|
66
|
+
export {};
|
|
67
|
+
//# sourceMappingURL=filter-toolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/filter-toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,UAAU,EAAK,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC7B,QAAQ,EACR,cAAsB,EACtB,OAAO,EACP,UAA6B,EAC7B,SAAS,GACT,EAAE,kBAAkB,qBAqBpB;AAED,KAAK,oBAAoB,GACtB,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,GAAG,EAAE;IAAE,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;AAErD,MAAM,WAAW,kBAAkB;IAClC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,QAAQ,EAAE,oBAAoB,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC7B,KAAK,EACL,IAAI,EAAE,IAAI,EACV,MAAc,EACd,KAAK,EACL,gBAAgB,EAChB,KAAe,EACf,KAAK,EACL,QAAQ,GACR,EAAE,kBAAkB,qBAuEpB;AAED,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACrC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAChC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,UAAqB,GACrB,EAAE,qBAAqB,qBAqDvB"}
|