tailwind-styled-v4 5.1.18 → 5.1.20
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/index.browser.mjs +8 -4
- package/dist/index.browser.mjs.map +1 -1
- package/dist/index.d.mts +71 -48
- package/dist/index.d.ts +71 -48
- package/dist/index.js +31 -451
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +31 -442
- package/dist/index.mjs.map +1 -1
- package/dist/runtime.d.mts +1 -1
- package/dist/runtime.d.ts +1 -1
- package/dist/runtime.js +2 -0
- package/dist/runtime.js.map +1 -1
- package/dist/runtime.mjs +1 -0
- package/dist/runtime.mjs.map +1 -1
- package/dist/theme.d.mts +23 -76
- package/dist/theme.d.ts +23 -76
- package/dist/theme.js +4 -218
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +3 -205
- package/dist/theme.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,214 +1,18 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
1
|
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
4
2
|
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
5
3
|
}) : x)(function(x) {
|
|
6
4
|
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
7
5
|
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
8
6
|
});
|
|
9
|
-
var __esm = (fn, res) => function __init() {
|
|
10
|
-
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
// node_modules/tsup/assets/esm_shims.js
|
|
14
|
-
import path from "path";
|
|
15
|
-
import { fileURLToPath } from "url";
|
|
16
|
-
var getFilename, __filename;
|
|
17
|
-
var init_esm_shims = __esm({
|
|
18
|
-
"node_modules/tsup/assets/esm_shims.js"() {
|
|
19
|
-
"use strict";
|
|
20
|
-
getFilename = () => fileURLToPath(import.meta.url);
|
|
21
|
-
__filename = /* @__PURE__ */ getFilename();
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
// packages/domain/shared/src/native-resolution.ts
|
|
26
|
-
import { createRequire } from "module";
|
|
27
|
-
import * as fs from "fs";
|
|
28
|
-
import * as path2 from "path";
|
|
29
|
-
function _safeCreateRequire() {
|
|
30
|
-
if (typeof import.meta !== "undefined" && import.meta.url && !import.meta.url.includes("unknown")) {
|
|
31
|
-
return createRequire(import.meta.url);
|
|
32
|
-
}
|
|
33
|
-
if (typeof __filename !== "undefined") {
|
|
34
|
-
return createRequire(__filename);
|
|
35
|
-
}
|
|
36
|
-
return createRequire(new URL(`file://${process.cwd()}/`).href);
|
|
37
|
-
}
|
|
38
|
-
function platformKey() {
|
|
39
|
-
if (isBrowser) return "browser";
|
|
40
|
-
return `${process.platform}-${process.arch}`;
|
|
41
|
-
}
|
|
42
|
-
function resolveNativeBinary(runtimeDir) {
|
|
43
|
-
const platform = platformKey();
|
|
44
|
-
const tried = [];
|
|
45
|
-
if (isBrowser) {
|
|
46
|
-
return { path: null, source: "not-found", platform, tried: ["not available in browser"] };
|
|
47
|
-
}
|
|
48
|
-
if (process.env.TWS_NO_NATIVE === "1" || process.env.TWS_DISABLE_NATIVE === "1") {
|
|
49
|
-
return { path: null, source: "not-found", platform, tried: [] };
|
|
50
|
-
}
|
|
51
|
-
const envPath = process.env.TW_NATIVE_PATH?.trim();
|
|
52
|
-
if (envPath) {
|
|
53
|
-
if (fs.existsSync(envPath)) {
|
|
54
|
-
return { path: envPath, source: "env", platform, tried };
|
|
55
|
-
}
|
|
56
|
-
tried.push(`env:${envPath} (not found)`);
|
|
57
|
-
}
|
|
58
|
-
const prebuiltPkgs = PLATFORM_MAP[platform] ?? [];
|
|
59
|
-
for (const pkg of prebuiltPkgs) {
|
|
60
|
-
try {
|
|
61
|
-
const candidate = _require.resolve(`${pkg}/tailwind_styled_parser.node`);
|
|
62
|
-
if (fs.existsSync(candidate)) {
|
|
63
|
-
return { path: candidate, source: "prebuilt", platform, tried };
|
|
64
|
-
}
|
|
65
|
-
tried.push(`prebuilt:${pkg} (resolved but missing)`);
|
|
66
|
-
} catch {
|
|
67
|
-
tried.push(`prebuilt:${pkg} (not installed)`);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
const napiPlatform = platform === "linux-x64" ? "linux-x64-gnu" : platform === "linux-arm64" ? "linux-arm64-gnu" : platform;
|
|
71
|
-
const BINARY_NAMES_SELF = ["tailwind-styled-native", "tailwind_styled_parser"];
|
|
72
|
-
if (runtimeDir) {
|
|
73
|
-
for (const depth of ["..", path2.join("..", ".."), path2.join("..", "..", "..")]) {
|
|
74
|
-
const pkgRoot = path2.resolve(runtimeDir, depth);
|
|
75
|
-
for (const bin of BINARY_NAMES_SELF) {
|
|
76
|
-
for (const suffix of ["", `.${platform}`, `.${napiPlatform}`]) {
|
|
77
|
-
const candidate = path2.resolve(pkgRoot, "native", `${bin}${suffix}.node`);
|
|
78
|
-
tried.push(`self-bundled:${candidate}`);
|
|
79
|
-
if (fs.existsSync(candidate)) {
|
|
80
|
-
return { path: candidate, source: "prebuilt", platform, tried };
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
const cwd = process.cwd();
|
|
87
|
-
const base = runtimeDir ?? cwd;
|
|
88
|
-
const BINARY_NAMES = ["tailwind-styled-native", "tailwind_styled_parser"];
|
|
89
|
-
const localCandidates = [];
|
|
90
|
-
for (const bin of BINARY_NAMES) {
|
|
91
|
-
localCandidates.push(path2.resolve(base, `${bin}.node`));
|
|
92
|
-
localCandidates.push(path2.resolve(base, "..", `${bin}.node`));
|
|
93
|
-
localCandidates.push(path2.resolve(base, `${bin}.${platform}.node`));
|
|
94
|
-
localCandidates.push(path2.resolve(base, `${bin}.${napiPlatform}.node`));
|
|
95
|
-
}
|
|
96
|
-
for (const startDir of [cwd, base]) {
|
|
97
|
-
let dir = startDir;
|
|
98
|
-
for (let i = 0; i < 6; i++) {
|
|
99
|
-
const nativeDir = path2.resolve(dir, "native");
|
|
100
|
-
for (const bin of BINARY_NAMES) {
|
|
101
|
-
localCandidates.push(path2.resolve(nativeDir, `${bin}.node`));
|
|
102
|
-
localCandidates.push(path2.resolve(nativeDir, `${bin}.${platform}.node`));
|
|
103
|
-
localCandidates.push(path2.resolve(nativeDir, `${bin}.${napiPlatform}.node`));
|
|
104
|
-
localCandidates.push(path2.resolve(nativeDir, "target", "release", `${bin}.node`));
|
|
105
|
-
}
|
|
106
|
-
const parent = path2.resolve(dir, "..");
|
|
107
|
-
if (parent === dir) break;
|
|
108
|
-
dir = parent;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
for (const candidate of localCandidates) {
|
|
112
|
-
tried.push(`local:${candidate}`);
|
|
113
|
-
if (fs.existsSync(candidate)) {
|
|
114
|
-
return { path: candidate, source: "local", platform, tried };
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
return { path: null, source: "not-found", platform, tried };
|
|
118
|
-
}
|
|
119
|
-
var isBrowser, _require, PLATFORM_MAP;
|
|
120
|
-
var init_native_resolution = __esm({
|
|
121
|
-
"packages/domain/shared/src/native-resolution.ts"() {
|
|
122
|
-
"use strict";
|
|
123
|
-
init_esm_shims();
|
|
124
|
-
isBrowser = typeof window !== "undefined" || typeof document !== "undefined";
|
|
125
|
-
_require = _safeCreateRequire();
|
|
126
|
-
PLATFORM_MAP = {
|
|
127
|
-
"linux-x64": ["@tailwind-styled/native-linux-x64-gnu", "@tailwind-styled/native-linux-x64"],
|
|
128
|
-
"linux-arm64": ["@tailwind-styled/native-linux-arm64-gnu", "@tailwind-styled/native-linux-arm64"],
|
|
129
|
-
"darwin-x64": ["@tailwind-styled/native-darwin-x64"],
|
|
130
|
-
"darwin-arm64": ["@tailwind-styled/native-darwin-arm64"],
|
|
131
|
-
"win32-x64": ["@tailwind-styled/native-win32-x64-msvc", "@tailwind-styled/native-win32-x64"],
|
|
132
|
-
"win32-arm64": ["@tailwind-styled/native-win32-arm64-msvc", "@tailwind-styled/native-win32-arm64"]
|
|
133
|
-
};
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
|
|
137
|
-
// packages/domain/shared/src/index.ts
|
|
138
|
-
import { createHash } from "crypto";
|
|
139
|
-
import fs2 from "fs";
|
|
140
|
-
import path3 from "path";
|
|
141
|
-
import { fileURLToPath as fileURLToPath2 } from "url";
|
|
142
|
-
import { createRequire as createRequire2 } from "module";
|
|
143
|
-
var _require2;
|
|
144
|
-
var init_src = __esm({
|
|
145
|
-
"packages/domain/shared/src/index.ts"() {
|
|
146
|
-
"use strict";
|
|
147
|
-
init_esm_shims();
|
|
148
|
-
init_native_resolution();
|
|
149
|
-
_require2 = createRequire2(
|
|
150
|
-
typeof __filename !== "undefined" ? `file://${__filename}` : import.meta.url ?? "file://unknown"
|
|
151
|
-
);
|
|
152
|
-
}
|
|
153
|
-
});
|
|
154
|
-
|
|
155
|
-
// src/umbrella/index.ts
|
|
156
|
-
init_esm_shims();
|
|
157
7
|
|
|
158
8
|
// packages/domain/core/src/twProxy.ts
|
|
159
|
-
init_esm_shims();
|
|
160
9
|
import React2 from "react";
|
|
161
10
|
|
|
162
11
|
// packages/domain/core/src/createComponent.ts
|
|
163
|
-
init_esm_shims();
|
|
164
12
|
import React from "react";
|
|
165
13
|
|
|
166
|
-
// packages/domain/core/src/
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
// packages/domain/core/src/native.ts
|
|
170
|
-
init_esm_shims();
|
|
171
|
-
init_src();
|
|
172
|
-
import { createRequire as createRequire3 } from "module";
|
|
173
|
-
import { dirname } from "path";
|
|
174
|
-
import { fileURLToPath as fileURLToPath3 } from "url";
|
|
175
|
-
var isBrowser2 = typeof window !== "undefined" || typeof document !== "undefined";
|
|
176
|
-
var NATIVE_UNAVAILABLE_MESSAGE = "[tailwind-styled/core] Native binding is required but not available.\nPlease ensure you have run: npm run build:rust";
|
|
177
|
-
var _nodeRequire = createRequire3(
|
|
178
|
-
typeof __filename !== "undefined" ? `file://${__filename}` : typeof import.meta !== "undefined" && import.meta.url ? import.meta.url : "file://unknown"
|
|
179
|
-
);
|
|
180
|
-
var _loadNative = (path4) => _nodeRequire(path4);
|
|
181
|
-
var nativeBinding = null;
|
|
182
|
-
var bindingLoadAttempted = false;
|
|
183
|
-
var getBinding = () => {
|
|
184
|
-
if (isBrowser2) {
|
|
185
|
-
return null;
|
|
186
|
-
}
|
|
187
|
-
if (nativeBinding) return nativeBinding;
|
|
188
|
-
if (bindingLoadAttempted) {
|
|
189
|
-
throw new Error(NATIVE_UNAVAILABLE_MESSAGE);
|
|
190
|
-
}
|
|
191
|
-
bindingLoadAttempted = true;
|
|
192
|
-
try {
|
|
193
|
-
const runtimeDir = dirname(
|
|
194
|
-
typeof __filename !== "undefined" ? __filename : typeof import.meta !== "undefined" && import.meta.url ? fileURLToPath3(import.meta.url) : process.cwd()
|
|
195
|
-
);
|
|
196
|
-
const result = resolveNativeBinary(runtimeDir);
|
|
197
|
-
if (result.path && result.path.endsWith(".node")) {
|
|
198
|
-
const mod = _loadNative(result.path);
|
|
199
|
-
if (mod?.batchSplitClasses) {
|
|
200
|
-
nativeBinding = mod;
|
|
201
|
-
return nativeBinding;
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
throw new Error(`${NATIVE_UNAVAILABLE_MESSAGE}
|
|
205
|
-
|
|
206
|
-
Tried: ${result.tried.join("\n")}`);
|
|
207
|
-
} catch (err) {
|
|
208
|
-
throw err instanceof Error ? err : new Error(String(err));
|
|
209
|
-
}
|
|
210
|
-
};
|
|
211
|
-
var getNativeBinding = getBinding;
|
|
14
|
+
// packages/domain/core/src/native.browser.ts
|
|
15
|
+
var getNativeBinding = () => null;
|
|
212
16
|
|
|
213
17
|
// packages/domain/core/src/containerQuery.ts
|
|
214
18
|
var CONTAINER_BREAKPOINTS = {
|
|
@@ -335,11 +139,7 @@ function getContainerRegistry() {
|
|
|
335
139
|
return containerRegistry;
|
|
336
140
|
}
|
|
337
141
|
|
|
338
|
-
// packages/domain/core/src/merge.ts
|
|
339
|
-
init_esm_shims();
|
|
340
|
-
|
|
341
142
|
// packages/domain/core/src/mergeFallback.ts
|
|
342
|
-
init_esm_shims();
|
|
343
143
|
var TEXT_SIZE_SUFFIXES = /* @__PURE__ */ new Set([
|
|
344
144
|
"xs",
|
|
345
145
|
"sm",
|
|
@@ -655,7 +455,6 @@ function mergeWithRules(rules, ...classLists) {
|
|
|
655
455
|
}
|
|
656
456
|
|
|
657
457
|
// packages/domain/core/src/parseTemplateFallback.ts
|
|
658
|
-
init_esm_shims();
|
|
659
458
|
var SUB_RE = /(?:\[([a-zA-Z][a-zA-Z0-9_-]*)\]|([a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
|
|
660
459
|
var COMMENT_RE = /\/\/[^\n]*/g;
|
|
661
460
|
function collapseSpaces(s) {
|
|
@@ -686,7 +485,6 @@ function parseTemplateJs(raw) {
|
|
|
686
485
|
}
|
|
687
486
|
|
|
688
487
|
// packages/domain/core/src/stateEngine.ts
|
|
689
|
-
init_esm_shims();
|
|
690
488
|
var stateRegistry = /* @__PURE__ */ new Map();
|
|
691
489
|
if (typeof window !== "undefined") {
|
|
692
490
|
window.__TW_STATE_REGISTRY__ = stateRegistry;
|
|
@@ -886,16 +684,19 @@ function parseSubKey(key) {
|
|
|
886
684
|
function createSubComponentAccessor(parentDisplayName, name, classes, tag = "span", asChild = false) {
|
|
887
685
|
const SubComponent = ({
|
|
888
686
|
children,
|
|
889
|
-
className
|
|
687
|
+
className,
|
|
688
|
+
...rest
|
|
689
|
+
// tangkap semua native HTML props (href, onClick, src, alt, dll)
|
|
890
690
|
}) => {
|
|
891
691
|
const mergedClass = className ? `${classes} ${className}` : classes;
|
|
892
692
|
if (asChild && React.isValidElement(children)) {
|
|
893
693
|
const child = React.Children.only(children);
|
|
894
694
|
return React.cloneElement(child, {
|
|
695
|
+
...rest,
|
|
895
696
|
className: child.props.className ? `${mergedClass} ${child.props.className}` : mergedClass
|
|
896
697
|
});
|
|
897
698
|
}
|
|
898
|
-
return React.createElement(tag, { className: mergedClass }, children);
|
|
699
|
+
return React.createElement(tag, { ...rest, className: mergedClass }, children);
|
|
899
700
|
};
|
|
900
701
|
SubComponent.displayName = `${parentDisplayName}[${name}]`;
|
|
901
702
|
return SubComponent;
|
|
@@ -1171,8 +972,9 @@ function wrapWithSubProxy(component, tagLabel) {
|
|
|
1171
972
|
if (SKIP_PROXY_KEYS.has(prop)) return value;
|
|
1172
973
|
const Fallback = ({
|
|
1173
974
|
children,
|
|
1174
|
-
className
|
|
1175
|
-
|
|
975
|
+
className,
|
|
976
|
+
...rest
|
|
977
|
+
}) => React.createElement("span", { ...rest, className }, children);
|
|
1176
978
|
Fallback.displayName = `tw.${tagLabel}.${prop}(fallback)`;
|
|
1177
979
|
return Fallback;
|
|
1178
980
|
}
|
|
@@ -1361,7 +1163,6 @@ var tw = Object.assign(twCallable, tagFactories, {
|
|
|
1361
1163
|
});
|
|
1362
1164
|
|
|
1363
1165
|
// packages/domain/core/src/cv.ts
|
|
1364
|
-
init_esm_shims();
|
|
1365
1166
|
var __generatedRegistry = {};
|
|
1366
1167
|
function registerVariantTable(componentId, table) {
|
|
1367
1168
|
__generatedRegistry[componentId] = table;
|
|
@@ -1497,7 +1298,6 @@ function cv(config, componentId) {
|
|
|
1497
1298
|
}
|
|
1498
1299
|
|
|
1499
1300
|
// packages/domain/core/src/cx.ts
|
|
1500
|
-
init_esm_shims();
|
|
1501
1301
|
function cn(...inputs) {
|
|
1502
1302
|
const strings = [];
|
|
1503
1303
|
for (const item of inputs) {
|
|
@@ -1534,7 +1334,6 @@ function cx(...inputs) {
|
|
|
1534
1334
|
var cxm = cx;
|
|
1535
1335
|
|
|
1536
1336
|
// packages/domain/core/src/styledSystem.ts
|
|
1537
|
-
init_esm_shims();
|
|
1538
1337
|
function tokenVarName(prefix, group, name) {
|
|
1539
1338
|
return `--${prefix}-${group}-${name}`;
|
|
1540
1339
|
}
|
|
@@ -1543,8 +1342,8 @@ function tokenVarRef(prefix, group, name) {
|
|
|
1543
1342
|
}
|
|
1544
1343
|
function resolveTokenRef(tokens, prefix, value) {
|
|
1545
1344
|
if (value.startsWith("token:")) {
|
|
1546
|
-
const
|
|
1547
|
-
const [group, name] =
|
|
1345
|
+
const path = value.slice(6);
|
|
1346
|
+
const [group, name] = path.split(".");
|
|
1548
1347
|
if (group && name && tokens[group]?.[name] !== void 0) {
|
|
1549
1348
|
return tokenVarRef(prefix, group, name);
|
|
1550
1349
|
}
|
|
@@ -1659,17 +1458,17 @@ function createStyledSystem(config) {
|
|
|
1659
1458
|
return createComponent(runtimeTag, merged);
|
|
1660
1459
|
};
|
|
1661
1460
|
}
|
|
1662
|
-
function token(
|
|
1663
|
-
const [group, name] =
|
|
1664
|
-
if (!group || !name) return
|
|
1461
|
+
function token(path) {
|
|
1462
|
+
const [group, name] = path.split(".");
|
|
1463
|
+
if (!group || !name) return path;
|
|
1665
1464
|
return tokenVarRef(prefix, group, name);
|
|
1666
1465
|
}
|
|
1667
|
-
function rawToken(
|
|
1668
|
-
const [group, name] =
|
|
1466
|
+
function rawToken(path) {
|
|
1467
|
+
const [group, name] = path.split(".");
|
|
1669
1468
|
if (!group || !name) return void 0;
|
|
1670
1469
|
return tokens[group]?.[name];
|
|
1671
1470
|
}
|
|
1672
|
-
function
|
|
1471
|
+
function setTokens(updates) {
|
|
1673
1472
|
if (typeof document === "undefined") return;
|
|
1674
1473
|
const styleId = `__tw-sys-tokens-${prefix}`;
|
|
1675
1474
|
const style = document.getElementById(styleId) ?? (() => {
|
|
@@ -1693,14 +1492,13 @@ function createStyledSystem(config) {
|
|
|
1693
1492
|
return Object.assign(factories, {
|
|
1694
1493
|
token,
|
|
1695
1494
|
rawToken,
|
|
1696
|
-
setTokens
|
|
1495
|
+
setTokens,
|
|
1697
1496
|
getConfig,
|
|
1698
1497
|
tokens
|
|
1699
1498
|
});
|
|
1700
1499
|
}
|
|
1701
1500
|
|
|
1702
1501
|
// packages/domain/core/src/styled.ts
|
|
1703
|
-
init_esm_shims();
|
|
1704
1502
|
function resolveVariantClass(options, props) {
|
|
1705
1503
|
const out = [];
|
|
1706
1504
|
const variants = options.variants ?? {};
|
|
@@ -1732,7 +1530,6 @@ function styled(options) {
|
|
|
1732
1530
|
}
|
|
1733
1531
|
|
|
1734
1532
|
// packages/domain/core/src/twTheme.ts
|
|
1735
|
-
init_esm_shims();
|
|
1736
1533
|
function cssVar(varName, fallback) {
|
|
1737
1534
|
const name = varName.startsWith("--") ? varName : `--${varName}`;
|
|
1738
1535
|
return fallback ? `var(${name}, ${fallback})` : `var(${name})`;
|
|
@@ -1797,204 +1594,8 @@ var v4Tokens = {
|
|
|
1797
1594
|
fontMono: twVar("font", "font-mono")
|
|
1798
1595
|
};
|
|
1799
1596
|
|
|
1800
|
-
// packages/domain/core/src/liveTokenEngine.ts
|
|
1801
|
-
init_esm_shims();
|
|
1802
|
-
|
|
1803
|
-
// packages/domain/theme/src/liveTokens.ts
|
|
1804
|
-
init_esm_shims();
|
|
1805
|
-
|
|
1806
|
-
// packages/domain/theme/src/liveTokenEngine.ts
|
|
1807
|
-
init_esm_shims();
|
|
1808
|
-
import React3 from "react";
|
|
1809
|
-
var TOKEN_ENGINE_KEY = "__TW_TOKEN_ENGINE__";
|
|
1810
|
-
function tokenVar(name) {
|
|
1811
|
-
const normalized = name.replace(/[^a-zA-Z0-9-]/g, "-").toLowerCase();
|
|
1812
|
-
return `--tw-token-${normalized}`;
|
|
1813
|
-
}
|
|
1814
|
-
function tokenRef(name) {
|
|
1815
|
-
return `var(${tokenVar(name)})`;
|
|
1816
|
-
}
|
|
1817
|
-
var buildRootCss = (tokens) => {
|
|
1818
|
-
const vars = Object.entries(tokens).map(([name, value]) => ` ${tokenVar(name)}: ${value};`).join("\n");
|
|
1819
|
-
return `:root {
|
|
1820
|
-
${vars}
|
|
1821
|
-
}`;
|
|
1822
|
-
};
|
|
1823
|
-
var createLiveTokenEngine = () => {
|
|
1824
|
-
const state = {
|
|
1825
|
-
currentTokens: {},
|
|
1826
|
-
styleEl: null,
|
|
1827
|
-
// Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.
|
|
1828
|
-
// Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang
|
|
1829
|
-
// dipanggil di module top-level akan langsung document.documentElement
|
|
1830
|
-
// .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum
|
|
1831
|
-
// React selesai hydrate — sehingga <html> versi live DOM beda dengan
|
|
1832
|
-
// <html> yang di-render server (yang gak pernah nyentuh `document`).
|
|
1833
|
-
hydrated: false
|
|
1834
|
-
};
|
|
1835
|
-
const subscribers = /* @__PURE__ */ new Set();
|
|
1836
|
-
const syncStyleEl = () => {
|
|
1837
|
-
if (!state.hydrated || typeof document === "undefined") return;
|
|
1838
|
-
if (!state.styleEl) {
|
|
1839
|
-
const styleEl = document.createElement("style");
|
|
1840
|
-
styleEl.id = "tw-live-tokens";
|
|
1841
|
-
styleEl.setAttribute("data-tw-tokens", "true");
|
|
1842
|
-
document.head.appendChild(styleEl);
|
|
1843
|
-
state.styleEl = styleEl;
|
|
1844
|
-
}
|
|
1845
|
-
state.styleEl.textContent = buildRootCss(state.currentTokens);
|
|
1846
|
-
};
|
|
1847
|
-
const notifySubscribers = () => {
|
|
1848
|
-
const snapshot = { ...state.currentTokens };
|
|
1849
|
-
for (const subscriber of subscribers) {
|
|
1850
|
-
try {
|
|
1851
|
-
subscriber(snapshot);
|
|
1852
|
-
} catch {
|
|
1853
|
-
}
|
|
1854
|
-
}
|
|
1855
|
-
};
|
|
1856
|
-
const setToken2 = (name, value) => {
|
|
1857
|
-
state.currentTokens = { ...state.currentTokens, [name]: value };
|
|
1858
|
-
if (state.hydrated && typeof document !== "undefined") {
|
|
1859
|
-
document.documentElement.style.setProperty(tokenVar(name), value);
|
|
1860
|
-
}
|
|
1861
|
-
syncStyleEl();
|
|
1862
|
-
notifySubscribers();
|
|
1863
|
-
};
|
|
1864
|
-
const setTokens2 = (tokens) => {
|
|
1865
|
-
state.currentTokens = { ...state.currentTokens, ...tokens };
|
|
1866
|
-
if (state.hydrated && typeof document !== "undefined") {
|
|
1867
|
-
const root = document.documentElement;
|
|
1868
|
-
for (const [name, value] of Object.entries(tokens)) {
|
|
1869
|
-
root.style.setProperty(tokenVar(name), value);
|
|
1870
|
-
}
|
|
1871
|
-
}
|
|
1872
|
-
syncStyleEl();
|
|
1873
|
-
notifySubscribers();
|
|
1874
|
-
};
|
|
1875
|
-
const applyTokenSet2 = (tokens) => {
|
|
1876
|
-
if (state.hydrated && typeof document !== "undefined") {
|
|
1877
|
-
const root = document.documentElement;
|
|
1878
|
-
for (const name of Object.keys(state.currentTokens)) {
|
|
1879
|
-
if (!(name in tokens)) {
|
|
1880
|
-
root.style.removeProperty(tokenVar(name));
|
|
1881
|
-
}
|
|
1882
|
-
}
|
|
1883
|
-
for (const [name, value] of Object.entries(tokens)) {
|
|
1884
|
-
root.style.setProperty(tokenVar(name), value);
|
|
1885
|
-
}
|
|
1886
|
-
}
|
|
1887
|
-
state.currentTokens = { ...tokens };
|
|
1888
|
-
syncStyleEl();
|
|
1889
|
-
notifySubscribers();
|
|
1890
|
-
};
|
|
1891
|
-
const markHydrated = () => {
|
|
1892
|
-
if (state.hydrated || typeof document === "undefined") return;
|
|
1893
|
-
state.hydrated = true;
|
|
1894
|
-
const root = document.documentElement;
|
|
1895
|
-
for (const [name, value] of Object.entries(state.currentTokens)) {
|
|
1896
|
-
root.style.setProperty(tokenVar(name), value);
|
|
1897
|
-
}
|
|
1898
|
-
syncStyleEl();
|
|
1899
|
-
};
|
|
1900
|
-
return {
|
|
1901
|
-
markHydrated,
|
|
1902
|
-
liveToken(tokens) {
|
|
1903
|
-
setTokens2(tokens);
|
|
1904
|
-
const vars = {};
|
|
1905
|
-
for (const name of Object.keys(tokens)) {
|
|
1906
|
-
vars[name] = tokenRef(name);
|
|
1907
|
-
}
|
|
1908
|
-
return {
|
|
1909
|
-
vars,
|
|
1910
|
-
get(name) {
|
|
1911
|
-
return state.currentTokens[name];
|
|
1912
|
-
},
|
|
1913
|
-
set(name, value) {
|
|
1914
|
-
setToken2(name, value);
|
|
1915
|
-
},
|
|
1916
|
-
setAll(nextTokens) {
|
|
1917
|
-
setTokens2(nextTokens);
|
|
1918
|
-
},
|
|
1919
|
-
snapshot() {
|
|
1920
|
-
return { ...state.currentTokens };
|
|
1921
|
-
}
|
|
1922
|
-
};
|
|
1923
|
-
},
|
|
1924
|
-
getToken(name) {
|
|
1925
|
-
return state.currentTokens[name];
|
|
1926
|
-
},
|
|
1927
|
-
getTokens() {
|
|
1928
|
-
return { ...state.currentTokens };
|
|
1929
|
-
},
|
|
1930
|
-
setToken: setToken2,
|
|
1931
|
-
setTokens: setTokens2,
|
|
1932
|
-
applyTokenSet: applyTokenSet2,
|
|
1933
|
-
generateTokenCssString() {
|
|
1934
|
-
return buildRootCss(state.currentTokens);
|
|
1935
|
-
},
|
|
1936
|
-
subscribe(fn) {
|
|
1937
|
-
subscribers.add(fn);
|
|
1938
|
-
return () => {
|
|
1939
|
-
subscribers.delete(fn);
|
|
1940
|
-
};
|
|
1941
|
-
}
|
|
1942
|
-
};
|
|
1943
|
-
};
|
|
1944
|
-
var engine = createLiveTokenEngine();
|
|
1945
|
-
function liveToken(tokens) {
|
|
1946
|
-
return engine.liveToken(tokens);
|
|
1947
|
-
}
|
|
1948
|
-
function setToken(name, value) {
|
|
1949
|
-
engine.setToken(name, value);
|
|
1950
|
-
}
|
|
1951
|
-
function setTokens(tokens) {
|
|
1952
|
-
engine.setTokens(tokens);
|
|
1953
|
-
}
|
|
1954
|
-
function applyTokenSet(tokens) {
|
|
1955
|
-
engine.applyTokenSet(tokens);
|
|
1956
|
-
}
|
|
1957
|
-
function getToken(name) {
|
|
1958
|
-
return engine.getToken(name);
|
|
1959
|
-
}
|
|
1960
|
-
function getTokens() {
|
|
1961
|
-
return engine.getTokens();
|
|
1962
|
-
}
|
|
1963
|
-
function subscribeTokens(fn) {
|
|
1964
|
-
return engine.subscribe(fn);
|
|
1965
|
-
}
|
|
1966
|
-
function generateTokenCssString() {
|
|
1967
|
-
return engine.generateTokenCssString();
|
|
1968
|
-
}
|
|
1969
|
-
function createUseTokens() {
|
|
1970
|
-
return function useTokens() {
|
|
1971
|
-
const [tokens, setTokensState] = React3.useState({});
|
|
1972
|
-
React3.useEffect(() => {
|
|
1973
|
-
engine.markHydrated();
|
|
1974
|
-
setTokensState(engine.getTokens());
|
|
1975
|
-
return engine.subscribe((nextTokens) => setTokensState(nextTokens));
|
|
1976
|
-
}, []);
|
|
1977
|
-
return tokens;
|
|
1978
|
-
};
|
|
1979
|
-
}
|
|
1980
|
-
var liveTokenEngine = {
|
|
1981
|
-
getToken: engine.getToken,
|
|
1982
|
-
getTokens: engine.getTokens,
|
|
1983
|
-
setToken: engine.setToken,
|
|
1984
|
-
setTokens: engine.setTokens,
|
|
1985
|
-
applyTokenSet: engine.applyTokenSet,
|
|
1986
|
-
subscribeTokens: engine.subscribe,
|
|
1987
|
-
subscribe: engine.subscribe
|
|
1988
|
-
};
|
|
1989
|
-
var globalTokenEngine = globalThis;
|
|
1990
|
-
globalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine;
|
|
1991
|
-
if (typeof window !== "undefined") {
|
|
1992
|
-
window.__TW_TOKEN_ENGINE__ = liveTokenEngine;
|
|
1993
|
-
}
|
|
1994
|
-
|
|
1995
1597
|
// packages/domain/core/src/registry.ts
|
|
1996
|
-
|
|
1997
|
-
import React4 from "react";
|
|
1598
|
+
import React3 from "react";
|
|
1998
1599
|
var subComponentRegistry = /* @__PURE__ */ new Map();
|
|
1999
1600
|
function registerSubComponent(entry) {
|
|
2000
1601
|
subComponentRegistry.set(entry.name, entry);
|
|
@@ -2015,17 +1616,17 @@ function withSubComponents(Component, subComponentNames) {
|
|
|
2015
1616
|
}
|
|
2016
1617
|
registerSubComponent({
|
|
2017
1618
|
name: "icon",
|
|
2018
|
-
component: ({ children, className }) =>
|
|
1619
|
+
component: ({ children, className }) => React3.createElement("span", { className }, children),
|
|
2019
1620
|
defaultClasses: ""
|
|
2020
1621
|
});
|
|
2021
1622
|
registerSubComponent({
|
|
2022
1623
|
name: "text",
|
|
2023
|
-
component: ({ children, className }) =>
|
|
1624
|
+
component: ({ children, className }) => React3.createElement("span", { className }, children),
|
|
2024
1625
|
defaultClasses: ""
|
|
2025
1626
|
});
|
|
2026
1627
|
registerSubComponent({
|
|
2027
1628
|
name: "badge",
|
|
2028
|
-
component: ({ children, className }) =>
|
|
1629
|
+
component: ({ children, className }) => React3.createElement(
|
|
2029
1630
|
"span",
|
|
2030
1631
|
{
|
|
2031
1632
|
className: `ml-2 px-2 py-0.5 text-xs rounded-full bg-red-500 text-white ${className || ""}`
|
|
@@ -2036,67 +1637,60 @@ registerSubComponent({
|
|
|
2036
1637
|
});
|
|
2037
1638
|
registerSubComponent({
|
|
2038
1639
|
name: "header",
|
|
2039
|
-
component: ({ children, className }) =>
|
|
1640
|
+
component: ({ children, className }) => React3.createElement("header", { className: `font-bold text-lg ${className || ""}` }, children),
|
|
2040
1641
|
defaultClasses: "font-bold text-lg"
|
|
2041
1642
|
});
|
|
2042
1643
|
registerSubComponent({
|
|
2043
1644
|
name: "body",
|
|
2044
|
-
component: ({ children, className }) =>
|
|
1645
|
+
component: ({ children, className }) => React3.createElement("div", { className: `flex-1 ${className || ""}` }, children),
|
|
2045
1646
|
defaultClasses: "flex-1"
|
|
2046
1647
|
});
|
|
2047
1648
|
registerSubComponent({
|
|
2048
1649
|
name: "footer",
|
|
2049
|
-
component: ({ children, className }) =>
|
|
1650
|
+
component: ({ children, className }) => React3.createElement("footer", { className: `border-t pt-4 ${className || ""}` }, children),
|
|
2050
1651
|
defaultClasses: "border-t pt-4"
|
|
2051
1652
|
});
|
|
2052
1653
|
registerSubComponent({
|
|
2053
1654
|
name: "content",
|
|
2054
|
-
component: ({ children, className }) =>
|
|
1655
|
+
component: ({ children, className }) => React3.createElement("div", { className }, children),
|
|
2055
1656
|
defaultClasses: ""
|
|
2056
1657
|
});
|
|
2057
1658
|
registerSubComponent({
|
|
2058
1659
|
name: "title",
|
|
2059
|
-
component: ({ children, className }) =>
|
|
1660
|
+
component: ({ children, className }) => React3.createElement("div", { className: `font-semibold ${className || ""}` }, children),
|
|
2060
1661
|
defaultClasses: "font-semibold"
|
|
2061
1662
|
});
|
|
2062
1663
|
registerSubComponent({
|
|
2063
1664
|
name: "message",
|
|
2064
|
-
component: ({ children, className }) =>
|
|
1665
|
+
component: ({ children, className }) => React3.createElement("div", { className: `text-sm ${className || ""}` }, children),
|
|
2065
1666
|
defaultClasses: "text-sm"
|
|
2066
1667
|
});
|
|
2067
1668
|
registerSubComponent({
|
|
2068
1669
|
name: "close",
|
|
2069
|
-
component: ({ children, className }) =>
|
|
1670
|
+
component: ({ children, className }) => React3.createElement("span", { className: `cursor-pointer ${className || ""}` }, children),
|
|
2070
1671
|
defaultClasses: "cursor-pointer"
|
|
2071
1672
|
});
|
|
2072
1673
|
registerSubComponent({
|
|
2073
1674
|
name: "image",
|
|
2074
|
-
component: ({ className }) =>
|
|
1675
|
+
component: ({ className }) => React3.createElement("img", { className }),
|
|
2075
1676
|
defaultClasses: ""
|
|
2076
1677
|
});
|
|
2077
1678
|
export {
|
|
2078
|
-
applyTokenSet,
|
|
2079
1679
|
cn,
|
|
2080
|
-
tokenRef as containerRef,
|
|
2081
1680
|
createComponent,
|
|
2082
1681
|
createStyledSystem,
|
|
2083
1682
|
createTheme,
|
|
2084
1683
|
createTwMerge,
|
|
2085
|
-
createUseTokens,
|
|
2086
1684
|
cssVar,
|
|
2087
1685
|
cv,
|
|
2088
1686
|
cx,
|
|
2089
1687
|
cxm,
|
|
2090
1688
|
generateContainerCss,
|
|
2091
1689
|
generateStateCss,
|
|
2092
|
-
generateTokenCssString,
|
|
2093
1690
|
getAllSubComponents,
|
|
2094
1691
|
getContainerRegistry,
|
|
2095
1692
|
getStateRegistry,
|
|
2096
1693
|
getSubComponent,
|
|
2097
|
-
getToken,
|
|
2098
|
-
getTokens,
|
|
2099
|
-
liveToken,
|
|
2100
1694
|
mergeWithRules,
|
|
2101
1695
|
processContainer,
|
|
2102
1696
|
processState,
|
|
@@ -2104,13 +1698,8 @@ export {
|
|
|
2104
1698
|
registerVariantTable,
|
|
2105
1699
|
resolveStyledClassName,
|
|
2106
1700
|
server,
|
|
2107
|
-
setToken,
|
|
2108
|
-
setTokens,
|
|
2109
1701
|
styled,
|
|
2110
|
-
subscribeTokens,
|
|
2111
1702
|
t,
|
|
2112
|
-
tokenRef,
|
|
2113
|
-
tokenVar,
|
|
2114
1703
|
tw,
|
|
2115
1704
|
twMerge,
|
|
2116
1705
|
twVar,
|