@kbach/react 0.6.26 → 0.6.29

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.
Files changed (11) hide show
  1. package/dist/{chunk-NWQIZZCW.mjs → chunk-S6AHQ5M6.mjs} +9 -2
  2. package/dist/{chunk-AKX6I7WP.mjs → chunk-TKBIGAR2.mjs} +48 -27
  3. package/dist/core/index.js +48 -27
  4. package/dist/index.mjs +1 -1
  5. package/dist/jsx-dev-runtime.js +8 -1
  6. package/dist/jsx-dev-runtime.mjs +2 -2
  7. package/dist/jsx-runtime.js +8 -1
  8. package/dist/jsx-runtime.mjs +2 -2
  9. package/dist/vite-plugin.js +48 -27
  10. package/dist/vite-plugin.mjs +48 -27
  11. package/package.json +8 -1
package/dist/{chunk-NWQIZZCW.mjs → chunk-S6AHQ5M6.mjs} RENAMED
@@ -24,7 +24,7 @@ import {
24
24
  transformToWebProps,
25
25
  useConditionalGlobalDarkMode,
26
26
  useConditionalWidth
27
- } from "./chunk-AKX6I7WP.mjs";
27
+ } from "./chunk-TKBIGAR2.mjs";
28
28
 
29
29
  // src/jsx-runtime.tsx
30
30
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -110,6 +110,12 @@ function mergeStyle(computed, userStyle) {
110
110
  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
111
111
  return { ...computed, ...userStyle };
112
112
  }
113
+ function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
114
+ if (!webTag || !resolvedBase || resolvedBase.display !== void 0 || !("flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase)) {
115
+ return userStyle;
116
+ }
117
+ return Array.isArray(userStyle) ? [{ display: "flex" }, ...userStyle] : { display: "flex", ...userStyle };
118
+ }
113
119
  function makeElement(isStaticChildren, type, props, key) {
114
120
  return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
115
121
  }
@@ -152,7 +158,8 @@ function processElement(type, rawProps, key, isStaticChildren) {
152
158
  }
153
159
  const config = getConfig();
154
160
  const resolved = !isWeb && __kbachStyles != null ? __kbachStyles : classStr ? resolve(classStr, config.theme, config.darkMode) : {};
155
- const { style: userStyle, ...passProps } = omitConsumed(workingProps);
161
+ const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
162
+ const userStyle = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
156
163
  const { interactive, modeOrResponsive } = bucketMods(resolved);
157
164
  if (interactive) {
158
165
  return _jsx(InteractiveWrapper, {
package/dist/{chunk-AKX6I7WP.mjs → chunk-TKBIGAR2.mjs} RENAMED
@@ -1506,41 +1506,56 @@ function buildStandalone() {
1506
1506
  hidden: { display: "none" },
1507
1507
  contents: web ? { display: "contents" } : null,
1508
1508
  "flow-root": web ? { display: "flow-root" } : null,
1509
- // Flex direction (both web and native)
1510
- "flex-row": { flexDirection: "row" },
1511
- "flex-col": { flexDirection: "column" },
1512
- "flex-row-reverse": { flexDirection: "row-reverse" },
1513
- "flex-col-reverse": { flexDirection: "column-reverse" },
1509
+ // Flex direction, wrap, grow/shrink, and alignment (both web and native) —
1510
+ // every one of these is meaningless without the element also being a flex
1511
+ // container. React Native Views are ALWAYS flex containers by default, so
1512
+ // on native this was already true for free; on web a plain <div> defaults
1513
+ // to display:block, so e.g. `items-center` alone silently did nothing.
1514
+ // Folding `display: 'flex'` into these on web closes that native/web gap —
1515
+ // `flex-1 items-center justify-center` now behaves the same on both,
1516
+ // without also needing a separate `flex` class.
1517
+ "flex-row": { flexDirection: "row", ...web ? { display: "flex" } : {} },
1518
+ "flex-col": { flexDirection: "column", ...web ? { display: "flex" } : {} },
1519
+ "flex-row-reverse": { flexDirection: "row-reverse", ...web ? { display: "flex" } : {} },
1520
+ "flex-col-reverse": { flexDirection: "column-reverse", ...web ? { display: "flex" } : {} },
1514
1521
  // Flex wrap (both)
1515
- "flex-wrap": { flexWrap: "wrap" },
1516
- "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
1517
- "flex-nowrap": { flexWrap: "nowrap" },
1518
- // Flex grow / shrink (both)
1522
+ "flex-wrap": { flexWrap: "wrap", ...web ? { display: "flex" } : {} },
1523
+ "flex-wrap-reverse": { flexWrap: "wrap-reverse", ...web ? { display: "flex" } : {} },
1524
+ "flex-nowrap": { flexWrap: "nowrap", ...web ? { display: "flex" } : {} },
1525
+ // Flex grow / shrink (both) — deliberately NOT folding in display:flex
1526
+ // like the container-level properties above. flex-grow/flex-shrink are
1527
+ // item-level: they already take effect purely via the PARENT already
1528
+ // being a flex container, with zero dependency on this element's own
1529
+ // display. Forcing display:flex here would instead be an unrelated side
1530
+ // effect on THIS element's own children (turning what may be an ordinary
1531
+ // block stack into a flex row) — exactly the kind of surprise the
1532
+ // container-level properties above can never cause, since those are
1533
+ // no-ops without display:flex to begin with.
1519
1534
  "flex-grow": { flexGrow: 1 },
1520
1535
  "flex-grow-0": { flexGrow: 0 },
1521
1536
  "flex-shrink": { flexShrink: 1 },
1522
1537
  "flex-shrink-0": { flexShrink: 0 },
1523
1538
  // Align items (both)
1524
- "items-start": { alignItems: "flex-start" },
1525
- "items-end": { alignItems: "flex-end" },
1526
- "items-center": { alignItems: "center" },
1527
- "items-baseline": { alignItems: "baseline" },
1528
- "items-stretch": { alignItems: "stretch" },
1539
+ "items-start": { alignItems: "flex-start", ...web ? { display: "flex" } : {} },
1540
+ "items-end": { alignItems: "flex-end", ...web ? { display: "flex" } : {} },
1541
+ "items-center": { alignItems: "center", ...web ? { display: "flex" } : {} },
1542
+ "items-baseline": { alignItems: "baseline", ...web ? { display: "flex" } : {} },
1543
+ "items-stretch": { alignItems: "stretch", ...web ? { display: "flex" } : {} },
1529
1544
  // Justify content (both)
1530
- "justify-start": { justifyContent: "flex-start" },
1531
- "justify-end": { justifyContent: "flex-end" },
1532
- "justify-center": { justifyContent: "center" },
1533
- "justify-between": { justifyContent: "space-between" },
1534
- "justify-around": { justifyContent: "space-around" },
1535
- "justify-evenly": { justifyContent: "space-evenly" },
1545
+ "justify-start": { justifyContent: "flex-start", ...web ? { display: "flex" } : {} },
1546
+ "justify-end": { justifyContent: "flex-end", ...web ? { display: "flex" } : {} },
1547
+ "justify-center": { justifyContent: "center", ...web ? { display: "flex" } : {} },
1548
+ "justify-between": { justifyContent: "space-between", ...web ? { display: "flex" } : {} },
1549
+ "justify-around": { justifyContent: "space-around", ...web ? { display: "flex" } : {} },
1550
+ "justify-evenly": { justifyContent: "space-evenly", ...web ? { display: "flex" } : {} },
1536
1551
  // Align content (both)
1537
- "content-start": { alignContent: "flex-start" },
1538
- "content-end": { alignContent: "flex-end" },
1539
- "content-center": { alignContent: "center" },
1540
- "content-between": { alignContent: "space-between" },
1541
- "content-around": { alignContent: "space-around" },
1542
- "content-evenly": { alignContent: "space-evenly" },
1543
- "content-stretch": { alignContent: "stretch" },
1552
+ "content-start": { alignContent: "flex-start", ...web ? { display: "flex" } : {} },
1553
+ "content-end": { alignContent: "flex-end", ...web ? { display: "flex" } : {} },
1554
+ "content-center": { alignContent: "center", ...web ? { display: "flex" } : {} },
1555
+ "content-between": { alignContent: "space-between", ...web ? { display: "flex" } : {} },
1556
+ "content-around": { alignContent: "space-around", ...web ? { display: "flex" } : {} },
1557
+ "content-evenly": { alignContent: "space-evenly", ...web ? { display: "flex" } : {} },
1558
+ "content-stretch": { alignContent: "stretch", ...web ? { display: "flex" } : {} },
1544
1559
  // Align self (both)
1545
1560
  "self-auto": { alignSelf: "auto" },
1546
1561
  "self-start": { alignSelf: "flex-start" },
@@ -2024,6 +2039,12 @@ var layoutResolvers = {
2024
2039
  return map[value] ? { justifySelf: map[value] } : null;
2025
2040
  },
2026
2041
  // ── Flex ───────────────────────────────────────────────────────────────────
2042
+ // flex-1/flex-auto/flex-none/grow/shrink are item-level sizing properties —
2043
+ // deliberately NOT implying display:flex here. See the "Flex grow / shrink"
2044
+ // comment in the standalone table above for why: these already work via the
2045
+ // PARENT's flex context regardless of this element's own display, so
2046
+ // forcing display:flex here would only be a surprising, unrelated side
2047
+ // effect on this element's OWN children.
2027
2048
  flex: ({ value, isArbitrary }, { flex }) => {
2028
2049
  if (!value) return { display: "flex" };
2029
2050
  if (isArbitrary) {
package/dist/core/index.js CHANGED
@@ -1633,41 +1633,56 @@ function buildStandalone() {
1633
1633
  hidden: { display: "none" },
1634
1634
  contents: web ? { display: "contents" } : null,
1635
1635
  "flow-root": web ? { display: "flow-root" } : null,
1636
- // Flex direction (both web and native)
1637
- "flex-row": { flexDirection: "row" },
1638
- "flex-col": { flexDirection: "column" },
1639
- "flex-row-reverse": { flexDirection: "row-reverse" },
1640
- "flex-col-reverse": { flexDirection: "column-reverse" },
1636
+ // Flex direction, wrap, grow/shrink, and alignment (both web and native) —
1637
+ // every one of these is meaningless without the element also being a flex
1638
+ // container. React Native Views are ALWAYS flex containers by default, so
1639
+ // on native this was already true for free; on web a plain <div> defaults
1640
+ // to display:block, so e.g. `items-center` alone silently did nothing.
1641
+ // Folding `display: 'flex'` into these on web closes that native/web gap —
1642
+ // `flex-1 items-center justify-center` now behaves the same on both,
1643
+ // without also needing a separate `flex` class.
1644
+ "flex-row": { flexDirection: "row", ...web ? { display: "flex" } : {} },
1645
+ "flex-col": { flexDirection: "column", ...web ? { display: "flex" } : {} },
1646
+ "flex-row-reverse": { flexDirection: "row-reverse", ...web ? { display: "flex" } : {} },
1647
+ "flex-col-reverse": { flexDirection: "column-reverse", ...web ? { display: "flex" } : {} },
1641
1648
  // Flex wrap (both)
1642
- "flex-wrap": { flexWrap: "wrap" },
1643
- "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
1644
- "flex-nowrap": { flexWrap: "nowrap" },
1645
- // Flex grow / shrink (both)
1649
+ "flex-wrap": { flexWrap: "wrap", ...web ? { display: "flex" } : {} },
1650
+ "flex-wrap-reverse": { flexWrap: "wrap-reverse", ...web ? { display: "flex" } : {} },
1651
+ "flex-nowrap": { flexWrap: "nowrap", ...web ? { display: "flex" } : {} },
1652
+ // Flex grow / shrink (both) — deliberately NOT folding in display:flex
1653
+ // like the container-level properties above. flex-grow/flex-shrink are
1654
+ // item-level: they already take effect purely via the PARENT already
1655
+ // being a flex container, with zero dependency on this element's own
1656
+ // display. Forcing display:flex here would instead be an unrelated side
1657
+ // effect on THIS element's own children (turning what may be an ordinary
1658
+ // block stack into a flex row) — exactly the kind of surprise the
1659
+ // container-level properties above can never cause, since those are
1660
+ // no-ops without display:flex to begin with.
1646
1661
  "flex-grow": { flexGrow: 1 },
1647
1662
  "flex-grow-0": { flexGrow: 0 },
1648
1663
  "flex-shrink": { flexShrink: 1 },
1649
1664
  "flex-shrink-0": { flexShrink: 0 },
1650
1665
  // Align items (both)
1651
- "items-start": { alignItems: "flex-start" },
1652
- "items-end": { alignItems: "flex-end" },
1653
- "items-center": { alignItems: "center" },
1654
- "items-baseline": { alignItems: "baseline" },
1655
- "items-stretch": { alignItems: "stretch" },
1666
+ "items-start": { alignItems: "flex-start", ...web ? { display: "flex" } : {} },
1667
+ "items-end": { alignItems: "flex-end", ...web ? { display: "flex" } : {} },
1668
+ "items-center": { alignItems: "center", ...web ? { display: "flex" } : {} },
1669
+ "items-baseline": { alignItems: "baseline", ...web ? { display: "flex" } : {} },
1670
+ "items-stretch": { alignItems: "stretch", ...web ? { display: "flex" } : {} },
1656
1671
  // Justify content (both)
1657
- "justify-start": { justifyContent: "flex-start" },
1658
- "justify-end": { justifyContent: "flex-end" },
1659
- "justify-center": { justifyContent: "center" },
1660
- "justify-between": { justifyContent: "space-between" },
1661
- "justify-around": { justifyContent: "space-around" },
1662
- "justify-evenly": { justifyContent: "space-evenly" },
1672
+ "justify-start": { justifyContent: "flex-start", ...web ? { display: "flex" } : {} },
1673
+ "justify-end": { justifyContent: "flex-end", ...web ? { display: "flex" } : {} },
1674
+ "justify-center": { justifyContent: "center", ...web ? { display: "flex" } : {} },
1675
+ "justify-between": { justifyContent: "space-between", ...web ? { display: "flex" } : {} },
1676
+ "justify-around": { justifyContent: "space-around", ...web ? { display: "flex" } : {} },
1677
+ "justify-evenly": { justifyContent: "space-evenly", ...web ? { display: "flex" } : {} },
1663
1678
  // Align content (both)
1664
- "content-start": { alignContent: "flex-start" },
1665
- "content-end": { alignContent: "flex-end" },
1666
- "content-center": { alignContent: "center" },
1667
- "content-between": { alignContent: "space-between" },
1668
- "content-around": { alignContent: "space-around" },
1669
- "content-evenly": { alignContent: "space-evenly" },
1670
- "content-stretch": { alignContent: "stretch" },
1679
+ "content-start": { alignContent: "flex-start", ...web ? { display: "flex" } : {} },
1680
+ "content-end": { alignContent: "flex-end", ...web ? { display: "flex" } : {} },
1681
+ "content-center": { alignContent: "center", ...web ? { display: "flex" } : {} },
1682
+ "content-between": { alignContent: "space-between", ...web ? { display: "flex" } : {} },
1683
+ "content-around": { alignContent: "space-around", ...web ? { display: "flex" } : {} },
1684
+ "content-evenly": { alignContent: "space-evenly", ...web ? { display: "flex" } : {} },
1685
+ "content-stretch": { alignContent: "stretch", ...web ? { display: "flex" } : {} },
1671
1686
  // Align self (both)
1672
1687
  "self-auto": { alignSelf: "auto" },
1673
1688
  "self-start": { alignSelf: "flex-start" },
@@ -2151,6 +2166,12 @@ var layoutResolvers = {
2151
2166
  return map[value] ? { justifySelf: map[value] } : null;
2152
2167
  },
2153
2168
  // ── Flex ───────────────────────────────────────────────────────────────────
2169
+ // flex-1/flex-auto/flex-none/grow/shrink are item-level sizing properties —
2170
+ // deliberately NOT implying display:flex here. See the "Flex grow / shrink"
2171
+ // comment in the standalone table above for why: these already work via the
2172
+ // PARENT's flex context regardless of this element's own display, so
2173
+ // forcing display:flex here would only be a surprising, unrelated side
2174
+ // effect on this element's OWN children.
2154
2175
  flex: ({ value, isArbitrary }, { flex }) => {
2155
2176
  if (!value) return { display: "flex" };
2156
2177
  if (isArbitrary) {
package/dist/index.mjs CHANGED
@@ -42,7 +42,7 @@ import {
42
42
  useGlobalDarkMode,
43
43
  useGlobalWidth,
44
44
  useSyncExternalStore
45
- } from "./chunk-AKX6I7WP.mjs";
45
+ } from "./chunk-TKBIGAR2.mjs";
46
46
 
47
47
  // src/context.tsx
48
48
  import { createContext, useContext } from "react";
package/dist/jsx-dev-runtime.js CHANGED
@@ -622,6 +622,12 @@ function mergeStyle(computed, userStyle) {
622
622
  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
623
623
  return { ...computed, ...userStyle };
624
624
  }
625
+ function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
626
+ if (!webTag || !resolvedBase || resolvedBase.display !== void 0 || !("flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase)) {
627
+ return userStyle;
628
+ }
629
+ return Array.isArray(userStyle) ? [{ display: "flex" }, ...userStyle] : { display: "flex", ...userStyle };
630
+ }
625
631
  function makeElement(isStaticChildren, type, props, key) {
626
632
  return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
627
633
  }
@@ -664,7 +670,8 @@ function processElement(type, rawProps, key, isStaticChildren) {
664
670
  }
665
671
  const config = (0, import_core6.getConfig)();
666
672
  const resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : classStr ? (0, import_core6.resolve)(classStr, config.theme, config.darkMode) : {};
667
- const { style: userStyle, ...passProps } = omitConsumed(workingProps);
673
+ const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
674
+ const userStyle = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
668
675
  const { interactive, modeOrResponsive } = bucketMods(resolved);
669
676
  if (interactive) {
670
677
  return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
package/dist/jsx-dev-runtime.mjs CHANGED
@@ -3,8 +3,8 @@ import {
3
3
  Fragment,
4
4
  jsx,
5
5
  jsxs
6
- } from "./chunk-NWQIZZCW.mjs";
7
- import "./chunk-AKX6I7WP.mjs";
6
+ } from "./chunk-S6AHQ5M6.mjs";
7
+ import "./chunk-TKBIGAR2.mjs";
8
8
 
9
9
  // src/jsx-dev-runtime.tsx
10
10
  function jsxDEV(type, props, key, isStaticChildren, source, self) {
package/dist/jsx-runtime.js CHANGED
@@ -628,6 +628,12 @@ function mergeStyle(computed, userStyle) {
628
628
  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
629
629
  return { ...computed, ...userStyle };
630
630
  }
631
+ function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
632
+ if (!webTag || !resolvedBase || resolvedBase.display !== void 0 || !("flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase)) {
633
+ return userStyle;
634
+ }
635
+ return Array.isArray(userStyle) ? [{ display: "flex" }, ...userStyle] : { display: "flex", ...userStyle };
636
+ }
631
637
  function makeElement(isStaticChildren, type, props, key) {
632
638
  return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
633
639
  }
@@ -670,7 +676,8 @@ function processElement(type, rawProps, key, isStaticChildren) {
670
676
  }
671
677
  const config = (0, import_core6.getConfig)();
672
678
  const resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : classStr ? (0, import_core6.resolve)(classStr, config.theme, config.darkMode) : {};
673
- const { style: userStyle, ...passProps } = omitConsumed(workingProps);
679
+ const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
680
+ const userStyle = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
674
681
  const { interactive, modeOrResponsive } = bucketMods(resolved);
675
682
  if (interactive) {
676
683
  return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
package/dist/jsx-runtime.mjs CHANGED
@@ -4,10 +4,10 @@ import {
4
4
  _invalidateDefaultFontCache,
5
5
  jsx,
6
6
  jsxs
7
- } from "./chunk-NWQIZZCW.mjs";
7
+ } from "./chunk-S6AHQ5M6.mjs";
8
8
  import {
9
9
  registerWebElement
10
- } from "./chunk-AKX6I7WP.mjs";
10
+ } from "./chunk-TKBIGAR2.mjs";
11
11
  export {
12
12
  Fragment,
13
13
  _invalidateDefaultFontCache,
package/dist/vite-plugin.js CHANGED
@@ -1399,41 +1399,56 @@ function buildStandalone() {
1399
1399
  hidden: { display: "none" },
1400
1400
  contents: web ? { display: "contents" } : null,
1401
1401
  "flow-root": web ? { display: "flow-root" } : null,
1402
- // Flex direction (both web and native)
1403
- "flex-row": { flexDirection: "row" },
1404
- "flex-col": { flexDirection: "column" },
1405
- "flex-row-reverse": { flexDirection: "row-reverse" },
1406
- "flex-col-reverse": { flexDirection: "column-reverse" },
1402
+ // Flex direction, wrap, grow/shrink, and alignment (both web and native) —
1403
+ // every one of these is meaningless without the element also being a flex
1404
+ // container. React Native Views are ALWAYS flex containers by default, so
1405
+ // on native this was already true for free; on web a plain <div> defaults
1406
+ // to display:block, so e.g. `items-center` alone silently did nothing.
1407
+ // Folding `display: 'flex'` into these on web closes that native/web gap —
1408
+ // `flex-1 items-center justify-center` now behaves the same on both,
1409
+ // without also needing a separate `flex` class.
1410
+ "flex-row": { flexDirection: "row", ...web ? { display: "flex" } : {} },
1411
+ "flex-col": { flexDirection: "column", ...web ? { display: "flex" } : {} },
1412
+ "flex-row-reverse": { flexDirection: "row-reverse", ...web ? { display: "flex" } : {} },
1413
+ "flex-col-reverse": { flexDirection: "column-reverse", ...web ? { display: "flex" } : {} },
1407
1414
  // Flex wrap (both)
1408
- "flex-wrap": { flexWrap: "wrap" },
1409
- "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
1410
- "flex-nowrap": { flexWrap: "nowrap" },
1411
- // Flex grow / shrink (both)
1415
+ "flex-wrap": { flexWrap: "wrap", ...web ? { display: "flex" } : {} },
1416
+ "flex-wrap-reverse": { flexWrap: "wrap-reverse", ...web ? { display: "flex" } : {} },
1417
+ "flex-nowrap": { flexWrap: "nowrap", ...web ? { display: "flex" } : {} },
1418
+ // Flex grow / shrink (both) — deliberately NOT folding in display:flex
1419
+ // like the container-level properties above. flex-grow/flex-shrink are
1420
+ // item-level: they already take effect purely via the PARENT already
1421
+ // being a flex container, with zero dependency on this element's own
1422
+ // display. Forcing display:flex here would instead be an unrelated side
1423
+ // effect on THIS element's own children (turning what may be an ordinary
1424
+ // block stack into a flex row) — exactly the kind of surprise the
1425
+ // container-level properties above can never cause, since those are
1426
+ // no-ops without display:flex to begin with.
1412
1427
  "flex-grow": { flexGrow: 1 },
1413
1428
  "flex-grow-0": { flexGrow: 0 },
1414
1429
  "flex-shrink": { flexShrink: 1 },
1415
1430
  "flex-shrink-0": { flexShrink: 0 },
1416
1431
  // Align items (both)
1417
- "items-start": { alignItems: "flex-start" },
1418
- "items-end": { alignItems: "flex-end" },
1419
- "items-center": { alignItems: "center" },
1420
- "items-baseline": { alignItems: "baseline" },
1421
- "items-stretch": { alignItems: "stretch" },
1432
+ "items-start": { alignItems: "flex-start", ...web ? { display: "flex" } : {} },
1433
+ "items-end": { alignItems: "flex-end", ...web ? { display: "flex" } : {} },
1434
+ "items-center": { alignItems: "center", ...web ? { display: "flex" } : {} },
1435
+ "items-baseline": { alignItems: "baseline", ...web ? { display: "flex" } : {} },
1436
+ "items-stretch": { alignItems: "stretch", ...web ? { display: "flex" } : {} },
1422
1437
  // Justify content (both)
1423
- "justify-start": { justifyContent: "flex-start" },
1424
- "justify-end": { justifyContent: "flex-end" },
1425
- "justify-center": { justifyContent: "center" },
1426
- "justify-between": { justifyContent: "space-between" },
1427
- "justify-around": { justifyContent: "space-around" },
1428
- "justify-evenly": { justifyContent: "space-evenly" },
1438
+ "justify-start": { justifyContent: "flex-start", ...web ? { display: "flex" } : {} },
1439
+ "justify-end": { justifyContent: "flex-end", ...web ? { display: "flex" } : {} },
1440
+ "justify-center": { justifyContent: "center", ...web ? { display: "flex" } : {} },
1441
+ "justify-between": { justifyContent: "space-between", ...web ? { display: "flex" } : {} },
1442
+ "justify-around": { justifyContent: "space-around", ...web ? { display: "flex" } : {} },
1443
+ "justify-evenly": { justifyContent: "space-evenly", ...web ? { display: "flex" } : {} },
1429
1444
  // Align content (both)
1430
- "content-start": { alignContent: "flex-start" },
1431
- "content-end": { alignContent: "flex-end" },
1432
- "content-center": { alignContent: "center" },
1433
- "content-between": { alignContent: "space-between" },
1434
- "content-around": { alignContent: "space-around" },
1435
- "content-evenly": { alignContent: "space-evenly" },
1436
- "content-stretch": { alignContent: "stretch" },
1445
+ "content-start": { alignContent: "flex-start", ...web ? { display: "flex" } : {} },
1446
+ "content-end": { alignContent: "flex-end", ...web ? { display: "flex" } : {} },
1447
+ "content-center": { alignContent: "center", ...web ? { display: "flex" } : {} },
1448
+ "content-between": { alignContent: "space-between", ...web ? { display: "flex" } : {} },
1449
+ "content-around": { alignContent: "space-around", ...web ? { display: "flex" } : {} },
1450
+ "content-evenly": { alignContent: "space-evenly", ...web ? { display: "flex" } : {} },
1451
+ "content-stretch": { alignContent: "stretch", ...web ? { display: "flex" } : {} },
1437
1452
  // Align self (both)
1438
1453
  "self-auto": { alignSelf: "auto" },
1439
1454
  "self-start": { alignSelf: "flex-start" },
@@ -1917,6 +1932,12 @@ var layoutResolvers = {
1917
1932
  return map[value] ? { justifySelf: map[value] } : null;
1918
1933
  },
1919
1934
  // ── Flex ───────────────────────────────────────────────────────────────────
1935
+ // flex-1/flex-auto/flex-none/grow/shrink are item-level sizing properties —
1936
+ // deliberately NOT implying display:flex here. See the "Flex grow / shrink"
1937
+ // comment in the standalone table above for why: these already work via the
1938
+ // PARENT's flex context regardless of this element's own display, so
1939
+ // forcing display:flex here would only be a surprising, unrelated side
1940
+ // effect on this element's OWN children.
1920
1941
  flex: ({ value, isArbitrary }, { flex }) => {
1921
1942
  if (!value) return { display: "flex" };
1922
1943
  if (isArbitrary) {
package/dist/vite-plugin.mjs CHANGED
@@ -1365,41 +1365,56 @@ function buildStandalone() {
1365
1365
  hidden: { display: "none" },
1366
1366
  contents: web ? { display: "contents" } : null,
1367
1367
  "flow-root": web ? { display: "flow-root" } : null,
1368
- // Flex direction (both web and native)
1369
- "flex-row": { flexDirection: "row" },
1370
- "flex-col": { flexDirection: "column" },
1371
- "flex-row-reverse": { flexDirection: "row-reverse" },
1372
- "flex-col-reverse": { flexDirection: "column-reverse" },
1368
+ // Flex direction, wrap, grow/shrink, and alignment (both web and native) —
1369
+ // every one of these is meaningless without the element also being a flex
1370
+ // container. React Native Views are ALWAYS flex containers by default, so
1371
+ // on native this was already true for free; on web a plain <div> defaults
1372
+ // to display:block, so e.g. `items-center` alone silently did nothing.
1373
+ // Folding `display: 'flex'` into these on web closes that native/web gap —
1374
+ // `flex-1 items-center justify-center` now behaves the same on both,
1375
+ // without also needing a separate `flex` class.
1376
+ "flex-row": { flexDirection: "row", ...web ? { display: "flex" } : {} },
1377
+ "flex-col": { flexDirection: "column", ...web ? { display: "flex" } : {} },
1378
+ "flex-row-reverse": { flexDirection: "row-reverse", ...web ? { display: "flex" } : {} },
1379
+ "flex-col-reverse": { flexDirection: "column-reverse", ...web ? { display: "flex" } : {} },
1373
1380
  // Flex wrap (both)
1374
- "flex-wrap": { flexWrap: "wrap" },
1375
- "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
1376
- "flex-nowrap": { flexWrap: "nowrap" },
1377
- // Flex grow / shrink (both)
1381
+ "flex-wrap": { flexWrap: "wrap", ...web ? { display: "flex" } : {} },
1382
+ "flex-wrap-reverse": { flexWrap: "wrap-reverse", ...web ? { display: "flex" } : {} },
1383
+ "flex-nowrap": { flexWrap: "nowrap", ...web ? { display: "flex" } : {} },
1384
+ // Flex grow / shrink (both) — deliberately NOT folding in display:flex
1385
+ // like the container-level properties above. flex-grow/flex-shrink are
1386
+ // item-level: they already take effect purely via the PARENT already
1387
+ // being a flex container, with zero dependency on this element's own
1388
+ // display. Forcing display:flex here would instead be an unrelated side
1389
+ // effect on THIS element's own children (turning what may be an ordinary
1390
+ // block stack into a flex row) — exactly the kind of surprise the
1391
+ // container-level properties above can never cause, since those are
1392
+ // no-ops without display:flex to begin with.
1378
1393
  "flex-grow": { flexGrow: 1 },
1379
1394
  "flex-grow-0": { flexGrow: 0 },
1380
1395
  "flex-shrink": { flexShrink: 1 },
1381
1396
  "flex-shrink-0": { flexShrink: 0 },
1382
1397
  // Align items (both)
1383
- "items-start": { alignItems: "flex-start" },
1384
- "items-end": { alignItems: "flex-end" },
1385
- "items-center": { alignItems: "center" },
1386
- "items-baseline": { alignItems: "baseline" },
1387
- "items-stretch": { alignItems: "stretch" },
1398
+ "items-start": { alignItems: "flex-start", ...web ? { display: "flex" } : {} },
1399
+ "items-end": { alignItems: "flex-end", ...web ? { display: "flex" } : {} },
1400
+ "items-center": { alignItems: "center", ...web ? { display: "flex" } : {} },
1401
+ "items-baseline": { alignItems: "baseline", ...web ? { display: "flex" } : {} },
1402
+ "items-stretch": { alignItems: "stretch", ...web ? { display: "flex" } : {} },
1388
1403
  // Justify content (both)
1389
- "justify-start": { justifyContent: "flex-start" },
1390
- "justify-end": { justifyContent: "flex-end" },
1391
- "justify-center": { justifyContent: "center" },
1392
- "justify-between": { justifyContent: "space-between" },
1393
- "justify-around": { justifyContent: "space-around" },
1394
- "justify-evenly": { justifyContent: "space-evenly" },
1404
+ "justify-start": { justifyContent: "flex-start", ...web ? { display: "flex" } : {} },
1405
+ "justify-end": { justifyContent: "flex-end", ...web ? { display: "flex" } : {} },
1406
+ "justify-center": { justifyContent: "center", ...web ? { display: "flex" } : {} },
1407
+ "justify-between": { justifyContent: "space-between", ...web ? { display: "flex" } : {} },
1408
+ "justify-around": { justifyContent: "space-around", ...web ? { display: "flex" } : {} },
1409
+ "justify-evenly": { justifyContent: "space-evenly", ...web ? { display: "flex" } : {} },
1395
1410
  // Align content (both)
1396
- "content-start": { alignContent: "flex-start" },
1397
- "content-end": { alignContent: "flex-end" },
1398
- "content-center": { alignContent: "center" },
1399
- "content-between": { alignContent: "space-between" },
1400
- "content-around": { alignContent: "space-around" },
1401
- "content-evenly": { alignContent: "space-evenly" },
1402
- "content-stretch": { alignContent: "stretch" },
1411
+ "content-start": { alignContent: "flex-start", ...web ? { display: "flex" } : {} },
1412
+ "content-end": { alignContent: "flex-end", ...web ? { display: "flex" } : {} },
1413
+ "content-center": { alignContent: "center", ...web ? { display: "flex" } : {} },
1414
+ "content-between": { alignContent: "space-between", ...web ? { display: "flex" } : {} },
1415
+ "content-around": { alignContent: "space-around", ...web ? { display: "flex" } : {} },
1416
+ "content-evenly": { alignContent: "space-evenly", ...web ? { display: "flex" } : {} },
1417
+ "content-stretch": { alignContent: "stretch", ...web ? { display: "flex" } : {} },
1403
1418
  // Align self (both)
1404
1419
  "self-auto": { alignSelf: "auto" },
1405
1420
  "self-start": { alignSelf: "flex-start" },
@@ -1883,6 +1898,12 @@ var layoutResolvers = {
1883
1898
  return map[value] ? { justifySelf: map[value] } : null;
1884
1899
  },
1885
1900
  // ── Flex ───────────────────────────────────────────────────────────────────
1901
+ // flex-1/flex-auto/flex-none/grow/shrink are item-level sizing properties —
1902
+ // deliberately NOT implying display:flex here. See the "Flex grow / shrink"
1903
+ // comment in the standalone table above for why: these already work via the
1904
+ // PARENT's flex context regardless of this element's own display, so
1905
+ // forcing display:flex here would only be a surprising, unrelated side
1906
+ // effect on this element's OWN children.
1886
1907
  flex: ({ value, isArbitrary }, { flex }) => {
1887
1908
  if (!value) return { display: "flex" };
1888
1909
  if (isArbitrary) {
package/package.json CHANGED
@@ -1,7 +1,14 @@
1
1
  {
2
2
  "name": "@kbach/react",
3
- "version": "0.6.26",
3
+ "version": "0.6.29",
4
4
  "description": "React / React Native components and hooks for the Kbach framework",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "git+https://github.com/semsakadanupol/kbach.git",
8
+ "directory": "packages/react"
9
+ },
10
+ "homepage": "https://github.com/semsakadanupol/kbach#readme",
11
+ "bugs": "https://github.com/semsakadanupol/kbach/issues",
5
12
  "source": "./src/index.ts",
6
13
  "main": "./dist/index.js",
7
14
  "types": "./dist/index.d.ts",