tailwind-styled-v4 5.1.22 → 5.1.24

package/dist/compiler.mjs

@@ -171,7 +171,7 @@ var init_nativeBridge = __esm({
     "use strict";
     init_esm_shims();
     init_src();
-    _loadNative = (path6) => __require(path6);
+    _loadNative = (path7) => __require(path7);
     log = (...args) => {
       if (process.env.DEBUG?.includes("compiler:native")) {
         console.log("[compiler:native]", ...args);
@@ -2207,9 +2207,323 @@ var init_routeGraph = __esm({
   }
 });
 
-// packages/domain/compiler/src/index.ts
+// 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_esm_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_esm_shims();
+  }
+});
+
+// packages/domain/compiler/src/typeGenerationPlugin.ts
 import fs4 from "fs";
 import path5 from "path";
+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 = path5.dirname(outputPath);
+  if (!fs4.existsSync(dir)) {
+    fs4.mkdirSync(dir, { recursive: true });
+  }
+  fs4.writeFileSync(outputPath, typeContent, "utf8");
+  console.log(`Generated type stubs \u2192 ${outputPath} (${components.size} components)`);
+}
+var init_typeGenerationPlugin = __esm({
+  "packages/domain/compiler/src/typeGenerationPlugin.ts"() {
+    "use strict";
+    init_esm_shims();
+    init_semanticComponentAnalyzer();
+    init_typeGeneratorFromMetadata();
+  }
+});
+
+// packages/domain/compiler/src/index.ts
+import fs5 from "fs";
+import path6 from "path";
 import { createRequire as createRequire5 } from "module";
 function _layoutClassesToCss(classes) {
   const native = getNativeBridge();
@@ -2258,6 +2572,9 @@ var init_src2 = __esm({
     init_redis();
     init_watch();
     init_routeGraph();
+    init_semanticComponentAnalyzer();
+    init_typeGeneratorFromMetadata();
+    init_typeGenerationPlugin();
     _require3 = createRequire5(
       typeof __require !== "undefined" ? typeof __filename !== "undefined" ? `file://${__filename}` : "file://unknown" : import.meta.url
     );
@@ -2352,7 +2669,7 @@ var init_src2 = __esm({
     };
     scanProjectUsage = (dirs, cwd) => {
       const { batchExtractClasses: batchExtractClasses2 } = _require3("./parser");
-      const files = dirs.map((dir) => path5.resolve(cwd, dir));
+      const files = dirs.map((dir) => path6.resolve(cwd, dir));
       const results = batchExtractClasses2(files) || [];
       const combined = {};
       for (const result of results) {
@@ -2369,13 +2686,13 @@ var init_src2 = __esm({
       const classes = scanProjectUsage(scanDirs, cwd || process.cwd());
       const allClasses = Object.keys(classes).sort();
       if (outputPath) {
-        fs4.writeFileSync(outputPath, JSON.stringify(allClasses, null, 2));
+        fs5.writeFileSync(outputPath, JSON.stringify(allClasses, null, 2));
       }
       return allClasses;
     };
     loadSafelist = (safelistPath) => {
       try {
-        const content = fs4.readFileSync(safelistPath, "utf-8");
+        const content = fs5.readFileSync(safelistPath, "utf-8");
         return JSON.parse(content);
       } catch {
         return [];
@@ -2389,8 +2706,8 @@ var init_src2 = __esm({
         "tailwind.config.cjs"
       ];
       for (const file of configFiles) {
-        const fullPath = path5.join(cwd, file);
-        if (fs4.existsSync(fullPath)) {
+        const fullPath = path6.join(cwd, file);
+        if (fs5.existsSync(fullPath)) {
           const mod = __require(fullPath);
           return mod.default || mod;
         }
@@ -2400,9 +2717,9 @@ var init_src2 = __esm({
     getContentPaths = (cwd = process.cwd()) => {
       return {
         content: [
-          path5.join(cwd, "src/**/*.{js,ts,jsx,tsx}"),
-          path5.join(cwd, "app/**/*.{js,ts,jsx,tsx}"),
-          path5.join(cwd, "pages/**/*.{js,ts,jsx,tsx}")
+          path6.join(cwd, "src/**/*.{js,ts,jsx,tsx}"),
+          path6.join(cwd, "app/**/*.{js,ts,jsx,tsx}"),
+          path6.join(cwd, "pages/**/*.{js,ts,jsx,tsx}")
         ]
       };
     };
@@ -2635,6 +2952,8 @@ export {
   analyzeClassUsageNative,
   analyzeClasses,
   analyzeClassesNative,
+  analyzeComponentBatch,
+  analyzeComponentSemantics,
   analyzeFile,
   analyzeRscNative,
   analyzeVariantUsage,
@@ -2661,6 +2980,7 @@ export {
   clearResolverPool,
   clearThemeCache,
   collectFiles,
+  combineTypeDefinitions,
   compileAnimation,
   compileClass,
   compileClasses,
@@ -2674,6 +2994,7 @@ export {
   compileVariantTableNative,
   computeIncrementalDiff,
   createFingerprint,
+  createTypeGenerationPlugin,
   detectConflicts,
   detectDeadCode,
   diffClassLists,
@@ -2689,6 +3010,7 @@ export {
   extractClassesFromSourceNative,
   extractComponentUsage,
   extractContainerCssFromSource,
+  extractSemanticMetadata,
   extractTwContainerConfigs,
   extractTwStateConfigs,
   extractTwStateConfigsNative,
@@ -2703,8 +3025,14 @@ export {
   generateStaticStateCss,
   generateStaticStateCssNative,
   generateSubComponentTypes,
+  generateTypeDefinition,
+  generateTypeDefinitionsBatch,
+  generateTypeStubFile,
+  generateTypeStubOutputPaths,
+  generateTypesFromComponents,
   getAllRegisteredClasses,
   getAllRoutes,
+  getAriaRoleForSemantic,
   getBucketEngine,
   getCacheOptimizationHints,
   getCacheStatistics,
@@ -2800,6 +3128,7 @@ export {
   registerPluginHook,
   registerPropertyName,
   registerValueName,
+  renderTypeDefinition,
   resetBucketEngine,
   resetCacheStats,
   resetCompilationMetrics,
@@ -2842,6 +3171,7 @@ export {
   twMergeWithSeparator,
   unregisterPluginHook,
   validateCssOutput,
+  validateSemanticMetadata,
   validateThemeConfig,
   valueIdToString,
   walkAndPrefilterSourceFiles,