@kbach/react 0.6.10 → 0.6.12

package/dist/{chunk-RWQKYQWN.mjs → chunk-GTDMKS7C.mjs}

@@ -23,7 +23,7 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-CJRRPENF.mjs";
+} from "./chunk-WYOKBFSK.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-CJRRPENF.mjs → chunk-WYOKBFSK.mjs}

@@ -1793,6 +1793,16 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    const presets = { none: "none" };
+    return value in presets ? { content: presets[value] } : null;
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -3694,19 +3704,24 @@ var InteractiveWrapper = forwardRef(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
-      // component (react-native-web components accept both prop names), never when it's a
-      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
-      // property" for onPressIn/onPressOut on a host element even when the value is
-      // undefined — the check is on the prop KEY being present at all, not its value — so
-      // the key must be omitted entirely for string components, not just set to undefined.
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch) —
+      // onPressIn/onPressOut are RN-only prop names and are never forwarded here, even when
+      // Component isn't a literal HTML tag string. A non-string Component on web is just as
+      // likely to be an ordinary web component (React Router's <Link>, Next.js's <Link>, any
+      // custom wrapper) as an actual react-native-web primitive — "not a string" alone was never
+      // a reliable signal that onPressIn/onPressOut are wanted, and forwarding them
+      // unconditionally made React DOM warn "Unknown event handler property" the moment any web
+      // component got an interactive modifier (hover:, active:, …), which is the common case,
+      // not the exception. (A real react-native-web primitive would additionally have this pair
+      // of props silently vanish after hydration anyway, once the browser-only web-substitution
+      // in jsx-runtime.tsx swaps it for a plain host tag — so keeping them pre-hydration would
+      // only have traded one prop-mismatch warning for another.) Genuinely native code paths
+      // still get them via the isNative branch below.
       ...!isNative ? {
         onPointerDown: handlePointerDown,
         onPointerUp: handlePointerUp,
         onPointerLeave: handlePointerLeave,
-        onPointerCancel: handlePointerCancel,
-        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+        onPointerCancel: handlePointerCancel
       } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,

package/dist/index.js

@@ -1954,6 +1954,16 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    const presets = { none: "none" };
+    return value in presets ? { content: presets[value] } : null;
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -3988,25 +3998,28 @@ function styled(Component, baseClasses = "") {
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
-        // onPressIn/onPressOut are forwarded on web too (not just native) since
-        // react-native-web components rely on receiving them directly — but only
-        // when effectiveComponent is an actual component, never a literal HTML tag
-        // string ('div', 'a', …). React DOM warns "Unknown event handler property"
-        // for onPressIn/onPressOut on a host element even when the value is
-        // undefined — the check is on the prop KEY being present at all, not its
-        // value — so the key must be omitted entirely for string components.
-        ...isWeb ? hasInteractive ? {
+        // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
+        // and onPressIn/onPressOut must stay excluded there as well — SSR is exactly where
+        // getWebTag() above is skipped (it's isWeb-gated), so effectiveComponent may still be
+        // a non-string RN-style reference server-side, and this used to forward onPressIn/
+        // onPressOut to it unconditionally in that case (isWeb ? ... : ...'s false branch
+        // covered both native AND SSR). onPressIn/onPressOut are RN-only prop names — a
+        // non-string effectiveComponent on the web/SSR side is just as likely to be an
+        // ordinary web component (React Router's <Link>, Next.js's <Link>, any custom
+        // wrapper) as an actual react-native-web primitive, and "not a string" alone isn't a
+        // reliable signal either way. Forwarding them made React DOM warn "Unknown event
+        // handler property" the moment any such component got an interactive modifier
+        // (hover:, active:, …), which is the common case, not the exception.
+        ...!isNative ? hasInteractive ? {
           onPointerDown: handlePointerDown,
           onPointerUp: handlePointerUp,
           onPointerLeave: handlePointerLeave,
-          onPointerCancel: handlePointerCancel,
-          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+          onPointerCancel: handlePointerCancel
         } : {
           onPointerDown,
           onPointerUp,
           onPointerLeave,
-          onPointerCancel,
-          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+          onPointerCancel
         } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
@@ -4127,19 +4140,24 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
-      // component (react-native-web components accept both prop names), never when it's a
-      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
-      // property" for onPressIn/onPressOut on a host element even when the value is
-      // undefined — the check is on the prop KEY being present at all, not its value — so
-      // the key must be omitted entirely for string components, not just set to undefined.
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch) —
+      // onPressIn/onPressOut are RN-only prop names and are never forwarded here, even when
+      // Component isn't a literal HTML tag string. A non-string Component on web is just as
+      // likely to be an ordinary web component (React Router's <Link>, Next.js's <Link>, any
+      // custom wrapper) as an actual react-native-web primitive — "not a string" alone was never
+      // a reliable signal that onPressIn/onPressOut are wanted, and forwarding them
+      // unconditionally made React DOM warn "Unknown event handler property" the moment any web
+      // component got an interactive modifier (hover:, active:, …), which is the common case,
+      // not the exception. (A real react-native-web primitive would additionally have this pair
+      // of props silently vanish after hydration anyway, once the browser-only web-substitution
+      // in jsx-runtime.tsx swaps it for a plain host tag — so keeping them pre-hydration would
+      // only have traded one prop-mismatch warning for another.) Genuinely native code paths
+      // still get them via the isNative branch below.
       ...!isNative ? {
         onPointerDown: handlePointerDown,
         onPointerUp: handlePointerUp,
         onPointerLeave: handlePointerLeave,
-        onPointerCancel: handlePointerCancel,
-        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+        onPointerCancel: handlePointerCancel
       } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,

package/dist/index.mjs

@@ -39,7 +39,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-CJRRPENF.mjs";
+} from "./chunk-WYOKBFSK.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -339,25 +339,28 @@ function styled(Component, baseClasses = "") {
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
-        // onPressIn/onPressOut are forwarded on web too (not just native) since
-        // react-native-web components rely on receiving them directly — but only
-        // when effectiveComponent is an actual component, never a literal HTML tag
-        // string ('div', 'a', …). React DOM warns "Unknown event handler property"
-        // for onPressIn/onPressOut on a host element even when the value is
-        // undefined — the check is on the prop KEY being present at all, not its
-        // value — so the key must be omitted entirely for string components.
-        ...isWeb ? hasInteractive ? {
+        // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
+        // and onPressIn/onPressOut must stay excluded there as well — SSR is exactly where
+        // getWebTag() above is skipped (it's isWeb-gated), so effectiveComponent may still be
+        // a non-string RN-style reference server-side, and this used to forward onPressIn/
+        // onPressOut to it unconditionally in that case (isWeb ? ... : ...'s false branch
+        // covered both native AND SSR). onPressIn/onPressOut are RN-only prop names — a
+        // non-string effectiveComponent on the web/SSR side is just as likely to be an
+        // ordinary web component (React Router's <Link>, Next.js's <Link>, any custom
+        // wrapper) as an actual react-native-web primitive, and "not a string" alone isn't a
+        // reliable signal either way. Forwarding them made React DOM warn "Unknown event
+        // handler property" the moment any such component got an interactive modifier
+        // (hover:, active:, …), which is the common case, not the exception.
+        ...!isNative ? hasInteractive ? {
           onPointerDown: handlePointerDown,
           onPointerUp: handlePointerUp,
           onPointerLeave: handlePointerLeave,
-          onPointerCancel: handlePointerCancel,
-          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+          onPointerCancel: handlePointerCancel
         } : {
           onPointerDown,
           onPointerUp,
           onPointerLeave,
-          onPointerCancel,
-          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+          onPointerCancel
         } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,

package/dist/jsx-dev-runtime.js

@@ -1912,6 +1912,16 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    const presets = { none: "none" };
+    return value in presets ? { content: presets[value] } : null;
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -3391,19 +3401,24 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
-      // component (react-native-web components accept both prop names), never when it's a
-      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
-      // property" for onPressIn/onPressOut on a host element even when the value is
-      // undefined — the check is on the prop KEY being present at all, not its value — so
-      // the key must be omitted entirely for string components, not just set to undefined.
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch) —
+      // onPressIn/onPressOut are RN-only prop names and are never forwarded here, even when
+      // Component isn't a literal HTML tag string. A non-string Component on web is just as
+      // likely to be an ordinary web component (React Router's <Link>, Next.js's <Link>, any
+      // custom wrapper) as an actual react-native-web primitive — "not a string" alone was never
+      // a reliable signal that onPressIn/onPressOut are wanted, and forwarding them
+      // unconditionally made React DOM warn "Unknown event handler property" the moment any web
+      // component got an interactive modifier (hover:, active:, …), which is the common case,
+      // not the exception. (A real react-native-web primitive would additionally have this pair
+      // of props silently vanish after hydration anyway, once the browser-only web-substitution
+      // in jsx-runtime.tsx swaps it for a plain host tag — so keeping them pre-hydration would
+      // only have traded one prop-mismatch warning for another.) Genuinely native code paths
+      // still get them via the isNative branch below.
       ...!isNative ? {
         onPointerDown: handlePointerDown,
         onPointerUp: handlePointerUp,
         onPointerLeave: handlePointerLeave,
-        onPointerCancel: handlePointerCancel,
-        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+        onPointerCancel: handlePointerCancel
       } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-RWQKYQWN.mjs";
-import "./chunk-CJRRPENF.mjs";
+} from "./chunk-GTDMKS7C.mjs";
+import "./chunk-WYOKBFSK.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -1913,6 +1913,16 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    const presets = { none: "none" };
+    return value in presets ? { content: presets[value] } : null;
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -3392,19 +3402,24 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
-      // component (react-native-web components accept both prop names), never when it's a
-      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
-      // property" for onPressIn/onPressOut on a host element even when the value is
-      // undefined — the check is on the prop KEY being present at all, not its value — so
-      // the key must be omitted entirely for string components, not just set to undefined.
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch) —
+      // onPressIn/onPressOut are RN-only prop names and are never forwarded here, even when
+      // Component isn't a literal HTML tag string. A non-string Component on web is just as
+      // likely to be an ordinary web component (React Router's <Link>, Next.js's <Link>, any
+      // custom wrapper) as an actual react-native-web primitive — "not a string" alone was never
+      // a reliable signal that onPressIn/onPressOut are wanted, and forwarding them
+      // unconditionally made React DOM warn "Unknown event handler property" the moment any web
+      // component got an interactive modifier (hover:, active:, …), which is the common case,
+      // not the exception. (A real react-native-web primitive would additionally have this pair
+      // of props silently vanish after hydration anyway, once the browser-only web-substitution
+      // in jsx-runtime.tsx swaps it for a plain host tag — so keeping them pre-hydration would
+      // only have traded one prop-mismatch warning for another.) Genuinely native code paths
+      // still get them via the isNative branch below.
       ...!isNative ? {
         onPointerDown: handlePointerDown,
         onPointerUp: handlePointerUp,
         onPointerLeave: handlePointerLeave,
-        onPointerCancel: handlePointerCancel,
-        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+        onPointerCancel: handlePointerCancel
       } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-RWQKYQWN.mjs";
+} from "./chunk-GTDMKS7C.mjs";
 import {
   registerWebElement
-} from "./chunk-CJRRPENF.mjs";
+} from "./chunk-WYOKBFSK.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -1727,6 +1727,16 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    const presets = { none: "none" };
+    return value in presets ? { content: presets[value] } : null;
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -3232,7 +3242,7 @@ function pushTemplateLiteralBody(body, into) {
   while ((im = interpolationRe.exec(body)) !== null) {
     pushClassLikeStrings(im[0], into);
   }
-  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " "), into);
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, () => "$"), into);
 }
 function pushClassLikeStrings(text, into) {
   const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
@@ -3245,9 +3255,9 @@ function pushClassLikeStrings(text, into) {
 }
 function extractClassStrings(code) {
   const found = /* @__PURE__ */ new Set();
-  const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
+  const simpleRe = /(?:className|kb)=(["'])((?:(?!\1).)*)\1/g;
   let m;
-  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
+  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[2], found);
   const jsxExprRe = /(?:className|kb)=\{/g;
   while ((m = jsxExprRe.exec(code)) !== null) {
     let depth = 1;

package/dist/vite-plugin.mjs

@@ -1693,6 +1693,16 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    const presets = { none: "none" };
+    return value in presets ? { content: presets[value] } : null;
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -3198,7 +3208,7 @@ function pushTemplateLiteralBody(body, into) {
   while ((im = interpolationRe.exec(body)) !== null) {
     pushClassLikeStrings(im[0], into);
   }
-  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " "), into);
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, () => "$"), into);
 }
 function pushClassLikeStrings(text, into) {
   const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
@@ -3211,9 +3221,9 @@ function pushClassLikeStrings(text, into) {
 }
 function extractClassStrings(code) {
   const found = /* @__PURE__ */ new Set();
-  const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
+  const simpleRe = /(?:className|kb)=(["'])((?:(?!\1).)*)\1/g;
   let m;
-  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
+  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[2], found);
   const jsxExprRe = /(?:className|kb)=\{/g;
   while ((m = jsxExprRe.exec(code)) !== null) {
     let depth = 1;

package/package.json

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