@selectwin/kit 0.1.186 → 0.1.187
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/README.md +40 -29
- package/dist/SelectActionMenu.d.ts +1 -1
- package/dist/SelectAssistant.d.ts +1 -1
- package/dist/SelectBackLink.d.ts +1 -1
- package/dist/SelectConfirmModal.d.ts +1 -1
- package/dist/SelectDatePicker.d.ts +1 -1
- package/dist/SelectFilterBar.d.ts +7 -1
- package/dist/SelectFormModal.d.ts +1 -1
- package/dist/SelectLocale.d.ts +92 -0
- package/dist/SelectModal.d.ts +6 -1
- package/dist/SelectPagination.d.ts +1 -1
- package/dist/SelectRowActions.d.ts +1 -1
- package/dist/SelectSearchMenu.d.ts +1 -1
- package/dist/icons.d.ts +2 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +5561 -5320
- package/dist/internal/inert.d.ts +2 -0
- package/package.json +64 -64
package/README.md
CHANGED
|
@@ -1,29 +1,40 @@
|
|
|
1
|
-
# @selectwin/kit
|
|
2
|
-
|
|
3
|
-
Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
|
|
4
|
-
gráficos) e tokens CSS, theme-aware (light/dark).
|
|
5
|
-
|
|
6
|
-
Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
|
|
7
|
-
não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
|
|
8
|
-
|
|
9
|
-
## Uso
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm i @selectwin/kit
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
|
|
17
|
-
import { SelectButton, SelectSection } from '@selectwin/kit';
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
|
|
1
|
+
# @selectwin/kit
|
|
2
|
+
|
|
3
|
+
Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
|
|
4
|
+
gráficos) e tokens CSS, theme-aware (light/dark).
|
|
5
|
+
|
|
6
|
+
Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
|
|
7
|
+
não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
|
|
8
|
+
|
|
9
|
+
## Uso
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm i @selectwin/kit
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
|
|
17
|
+
import { SelectButton, SelectSection } from '@selectwin/kit';
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Idioma (0.1.187): os textos próprios do kit ("Página anterior", "Mais filtros", "Fechar"…) e os números que ele
|
|
21
|
+
formata saem em português. Para inglês, envolva o app no `SelectLocaleProvider`:
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { SelectLocaleProvider } from '@selectwin/kit';
|
|
25
|
+
|
|
26
|
+
<SelectLocaleProvider locale="en">{app}</SelectLocaleProvider>; // 'pt-BR' | 'en'
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
A prop de texto do componente (`confirmLabel`, `noun`…) sempre ganha do dicionário.
|
|
30
|
+
|
|
31
|
+
Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
|
|
32
|
+
**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
|
|
33
|
+
|
|
34
|
+
## Build
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npm run build # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SelectAction } from './SelectActionList';
|
|
2
|
-
export declare function SelectActionMenu({ items, label, disabled, }: {
|
|
2
|
+
export declare function SelectActionMenu({ items, label: labelProp, disabled, }: {
|
|
3
3
|
items: SelectAction[];
|
|
4
4
|
label?: string;
|
|
5
5
|
disabled?: boolean;
|
|
@@ -42,7 +42,7 @@ export interface SelectAssistantProps {
|
|
|
42
42
|
inputLabel?: string;
|
|
43
43
|
className?: string;
|
|
44
44
|
}
|
|
45
|
-
export declare function SelectAssistant({ open, onOpenChange, icon, title, subtitle, launcherLabel, badge, children, scrollKey, suggestions, onSuggestion, onSend, placeholder, disabled, typing, headerAction, anchor, closeLabel, sendLabel, inputLabel, className, }: SelectAssistantProps): import("react").JSX.Element;
|
|
45
|
+
export declare function SelectAssistant({ open, onOpenChange, icon, title, subtitle, launcherLabel, badge, children, scrollKey, suggestions, onSuggestion, onSend, placeholder, disabled, typing, headerAction, anchor, closeLabel: closeLabelProp, sendLabel: sendLabelProp, inputLabel: inputLabelProp, className, }: SelectAssistantProps): import("react").JSX.Element;
|
|
46
46
|
export interface SelectChatMessageProps {
|
|
47
47
|
/** Quem fala: o assistente (à esquerda) ou a pessoa (à direita). */
|
|
48
48
|
from: 'assistant' | 'user';
|
package/dist/SelectBackLink.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
export declare function SelectConfirmModal({ open, onClose, onConfirm, title, children, confirmLabel, cancelLabel, destructive, loading, theme, }: {
|
|
2
|
+
export declare function SelectConfirmModal({ open, onClose, onConfirm, title, children, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, destructive, loading, theme, }: {
|
|
3
3
|
open: boolean;
|
|
4
4
|
onClose: () => void;
|
|
5
5
|
onConfirm: () => void;
|
|
@@ -18,7 +18,7 @@ export interface SelectDatePickerProps {
|
|
|
18
18
|
onCancel?: () => void;
|
|
19
19
|
/** CSS custom property name to drive the accent (default --select-accent). */
|
|
20
20
|
accentVar?: string;
|
|
21
|
-
/** Calendar/labels language + date order
|
|
21
|
+
/** Calendar/labels language + date order. Default: the `SelectLocaleProvider` locale when there is one, else 'en-US'. */
|
|
22
22
|
locale?: SelectDateLocale;
|
|
23
23
|
/** Show the From/To time pills (default true). Off for daily ranges. */
|
|
24
24
|
showTime?: boolean;
|
|
@@ -2,7 +2,7 @@ import { ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
|
2
2
|
export interface SelectFilterDef {
|
|
3
3
|
key: string;
|
|
4
4
|
label: string;
|
|
5
|
-
type: 'text' | 'select' | 'date';
|
|
5
|
+
type: 'text' | 'select' | 'multiselect' | 'date';
|
|
6
6
|
placeholder?: string;
|
|
7
7
|
options?: {
|
|
8
8
|
label: string;
|
|
@@ -22,6 +22,12 @@ export interface SelectFilterDef {
|
|
|
22
22
|
*/
|
|
23
23
|
error?: string;
|
|
24
24
|
}
|
|
25
|
+
/** Os valores de uma faceta `multiselect` (`"email,sms"` → `["email", "sms"]`); vazio → `[]`. */
|
|
26
|
+
export declare function splitFilterValues(value: string | undefined): string[];
|
|
27
|
+
/** O inverso: a lista vira o valor da faceta, na ordem das opções quando elas são dadas. */
|
|
28
|
+
export declare function joinFilterValues(values: readonly string[], options?: ReadonlyArray<{
|
|
29
|
+
value: string;
|
|
30
|
+
}>): string;
|
|
25
31
|
type SelectFilterBarOwnProps = {
|
|
26
32
|
filters: SelectFilterDef[];
|
|
27
33
|
values: Record<string, string>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
export declare function SelectFormModal({ open, onClose, onSubmit, title, subtitle, children, submitLabel, cancelLabel, submitting, submitDisabled, submitVariant, error, size, theme, }: {
|
|
2
|
+
export declare function SelectFormModal({ open, onClose, onSubmit, title, subtitle, children, submitLabel: submitLabelProp, cancelLabel: cancelLabelProp, submitting, submitDisabled, submitVariant, error, size, theme, }: {
|
|
3
3
|
open: boolean;
|
|
4
4
|
onClose: () => void;
|
|
5
5
|
onSubmit: () => void;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type SelectLocaleCode = 'pt-BR' | 'en';
|
|
3
|
+
export interface SelectKitMessages {
|
|
4
|
+
common: {
|
|
5
|
+
close: string;
|
|
6
|
+
cancel: string;
|
|
7
|
+
confirm: string;
|
|
8
|
+
save: string;
|
|
9
|
+
copy: string;
|
|
10
|
+
copied: string;
|
|
11
|
+
open: string;
|
|
12
|
+
back: string;
|
|
13
|
+
actions: string;
|
|
14
|
+
moreInfo: string;
|
|
15
|
+
search: string;
|
|
16
|
+
searchPlaceholder: string;
|
|
17
|
+
selectPlaceholder: string;
|
|
18
|
+
loading: string;
|
|
19
|
+
nothingFound: string;
|
|
20
|
+
noResults: string;
|
|
21
|
+
remove: (what: string) => string;
|
|
22
|
+
showPassword: string;
|
|
23
|
+
hidePassword: string;
|
|
24
|
+
notifications: string;
|
|
25
|
+
needsAttention: string;
|
|
26
|
+
};
|
|
27
|
+
pagination: {
|
|
28
|
+
label: string;
|
|
29
|
+
previous: string;
|
|
30
|
+
next: string;
|
|
31
|
+
page: (n: string) => string;
|
|
32
|
+
pageOf: (n: string, count: string) => string;
|
|
33
|
+
range: (start: string, end: string, total: string, noun: string) => string;
|
|
34
|
+
count: (total: string, noun: string) => string;
|
|
35
|
+
noun: string;
|
|
36
|
+
perPage: (n: string) => string;
|
|
37
|
+
};
|
|
38
|
+
filterBar: {
|
|
39
|
+
moreFilters: string;
|
|
40
|
+
clear: string;
|
|
41
|
+
clearAll: string;
|
|
42
|
+
clearSearch: string;
|
|
43
|
+
searchOption: string;
|
|
44
|
+
removeFilter: (label: string) => string;
|
|
45
|
+
};
|
|
46
|
+
dataTable: {
|
|
47
|
+
columns: string;
|
|
48
|
+
resetWidths: string;
|
|
49
|
+
};
|
|
50
|
+
dns: {
|
|
51
|
+
label: string;
|
|
52
|
+
type: string;
|
|
53
|
+
name: string;
|
|
54
|
+
value: string;
|
|
55
|
+
};
|
|
56
|
+
copyable: {
|
|
57
|
+
copyCode: string;
|
|
58
|
+
copyId: string;
|
|
59
|
+
};
|
|
60
|
+
assistant: {
|
|
61
|
+
send: string;
|
|
62
|
+
input: string;
|
|
63
|
+
typing: string;
|
|
64
|
+
};
|
|
65
|
+
chipInput: {
|
|
66
|
+
limit: (max: string) => string;
|
|
67
|
+
};
|
|
68
|
+
factStrip: Record<'done' | 'todo' | 'wait' | 'critical', string>;
|
|
69
|
+
setupGuide: Record<'done' | 'todo' | 'next' | 'skipped' | 'waiting', string> & {
|
|
70
|
+
progressLabel: string;
|
|
71
|
+
progress: (done: string, total: string) => string;
|
|
72
|
+
};
|
|
73
|
+
sideNav: {
|
|
74
|
+
pending: (hint: string) => string;
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
/** Os dicionários do kit, para quem quer conferir ou montar um texto do mesmo jeito. */
|
|
78
|
+
export declare const selectKitMessages: Readonly<Record<SelectLocaleCode, SelectKitMessages>>;
|
|
79
|
+
export declare function SelectLocaleProvider({ locale, children }: {
|
|
80
|
+
locale: SelectLocaleCode;
|
|
81
|
+
children: ReactNode;
|
|
82
|
+
}): import("react").JSX.Element;
|
|
83
|
+
/** A língua em vigor (sem provider, português). */
|
|
84
|
+
export declare function useSelectLocale(): SelectLocaleCode;
|
|
85
|
+
/** A língua do provider, ou `null` sem provider — para o componente que tem padrão próprio (o `SelectDatePicker`). */
|
|
86
|
+
export declare function useSelectLocaleIfSet(): SelectLocaleCode | null;
|
|
87
|
+
/** O dicionário da língua em vigor. */
|
|
88
|
+
export declare function useSelectMessages(): SelectKitMessages;
|
|
89
|
+
/** A etiqueta BCP 47 do `Intl` para a língua do kit. */
|
|
90
|
+
export declare function selectIntlLocale(locale: SelectLocaleCode): string;
|
|
91
|
+
/** Um inteiro como a língua escreve ("2.127" / "2,127"). */
|
|
92
|
+
export declare function formatSelectNumber(n: number, locale?: SelectLocaleCode): string;
|
package/dist/SelectModal.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
export declare function SelectModal({ open, onClose, eyebrow, title, subtitle, badge, children, footer, aside, size, showClose, noise, dividedHeader, backdrop, theme, placement, headerAction, flush, }: {
|
|
2
|
+
export declare function SelectModal({ open, onClose, eyebrow, title, subtitle, badge, children, footer, aside, size, showClose, noise, dividedHeader, backdrop, theme, placement, headerAction, flush, dismissible, }: {
|
|
3
3
|
open: boolean;
|
|
4
4
|
onClose: () => void;
|
|
5
5
|
/** Uma linha de contexto acima do título ("Passo a passo · ponto 1 de 5"). */
|
|
@@ -34,4 +34,9 @@ export declare function SelectModal({ open, onClose, eyebrow, title, subtitle, b
|
|
|
34
34
|
* `SelectFactStrip` já vem com o dela.
|
|
35
35
|
*/
|
|
36
36
|
flush?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* 0.1.187: `false` = só os botões do próprio diálogo fecham — o Esc e o clique fora não fazem nada, e o ✕ some
|
|
39
|
+
* (o segredo que aparece uma vez: quem lê confirma que guardou).
|
|
40
|
+
*/
|
|
41
|
+
dismissible?: boolean;
|
|
37
42
|
}): import('react').ReactPortal | null;
|
|
@@ -17,7 +17,7 @@ export interface SelectPaginationProps {
|
|
|
17
17
|
onNext?: () => void;
|
|
18
18
|
/** Jump directly to a 1-based page. Required for numbered buttons. */
|
|
19
19
|
onPage?: (page: number) => void;
|
|
20
|
-
/** Noun for the count label, e.g. "produtos". Defaults to "resultados". */
|
|
20
|
+
/** Noun for the count label, e.g. "produtos". Defaults to "resultados" ("results" in English, `SelectLocaleProvider`). */
|
|
21
21
|
noun?: string;
|
|
22
22
|
}
|
|
23
23
|
export declare const SelectPagination: import('react').ForwardRefExoticComponent<SelectPaginationProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, keyof SelectPaginationProps> & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -6,7 +6,7 @@ export interface SelectRowAction {
|
|
|
6
6
|
destructive?: boolean;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
}
|
|
9
|
-
export declare function SelectRowActions({ actions, label }: {
|
|
9
|
+
export declare function SelectRowActions({ actions, label: labelProp }: {
|
|
10
10
|
actions: SelectRowAction[];
|
|
11
11
|
label?: string;
|
|
12
12
|
}): import("react").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
export declare function SelectSearchMenu({ search, onSearchChange, searchPlaceholder, status, footer, width, autoFocus, selectFirstOnEnter, listMaxHeight, children, }: {
|
|
2
|
+
export declare function SelectSearchMenu({ search, onSearchChange, searchPlaceholder: searchPlaceholderProp, status, footer, width, autoFocus, selectFirstOnEnter, listMaxHeight, children, }: {
|
|
3
3
|
search: string;
|
|
4
4
|
onSearchChange: (value: string) => void;
|
|
5
5
|
searchPlaceholder?: string;
|
package/dist/icons.d.ts
CHANGED
|
@@ -202,6 +202,8 @@ export declare function GiftIcon(): import("react").JSX.Element;
|
|
|
202
202
|
export declare function HeadsetIcon(): import("react").JSX.Element;
|
|
203
203
|
/** WhatsApp no traço da casa (não a marca colorida) — o canal da mensagem, o selo de atendimento. */
|
|
204
204
|
export declare function WhatsAppIcon(): import("react").JSX.Element;
|
|
205
|
+
/** SMS (Iconsax message-text, 0.1.187) — o canal SMS, ao lado do `MailIcon` e do `WhatsAppIcon` (o selo do canal). */
|
|
206
|
+
export declare function SmsIcon(): import("react").JSX.Element;
|
|
205
207
|
/** Imagem (Iconsax gallery) — o bloco de imagem de um e-mail, a foto de um produto. */
|
|
206
208
|
export declare function ImageIcon(): import("react").JSX.Element;
|
|
207
209
|
/** Alça de arrastar (6 pontos) — a de toda lista e grade que se reordena. Preenchido: pontos não têm traço. */
|
package/dist/index.d.ts
CHANGED
|
@@ -123,7 +123,9 @@ export { SelectOfferPrice } from './SelectOfferPrice';
|
|
|
123
123
|
export { SelectRatingQuote } from './SelectRatingQuote';
|
|
124
124
|
export { SelectMarkStack } from './SelectMarkStack';
|
|
125
125
|
export { SelectPagination } from './SelectPagination';
|
|
126
|
-
export { SelectFilterBar } from './SelectFilterBar';
|
|
126
|
+
export { SelectFilterBar, splitFilterValues, joinFilterValues } from './SelectFilterBar';
|
|
127
|
+
export { SelectLocaleProvider, useSelectLocale, useSelectMessages, selectKitMessages, selectIntlLocale, formatSelectNumber, } from './SelectLocale';
|
|
128
|
+
export type { SelectLocaleCode, SelectKitMessages } from './SelectLocale';
|
|
127
129
|
export { SelectTagSelect } from './SelectTagSelect';
|
|
128
130
|
export { SelectSurface } from './SelectSurface';
|
|
129
131
|
export { SelectToastProvider, useSelectToast } from './SelectToast';
|