dars-framework 1.9.1__tar.gz → 1.9.3__tar.gz

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (184) hide show
  1. {dars_framework-1.9.1/dars_framework.egg-info → dars_framework-1.9.3}/PKG-INFO +5 -2
  2. {dars_framework-1.9.1 → dars_framework-1.9.3}/README.md +4 -1
  3. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/main.py +11 -1
  4. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/accordion.py +2 -2
  5. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/card.py +2 -2
  6. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/file_upload.py +2 -2
  7. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/head.py +2 -2
  8. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/modal.py +2 -2
  9. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/navbar.py +2 -2
  10. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/outlet.py +2 -2
  11. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/table.py +2 -2
  12. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/tabs.py +2 -2
  13. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/audio.py +2 -2
  14. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/button.py +2 -2
  15. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/checkbox.py +2 -2
  16. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/container.py +2 -2
  17. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/datepicker.py +2 -2
  18. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/image.py +2 -2
  19. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/input.py +2 -2
  20. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/link.py +2 -2
  21. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/markdown.py +2 -2
  22. dars_framework-1.9.3/dars/components/basic/page.py +139 -0
  23. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/progressbar.py +2 -2
  24. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/radiobutton.py +2 -2
  25. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/section.py +2 -2
  26. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/select.py +2 -2
  27. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/slider.py +2 -2
  28. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/spinner.py +2 -2
  29. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/text.py +2 -2
  30. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/textarea.py +2 -2
  31. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/tooltip.py +2 -2
  32. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/video.py +2 -2
  33. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/layout/flex.py +2 -2
  34. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/layout/grid.py +2 -2
  35. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/visualization/chart.py +2 -2
  36. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/visualization/table.py +2 -2
  37. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/config.py +1 -0
  38. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/app.py +255 -16
  39. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/exporters/web/html_css_js.py +51 -88
  40. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/security.py +1 -1
  41. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/version.py +2 -2
  42. {dars_framework-1.9.1 → dars_framework-1.9.3/dars_framework.egg-info}/PKG-INFO +5 -2
  43. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars_framework.egg-info/SOURCES.txt +0 -1
  44. {dars_framework-1.9.1 → dars_framework-1.9.3}/pyproject.toml +1 -1
  45. dars_framework-1.9.1/dars/components/basic/page.py +0 -72
  46. dars_framework-1.9.1/dars/js_lib.py +0 -2049
  47. {dars_framework-1.9.1 → dars_framework-1.9.3}/Dars-logo.png +0 -0
  48. {dars_framework-1.9.1 → dars_framework-1.9.3}/LICENSE +0 -0
  49. {dars_framework-1.9.1 → dars_framework-1.9.3}/MANIFEST.in +0 -0
  50. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/__init__.py +0 -0
  51. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/actionProtocol.py +0 -0
  52. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/all.py +0 -0
  53. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/backend/__init__.py +0 -0
  54. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/backend/components.py +0 -0
  55. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/backend/data.py +0 -0
  56. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/backend/http.py +0 -0
  57. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/backend/json_utils.py +0 -0
  58. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/backend/route_loader.py +0 -0
  59. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/backend/ssr.py +0 -0
  60. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/__init__.py +0 -0
  61. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/doctor/__init__.py +0 -0
  62. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/doctor/detect.py +0 -0
  63. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/doctor/doctor.py +0 -0
  64. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/doctor/installers.py +0 -0
  65. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/doctor/persist.py +0 -0
  66. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/doctor/preflight.py +0 -0
  67. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/doctor/ui.py +0 -0
  68. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/dpm.py +0 -0
  69. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/hot_reload.py +0 -0
  70. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/preview.py +0 -0
  71. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/cli/translations.py +0 -0
  72. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/__init__.py +0 -0
  73. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/advanced/__init__.py +0 -0
  74. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/basic/__init__.py +0 -0
  75. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/layout/__init__.py +0 -0
  76. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/layout/anchor.py +0 -0
  77. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/components/visualization/__init__.py +0 -0
  78. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/__init__.py +0 -0
  79. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/component.py +0 -0
  80. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/events.py +0 -0
  81. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/js_bridge.py +0 -0
  82. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/properties.py +0 -0
  83. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/route_types.py +0 -0
  84. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/routing.py +0 -0
  85. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/state.py +0 -0
  86. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/state_v2.py +0 -0
  87. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/core/utilities.py +0 -0
  88. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/dars_tests/apps_test/health_check.py +0 -0
  89. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/dars_tests/run_tests.py +0 -0
  90. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/dars_tests/tests/test_advanced_components.py +0 -0
  91. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/dars_tests/tests/test_basic_components.py +0 -0
  92. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/dars_tests/tests/test_core_and_cli.py +0 -0
  93. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/dars_tests/tests/test_layout_components.py +0 -0
  94. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/dars_tests/tests/test_version_check.py +0 -0
  95. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/desktop/__init__.py +0 -0
  96. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/desktop/api.py +0 -0
  97. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/desktop/js_generator.py +0 -0
  98. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/INSTALL.md +0 -0
  99. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/KeyEvents.md +0 -0
  100. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/__init__.py +0 -0
  101. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/animations.md +0 -0
  102. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/app.md +0 -0
  103. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/backend_api.md +0 -0
  104. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/cli.md +0 -0
  105. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/components.md +0 -0
  106. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/config.md +0 -0
  107. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/custom_components.md +0 -0
  108. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/env.md +0 -0
  109. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/events.md +0 -0
  110. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/exporters.md +0 -0
  111. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/getting_started.md +0 -0
  112. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/hooks.md +0 -0
  113. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/index.md +0 -0
  114. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/operations.md +0 -0
  115. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/routing.md +0 -0
  116. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/scripts.md +0 -0
  117. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/ssr.md +0 -0
  118. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/state_management.md +0 -0
  119. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/docs/styling.md +0 -0
  120. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/env.py +0 -0
  121. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/exporters/__init__.py +0 -0
  122. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/exporters/base.py +0 -0
  123. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/exporters/desktop/electron.py +0 -0
  124. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/exporters/web/__init__.py +0 -0
  125. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/exporters/web/vdom.py +0 -0
  126. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/__init__.py +0 -0
  127. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/form_helpers.py +0 -0
  128. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/set_vref.py +0 -0
  129. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/update_vref.py +0 -0
  130. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/use_dynamic.py +0 -0
  131. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/use_value.py +0 -0
  132. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/use_vref.py +0 -0
  133. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/use_watch.py +0 -0
  134. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/hooks/value_helpers.py +0 -0
  135. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/scripts/__init__.py +0 -0
  136. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/scripts/animations.py +0 -0
  137. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/scripts/dscript.py +0 -0
  138. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/scripts/keycode.py +0 -0
  139. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/scripts/script.py +0 -0
  140. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/scripts/utils_ds.py +0 -0
  141. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/__init__.py +0 -0
  142. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/icon.png +0 -0
  143. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/backend/icons/icon.png +0 -0
  144. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/backend/main.js +0 -0
  145. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/backend/package.json +0 -0
  146. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/backend/preload.js +0 -0
  147. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/dars.config.json +0 -0
  148. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/icons/icon.png +0 -0
  149. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/main.py +0 -0
  150. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/public/electron-icon.png +0 -0
  151. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/desktop/template/public/icon.png +0 -0
  152. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/README.md +0 -0
  153. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/CustomComp/main.py +0 -0
  154. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/Modal_Demo/advanced_modal_demo.py +0 -0
  155. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/StateV2/README.md +0 -0
  156. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/StateV2/animation_component.py +0 -0
  157. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/StateV2/counter_component.py +0 -0
  158. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/StateV2/hero_component.py +0 -0
  159. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/StateV2/main.py +0 -0
  160. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/StateV2/styles.css +0 -0
  161. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/StateV2/timer_component.py +0 -0
  162. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/VariousComponents/all_components_demo.py +0 -0
  163. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/__init__.py +0 -0
  164. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/dState/state_mods_demo.py +0 -0
  165. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/hooks/useDynamic.py +0 -0
  166. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/hooks/useValue.py +0 -0
  167. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/advanced/hooks/useWatch.py +0 -0
  168. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/basic/HelloWorld/hello_world.py +0 -0
  169. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/basic/Layouts/flex_layout_responsive.py +0 -0
  170. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/basic/Layouts/grid_layout_responsive.py +0 -0
  171. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/basic/Layouts/layout_multipage_demo.py +0 -0
  172. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/basic/PWA/icon-192x192.png +0 -0
  173. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/basic/PWA/icon-512x512.png +0 -0
  174. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/basic/PWA/pwa_custom_icons.py +0 -0
  175. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/basic/__init__.py +0 -0
  176. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/markdown/MarkdownTemplate/README.md +0 -0
  177. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/markdown/MarkdownTemplate/markdown_template.py +0 -0
  178. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/markdown/MarkdownTemplate/other_docs.md +0 -0
  179. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars/templates/examples/markdown/__init__.py +0 -0
  180. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars_framework.egg-info/dependency_links.txt +0 -0
  181. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars_framework.egg-info/entry_points.txt +0 -0
  182. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars_framework.egg-info/requires.txt +0 -0
  183. {dars_framework-1.9.1 → dars_framework-1.9.3}/dars_framework.egg-info/top_level.txt +0 -0
  184. {dars_framework-1.9.1 → dars_framework-1.9.3}/setup.cfg +0 -0
@@ -1,6 +1,6 @@
1
1
  Metadata-Version: 2.4
2
2
  Name: dars-framework
3
- Version: 1.9.1
3
+ Version: 1.9.3
4
4
  Summary: Dars is a Full-Stack multiplatform Python UI framework for building modern, interactive web and desktop apps with Python code. Seamlessly integrated with FastAPI, it allows you to build complete applications with Server-Side Rendering (SSR) and reactive SPA capabilities also classic multipage html and desktop apps in a single codebase.
5
5
  Author-email: ztamdev <ztadevs@gmail.com>
6
6
  Maintainer-email: ztamdev <ztadevs@gmail.com>
@@ -483,6 +483,7 @@ For complete documentation, see the [Backend API Guide](https://ztamdev.github.i
483
483
  | `dars info my_app.py` | Show info about your app |
484
484
  | `dars formats` | List supported export formats |
485
485
  | `dars dev` | Run the configured entry file with hot preview (app.rTimeCompile) |
486
+ | `dars dev --port 9000` | Run dev server on a custom port (overrides config) |
486
487
  | `dars dev --backend` | Run only the configured backendEntry (FastAPI/SSR backend) |
487
488
  | `dars --help` | Show help and all CLI options |
488
489
 
@@ -516,7 +517,7 @@ Then run your file directly:
516
517
  python my_app.py
517
518
  ```
518
519
 
519
- This will start a local server at http://localhost:8000 so you can view your app in the browser—no manual export needed. You can change the port with:
520
+ This will start a local server at the port specified in your `dars.config.json` (defaults to http://localhost:8000) so you can view your app in the browser—no manual export needed. You can override the port with:
520
521
 
521
522
  ```bash
522
523
  python my_app.py --port 8088
@@ -554,6 +555,7 @@ Example default:
554
555
  "utility_styles": {},
555
556
  "markdownHighlight": true,
556
557
  "markdownHighlightTheme": "auto",
558
+ "port": 8000,
557
559
  "backendEntry": "backend.api:app"
558
560
  }
559
561
  ```
@@ -569,6 +571,7 @@ Example default:
569
571
  - `utility_styles`: Dictionary defining custom utility classes. Keys are class names, values are lists of utility strings or raw CSS properties.
570
572
  - `markdownHighlight`: Auto-inject a client-side syntax highlighter for fenced code blocks in Markdown. Default `true`.
571
573
  - `backendEntry`: Python import path for your SSR/backend app (e.g. `"backend.api:app"`). Required when your app uses `RouteType.SSR` routes. Used by `dars dev --backend`.
574
+ - `port`: The port for the development preview server. Default `8000`.
572
575
 
573
576
  Validate your config:
574
577
 
@@ -442,6 +442,7 @@ For complete documentation, see the [Backend API Guide](https://ztamdev.github.i
442
442
  | `dars info my_app.py` | Show info about your app |
443
443
  | `dars formats` | List supported export formats |
444
444
  | `dars dev` | Run the configured entry file with hot preview (app.rTimeCompile) |
445
+ | `dars dev --port 9000` | Run dev server on a custom port (overrides config) |
445
446
  | `dars dev --backend` | Run only the configured backendEntry (FastAPI/SSR backend) |
446
447
  | `dars --help` | Show help and all CLI options |
447
448
 
@@ -475,7 +476,7 @@ Then run your file directly:
475
476
  python my_app.py
476
477
  ```
477
478
 
478
- This will start a local server at http://localhost:8000 so you can view your app in the browser—no manual export needed. You can change the port with:
479
+ This will start a local server at the port specified in your `dars.config.json` (defaults to http://localhost:8000) so you can view your app in the browser—no manual export needed. You can override the port with:
479
480
 
480
481
  ```bash
481
482
  python my_app.py --port 8088
@@ -513,6 +514,7 @@ Example default:
513
514
  "utility_styles": {},
514
515
  "markdownHighlight": true,
515
516
  "markdownHighlightTheme": "auto",
517
+ "port": 8000,
516
518
  "backendEntry": "backend.api:app"
517
519
  }
518
520
  ```
@@ -528,6 +530,7 @@ Example default:
528
530
  - `utility_styles`: Dictionary defining custom utility classes. Keys are class names, values are lists of utility strings or raw CSS properties.
529
531
  - `markdownHighlight`: Auto-inject a client-side syntax highlighter for fenced code blocks in Markdown. Default `true`.
530
532
  - `backendEntry`: Python import path for your SSR/backend app (e.g. `"backend.api:app"`). Required when your app uses `RouteType.SSR` routes. Used by `dars dev --backend`.
533
+ - `port`: The port for the development preview server. Default `8000`.
531
534
 
532
535
  Validate your config:
533
536
 
@@ -1206,6 +1206,7 @@ def create_parser(include_hidden: bool = True) -> argparse.ArgumentParser:
1206
1206
  # Dev command (run entry in dev mode)
1207
1207
  dev_parser = subparsers.add_parser('dev', help='Run the configured entry file in development mode')
1208
1208
  dev_parser.add_argument('--project', '-p', default='.', help='Project root where dars.config.json resides (default: .)')
1209
+ dev_parser.add_argument('--port', '-P', type=int, help='Port to run the dev server on (overrides config)')
1209
1210
  dev_parser.add_argument('--backend', action='store_true', help='Run only the configured backendEntry (SSR/API) instead of the frontend entry')
1210
1211
  # English-only: no language option on subparsers
1211
1212
 
@@ -2296,7 +2297,16 @@ def main():
2296
2297
  # Backend/SSR server can be started in a separate terminal with `dars dev --backend` if needed.
2297
2298
  process = None
2298
2299
  try:
2299
- process = subprocess.Popen([sys.executable, entry], cwd=os.path.dirname(entry))
2300
+ cmd = [sys.executable, entry]
2301
+ # Prioritize CLI arg, then config, then fallback to 8000
2302
+ port_to_pass = getattr(args, 'port', None)
2303
+ if port_to_pass is None and found and "port" in cfg:
2304
+ port_to_pass = cfg["port"]
2305
+
2306
+ if port_to_pass:
2307
+ cmd.extend(['--port', str(port_to_pass)])
2308
+
2309
+ process = subprocess.Popen(cmd, cwd=os.path.dirname(entry))
2300
2310
  process.wait()
2301
2311
  sys.exit(process.returncode or 0)
2302
2312
  except KeyboardInterrupt:
@@ -9,8 +9,8 @@ class Accordion(Component):
9
9
  - **sections** (list): List of tuples containing `(title, content)`.
10
10
  - **open_indices** (list): Optional list of indices that should be open by default.
11
11
  - **id** (str): Unique identifier for the component.
12
- - **class_name** (str): String containing CSS utility classes (e.g., `"divide-y divide-slate-200 border rounded-xl overflow-hidden"`).
13
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
12
+ - **class_name** (str): String containing regular CSS class names.
13
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
14
14
  - **children** (list): List of child components.
15
15
  - **Events**: Handlers like `on_click`, etc.
16
16
 
@@ -9,8 +9,8 @@ class Card(Component):
9
9
  - **children** (list): List of child components to render inside the card.
10
10
  - **title** (str): Optional title displayed at the top of the card.
11
11
  - **id** (str): Unique identifier for the component.
12
- - **class_name** (str): String containing CSS utility classes (e.g., `"p-6 bg-white rounded-2xl shadow-xl hover:shadow-2xl transition-shadow"`).
13
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
12
+ - **class_name** (str): String containing regular CSS class names.
13
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
14
14
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
15
15
 
16
16
  Example:
@@ -15,8 +15,8 @@ class FileUpload(Component):
15
15
  - **max_size** (int): Maximum file size allowed in bytes.
16
16
  - **label** (str): Text label for the upload button (defaults to "Choose File").
17
17
  - **id** (str): Unique identifier for the component.
18
- - **class_name** (str): String containing CSS utility classes (e.g., `"bg-slate-100 border-2 border-dashed p-8 text-center rounded-xl"`).
19
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
18
+ - **class_name** (str): String containing regular CSS class names.
19
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
20
20
  - **children** (list): List of child components.
21
21
  - **Events**: Handlers like `on_change` (triggered when files are selected).
22
22
 
@@ -28,8 +28,8 @@ class Head(Component):
28
28
  - **links** (list): List of dictionaries for custom `<link>` tags.
29
29
  - **structured_data** (dict): JSON-LD dictionary for structured data.
30
30
  - **id** (str): Unique identifier for the component (not rendered).
31
- - **class_name** (str): CSS utility classes (not rendered).
32
- - **style** (dict): Optional dictionary for direct inline styles (not rendered).
31
+ - **class_name** (str): String containing regular CSS class names (not rendered).
32
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`) (not rendered).
33
33
  - **children** (list): List of child components (not rendered).
34
34
  - **Events**: Handlers (not typical for Head).
35
35
 
@@ -10,8 +10,8 @@ class Modal(Component):
10
10
  - **title** (str): Optional title displayed in the modal header.
11
11
  - **is_open** (bool): Whether the modal is currently visible (defaults to False).
12
12
  - **id** (str): Unique identifier for the component.
13
- - **class_name** (str): String containing CSS utility classes for the modal overlay.
14
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
13
+ - **class_name** (str): String containing regular CSS class names for the modal overlay.
14
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
15
15
  - **Events**: Handlers like `on_click` (can be used to close the modal by clicking the backdrop).
16
16
 
17
17
  Example:
@@ -9,8 +9,8 @@ class Navbar(Component):
9
9
  - ***children** (Component): Positional arguments for navigation links or other components.
10
10
  - **brand** (str): Text or logo component for the site branding area.
11
11
  - **id** (str): Unique identifier for the component.
12
- - **class_name** (str): String containing CSS utility classes (e.g., `"bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-100"`).
13
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
12
+ - **class_name** (str): String containing regular CSS class names.
13
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
14
14
  - **children** (list): List of child components.
15
15
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
16
16
 
@@ -10,8 +10,8 @@ class Outlet(Container):
10
10
  - **placeholder** (Component): Component to display while the route content is being loaded.
11
11
  - ***children** (Component): Initial content for the outlet if no route is matched.
12
12
  - **id** (str): Unique identifier for the component.
13
- - **class_name** (str): String containing CSS utility classes (e.g., `"flex-1 p-6 bg-slate-50 min-h-screen overflow-y-auto"`).
14
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
13
+ - **class_name** (str): String containing regular CSS class names.
14
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
15
15
  - **Events**: Handlers for navigation and lifecycle events.
16
16
 
17
17
  Example:
@@ -10,8 +10,8 @@ class Table(Component):
10
10
  - **data** (list): List of row dictionaries where keys match the `field` defined in `columns`.
11
11
  - **page_size** (int): Number of rows to display per page (optional).
12
12
  - **id** (str): Unique identifier for the component.
13
- - **class_name** (str): String containing CSS utility classes (e.g., `"w-full text-left border-collapse border border-slate-200"`).
14
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
13
+ - **class_name** (str): String containing regular CSS class names.
14
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
15
15
  - **children** (list): List of child components.
16
16
  - **Events**: Handlers for sorting, filtering, and row clicks.
17
17
 
@@ -10,8 +10,8 @@ class Tabs(Component):
10
10
  - **panels** (list): List of components or strings representing the content of each tab.
11
11
  - **selected** (int): Index of the initially active tab (defaults to 0).
12
12
  - **id** (str): Unique identifier for the component.
13
- - **class_name** (str): String containing CSS utility classes (e.g., `"flex flex-col w-full"`).
14
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
13
+ - **class_name** (str): String containing regular CSS class names.
14
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
15
15
  - **children** (list): List of child components.
16
16
  - **Events**: Handlers like `on_change` when the active tab is switched.
17
17
 
@@ -15,8 +15,8 @@ class Audio(Component):
15
15
  - **muted** (bool): If True, the audio will be muted by default.
16
16
  - **preload** (str): Strategy for preloading ('auto', 'metadata', 'none').
17
17
  - **id** (str): Unique identifier for the component.
18
- - **class_name** (str): String containing CSS utility classes.
19
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
18
+ - **class_name** (str): String containing regular CSS class names.
19
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
20
20
  - **children** (list): List of child components.
21
21
  - **Events**: Handlers like `on_play`, `on_pause`, `on_ended`, etc.
22
22
 
@@ -13,8 +13,8 @@ class Button(Component):
13
13
  - **disabled** (bool): Whether the button is interactive or not.
14
14
  - **button_type** (str): HTML type of the button ('button', 'submit', 'reset').
15
15
  - **id** (str): Unique identifier for the component.
16
- - **class_name** (str): String containing CSS utility classes (e.g., `"bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"`).
17
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
16
+ - **class_name** (str): String containing regular CSS class names.
17
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
18
18
  - **children** (list): List of child components to render inside the button.
19
19
  - **Events**: Handlers like `on_click`, `on_double_click`, `on_mouse_enter`, `on_mouse_leave`, `on_mouse_down`, `on_mouse_up`, `on_key_down`, `on_key_up`.
20
20
 
@@ -15,8 +15,8 @@ class Checkbox(Component):
15
15
  - **disabled** (bool): If True, the checkbox is not interactive.
16
16
  - **required** (bool): If True, the checkbox must be checked.
17
17
  - **id** (str): Unique identifier for the component.
18
- - **class_name** (str): String containing CSS utility classes (e.g., `"form-checkbox h-5 w-5 text-indigo-600"`).
19
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
18
+ - **class_name** (str): String containing regular CSS class names.
19
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
20
20
  - **children** (list): List of child components.
21
21
  - **Events**: Handlers like `on_change`, `on_click`, etc.
22
22
 
@@ -10,8 +10,8 @@ class Container(Component):
10
10
  - ***children** (Component): Positional arguments for child components.
11
11
  - **additional_children** (list): Optional list of additional child components.
12
12
  - **id** (str): Unique identifier for the component.
13
- - **class_name** (str): String containing CSS utility classes (e.g., `"flex flex-row justify-between p-4 bg-white shadow"`).
14
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
13
+ - **class_name** (str): String containing regular CSS class names.
14
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
15
15
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
16
16
 
17
17
  Example:
@@ -22,8 +22,8 @@ class DatePicker(Component):
22
22
  - **required** (bool): If True, a date must be selected.
23
23
  - **readonly** (bool): If True, the field is read-only.
24
24
  - **id** (str): Unique identifier for the component.
25
- - **class_name** (str): String containing CSS utility classes.
26
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
25
+ - **class_name** (str): String containing regular CSS class names.
26
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
27
27
  - **children** (list): List of child components.
28
28
  - **Events**: Handlers like `on_change`, `on_open`, `on_close`.
29
29
 
@@ -11,8 +11,8 @@ class Image(Component):
11
11
  - **width** (str): Width of the image (e.g., `"100px"`, `"50%"`).
12
12
  - **height** (str): Height of the image.
13
13
  - **id** (str): Unique identifier for the component.
14
- - **class_name** (str): String containing CSS utility classes (e.g., `"rounded-full object-cover shadow-lg"`).
15
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
14
+ - **class_name** (str): String containing regular CSS class names.
15
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
16
16
  - **children** (list): List of child components.
17
17
  - **Events**: Handlers like `on_click`, `on_load`, etc.
18
18
 
@@ -16,8 +16,8 @@ class Input(Component):
16
16
  - **required** (bool): If True, the field must be filled.
17
17
  - **max_length** (int): Maximum number of characters allowed.
18
18
  - **id** (str): Unique identifier for the component.
19
- - **class_name** (str): String containing CSS utility classes (e.g., `"border-2 border-slate-200 focus:border-indigo-500 p-2 rounded"`).
20
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
19
+ - **class_name** (str): String containing regular CSS class names.
20
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
21
21
  - **children** (list): List of child components.
22
22
  - **Events**: Handlers like `on_change`, `on_input`, `on_focus`, `on_blur`, `on_key_down`, `on_key_up`.
23
23
 
@@ -10,8 +10,8 @@ class Link(Component):
10
10
  - **href** (str): The URL or path to navigate to.
11
11
  - **target** (str): Where to open the link (e.g., `"_self"`, `"_blank"`).
12
12
  - **id** (str): Unique identifier for the component.
13
- - **class_name** (str): String containing CSS utility classes (e.g., `"text-indigo-600 hover:underline font-medium"`).
14
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
13
+ - **class_name** (str): String containing regular CSS class names.
14
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
15
15
  - **children** (list): List of child components.
16
16
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
17
17
 
@@ -12,8 +12,8 @@ class Markdown(Component):
12
12
  - **dark_theme** (bool): Whether to apply dark theme styles to the markdown container.
13
13
  - **lazy** (bool): Enable lazy loading for content that only fetches when visible.
14
14
  - **id** (str): Unique identifier for the component.
15
- - **class_name** (str): String containing CSS utility classes (e.g., `"prose lg:prose-xl max-w-none"`).
16
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
15
+ - **class_name** (str): String containing regular CSS class names.
16
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
17
17
  - **children** (list): List of child components (not typically used for Markdown).
18
18
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
19
19
 
@@ -0,0 +1,139 @@
1
+ # Dars Framework - Core Source File
2
+ #
3
+ # This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
4
+ # If a copy of the MPL was not distributed with this file, You can obtain one at
5
+ # https://mozilla.org/MPL/2.0/.
6
+ #
7
+ # Copyright (c) 2025 ZtaDev
8
+ from dars.core.component import Component
9
+ from typing import Optional, Dict, Any, List
10
+
11
+ class Page(Component):
12
+ """
13
+ Root component for individual pages in a Dars application.
14
+
15
+ Props:
16
+ - ***children** (Component): Positional arguments for child components to be rendered in the page.
17
+ - **id** (str): Unique identifier for the component.
18
+ - **class_name** (str): String containing regular CSS class names.
19
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
20
+ - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
21
+
22
+ Example:
23
+ ```python
24
+ Page(
25
+ Navbar(),
26
+ Container(
27
+ Text("Home Page", class_name="text-4xl font-bold"),
28
+ class_name="max-w-7xl mx-auto py-12"
29
+ ),
30
+ Footer(),
31
+ class_name="bg-white"
32
+ )
33
+ ```
34
+ """
35
+ def __init__(self, *children: Component, id: Optional[str] = None, class_name: Optional[str] = None, style: Optional[Dict[str, Any]] = None, **props):
36
+ super().__init__(id=id, class_name=class_name, style=style, **props)
37
+ self.scripts = []
38
+ for child in children:
39
+ self.add_child(child)
40
+
41
+ def add_script(self, script):
42
+ """
43
+ Adds a script to this page.
44
+
45
+ Supports multiple script types:
46
+
47
+ - **DScript**: Direct Python function compilation to JavaScript
48
+ - **String**: Inline JavaScript code
49
+ - **Dictionary**: Raw script object (fallback)
50
+ - **Utility Chains**: DAP utility functions with promise-based chaining
51
+
52
+ **Script Types:**
53
+
54
+ 1. **DScript** - Compile Python to JavaScript:
55
+ ```python
56
+ page.add_script(dScript(file_path="script.js"))
57
+ ```
58
+
59
+ 2. **Inline JavaScript**:
60
+ ```python
61
+ page.add_script("console.log('Page loaded');")
62
+ ```
63
+
64
+ 3. **Utility Functions** - Chain DAP commands:
65
+ ```python
66
+ from dars.scripts.utils_ds import setTimeout, addClass, log
67
+
68
+ # Sequential animations with promise chaining
69
+ page.add_script(
70
+ setTimeout(5, addClass("logo", "show"))
71
+ .then(setTimeout(350, addClass("title", "show")))
72
+ .then(setTimeout(650, addClass("description", "show")))
73
+ )
74
+ ```
75
+
76
+ 4. **useWatch** - React to state changes:
77
+ ```python
78
+ page.add_script(
79
+ useWatch("user.name", log("Name changed!"))
80
+ )
81
+ ```
82
+
83
+ **Common Utilities:**
84
+
85
+ - **setTimeout(ms, action)**: Execute action after delay (returns Promise)
86
+ - **addClass(id, class)**: Add CSS class to element
87
+ - **removeClass(id, class)**: Remove CSS class
88
+ - **toggleClass(id, class)**: Toggle CSS class
89
+ - **log(msg)**: Log to console
90
+ - **navigate(url)**: Navigate to URL
91
+ - **createComp(target, root)**: Dynamically create components
92
+ - **updateComp(id, props)**: Update component properties
93
+ - **deleteComp(id)**: Remove component from DOM
94
+
95
+ **Promise Chaining:**
96
+
97
+ All timeout/async utilities return Promises, allowing sequential execution:
98
+
99
+ ```python
100
+ page.add_script(
101
+ setTimeout(100, log("Step 1"))
102
+ .then(setTimeout(200, log("Step 2")))
103
+ .then(setTimeout(300, log("Step 3")))
104
+ )
105
+ ```
106
+
107
+ Returns self to allow method chaining.
108
+ """
109
+ self.scripts.append(script)
110
+
111
+ def useWatch(self, state_path: str, *js_helpers):
112
+ """
113
+ Watch a state property and execute callback when it changes.
114
+
115
+ Usage with app.add_script():
116
+ app.add_script(useWatch("user.name", log("Name changed!")))
117
+
118
+ Usage with page.add_script():
119
+ page.add_script(useWatch("user.name", log("Name changed!")))
120
+
121
+ Usage with app.useWatch() (convenience):
122
+ app.useWatch("user.name", log("Name changed!"))
123
+
124
+ Usage with page.useWatch() (convenience):
125
+ page.useWatch("user.name", log("Name changed!"))
126
+
127
+ The returned WatchMarker has a get_code() method that generates the JavaScript.
128
+ """
129
+ from dars.hooks.use_watch import useWatch
130
+ watcher = useWatch(state_path, *js_helpers)
131
+ self.add_script(watcher)
132
+ return self
133
+
134
+ def get_scripts(self):
135
+ return self.scripts
136
+
137
+ def render(self, exporter: Any) -> str:
138
+ # El método render será implementado por el exporter
139
+ raise NotImplementedError("El método render debe ser implementado por el exporter")
@@ -9,8 +9,8 @@ class ProgressBar(Component):
9
9
  - **value** (int): Current progress value (from 0 to `max_value`).
10
10
  - **max_value** (int): Maximum value representing 100% (defaults to 100).
11
11
  - **id** (str): Unique identifier for the component.
12
- - **class_name** (str): String containing CSS utility classes (e.g., `"h-4 bg-slate-200 rounded-full overflow-hidden"`).
13
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
12
+ - **class_name** (str): String containing regular CSS class names.
13
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
14
14
  - **children** (list): List of child components.
15
15
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
16
16
 
@@ -15,8 +15,8 @@ class RadioButton(Component):
15
15
  - **disabled** (bool): If True, the radio button is not interactive.
16
16
  - **required** (bool): If True, the radio button must be selected.
17
17
  - **id** (str): Unique identifier for the component.
18
- - **class_name** (str): String containing CSS utility classes.
19
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
18
+ - **class_name** (str): String containing regular CSS class names.
19
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
20
20
  - **children** (list): List of child components.
21
21
  - **Events**: Handlers like `on_change`, `on_click`, etc.
22
22
 
@@ -10,8 +10,8 @@ class Section(Component):
10
10
  - ***children** (Component): Positional arguments for child components.
11
11
  - **additional_children** (list): Optional list of additional child components.
12
12
  - **id** (str): Unique identifier for the component.
13
- - **class_name** (str): String containing CSS utility classes (e.g., `"py-12 bg-slate-50 border-b border-slate-200"`).
14
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
13
+ - **class_name** (str): String containing regular CSS class names.
14
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
15
15
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
16
16
 
17
17
  Example:
@@ -23,8 +23,8 @@ class Select(Component):
23
23
  - **disabled** (bool): If True, the select is not interactive.
24
24
  - **required** (bool): If True, a selection is mandatory.
25
25
  - **id** (str): Unique identifier for the component.
26
- - **class_name** (str): String containing CSS utility classes.
27
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
26
+ - **class_name** (str): String containing regular CSS class names.
27
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
28
28
  - **children** (list): List of child components.
29
29
  - **Events**: Handlers like `on_change`, `on_focus`, `on_blur`.
30
30
 
@@ -17,8 +17,8 @@ class Slider(Component):
17
17
  - **orientation** (str): `"horizontal"` or `"vertical"`.
18
18
  - **disabled** (bool): If True, the slider is not interactive.
19
19
  - **id** (str): Unique identifier for the component.
20
- - **class_name** (str): String containing CSS utility classes.
21
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
20
+ - **class_name** (str): String containing regular CSS class names.
21
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
22
22
  - **children** (list): List of child components.
23
23
  - **Events**: Handlers like `on_change`, `on_input`.
24
24
 
@@ -6,8 +6,8 @@ class Spinner(Component):
6
6
 
7
7
  Props:
8
8
  - **id** (str): Unique identifier for the component.
9
- - **class_name** (str): String containing CSS utility classes (e.g., `"w-8 h-8 border-4 border-indigo-500 border-t-transparent animate-spin rounded-full"`).
10
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
9
+ - **class_name** (str): String containing regular CSS class names.
10
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
11
11
  - **children** (list): List of child components.
12
12
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
13
13
 
@@ -9,8 +9,8 @@ class Text(Component):
9
9
  Props:
10
10
  - **text** (str): The text content to display.
11
11
  - **id** (str): Unique identifier for the component.
12
- - **class_name** (str): String containing CSS utility classes (e.g., `"text-2xl font-bold text-slate-800"`).
13
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
12
+ - **class_name** (str): String containing regular CSS class names.
13
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
14
14
  - **children** (list): List of child components.
15
15
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
16
16
 
@@ -15,8 +15,8 @@ class Textarea(Component):
15
15
  - **required** (bool): If True, the field must be filled.
16
16
  - **max_length** (int): Maximum number of characters allowed.
17
17
  - **id** (str): Unique identifier for the component.
18
- - **class_name** (str): String containing CSS utility classes (e.g., `"w-full p-4 border rounded-xl focus:ring-2 focus:ring-indigo-500"`).
19
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
18
+ - **class_name** (str): String containing regular CSS class names.
19
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
20
20
  - **children** (list): List of child components.
21
21
  - **Events**: Handlers like `on_change`, `on_input`, `on_focus`, `on_blur`.
22
22
 
@@ -10,8 +10,8 @@ class Tooltip(Component):
10
10
  - **child** (Component): The component that will trigger the tooltip.
11
11
  - **position** (str): Tooltip placement relative to the child (`"top"`, `"right"`, `"bottom"`, `"left"`).
12
12
  - **id** (str): Unique identifier for the component.
13
- - **class_name** (str): String containing CSS utility classes (e.g., `"bg-slate-800 text-white text-xs p-2 rounded"`).
14
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
13
+ - **class_name** (str): String containing regular CSS class names.
14
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
15
15
  - **children** (list): List of child components.
16
16
  - **Events**: Handlers for mouse events.
17
17
 
@@ -19,8 +19,8 @@ class Video(Component):
19
19
  - **preload** (str): Preload strategy (`"auto"`, `"metadata"`, `"none"`).
20
20
  - **plays_inline** (bool): If True, the video plays inline on mobile browsers.
21
21
  - **id** (str): Unique identifier for the component.
22
- - **class_name** (str): String containing CSS utility classes (e.g., `"rounded-xl shadow-lg w-full"`).
23
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
22
+ - **class_name** (str): String containing regular CSS class names.
23
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
24
24
  - **children** (list): List of child components.
25
25
  - **Events**: Handlers like `on_play`, `on_pause`, `on_ended`, etc.
26
26
 
@@ -19,8 +19,8 @@ class FlexLayout(LayoutBase):
19
19
  - **align** (str): Cross axis alignment (`"stretch"`, `"center"`, `"flex-start"`, `"flex-end"`, `"baseline"`).
20
20
  - **gap** (str): Space between child components (e.g., `"16px"`, `"1rem"`).
21
21
  - **id** (str): Unique identifier for the component.
22
- - **class_name** (str): String containing CSS utility classes (e.g., `"w-full h-full p-4 bg-white"`).
23
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
22
+ - **class_name** (str): String containing regular CSS class names.
23
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
24
24
  - **children** (list): List of child components.
25
25
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
26
26
 
@@ -33,8 +33,8 @@ class GridLayout(LayoutBase):
33
33
  - **cols** (int): Number of grid columns.
34
34
  - **gap** (str): Space between grid cells (e.g., `"20px"`, `"1.5rem"`).
35
35
  - **id** (str): Unique identifier for the component.
36
- - **class_name** (str): String containing CSS utility classes (e.g., `"grid grid-cols-3 gap-6 p-8"`).
37
- - **style** (dict): Optional dictionary for direct inline styles (prefer `class_name`).
36
+ - **class_name** (str): String containing regular CSS class names.
37
+ - **style** (dict): Optional dictionary for CSS utility classes (prefer `style`).
38
38
  - **children** (list): List of child components.
39
39
  - **Events**: Handlers like `on_click`, `on_mouse_enter`, etc.
40
40