@kbach/react 0.6.8 → 0.6.9

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

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

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

@@ -2559,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");

package/dist/index.js

@@ -2678,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");

package/dist/index.mjs

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

package/dist/jsx-dev-runtime.js

@@ -2637,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");

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-HOWJ3U6D.mjs";
-import "./chunk-ELFAWQI6.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

@@ -2638,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");

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-HOWJ3U6D.mjs";
+} from "./chunk-35CBHSAG.mjs";
 import {
   registerWebElement
-} from "./chunk-ELFAWQI6.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");
@@ -3202,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;
@@ -3222,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) {
@@ -3240,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");
@@ -3168,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;
@@ -3188,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) {
@@ -3206,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.8",
+  "version": "0.6.9",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",