tailwind-styled-v4 5.1.22 → 5.1.24

package/dist/index.d.mts

@@ -50,9 +50,10 @@ type InferStatesProps<T extends ComponentConfig> = {
     [K in keyof T["states"]]?: boolean;
 };
 /**
- * Sub config bisa berupa:
- * - string: "font-bold text-lg" → render <span>
- * - Record<name, string>: nested object per HTML tag
+ * Sub-component config bisa berupa:
+ * - string: "font-bold text-lg" → render <span> dengan classes
+ * - Record<componentName, string>: nested HTML tag dengan component names dan classes
+ * - Record<componentName, SubComponentConfig>: nested HTML tag dengan component names dan full variant config
  *
  * @example
  * sub: {
@@ -60,9 +61,19 @@ type InferStatesProps<T extends ComponentConfig> = {
  *   header: { topBar: "bg-gray-900" },       // → <header> dipanggil Card.topBar
  *   h2: { title: "text-xl font-bold" },      // → <h2> dipanggil Card.title
  *   section: { content: "px-6 py-4" },       // → <section> dipanggil Card.content
+ *   canvas: { base: "p-6", variants: { layout: { wrap: "gap-4", column: "gap-0" } } }  // → <div> dengan variants
  * }
  */
-type SubValue = string | Record<string, string>;
+interface SubComponentConfig {
+    base?: string;
+    variants?: Record<string, Record<string, string>>;
+    defaultVariants?: Record<string, string>;
+    compoundVariants?: Array<{
+        class: string;
+        [key: string]: string;
+    }>;
+}
+type SubValue = string | Record<string, string | SubComponentConfig>;
 /**
  * Boolean props yang di-resolve via bitmask lookup table (pre-generated di build time).
  * Berbeda dari `state` (CSS data-attribute driven) — ini adalah React props boolean.
@@ -108,6 +119,36 @@ interface ComponentConfig {
      * @internal — jangan set manual, ini di-inject otomatis saat build/dev.
      */
     __hash?: string;
+    /**
+     * Wave 3: Semantic component type untuk auto-generated ARIA metadata.
+     * Digunakan oleh build-time ARIA injection plugin untuk determine semantic role.
+     *
+     * Common values: 'button', 'link', 'checkbox', 'radio', 'input', 'form', 'dialog',
+     *                'navigation', 'heading', 'alert', 'tab', 'section', 'status', 'aside'
+     *
+     * @example
+     * '@semantic': 'button'  // → auto-inject role="button"
+     * '@semantic': 'dialog'  // → auto-inject role="dialog", aria-modal="true"
+     */
+    '@semantic'?: string;
+    /**
+     * Wave 3: Explicit ARIA attributes untuk semantic component.
+     * Merged dengan auto-injected ARIA dari semantic type.
+     * User-provided ARIA memiliki precedence lebih tinggi (tidak di-override).
+     *
+     * @example
+     * '@aria': { role: 'tab', 'aria-selected': 'true' }
+     */
+    '@aria'?: Record<string, string>;
+    /**
+     * Wave 3: State → ARIA property mapping untuk semantic metadata.
+     * Determines mana variant/state yang map ke ARIA properties.
+     *
+     * @example
+     * '@state': { expanded: 'aria-expanded', disabled: 'aria-disabled' }
+     * → When expanded prop true → aria-expanded="true" auto-injected
+     */
+    '@state'?: Record<string, string>;
 }
 /**
  * Strip tag prefix dari "tag:name" format sub key.

package/dist/index.d.ts

@@ -50,9 +50,10 @@ type InferStatesProps<T extends ComponentConfig> = {
     [K in keyof T["states"]]?: boolean;
 };
 /**
- * Sub config bisa berupa:
- * - string: "font-bold text-lg" → render <span>
- * - Record<name, string>: nested object per HTML tag
+ * Sub-component config bisa berupa:
+ * - string: "font-bold text-lg" → render <span> dengan classes
+ * - Record<componentName, string>: nested HTML tag dengan component names dan classes
+ * - Record<componentName, SubComponentConfig>: nested HTML tag dengan component names dan full variant config
  *
  * @example
  * sub: {
@@ -60,9 +61,19 @@ type InferStatesProps<T extends ComponentConfig> = {
  *   header: { topBar: "bg-gray-900" },       // → <header> dipanggil Card.topBar
  *   h2: { title: "text-xl font-bold" },      // → <h2> dipanggil Card.title
  *   section: { content: "px-6 py-4" },       // → <section> dipanggil Card.content
+ *   canvas: { base: "p-6", variants: { layout: { wrap: "gap-4", column: "gap-0" } } }  // → <div> dengan variants
  * }
  */
-type SubValue = string | Record<string, string>;
+interface SubComponentConfig {
+    base?: string;
+    variants?: Record<string, Record<string, string>>;
+    defaultVariants?: Record<string, string>;
+    compoundVariants?: Array<{
+        class: string;
+        [key: string]: string;
+    }>;
+}
+type SubValue = string | Record<string, string | SubComponentConfig>;
 /**
  * Boolean props yang di-resolve via bitmask lookup table (pre-generated di build time).
  * Berbeda dari `state` (CSS data-attribute driven) — ini adalah React props boolean.
@@ -108,6 +119,36 @@ interface ComponentConfig {
      * @internal — jangan set manual, ini di-inject otomatis saat build/dev.
      */
     __hash?: string;
+    /**
+     * Wave 3: Semantic component type untuk auto-generated ARIA metadata.
+     * Digunakan oleh build-time ARIA injection plugin untuk determine semantic role.
+     *
+     * Common values: 'button', 'link', 'checkbox', 'radio', 'input', 'form', 'dialog',
+     *                'navigation', 'heading', 'alert', 'tab', 'section', 'status', 'aside'
+     *
+     * @example
+     * '@semantic': 'button'  // → auto-inject role="button"
+     * '@semantic': 'dialog'  // → auto-inject role="dialog", aria-modal="true"
+     */
+    '@semantic'?: string;
+    /**
+     * Wave 3: Explicit ARIA attributes untuk semantic component.
+     * Merged dengan auto-injected ARIA dari semantic type.
+     * User-provided ARIA memiliki precedence lebih tinggi (tidak di-override).
+     *
+     * @example
+     * '@aria': { role: 'tab', 'aria-selected': 'true' }
+     */
+    '@aria'?: Record<string, string>;
+    /**
+     * Wave 3: State → ARIA property mapping untuk semantic metadata.
+     * Determines mana variant/state yang map ke ARIA properties.
+     *
+     * @example
+     * '@state': { expanded: 'aria-expanded', disabled: 'aria-disabled' }
+     * → When expanded prop true → aria-expanded="true" auto-injected
+     */
+    '@state'?: Record<string, string>;
 }
 /**
  * Strip tag prefix dari "tag:name" format sub key.

package/dist/index.js

@@ -5,6 +5,12 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,6 +33,128 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// node_modules/tsup/assets/cjs_shims.js
+var init_cjs_shims = __esm({
+  "node_modules/tsup/assets/cjs_shims.js"() {
+    "use strict";
+  }
+});
+
+// packages/domain/runtime-css/dist/batched.cjs
+var require_batched = __commonJS({
+  "packages/domain/runtime-css/dist/batched.cjs"(exports2, module2) {
+    "use strict";
+    "use client";
+    init_cjs_shims();
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var batchedInjector_exports = {};
+    __export2(batchedInjector_exports, {
+      batchedInject: () => batchedInject,
+      flushBatchedCss: () => flushBatchedCss,
+      getBatchedCssStats: () => getBatchedCssStats,
+      isInjected: () => isInjected,
+      resetBatchedCss: () => resetBatchedCss,
+      syncInject: () => syncInject
+    });
+    module2.exports = __toCommonJS2(batchedInjector_exports);
+    var injected = /* @__PURE__ */ new Set();
+    var pending = [];
+    var _state = {
+      rafHandle: null,
+      styleEl: null
+    };
+    function getStyleElement() {
+      if (_state.styleEl && document.head.contains(_state.styleEl)) return _state.styleEl;
+      _state.styleEl = document.createElement("style");
+      _state.styleEl.id = "__tw-runtime-css";
+      _state.styleEl.setAttribute("data-tw-batched", "true");
+      document.head.appendChild(_state.styleEl);
+      return _state.styleEl;
+    }
+    function insertRuleToSheet(cssRule) {
+      const trimmed = cssRule.trim();
+      if (!trimmed) return;
+      const el = getStyleElement();
+      const sheet = el.sheet;
+      if (sheet) {
+        try {
+          sheet.insertRule(trimmed, sheet.cssRules.length);
+          return;
+        } catch {
+          if (process.env.NODE_ENV === "development") {
+            console.warn("[tw] insertRule failed, falling back to textContent append for rule:", trimmed.slice(0, 80));
+          }
+        }
+      }
+      el.textContent = (el.textContent ?? "") + `
+${trimmed}`;
+    }
+    function batchedInject(cssRule) {
+      if (typeof window === "undefined") return;
+      if (!cssRule || injected.has(cssRule)) return;
+      injected.add(cssRule);
+      pending.push(cssRule);
+      if (_state.rafHandle === null) {
+        _state.rafHandle = requestAnimationFrame(flushBatchedCss);
+      }
+    }
+    function flushBatchedCss() {
+      _state.rafHandle = null;
+      if (pending.length === 0 || typeof document === "undefined") return;
+      const rules = pending.splice(0);
+      for (const rule of rules) {
+        insertRuleToSheet(rule);
+      }
+    }
+    function syncInject(cssRule) {
+      if (typeof document === "undefined") return;
+      if (!cssRule || injected.has(cssRule)) return;
+      injected.add(cssRule);
+      insertRuleToSheet(cssRule);
+    }
+    function isInjected(cssRule) {
+      return injected.has(cssRule);
+    }
+    function resetBatchedCss() {
+      injected.clear();
+      pending.length = 0;
+      if (_state.rafHandle !== null) {
+        cancelAnimationFrame(_state.rafHandle);
+        _state.rafHandle = null;
+      }
+      if (typeof document !== "undefined" && _state.styleEl && document.head.contains(_state.styleEl)) {
+        document.head.removeChild(_state.styleEl);
+        _state.styleEl = null;
+      } else {
+        _state.styleEl = null;
+      }
+    }
+    function getBatchedCssStats() {
+      return {
+        totalInjected: injected.size,
+        pendingCount: pending.length,
+        hasBatchScheduled: _state.rafHandle !== null
+      };
+    }
+  }
+});
+
 // src/umbrella/index.ts
 var umbrella_exports = {};
 __export(umbrella_exports, {
@@ -61,14 +189,21 @@ __export(umbrella_exports, {
   withSubComponents: () => withSubComponents
 });
 module.exports = __toCommonJS(umbrella_exports);
+init_cjs_shims();
 
 // packages/domain/core/src/twProxy.ts
+init_cjs_shims();
 var import_react2 = __toESM(require("react"), 1);
 
 // packages/domain/core/src/createComponent.ts
+init_cjs_shims();
 var import_react = __toESM(require("react"), 1);
 
+// packages/domain/core/src/containerQuery.ts
+init_cjs_shims();
+
 // packages/domain/core/src/native.browser.ts
+init_cjs_shims();
 var getNativeBinding = () => null;
 
 // packages/domain/core/src/containerQuery.ts
@@ -122,7 +257,7 @@ function buildContainerRules(id, container, containerName) {
 }
 var _cqBatchedInjectFn = null;
 try {
-  const mod = require("@tailwind-styled/runtime-css/batched");
+  const mod = require_batched();
   if (typeof mod?.batchedInject === "function") _cqBatchedInjectFn = mod.batchedInject;
 } catch {
 }
@@ -196,7 +331,11 @@ function getContainerRegistry() {
   return containerRegistry;
 }
 
+// packages/domain/core/src/merge.ts
+init_cjs_shims();
+
 // packages/domain/core/src/mergeFallback.ts
+init_cjs_shims();
 var TEXT_SIZE_SUFFIXES = /* @__PURE__ */ new Set([
   "xs",
   "sm",
@@ -512,6 +651,7 @@ function mergeWithRules(rules, ...classLists) {
 }
 
 // packages/domain/core/src/parseTemplateFallback.ts
+init_cjs_shims();
 var SUB_RE = /(?:\[([a-zA-Z][a-zA-Z0-9_-]*)\]|([a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
 var COMMENT_RE = /\/\/[^\n]*/g;
 function collapseSpaces(s) {
@@ -542,6 +682,7 @@ function parseTemplateJs(raw) {
 }
 
 // packages/domain/core/src/stateEngine.ts
+init_cjs_shims();
 var stateRegistry = /* @__PURE__ */ new Map();
 if (typeof window !== "undefined") {
   window.__TW_STATE_REGISTRY__ = stateRegistry;
@@ -574,7 +715,7 @@ function generateStateRules(id, state) {
 var _staticCssDetected = /* @__PURE__ */ new Set();
 var _batchedInjectFn = null;
 try {
-  const mod = require("@tailwind-styled/runtime-css/batched");
+  const mod = require_batched();
   if (typeof mod?.batchedInject === "function") _batchedInjectFn = mod.batchedInject;
 } catch {
 }
@@ -771,15 +912,21 @@ function registerSubComponents(component, template, configSub) {
           value.trim().replace(/\s+/g, " "),
           tag
         );
+      } else if ("base" in value || "variants" in value) {
+        map[key] = createComponent("div", value);
       } else {
         const tag = key;
-        for (const [componentName, classes] of Object.entries(value)) {
-          map[componentName] = createSubComponentAccessor(
-            displayName,
-            componentName,
-            classes.trim().replace(/\s+/g, " "),
-            tag
-          );
+        for (const [componentName, classesOrConfig] of Object.entries(value)) {
+          if (typeof classesOrConfig === "string") {
+            map[componentName] = createSubComponentAccessor(
+              displayName,
+              componentName,
+              classesOrConfig.trim().replace(/\s+/g, " "),
+              tag
+            );
+          } else {
+            map[componentName] = createComponent(tag, classesOrConfig);
+          }
         }
       }
     }
@@ -1022,6 +1169,10 @@ var SKIP_PROXY_KEYS = /* @__PURE__ */ new Set([
 ]);
 function wrapWithSubProxy(component, tagLabel) {
   return new Proxy(component, {
+    // Forward function calls to target component
+    apply(target, thisArg, args) {
+      return Reflect.apply(target, thisArg, args);
+    },
     get(target, prop) {
       const value = target[prop];
       if (value !== void 0) return value;
@@ -1220,6 +1371,7 @@ var tw = Object.assign(twCallable, tagFactories, {
 });
 
 // packages/domain/core/src/cv.ts
+init_cjs_shims();
 var __generatedRegistry = {};
 function registerVariantTable(componentId, table) {
   __generatedRegistry[componentId] = table;
@@ -1355,6 +1507,7 @@ function cv(config, componentId) {
 }
 
 // packages/domain/core/src/cx.ts
+init_cjs_shims();
 function cn(...inputs) {
   const strings = [];
   for (const item of inputs) {
@@ -1391,6 +1544,7 @@ function cx(...inputs) {
 var cxm = cx;
 
 // packages/domain/core/src/styledSystem.ts
+init_cjs_shims();
 function tokenVarName(prefix, group, name) {
   return `--${prefix}-${group}-${name}`;
 }
@@ -1556,6 +1710,7 @@ function createStyledSystem(config) {
 }
 
 // packages/domain/core/src/styled.ts
+init_cjs_shims();
 function resolveVariantClass(options, props) {
   const out = [];
   const variants = options.variants ?? {};
@@ -1587,6 +1742,7 @@ function styled(options) {
 }
 
 // packages/domain/core/src/twTheme.ts
+init_cjs_shims();
 function cssVar(varName, fallback) {
   const name = varName.startsWith("--") ? varName : `--${varName}`;
   return fallback ? `var(${name}, ${fallback})` : `var(${name})`;
@@ -1652,6 +1808,7 @@ var v4Tokens = {
 };
 
 // packages/domain/core/src/registry.ts
+init_cjs_shims();
 var import_react3 = __toESM(require("react"), 1);
 var subComponentRegistry = /* @__PURE__ */ new Map();
 function registerSubComponent(entry) {