tailwind-styled-v4 5.1.26 → 5.1.28

package/CHANGELOG.md

@@ -11,6 +11,24 @@ dan project ini mengikuti [Semantic Versioning](https://semver.org/spec/v2.0.0.h
 
 All Wave 1-3 features are published to npm and integrated in production (next-js-app example).
 
+#### Wave 5.3: TypeScript Props Type Inference Fix (v5.0.18+ ✅ JULY 4, 2026)
+
+- **Fixed: `RuntimeProps` Type Now Supports All HTML Attributes (ARIA, data-*, event handlers, etc.)** ✅
+  - **Problem:** Passing `role`, `aria-label`, `aria-selected`, `onClick`, `data-*`, and other standard HTML attributes to `tw.*` components resulted in TypeScript errors `Property 'X' does not exist on type...`
+  - **Root cause:** `RuntimeProps<TConfig>` was not tag-specific — all `tw.button`, `tw.input`, `tw.div` used identical prop types, ignoring React's built-in tag-specific attribute inference
+  - **Solution:** Added `Tag extends React.ElementType` generic parameter to `RuntimeProps`, then use `React.ComponentPropsWithoutRef<TTag>` to dynamically extract all valid props for the actual HTML tag
+    ```typescript
+    // Before: Generic, ignored tag-specific attributes
+    type RuntimeProps<TConfig> = InferVariantProps<TConfig> & React.HTMLAttributes<HTMLElement>
+    
+    // After: Tag-specific, includes all native HTML props
+    type RuntimeProps<TConfig, TTag extends React.ElementType> = 
+      InferVariantProps<TConfig> & React.ComponentPropsWithoutRef<TTag>
+    ```
+  - **Impact:** All HTML attributes now work — ARIA attributes, data-attributes, event handlers with correct typings, tag-specific attributes (e.g. `href` on `<a>`, `value` on `<input>`)
+  - **Validated:** `npm run build:packages` ✅, `examples/next-js-app tsc --noEmit` ✅, real component usage with ARIA in `aria-dynamic-theme/` example ✅
+  - **Reference:** `packages/domain/core/src/createComponent.ts` (lines 219-225), `known-issues.md` (2026-07-04 entry)
+
 #### Wave 5.2: Complete Build-Time Magic Documentation (v5.0.17+ ✅ JULY 3, 2026)
 
 - **18-Layer Architecture Documentation** - Complete exploration of all magic layers di next-js-app

package/dist/index.browser.mjs

@@ -976,12 +976,6 @@ function attachExtend(component, originalTag, base, config) {
       }
     });
   };
-  component.animate = async (_opts) => {
-    console.warn(
-      '[tailwind-styled-v4] .animate() tidak tersedia di main bundle.\nGunakan: import { animate } from "tailwind-styled-v4/animate"'
-    );
-    return component;
-  };
   component.withSub = (() => component);
   return component;
 }
@@ -1127,11 +1121,12 @@ function parseTemplate(strings, exprs) {
   return result;
 }
 function makeTag(tag) {
-  return ((stringsOrConfig, ...exprs) => {
+  const impl = ((stringsOrConfig, ...exprs) => {
     if (!Array.isArray(stringsOrConfig) && typeof stringsOrConfig === "object" && stringsOrConfig !== null && !("raw" in stringsOrConfig)) {
       return createComponent(tag, stringsOrConfig);
     }
-    const parsed = parseTemplate(stringsOrConfig, exprs);
+    const strings = stringsOrConfig;
+    const parsed = parseTemplate(strings, exprs);
     const component = createComponent(tag, parsed.base);
     if (parsed.hasSubs) {
       for (const [name, classes] of Object.entries(parsed.subs)) {
@@ -1148,6 +1143,7 @@ function makeTag(tag) {
     }
     return component;
   });
+  return impl;
 }
 var HTML_TAGS = [
   "html",