@kbach/ui 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/index.d.ts

@@ -191,8 +191,8 @@ type OmittedKeys = 'style';
  * Create a styled component from any React / React Native component.
  *
  * ```tsx
- * const Card = styled(View, 'bg-white dark:bg-gray-800 rounded-xl p-4 shadow-md');
- * const Button = styled(TouchableOpacity, 'bg-blue-500 pressed:bg-blue-700 dark:bg-blue-600 rounded-lg p-3');
+ * const Card = styled(View, 'bg-white dark:bg-gray-9 rounded-xl p-4 shadow-md');
+ * const Button = styled(TouchableOpacity, 'bg-blue-6 pressed:bg-blue-8 dark:bg-blue-7 rounded-lg p-3');
  *
  * // Use it:
  * <Card kb="mt-4">...</Card>
@@ -217,14 +217,14 @@ interface InteractionState {
  *
  * ```tsx
  * // Basic usage
- * const styles = useStyles('bg-white dark:bg-gray-900 p-4');
+ * const styles = useStyles('bg-white dark:bg-gray-9 p-4');
  *
  * // With interaction state
  * const [pressed, setPressed] = useState(false);
- * const styles = useStyles('bg-blue-500 pressed:bg-blue-700', { pressed });
+ * const styles = useStyles('bg-blue-6 pressed:bg-blue-8', { pressed });
  *
  * // Multiple class strings (merged left-to-right)
- * const styles = useStyles(['bg-white p-4', 'dark:bg-gray-900 rounded-xl']);
+ * const styles = useStyles(['bg-white p-4', 'dark:bg-gray-9 rounded-xl']);
  * ```
  */
 declare function useStyles(classString: string | string[], state?: InteractionState): StyleValue;
@@ -309,7 +309,7 @@ declare const InteractiveWrapper: React__default.ForwardRefExoticComponent<Inter
  * });
  *
  * // Web: use as className
- * <div className={kb('bg-white dark:bg-gray-900 p-4') as string} />
+ * <div className={kb('bg-white dark:bg-gray-9 p-4') as string} />
  * ```
  *
  * @param classString   Space-separated utility classes
@@ -320,8 +320,8 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  * Conditionally join class names. Falsy values are ignored.
  *
  * ```ts
- * cx('bg-white p-4', isActive && 'border-2 border-blue-500', undefined)
- * // → 'bg-white p-4 border-2 border-blue-500'
+ * cx('bg-white p-4', isActive && 'border-2 border-blue-6', undefined)
+ * // → 'bg-white p-4 border-2 border-blue-6'
  * ```
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;

package/dist/vite-plugin.d.mts

@@ -145,6 +145,7 @@ interface FrameworkConfig {
 }
 
 declare function formatKbachCSS(tokenCSS: Map<string, string>, theme: ThemeConfig, responsiveRe: RegExp): string;
+declare function extractClassStrings(code: string): string[];
 interface KbachPluginOptions {
     framework?: FrameworkConfig;
     /** Directories to scan for class strings (relative to Vite root). Defaults to common source dirs. */
@@ -152,4 +153,4 @@ interface KbachPluginOptions {
 }
 declare function kbach(userConfigOrOptions?: FrameworkConfig | KbachPluginOptions): Plugin;
 
-export { type KbachPluginOptions, formatKbachCSS, kbach };
+export { type KbachPluginOptions, extractClassStrings, formatKbachCSS, kbach };

package/dist/vite-plugin.d.ts

@@ -145,6 +145,7 @@ interface FrameworkConfig {
 }
 
 declare function formatKbachCSS(tokenCSS: Map<string, string>, theme: ThemeConfig, responsiveRe: RegExp): string;
+declare function extractClassStrings(code: string): string[];
 interface KbachPluginOptions {
     framework?: FrameworkConfig;
     /** Directories to scan for class strings (relative to Vite root). Defaults to common source dirs. */
@@ -152,4 +153,4 @@ interface KbachPluginOptions {
 }
 declare function kbach(userConfigOrOptions?: FrameworkConfig | KbachPluginOptions): Plugin;
 
-export { type KbachPluginOptions, formatKbachCSS, kbach };
+export { type KbachPluginOptions, extractClassStrings, formatKbachCSS, kbach };

package/dist/vite-plugin.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/vite-plugin.ts
 var vite_plugin_exports = {};
 __export(vite_plugin_exports, {
+  extractClassStrings: () => extractClassStrings,
   formatKbachCSS: () => formatKbachCSS,
   kbach: () => kbach
 });
@@ -3577,9 +3578,12 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const replacements = new Map([...colorVars.replacements, ...spacingVars.replacements]);
   const declarations = new Map([...colorVars.declarations, ...spacingVars.declarations]);
   const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
+  const varPatternRes = sortedReplacements.map(
+    ([pattern, replacement]) => [new RegExp(`(?<!\\\\)${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "g"), replacement]
+  );
   function applyVars(css) {
-    for (const [pattern, replacement] of sortedReplacements)
-      css = css.split(pattern).join(replacement);
+    for (const [re, replacement] of varPatternRes)
+      css = css.replace(re, () => replacement);
     return css;
   }
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
@@ -3770,6 +3774,23 @@ function extractClassStrings(code) {
     clsxCallRe.lastIndex = i + 1;
     pushClassLikeStrings(block, found);
   }
+  const styledCallRe = /\bstyled\(/g;
+  while ((m = styledCallRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "(") depth++;
+      else if (ch === ")") {
+        if (--depth === 0) break;
+      }
+      block += ch;
+      i++;
+    }
+    styledCallRe.lastIndex = i + 1;
+    pushClassLikeStrings(block, found);
+  }
   const templateRe = /`([^`]{1,2000})`/g;
   while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
   return [...found];
@@ -4024,6 +4045,7 @@ ${code}`,
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  extractClassStrings,
   formatKbachCSS,
   kbach
 });

package/dist/vite-plugin.mjs

@@ -3542,9 +3542,12 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const replacements = new Map([...colorVars.replacements, ...spacingVars.replacements]);
   const declarations = new Map([...colorVars.declarations, ...spacingVars.declarations]);
   const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
+  const varPatternRes = sortedReplacements.map(
+    ([pattern, replacement]) => [new RegExp(`(?<!\\\\)${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "g"), replacement]
+  );
   function applyVars(css) {
-    for (const [pattern, replacement] of sortedReplacements)
-      css = css.split(pattern).join(replacement);
+    for (const [re, replacement] of varPatternRes)
+      css = css.replace(re, () => replacement);
     return css;
   }
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
@@ -3735,6 +3738,23 @@ function extractClassStrings(code) {
     clsxCallRe.lastIndex = i + 1;
     pushClassLikeStrings(block, found);
   }
+  const styledCallRe = /\bstyled\(/g;
+  while ((m = styledCallRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "(") depth++;
+      else if (ch === ")") {
+        if (--depth === 0) break;
+      }
+      block += ch;
+      i++;
+    }
+    styledCallRe.lastIndex = i + 1;
+    pushClassLikeStrings(block, found);
+  }
   const templateRe = /`([^`]{1,2000})`/g;
   while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
   return [...found];
@@ -3988,6 +4008,7 @@ ${code}`,
   };
 }
 export {
+  extractClassStrings,
   formatKbachCSS,
   kbach
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/ui",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.5",
   "description": "Tailwind-like utility classes and components for React — web, React Native, and Expo",
   "license": "MIT",
   "repository": {