feat: added typescript package for release

Author: vardumper

src/TemplateGenerator/TypeScriptGenerator.php

@@ -282,23 +282,55 @@ private function getPropertyType(\ReflectionProperty $prop, \ReflectionMethod $g
             } elseif ($typeName === 'bool') {
                 return $allowsNull ? 'boolean | null | undefined' : 'boolean | undefined';
             } elseif (str_ends_with($typeName, 'Enum')) {
-                return $allowsNull ? 'string | boolean | null | undefined' : 'string | boolean | undefined';
+                $enumClass = basename(str_replace('\\', '/', $typeName));
+                $enumType = $this->getEnumType($enumClass);
+                // Check if enum has true/false values, if so, allow boolean
+                $fullClassName = "Html\\Enum\\{$enumClass}";
+                if (enum_exists($fullClassName)) {
+                    try {
+                        $cases = $fullClassName::cases();
+                        $values = array_map(fn($case) => $case->value, $cases);
+                        if (in_array('true', $values) && in_array('false', $values)) {
+                            $enumType .= ' | boolean';
+                        }
+                    } catch (\Throwable $e) {
+                        // Ignore
+                    }
+                }
+                return $allowsNull ? $enumType . ' | null | undefined' : $enumType . ' | undefined';
             } else {
                 return $allowsNull ? 'string | null | undefined' : 'string | undefined'; // Default fallback
             }
         } elseif ($type instanceof ReflectionUnionType) {
             $types = [];
+            $allowsNull = false;
             foreach ($type->getTypes() as $unionType) {
                 $unionTypeName = $unionType->getName();
                 if ($unionTypeName === 'null') {
-                    continue; // Handle nullability separately
+                    $allowsNull = true;
+                    continue;
                 } elseif (str_ends_with($unionTypeName, 'Enum')) {
-                    $types[] = 'string | boolean | null | undefined';
+                    $enumType = $this->getEnumType(basename(str_replace('\\', '/', $unionTypeName)));
+                    // Check if enum has true/false values, if so, allow boolean
+                    $fullClassName = "Html\\Enum\\{$unionTypeName}";
+                    if (enum_exists($fullClassName)) {
+                        try {
+                            $cases = $fullClassName::cases();
+                            $values = array_map(fn($case) => $case->value, $cases);
+                            if (in_array('true', $values) && in_array('false', $values)) {
+                                $enumType .= ' | boolean';
+                            }
+                        } catch (\Throwable $e) {
+                            // Ignore
+                        }
+                    }
+                    $types[] = $enumType;
                 } else {
                     $types[] = $this->getTypeName($unionTypeName);
                 }
             }
-            return implode(' | ', $types);
+            $baseType = implode(' | ', $types);
+            return $allowsNull ? $baseType . ' | null | undefined' : $baseType . ' | undefined';
         }
         return 'any';
     }
@@ -507,7 +539,7 @@ private function buildTypeScriptClass(
             $methodName = $this->toPascalCase($propName);
             $valueType = $propData['type'];
             $ts .= "  set{$methodName}(value: {$valueType}): this {\n";
-            if ($valueType === 'string | boolean | null | undefined') {
+            if ($propData['isEnum'] ?? false) {
                 $ts .= "    if (value === null || value === undefined) {\n";
                 $ts .= "      this.element.removeAttribute('{$propName}');\n";
                 $ts .= "    } else {\n";

templates/blade/package.json

@@ -3,7 +3,7 @@
   "version": "0.2.24",
   "type": "module",
   "license": "MIT",
-  "description": "Fully Type-Safe, WCAG and ARIA compliant, HTML5 components for use in more consistent Blade templates. Has static attribute enum validation.",
+  "description": "Type-safe, auto-generated Blade templates for all HTML5 elements with full WCAG, ARIA support and validation. Part of Extended HTMLDocument - schema-first from HTML5 schema.",
   "repository": "https://github.com/vardumper/extended-htmldocument/tree/main/templates/blade",
   "author": "Erik Poehler",
   "bugs": {

templates/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@typesafe-html5/react",
   "version": "0.2.24",
-  "description": "Type-safe, framework-agnostic, auto-generated React components for all HTML5 elements with full WCAG, ARIA support and validation.",
+  "description": "Type-safe, auto-generated React components for all HTML5 elements with full WCAG, ARIA support and validation. Part of Extended HTMLDocument - schema-first from HTML5 schema.",
   "main": "index.ts",
   "types": "index.ts",
   "type": "module",

templates/twig/package.json

@@ -3,7 +3,7 @@
   "version": "0.2.24",
   "type": "module",
   "license": "MIT",
-  "description": "Fully Type-Safe, WCAG and ARIA compliant, HTML5 components for use in more consistent Twig templates. Has static attribute (enums) validation.",
+  "description": "Type-safe, auto-generated Twig templates for all HTML5 elements with full WCAG, ARIA support and validation. Part of Extended HTMLDocument - schema-first from HTML5 schema.",
   "repository": "https://github.com/vardumper/extended-htmldocument/tree/main/templates/twig",
   "author": "Erik Poehler",
   "bugs": {

templates/typescript/.npmignore

@@ -0,0 +1 @@
+/node_modules

templates/typescript/README.md

@@ -9,7 +9,43 @@ This directory contains auto-generated TypeScript classes for creating HTML elem
 
 ## Installation
 
-Copy the generated TypeScript files to your project and import them as needed.
+This is a static NPM package, providing just the TypeScript classes.
+
+```bash
+npm install @typesafe-html5/typescript
+# or
+yarn add @typesafe-html5/typescript
+# or
+pnpm add @typesafe-html5/typescript
+```
+
+## Publishing to npm
+
+This package is ready to be published to npm. To publish:
+
+1. Ensure you have an npm account and are logged in (`npm login`)
+2. Run `npm publish` from this directory
+
+The package includes:
+- All generated TypeScript class files
+- Type definitions
+- Main entry point (`index.ts`)
+- Package metadata and dependencies
+
+## Importing Elements
+
+You can import individual elements from their specific files:
+
+```typescript
+import { Input } from './inline/input/input';
+import { Button } from './inline/button/button';
+```
+
+Or import all elements from the main index file for convenience:
+
+```typescript
+import { Input, Button, Div, Form } from './index';
+```
 
 ## Usage Examples
 

templates/typescript/block/article/article.ts

@@ -1,7 +1,7 @@
 /**
  * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
  *
- * @generated December 28, 2025 11:40:34
+ * @generated December 28, 2025 12:26:31
  * @component Article
  * @description 
  */
@@ -18,11 +18,11 @@ export interface ArticleProps {
   /**
    * Indicates whether assistive technologies should present the entire region as a whole when changes occur.
    */
-  'aria-atomic'?: string | boolean | null | undefined;
+  'aria-atomic'?: 'false' | 'true' | boolean | null | undefined;
   /**
    * The aria-busy attribute is used to indicate whether an element is currently busy or not.
    */
-  'aria-busy'?: string | boolean | null | undefined;
+  'aria-busy'?: 'true' | 'false' | boolean | null | undefined;
   /**
    * Identifies the element(s) whose contents or presence are controlled by this element. Value is a list of IDs separated by a space
    */
@@ -46,35 +46,35 @@ export interface ArticleProps {
   /**
    * Defines how updates to the element should be announced to screen readers.
    */
-  'aria-live'?: string | boolean | null | undefined;
+  'aria-live'?: 'off' | 'polite' | 'assertive' | null | undefined;
   /**
    * Establishes ownership relationships between elements. Value is a space-separated list of IDs.
    */
   'aria-owns'?: string | null | undefined;
   /**
    * Indicates what content changes should be announced in a live region.
    */
-  'aria-relevant'?: string | boolean | null | undefined;
+  'aria-relevant'?: 'additions' | 'removals' | 'text' | 'all' | 'additions text' | null | undefined;
   /**
    * Provides a human-readable custom role description for assistive technologies.
    */
   'aria-roledescription'?: string | null | undefined;
   /**
    * Represents the autocapitalize behavior of the element
    */
-  autocapitalize?: string | boolean | null | undefined;
+  autocapitalize?: 'none' | 'sentences' | 'words' | 'characters' | null | undefined;
   /**
    * Indicates whether the element is hidden
    */
   autofocus?: boolean | null | undefined;
   /**
    * Indicates whether the element can be edited in place
    */
-  contenteditable?: string | boolean | null | undefined;
+  contenteditable?: 'true' | 'false' | 'inherit' | boolean | null | undefined;
   /**
    * Represents the text direction of the element
    */
-  dir?: string | boolean | null | undefined;
+  dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
   /**
    * Indicates whether the element is draggable
    */
@@ -86,27 +86,27 @@ export interface ArticleProps {
   /**
    * used to specify the data entry mode for an input. It helps guide on-screen keyboards (especially on mobile devices) to show the appropriate layout for the expected input type
    */
-  inputmode?: string | boolean | null | undefined;
+  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | null | undefined;
   /**
    * Specifies the primary language for the element's content
    */
   lang?: string | null | undefined;
   /**
    * 
    */
-  popover?: string | boolean | null | undefined;
+  popover?: 'auto' | 'hint' | 'manual' | null | undefined;
   /**
    * Defines the semantic purpose of an element for assistive technologies.
    */
-  role?: string | boolean | null | undefined;
+  role?: 'alert' | 'application' | 'article' | 'banner' | 'button' | 'checkbox' | 'complementary' | 'contentinfo' | 'dialog' | 'form' | 'grid' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'main' | 'menu' | 'menubar' | 'menuitem' | 'navigation' | 'none' | 'presentation' | 'radio' | 'region' | 'search' | 'status' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'toolbar' | 'tooltip' | null | undefined;
   /**
    * Represents a slot in a shadow DOM
    */
   slot?: string | null | undefined;
   /**
    * Represents the spellchecking behavior of the element
    */
-  spellcheck?: string | boolean | null | undefined;
+  spellcheck?: 'true' | 'false' | boolean | null | undefined;
   /**
    * Represents the CSS inline style of the element
    */
@@ -122,7 +122,7 @@ export interface ArticleProps {
   /**
    * used to tell user agents whether the content should be translated.
    */
-  translate?: string | boolean | null | undefined;
+  translate?: 'yes' | 'no' | null | undefined;
 }
 
 /**
@@ -235,7 +235,7 @@ export class Article {
     return this;
   }
 
-  setAriaAtomic(value: string | boolean | null | undefined): this {
+  setAriaAtomic(value: 'false' | 'true' | boolean | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('aria-atomic');
     } else {
@@ -244,7 +244,7 @@ export class Article {
     return this;
   }
 
-  setAriaBusy(value: string | boolean | null | undefined): this {
+  setAriaBusy(value: 'true' | 'false' | boolean | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('aria-busy');
     } else {
@@ -298,7 +298,7 @@ export class Article {
     return this;
   }
 
-  setAriaLive(value: string | boolean | null | undefined): this {
+  setAriaLive(value: 'off' | 'polite' | 'assertive' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('aria-live');
     } else {
@@ -316,7 +316,7 @@ export class Article {
     return this;
   }
 
-  setAriaRelevant(value: string | boolean | null | undefined): this {
+  setAriaRelevant(value: 'additions' | 'removals' | 'text' | 'all' | 'additions text' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('aria-relevant');
     } else {
@@ -334,7 +334,7 @@ export class Article {
     return this;
   }
 
-  setAutocapitalize(value: string | boolean | null | undefined): this {
+  setAutocapitalize(value: 'none' | 'sentences' | 'words' | 'characters' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('autocapitalize');
     } else {
@@ -352,7 +352,7 @@ export class Article {
     return this;
   }
 
-  setContenteditable(value: string | boolean | null | undefined): this {
+  setContenteditable(value: 'true' | 'false' | 'inherit' | boolean | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('contenteditable');
     } else {
@@ -361,7 +361,7 @@ export class Article {
     return this;
   }
 
-  setDir(value: string | boolean | null | undefined): this {
+  setDir(value: 'ltr' | 'rtl' | 'auto' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('dir');
     } else {
@@ -388,7 +388,7 @@ export class Article {
     return this;
   }
 
-  setInputmode(value: string | boolean | null | undefined): this {
+  setInputmode(value: 'none' | 'text' | 'decimal' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('inputmode');
     } else {
@@ -406,7 +406,7 @@ export class Article {
     return this;
   }
 
-  setPopover(value: string | boolean | null | undefined): this {
+  setPopover(value: 'auto' | 'hint' | 'manual' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('popover');
     } else {
@@ -415,7 +415,7 @@ export class Article {
     return this;
   }
 
-  setRole(value: string | boolean | null | undefined): this {
+  setRole(value: 'alert' | 'application' | 'article' | 'banner' | 'button' | 'checkbox' | 'complementary' | 'contentinfo' | 'dialog' | 'form' | 'grid' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'main' | 'menu' | 'menubar' | 'menuitem' | 'navigation' | 'none' | 'presentation' | 'radio' | 'region' | 'search' | 'status' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'toolbar' | 'tooltip' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('role');
     } else {
@@ -433,7 +433,7 @@ export class Article {
     return this;
   }
 
-  setSpellcheck(value: string | boolean | null | undefined): this {
+  setSpellcheck(value: 'true' | 'false' | boolean | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('spellcheck');
     } else {
@@ -469,7 +469,7 @@ export class Article {
     return this;
   }
 
-  setTranslate(value: string | boolean | null | undefined): this {
+  setTranslate(value: 'yes' | 'no' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('translate');
     } else {