@kbach/react-native 1.0.0-beta.12 → 1.0.0-beta.14

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.
@@ -2,11 +2,11 @@ import {
2
2
  Fragment,
3
3
  jsx,
4
4
  jsxs
5
- } from "./chunk-OJIFXMLD.mjs";
6
- import "./chunk-3LNPXJEW.mjs";
5
+ } from "./chunk-6QFPLRSP.mjs";
6
+ import "./chunk-ZB2UU6EO.mjs";
7
7
  import {
8
8
  createJsxDEV
9
- } from "./chunk-4DQXTAM3.mjs";
9
+ } from "./chunk-H57O3BJO.mjs";
10
10
  import "./chunk-RBJXE32L.mjs";
11
11
  import "./chunk-HK6PDJJK.mjs";
12
12
 
@@ -425,6 +425,10 @@ function notify() {
425
425
  function getGlobalDarkMode() {
426
426
  return isDark;
427
427
  }
428
+ function subscribeGlobalDarkMode(listener) {
429
+ listeners.add(listener);
430
+ return () => listeners.delete(listener);
431
+ }
428
432
 
429
433
  // src/jsxRuntimeCore.ts
430
434
  function makeElement(isStaticChildren, type, props, key) {
@@ -444,6 +448,21 @@ var DARK_MODIFIER_RE = /(^|\s)dark:/;
444
448
  function darkModeKeySuffix(classStrRaw) {
445
449
  return DARK_MODIFIER_RE.test(classStrRaw) ? `:kb-dark-${getGlobalDarkMode()}` : "";
446
450
  }
451
+ function DarkAwareElement({
452
+ hostType,
453
+ hostRest,
454
+ classStrRaw,
455
+ userStyle,
456
+ resolveStyle: resolveStyle2,
457
+ elementKey,
458
+ isStaticChildren
459
+ }) {
460
+ (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode);
461
+ const finalStyle = hostType === import_react_native2.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
462
+ const suffix = darkModeKeySuffix(classStrRaw);
463
+ const finalKey = suffix ? `${elementKey ?? ""}${suffix}` : elementKey;
464
+ return makeElement(isStaticChildren, hostType, { ...hostRest, style: finalStyle }, finalKey);
465
+ }
447
466
  function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
448
467
  if (type === null || typeof type === "symbol" || !rawProps) {
449
468
  return makeElement(isStaticChildren, type, rawProps ?? {}, key);
@@ -452,10 +471,15 @@ function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
452
471
  if (typeof classStrRaw !== "string") {
453
472
  return makeElement(isStaticChildren, type, rawProps, key);
454
473
  }
474
+ if (DARK_MODIFIER_RE.test(classStrRaw)) {
475
+ return (0, import_jsx_runtime.jsx)(
476
+ DarkAwareElement,
477
+ { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle: resolveStyle2, elementKey: key, isStaticChildren },
478
+ key
479
+ );
480
+ }
455
481
  const finalStyle = type === import_react_native2.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
456
- const suffix = darkModeKeySuffix(classStrRaw);
457
- const finalKey = suffix ? `${key ?? ""}${suffix}` : key;
458
- return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, finalKey);
482
+ return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
459
483
  }
460
484
  function createJsxFunctions(resolveStyle2) {
461
485
  function jsx2(type, props, key) {
@@ -1192,8 +1216,8 @@ function borderValue(theme, parsed) {
1192
1216
  if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
1193
1217
  return [decl("border-style", value)];
1194
1218
  }
1195
- const hex = lookupHex(theme, value);
1196
- return hex === null ? null : [decl("border-color", hex)];
1219
+ const color = colorValue(theme, parsed);
1220
+ return color === null ? null : [decl("border-color", color)];
1197
1221
  }
1198
1222
  function borderSideValue(theme, parsed, sideProperty) {
1199
1223
  const value = parsed.value;
@@ -1206,8 +1230,8 @@ function borderSideValue(theme, parsed, sideProperty) {
1206
1230
  if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
1207
1231
  return [decl(`${sideProperty}-style`, value)];
1208
1232
  }
1209
- const hex = lookupHex(theme, value);
1210
- return hex === null ? null : [decl(`${sideProperty}-color`, hex)];
1233
+ const color = colorValue(theme, parsed);
1234
+ return color === null ? null : [decl(`${sideProperty}-color`, color)];
1211
1235
  }
1212
1236
  function borderAxisValue(theme, parsed, sideA, sideB) {
1213
1237
  const value = parsed.value;
@@ -1220,8 +1244,8 @@ function borderAxisValue(theme, parsed, sideA, sideB) {
1220
1244
  if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
1221
1245
  return [decl(`${sideA}-style`, value), decl(`${sideB}-style`, value)];
1222
1246
  }
1223
- const hex = lookupHex(theme, value);
1224
- return hex === null ? null : [decl(`${sideA}-color`, hex), decl(`${sideB}-color`, hex)];
1247
+ const color = colorValue(theme, parsed);
1248
+ return color === null ? null : [decl(`${sideA}-color`, color), decl(`${sideB}-color`, color)];
1225
1249
  }
1226
1250
  function radiusProperties(side) {
1227
1251
  switch (side) {
@@ -1283,8 +1307,8 @@ function outlineValue(theme, parsed) {
1283
1307
  const w = outlineWidthValue(value);
1284
1308
  if (w !== null) return [decl("outline-width", w)];
1285
1309
  if (OUTLINE_STYLES.includes(value)) return [decl("outline-style", value)];
1286
- const hex = lookupHex(theme, value);
1287
- return hex === null ? null : [decl("outline-color", hex)];
1310
+ const color = colorValue(theme, parsed);
1311
+ return color === null ? null : [decl("outline-color", color)];
1288
1312
  }
1289
1313
  function outlineOffsetValue(parsed) {
1290
1314
  const value = parsed.value;
@@ -1320,7 +1344,7 @@ function ringValue(theme, parsed) {
1320
1344
  const w = ringWidth(value);
1321
1345
  if (w !== null) return [decl("--kb-ring-width", w), decl("box-shadow", RING_BOX_SHADOW)];
1322
1346
  }
1323
- const color = parsed.isArbitrary ? value : lookupHex(theme, value);
1347
+ const color = colorValue(theme, parsed);
1324
1348
  if (color === null) return null;
1325
1349
  return [decl("--kb-ring-color", color), decl("box-shadow", RING_BOX_SHADOW)];
1326
1350
  }
@@ -1331,7 +1355,7 @@ function ringOffsetValue(theme, parsed) {
1331
1355
  const w = ringWidth(value);
1332
1356
  if (w !== null) return [decl("--kb-ring-offset-width", w), decl("box-shadow", RING_BOX_SHADOW)];
1333
1357
  }
1334
- const color = parsed.isArbitrary ? value : lookupHex(theme, value);
1358
+ const color = colorValue(theme, parsed);
1335
1359
  if (color === null) return null;
1336
1360
  return [decl("--kb-ring-offset-color", color), decl("box-shadow", RING_BOX_SHADOW)];
1337
1361
  }
@@ -1,11 +1,11 @@
1
1
  import {
2
2
  jsx,
3
3
  jsxs
4
- } from "./chunk-7AIH5MXY.mjs";
5
- import "./chunk-MGXMALPC.mjs";
4
+ } from "./chunk-WT6WH54F.mjs";
5
+ import "./chunk-JMNJCPGK.mjs";
6
6
  import {
7
7
  Fragment
8
- } from "./chunk-4DQXTAM3.mjs";
8
+ } from "./chunk-H57O3BJO.mjs";
9
9
  import "./chunk-RBJXE32L.mjs";
10
10
  import "./chunk-HK6PDJJK.mjs";
11
11
  export {