tailwind-styled-v4 5.0.8 → 5.0.10

package/README.md

@@ -142,9 +142,32 @@ function Alert({ type, children }) {
 }
 ```
 
-### 6. Sub-components (Inline)
+### 6. Sub-components
 
-Definisikan sub-components langsung di template literal dengan syntax `[name] { classes }` — **TypeScript otomatis infer nama tanpa perlu `.withSub<>()`**.
+Ada **dua cara** mendefinisikan sub-components:
+
+#### A. Config Object — Direkomendasikan (Autocomplete + Type Safe)
+
+```tsx
+const Card = tw.div({
+  base: "flex flex-col p-4 rounded-xl bg-white shadow",
+  sub: {
+    header: "font-bold text-lg border-b pb-2",
+    body:   "text-gray-600 py-2",
+    footer: "border-t pt-2 text-sm text-gray-400",
+  },
+})
+
+// TypeScript infer keys dari object literal → autocomplete penuh
+<Card>
+  <Card.header>Judul</Card.header>    // ✅ autocomplete
+  <Card.body>Konten</Card.body>       // ✅ autocomplete
+  <Card.footer>Footer</Card.footer>   // ✅ autocomplete
+  <Card.xyz>?</Card.xyz>              // ❌ TypeScript error
+</Card>
+```
+
+#### B. Template Literal Inline — Ringkas (tanpa autocomplete)
 
 ```tsx
 const Card = tw.div`
@@ -154,24 +177,18 @@ const Card = tw.div`
   [footer] { border-t pt-2 text-sm text-gray-400 }
 `
 
-// TypeScript otomatis tahu: Card.header, Card.body, Card.footer
+// Runtime benar, tapi TypeScript tidak bisa infer nama dari multiline template —
+// ini limitasi TypeScript, bukan bug library. Gunakan config object untuk type safety.
 <Card>
   <Card.header>Judul</Card.header>
   <Card.body>Konten</Card.body>
   <Card.footer>Footer</Card.footer>
 </Card>
-
-// Autocomplete ✓ — Card.nonexistent akan error TypeScript
 ```
 
-> **Catatan:** Sub-components **tidak mewarisi** style base `Card`. Mereka adalah komponen terpisah dengan classes dari block `[name] { ... }`. Untuk mewarisi, gunakan `.extend()` (Pattern B di bawah).
+> Sub-components **tidak mewarisi** style base. Untuk mewarisi, pakai `.extend()` (lihat Pattern B di bawah).
 
-**`.withSub<>()`** hanya diperlukan jika nama sub-component tidak muncul di template literal (misalnya di-register secara dinamis):
-
-```tsx
-// Kasus khusus — nama tidak ada di template
-const Modal = tw.div`fixed inset-0`.withSub<"overlay" | "content">()
-```
+> **Sub-component tidak terdefinisi** tidak akan crash — library otomatis fallback ke `<span>` passthrough. Tapi tetap gunakan config object untuk catch typo di TypeScript.
 
 ### 7. State Engine — Zero-JS State Management
 
@@ -248,9 +265,22 @@ const IconButton = Button.extend`p-2 rounded-full`
 
 ### Pattern Sub-components
 
-**Pattern A: Inline `[name] { }` — Direkomendasikan**
+**Pattern A: Config Object — Direkomendasikan (autocomplete + type safe)**
+
+```tsx
+const Card = tw.div({
+  base: "flex flex-col p-4 rounded-xl bg-white shadow",
+  sub: {
+    header: "font-bold text-lg border-b pb-2",
+    body:   "text-gray-600 py-2",
+    footer: "border-t pt-2 text-sm",
+  },
+})
+// TypeScript infer: Card.header, Card.body, Card.footer ✅ autocomplete
+// Card.xyz → TypeScript error ✅
+```
 
-Cocok kalau sub-components punya style sendiri yang *tidak perlu* mewarisi base:
+**Pattern A2: Inline Template `[name] { }` — Ringkas (tanpa autocomplete)**
 
 ```tsx
 const Card = tw.div`
@@ -259,7 +289,7 @@ const Card = tw.div`
   [body]   { text-gray-600 py-2 }
   [footer] { border-t pt-2 text-sm }
 `
-// TypeScript otomatis: Card.header, Card.body, Card.footer ✓
+// Runtime benar — TypeScript tidak bisa infer nama dari multiline template literal
 ```
 
 **Pattern B: `.extend()` — Sub-components Mewarisi Style Base**

package/dist/{analyzeWorkspace-DuJKh7Ty.d.mts → analyzeWorkspace-BS5O4rhC.d.mts}

@@ -43,6 +43,8 @@ interface AnalyzerReport {
     readonly uniqueClassCount: number;
     readonly totalClassOccurrences: number;
     readonly classStats: AnalyzerClassStats;
+    /** Alias for classStats.top — backward compat & test contract */
+    readonly topClasses: readonly ClassUsage[];
     readonly safelist: readonly string[];
     readonly semantic?: AnalyzerSemanticReport;
 }
@@ -69,9 +71,52 @@ interface ClassToCssResult {
     readonly unknownClasses: readonly string[];
     readonly sizeBytes: number;
 }
+interface NativeAnalyzerBinding {
+    analyzeClasses(filesJson: string, cwd: string, flags: number): unknown;
+    compileCss?: (classes: string[], prefix: string | null) => unknown;
+    /** Detect conflicting Tailwind utilities in a usage list. */
+    detectClassConflicts?(usagesJson: string): {
+        conflicts: Array<{
+            group: string;
+            variantKey: string;
+            classes: string[];
+            message: string;
+        }>;
+        conflictedClassNames: string[];
+    };
+    /** Classify classes as known/unknown Tailwind utilities. */
+    classifyKnownClasses?(classes: string[], safelist: string[], customUtilities: string[]): Array<{
+        className: string;
+        isKnown: boolean;
+        variantKey: string;
+        baseClass: string;
+        utilityPrefix: string;
+        isArbitrary: boolean;
+    }>;
+    /** Aggregate class counts from scan files JSON. */
+    collectClassCounts?(filesJson: string): Array<{
+        name: string;
+        count: number;
+    }>;
+    /** Compute frequency distribution buckets for class usages. */
+    computeClassStats?(usagesJson: string, topLimit: number, frequentThreshold: number): {
+        totalClassOccurrences: number;
+        topJson: string;
+        frequentJson: string;
+        uniqueJson: string;
+    };
+    buildDistribution?(usagesJson: string): {
+        once: number;
+        few: number;
+        moderate: number;
+        frequent: number;
+    };
+}
+
+declare function requireNativeBinding(): Promise<NativeAnalyzerBinding>;
 
-declare function collectClassCounts(scan: ScanWorkspaceResult): Map<string, number>;
-declare function buildDistribution(usages: ClassUsage[]): Record<string, number>;
+declare function collectClassCounts(scan: ScanWorkspaceResult): Promise<Map<string, number>>;
+declare function buildDistribution(usages: ClassUsage[], native?: Awaited<ReturnType<typeof requireNativeBinding>>): Promise<Record<string, number>>;
 /**
  * Analyze Tailwind class usage in a workspace and return usage statistics.
  * Set `semantic.tailwindConfigPath` to override Tailwind config lookup.

package/dist/{analyzeWorkspace-Ct_NTAWt.d.ts → analyzeWorkspace-DDOQdzzI.d.ts}

@@ -43,6 +43,8 @@ interface AnalyzerReport {
     readonly uniqueClassCount: number;
     readonly totalClassOccurrences: number;
     readonly classStats: AnalyzerClassStats;
+    /** Alias for classStats.top — backward compat & test contract */
+    readonly topClasses: readonly ClassUsage[];
     readonly safelist: readonly string[];
     readonly semantic?: AnalyzerSemanticReport;
 }
@@ -69,9 +71,52 @@ interface ClassToCssResult {
     readonly unknownClasses: readonly string[];
     readonly sizeBytes: number;
 }
+interface NativeAnalyzerBinding {
+    analyzeClasses(filesJson: string, cwd: string, flags: number): unknown;
+    compileCss?: (classes: string[], prefix: string | null) => unknown;
+    /** Detect conflicting Tailwind utilities in a usage list. */
+    detectClassConflicts?(usagesJson: string): {
+        conflicts: Array<{
+            group: string;
+            variantKey: string;
+            classes: string[];
+            message: string;
+        }>;
+        conflictedClassNames: string[];
+    };
+    /** Classify classes as known/unknown Tailwind utilities. */
+    classifyKnownClasses?(classes: string[], safelist: string[], customUtilities: string[]): Array<{
+        className: string;
+        isKnown: boolean;
+        variantKey: string;
+        baseClass: string;
+        utilityPrefix: string;
+        isArbitrary: boolean;
+    }>;
+    /** Aggregate class counts from scan files JSON. */
+    collectClassCounts?(filesJson: string): Array<{
+        name: string;
+        count: number;
+    }>;
+    /** Compute frequency distribution buckets for class usages. */
+    computeClassStats?(usagesJson: string, topLimit: number, frequentThreshold: number): {
+        totalClassOccurrences: number;
+        topJson: string;
+        frequentJson: string;
+        uniqueJson: string;
+    };
+    buildDistribution?(usagesJson: string): {
+        once: number;
+        few: number;
+        moderate: number;
+        frequent: number;
+    };
+}
+
+declare function requireNativeBinding(): Promise<NativeAnalyzerBinding>;
 
-declare function collectClassCounts(scan: ScanWorkspaceResult): Map<string, number>;
-declare function buildDistribution(usages: ClassUsage[]): Record<string, number>;
+declare function collectClassCounts(scan: ScanWorkspaceResult): Promise<Map<string, number>>;
+declare function buildDistribution(usages: ClassUsage[], native?: Awaited<ReturnType<typeof requireNativeBinding>>): Promise<Record<string, number>>;
 /**
  * Analyze Tailwind class usage in a workspace and return usage statistics.
  * Set `semantic.tailwindConfigPath` to override Tailwind config lookup.

package/dist/analyzer.d.mts

@@ -1,5 +1,5 @@
-import { C as ClassToCssOptions, a as ClassToCssResult, c as collectClassCounts, b as buildDistribution } from './analyzeWorkspace-DuJKh7Ty.mjs';
-export { A as AnalyzerOptions, d as AnalyzerReport, e as AnalyzerSemanticReport, f as ClassConflict, g as ClassUsage, h as analyzeWorkspace } from './analyzeWorkspace-DuJKh7Ty.mjs';
+import { C as ClassToCssOptions, a as ClassToCssResult, c as collectClassCounts, b as buildDistribution } from './analyzeWorkspace-BS5O4rhC.mjs';
+export { A as AnalyzerOptions, d as AnalyzerReport, e as AnalyzerSemanticReport, f as ClassConflict, g as ClassUsage, h as analyzeWorkspace } from './analyzeWorkspace-BS5O4rhC.mjs';
 import './schemas-DR-SLxZZ.mjs';
 import 'zod';
 
@@ -17,7 +17,9 @@ declare const classToCss: (input: string | string[], options?: ClassToCssOptions
  */
 
 declare const __internal: {
-    normalizeClassInput: (input: string | string[]) => string[];
+    normalizeClassInput: (input: string | string[], _binding?: {
+        normalizeClassInput?: (s: string) => string[];
+    }) => string[];
     splitVariantAndBase: (className: string) => {
         variantKey: string;
         base: string;

package/dist/analyzer.d.ts

@@ -1,5 +1,5 @@
-import { C as ClassToCssOptions, a as ClassToCssResult, c as collectClassCounts, b as buildDistribution } from './analyzeWorkspace-Ct_NTAWt.js';
-export { A as AnalyzerOptions, d as AnalyzerReport, e as AnalyzerSemanticReport, f as ClassConflict, g as ClassUsage, h as analyzeWorkspace } from './analyzeWorkspace-Ct_NTAWt.js';
+import { C as ClassToCssOptions, a as ClassToCssResult, c as collectClassCounts, b as buildDistribution } from './analyzeWorkspace-DDOQdzzI.js';
+export { A as AnalyzerOptions, d as AnalyzerReport, e as AnalyzerSemanticReport, f as ClassConflict, g as ClassUsage, h as analyzeWorkspace } from './analyzeWorkspace-DDOQdzzI.js';
 import './schemas-DR-SLxZZ.js';
 import 'zod';
 
@@ -17,7 +17,9 @@ declare const classToCss: (input: string | string[], options?: ClassToCssOptions
  */
 
 declare const __internal: {
-    normalizeClassInput: (input: string | string[]) => string[];
+    normalizeClassInput: (input: string | string[], _binding?: {
+        normalizeClassInput?: (s: string) => string[];
+    }) => string[];
     splitVariantAndBase: (className: string) => {
         variantKey: string;
         base: string;