@motor-hero/ui-kit 0.17.0 → 0.19.0
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 +41 -0
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/row-actions-menu.d.ts +1 -1
- package/dist/components/row-actions-menu.d.ts.map +1 -1
- package/dist/components/theme-provider.d.ts +3 -1
- package/dist/components/theme-provider.d.ts.map +1 -1
- package/dist/components/user-menu.d.ts +1 -1
- package/dist/components/user-menu.d.ts.map +1 -1
- package/dist/hooks/use-is-desktop.d.ts +7 -0
- package/dist/hooks/use-is-desktop.d.ts.map +1 -0
- package/dist/index.cjs +302 -96
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +295 -91
- package/dist/index.js.map +1 -1
- package/dist/lib/tenant-theme.d.ts +15 -0
- package/dist/lib/tenant-theme.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/combobox.tsx +1 -20
- package/src/components/row-actions-menu.tsx +113 -36
- package/src/components/theme-provider.tsx +18 -8
- package/src/components/user-menu.tsx +157 -48
- package/src/hooks/use-is-desktop.ts +26 -0
- package/src/index.ts +3 -0
- package/src/lib/tenant-theme.ts +42 -0
package/README.md
CHANGED
|
@@ -43,6 +43,47 @@ function App() {
|
|
|
43
43
|
}
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
+
## Temas e Multi-tenant
|
|
47
|
+
|
|
48
|
+
Por padrão o kit usa o tema **zinc** (claro/escuro), alternado pelo `ThemeProvider`.
|
|
49
|
+
Para servir várias marcas (tenants) no mesmo app, passe a prop opcional `tenantTheme`.
|
|
50
|
+
**Sem ela, nada muda** — apps existentes seguem com o tema padrão.
|
|
51
|
+
|
|
52
|
+
Pense em dois eixos independentes: a **marca** (qual tenant) e o **modo** (claro/escuro).
|
|
53
|
+
Só o grupo de cores da **marca** é por tenant; neutros (`background`, `card`, `border`…) e
|
|
54
|
+
status (`destructive`, `success`) são compartilhados e respondem só ao modo.
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { ThemeProvider } from "@motor-hero/ui-kit"
|
|
58
|
+
import type { TenantTheme } from "@motor-hero/ui-kit"
|
|
59
|
+
|
|
60
|
+
const tenantTheme: TenantTheme = {
|
|
61
|
+
light: {
|
|
62
|
+
primary: "hsl(145 63% 32%)",
|
|
63
|
+
primaryForeground: "hsl(0 0% 100%)",
|
|
64
|
+
secondary: "hsl(0 0% 96%)",
|
|
65
|
+
secondaryForeground: "hsl(0 0% 12%)",
|
|
66
|
+
accent: "hsl(45 95% 55%)",
|
|
67
|
+
accentForeground: "hsl(0 0% 8%)",
|
|
68
|
+
},
|
|
69
|
+
dark: { primary: "hsl(145 50% 55%)" }, // opcional e parcial: só o que muda no escuro
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
<ThemeProvider defaultTheme="dark" tenantTheme={tenantTheme}>
|
|
73
|
+
<App />
|
|
74
|
+
</ThemeProvider>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
**Regras:**
|
|
78
|
+
|
|
79
|
+
- Mínimo por tenant: `primary` + `primaryForeground` (2 cores). A marca completa tem três cores — `primary`, `secondary` e `accent` — cada uma com seu foreground.
|
|
80
|
+
- `dark` é opcional e parcial — informe apenas os tokens que mudam; o resto herda do `light`.
|
|
81
|
+
- Valores são qualquer cor CSS válida (`hsl(...)`, `#hex`, `oklch(...)`); prefira `hsl(...)`.
|
|
82
|
+
- Os `*Foreground` são responsabilidade sua — garanta contraste AA, o kit não deriva.
|
|
83
|
+
- As cores entram como estilo inline no `<html>`, vencendo o `.dark` e qualquer `@theme` do app (sem conflito de cascata). Memoize o objeto `tenantTheme`.
|
|
84
|
+
|
|
85
|
+
Guia completo em [ui.motorhero.com.br](https://ui.motorhero.com.br) → **Temas Multi-tenant**.
|
|
86
|
+
|
|
46
87
|
## Desenvolvimento
|
|
47
88
|
|
|
48
89
|
```bash
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA4B,EAC5B,iBAA+B,EAC/B,YAA6C,EAC7C,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,GACpC,EAAE,aAAa,qBAgGf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row-actions-menu.d.ts","sourceRoot":"","sources":["../../src/components/row-actions-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"row-actions-menu.d.ts","sourceRoot":"","sources":["../../src/components/row-actions-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,SAAS,EAAE,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,UAAU,CAAA;CACxB;AAWD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAgB,EAChB,KAAa,EACb,KAAe,EACf,UAA8B,GAC/B,EAAE,mBAAmB,sCAyHrB"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
+
import { type TenantTheme } from "../lib/tenant-theme";
|
|
1
2
|
type Theme = "dark" | "light" | "system";
|
|
2
3
|
type ThemeProviderProps = {
|
|
3
4
|
children: React.ReactNode;
|
|
4
5
|
defaultTheme?: Theme;
|
|
5
6
|
storageKey?: string;
|
|
7
|
+
tenantTheme?: TenantTheme;
|
|
6
8
|
};
|
|
7
9
|
type ThemeProviderState = {
|
|
8
10
|
theme: Theme;
|
|
9
11
|
setTheme: (theme: Theme) => void;
|
|
10
12
|
};
|
|
11
|
-
export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react").JSX.Element;
|
|
13
|
+
export declare function ThemeProvider({ children, defaultTheme, storageKey, tenantTheme, ...props }: ThemeProviderProps): import("react").JSX.Element;
|
|
12
14
|
export declare function useTheme(): ThemeProviderState;
|
|
13
15
|
export type { Theme, ThemeProviderProps, ThemeProviderState };
|
|
14
16
|
//# sourceMappingURL=theme-provider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAExE,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC,CAAA;AASD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAAuB,EACvB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAsCpB;AAED,wBAAgB,QAAQ,uBAMvB;AAED,YAAY,EAAE,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../src/components/user-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../src/components/user-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,MAAM,WAAW,OAAO;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;CACnC;AAeD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAU,EACV,QAAQ,EACR,WAAoB,EACpB,UAA8B,EAC9B,KAAa,GACd,EAAE,aAAa,+BA6Kf"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Retorna `true` no desktop (>= 640px, breakpoint `sm`) e `false` no mobile.
|
|
3
|
+
* Usado para alternar Popover/DropdownMenu (desktop) por Drawer/bottom sheet
|
|
4
|
+
* (mobile) em componentes responsivos como Combobox e os menus de ação.
|
|
5
|
+
*/
|
|
6
|
+
export declare function useIsDesktop(): boolean;
|
|
7
|
+
//# sourceMappingURL=use-is-desktop.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-is-desktop.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-desktop.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAgBtC"}
|