@kbach/react 0.6.7 → 0.6.9

package/dist/{chunk-5YN6PIXQ.mjs → chunk-35CBHSAG.mjs}

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

package/dist/{chunk-LXOMVLQI.mjs → chunk-XJFOY7HN.mjs}

@@ -791,6 +791,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1237,7 +1244,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1254,10 +1262,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2550,8 +2559,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -2807,7 +2839,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
-      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/index.js

@@ -910,6 +910,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1356,7 +1363,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1373,10 +1381,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2669,8 +2678,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -2885,7 +2917,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
-      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/index.mjs

@@ -36,7 +36,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-LXOMVLQI.mjs";
+} from "./chunk-XJFOY7HN.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -869,6 +869,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1315,7 +1322,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1332,10 +1340,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2628,8 +2637,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -2829,7 +2861,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
-      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-5YN6PIXQ.mjs";
-import "./chunk-LXOMVLQI.mjs";
+} from "./chunk-35CBHSAG.mjs";
+import "./chunk-XJFOY7HN.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -870,6 +870,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1316,7 +1323,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1333,10 +1341,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2629,8 +2638,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -2830,7 +2862,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
-      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-5YN6PIXQ.mjs";
+} from "./chunk-35CBHSAG.mjs";
 import {
   registerWebElement
-} from "./chunk-LXOMVLQI.mjs";
+} from "./chunk-XJFOY7HN.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -70,8 +70,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -701,6 +724,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1147,7 +1177,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1164,10 +1195,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2732,7 +2764,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
-      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }
@@ -3192,6 +3225,23 @@ function toNumericScreens(screens) {
   }
   return out;
 }
+function pushTemplateLiteralBody(body, into) {
+  const interpolationRe = /\$\{(?:[^{}]|\{[^{}]*\})*\}/g;
+  let im;
+  while ((im = interpolationRe.exec(body)) !== null) {
+    pushClassLikeStrings(im[0], into);
+  }
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " "), into);
+}
+function pushClassLikeStrings(text, into) {
+  const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
+  let qm;
+  while ((qm = quotedStringRe.exec(text)) !== null) {
+    const [, quote, content] = qm;
+    if (quote === "`") pushTemplateLiteralBody(content, into);
+    else pushTokens(content, into);
+  }
+}
 function extractClassStrings(code) {
   const found = /* @__PURE__ */ new Set();
   const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
@@ -3212,8 +3262,7 @@ function extractClassStrings(code) {
       i++;
     }
     jsxExprRe.lastIndex = i + 1;
-    const innerStrings = block.match(/["'`]([^"'`]{1,2000})["'`]/g) ?? [];
-    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+    pushClassLikeStrings(block, found);
   }
   const clsxCallRe = /(?:clsx|cn|classnames|cx)\(/g;
   while ((m = clsxCallRe.exec(code)) !== null) {
@@ -3230,19 +3279,16 @@ function extractClassStrings(code) {
       i++;
     }
     clsxCallRe.lastIndex = i + 1;
-    const innerStrings = block.match(/["'`]([^"'`]{1,2000})["'`]/g) ?? [];
-    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+    pushClassLikeStrings(block, found);
   }
   const templateRe = /`([^`]{1,2000})`/g;
-  while ((m = templateRe.exec(code)) !== null) {
-    const staticParts = m[1].replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " ");
-    pushTokens(staticParts, found);
-  }
+  while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
   return [...found];
 }
+var NOT_A_CLASS_NAME_RE = /[${}]|-$|^[?:&|!"'=<>]+$/;
 function pushTokens(str, into) {
   for (const tok of splitClassTokens(str)) {
-    if (tok) into.add(tok);
+    if (tok && !NOT_A_CLASS_NAME_RE.test(tok)) into.add(tok);
   }
 }
 function scanDir(dir, onFile) {

package/dist/vite-plugin.mjs

@@ -36,8 +36,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -667,6 +690,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1113,7 +1143,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1130,10 +1161,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2698,7 +2730,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
-      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }
@@ -3158,6 +3191,23 @@ function toNumericScreens(screens) {
   }
   return out;
 }
+function pushTemplateLiteralBody(body, into) {
+  const interpolationRe = /\$\{(?:[^{}]|\{[^{}]*\})*\}/g;
+  let im;
+  while ((im = interpolationRe.exec(body)) !== null) {
+    pushClassLikeStrings(im[0], into);
+  }
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " "), into);
+}
+function pushClassLikeStrings(text, into) {
+  const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
+  let qm;
+  while ((qm = quotedStringRe.exec(text)) !== null) {
+    const [, quote, content] = qm;
+    if (quote === "`") pushTemplateLiteralBody(content, into);
+    else pushTokens(content, into);
+  }
+}
 function extractClassStrings(code) {
   const found = /* @__PURE__ */ new Set();
   const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
@@ -3178,8 +3228,7 @@ function extractClassStrings(code) {
       i++;
     }
     jsxExprRe.lastIndex = i + 1;
-    const innerStrings = block.match(/["'`]([^"'`]{1,2000})["'`]/g) ?? [];
-    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+    pushClassLikeStrings(block, found);
   }
   const clsxCallRe = /(?:clsx|cn|classnames|cx)\(/g;
   while ((m = clsxCallRe.exec(code)) !== null) {
@@ -3196,19 +3245,16 @@ function extractClassStrings(code) {
       i++;
     }
     clsxCallRe.lastIndex = i + 1;
-    const innerStrings = block.match(/["'`]([^"'`]{1,2000})["'`]/g) ?? [];
-    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+    pushClassLikeStrings(block, found);
   }
   const templateRe = /`([^`]{1,2000})`/g;
-  while ((m = templateRe.exec(code)) !== null) {
-    const staticParts = m[1].replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " ");
-    pushTokens(staticParts, found);
-  }
+  while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
   return [...found];
 }
+var NOT_A_CLASS_NAME_RE = /[${}]|-$|^[?:&|!"'=<>]+$/;
 function pushTokens(str, into) {
   for (const tok of splitClassTokens(str)) {
-    if (tok) into.add(tok);
+    if (tok && !NOT_A_CLASS_NAME_RE.test(tok)) into.add(tok);
   }
 }
 function scanDir(dir, onFile) {

package/package.json

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