stablekit.ts 0.3.2 → 0.4.0

package/dist/eslint.cjs

@@ -87,7 +87,7 @@ function createArchitectureLint(options) {
     stateTokens,
     variantProps = [],
     banColorUtilities = true,
-    classNamePassthrough = [],
+    classNameBlocked = [],
     loadingPassthrough = ["LoadingBoundary"],
     files = ["src/components/**/*.{tsx,jsx}"]
   } = options;
@@ -208,18 +208,13 @@ function createArchitectureLint(options) {
           selector: ":matches(JSXElement, JSXFragment) > JSXExpressionContainer > TemplateLiteral",
           message: "Interpolated text in JSX children. Extract to a const above the return (the linter won't flag a plain variable). For state-driven values, use <StableCounter> for numbers or <StateSwap> for text variants."
         },
-        // --- 5. className on custom components ---
-        ...classNamePassthrough.length ? [
+        // --- 5. className on firewalled components ---
+        ...classNameBlocked.length ? [
           {
-            selector: `JSXOpeningElement[name.name=/^[A-Z]/]:not([name.name=/^(${classNamePassthrough.join("|")})$/]) > JSXAttribute[name.name='className']`,
-            message: "className on a custom component. Components own their own styling \u2014 use a data-attribute, variant prop, or CSS class internally instead of passing Tailwind utilities from the consumer."
+            selector: `JSXOpeningElement[name.name=/^(${classNameBlocked.join("|")})$/] > JSXAttribute[name.name='className']`,
+            message: "className on a firewalled component. This component owns its own styling \u2014 use a data-attribute, variant prop, or CSS class internally instead of passing Tailwind utilities from the consumer."
           }
-        ] : [
-          {
-            selector: "JSXOpeningElement[name.name=/^[A-Z]/] > JSXAttribute[name.name='className']",
-            message: "className on a custom component. Components own their own styling \u2014 use a data-attribute, variant prop, or CSS class internally instead of passing Tailwind utilities from the consumer."
-          }
-        ]
+        ] : []
       ],
       "stablekit/no-loading-conflict": ["error", { passthrough: loadingPassthrough }]
     },

package/dist/eslint.d.cts

@@ -49,11 +49,11 @@ interface ArchitectureLintOptions {
      *  Colors must live in CSS — not in component classNames.
      *  @default true */
     banColorUtilities?: boolean;
-    /** Components that transparently pass className to their root element.
-     *  These are excluded from the className-on-component ban.
-     *  e.g. ["StableText", "StableCounter", "MediaSkeleton", "ChevronDown"]
-     *  @default [] */
-    classNamePassthrough?: string[];
+    /** Components where className is banned (your firewalled primitives).
+     *  Only these components are flagged — everything else is left alone.
+     *  e.g. ["Badge", "Button", "Card", "Input", "IconButton"]
+     *  @default [] (rule is off when empty) */
+    classNameBlocked?: string[];
     /** Components where `loading` prop does NOT trigger a content swap
      *  (e.g. LoadingBoundary controls opacity, not geometry).
      *  These are excluded from the dual-paradigm conflict rule.

package/dist/eslint.d.ts

@@ -49,11 +49,11 @@ interface ArchitectureLintOptions {
      *  Colors must live in CSS — not in component classNames.
      *  @default true */
     banColorUtilities?: boolean;
-    /** Components that transparently pass className to their root element.
-     *  These are excluded from the className-on-component ban.
-     *  e.g. ["StableText", "StableCounter", "MediaSkeleton", "ChevronDown"]
-     *  @default [] */
-    classNamePassthrough?: string[];
+    /** Components where className is banned (your firewalled primitives).
+     *  Only these components are flagged — everything else is left alone.
+     *  e.g. ["Badge", "Button", "Card", "Input", "IconButton"]
+     *  @default [] (rule is off when empty) */
+    classNameBlocked?: string[];
     /** Components where `loading` prop does NOT trigger a content swap
      *  (e.g. LoadingBoundary controls opacity, not geometry).
      *  These are excluded from the dual-paradigm conflict rule.

package/dist/eslint.js

@@ -63,7 +63,7 @@ function createArchitectureLint(options) {
     stateTokens,
     variantProps = [],
     banColorUtilities = true,
-    classNamePassthrough = [],
+    classNameBlocked = [],
     loadingPassthrough = ["LoadingBoundary"],
     files = ["src/components/**/*.{tsx,jsx}"]
   } = options;
@@ -184,18 +184,13 @@ function createArchitectureLint(options) {
           selector: ":matches(JSXElement, JSXFragment) > JSXExpressionContainer > TemplateLiteral",
           message: "Interpolated text in JSX children. Extract to a const above the return (the linter won't flag a plain variable). For state-driven values, use <StableCounter> for numbers or <StateSwap> for text variants."
         },
-        // --- 5. className on custom components ---
-        ...classNamePassthrough.length ? [
+        // --- 5. className on firewalled components ---
+        ...classNameBlocked.length ? [
           {
-            selector: `JSXOpeningElement[name.name=/^[A-Z]/]:not([name.name=/^(${classNamePassthrough.join("|")})$/]) > JSXAttribute[name.name='className']`,
-            message: "className on a custom component. Components own their own styling \u2014 use a data-attribute, variant prop, or CSS class internally instead of passing Tailwind utilities from the consumer."
+            selector: `JSXOpeningElement[name.name=/^(${classNameBlocked.join("|")})$/] > JSXAttribute[name.name='className']`,
+            message: "className on a firewalled component. This component owns its own styling \u2014 use a data-attribute, variant prop, or CSS class internally instead of passing Tailwind utilities from the consumer."
           }
-        ] : [
-          {
-            selector: "JSXOpeningElement[name.name=/^[A-Z]/] > JSXAttribute[name.name='className']",
-            message: "className on a custom component. Components own their own styling \u2014 use a data-attribute, variant prop, or CSS class internally instead of passing Tailwind utilities from the consumer."
-          }
-        ]
+        ] : []
       ],
       "stablekit/no-loading-conflict": ["error", { passthrough: loadingPassthrough }]
     },

package/llms.txt

@@ -317,10 +317,10 @@ change to structure requires editing `.css`, a boundary has leaked.
      or use a StableKit component (for state-driven swaps — StateSwap,
      LayoutMap, LoadingBoundary, FadeTransition, StableField, StableCounter,
      LayoutGroup). These rules are always on.
-     `className` on PascalCase components is banned — components own their own
-     styling. Use `classNamePassthrough` to exempt transparent wrappers (e.g.
-     `StableText`, `MediaSkeleton`, Lucide icons) that forward className to
-     their root element.
+     `classNameBlocked` declares your firewalled primitives (e.g.
+     `["Badge", "Button", "Card", "Input"]`). Only those components are flagged
+     for className — everything else (Lucide icons, Radix, React Router, etc.)
+     is left alone. The rule is off when `classNameBlocked` is empty.
      A custom rule (`stablekit/no-loading-conflict`) catches dual-paradigm
      conflicts: if a component has a `loading` prop (which triggers an internal
      content swap via StateSwap), children must not be variables derived from

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stablekit.ts",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "React toolkit for layout stability — zero-shift components for loading states, content swaps, and spatial containers.",
   "type": "module",
   "main": "./dist/index.cjs",