@kbach/react 0.6.26 → 0.6.28
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/{chunk-AKX6I7WP.mjs → chunk-TKBIGAR2.mjs} +48 -27
- package/dist/{chunk-NWQIZZCW.mjs → chunk-X4XQQZN6.mjs} +1 -1
- package/dist/core/index.js +48 -27
- package/dist/index.mjs +1 -1
- package/dist/jsx-dev-runtime.mjs +2 -2
- package/dist/jsx-runtime.mjs +2 -2
- package/dist/vite-plugin.js +48 -27
- package/dist/vite-plugin.mjs +48 -27
- package/package.json +8 -1
|
@@ -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
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
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
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
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
package/dist/jsx-dev-runtime.mjs
CHANGED
|
@@ -3,8 +3,8 @@ import {
|
|
|
3
3
|
Fragment,
|
|
4
4
|
jsx,
|
|
5
5
|
jsxs
|
|
6
|
-
} from "./chunk-
|
|
7
|
-
import "./chunk-
|
|
6
|
+
} from "./chunk-X4XQQZN6.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.mjs
CHANGED
|
@@ -4,10 +4,10 @@ import {
|
|
|
4
4
|
_invalidateDefaultFontCache,
|
|
5
5
|
jsx,
|
|
6
6
|
jsxs
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-X4XQQZN6.mjs";
|
|
8
8
|
import {
|
|
9
9
|
registerWebElement
|
|
10
|
-
} from "./chunk-
|
|
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
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
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
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
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.
|
|
3
|
+
"version": "0.6.28",
|
|
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",
|