@motor-hero/ui-kit 0.19.0 → 0.20.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/dist/components/theme-provider.d.ts +3 -3
- package/dist/components/theme-provider.d.ts.map +1 -1
- package/dist/hooks/use-company-subdomain.d.ts +10 -0
- package/dist/hooks/use-company-subdomain.d.ts.map +1 -0
- package/dist/index.cjs +76 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +60 -16
- package/dist/index.js.map +1 -1
- package/dist/lib/company-theme.d.ts +15 -0
- package/dist/lib/company-theme.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/theme-provider.tsx +5 -5
- package/src/hooks/use-company-subdomain.ts +51 -0
- package/src/index.ts +7 -2
- package/src/lib/company-theme.ts +54 -0
- package/dist/lib/tenant-theme.d.ts +0 -15
- package/dist/lib/tenant-theme.d.ts.map +0 -1
- package/src/lib/tenant-theme.ts +0 -42
package/src/index.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
// Theme
|
|
2
2
|
export { ThemeProvider, useTheme } from "./components/theme-provider"
|
|
3
3
|
export type { Theme, ThemeProviderProps, ThemeProviderState } from "./components/theme-provider"
|
|
4
|
-
export {
|
|
5
|
-
export type {
|
|
4
|
+
export { applyCompanyTheme } from "./lib/company-theme"
|
|
5
|
+
export type { CompanyTheme, CompanyThemeTokens } from "./lib/company-theme"
|
|
6
|
+
export { useCompanySubdomain, getSubdomain } from "./hooks/use-company-subdomain"
|
|
7
|
+
export type {
|
|
8
|
+
UseCompanySubdomainOptions,
|
|
9
|
+
UseCompanySubdomainResult,
|
|
10
|
+
} from "./hooks/use-company-subdomain"
|
|
6
11
|
|
|
7
12
|
// Components
|
|
8
13
|
export { ModeToggle } from "./components/mode-toggle"
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
export type CompanyThemeTokens = {
|
|
2
|
+
primary?: string | null
|
|
3
|
+
primaryForeground?: string | null
|
|
4
|
+
secondary?: string | null
|
|
5
|
+
secondaryForeground?: string | null
|
|
6
|
+
accent?: string | null
|
|
7
|
+
accentForeground?: string | null
|
|
8
|
+
ring?: string | null
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export type CompanyTheme = {
|
|
12
|
+
light: CompanyThemeTokens
|
|
13
|
+
dark?: Partial<CompanyThemeTokens>
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const VAR_MAP: Record<keyof CompanyThemeTokens, string> = {
|
|
17
|
+
primary: "--color-primary",
|
|
18
|
+
primaryForeground: "--color-primary-foreground",
|
|
19
|
+
secondary: "--color-secondary",
|
|
20
|
+
secondaryForeground: "--color-secondary-foreground",
|
|
21
|
+
accent: "--color-accent",
|
|
22
|
+
accentForeground: "--color-accent-foreground",
|
|
23
|
+
ring: "--color-ring",
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// A dark token that is null/undefined means "no override" — inherit the light
|
|
27
|
+
// value. The API serializes unset *_dark columns as explicit null, so spreading
|
|
28
|
+
// the raw dark object would clobber the inherited light values; strip them first.
|
|
29
|
+
function definedTokens(
|
|
30
|
+
tokens: Partial<CompanyThemeTokens> | undefined
|
|
31
|
+
): Partial<CompanyThemeTokens> {
|
|
32
|
+
if (!tokens) return {}
|
|
33
|
+
return Object.fromEntries(
|
|
34
|
+
Object.entries(tokens).filter(([, value]) => value != null)
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export function applyCompanyTheme(
|
|
39
|
+
root: HTMLElement,
|
|
40
|
+
companyTheme: CompanyTheme | undefined,
|
|
41
|
+
mode: "light" | "dark"
|
|
42
|
+
) {
|
|
43
|
+
const tokens: CompanyThemeTokens = companyTheme
|
|
44
|
+
? mode === "dark"
|
|
45
|
+
? { ...companyTheme.light, ...definedTokens(companyTheme.dark) }
|
|
46
|
+
: companyTheme.light
|
|
47
|
+
: {}
|
|
48
|
+
|
|
49
|
+
for (const key of Object.keys(VAR_MAP) as (keyof CompanyThemeTokens)[]) {
|
|
50
|
+
const value = tokens[key]
|
|
51
|
+
if (value) root.style.setProperty(VAR_MAP[key], value)
|
|
52
|
+
else root.style.removeProperty(VAR_MAP[key])
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export type TenantTokenSet = {
|
|
2
|
-
primary?: string;
|
|
3
|
-
primaryForeground?: string;
|
|
4
|
-
secondary?: string;
|
|
5
|
-
secondaryForeground?: string;
|
|
6
|
-
accent?: string;
|
|
7
|
-
accentForeground?: string;
|
|
8
|
-
ring?: string;
|
|
9
|
-
};
|
|
10
|
-
export type TenantTheme = {
|
|
11
|
-
light: TenantTokenSet;
|
|
12
|
-
dark?: Partial<TenantTokenSet>;
|
|
13
|
-
};
|
|
14
|
-
export declare function applyTenantTheme(root: HTMLElement, tenantTheme: TenantTheme | undefined, mode: "light" | "dark"): void;
|
|
15
|
-
//# sourceMappingURL=tenant-theme.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tenant-theme.d.ts","sourceRoot":"","sources":["../../src/lib/tenant-theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,cAAc,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;CAC/B,CAAA;AAYD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EACjB,WAAW,EAAE,WAAW,GAAG,SAAS,EACpC,IAAI,EAAE,OAAO,GAAG,MAAM,QAavB"}
|
package/src/lib/tenant-theme.ts
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
export type TenantTokenSet = {
|
|
2
|
-
primary?: string
|
|
3
|
-
primaryForeground?: string
|
|
4
|
-
secondary?: string
|
|
5
|
-
secondaryForeground?: string
|
|
6
|
-
accent?: string
|
|
7
|
-
accentForeground?: string
|
|
8
|
-
ring?: string
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export type TenantTheme = {
|
|
12
|
-
light: TenantTokenSet
|
|
13
|
-
dark?: Partial<TenantTokenSet>
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
const VAR_MAP: Record<keyof TenantTokenSet, string> = {
|
|
17
|
-
primary: "--color-primary",
|
|
18
|
-
primaryForeground: "--color-primary-foreground",
|
|
19
|
-
secondary: "--color-secondary",
|
|
20
|
-
secondaryForeground: "--color-secondary-foreground",
|
|
21
|
-
accent: "--color-accent",
|
|
22
|
-
accentForeground: "--color-accent-foreground",
|
|
23
|
-
ring: "--color-ring",
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export function applyTenantTheme(
|
|
27
|
-
root: HTMLElement,
|
|
28
|
-
tenantTheme: TenantTheme | undefined,
|
|
29
|
-
mode: "light" | "dark"
|
|
30
|
-
) {
|
|
31
|
-
const tokens: TenantTokenSet = tenantTheme
|
|
32
|
-
? mode === "dark"
|
|
33
|
-
? { ...tenantTheme.light, ...tenantTheme.dark }
|
|
34
|
-
: tenantTheme.light
|
|
35
|
-
: {}
|
|
36
|
-
|
|
37
|
-
for (const key of Object.keys(VAR_MAP) as (keyof TenantTokenSet)[]) {
|
|
38
|
-
const value = tokens[key]
|
|
39
|
-
if (value) root.style.setProperty(VAR_MAP[key], value)
|
|
40
|
-
else root.style.removeProperty(VAR_MAP[key])
|
|
41
|
-
}
|
|
42
|
-
}
|