juxscript 1.0.19 → 1.0.21

package/lib/components/docs-data.json

@@ -57,162 +57,48 @@
       ],
       "example": "jux.app('myApp').setup({"
     },
-    {
-      "name": "Layout",
-      "category": "Core",
-      "description": "Layout component interface",
-      "constructor": "jux.layout(...args: any[])",
-      "fluentMethods": [
-        {
-          "name": "file",
-          "params": "(juxFile)",
-          "returns": "this",
-          "description": "Set file"
-        },
-        {
-          "name": "add",
-          "params": "(component)",
-          "returns": "this",
-          "description": "Set add"
-        },
-        {
-          "name": "render",
-          "params": "(target?)",
-          "returns": "this",
-          "description": "Set render"
-        }
-      ],
-      "example": "// As a composition function"
-    },
     {
       "name": "Script",
       "category": "Core",
       "description": "Script - Inject inline JavaScript into the document",
-      "constructor": "jux.script(content: string = '')",
+      "constructor": "jux.script(code: string, id?: string)",
       "fluentMethods": [
-        {
-          "name": "content",
-          "params": "(js)",
-          "returns": "this",
-          "description": "Set content"
-        },
-        {
-          "name": "type",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set type"
-        },
-        {
-          "name": "module",
-          "params": "()",
-          "returns": "this",
-          "description": "Set module"
-        },
         {
           "name": "render",
           "params": "()",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "remove",
-          "params": "()",
-          "returns": "this",
-          "description": "Set remove"
         }
       ],
-      "example": "jux.script('console.log(\"Hello\")');"
+      "example": "jux.script('id').render()"
     },
     {
       "name": "Style",
       "category": "Core",
       "description": "Style - Inject inline CSS into the document",
-      "constructor": "jux.style(content: string = '')",
+      "constructor": "jux.style(css: string, id?: string)",
       "fluentMethods": [
-        {
-          "name": "content",
-          "params": "(css)",
-          "returns": "this",
-          "description": "Set content"
-        },
-        {
-          "name": "append",
-          "params": "(css)",
-          "returns": "this",
-          "description": "Set append"
-        },
-        {
-          "name": "prepend",
-          "params": "(css)",
-          "returns": "this",
-          "description": "Set prepend"
-        },
         {
           "name": "render",
           "params": "()",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "remove",
-          "params": "()",
-          "returns": "this",
-          "description": "Set remove"
-        }
-      ],
-      "example": "jux.style('body { margin: 0; }');"
-    },
-    {
-      "name": "Chart",
-      "category": "Data Components",
-      "description": "Chart component options",
-      "constructor": "jux.chart(id: string, options: ChartOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "type",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set type"
-        },
-        {
-          "name": "data",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set data"
-        },
-        {
-          "name": "options",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set options"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "const chart = jux.chart('myChart', {"
+      "example": "jux.style('id').render()"
     },
     {
       "name": "Data",
       "category": "Data Components",
       "description": "Data component - SQL query execution",
-      "constructor": "jux.data(sql: string, params: any[] = [], apiUrl: string = '/api/query')",
+      "constructor": "new Data()",
       "fluentMethods": [],
       "example": "const posts = jux.data('SELECT * FROM posts WHERE id = ?', [1]);"
     },
     {
       "name": "List",
       "category": "Data Components",
-      "description": "List item interface",
+      "description": "List component",
       "constructor": "jux.list(id: string, options: ListOptions = {})",
       "fluentMethods": [
         {
@@ -222,22 +108,40 @@
           "description": "Set items"
         },
         {
-          "name": "header",
+          "name": "addItem",
           "params": "(value)",
           "returns": "this",
-          "description": "Set header"
+          "description": "Set addItem"
+        },
+        {
+          "name": "removeItem",
+          "params": "(index)",
+          "returns": "this",
+          "description": "Set removeItem"
         },
         {
-          "name": "gap",
-          "params": "(value)",
+          "name": "updateItem",
+          "params": "(index, updates)",
           "returns": "this",
-          "description": "Set gap"
+          "description": "Set updateItem"
         },
         {
-          "name": "direction",
+          "name": "clearItems",
+          "params": "()",
+          "returns": "this",
+          "description": "Set clearItems"
+        },
+        {
+          "name": "itemClass",
+          "params": "(className)",
+          "returns": "this",
+          "description": "Set itemClass"
+        },
+        {
+          "name": "ordered",
           "params": "(value)",
           "returns": "this",
-          "description": "Set direction"
+          "description": "Set ordered"
         },
         {
           "name": "selectable",
@@ -246,79 +150,79 @@
           "description": "Set selectable"
         },
         {
-          "name": "style",
+          "name": "multiSelect",
           "params": "(value)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set multiSelect"
         },
         {
-          "name": "class",
+          "name": "striped",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set striped"
         },
         {
-          "name": "add",
-          "params": "(item, index?)",
+          "name": "hoverable",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set add"
+          "description": "Set hoverable"
         },
         {
-          "name": "remove",
-          "params": "(index)",
+          "name": "bordered",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set remove"
+          "description": "Set bordered"
         },
         {
-          "name": "move",
-          "params": "(fromIndex, toIndex)",
+          "name": "selectItem",
+          "params": "(index)",
           "returns": "this",
-          "description": "Set move"
+          "description": "Set selectItem"
         },
         {
-          "name": "select",
+          "name": "deselectItem",
           "params": "(index)",
           "returns": "this",
-          "description": "Set select"
+          "description": "Set deselectItem"
         },
         {
-          "name": "deselect",
+          "name": "clearSelection",
           "params": "()",
           "returns": "this",
-          "description": "Set deselect"
+          "description": "Set clearSelection"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "const myList = jux.list('myList', {"
+      "example": "jux.list('id').render()"
     },
     {
       "name": "Table",
       "category": "Data Components",
-      "description": "Table column configuration",
+      "description": "Add a computed column that evaluates dynamically at render time",
       "constructor": "jux.table(id: string, options: TableOptions = {})",
       "fluentMethods": [
         {
-          "name": "columns",
+          "name": "rows",
           "params": "(value)",
           "returns": "this",
-          "description": "Set columns"
+          "description": "Set rows"
+        },
+        {
+          "name": "removeComputedColumn",
+          "params": "(key)",
+          "returns": "this",
+          "description": "Set removeComputedColumn"
         },
         {
-          "name": "data",
+          "name": "headers",
           "params": "(value)",
           "returns": "this",
-          "description": "Set data"
+          "description": "Set headers"
         },
         {
           "name": "striped",
@@ -339,91 +243,94 @@
           "description": "Set bordered"
         },
         {
-          "name": "allowHtml",
+          "name": "compact",
           "params": "(value)",
           "returns": "this",
-          "description": "Set allowHtml"
+          "description": "Set compact"
         },
         {
-          "name": "style",
+          "name": "sortable",
           "params": "(value)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set sortable"
         },
         {
-          "name": "class",
+          "name": "filterable",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set filterable"
         },
         {
-          "name": "render",
-          "params": "(targetId?)",
+          "name": "paginated",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set render"
+          "description": "Set paginated"
         },
         {
-          "name": "renderTo",
-          "params": "(juxComponent)",
+          "name": "rowsPerPage",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "// Auto-generate columns from data"
-    },
-    {
-      "name": "Alert",
-      "category": "UI Components",
-      "description": "Alert component options",
-      "constructor": "jux.alert(id: string, options: AlertOptions = {})",
-      "fluentMethods": [
+          "description": "Set rowsPerPage"
+        },
         {
-          "name": "message",
+          "name": "selectable",
           "params": "(value)",
           "returns": "this",
-          "description": "Set message"
+          "description": "Set selectable"
         },
         {
-          "name": "variant",
+          "name": "multiSelect",
           "params": "(value)",
           "returns": "this",
-          "description": "Set variant"
+          "description": "Set multiSelect"
         },
         {
-          "name": "title",
+          "name": "showCheckboxes",
           "params": "(value)",
           "returns": "this",
-          "description": "Set title"
+          "description": "Set showCheckboxes"
         },
         {
-          "name": "dismissible",
+          "name": "showBulkCheckbox",
           "params": "(value)",
           "returns": "this",
-          "description": "Set dismissible"
+          "description": "Set showBulkCheckbox"
         },
         {
-          "name": "icon",
+          "name": "selectionTrigger",
           "params": "(value)",
           "returns": "this",
-          "description": "Set icon"
+          "description": "Set selectionTrigger"
         },
         {
-          "name": "style",
-          "params": "(value)",
+          "name": "selectAll",
+          "params": "()",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set selectAll"
         },
         {
-          "name": "class",
-          "params": "(value)",
+          "name": "deselectAll",
+          "params": "()",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set deselectAll"
+        },
+        {
+          "name": "clearSelection",
+          "params": "()",
+          "returns": "this",
+          "description": "Set clearSelection"
+        },
+        {
+          "name": "selectRows",
+          "params": "(indexes)",
+          "returns": "this",
+          "description": "Set selectRows"
         },
         {
-          "name": "autoDismiss",
-          "params": "(delay)",
+          "name": "deselectRows",
+          "params": "(indexes)",
           "returns": "this",
-          "description": "Set autoDismiss"
+          "description": "Set deselectRows"
         },
         {
           "name": "render",
@@ -438,193 +345,133 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.alert('my-alert', {"
+      "example": "jux.table('id').render()"
     },
     {
-      "name": "Areachart",
+      "name": "Alert",
       "category": "UI Components",
-      "description": "Bar chart data point",
-      "constructor": "jux.areachart(id: string, options: AreaChartOptions = {})",
+      "description": "Alert component",
+      "constructor": "jux.alert(id: string, options: AlertOptions = {})",
       "fluentMethods": [
         {
-          "name": "bindTheme",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindTheme"
-        },
-        {
-          "name": "bindStyleMode",
-          "params": "(stateObj)",
+          "name": "message",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set bindStyleMode"
+          "description": "Set message"
         },
         {
-          "name": "bindBorderRadius",
-          "params": "(stateObj)",
+          "name": "type",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set bindBorderRadius"
+          "description": "Set type"
         },
         {
-          "name": "data",
+          "name": "dismissible",
           "params": "(value)",
           "returns": "this",
-          "description": "Set data"
+          "description": "Set dismissible"
         },
         {
-          "name": "title",
+          "name": "icon",
           "params": "(value)",
           "returns": "this",
-          "description": "Set title"
+          "description": "Set icon"
         },
         {
-          "name": "subtitle",
-          "params": "(value)",
+          "name": "render",
+          "params": "(targetId?)",
           "returns": "this",
-          "description": "Set subtitle"
-        },
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.alert('id').render()"
+    },
+    {
+      "name": "Badge",
+      "category": "UI Components",
+      "description": "Badge component",
+      "constructor": "jux.badge(id: string, options: BadgeOptions = {})",
+      "fluentMethods": [
         {
-          "name": "xAxisLabel",
+          "name": "text",
           "params": "(value)",
           "returns": "this",
-          "description": "Set xAxisLabel"
+          "description": "Set text"
         },
         {
-          "name": "yAxisLabel",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set yAxisLabel"
+          "description": "Set variant"
         },
         {
-          "name": "showTicksX",
+          "name": "pill",
           "params": "(value)",
           "returns": "this",
-          "description": "Set showTicksX"
+          "description": "Set pill"
         },
         {
-          "name": "showTicksY",
-          "params": "(value)",
+          "name": "render",
+          "params": "(targetId?)",
           "returns": "this",
-          "description": "Set showTicksY"
-        },
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.badge('id').render()"
+    },
+    {
+      "name": "Button",
+      "category": "UI Components",
+      "description": "Override visible() to update the actual button element",
+      "constructor": "jux.button(id: string, options?: ButtonOptions)",
+      "fluentMethods": [
         {
-          "name": "showScaleX",
+          "name": "label",
           "params": "(value)",
           "returns": "this",
-          "description": "Set showScaleX"
+          "description": "Set label"
         },
         {
-          "name": "showScaleY",
+          "name": "icon",
           "params": "(value)",
           "returns": "this",
-          "description": "Set showScaleY"
+          "description": "Set icon"
         },
         {
-          "name": "scaleXUnit",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set scaleXUnit"
+          "description": "Set variant"
         },
         {
-          "name": "scaleYUnit",
+          "name": "size",
           "params": "(value)",
           "returns": "this",
-          "description": "Set scaleYUnit"
+          "description": "Set size"
         },
         {
-          "name": "showLegend",
+          "name": "iconPosition",
           "params": "(value)",
           "returns": "this",
-          "description": "Set showLegend"
+          "description": "Set iconPosition"
         },
         {
-          "name": "legendOrientation",
+          "name": "fullWidth",
           "params": "(value)",
           "returns": "this",
-          "description": "Set legendOrientation"
+          "description": "Set fullWidth"
         },
         {
-          "name": "showDataTable",
+          "name": "type",
           "params": "(value)",
           "returns": "this",
-          "description": "Set showDataTable"
+          "description": "Set type"
         },
         {
-          "name": "showDataLabels",
+          "name": "visible",
           "params": "(value)",
           "returns": "this",
-          "description": "Set showDataLabels"
-        },
-        {
-          "name": "animate",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animate"
-        },
-        {
-          "name": "animationDuration",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animationDuration"
-        },
-        {
-          "name": "chartOrientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set chartOrientation"
-        },
-        {
-          "name": "chartDirection",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set chartDirection"
-        },
-        {
-          "name": "width",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set width"
-        },
-        {
-          "name": "height",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set height"
-        },
-        {
-          "name": "colors",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set colors"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "theme",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set theme"
-        },
-        {
-          "name": "styleMode",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set styleMode"
-        },
-        {
-          "name": "borderRadius",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set borderRadius"
+          "description": "Set visible"
         },
         {
           "name": "render",
@@ -633,38 +480,14 @@
           "description": "Set render"
         }
       ],
-      "example": "jux.areachart('sales-chart')"
+      "example": "jux.button('id').render()"
     },
     {
-      "name": "Areachartsmooth",
+      "name": "Card",
       "category": "UI Components",
-      "description": "Bar chart data point",
-      "constructor": "jux.areachartsmooth(id: string, options: AreaChartSmoothOptions = {})",
+      "description": "Card component",
+      "constructor": "jux.card(id: string, options: CardOptions = {})",
       "fluentMethods": [
-        {
-          "name": "bindTheme",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindTheme"
-        },
-        {
-          "name": "bindStyleMode",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindStyleMode"
-        },
-        {
-          "name": "bindBorderRadius",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindBorderRadius"
-        },
-        {
-          "name": "data",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set data"
-        },
         {
           "name": "title",
           "params": "(value)",
@@ -672,154 +495,22 @@
           "description": "Set title"
         },
         {
-          "name": "subtitle",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set subtitle"
-        },
-        {
-          "name": "xAxisLabel",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set xAxisLabel"
-        },
-        {
-          "name": "yAxisLabel",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set yAxisLabel"
-        },
-        {
-          "name": "showTicksX",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showTicksX"
-        },
-        {
-          "name": "showTicksY",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showTicksY"
-        },
-        {
-          "name": "showScaleX",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showScaleX"
-        },
-        {
-          "name": "showScaleY",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showScaleY"
-        },
-        {
-          "name": "scaleXUnit",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set scaleXUnit"
-        },
-        {
-          "name": "scaleYUnit",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set scaleYUnit"
-        },
-        {
-          "name": "showLegend",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showLegend"
-        },
-        {
-          "name": "legendOrientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set legendOrientation"
-        },
-        {
-          "name": "showDataTable",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showDataTable"
-        },
-        {
-          "name": "showDataLabels",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showDataLabels"
-        },
-        {
-          "name": "animate",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animate"
-        },
-        {
-          "name": "animationDuration",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animationDuration"
-        },
-        {
-          "name": "chartOrientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set chartOrientation"
-        },
-        {
-          "name": "chartDirection",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set chartDirection"
-        },
-        {
-          "name": "width",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set width"
-        },
-        {
-          "name": "height",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set height"
-        },
-        {
-          "name": "colors",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set colors"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "theme",
+          "name": "content",
           "params": "(value)",
           "returns": "this",
-          "description": "Set theme"
+          "description": "Set content"
         },
         {
-          "name": "styleMode",
+          "name": "footer",
           "params": "(value)",
           "returns": "this",
-          "description": "Set styleMode"
+          "description": "Set footer"
         },
         {
-          "name": "borderRadius",
+          "name": "icon",
           "params": "(value)",
           "returns": "this",
-          "description": "Set borderRadius"
+          "description": "Set icon"
         },
         {
           "name": "render",
@@ -828,991 +519,109 @@
           "description": "Set render"
         }
       ],
-      "example": "jux.areachartsmooth('sales-chart')"
+      "example": "jux.card('id').render()"
     },
     {
-      "name": "Badge",
+      "name": "Checkbox",
       "category": "UI Components",
-      "description": "Badge component options",
-      "constructor": "jux.badge(id: string, options: BadgeOptions = {})",
+      "description": "Checkbox component",
+      "constructor": "jux.checkbox(id: string, options: CheckboxOptions = {})",
       "fluentMethods": [
         {
-          "name": "text",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set text"
-        },
-        {
-          "name": "variant",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set variant"
-        },
-        {
-          "name": "size",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set size"
-        },
-        {
-          "name": "pill",
+          "name": "checked",
           "params": "(value)",
           "returns": "this",
-          "description": "Set pill"
+          "description": "Set checked"
         },
         {
-          "name": "style",
+          "name": "value",
           "params": "(value)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set value"
         },
         {
-          "name": "class",
+          "name": "setValue",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set setValue"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "jux.badge('status', {"
+      "example": "jux.checkbox('id').render()"
     },
     {
-      "name": "Barchart",
-      "category": "UI Components",
-      "description": "Bar chart data point",
-      "constructor": "jux.barchart(id: string, options: BarChartOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "bindTheme",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindTheme"
-        },
-        {
-          "name": "bindStyleMode",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindStyleMode"
-        },
-        {
-          "name": "bindBorderRadius",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindBorderRadius"
-        },
-        {
-          "name": "data",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set data"
-        },
-        {
-          "name": "title",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set title"
-        },
-        {
-          "name": "subtitle",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set subtitle"
-        },
-        {
-          "name": "xAxisLabel",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set xAxisLabel"
-        },
-        {
-          "name": "yAxisLabel",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set yAxisLabel"
-        },
-        {
-          "name": "showTicksX",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showTicksX"
-        },
-        {
-          "name": "showTicksY",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showTicksY"
-        },
-        {
-          "name": "showScaleX",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showScaleX"
-        },
-        {
-          "name": "showScaleY",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showScaleY"
-        },
-        {
-          "name": "scaleXUnit",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set scaleXUnit"
-        },
-        {
-          "name": "scaleYUnit",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set scaleYUnit"
-        },
-        {
-          "name": "showLegend",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showLegend"
-        },
-        {
-          "name": "legendOrientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set legendOrientation"
-        },
-        {
-          "name": "showDataTable",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showDataTable"
-        },
-        {
-          "name": "showDataLabels",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showDataLabels"
-        },
-        {
-          "name": "animate",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animate"
-        },
-        {
-          "name": "animationDuration",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animationDuration"
-        },
-        {
-          "name": "chartOrientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set chartOrientation"
-        },
-        {
-          "name": "chartDirection",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set chartDirection"
-        },
-        {
-          "name": "width",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set width"
-        },
-        {
-          "name": "height",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set height"
-        },
-        {
-          "name": "colors",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set colors"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "theme",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set theme"
-        },
-        {
-          "name": "styleMode",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set styleMode"
-        },
-        {
-          "name": "borderRadius",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set borderRadius"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        }
-      ],
-      "example": "jux.barchart('sales-chart')"
-    },
-    {
-      "name": "Button",
-      "category": "UI Components",
-      "description": "Button component options",
-      "constructor": "jux.button(id: string, options?: ButtonOptions)",
-      "fluentMethods": [
-        {
-          "name": "label",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set label"
-        },
-        {
-          "name": "icon",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set icon"
-        },
-        {
-          "name": "bind",
-          "params": "(event, handler)",
-          "returns": "this",
-          "description": "Set bind"
-        },
-        {
-          "name": "variant",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set variant"
-        },
-        {
-          "name": "size",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set size"
-        },
-        {
-          "name": "disabled",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set disabled"
-        },
-        {
-          "name": "loading",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set loading"
-        },
-        {
-          "name": "iconPosition",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set iconPosition"
-        },
-        {
-          "name": "fullWidth",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set fullWidth"
-        },
-        {
-          "name": "type",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set type"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "jux.button('id').render()"
-    },
-    {
-      "name": "Card",
-      "category": "UI Components",
-      "description": "Card component options",
-      "constructor": "jux.card(id: string, options: CardOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "title",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set title"
-        },
-        {
-          "name": "subtitle",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set subtitle"
-        },
-        {
-          "name": "content",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set content"
-        },
-        {
-          "name": "image",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set image"
-        },
-        {
-          "name": "variant",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set variant"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "withActions",
-          "params": "()",
-          "returns": "this",
-          "description": "Set withActions"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "const card = jux.card('myCard', {"
-    },
-    {
-      "name": "Checkbox",
-      "category": "UI Components",
-      "description": "Two-way binding to state",
-      "constructor": "jux.checkbox(id: string, options: CheckboxOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "label",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set label"
-        },
-        {
-          "name": "checked",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set checked"
-        },
-        {
-          "name": "disabled",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set disabled"
-        },
-        {
-          "name": "name",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set name"
-        },
-        {
-          "name": "value",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set value"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "bind",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bind"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "jux.checkbox('id').render()"
-    },
-    {
-      "name": "Code",
-      "category": "UI Components",
-      "description": "Code component options",
-      "constructor": "jux.code(id: string, content?: string, language?: string)",
-      "fluentMethods": [
-        {
-          "name": "code",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set code"
-        },
-        {
-          "name": "language",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set language"
-        },
-        {
-          "name": "lineNumbers",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set lineNumbers"
-        },
-        {
-          "name": "highlight",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set highlight"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "const code = jux.code('myCode', 'console.log(\"hello\")', 'javascript');"
-    },
-    {
-      "name": "Container",
-      "category": "UI Components",
-      "description": "Container options",
-      "constructor": "jux.container(id: string, options: ContainerOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "direction",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set direction"
-        },
-        {
-          "name": "gap",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set gap"
-        },
-        {
-          "name": "align",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set align"
-        },
-        {
-          "name": "justify",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set justify"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        }
-      ],
-      "example": "// Plain container"
-    },
-    {
-      "name": "Datepicker",
-      "category": "UI Components",
-      "description": "DatePicker component options",
-      "constructor": "jux.datepicker(id: string, options: DatePickerOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "value",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set value"
-        },
-        {
-          "name": "min",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set min"
-        },
-        {
-          "name": "max",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set max"
-        },
-        {
-          "name": "placeholder",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set placeholder"
-        },
-        {
-          "name": "disabled",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set disabled"
-        },
-        {
-          "name": "name",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set name"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "bind",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bind"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "jux.datepicker('start-date', {"
-    },
-    {
-      "name": "Dialog",
-      "category": "UI Components",
-      "description": "Dialog component options",
-      "constructor": "jux.dialog(id: string, options: DialogOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "title",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set title"
-        },
-        {
-          "name": "message",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set message"
-        },
-        {
-          "name": "confirmText",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set confirmText"
-        },
-        {
-          "name": "cancelText",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set cancelText"
-        },
-        {
-          "name": "variant",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set variant"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "jux.dialog('confirm-delete', {"
-    },
-    {
-      "name": "Divider",
-      "category": "UI Components",
-      "description": "Divider - Simple horizontal or vertical divider line",
-      "constructor": "jux.divider(options: DividerOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "orientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set orientation"
-        },
-        {
-          "name": "thickness",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set thickness"
-        },
-        {
-          "name": "color",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set color"
-        },
-        {
-          "name": "margin",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set margin"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "className",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set className"
-        },
-        {
-          "name": "render",
-          "params": "(targetSelector)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "replace",
-          "params": "(targetSelector)",
-          "returns": "this",
-          "description": "Set replace"
-        },
-        {
-          "name": "before",
-          "params": "(targetSelector)",
-          "returns": "this",
-          "description": "Set before"
-        },
-        {
-          "name": "after",
-          "params": "(targetSelector)",
-          "returns": "this",
-          "description": "Set after"
-        }
-      ],
-      "example": "// Simple horizontal divider"
-    },
-    {
-      "name": "Doughnutchart",
-      "category": "UI Components",
-      "description": "Bar chart data point",
-      "constructor": "jux.doughnutchart(id: string, options: DoughnutChartOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "bindTheme",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindTheme"
-        },
-        {
-          "name": "bindStyleMode",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindStyleMode"
-        },
-        {
-          "name": "bindBorderRadius",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindBorderRadius"
-        },
-        {
-          "name": "data",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set data"
-        },
-        {
-          "name": "title",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set title"
-        },
-        {
-          "name": "subtitle",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set subtitle"
-        },
-        {
-          "name": "xAxisLabel",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set xAxisLabel"
-        },
-        {
-          "name": "yAxisLabel",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set yAxisLabel"
-        },
-        {
-          "name": "showTicksX",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showTicksX"
-        },
-        {
-          "name": "showTicksY",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showTicksY"
-        },
-        {
-          "name": "showScaleX",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showScaleX"
-        },
-        {
-          "name": "showScaleY",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showScaleY"
-        },
-        {
-          "name": "scaleXUnit",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set scaleXUnit"
-        },
-        {
-          "name": "scaleYUnit",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set scaleYUnit"
-        },
-        {
-          "name": "showLegend",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showLegend"
-        },
-        {
-          "name": "legendOrientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set legendOrientation"
-        },
-        {
-          "name": "showDataTable",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showDataTable"
-        },
-        {
-          "name": "showDataLabels",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showDataLabels"
-        },
-        {
-          "name": "animate",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animate"
-        },
-        {
-          "name": "animationDuration",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animationDuration"
-        },
-        {
-          "name": "chartOrientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set chartOrientation"
-        },
+      "name": "Code",
+      "category": "UI Components",
+      "description": "Code component",
+      "constructor": "jux.code(id: string, options: CodeOptions = {})",
+      "fluentMethods": [
         {
-          "name": "chartDirection",
+          "name": "code",
           "params": "(value)",
           "returns": "this",
-          "description": "Set chartDirection"
+          "description": "Set code"
         },
         {
-          "name": "width",
+          "name": "language",
           "params": "(value)",
           "returns": "this",
-          "description": "Set width"
+          "description": "Set language"
         },
         {
-          "name": "height",
-          "params": "(value)",
+          "name": "render",
+          "params": "(targetId?)",
           "returns": "this",
-          "description": "Set height"
-        },
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.code('id').render()"
+    },
+    {
+      "name": "Container",
+      "category": "UI Components",
+      "description": "Container component",
+      "constructor": "jux.container(id: string, options: ContainerOptions = {})",
+      "fluentMethods": [
         {
-          "name": "colors",
+          "name": "direction",
           "params": "(value)",
           "returns": "this",
-          "description": "Set colors"
+          "description": "Set direction"
         },
         {
-          "name": "class",
+          "name": "gap",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set gap"
         },
         {
-          "name": "style",
+          "name": "wrap",
           "params": "(value)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set wrap"
         },
         {
-          "name": "theme",
+          "name": "align",
           "params": "(value)",
           "returns": "this",
-          "description": "Set theme"
+          "description": "Set align"
         },
         {
-          "name": "styleMode",
+          "name": "justify",
           "params": "(value)",
           "returns": "this",
-          "description": "Set styleMode"
+          "description": "Set justify"
         },
         {
-          "name": "borderRadius",
+          "name": "padding",
           "params": "(value)",
           "returns": "this",
-          "description": "Set borderRadius"
+          "description": "Set padding"
         },
         {
           "name": "render",
@@ -1821,110 +630,116 @@
           "description": "Set render"
         }
       ],
-      "example": "jux.doughnutchart('sales-chart')"
+      "example": "jux.container('id').render()"
     },
     {
-      "name": "Dropdown",
+      "name": "Datepicker",
       "category": "UI Components",
-      "description": "Dropdown menu item",
-      "constructor": "jux.dropdown(id: string, options: DropdownOptions = {})",
+      "description": "Datepicker component",
+      "constructor": "jux.datepicker(id: string, options: DatePickerOptions = {})",
       "fluentMethods": [
         {
-          "name": "items",
+          "name": "value",
           "params": "(value)",
           "returns": "this",
-          "description": "Set items"
-        },
-        {
-          "name": "addItem",
-          "params": "(item)",
-          "returns": "this",
-          "description": "Set addItem"
+          "description": "Set value"
         },
         {
-          "name": "trigger",
+          "name": "placeholder",
           "params": "(value)",
           "returns": "this",
-          "description": "Set trigger"
+          "description": "Set placeholder"
         },
         {
-          "name": "position",
+          "name": "min",
           "params": "(value)",
           "returns": "this",
-          "description": "Set position"
+          "description": "Set min"
         },
         {
-          "name": "style",
+          "name": "max",
           "params": "(value)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set max"
         },
         {
-          "name": "class",
+          "name": "setValue",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set setValue"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "jux.dropdown('actions', {"
+      "example": "jux.datepicker('id').render()"
     },
     {
-      "name": "Element",
+      "name": "Dialog",
       "category": "UI Components",
-      "description": "Element component options",
-      "constructor": "jux.element(id: string, options: ElementOptions = {})",
+      "description": "Dialog component",
+      "constructor": "jux.dialog(id: string, options: DialogOptions = {})",
       "fluentMethods": [
         {
-          "name": "render",
-          "params": "(targetId?: string)",
-          "returns": "Element",
-          "description": "Render component to DOM"
-        }
-      ],
-      "example": "const div = jux.element('myDiv', { tagType: 'div', className: 'container' });"
-    },
-    {
-      "name": "Fileupload",
-      "category": "UI Components",
-      "description": "FileUpload component options",
-      "constructor": "jux.fileupload(id: string, options: FileUploadOptions = {})",
-      "fluentMethods": [
+          "name": "title",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set title"
+        },
         {
-          "name": "accept",
+          "name": "message",
           "params": "(value)",
           "returns": "this",
-          "description": "Set accept"
+          "description": "Set message"
         },
         {
-          "name": "multiple",
+          "name": "confirmText",
           "params": "(value)",
           "returns": "this",
-          "description": "Set multiple"
+          "description": "Set confirmText"
         },
         {
-          "name": "maxSize",
+          "name": "cancelText",
           "params": "(value)",
           "returns": "this",
-          "description": "Set maxSize"
+          "description": "Set cancelText"
         },
         {
-          "name": "disabled",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set disabled"
+          "description": "Set variant"
+        },
+        {
+          "name": "open",
+          "params": "()",
+          "returns": "this",
+          "description": "Set open"
+        },
+        {
+          "name": "close",
+          "params": "()",
+          "returns": "this",
+          "description": "Set close"
         },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.dialog('id').render()"
+    },
+    {
+      "name": "Divider",
+      "category": "UI Components",
+      "description": "Divider component",
+      "constructor": "jux.divider(options: DividerOptions = {})",
+      "fluentMethods": [
         {
           "name": "text",
           "params": "(value)",
@@ -1932,10 +747,10 @@
           "description": "Set text"
         },
         {
-          "name": "dragText",
+          "name": "orientation",
           "params": "(value)",
           "returns": "this",
-          "description": "Set dragText"
+          "description": "Set orientation"
         },
         {
           "name": "style",
@@ -1962,100 +777,136 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.fileupload('docs', {"
+      "example": "jux.divider('id').render()"
     },
     {
-      "name": "Footer",
+      "name": "Dropdown",
       "category": "UI Components",
-      "description": "Footer component options",
-      "constructor": "jux.footer(id: string, options: FooterOptions = {})",
+      "description": "Dropdown component",
+      "constructor": "jux.dropdown(id: string, options: DropdownOptions = {})",
       "fluentMethods": [
         {
-          "name": "content",
+          "name": "trigger",
           "params": "(value)",
           "returns": "this",
-          "description": "Set content"
+          "description": "Set trigger"
         },
         {
-          "name": "copyright",
+          "name": "items",
           "params": "(value)",
           "returns": "this",
-          "description": "Set copyright"
+          "description": "Set items"
         },
         {
-          "name": "links",
+          "name": "position",
           "params": "(value)",
           "returns": "this",
-          "description": "Set links"
+          "description": "Set position"
         },
         {
-          "name": "class",
-          "params": "(value)",
+          "name": "open",
+          "params": "()",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set open"
         },
         {
-          "name": "style",
-          "params": "(value)",
+          "name": "close",
+          "params": "()",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set close"
+        },
+        {
+          "name": "toggle",
+          "params": "()",
+          "returns": "this",
+          "description": "Set toggle"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
+        }
+      ],
+      "example": "jux.dropdown('id').render()"
+    },
+    {
+      "name": "Element",
+      "category": "UI Components",
+      "description": "Append child component or HTML element",
+      "constructor": "jux.element(id: string, options: ElementOptions = {})",
+      "fluentMethods": [
         {
-          "name": "renderTo",
-          "params": "(juxComponent)",
+          "name": "render",
+          "params": "(targetId?)",
           "returns": "this",
-          "description": "Set renderTo"
+          "description": "Set render"
         }
       ],
-      "example": "const footer = jux.footer('myFooter', {"
+      "example": "jux.element('id').render()"
     },
     {
-      "name": "Header",
+      "name": "Fileupload",
       "category": "UI Components",
-      "description": "Header component options",
-      "constructor": "jux.header(id: string, options: HeaderOptions = {})",
+      "description": "Fileupload component",
+      "constructor": "jux.fileupload(id: string, options: FileUploadOptions = {})",
       "fluentMethods": [
         {
-          "name": "title",
+          "name": "accept",
           "params": "(value)",
           "returns": "this",
-          "description": "Set title"
+          "description": "Set accept"
         },
         {
-          "name": "logo",
+          "name": "multiple",
           "params": "(value)",
           "returns": "this",
-          "description": "Set logo"
+          "description": "Set multiple"
         },
         {
-          "name": "navigation",
+          "name": "icon",
           "params": "(value)",
           "returns": "this",
-          "description": "Set navigation"
+          "description": "Set icon"
         },
         {
-          "name": "sticky",
-          "params": "(value)",
+          "name": "clear",
+          "params": "()",
           "returns": "this",
-          "description": "Set sticky"
+          "description": "Set clear"
         },
         {
-          "name": "class",
-          "params": "(value)",
+          "name": "setValue",
+          "params": "(files)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set setValue"
         },
         {
-          "name": "style",
-          "params": "(value)",
+          "name": "render",
+          "params": "(targetId?)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.fileupload('id').render()"
+    },
+    {
+      "name": "Guard",
+      "category": "UI Components",
+      "description": "⚠️ DEPRECATED: Guard component is no longer supported after removing global middleware.",
+      "constructor": "jux.guard(id: string, options?: GuardOptions)",
+      "fluentMethods": [
+        {
+          "name": "requireAuth",
+          "params": "(authState, loginPath?)",
+          "returns": "this",
+          "description": "Set requireAuth"
+        },
+        {
+          "name": "protect",
+          "params": "(...paths)",
+          "returns": "this",
+          "description": "Set protect"
         },
         {
           "name": "render",
@@ -2064,18 +915,18 @@
           "description": "Set render"
         },
         {
-          "name": "renderTo",
-          "params": "(juxComponent)",
+          "name": "deactivate",
+          "params": "()",
           "returns": "this",
-          "description": "Set renderTo"
+          "description": "Set deactivate"
         }
       ],
-      "example": "const header = jux.header('myHeader', {"
+      "example": "jux.guard('id').render()"
     },
     {
       "name": "Heading",
       "category": "UI Components",
-      "description": "Heading options",
+      "description": "Heading component",
       "constructor": "jux.heading(id: string, options: HeadingOptions = {})",
       "fluentMethods": [
         {
@@ -2090,18 +941,6 @@
           "returns": "this",
           "description": "Set text"
         },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2109,7 +948,7 @@
           "description": "Set render"
         }
       ],
-      "example": "jux.heading('title', { level: 1, text: 'Welcome' }).render('#app');"
+      "example": "jux.heading('id').render()"
     },
     {
       "name": "Helpers",
@@ -2122,7 +961,7 @@
     {
       "name": "Hero",
       "category": "UI Components",
-      "description": "Hero component options",
+      "description": "Hero component",
       "constructor": "jux.hero(id: string, options: HeroOptions = {})",
       "fluentMethods": [
         {
@@ -2162,31 +1001,60 @@
           "description": "Set variant"
         },
         {
-          "name": "style",
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.hero('id').render()"
+    },
+    {
+      "name": "Icon",
+      "category": "UI Components",
+      "description": "Icon component",
+      "constructor": "jux.icon(id: string, options: IconOptions)",
+      "fluentMethods": [
+        {
+          "name": "value",
           "params": "(value)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set value"
         },
         {
-          "name": "class",
+          "name": "size",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set size"
+        },
+        {
+          "name": "color",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set color"
+        },
+        {
+          "name": "useEmoji",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set useEmoji"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "const hero = jux.hero('myHero', {"
+      "example": "jux.icon('id').render()"
+    },
+    {
+      "name": "Icons",
+      "category": "UI Components",
+      "description": "Icon utilities for components",
+      "constructor": "jux.icons(value: string)",
+      "fluentMethods": [],
+      "example": "const icon = renderIcon('🚀');        // Lucide rocket icon"
     },
     {
       "name": "Include",
@@ -2236,6 +1104,24 @@
           "returns": "this",
           "description": "Set withPrefetch"
         },
+        {
+          "name": "withJson",
+          "params": "()",
+          "returns": "this",
+          "description": "Set withJson"
+        },
+        {
+          "name": "asScript",
+          "params": "(options?)",
+          "returns": "this",
+          "description": "Set asScript"
+        },
+        {
+          "name": "asStylesheet",
+          "params": "()",
+          "returns": "this",
+          "description": "Set asStylesheet"
+        },
         {
           "name": "with",
           "params": "(options)",
@@ -2291,12 +1177,12 @@
           "description": "Set remove"
         }
       ],
-      "example": "jux.include('styles.css');"
+      "example": "const config = await jux.include('config.json').asJson();"
     },
     {
       "name": "Input",
       "category": "UI Components",
-      "description": "Input component options",
+      "description": "Input component",
       "constructor": "jux.input(id: string, options: InputOptions = {})",
       "fluentMethods": [
         {
@@ -2318,28 +1204,10 @@
           "description": "Set placeholder"
         },
         {
-          "name": "label",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set label"
-        },
-        {
-          "name": "required",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set required"
-        },
-        {
-          "name": "disabled",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set disabled"
-        },
-        {
-          "name": "name",
+          "name": "icon",
           "params": "(value)",
           "returns": "this",
-          "description": "Set name"
+          "description": "Set icon"
         },
         {
           "name": "rows",
@@ -2384,40 +1252,16 @@
           "description": "Set pattern"
         },
         {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
+          "name": "setValue",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "bind",
-          "params": "(event, handler)",
-          "returns": "this",
-          "description": "Set bind"
-        },
-        {
-          "name": "sync",
-          "params": "(property, stateObj, toState?, toComponent?)",
-          "returns": "this",
-          "description": "Set sync"
+          "description": "Set setValue"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
       "example": "jux.input('id').render()"
@@ -2530,7 +1374,7 @@
     {
       "name": "Loading",
       "category": "UI Components",
-      "description": "Loading component options",
+      "description": "Loading component",
       "constructor": "jux.loading(id: string, options: LoadingOptions = {})",
       "fluentMethods": [
         {
@@ -2545,94 +1389,19 @@
           "returns": "this",
           "description": "Set size"
         },
-        {
-          "name": "text",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set text"
-        },
-        {
-          "name": "fullscreen",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set fullscreen"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "jux.loading('my-spinner', {"
-    },
-    {
-      "name": "Main",
-      "category": "UI Components",
-      "description": "Main component options",
-      "constructor": "jux.main(id: string, options: MainOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "content",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set content"
-        },
-        {
-          "name": "padding",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set padding"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "const main = jux.main('myMain', {"
+      "example": "jux.loading('id').render()"
     },
     {
       "name": "Menu",
       "category": "UI Components",
-      "description": "Menu item configuration",
+      "description": "Menu component",
       "constructor": "jux.menu(id: string, options: MenuOptions = {})",
       "fluentMethods": [
         {
@@ -2648,42 +1417,30 @@
           "description": "Set addItem"
         },
         {
-          "name": "orientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set orientation"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
+          "name": "itemClass",
+          "params": "(className)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set itemClass"
         },
         {
-          "name": "class",
+          "name": "orientation",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set orientation"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "const menu = jux.menu('myMenu', {"
+      "example": "jux.menu('id').render()"
     },
     {
       "name": "Modal",
       "category": "UI Components",
-      "description": "Modal component options",
+      "description": "Modal component",
       "constructor": "jux.modal(id: string, options: ModalOptions = {})",
       "fluentMethods": [
         {
@@ -2716,18 +1473,6 @@
           "returns": "this",
           "description": "Set size"
         },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
         {
           "name": "open",
           "params": "()",
@@ -2745,20 +1490,14 @@
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "const modal = jux.modal('myModal', {"
+      "example": "jux.modal('id').render()"
     },
     {
       "name": "Nav",
       "category": "UI Components",
-      "description": "Nav item configuration",
+      "description": "Nav component",
       "constructor": "jux.nav(id: string, options: NavOptions = {})",
       "fluentMethods": [
         {
@@ -2774,73 +1513,28 @@
           "description": "Set addItem"
         },
         {
-          "name": "variant",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set variant"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
+          "name": "itemClass",
+          "params": "(className)",
           "returns": "this",
-          "description": "Set render"
+          "description": "Set itemClass"
         },
         {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "const nav = jux.nav('myNav', {"
-    },
-    {
-      "name": "Paragraph",
-      "category": "UI Components",
-      "description": "Paragraph options",
-      "constructor": "jux.paragraph(id: string, options: ParagraphOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "text",
+          "name": "brand",
           "params": "(value)",
           "returns": "this",
-          "description": "Set text"
+          "description": "Set brand"
         },
         {
-          "name": "class",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set variant"
         },
         {
-          "name": "style",
+          "name": "sticky",
           "params": "(value)",
           "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "bind",
-          "params": "(property, source, transform?)",
-          "returns": "this",
-          "description": "Set bind"
-        },
-        {
-          "name": "sync",
-          "params": "(property, stateObj, transform?)",
-          "returns": "this",
-          "description": "Set sync"
+          "description": "Set sticky"
         },
         {
           "name": "render",
@@ -2849,99 +1543,72 @@
           "description": "Set render"
         }
       ],
-      "example": "jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');"
+      "example": "jux.nav('id').render()"
     },
     {
-      "name": "Progress",
+      "name": "Paragraph",
       "category": "UI Components",
-      "description": "Progress component options",
-      "constructor": "jux.progress(id: string, options: ProgressOptions = {})",
+      "description": "Paragraph component",
+      "constructor": "jux.paragraph(id: string, options: ParagraphOptions = {})",
       "fluentMethods": [
         {
-          "name": "value",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set value"
-        },
-        {
-          "name": "max",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set max"
-        },
-        {
-          "name": "label",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set label"
-        },
-        {
-          "name": "showPercentage",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showPercentage"
-        },
-        {
-          "name": "variant",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set variant"
-        },
-        {
-          "name": "size",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set size"
-        },
-        {
-          "name": "striped",
+          "name": "text",
           "params": "(value)",
           "returns": "this",
-          "description": "Set striped"
+          "description": "Set text"
         },
         {
-          "name": "animated",
-          "params": "(value)",
+          "name": "render",
+          "params": "(targetId?)",
           "returns": "this",
-          "description": "Set animated"
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.paragraph('id').render()"
+    },
+    {
+      "name": "Progress",
+      "category": "UI Components",
+      "description": "Progress component",
+      "constructor": "jux.progress(id: string, options: ProgressOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "value",
+          "params": "(val)",
+          "returns": "this",
+          "description": "Set value"
         },
         {
-          "name": "style",
-          "params": "(value)",
+          "name": "max",
+          "params": "(val)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set max"
         },
         {
-          "name": "class",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set variant"
         },
         {
-          "name": "bind",
-          "params": "(stateObj)",
+          "name": "showPercentage",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set bind"
+          "description": "Set showPercentage"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "jux.progress('upload', {"
+      "example": "jux.progress('id').render()"
     },
     {
       "name": "Radio",
       "category": "UI Components",
-      "description": "Radio option",
+      "description": "Radio component",
       "constructor": "jux.radio(id: string, options: RadioOptions = {})",
       "fluentMethods": [
         {
@@ -2950,12 +1617,6 @@
           "returns": "this",
           "description": "Set options"
         },
-        {
-          "name": "addOption",
-          "params": "(option)",
-          "returns": "this",
-          "description": "Set addOption"
-        },
         {
           "name": "value",
           "params": "(value)",
@@ -2963,10 +1624,10 @@
           "description": "Set value"
         },
         {
-          "name": "name",
-          "params": "(value)",
+          "name": "addOption",
+          "params": "(option)",
           "returns": "this",
-          "description": "Set name"
+          "description": "Set addOption"
         },
         {
           "name": "orientation",
@@ -2975,37 +1636,19 @@
           "description": "Set orientation"
         },
         {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
+          "name": "setValue",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "bind",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bind"
+          "description": "Set setValue"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "jux.radio('size', {"
+      "example": "jux.radio('id').render()"
     },
     {
       "name": "Req",
@@ -3018,7 +1661,7 @@
     {
       "name": "Select",
       "category": "UI Components",
-      "description": "Two-way binding to state",
+      "description": "Select component",
       "constructor": "jux.select(id: string, options: SelectOptions = {})",
       "fluentMethods": [
         {
@@ -3027,12 +1670,6 @@
           "returns": "this",
           "description": "Set options"
         },
-        {
-          "name": "addOption",
-          "params": "(option)",
-          "returns": "this",
-          "description": "Set addOption"
-        },
         {
           "name": "value",
           "params": "(value)",
@@ -3046,52 +1683,22 @@
           "description": "Set placeholder"
         },
         {
-          "name": "label",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set label"
-        },
-        {
-          "name": "disabled",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set disabled"
-        },
-        {
-          "name": "name",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set name"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
+          "name": "addOption",
+          "params": "(option)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set addOption"
         },
         {
-          "name": "class",
+          "name": "setValue",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "bind",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bind"
+          "description": "Set setValue"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
       "example": "jux.select('id').render()"
@@ -3099,15 +1706,9 @@
     {
       "name": "Sidebar",
       "category": "UI Components",
-      "description": "Sidebar component options",
+      "description": "Sidebar component",
       "constructor": "jux.sidebar(id: string, options: SidebarOptions = {})",
       "fluentMethods": [
-        {
-          "name": "title",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set title"
-        },
         {
           "name": "width",
           "params": "(value)",
@@ -3132,51 +1733,21 @@
           "returns": "this",
           "description": "Set collapsed"
         },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "toggle",
-          "params": "()",
-          "returns": "this",
-          "description": "Set toggle"
-        },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "const sidebar = jux.sidebar('mySidebar', {"
+      "example": "jux.sidebar('id').render()"
     },
     {
       "name": "Switch",
       "category": "UI Components",
-      "description": "Switch component options",
+      "description": "Switch component",
       "constructor": "jux.switch(id: string, options: SwitchOptions = {})",
       "fluentMethods": [
-        {
-          "name": "label",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set label"
-        },
         {
           "name": "checked",
           "params": "(value)",
@@ -3184,60 +1755,36 @@
           "description": "Set checked"
         },
         {
-          "name": "disabled",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set disabled"
-        },
-        {
-          "name": "name",
+          "name": "value",
           "params": "(value)",
           "returns": "this",
-          "description": "Set name"
+          "description": "Set value"
         },
         {
-          "name": "style",
-          "params": "(value)",
+          "name": "toggle",
+          "params": "()",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set toggle"
         },
         {
-          "name": "class",
+          "name": "setValue",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "bind",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bind"
-        },
-        {
-          "name": "toggle",
-          "params": "()",
-          "returns": "this",
-          "description": "Set toggle"
+          "description": "Set setValue"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "jux.switch('notifications', {"
+      "example": "jux.switch('id').render()"
     },
     {
       "name": "Tabs",
       "category": "UI Components",
-      "description": "Tab configuration",
+      "description": "Tabs component",
       "constructor": "jux.tabs(id: string, options: TabsOptions = {})",
       "fluentMethods": [
         {
@@ -3259,50 +1806,26 @@
           "description": "Set activeTab"
         },
         {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set variant"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "const tabs = jux.tabs('myTabs', {"
+      "example": "jux.tabs('id').render()"
     },
     {
       "name": "Theme-toggle",
       "category": "UI Components",
-      "description": "Theme configuration",
+      "description": "Theme-toggle component",
       "constructor": "jux.theme-toggle(id: string, options: ThemeToggleOptions = {})",
       "fluentMethods": [
-        {
-          "name": "setTheme",
-          "params": "(themeId)",
-          "returns": "this",
-          "description": "Set setTheme"
-        },
-        {
-          "name": "addTheme",
-          "params": "(theme)",
-          "returns": "this",
-          "description": "Set addTheme"
-        },
         {
           "name": "themes",
           "params": "(value)",
@@ -3322,31 +1845,25 @@
           "description": "Set showLabel"
         },
         {
-          "name": "style",
-          "params": "(value)",
+          "name": "setTheme",
+          "params": "(themeId)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set setTheme"
         },
         {
-          "name": "class",
-          "params": "(value)",
+          "name": "addTheme",
+          "params": "(theme)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set addTheme"
         },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "// Simple light/dark toggle"
+      "example": "jux.theme-toggle('id').render()"
     },
     {
       "name": "Token-calculator",
@@ -3408,7 +1925,7 @@
     {
       "name": "Tooltip",
       "category": "UI Components",
-      "description": "Tooltip component options",
+      "description": "Tooltip component",
       "constructor": "jux.tooltip(id: string, options: TooltipOptions = {})",
       "fluentMethods": [
         {
@@ -3423,24 +1940,6 @@
           "returns": "this",
           "description": "Set position"
         },
-        {
-          "name": "trigger",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set trigger"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
         {
           "name": "attachTo",
           "params": "(target)",
@@ -3452,15 +1951,9 @@
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
         }
       ],
-      "example": "// Attach to existing element"
+      "example": "jux.tooltip('id').render()"
     },
     {
       "name": "View",
@@ -3501,6 +1994,30 @@
           "returns": "this",
           "description": "Set html"
         },
+        {
+          "name": "tagType",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set tagType"
+        },
+        {
+          "name": "className",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set className"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "attrs",
+          "params": "(attributes, string>)",
+          "returns": "this",
+          "description": "Set attrs"
+        },
         {
           "name": "render",
           "params": "(targetSelector?)",
@@ -3542,5 +2059,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-22T21:54:27.911Z"
+  "lastUpdated": "2026-01-28T04:47:53.565Z"
 }