@kbach/react 0.2.0 → 0.2.1

package/dist/jsx-runtime.js

@@ -1172,62 +1172,64 @@ function resolveFontSize(value, fontSizes, isArbitrary) {
 }
 var STANDALONE = {
   // Display
-  flex: { display: "flex" },
-  block: { display: "block" },
-  "inline-block": { display: "inline-block" },
-  inline: { display: "inline" },
-  grid: { display: "grid" },
-  "inline-flex": { display: "inline-flex" },
-  "inline-grid": { display: "inline-grid" },
+  // On native, Views are flex containers by default — `display: 'flex'` is a no-op.
+  // `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
+  flex: isWeb ? { display: "flex" } : {},
+  block: isWeb ? { display: "block" } : null,
+  "inline-block": isWeb ? { display: "inline-block" } : null,
+  inline: isWeb ? { display: "inline" } : null,
+  grid: isWeb ? { display: "grid" } : null,
+  "inline-flex": isWeb ? { display: "inline-flex" } : {},
+  "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
-  contents: { display: "contents" },
-  "flow-root": { display: "flow-root" },
-  // Flex direction
+  contents: isWeb ? { display: "contents" } : null,
+  "flow-root": isWeb ? { display: "flow-root" } : null,
+  // Flex direction (both web and native)
   "flex-row": { flexDirection: "row" },
   "flex-col": { flexDirection: "column" },
   "flex-row-reverse": { flexDirection: "row-reverse" },
   "flex-col-reverse": { flexDirection: "column-reverse" },
-  // Flex wrap
+  // Flex wrap (both)
   "flex-wrap": { flexWrap: "wrap" },
   "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
   "flex-nowrap": { flexWrap: "nowrap" },
-  // Flex grow / shrink
+  // Flex grow / shrink (both)
   "flex-grow": { flexGrow: 1 },
   "flex-grow-0": { flexGrow: 0 },
   "flex-shrink": { flexShrink: 1 },
   "flex-shrink-0": { flexShrink: 0 },
-  // Align items
+  // Align items (both)
   "items-start": { alignItems: "flex-start" },
   "items-end": { alignItems: "flex-end" },
   "items-center": { alignItems: "center" },
   "items-baseline": { alignItems: "baseline" },
   "items-stretch": { alignItems: "stretch" },
-  // Justify content
+  // Justify content (both)
   "justify-start": { justifyContent: "flex-start" },
   "justify-end": { justifyContent: "flex-end" },
   "justify-center": { justifyContent: "center" },
   "justify-between": { justifyContent: "space-between" },
   "justify-around": { justifyContent: "space-around" },
   "justify-evenly": { justifyContent: "space-evenly" },
-  // Align content
+  // Align content (both)
   "content-start": { alignContent: "flex-start" },
   "content-end": { alignContent: "flex-end" },
   "content-center": { alignContent: "center" },
   "content-between": { alignContent: "space-between" },
   "content-around": { alignContent: "space-around" },
   "content-evenly": { alignContent: "space-evenly" },
-  // Align self
+  // Align self (both)
   "self-auto": { alignSelf: "auto" },
   "self-start": { alignSelf: "flex-start" },
   "self-end": { alignSelf: "flex-end" },
   "self-center": { alignSelf: "center" },
   "self-stretch": { alignSelf: "stretch" },
-  // Text align
+  // Text align (both)
   "text-left": { textAlign: "left" },
   "text-right": { textAlign: "right" },
   "text-center": { textAlign: "center" },
   "text-justify": { textAlign: "justify" },
-  // Font weight shortcuts
+  // Font weight shortcuts (both)
   "font-thin": { fontWeight: "100" },
   "font-extralight": { fontWeight: "200" },
   "font-light": { fontWeight: "300" },
@@ -1237,94 +1239,95 @@ var STANDALONE = {
   "font-bold": { fontWeight: "700" },
   "font-extrabold": { fontWeight: "800" },
   "font-black": { fontWeight: "900" },
-  // Text decoration
+  // Text decoration (overline is web-only)
   underline: { textDecorationLine: "underline" },
-  overline: { textDecorationLine: "overline" },
+  overline: isWeb ? { textDecorationLine: "overline" } : null,
   "line-through": { textDecorationLine: "line-through" },
   "no-underline": { textDecorationLine: "none" },
-  // Text transform
+  // Text transform (both)
   uppercase: { textTransform: "uppercase" },
   lowercase: { textTransform: "lowercase" },
   capitalize: { textTransform: "capitalize" },
   "normal-case": { textTransform: "none" },
-  // Font style
+  // Font style (both)
   italic: { fontStyle: "italic" },
   "non-italic": { fontStyle: "normal" },
-  // Position
+  // Position (fixed/sticky/static are web-only; RN only supports relative/absolute)
   relative: { position: "relative" },
   absolute: { position: "absolute" },
-  fixed: { position: "fixed" },
-  sticky: { position: "sticky" },
-  static: { position: "static" },
-  // Visibility
-  visible: { visibility: "visible" },
-  invisible: { visibility: "hidden" },
-  // Overflow
+  fixed: isWeb ? { position: "fixed" } : null,
+  sticky: isWeb ? { position: "sticky" } : null,
+  static: isWeb ? { position: "static" } : null,
+  // Visibility (no `visibility` prop on native; use opacity instead)
+  visible: isWeb ? { visibility: "visible" } : null,
+  invisible: isWeb ? { visibility: "hidden" } : { opacity: 0 },
+  // Overflow (RN supports 'hidden' | 'visible' | 'scroll'; not 'auto')
   "overflow-hidden": { overflow: "hidden" },
   "overflow-visible": { overflow: "visible" },
   "overflow-scroll": { overflow: "scroll" },
-  "overflow-auto": { overflow: "auto" },
-  "overflow-x-hidden": { overflowX: "hidden" },
-  "overflow-x-scroll": { overflowX: "scroll" },
-  "overflow-x-auto": { overflowX: "auto" },
-  "overflow-y-hidden": { overflowY: "hidden" },
-  "overflow-y-scroll": { overflowY: "scroll" },
-  "overflow-y-auto": { overflowY: "auto" },
-  // Object fit
-  "object-contain": { objectFit: "contain" },
-  "object-cover": { objectFit: "cover" },
-  "object-fill": { objectFit: "fill" },
-  "object-none": { objectFit: "none" },
-  "object-scale-down": { objectFit: "scale-down" },
-  // Border style
+  "overflow-auto": isWeb ? { overflow: "auto" } : { overflow: "scroll" },
+  // overflowX / overflowY are web-only
+  "overflow-x-hidden": isWeb ? { overflowX: "hidden" } : null,
+  "overflow-x-scroll": isWeb ? { overflowX: "scroll" } : null,
+  "overflow-x-auto": isWeb ? { overflowX: "auto" } : null,
+  "overflow-y-hidden": isWeb ? { overflowY: "hidden" } : null,
+  "overflow-y-scroll": isWeb ? { overflowY: "scroll" } : null,
+  "overflow-y-auto": isWeb ? { overflowY: "auto" } : null,
+  // Object fit (web-only; use resizeMode prop on RN Image)
+  "object-contain": isWeb ? { objectFit: "contain" } : null,
+  "object-cover": isWeb ? { objectFit: "cover" } : null,
+  "object-fill": isWeb ? { objectFit: "fill" } : null,
+  "object-none": isWeb ? { objectFit: "none" } : null,
+  "object-scale-down": isWeb ? { objectFit: "scale-down" } : null,
+  // Border style (both)
   "border-solid": { borderStyle: "solid" },
   "border-dashed": { borderStyle: "dashed" },
   "border-dotted": { borderStyle: "dotted" },
   "border-none": { borderWidth: 0 },
-  // Border sides (default width 1)
+  // Border sides default width (both)
   "border-t": { borderTopWidth: 1 },
   "border-r": { borderRightWidth: 1 },
   "border-b": { borderBottomWidth: 1 },
   "border-l": { borderLeftWidth: 1 },
-  // Cursor
-  "cursor-auto": { cursor: "auto" },
-  "cursor-default": { cursor: "default" },
-  "cursor-pointer": { cursor: "pointer" },
-  "cursor-wait": { cursor: "wait" },
-  "cursor-text": { cursor: "text" },
-  "cursor-move": { cursor: "move" },
-  "cursor-not-allowed": { cursor: "not-allowed" },
-  // Select
-  "select-none": { userSelect: "none" },
-  "select-text": { userSelect: "text" },
-  "select-all": { userSelect: "all" },
-  "select-auto": { userSelect: "auto" },
-  // Pointer events
+  // Cursor (web-only)
+  "cursor-auto": isWeb ? { cursor: "auto" } : null,
+  "cursor-default": isWeb ? { cursor: "default" } : null,
+  "cursor-pointer": isWeb ? { cursor: "pointer" } : null,
+  "cursor-wait": isWeb ? { cursor: "wait" } : null,
+  "cursor-text": isWeb ? { cursor: "text" } : null,
+  "cursor-move": isWeb ? { cursor: "move" } : null,
+  "cursor-not-allowed": isWeb ? { cursor: "not-allowed" } : null,
+  // User select (web-only)
+  "select-none": isWeb ? { userSelect: "none" } : null,
+  "select-text": isWeb ? { userSelect: "text" } : null,
+  "select-all": isWeb ? { userSelect: "all" } : null,
+  "select-auto": isWeb ? { userSelect: "auto" } : null,
+  // Pointer events (both)
   "pointer-events-none": { pointerEvents: "none" },
   "pointer-events-auto": { pointerEvents: "auto" },
-  // Whitespace
-  "whitespace-normal": { whiteSpace: "normal" },
-  "whitespace-nowrap": { whiteSpace: "nowrap" },
-  "whitespace-pre": { whiteSpace: "pre" },
-  "whitespace-pre-wrap": { whiteSpace: "pre-wrap" },
-  "whitespace-pre-line": { whiteSpace: "pre-line" },
-  // Word break
-  "break-normal": { overflowWrap: "normal", wordBreak: "normal" },
-  "break-words": { overflowWrap: "break-word" },
-  "break-all": { wordBreak: "break-all" },
-  // Misc
-  truncate: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-  "box-border": { boxSizing: "border-box" },
-  "box-content": { boxSizing: "content-box" },
-  "appearance-none": { appearance: "none" },
-  "outline-none": { outline: "none", outlineOffset: "0" },
-  outline: { outline: "2px solid transparent", outlineOffset: "2px" },
-  resize: { resize: "both" },
-  "resize-none": { resize: "none" },
-  "resize-y": { resize: "vertical" },
-  "resize-x": { resize: "horizontal" },
-  antialiased: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" },
-  "sr-only": {
+  // Whitespace (web-only; RN Text uses numberOfLines prop instead)
+  "whitespace-normal": isWeb ? { whiteSpace: "normal" } : null,
+  "whitespace-nowrap": isWeb ? { whiteSpace: "nowrap" } : null,
+  "whitespace-pre": isWeb ? { whiteSpace: "pre" } : null,
+  "whitespace-pre-wrap": isWeb ? { whiteSpace: "pre-wrap" } : null,
+  "whitespace-pre-line": isWeb ? { whiteSpace: "pre-line" } : null,
+  // Word break (web-only)
+  "break-normal": isWeb ? { overflowWrap: "normal", wordBreak: "normal" } : null,
+  "break-words": isWeb ? { overflowWrap: "break-word" } : null,
+  "break-all": isWeb ? { wordBreak: "break-all" } : null,
+  // Misc web-only
+  truncate: isWeb ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
+  "box-border": isWeb ? { boxSizing: "border-box" } : null,
+  "box-content": isWeb ? { boxSizing: "content-box" } : null,
+  "appearance-none": isWeb ? { appearance: "none" } : null,
+  "outline-none": isWeb ? { outline: "none", outlineOffset: "0" } : null,
+  outline: isWeb ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
+  resize: isWeb ? { resize: "both" } : null,
+  "resize-none": isWeb ? { resize: "none" } : null,
+  "resize-y": isWeb ? { resize: "vertical" } : null,
+  "resize-x": isWeb ? { resize: "horizontal" } : null,
+  antialiased: isWeb ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
+  "sr-only": isWeb ? {
     position: "absolute",
     width: 1,
     height: 1,
@@ -1334,8 +1337,8 @@ var STANDALONE = {
     clip: "rect(0,0,0,0)",
     whiteSpace: "nowrap",
     border: 0
-  },
-  "not-sr-only": {
+  } : null,
+  "not-sr-only": isWeb ? {
     position: "static",
     width: "auto",
     height: "auto",
@@ -1344,16 +1347,16 @@ var STANDALONE = {
     overflow: "visible",
     clip: "auto",
     whiteSpace: "normal"
-  },
-  // Lists
-  "list-none": { listStyleType: "none" },
-  "list-disc": { listStyleType: "disc" },
-  "list-decimal": { listStyleType: "decimal" },
-  // Background clip
-  "bg-clip-border": { backgroundClip: "border-box" },
-  "bg-clip-padding": { backgroundClip: "padding-box" },
-  "bg-clip-content": { backgroundClip: "content-box" },
-  "bg-clip-text": { backgroundClip: "text", WebkitBackgroundClip: "text" }
+  } : null,
+  // Lists (web-only)
+  "list-none": isWeb ? { listStyleType: "none" } : null,
+  "list-disc": isWeb ? { listStyleType: "disc" } : null,
+  "list-decimal": isWeb ? { listStyleType: "decimal" } : null,
+  // Background clip (web-only)
+  "bg-clip-border": isWeb ? { backgroundClip: "border-box" } : null,
+  "bg-clip-padding": isWeb ? { backgroundClip: "padding-box" } : null,
+  "bg-clip-content": isWeb ? { backgroundClip: "content-box" } : null,
+  "bg-clip-text": isWeb ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null
 };
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
@@ -1361,8 +1364,9 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value, isArbitrary }, _) => {
-    const v = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+  "bg-opacity": ({ value }, _) => {
+    if (!isWeb) return null;
+    const v = parseFloat(value) / 100;
     return isNaN(v) ? null : { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
@@ -1379,6 +1383,7 @@ var RESOLVERS = {
     return color ? { color } : null;
   },
   "text-opacity": ({ value }, _) => {
+    if (!isWeb) return null;
     const v = parseFloat(value) / 100;
     return isNaN(v) ? null : { "--text-opacity": v };
   },
@@ -1544,8 +1549,8 @@ var RESOLVERS = {
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
   // ── Flex ───────────────────────────────────────────────────────────────────
-  flex: ({ value, isArbitrary }, { flex, spacing }) => {
-    if (!value) return { display: "flex" };
+  flex: ({ value, isArbitrary }, { flex }) => {
+    if (!value) return isWeb ? { display: "flex" } : {};
     if (isArbitrary) {
       const v = parseFloat(value);
       return isNaN(v) ? null : { flex: v };
@@ -1702,8 +1707,9 @@ var RESOLVERS = {
     const presets = { auto: "auto", square: 1, video: 16 / 9 };
     return value in presets ? { aspectRatio: presets[value] } : null;
   },
-  // ── Transition ─────────────────────────────────────────────────────────────
+  // ── Transition (web-only; use Animated API on native) ─────────────────────
   transition: ({ value }) => {
+    if (!isWeb) return null;
     const presets = {
       "": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 150ms",
       all: "all 150ms",
@@ -1717,10 +1723,12 @@ var RESOLVERS = {
     return v !== void 0 ? { transition: v } : null;
   },
   duration: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDuration: ms };
   },
   delay: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
@@ -1735,8 +1743,9 @@ var RESOLVERS = {
   }
 };
 function resolveUtility(parsed, theme) {
-  const standalone = STANDALONE[parsed.utility];
-  if (standalone) return standalone;
+  if (!parsed.value && parsed.utility in STANDALONE) {
+    return STANDALONE[parsed.utility] ?? null;
+  }
   const resolver = RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
   return null;

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-CNS23UB5.mjs";
-import "./chunk-PYBA3DFG.mjs";
+} from "./chunk-7SN3LQKS.mjs";
+import "./chunk-MXJINF4T.mjs";
 export {
   Fragment,
   jsx,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",