@kbach/react 1.0.0-beta.19 → 1.0.0-beta.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.d.mts +17 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.js +3 -1
- package/dist/index.mjs +3 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -120,6 +120,22 @@ type ColorsAPI = {
|
|
|
120
120
|
* `rgb(var(--kb-color-x))` mode-aware references.
|
|
121
121
|
*/
|
|
122
122
|
readonly alpha: (color: string, opacity?: number) => string;
|
|
123
|
+
/**
|
|
124
|
+
* Same lookup dot/bracket access does (`colors.get('brand')` ===
|
|
125
|
+
* `colors.brand`), typed as plain `string` instead of `string |
|
|
126
|
+
* ColorScale` — use this whenever the result goes somewhere that expects
|
|
127
|
+
* a real `string` and hits a type error otherwise. The wider union on
|
|
128
|
+
* every OTHER property here isn't a bug: a flat custom color (`surface`)
|
|
129
|
+
* and a shade-family prefix (`blue`) are served by the exact same
|
|
130
|
+
* object, and TypeScript has no way to statically know which one any
|
|
131
|
+
* given key names — `kbach.config.js`'s colors are plain runtime JS, not
|
|
132
|
+
* a type declaration this package could inspect ahead of time. A name
|
|
133
|
+
* with no matching theme entry falls back to the name itself,
|
|
134
|
+
* unresolved — the same "not a known color name -> literal value"
|
|
135
|
+
* convention `kbach.config.js`'s own color aliasing already uses (see
|
|
136
|
+
* `config.ts`'s `resolveColorEntry`), never an error.
|
|
137
|
+
*/
|
|
138
|
+
readonly get: (name: string) => string;
|
|
123
139
|
};
|
|
124
140
|
/**
|
|
125
141
|
* Resolved theme colors as real values — for anywhere you need an actual
|
|
@@ -141,6 +157,7 @@ type ColorsAPI = {
|
|
|
141
157
|
* colors.blue['6/50']; // same, at 50% opacity
|
|
142
158
|
* colors.surface; // "rgb(var(--kb-color-surface))" if defined as { light, dark }
|
|
143
159
|
* colors.alpha(colors.surface, 50); // "rgba(var(--kb-color-surface), 0.5)"
|
|
160
|
+
* colors.get('surface'); // same value as colors.surface, typed as plain `string`
|
|
144
161
|
* ```
|
|
145
162
|
*/
|
|
146
163
|
declare function useColors(): ColorsAPI;
|
package/dist/index.d.ts
CHANGED
|
@@ -120,6 +120,22 @@ type ColorsAPI = {
|
|
|
120
120
|
* `rgb(var(--kb-color-x))` mode-aware references.
|
|
121
121
|
*/
|
|
122
122
|
readonly alpha: (color: string, opacity?: number) => string;
|
|
123
|
+
/**
|
|
124
|
+
* Same lookup dot/bracket access does (`colors.get('brand')` ===
|
|
125
|
+
* `colors.brand`), typed as plain `string` instead of `string |
|
|
126
|
+
* ColorScale` — use this whenever the result goes somewhere that expects
|
|
127
|
+
* a real `string` and hits a type error otherwise. The wider union on
|
|
128
|
+
* every OTHER property here isn't a bug: a flat custom color (`surface`)
|
|
129
|
+
* and a shade-family prefix (`blue`) are served by the exact same
|
|
130
|
+
* object, and TypeScript has no way to statically know which one any
|
|
131
|
+
* given key names — `kbach.config.js`'s colors are plain runtime JS, not
|
|
132
|
+
* a type declaration this package could inspect ahead of time. A name
|
|
133
|
+
* with no matching theme entry falls back to the name itself,
|
|
134
|
+
* unresolved — the same "not a known color name -> literal value"
|
|
135
|
+
* convention `kbach.config.js`'s own color aliasing already uses (see
|
|
136
|
+
* `config.ts`'s `resolveColorEntry`), never an error.
|
|
137
|
+
*/
|
|
138
|
+
readonly get: (name: string) => string;
|
|
123
139
|
};
|
|
124
140
|
/**
|
|
125
141
|
* Resolved theme colors as real values — for anywhere you need an actual
|
|
@@ -141,6 +157,7 @@ type ColorsAPI = {
|
|
|
141
157
|
* colors.blue['6/50']; // same, at 50% opacity
|
|
142
158
|
* colors.surface; // "rgb(var(--kb-color-surface))" if defined as { light, dark }
|
|
143
159
|
* colors.alpha(colors.surface, 50); // "rgba(var(--kb-color-surface), 0.5)"
|
|
160
|
+
* colors.get('surface'); // same value as colors.surface, typed as plain `string`
|
|
144
161
|
* ```
|
|
145
162
|
*/
|
|
146
163
|
declare function useColors(): ColorsAPI;
|
package/dist/index.js
CHANGED
|
@@ -929,11 +929,13 @@ function makeColorsProxy(theme, isDark2) {
|
|
|
929
929
|
}
|
|
930
930
|
});
|
|
931
931
|
}
|
|
932
|
-
|
|
932
|
+
const get = (name) => resolveNamed(name) ?? name;
|
|
933
|
+
return new Proxy({ alpha, get }, {
|
|
933
934
|
get(_, prop) {
|
|
934
935
|
const key = String(prop);
|
|
935
936
|
if (key === "then") return void 0;
|
|
936
937
|
if (key === "alpha") return alpha;
|
|
938
|
+
if (key === "get") return get;
|
|
937
939
|
const direct = resolveNamed(key);
|
|
938
940
|
if (direct !== void 0) return direct;
|
|
939
941
|
if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
|
package/dist/index.mjs
CHANGED
|
@@ -118,11 +118,13 @@ function makeColorsProxy(theme, isDark) {
|
|
|
118
118
|
}
|
|
119
119
|
});
|
|
120
120
|
}
|
|
121
|
-
|
|
121
|
+
const get = (name) => resolveNamed(name) ?? name;
|
|
122
|
+
return new Proxy({ alpha, get }, {
|
|
122
123
|
get(_, prop) {
|
|
123
124
|
const key = String(prop);
|
|
124
125
|
if (key === "then") return void 0;
|
|
125
126
|
if (key === "alpha") return alpha;
|
|
127
|
+
if (key === "get") return get;
|
|
126
128
|
const direct = resolveNamed(key);
|
|
127
129
|
if (direct !== void 0) return direct;
|
|
128
130
|
if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kbach/react",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.20",
|
|
4
4
|
"description": "A utility-first styling engine for React, powered by a real Rust/WASM core — Tailwind CSS v4 feature parity with Kbach's own color palette.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|