tailwind-styled-v4 5.1.22 → 5.1.23

package/dist/compiler.js

@@ -186,7 +186,7 @@ var init_nativeBridge = __esm({
     "use strict";
     init_cjs_shims();
     init_src();
-    _loadNative = (path5) => require(path5);
+    _loadNative = (path6) => require(path6);
     log = (...args) => {
       if (process.env.DEBUG?.includes("compiler:native")) {
         console.log("[compiler:native]", ...args);
@@ -2224,6 +2224,321 @@ var init_routeGraph = __esm({
   }
 });
 
+// packages/domain/compiler/src/semanticComponentAnalyzer.ts
+function inferSemanticFromTag(tag) {
+  const tagLower = tag.toLowerCase();
+  const semanticMap = {
+    "button": "button",
+    "a": "link",
+    "nav": "navigation",
+    "h1": "heading",
+    "h2": "heading",
+    "h3": "heading",
+    "h4": "heading",
+    "h5": "heading",
+    "h6": "heading",
+    "p": "paragraph",
+    "ul": "list",
+    "ol": "list",
+    "input": "input",
+    "form": "form",
+    "dialog": "dialog",
+    "select": "select",
+    "textarea": "input"
+  };
+  return semanticMap[tagLower] ?? "custom";
+}
+function extractSemanticMetadata(config) {
+  const metadata = {};
+  for (const [key, value] of Object.entries(config)) {
+    if (key.startsWith("@")) {
+      metadata[key] = value;
+    }
+  }
+  return metadata;
+}
+function analyzeComponentSemantics(componentName, config) {
+  const metadata = extractSemanticMetadata(config);
+  const tag = config.tag ?? "div";
+  let semantic = inferSemanticFromTag(tag);
+  if (metadata["@semantic"]) {
+    semantic = metadata["@semantic"];
+  }
+  const stateProperties = /* @__PURE__ */ new Map();
+  if (metadata["@state"]) {
+    for (const [key, value] of Object.entries(metadata["@state"])) {
+      if (typeof value === "string") {
+        stateProperties.set(key, value);
+      }
+    }
+  }
+  return {
+    componentName,
+    tag,
+    semantic,
+    metadata,
+    stateProperties
+  };
+}
+function getAriaRoleForSemantic(semantic) {
+  const roleMap = {
+    "button": "button",
+    "link": "link",
+    "navigation": "navigation",
+    "heading": "heading",
+    "paragraph": void 0,
+    // paragraph tidak perlu explicit role
+    "list": "list",
+    "input": "textbox",
+    "form": "form",
+    "dialog": "dialog",
+    "alert": "alert",
+    "tab": "tab",
+    "checkbox": "checkbox",
+    "radio": "radio",
+    "select": "listbox",
+    "custom": void 0
+  };
+  return roleMap[semantic];
+}
+function analyzeComponentBatch(components) {
+  const results = /* @__PURE__ */ new Map();
+  for (const [name, config] of components) {
+    const analysis = analyzeComponentSemantics(name, config);
+    results.set(name, analysis);
+  }
+  return results;
+}
+function validateSemanticMetadata(metadata) {
+  const issues = [];
+  const validSemantics = [
+    "button",
+    "link",
+    "navigation",
+    "heading",
+    "paragraph",
+    "list",
+    "input",
+    "form",
+    "dialog",
+    "alert",
+    "tab",
+    "checkbox",
+    "radio",
+    "select",
+    "custom"
+  ];
+  if (metadata["@semantic"] && !validSemantics.includes(metadata["@semantic"])) {
+    issues.push(`Invalid @semantic value: ${metadata["@semantic"]}`);
+  }
+  if (metadata["@aria"]) {
+    if (typeof metadata["@aria"] !== "object" || Array.isArray(metadata["@aria"])) {
+      issues.push("@aria must be object");
+    }
+  }
+  if (metadata["@state"]) {
+    if (typeof metadata["@state"] !== "object" || Array.isArray(metadata["@state"])) {
+      issues.push("@state must be object");
+    }
+    for (const [key, value] of Object.entries(metadata["@state"])) {
+      if (typeof value !== "string") {
+        issues.push(`@state.${key} must be string (ARIA property name)`);
+      }
+    }
+  }
+  return issues;
+}
+var init_semanticComponentAnalyzer = __esm({
+  "packages/domain/compiler/src/semanticComponentAnalyzer.ts"() {
+    "use strict";
+    init_cjs_shims();
+  }
+});
+
+// packages/domain/compiler/src/typeGeneratorFromMetadata.ts
+function generateJsDocFromSemantic(analysis) {
+  const lines = [
+    "/**",
+    ` * ${analysis.componentName}`,
+    ` * `,
+    ` * Semantic intent: ${analysis.semantic}`,
+    ` * Tag: ${analysis.tag}`
+  ];
+  if (analysis.metadata["@aria"]) {
+    lines.push(` * ARIA: auto-injected dari semantic metadata`);
+  }
+  if (analysis.stateProperties.size > 0) {
+    const states = Array.from(analysis.stateProperties.entries()).map(([k, v]) => `${k} \u2192 ${v}`).join(", ");
+    lines.push(` * State mappings: ${states}`);
+  }
+  lines.push(" */");
+  return lines.join("\n");
+}
+function getBaseComponentType(analysis) {
+  const tag = analysis.tag.toLowerCase();
+  const tagMap = {
+    "button": "React.ButtonHTMLAttributes<HTMLButtonElement>",
+    "a": "React.AnchorHTMLAttributes<HTMLAnchorElement>",
+    "input": "React.InputHTMLAttributes<HTMLInputElement>",
+    "textarea": "React.TextareaHTMLAttributes<HTMLTextAreaElement>",
+    "select": "React.SelectHTMLAttributes<HTMLSelectElement>",
+    "form": "React.FormHTMLAttributes<HTMLFormElement>",
+    "div": "React.HTMLAttributes<HTMLDivElement>",
+    "span": "React.HTMLAttributes<HTMLSpanElement>",
+    "nav": "React.HTMLAttributes<HTMLElement>",
+    "dialog": "React.DialogHTMLAttributes<HTMLDialogElement>"
+  };
+  return tagMap[tag] ?? "React.HTMLAttributes<HTMLElement>";
+}
+function generateStateProperties(analysis) {
+  const props = /* @__PURE__ */ new Map();
+  for (const [stateName, ariaProp] of analysis.stateProperties) {
+    props.set(stateName, {
+      name: stateName,
+      type: "boolean | undefined",
+      description: `State mapped to ARIA property: ${ariaProp}`,
+      optional: true
+    });
+  }
+  return props;
+}
+function generateTypeDefinition(analysis, componentName) {
+  const interfaceName = `${componentName}Props`;
+  const baseType = getBaseComponentType(analysis);
+  const stateProps = generateStateProperties(analysis);
+  return {
+    interfaceName,
+    extendsFrom: baseType,
+    properties: stateProps,
+    jsDocComment: generateJsDocFromSemantic(analysis)
+  };
+}
+function renderTypeDefinition(def) {
+  const lines = [];
+  if (def.jsDocComment) {
+    lines.push(def.jsDocComment);
+  }
+  lines.push(`export interface ${def.interfaceName} extends ${def.extendsFrom} {`);
+  for (const prop of def.properties.values()) {
+    const optional = prop.optional ? "?" : "";
+    if (prop.description) {
+      lines.push(`  /** ${prop.description} */`);
+    }
+    lines.push(`  ${prop.name}${optional}: ${prop.type}`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function generateTypeStubFile(analyses, packageName = "tailwind-styled") {
+  const lines = [
+    "/**",
+    ` * Auto-generated type definitions dari semantic component metadata`,
+    ` * Generated at build-time dari @semantic, @aria, @state annotations`,
+    ` * Package: ${packageName}`,
+    ` */`,
+    "",
+    "import type * as React from 'react'",
+    ""
+  ];
+  const interfaces = [];
+  for (const [name, analysis] of analyses) {
+    const def = generateTypeDefinition(analysis, name);
+    interfaces.push(renderTypeDefinition(def));
+  }
+  lines.push(interfaces.join("\n\n"));
+  lines.push("");
+  lines.push("export namespace Components {");
+  for (const analysis of analyses.values()) {
+    lines.push(`  export type ${analysis.componentName}Props = ${analysis.componentName}Props`);
+  }
+  lines.push("}");
+  lines.push("");
+  return lines.join("\n");
+}
+function generateTypeStubOutputPaths(outputDir, packageName) {
+  return [
+    {
+      filePath: `${outputDir}/${packageName}.d.ts`,
+      content: "",
+      // Will be set by caller
+      format: "dts"
+    }
+  ];
+}
+function generateTypeDefinitionsBatch(analyses) {
+  const results = /* @__PURE__ */ new Map();
+  for (const [name, analysis] of analyses) {
+    const def = generateTypeDefinition(analysis, name);
+    const code = renderTypeDefinition(def);
+    results.set(name, code);
+  }
+  return results;
+}
+function combineTypeDefinitions(definitions, packageName = "tailwind-styled") {
+  const lines = [
+    "/**",
+    ` * Auto-generated type definitions dari semantic component metadata`,
+    ` * Generated at build-time dari @semantic, @aria, @state annotations`,
+    ` * Package: ${packageName}`,
+    " */",
+    "",
+    "import type * as React from 'react'",
+    ""
+  ];
+  const defs = Array.from(definitions.values());
+  lines.push(defs.join("\n\n"));
+  return lines.join("\n");
+}
+var init_typeGeneratorFromMetadata = __esm({
+  "packages/domain/compiler/src/typeGeneratorFromMetadata.ts"() {
+    "use strict";
+    init_cjs_shims();
+  }
+});
+
+// packages/domain/compiler/src/typeGenerationPlugin.ts
+function createTypeGenerationPlugin(options = {}) {
+  const {
+    outputDir = "./dist/types",
+    packageName = "tailwind-styled",
+    verbose = false,
+    componentRegistryPath
+  } = options;
+  return {
+    name: "type-generation",
+    async setup(build) {
+      if (verbose) {
+        console.log("[type-generation] Plugin loaded");
+      }
+    }
+  };
+}
+async function generateTypesFromComponents(components, outputPath, packageName = "tailwind-styled") {
+  if (components.size === 0) {
+    console.warn("No components provided");
+    return;
+  }
+  const analyses = analyzeComponentBatch(components);
+  const typeContent = generateTypeStubFile(analyses, packageName);
+  const dir = import_node_path3.default.dirname(outputPath);
+  if (!import_node_fs3.default.existsSync(dir)) {
+    import_node_fs3.default.mkdirSync(dir, { recursive: true });
+  }
+  import_node_fs3.default.writeFileSync(outputPath, typeContent, "utf8");
+  console.log(`Generated type stubs \u2192 ${outputPath} (${components.size} components)`);
+}
+var import_node_fs3, import_node_path3;
+var init_typeGenerationPlugin = __esm({
+  "packages/domain/compiler/src/typeGenerationPlugin.ts"() {
+    "use strict";
+    init_cjs_shims();
+    import_node_fs3 = __toESM(require("fs"), 1);
+    import_node_path3 = __toESM(require("path"), 1);
+    init_semanticComponentAnalyzer();
+    init_typeGeneratorFromMetadata();
+  }
+});
+
 // packages/domain/compiler/src/index.ts
 function _layoutClassesToCss(classes) {
   const native = getNativeBridge();
@@ -2259,13 +2574,13 @@ function extractContainerCssFromSource(source) {
   }
   return rules.join("\n");
 }
-var import_node_fs3, import_node_path3, import_node_module5, _require3, transformSource, hasTwUsage, isAlreadyTransformed, shouldProcess, compileCssFromClasses, buildStyleTag, generateCssForClasses, eliminateDeadCss, findDeadVariants, runElimination, scanProjectUsage, generateSafelist, loadSafelist, loadTailwindConfig, getContentPaths, _CONTAINER_BREAKPOINTS, runLoaderTransform, shouldSkipFile, fileToRoute, getAllRoutes, _fileClassesMap, _globalClasses, getRouteClasses, getAllRegisteredClasses, registerFileClasses, registerGlobalClasses, resetRouteClassRegistry, _incrementalEngineInstance, getIncrementalEngine, resetIncrementalEngine, IncrementalEngine, getBucketEngine, resetBucketEngine, BucketEngine, classifyNode, detectConflicts, bucketSort, analyzeFile, analyzeVariantUsage, injectClientDirective, injectServerOnlyComment, analyzeClasses, extractTwStateConfigs, generateStaticStateCss, extractAndGenerateStateCss;
+var import_node_fs4, import_node_path4, import_node_module5, _require3, transformSource, hasTwUsage, isAlreadyTransformed, shouldProcess, compileCssFromClasses, buildStyleTag, generateCssForClasses, eliminateDeadCss, findDeadVariants, runElimination, scanProjectUsage, generateSafelist, loadSafelist, loadTailwindConfig, getContentPaths, _CONTAINER_BREAKPOINTS, runLoaderTransform, shouldSkipFile, fileToRoute, getAllRoutes, _fileClassesMap, _globalClasses, getRouteClasses, getAllRegisteredClasses, registerFileClasses, registerGlobalClasses, resetRouteClassRegistry, _incrementalEngineInstance, getIncrementalEngine, resetIncrementalEngine, IncrementalEngine, getBucketEngine, resetBucketEngine, BucketEngine, classifyNode, detectConflicts, bucketSort, analyzeFile, analyzeVariantUsage, injectClientDirective, injectServerOnlyComment, analyzeClasses, extractTwStateConfigs, generateStaticStateCss, extractAndGenerateStateCss;
 var init_src2 = __esm({
   "packages/domain/compiler/src/index.ts"() {
     "use strict";
     init_cjs_shims();
-    import_node_fs3 = __toESM(require("fs"), 1);
-    import_node_path3 = __toESM(require("path"), 1);
+    import_node_fs4 = __toESM(require("fs"), 1);
+    import_node_path4 = __toESM(require("path"), 1);
     import_node_module5 = require("module");
     init_nativeBridge();
     init_compiler();
@@ -2275,6 +2590,9 @@ var init_src2 = __esm({
     init_redis();
     init_watch();
     init_routeGraph();
+    init_semanticComponentAnalyzer();
+    init_typeGeneratorFromMetadata();
+    init_typeGenerationPlugin();
     _require3 = (0, import_node_module5.createRequire)(
       typeof require !== "undefined" ? typeof __filename !== "undefined" ? `file://${__filename}` : "file://unknown" : importMetaUrl
     );
@@ -2369,7 +2687,7 @@ var init_src2 = __esm({
     };
     scanProjectUsage = (dirs, cwd) => {
       const { batchExtractClasses: batchExtractClasses2 } = _require3("./parser");
-      const files = dirs.map((dir) => import_node_path3.default.resolve(cwd, dir));
+      const files = dirs.map((dir) => import_node_path4.default.resolve(cwd, dir));
       const results = batchExtractClasses2(files) || [];
       const combined = {};
       for (const result of results) {
@@ -2386,13 +2704,13 @@ var init_src2 = __esm({
       const classes = scanProjectUsage(scanDirs, cwd || process.cwd());
       const allClasses = Object.keys(classes).sort();
       if (outputPath) {
-        import_node_fs3.default.writeFileSync(outputPath, JSON.stringify(allClasses, null, 2));
+        import_node_fs4.default.writeFileSync(outputPath, JSON.stringify(allClasses, null, 2));
       }
       return allClasses;
     };
     loadSafelist = (safelistPath) => {
       try {
-        const content = import_node_fs3.default.readFileSync(safelistPath, "utf-8");
+        const content = import_node_fs4.default.readFileSync(safelistPath, "utf-8");
         return JSON.parse(content);
       } catch {
         return [];
@@ -2406,8 +2724,8 @@ var init_src2 = __esm({
         "tailwind.config.cjs"
       ];
       for (const file of configFiles) {
-        const fullPath = import_node_path3.default.join(cwd, file);
-        if (import_node_fs3.default.existsSync(fullPath)) {
+        const fullPath = import_node_path4.default.join(cwd, file);
+        if (import_node_fs4.default.existsSync(fullPath)) {
           const mod = require(fullPath);
           return mod.default || mod;
         }
@@ -2417,9 +2735,9 @@ var init_src2 = __esm({
     getContentPaths = (cwd = process.cwd()) => {
       return {
         content: [
-          import_node_path3.default.join(cwd, "src/**/*.{js,ts,jsx,tsx}"),
-          import_node_path3.default.join(cwd, "app/**/*.{js,ts,jsx,tsx}"),
-          import_node_path3.default.join(cwd, "pages/**/*.{js,ts,jsx,tsx}")
+          import_node_path4.default.join(cwd, "src/**/*.{js,ts,jsx,tsx}"),
+          import_node_path4.default.join(cwd, "app/**/*.{js,ts,jsx,tsx}"),
+          import_node_path4.default.join(cwd, "pages/**/*.{js,ts,jsx,tsx}")
         ]
       };
     };
@@ -2651,6 +2969,8 @@ __export(compiler_exports, {
   analyzeClassUsageNative: () => analyzeClassUsageNative,
   analyzeClasses: () => analyzeClasses,
   analyzeClassesNative: () => analyzeClassesNative,
+  analyzeComponentBatch: () => analyzeComponentBatch,
+  analyzeComponentSemantics: () => analyzeComponentSemantics,
   analyzeFile: () => analyzeFile,
   analyzeRscNative: () => analyzeRscNative,
   analyzeVariantUsage: () => analyzeVariantUsage,
@@ -2677,6 +2997,7 @@ __export(compiler_exports, {
   clearResolverPool: () => clearResolverPool,
   clearThemeCache: () => clearThemeCache,
   collectFiles: () => collectFiles,
+  combineTypeDefinitions: () => combineTypeDefinitions,
   compileAnimation: () => compileAnimation,
   compileClass: () => compileClass,
   compileClasses: () => compileClasses,
@@ -2690,6 +3011,7 @@ __export(compiler_exports, {
   compileVariantTableNative: () => compileVariantTableNative,
   computeIncrementalDiff: () => computeIncrementalDiff,
   createFingerprint: () => createFingerprint,
+  createTypeGenerationPlugin: () => createTypeGenerationPlugin,
   detectConflicts: () => detectConflicts,
   detectDeadCode: () => detectDeadCode,
   diffClassLists: () => diffClassLists,
@@ -2705,6 +3027,7 @@ __export(compiler_exports, {
   extractClassesFromSourceNative: () => extractClassesFromSourceNative,
   extractComponentUsage: () => extractComponentUsage,
   extractContainerCssFromSource: () => extractContainerCssFromSource,
+  extractSemanticMetadata: () => extractSemanticMetadata,
   extractTwContainerConfigs: () => extractTwContainerConfigs,
   extractTwStateConfigs: () => extractTwStateConfigs,
   extractTwStateConfigsNative: () => extractTwStateConfigsNative,
@@ -2719,8 +3042,14 @@ __export(compiler_exports, {
   generateStaticStateCss: () => generateStaticStateCss,
   generateStaticStateCssNative: () => generateStaticStateCssNative,
   generateSubComponentTypes: () => generateSubComponentTypes,
+  generateTypeDefinition: () => generateTypeDefinition,
+  generateTypeDefinitionsBatch: () => generateTypeDefinitionsBatch,
+  generateTypeStubFile: () => generateTypeStubFile,
+  generateTypeStubOutputPaths: () => generateTypeStubOutputPaths,
+  generateTypesFromComponents: () => generateTypesFromComponents,
   getAllRegisteredClasses: () => getAllRegisteredClasses,
   getAllRoutes: () => getAllRoutes,
+  getAriaRoleForSemantic: () => getAriaRoleForSemantic,
   getBucketEngine: () => getBucketEngine,
   getCacheOptimizationHints: () => getCacheOptimizationHints,
   getCacheStatistics: () => getCacheStatistics,
@@ -2816,6 +3145,7 @@ __export(compiler_exports, {
   registerPluginHook: () => registerPluginHook,
   registerPropertyName: () => registerPropertyName,
   registerValueName: () => registerValueName,
+  renderTypeDefinition: () => renderTypeDefinition,
   resetBucketEngine: () => resetBucketEngine,
   resetCacheStats: () => resetCacheStats,
   resetCompilationMetrics: () => resetCompilationMetrics,
@@ -2858,6 +3188,7 @@ __export(compiler_exports, {
   twMergeWithSeparator: () => twMergeWithSeparator,
   unregisterPluginHook: () => unregisterPluginHook,
   validateCssOutput: () => validateCssOutput,
+  validateSemanticMetadata: () => validateSemanticMetadata,
   validateThemeConfig: () => validateThemeConfig,
   valueIdToString: () => valueIdToString,
   walkAndPrefilterSourceFiles: () => walkAndPrefilterSourceFiles,
@@ -2880,6 +3211,8 @@ init_src2();
   analyzeClassUsageNative,
   analyzeClasses,
   analyzeClassesNative,
+  analyzeComponentBatch,
+  analyzeComponentSemantics,
   analyzeFile,
   analyzeRscNative,
   analyzeVariantUsage,
@@ -2906,6 +3239,7 @@ init_src2();
   clearResolverPool,
   clearThemeCache,
   collectFiles,
+  combineTypeDefinitions,
   compileAnimation,
   compileClass,
   compileClasses,
@@ -2919,6 +3253,7 @@ init_src2();
   compileVariantTableNative,
   computeIncrementalDiff,
   createFingerprint,
+  createTypeGenerationPlugin,
   detectConflicts,
   detectDeadCode,
   diffClassLists,
@@ -2934,6 +3269,7 @@ init_src2();
   extractClassesFromSourceNative,
   extractComponentUsage,
   extractContainerCssFromSource,
+  extractSemanticMetadata,
   extractTwContainerConfigs,
   extractTwStateConfigs,
   extractTwStateConfigsNative,
@@ -2948,8 +3284,14 @@ init_src2();
   generateStaticStateCss,
   generateStaticStateCssNative,
   generateSubComponentTypes,
+  generateTypeDefinition,
+  generateTypeDefinitionsBatch,
+  generateTypeStubFile,
+  generateTypeStubOutputPaths,
+  generateTypesFromComponents,
   getAllRegisteredClasses,
   getAllRoutes,
+  getAriaRoleForSemantic,
   getBucketEngine,
   getCacheOptimizationHints,
   getCacheStatistics,
@@ -3045,6 +3387,7 @@ init_src2();
   registerPluginHook,
   registerPropertyName,
   registerValueName,
+  renderTypeDefinition,
   resetBucketEngine,
   resetCacheStats,
   resetCompilationMetrics,
@@ -3087,6 +3430,7 @@ init_src2();
   twMergeWithSeparator,
   unregisterPluginHook,
   validateCssOutput,
+  validateSemanticMetadata,
   validateThemeConfig,
   valueIdToString,
   walkAndPrefilterSourceFiles,