Upload 81 files

.gitattributes

@@ -35,3 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 MonsterUI/content/MonsterUI/docs/favicon.ico filter=lfs diff=lfs merge=lfs -text
 MonsterUI/content/MonsterUI/docs/MonsterUI.jpg filter=lfs diff=lfs merge=lfs -text
+MonsterUI/docs/favicon.ico filter=lfs diff=lfs merge=lfs -text
+MonsterUI/docs/MonsterUI.jpg filter=lfs diff=lfs merge=lfs -text

MonsterUI/.cursorrules

@@ -0,0 +1 @@
+I am trying to make the python code as consistent with tailwind as possible.  For example `large` should be abbreviated `lg` like in tailwind.

MonsterUI/.gitattributes

@@ -0,0 +1 @@
+*.ipynb merge=nbdev-merge

MonsterUI/.gitconfig

@@ -0,0 +1,11 @@
+# Generated by nbdev_install_hooks
+#
+# If you need to disable this instrumentation do:
+#   git config --local --unset include.path
+#
+# To restore:
+#   git config --local include.path ../.gitconfig
+#
+[merge "nbdev-merge"]
+	name = resolve conflicts with nbdev_fix
+	driver = nbdev_merge %O %A %B %P

MonsterUI/.gitignore

@@ -0,0 +1,167 @@
+tags
+.sesskey
+docs/static
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+_docs/*
+_proc/*
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+uv.lock
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+.idea/

MonsterUI/CHANGELOG.bak

@@ -0,0 +1,222 @@
+# Release notes
+
+<!-- do not remove -->
+
+## 1.0.28
+
+### New Features
+
+- allow optional renderer ([#134](https://github.com/AnswerDotAI/MonsterUI/pull/134))
+
+### Bugs Squashed
+
+- `render_md` doesn't render images with data uris when `img_dir` is set ([#132](https://github.com/AnswerDotAI/MonsterUI/issues/132))
+
+
+## 1.0.26
+
+### Bugs Squashed
+
+- fix `render_md` non http/s urls ([#133](https://github.com/AnswerDotAI/MonsterUI/pull/133)), thanks to [@comhar](https://github.com/comhar)
+
+
+## 1.0.25
+
+### Bugs Squashed
+
+- remove modal on close ([#130](https://github.com/AnswerDotAI/MonsterUI/pull/130)), thanks to [@comhar](https://github.com/comhar)
+- Buttons not working in Modal added to the DOM by HTMX. ([#126](https://github.com/AnswerDotAI/MonsterUI/issues/126))
+
+
+## 1.0.24
+
+### New Features
+
+- use uikit to initialise and open modals inserted with htmx ([#127](https://github.com/AnswerDotAI/MonsterUI/pull/127)), thanks to [@comhar](https://github.com/comhar)
+
+
+## 1.0.23
+
+### Bugs Squashed
+
+- fragment md parsing does not work ([#124](https://github.com/AnswerDotAI/MonsterUI/issues/124))
+- llms.txt showing "internal server" errors ([#122](https://github.com/AnswerDotAI/MonsterUI/issues/122))
+
+
+## 1.0.22
+
+- Create custom themes
+
+### Bugs Squashed
+
+- Unicode strings with encoding declaration are not supported ([#123](https://github.com/AnswerDotAI/MonsterUI/issues/123))
+- Update DropDownNavContainer class to remove unnecessary width class ([#114](https://github.com/AnswerDotAI/MonsterUI/pull/114)), thanks to [@ndendic](https://github.com/ndendic)
+- fix font weight ordering ([#113](https://github.com/AnswerDotAI/MonsterUI/pull/113)), thanks to [@comhar](https://github.com/comhar)
+- FieldSet inputs in Form are misaligned when monsterui is active ([#87](https://github.com/AnswerDotAI/MonsterUI/issues/87))
+
+
+## 1.0.21
+
+### New Features
+
+- The new `ApexChart` component can create line charts, pie charts and [more](https://monsterui.answer.ai/api_ref/docs_charts). ([#110](https://github.com/AnswerDotAI/MonsterUI/pull/110)), thanks to [@ndendic](https://github.com/ndendic)
+- Toasts now disappear automatically after 5 seconds. You can adjust the duration by using the `dur` field (e.g. `Toast('My Toast', dur=10.0)`). ([#109](https://github.com/AnswerDotAI/MonsterUI/pull/109)), thanks to [@comhar](https://github.com/comhar)
+
+### Breaking Change
+
+- Katex is no longer included in the default headers. To include it set `katex=True` when calling `.headers`. (i.e. `Theme.slate.headers(katex=True)`). ([#105](https://github.com/AnswerDotAI/MonsterUI/pull/105)), thanks to [@comhar](https://github.com/comhar)
+
+
+## 1.0.20
+
+### New Features
+
+- Add `icon` header param to optionally not bring in icons js lib ([#99](https://github.com/AnswerDotAI/MonsterUI/issues/99))
+
+### Bugs Squashed
+
+- added fh. to unqid ([#98](https://github.com/AnswerDotAI/MonsterUI/pull/98)), thanks to [@MorsCerta-crypto](https://github.com/MorsCerta-crypto)
+
+
+## 1.0.19
+
+### New Features
+
+- Add accordion component ([#94](https://github.com/AnswerDotAI/MonsterUI/pull/94)), thanks to [@MichlF](https://github.com/MichlF)
+- Fix theme logic ([#93](https://github.com/AnswerDotAI/MonsterUI/pull/93)), thanks to [@curtis-allan](https://github.com/curtis-allan)
+
+
+## 1.0.18
+
+- Hotfix accidental deletion of label select :(
+
+
+## 1.0.16
+
+### Bugs Squashed
+
+- Select not properly checking presence of hx-trigger
+
+## 1.0.14
+
+### New Features
+
+- Move CDN's to jsdelivr ([#88](https://github.com/AnswerDotAI/MonsterUI/pull/88)), thanks to [@curtis-allan](https://github.com/curtis-allan)
+
+### Bugs Squashed
+
+- Select htmx compatibility bug
+- SVG Path Name Collision Issue in MonsterUI ([#85](https://github.com/AnswerDotAI/MonsterUI/issues/85))
+
+
+## 1.0.13
+
+### Bugs Squashed
+
+- LabelCheckboxX ignores id set manually ([#80](https://github.com/AnswerDotAI/MonsterUI/issues/80))
+- Select sending multiple values to HTMX 
+
+
+## 1.0.10
+
+### New Features
+
+- Cusom Themes support in ThemePicker ([#71](https://github.com/AnswerDotAI/MonsterUI/pull/71)), thanks to [@ndendic](https://github.com/ndendic)
+
+
+## 1.0.8
+
+- Add lightbox and Insertable select
+
+## 1.0.7
+
+### New Features
+
+- Add select kwargs to Select and LabelSelect ([#70](https://github.com/AnswerDotAI/MonsterUI/issues/70))
+
+### Bugs Squashed
+
+- Update component classes to align with Franken UI v2.0 ([#67](https://github.com/AnswerDotAI/MonsterUI/pull/67)), thanks to [@Zaseem-BIsquared](https://github.com/Zaseem-BIsquared)
+- Updated ContainerT, CardT, and TableT class names to match the documented patterns from Franken UI v2.0 docs
+
+## 1.0.6
+
+
+### Bugs Squashed
+
+- Update component classes to align with Franken UI v2.0 ([#67](https://github.com/AnswerDotAI/MonsterUI/pull/67)), thanks to [@Zaseem-BIsquared](https://github.com/Zaseem-BIsquared)
+
+
+## 1.0.5
+
+- Add Center component
+
+## 1.0.4
+
+### New Features
+
+- Bug fix to correct theming conflict in theme initialization
+
+
+## 1.0.2
+
+- Bug fix to add dark mode theme selector to TW config, thanks to [@curtis-allan](https://github.com/curtis-allan)
+
+## 1.0.1
+
+- Theme bug fix not allowing theme changes to stick, thanks to [@zaseem-bisquared](https://github.com/Zaseem-BIsquared)
+- Documentation bug fix on tutorial app, thanks to [@decherd](https://github.com/decherd)
+
+
+## 1.0.0
+
+### New Features
+
+- Migrated to use FrankenUI version 2.0 version
+
+- Brand new simplified NavBar api, including enhanced sticky and scrollspy options, thanks to [@ohmeow](https://github.com/ohmeow) and [@curtis-allan](https://github.com/curtis-allan)
+
+- Latex rendering enabled via katex ([#58](https://github.com/AnswerDotAI/MonsterUI/pull/58)), thanks to [@algal](https://github.com/algal)
+
+- Add API References and Guides to llms.txt ([#54](https://github.com/AnswerDotAI/MonsterUI/issues/54))
+
+- New Range component, which includes min/max range
+
+- New center component thanks to inspiration from Carson of HTMX ([#52](https://github.com/AnswerDotAI/MonsterUI/issues/52))
+
+- Better Theme Picker ([#51](https://github.com/AnswerDotAI/MonsterUI/issues/51))
+
+- Upload Zone and Upload Button Components added ([#50](https://github.com/AnswerDotAI/MonsterUI/issues/50))
+
+### Bugs Squashed
+
+- fix: correct PaddingT class naming for padding variants ([#55](https://github.com/AnswerDotAI/MonsterUI/pull/55)), thanks to [@Zaseem-BIsquared](https://github.com/Zaseem-BIsquared)
+
+
+## 0.0.34
+
+
+### Bugs Squashed
+
+- Table markdown rendering bug fix ([#46](https://github.com/AnswerDotAI/MonsterUI/issues/46))
+
+
+## 0.0.33
+
+### New Features
+
+- Add subtitle function for common semantic styling option ([#44](https://github.com/AnswerDotAI/MonsterUI/pull/44))
+
+- Add semantic text styling to docs examples ([#42](https://github.com/AnswerDotAI/MonsterUI/pull/42))
+
+- Created higher level Navbars function for auto-responsive collapse to mobile and easier interface ([#33](https://github.com/AnswerDotAI/MonsterUI/issues/33)), thanks to @curtis-allan
+
+- Added Scrollspy to Nav and NavBar and example that demonstrates it ([#31](https://github.com/AnswerDotAI/MonsterUI/issues/31)), thanks to @99ch
+
+- Added Highlight JS integration to headers ([#28](https://github.com/AnswerDotAI/MonsterUI/issues/28)), thanks to @99ch
+
+### Bugs Squashed
+
+- Improve defaults for Navbar when components are passed so it doesn't override styling specified toby user  ([#43](https://github.com/AnswerDotAI/MonsterUI/pull/43))
+
+

MonsterUI/CHANGELOG.md

@@ -0,0 +1,229 @@
+# Release notes
+
+<!-- do not remove -->
+
+## 1.0.29
+
+### Bugs Squashed
+
+- `apply_classes` wraps some elements in html/body/head tags ([#135](https://github.com/AnswerDotAI/MonsterUI/issues/135))
+
+
+## 1.0.28
+
+### New Features
+
+- allow optional renderer ([#134](https://github.com/AnswerDotAI/MonsterUI/pull/134))
+
+### Bugs Squashed
+
+- `render_md` doesn't render images with data uris when `img_dir` is set ([#132](https://github.com/AnswerDotAI/MonsterUI/issues/132))
+
+
+## 1.0.26
+
+### Bugs Squashed
+
+- fix `render_md` non http/s urls ([#133](https://github.com/AnswerDotAI/MonsterUI/pull/133)), thanks to [@comhar](https://github.com/comhar)
+
+
+## 1.0.25
+
+### Bugs Squashed
+
+- remove modal on close ([#130](https://github.com/AnswerDotAI/MonsterUI/pull/130)), thanks to [@comhar](https://github.com/comhar)
+- Buttons not working in Modal added to the DOM by HTMX. ([#126](https://github.com/AnswerDotAI/MonsterUI/issues/126))
+
+
+## 1.0.24
+
+### New Features
+
+- use uikit to initialise and open modals inserted with htmx ([#127](https://github.com/AnswerDotAI/MonsterUI/pull/127)), thanks to [@comhar](https://github.com/comhar)
+
+
+## 1.0.23
+
+### Bugs Squashed
+
+- fragment md parsing does not work ([#124](https://github.com/AnswerDotAI/MonsterUI/issues/124))
+- llms.txt showing "internal server" errors ([#122](https://github.com/AnswerDotAI/MonsterUI/issues/122))
+
+
+## 1.0.22
+
+- Create custom themes
+
+### Bugs Squashed
+
+- Unicode strings with encoding declaration are not supported ([#123](https://github.com/AnswerDotAI/MonsterUI/issues/123))
+- Update DropDownNavContainer class to remove unnecessary width class ([#114](https://github.com/AnswerDotAI/MonsterUI/pull/114)), thanks to [@ndendic](https://github.com/ndendic)
+- fix font weight ordering ([#113](https://github.com/AnswerDotAI/MonsterUI/pull/113)), thanks to [@comhar](https://github.com/comhar)
+- FieldSet inputs in Form are misaligned when monsterui is active ([#87](https://github.com/AnswerDotAI/MonsterUI/issues/87))
+
+
+## 1.0.21
+
+### New Features
+
+- The new `ApexChart` component can create line charts, pie charts and [more](https://monsterui.answer.ai/api_ref/docs_charts). ([#110](https://github.com/AnswerDotAI/MonsterUI/pull/110)), thanks to [@ndendic](https://github.com/ndendic)
+- Toasts now disappear automatically after 5 seconds. You can adjust the duration by using the `dur` field (e.g. `Toast('My Toast', dur=10.0)`). ([#109](https://github.com/AnswerDotAI/MonsterUI/pull/109)), thanks to [@comhar](https://github.com/comhar)
+
+### Breaking Change
+
+- Katex is no longer included in the default headers. To include it set `katex=True` when calling `.headers`. (i.e. `Theme.slate.headers(katex=True)`). ([#105](https://github.com/AnswerDotAI/MonsterUI/pull/105)), thanks to [@comhar](https://github.com/comhar)
+
+
+## 1.0.20
+
+### New Features
+
+- Add `icon` header param to optionally not bring in icons js lib ([#99](https://github.com/AnswerDotAI/MonsterUI/issues/99))
+
+### Bugs Squashed
+
+- added fh. to unqid ([#98](https://github.com/AnswerDotAI/MonsterUI/pull/98)), thanks to [@MorsCerta-crypto](https://github.com/MorsCerta-crypto)
+
+
+## 1.0.19
+
+### New Features
+
+- Add accordion component ([#94](https://github.com/AnswerDotAI/MonsterUI/pull/94)), thanks to [@MichlF](https://github.com/MichlF)
+- Fix theme logic ([#93](https://github.com/AnswerDotAI/MonsterUI/pull/93)), thanks to [@curtis-allan](https://github.com/curtis-allan)
+
+
+## 1.0.18
+
+- Hotfix accidental deletion of label select :(
+
+
+## 1.0.16
+
+### Bugs Squashed
+
+- Select not properly checking presence of hx-trigger
+
+## 1.0.14
+
+### New Features
+
+- Move CDN's to jsdelivr ([#88](https://github.com/AnswerDotAI/MonsterUI/pull/88)), thanks to [@curtis-allan](https://github.com/curtis-allan)
+
+### Bugs Squashed
+
+- Select htmx compatibility bug
+- SVG Path Name Collision Issue in MonsterUI ([#85](https://github.com/AnswerDotAI/MonsterUI/issues/85))
+
+
+## 1.0.13
+
+### Bugs Squashed
+
+- LabelCheckboxX ignores id set manually ([#80](https://github.com/AnswerDotAI/MonsterUI/issues/80))
+- Select sending multiple values to HTMX 
+
+
+## 1.0.10
+
+### New Features
+
+- Cusom Themes support in ThemePicker ([#71](https://github.com/AnswerDotAI/MonsterUI/pull/71)), thanks to [@ndendic](https://github.com/ndendic)
+
+
+## 1.0.8
+
+- Add lightbox and Insertable select
+
+## 1.0.7
+
+### New Features
+
+- Add select kwargs to Select and LabelSelect ([#70](https://github.com/AnswerDotAI/MonsterUI/issues/70))
+
+### Bugs Squashed
+
+- Update component classes to align with Franken UI v2.0 ([#67](https://github.com/AnswerDotAI/MonsterUI/pull/67)), thanks to [@Zaseem-BIsquared](https://github.com/Zaseem-BIsquared)
+- Updated ContainerT, CardT, and TableT class names to match the documented patterns from Franken UI v2.0 docs
+
+## 1.0.6
+
+
+### Bugs Squashed
+
+- Update component classes to align with Franken UI v2.0 ([#67](https://github.com/AnswerDotAI/MonsterUI/pull/67)), thanks to [@Zaseem-BIsquared](https://github.com/Zaseem-BIsquared)
+
+
+## 1.0.5
+
+- Add Center component
+
+## 1.0.4
+
+### New Features
+
+- Bug fix to correct theming conflict in theme initialization
+
+
+## 1.0.2
+
+- Bug fix to add dark mode theme selector to TW config, thanks to [@curtis-allan](https://github.com/curtis-allan)
+
+## 1.0.1
+
+- Theme bug fix not allowing theme changes to stick, thanks to [@zaseem-bisquared](https://github.com/Zaseem-BIsquared)
+- Documentation bug fix on tutorial app, thanks to [@decherd](https://github.com/decherd)
+
+
+## 1.0.0
+
+### New Features
+
+- Migrated to use FrankenUI version 2.0 version
+
+- Brand new simplified NavBar api, including enhanced sticky and scrollspy options, thanks to [@ohmeow](https://github.com/ohmeow) and [@curtis-allan](https://github.com/curtis-allan)
+
+- Latex rendering enabled via katex ([#58](https://github.com/AnswerDotAI/MonsterUI/pull/58)), thanks to [@algal](https://github.com/algal)
+
+- Add API References and Guides to llms.txt ([#54](https://github.com/AnswerDotAI/MonsterUI/issues/54))
+
+- New Range component, which includes min/max range
+
+- New center component thanks to inspiration from Carson of HTMX ([#52](https://github.com/AnswerDotAI/MonsterUI/issues/52))
+
+- Better Theme Picker ([#51](https://github.com/AnswerDotAI/MonsterUI/issues/51))
+
+- Upload Zone and Upload Button Components added ([#50](https://github.com/AnswerDotAI/MonsterUI/issues/50))
+
+### Bugs Squashed
+
+- fix: correct PaddingT class naming for padding variants ([#55](https://github.com/AnswerDotAI/MonsterUI/pull/55)), thanks to [@Zaseem-BIsquared](https://github.com/Zaseem-BIsquared)
+
+
+## 0.0.34
+
+
+### Bugs Squashed
+
+- Table markdown rendering bug fix ([#46](https://github.com/AnswerDotAI/MonsterUI/issues/46))
+
+
+## 0.0.33
+
+### New Features
+
+- Add subtitle function for common semantic styling option ([#44](https://github.com/AnswerDotAI/MonsterUI/pull/44))
+
+- Add semantic text styling to docs examples ([#42](https://github.com/AnswerDotAI/MonsterUI/pull/42))
+
+- Created higher level Navbars function for auto-responsive collapse to mobile and easier interface ([#33](https://github.com/AnswerDotAI/MonsterUI/issues/33)), thanks to @curtis-allan
+
+- Added Scrollspy to Nav and NavBar and example that demonstrates it ([#31](https://github.com/AnswerDotAI/MonsterUI/issues/31)), thanks to @99ch
+
+- Added Highlight JS integration to headers ([#28](https://github.com/AnswerDotAI/MonsterUI/issues/28)), thanks to @99ch
+
+### Bugs Squashed
+
+- Improve defaults for Navbar when components are passed so it doesn't override styling specified toby user  ([#43](https://github.com/AnswerDotAI/MonsterUI/pull/43))
+
+

MonsterUI/CONTRIBUTING.md

@@ -0,0 +1,27 @@
+# CONTRIBUTING
+
+## Library Contributions
+
+> The code for all components in the library in the Jupyter notebooks (.ipynb files).   Edit those, not the .py files.
+
+This is an [nbdev](https://nbdev.fast.ai/) library. The notebooks are located in `nbs`.  
+
+### Exporting the Modules
+
+You can use `nbdev_export` to export the notebooks to the library directory, `monsterui`.  
+
+### Cleaning NB metadad
+
+You can use `nbdev_clean` to clean the nb metadata from the .py files.  
+
+## Docs Contributions
+
+The docs are run using [FastHTML](https://fastht.ml/) and can be run locally with:
+
+```bash
+cd docs
+pip install -r requirements.txt
+python main.py
+```
+
+This will start up the MonsterUI documentation site, which is a FastHTML app.  Then you can see the site locally at http://localhost:5001/

MonsterUI/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2022, fastai
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

MonsterUI/MANIFEST.in

@@ -0,0 +1,5 @@
+include settings.ini
+include LICENSE
+include CONTRIBUTING.md
+include README.md
+recursive-exclude * __pycache__

MonsterUI/README.md

@@ -0,0 +1,99 @@
+# MonsterUI
+
+MonsterUI is a UI framework for FastHTML for building beautiful web interfaces with minimal code. It combines the simplicity of Python with the power of Tailwind. Perfect for data scientists, ML engineers, and developers who want to quickly turn their Python code into polished web apps without the complexity of traditional UI frameworks. Follows semantic HTML patterns when possible.
+
+MonsterUI adds the following  Tailwind-based libraries [Franken UI](https://franken-ui.dev/) and [DaisyUI](https://daisyui.com/) to FastHTML, as well as Python's [Mistletoe](https://github.com/miyuchina/mistletoe) for Markdown, [HighlightJS](https://highlightjs.org/) for code highlighting, and [Katex](https://katex.org/) for latex support.
+
+# Getting Started
+
+
+## Installation
+
+To install this library, uses
+
+`pip install MonsterUI`
+
+## Getting Started
+
+### TLDR
+
+Run `python file.py` on this to start:
+
+``` python
+from fasthtml.common import *
+from monsterui.all import *
+
+# Choose a theme color (blue, green, red, etc)
+hdrs = Theme.blue.headers()
+
+# Create your app with the theme
+app, rt = fast_app(hdrs=hdrs)
+
+@rt
+def index():
+    socials = (('github','https://github.com/AnswerDotAI/MonsterUI'),
+               ('twitter','https://twitter.com/isaac_flath/'),
+               ('linkedin','https://www.linkedin.com/in/isaacflath/'))
+    return Titled("Your First App",
+        Card(
+            H1("Welcome!"),
+            P("Your first MonsterUI app", cls=TextPresets.muted_sm),
+            P("I'm excited to see what you build with MonsterUI!"),
+            footer=DivLAligned(*[UkIconLink(icon,href=url) for icon,url in socials])))
+
+serve()
+```
+
+## LLM context files
+
+Using LLMs for development is a best practice way to get started and
+explore. While LLMs cannot code for you, they can be helpful assistants.
+You must check, refactor, test, and vet any code any LLM generates for
+you - but they are helpful productivity tools. Take a look inside the
+`llms.txt` file to see links to particularly useful context files!
+
+- [llms.txt](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/llms.txt): Links to what is included
+- [llms-ctx.txt](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/llms-ctx.txt): MonsterUI Documentation Pages
+- [API list](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/apilist.txt): API list for MonsterUI (included in llms-ctx.txt)
+- [llms-ctx-full.txt](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/llms-ctx-full.txt): Full context that includes all api reference pages as markdown
+
+In addition you can add `/md` (for markdown) to a url to get a markdown representation and `/rmd` for rendered markdown representation (nice for looking to see what would be put into context.
+
+### Step by Step
+
+To get started, check out:
+
+1.  Start by importing the modules as follows:
+
+``` python
+from fasthtml.common import *
+from monsterui.all import *
+```
+
+2.  Instantiate the app with the MonsterUI headers
+
+``` python
+app = FastHTML(hdrs=Theme.blue.headers())
+
+# Alternatively, using the fast_app method
+app, rt = fast_app(hdrs=Theme.slate.headers())
+```
+
+> *The color option can be any of the theme options available out of the
+> box*
+
+> `katex` and `highlightjs` are not included by default. To include them set `katex=True` or `highlightjs=True` when calling `.headers`. (i.e. `Theme.slate.headers(katex=True)`)*
+
+From here, you can explore the API Reference & examples to see how to
+implement the components. You can also check out these demo videos to as
+a quick start guide:
+
+- MonsterUI [documentation page and Tutorial
+  app](https://monsterui.answer.ai/tutorial_app)
+- Isaac & Hamel : [Building his website’s team
+  page](https://youtu.be/22Jn46-mmM0)
+- Isaac & Audrey : [Building a blog](https://youtu.be/gVWAsywxLXE)
+- Isaac : [Building a blog](https://youtu.be/22NJgfAqgko)
+
+More resources and improvements to the documentation will be added here
+soon!

MonsterUI/docs/.plash

@@ -0,0 +1 @@
+export PLASH_APP_NAME=monsterui.answer.ai

MonsterUI/docs/api_reference/api_reference.py

@@ -0,0 +1,1211 @@
+"""Reference to all FrankenUI Components"""
+
+from fasthtml.common import *
+from monsterui.all import *
+# from nbdev.showdoc import *
+from utils import create_flippable_card, fn2code_string
+from enum import EnumType
+from collections.abc import Callable
+
+'''
+Any variable starting with docs_ is a function that generates a section of the API reference.
+
+These are automatically added to the docs sidebar so you don't have to do anything other than add the function using create_doc_section.
+'''
+from inspect import signature, getdoc, getsourcefile, getsourcelines
+
+# Utilities
+def get_github_url(func):
+    "Create GitHub URL for function, assuming AnswerDotAI/MonsterUI repo"
+    file = getsourcefile(func).split('MonsterUI/')[-1]
+    line = getsourcelines(func)[-1]
+    file = file.replace('/opt/venv/lib/python3.12/site-packages/','')
+    return f"https://github.com/AnswerDotAI/MonsterUI/blob/main/{file}#L{line}"
+
+def get_github_url(func):
+    "Create GitHub URL for function, assuming AnswerDotAI/MonsterUI repo"
+    try:
+        file = getsourcefile(func)
+        line = getsourcelines(func)[-1]
+        
+        # Get path after monsterui/ (case insensitive)
+        file = file.lower()
+        if 'monsterui/' in file:
+            file = file.split('monsterui/')[-1]
+        elif 'site-packages/' in file:
+            file = file.split('site-packages/')[-1]
+            
+        return f"https://github.com/AnswerDotAI/MonsterUI/blob/main/monsterui/{file}#L{line}"
+    except:
+        return None
+    
+from fastcore.docments import docments, docstring, get_name
+def show_doc(func) -> str:
+    "Convert a Google-style docstring to markdown"
+    params = docments(func, args_kwargs=True)
+    funcname = get_name(func)
+    doc = docstring(func)
+    par, ret = None, None
+    if params:
+        par = Div(Strong('Params'), 
+                  Ul(*[Li(render_md(f"`{name}` {desc if desc else ''}",class_map_mods={'p':'leading-relaxed'}), cls='') for name, desc in params.items() if name != 'return'], cls='uk-list-disc space-y-2 mb-6 ml-6'))
+    if 'return' in params and params['return']: ret = render_md(f"**Returns:** {params['return']}") 
+    return Div(
+        DivFullySpaced(
+            render_md(f"### {funcname}"),
+            A("Source", href=get_github_url(func), cls='text-primary hover:text-primary-focus underline')),
+        Pre(Code(f"{funcname}{signature(func)}",
+                 cls='hljs language-python px-1 block overflow-x-auto'),
+                 cls='bg-base-200 rounded-lg p-4 mb-6'),
+        Div(Blockquote(render_md(doc), cls='pl-4 border-l-4 border-primary mb-6'), par, ret, cls='ml-10'))
+
+def enum_to_html_table(enum_class):
+    "Creates a compact multi-column table display for enum documentation"
+    items = list(enum_class.__members__.items())
+    n_cols = min(4, max(2, round((len(items) ** 0.5))))
+    
+    # Create header/cell pairs with borders
+    def make_pair(opt, val, i): 
+        border = 'border-l border-base-300 pl-4' if i > 0 else ''
+        return [Th('Option', cls=border), Th('Value')] if opt == 'header' else [Td(opt, cls=border), Td(val)]
+    
+    # Build rows with padding for incomplete final row
+    rows = []
+    for i in range(0, len(items), n_cols):
+        cells = []
+        for j in range(n_cols):
+            name, val = items[i + j] if i + j < len(items) else ('', '')
+            cells.extend(make_pair(name, val.value if val else '', j))
+        rows.append(Tr(*cells))
+
+    return Div(
+        Hr(cls='uk-divider-icon my-2'),
+        DivFullySpaced(H3(enum_class.__name__, cls='my-2'), P(I(enum_class.__doc__), cls='text-sm')),
+        Table(
+            Thead(Tr(*make_pair('header', '', 0) * n_cols)),
+            Tbody(*rows),
+            cls=(TableT.hover, 'uk-table-small uk-table-justify uk-table-middle')))
+
+def render_content(c):
+    "Renders content by type"
+    if isinstance(c, str):        return render_md(c) # Strings are rendered as markdown
+    elif isinstance(c, EnumType): return enum_to_html_table(c) # Enums are rendered as tables
+    elif isinstance(c, FT):       return c # FastHTML tags are rendered as themselves
+    elif isinstance(c, tuple): # Tuples are rendered as cards with source and output that can be flipped
+        extra_cls = c[2] if len(tuple(c)) == 3 else None
+        return create_flippable_card(c[0], c[1], extra_cls)
+    elif isinstance(c, Callable): # Callables are rendered as documentation via show_doc
+        return show_doc(c)
+        # _html = show_doc(c, renderer=BasicHtmlRenderer)._repr_html_()
+        # return NotStr(apply_classes(_html, class_map_mods={"table":'uk-table uk-table-hover uk-table-small'}))
+    else: return c
+
+def create_doc_section(*content, title):
+    return lambda: Div(Container(*map(render_content, content)))
+
+def string2code_string(code: str) -> tuple: return eval(code), code
+
+# Sliders
+
+def ex_sliders_1():
+    return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)])
+
+def ex_sliders_2():
+    def _card(i): return Card(H3(f'Card {i}'), P(f'Card {i} content'))
+    return Slider(*[_card(i) for i in range(10)])
+
+def ex_sliders_3():
+    def _card(i): return Card(H3(f'Card {i}'), P(f'Card {i} content'))
+    return Slider(*[_card(i) for i in range(10)], items_cls='gap-10', uk_slider='autoplay: true; autoplay-interval: 1000')
+
+docs_sliders = create_doc_section(
+    H1("Carousel Sliders API Reference"),
+    "Here is a simple example of a slider:",
+    fn2code_string(ex_sliders_1),
+    "Here is a slider with cards:",
+    fn2code_string(ex_sliders_2),
+    "Here is a slider with cards and autoplay:",
+    fn2code_string(ex_sliders_3),
+    "Typically you want to use the `Slider` component, but if you need more control you can use the `SliderContainer`, `SliderItems`, and `SliderNav` components.",
+    Slider,
+    SliderContainer,
+    SliderItems,
+    SliderNav,
+    title="Sliders")
+
+# Accordions
+
+def ex_accordion_1():
+    return Div(
+        H2("Accordion Header"),
+        Accordion(
+            AccordionItem(
+                "Section 1",
+                P("Content for the first section."),
+                P("More content here."),
+            ),
+            AccordionItem(
+                "Section 2",
+                P("Content for the second section."),
+                Label("A label inside!"),
+                li_kwargs={"id": "section-2"},
+            ),
+            AccordionItem(
+                "Section 3 - The last one!", P("Content for the third section.")
+            ),
+            multiple=False,
+            animation=True,
+        ),
+    ),
+
+def ex_accordion_2():
+    return Div(
+        H2("Accordion Header"),
+        Accordion(
+            AccordionItem(
+                "Section 1",
+                P("Content for the first section."),
+                P("More content here."),
+                open=True,
+            ),
+            AccordionItem(
+                "Section 2",
+                P("Content for the second section."),
+                Label("A label inside!"),
+                li_kwargs={"id": "section-2"},
+            ),
+            AccordionItem(
+                "Section 3 - The last one!", P("Content for the third section.")
+            ),
+            multiple=True,
+            animation=True,
+        ),
+    ),
+
+def ex_accordion_3():
+    return Div(
+        H2("Accordion Header"),
+        Accordion(
+            AccordionItem(
+                "Section 1",
+                P("Content for the first section."),
+                P("More content here."),
+            ),
+            AccordionItem(
+                "Section 2",
+                P("Content for the second section."),
+                Label("A label inside!"),
+                li_kwargs={"id": "section-2"},
+            ),
+            AccordionItem(
+                "Section 3 - The last one!", P("Content for the third section.")
+            ),
+            multiple=False,
+            animation=False,
+        ),
+    ),
+
+docs_accordion_link = create_doc_section(
+    H1("Accordion API Reference"),
+    Div(id='accordion'), # for linking to in release post
+    H3("Example Accordions"),
+    P("A simple accordion with fluid collapsing and expanding animation where only a single Section can be exanded at any time."),
+    fn2code_string(ex_accordion_1),
+    P("An accordion with fluid collapsing and expanding animation where one section is already expanded at startup and multiple section can be expanded at any time."),
+    fn2code_string(ex_accordion_2),
+    P("An accordion with no collapsing and expanding animation where only a single Section can be exanded at any time."),
+    fn2code_string(ex_accordion_3),
+    H3("API Reference"),
+    Accordion, 
+    AccordionItem, 
+    title="Accordion")
+
+# Buttons
+
+def ex_buttons(): 
+    return Grid(
+        Button("Default"),
+        Button("Primary",   cls=ButtonT.primary),
+        Button("Secondary", cls=ButtonT.secondary),
+        Button("Danger",    cls=ButtonT.destructive),
+        Button("Text",      cls=ButtonT.text),
+        Button("Link",      cls=ButtonT.link),
+        Button("Ghost",     cls=ButtonT.ghost),
+        )
+
+def ex_links(): 
+    return Div(cls='space-x-4')(
+        A('Default Link'),
+        A('Muted Link', cls=AT.muted),
+        A('Text Link',  cls=AT.text),
+        A('Reset Link', cls=AT.reset),
+        A('Primary Link', cls=AT.primary),
+        A('Classic Link', cls=AT.classic),)
+
+docs_button_link = create_doc_section(
+    H1("Buttons & Links API Reference"),
+    Div(id='button'), # for linking to in release post
+    fn2code_string(ex_buttons),
+    fn2code_string(ex_links),
+    Button, 
+    ButtonT, 
+    AT,
+    title="Buttons & Links")
+
+# Theme
+
+def ex_theme_switcher():
+    return ThemePicker()
+
+docs_theme_headers = create_doc_section( 
+    H1("Theme and Headers API Reference"),
+   """
+   To get headers with a default theme use `hdrs=Theme.<color>.headers()`.  For example for the blue theme you would use `hdrs=Theme.blue.headers()`.  The theme integrated together different frameworks and allows tailwind, FrankenUI, HighlighJS, and DaisyUI components to work well together.
+   
+   Tailwind, FrankenUI and DaisyUI are imported by default.  You must use DaisyUI headers to use anything in the `daisy` module, and FrankenUI headers to use anything in the `franken` module.
+
+   HighlightJS is not added by default, but you can add it by setting `highlightjs=True` in the headers function.  The `render_md` function will use HighlightJS for code blocks.
+   
+   Theme options are:""",
+    Card(Grid(map(P,Theme)),cls='mb-8'),
+    H3("Theme Picker", id='theme'),
+    fn2code_string(ex_theme_switcher),
+    ThemePicker,
+    H3("Custom Themes"),
+    render_md("""
+1. You can use [this theme](https://github.com/AnswerDotAI/MonsterUI/blob/main/docs/custom_theme.css) as a starting point.
+2. Add the theme to your headers as a link like this `Link(rel="stylesheet", href="/custom_theme.css", type="text/css")`
+3. Then add the theme to the `ThemePicker` component. For example `ThemePicker(custom_themes=[('Grass', '#10b981')])`
+"""),
+    "Themes are controlled with `bg-background text-foreground` classes on the `Body` tag.  `fast_app` and `FastHTML` will do this for you automatically so you typically do not have to do anything",
+    fast_app,
+    FastHTML,
+
+    Blockquote(P("Users have said ", A("this site", href="https://ui.jln.dev/"), " is helpful in creating your own themes.")),
+
+    title="Headers")
+
+# Typography
+
+def ex_headings():
+    return Div(
+        Titled("Titled"),
+        H1("Level 1 Heading (H1)"), 
+        H2("Level 2 Heading (H2)"), 
+        H3("Level 3 Heading (H3)"), 
+        H4("Level 4 Heading (H4)"),
+        H5("Level 5 Heading (H5)"),
+        H6("Level 6 Heading (H6)"),
+        )
+
+
+def ex_semantic_elements():
+    return Div(
+        H2("Semantic HTML Elements Demo"),
+        # Text formatting examples
+        P("Here's an example of ", Em("emphasized (Em)"), " and ", Strong("strong (Strong)"), " text."),
+        P("Some ", I("italic text (I)"), " and ", Small("smaller text (Small)"), " in a paragraph."),
+        P("You can ", Mark("highlight (Mark)"), " text, show ", Del("deleted (Del)"), " and ", 
+          Ins("inserted (Ins)"), " content."),
+        P("Chemical formulas use ", Sub("subscripts (Sub)"), " and ", Sup("superscripts (Sup)"), 
+          " like H", Sub("2"), "O."),
+        # Quote examples
+        Blockquote(
+            P("The only way to do great work is to love what you do."),
+            Cite("Steve Jobs (Cite)")),
+        P("As Shakespeare wrote, ", Q("All the world's a stage (Q)"), "."),
+        # Time and Address
+        P("Posted on ", Time("2024-01-29", datetime="2024-01-29")),
+        Address(
+            "Mozilla Foundation (Address)",
+            Br(),
+            "331 E Evelyn Ave (Address)",
+            Br(),
+            "Mountain View, CA 94041 (Address)",
+            Br(),
+            "USA (Address)"),
+        # Technical and definition examples
+        P(
+            Dfn("HTML (Dfn)"), " (", 
+            Abbr("HyperText Markup Language (Abbr)", title="HyperText Markup Language"), 
+            ") is the standard markup language for documents designed to be displayed in a web browser."),
+        P("Press ", Kbd("Ctrl (Kbd)"), " + ", Kbd("C (Kbd)"), " to copy."),
+        P("The command returned: ", Samp("Hello, World! (Samp)")),
+        P("Let ", Var("x (Var)"), " be the variable in the equation."),
+        # Figure with caption
+        Figure(
+            PicSumImg(),
+            Caption("Figure 1: An example image with caption (Caption)")),
+        # Interactive elements
+        Details(
+            Summary("Click to show more information (Summary)"),
+            P("This is the detailed content that is initially hidden (P)")),
+        # Data representation
+        P(
+            Data("123 (Data)", value="123"), " is a number, and here's a Meter showing progress: ",
+            Meter(value=0.6, min=0, max=1)),
+        P(
+            "Temperature: ",
+            Meter(value=-1, min=-10, max=40, low=0, high=30, optimum=21),
+            " (with low/high/optimum values)"),
+        P(
+            Data("€42.00", value="42"), 
+            " - price example with semantic value"),
+        # Output example
+        P("Form calculation result: ", Output("The sum is 42 (Output)", form="calc-form", for_="num1 num2")),
+        # Meta information example
+        Section(
+            H3("Blog Post Title (H3)"),
+            Small("By John Doe • 5 min read (Small)"),
+            P("Article content here...")),
+        # Text decoration examples
+        P("This text has ",U("proper name annotation (U)"), " and this is ",S("outdated information (S)"), " that's been superseded."),
+        cls='space-y-4'
+    )
+
+
+def ex_textpresets():
+    return Grid(*[Div(P(f"This is {preset.name} text", cls=preset.value)) for preset in TextPresets])
+
+def ex_textt():
+    return Grid(*[Div(P(f"This is {s.name} text", cls=s.value)) for s in TextT])
+
+def ex_other():
+    return Div(
+        CodeSpan("This is a CodeSpan element"),
+        Blockquote("This is a blockquote element"),
+        CodeBlock("#This is a CodeBlock element\n\ndef add(a,b): return a+b"))
+
+docs_typography = create_doc_section(
+    H1("Typography API Reference"),
+    P("Ready to go semantic options that cover most of what you need based on the HTML spec"),
+    fn2code_string(ex_headings),
+    fn2code_string(ex_semantic_elements),
+    fn2code_string(ex_other),
+    P("Styling text is possibly the most common style thing to do, so we have a couple of helpers for discoverability inside python.  `TextPresets` is intended to be combinations are are widely applicable and used often, where `TextT` is intended to be more flexible options for you to combine together yourself."),
+    H5("TextPresets.*"),
+    fn2code_string(ex_textpresets),
+    H5("TextT.*"),
+    fn2code_string(ex_textt),
+    H3("API Reference"),
+    TextPresets,
+    TextT,
+    H1, H2, H3, H4, H5, H6, 
+    CodeSpan, Blockquote, CodeBlock, 
+    Em, Strong, I, Small, Mark, Sub, Sup, Del, Ins,
+    Dfn, Abbr, Q, Kbd, Samp, Var,
+    Figure, Caption,
+    Details, Summary,
+    Meter, Data, Output,
+    Address, Time,
+    title="Text Style")
+
+
+# Notifications
+def ex_alerts1(): return Alert("This is a plain alert")
+
+def ex_alerts2(): return Alert("Your purchase has been confirmed!", cls=AlertT.success)
+
+def ex_alerts3():
+    return Alert(
+        DivLAligned(UkIcon('triangle-alert'), 
+                    P("Please enter a valid email.")),
+        cls=AlertT.error)
+
+def ex_toasts1():
+    return Toast("First Example Toast", cls=(ToastHT.start, ToastVT.bottom), dur=300)
+
+def ex_toasts2():
+    return Toast("Second Example Toast", alert_cls=AlertT.info, dur=300)
+
+docs_notifications = create_doc_section(
+    H1("Alerts & Toasts API Reference"),
+    H3("Alerts"),
+    P("The simplest alert is a div wrapped with a span:"),
+    fn2code_string(ex_alerts1),
+    P("Alert colors are defined by the alert styles:"),
+    fn2code_string(ex_alerts2), 
+    P("It often looks nice to use icons in alerts: "),
+    fn2code_string(ex_alerts3),
+    Alert, AlertT, 
+    DividerLine(),
+    H3("Toasts"),
+    P("To define a toast with a particular location, add horizontal or vertical toast type classes:"),
+    fn2code_string(ex_toasts1), 
+    P("To define toast colors, set the class of the alert wrapped by the toast:"),
+    fn2code_string(ex_toasts2),
+    P("Toasts will disappear automatically after 5 seconds. To change the duration of the toast set the `dur` param like this `Toast('Content', dur=10)`."),
+    P("Here's a demo ",  A("app", href="https://gallery.fastht.ml/split/dynamic_user_interface_(htmx)/toast", target="_blank", rel="noopener noreferrer", cls='underline'), " showing how to trigger a toast.", cls='mt-4'),
+    Toast, ToastHT, ToastVT,
+    title="Alerts & Toasts")
+
+# Containers
+
+def ex_articles():
+    return Article(
+        ArticleTitle("Sample Article Title"), 
+        Subtitle("By: John Doe"),
+        P('lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'))
+
+def ex_containers():
+    return Container(
+        "This is a sample container with custom styling.",
+        cls=ContainerT.xs,
+        style="background-color: #FFA500; color: #000000")
+
+
+docs_containers = create_doc_section(
+    H1("Articles, Containers & Sections API Reference"),
+    ArticleMeta,
+    ArticleTitle,
+    Article,
+    fn2code_string(ex_articles),
+    Container,
+    ContainerT,
+    fn2code_string(ex_containers),
+    Section,
+    SectionT,
+    title="Articles, Containers & Sections"
+)
+
+# Cards
+
+def ex_card():
+    return Card(
+        Form(LabelInput("Input"),
+             LabelRange("Range")),
+        header=Div(
+            CardTitle("Header"),
+            P("A card with header and footer",cls=TextPresets.muted_sm)),
+        footer=DivLAligned(Button("Footer Submit Button")))
+
+
+
+def Tags(cats): return Div(cls='space-x-2')(map(Label, cats))
+
+def ex_card2_wide():
+    def Tags(cats): return DivLAligned(map(Label, cats))
+
+    return Card(
+        DivLAligned(
+            A(Img(src="https://picsum.photos/200/200?random=12", style="width:200px"),href="#"),
+            Div(cls='space-y-3 uk-width-expand')(
+                H4("Creating Custom FastHTML Tags for Markdown Rendering"),
+                P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
+                DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted),
+                DivFullySpaced(
+                    Tags(["FastHTML", "HTMX", "Web Apps"]),
+                    Button("Read", cls=(ButtonT.primary,'h-6'))))),
+        cls=CardT.hover)
+
+def ex_card2_tall():
+    def Tags(cats): return DivLAligned(map(Label, cats))
+
+    return Card(
+        Div(
+            A(Img(src="https://picsum.photos/400/200?random=14"), href="#"),
+            Div(cls='space-y-3 uk-width-expand')(
+                H4("Creating Custom FastHTML Tags for Markdown Rendering"),
+                P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
+                DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted),
+                DivFullySpaced(
+                    Tags(["FastHTML", "HTMX", "Web Apps"]),
+                    Button("Read", cls=(ButtonT.primary,'h-6'))))),
+        cls=CardT.hover)
+
+def ex_card3():
+    def team_member(name, role, location="Remote"):
+        return Card(
+            DivLAligned(
+                DiceBearAvatar(name, h=24, w=24),
+                Div(H3(name), P(role))),
+            footer=DivFullySpaced(
+                DivHStacked(UkIcon("map-pin", height=16), P(location)),
+                DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github")))))
+    team = [
+        team_member("Sarah Chen", "Engineering Lead", "San Francisco"),
+        team_member("James Wilson", "Senior Developer", "New York"),
+        team_member("Maria Garcia", "UX Designer", "London"),
+        team_member("Alex Kumar", "Product Manager", "Singapore"),
+        team_member("Emma Brown", "DevOps Engineer", "Toronto"),
+        team_member("Marcus Johnson", "Frontend Developer", "Berlin")
+    ]
+    return Grid(*team, cols_sm=1, cols_md=1, cols_lg=2, cols_xl=3)
+
+docs_cards = create_doc_section(
+    H1("Cards API Reference"),
+    H3("Example Usage"),
+    fn2code_string(ex_card),
+    (*fn2code_string(ex_card2_wide),'sm:block'),
+    (*fn2code_string(ex_card2_tall),'sm:hidden'),
+    fn2code_string(ex_card3),
+    H3("API Reference"),
+    Card,
+    CardTitle,
+    CardT,
+    P("The remainder of these are only needed if you're doing something really special.  They are used in the `Card` function to generate the boilerplate for you.", cls='my-6'),
+    CardContainer,
+    CardHeader,
+    CardBody,
+    CardFooter,
+    title="Cards"
+)
+
+# Lists
+
+def ex_lists():
+    list_options = [(style,str(cls)) for style,cls in ListT.__members__.items()]
+    lists = [Div(H4(f"{style} List:"), Ul(Li("Item 1"), Li("Item 2"), cls=cls)) for style, cls in list_options]
+    return Grid(*lists)
+
+docs_lists = create_doc_section(
+    H1("Lists API Reference"),
+    fn2code_string(ex_lists),
+    ListT,
+    title="Lists")
+
+# Forms
+
+def ex_formlabel(): 
+    return FormLabel("Form Label")
+
+def ex_input(): 
+    return Div(
+        Input(placeholder="Enter text"), 
+        LabelInput(label="Input", id='myid'))
+
+def ex_checkbox(): 
+    return Div(
+        CheckboxX(), 
+        LabelCheckboxX(label="Checkbox", id='checkbox1'))
+
+def ex_range(): 
+    return Div(
+        Range(), 
+        Range(label='kg', value="25,75", min=20, max=75),
+        LabelRange('Basic Range', value='50', min=0, max=100, step=1),
+        LabelRange('Range with Label', value='75', min=0, max=100, step=5, label_range=True),
+        LabelRange('Multiple Values', value='25,75', min=0, max=100, step=5, label_range=True),
+        LabelRange('Custom Range', value='500', min=0, max=1000, step=100, label_range=True)        
+        )
+
+def ex_switch(): 
+    return Div(
+        Switch(id="switch"), 
+        LabelSwitch(label="Switch", id='switch'))
+
+def ex_textarea(): 
+    return Div(
+        TextArea(placeholder="Enter multiple lines of text"), 
+        LabelTextArea(label="TextArea", id='myid'))
+
+def ex_radio(): 
+    return Div(
+        Radio(name="radio-group", id="radio1"), 
+        LabelRadio(label="Radio", id='radio1',cls='flex items-center space-x-4'))
+
+def ex_insertable_select1():
+    fruit_opts = ['apple', 'orange', 'banana', 'mango']
+
+    return Grid(
+        Select(Option('Apple', value='apple'),
+               Option('Orange', value='orange'),
+               Option('Banana', value='banana'),
+               Option('Mango', value='mango'),
+               id="fruit", icon=True, insertable=True, placeholder="Choose a fruit..."),
+
+        Select(Optgroup(label="Fruit")(
+                    *map(lambda l: Option(l.capitalize(), value=l), sorted(fruit_opts))),
+                id="fruit", icon=True, insertable=True, placeholder="Choose a fruit...",
+                cls_custom="button: uk-input-fake justify-between w-full; dropdown: w-full"))
+
+def ex_select(): 
+    return Div(
+        Select(map(Option, ["Option 1", "Option 2", "Option 3"])),
+        LabelSelect(map(Option, ["Option 1", "Option 2", "Option 3"]), label="Select", id='myid'))
+
+def ex_progress(): 
+    return Progress(value=20, max=100)
+
+def ex_form():
+    relationship = ["Parent",'Sibling', "Friend", "Spouse", "Significant Other", "Relative", "Child", "Other"]
+    return Div(cls='space-y-4')(
+        DivCentered(
+            H3("Emergency Contact Form"),
+            P("Please fill out the form completely", cls=TextPresets.muted_sm)),
+        Form(cls='space-y-4')(
+            Grid(LabelInput("First Name",id='fn'), LabelInput("Last Name",id='ln')),
+            Grid(LabelInput("Email",     id='em'), LabelInput("Phone",    id='ph')),
+            H3("Relationship to patient"),
+            Grid(*[LabelCheckboxX(o) for o in relationship], cols=4, cls='space-y-3'),
+            LabelInput("Address",        id='ad'),
+            LabelInput("Address Line 2", id='ad2'),
+            Grid(LabelInput("City",      id='ct'), LabelInput("State",    id='st')),
+            LabelInput("Zip",            id='zp'),
+            DivCentered(Button("Submit Form", cls=ButtonT.primary))))
+
+def ex_upload():
+    return Div(Upload("Upload Button!", id='upload1'),
+               UploadZone(DivCentered(Span("Upload Zone"), UkIcon("upload")), id='upload2'),
+               cls='space-y-4')
+
+docs_forms = create_doc_section(
+    H1("Forms and User Inputs API Reference"),
+    H3("Example Form"),
+    P(f"This form was live coded in a 5 minute video ",
+          A("here",href="https://www.loom.com/share/0916e8a95d524c43a4d100ee85157624?start_and_pause=1", 
+            cls=AT.muted), cls=TextPresets.muted_sm),
+    fn2code_string(ex_form),
+    fn2code_string(ex_upload),
+    FormLabel,
+    fn2code_string(ex_formlabel),
+    Input,
+    fn2code_string(ex_input),
+    LabelInput,
+    LabelCheckboxX,
+    LabelSwitch,
+    LabelRange,
+    LabelTextArea,
+    LabelRadio,
+    LabelSelect,
+    Progress,
+    fn2code_string(ex_progress),
+    Radio,
+    fn2code_string(ex_radio),
+    CheckboxX,
+    fn2code_string(ex_checkbox),
+    Range,
+    fn2code_string(ex_range),
+    Switch,
+    fn2code_string(ex_switch),
+    TextArea,
+    fn2code_string(ex_textarea),
+    Select,
+    fn2code_string(ex_select),
+    H3("Example: Insertable Select"),
+    Caption("In a production app, the user-inserted option would be saved server-side (db, session etc.)"),
+    fn2code_string(ex_insertable_select1),
+    Legend,
+    Fieldset,
+    title="Forms")
+
+
+# Lightbox
+
+def ex_lightbox1():
+    return LightboxContainer(
+        LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='This is my super cool caption'),
+    )
+def ex_lightbox2():
+    return LightboxContainer(
+        LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 1'),
+        LightboxItem(href='https://picsum.photos/id/101/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 2'),
+        LightboxItem(href='https://picsum.photos/id/102/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 3'),
+    )
+
+def ex_lightbox3():
+    return LightboxContainer(
+        LightboxItem(Button("mp4"), href='https://yootheme.com/site/images/media/yootheme-pro.mp4'),
+        LightboxItem(Button("Youtube"), href='https://www.youtube.com/watch?v=c2pz2mlSfXA'),
+        LightboxItem(Button("Vimeo"), href='https://vimeo.com/1084537'),
+        LightboxItem(Button("Iframe"), data_type='iframe', href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938'))
+
+docs_lightbox = create_doc_section(
+    H1("Lightbox API Reference"),
+    fn2code_string(ex_lightbox1),
+    fn2code_string(ex_lightbox2),
+    fn2code_string(ex_lightbox3),
+    LightboxContainer,
+    LightboxItem,
+    title="Lightbox")
+
+# Modals
+
+def ex_modal():
+    return Div(
+        Button("Open Modal",data_uk_toggle="target: #my-modal" ),
+        Modal(ModalTitle("Simple Test Modal"), 
+              P("With some somewhat brief content to show that it works!", cls=TextPresets.muted_sm),
+              footer=ModalCloseButton("Close", cls=ButtonT.primary),id='my-modal'))
+
+docs_modals = create_doc_section(
+    H1("Modals API Reference"),
+    H3("Example Modal"),
+    fn2code_string(ex_modal),
+    Modal,
+    P("If you want to trigger a htmx event on close (like calling a route) you can use `hx_trigger='hidden'` to catch the close event."),
+    ModalCloseButton,
+    P("The remainder of the Modal functions below are used internally by the `Modal` function for you.  You shouldn't need to use them unless you're doing something really special."),
+    ModalTitle,
+    ModalFooter,
+    ModalBody,
+    ModalHeader,
+    ModalDialog,
+    ModalContainer,
+    title="Modals")
+
+# Layout
+
+def ex_grid():
+    return Grid(
+        Div(
+            P("Column 1 Item 1"), 
+            P("Column 1 Item 2"), 
+            P("Column 1 Item 3")),
+        Div(
+            P("Column 2 Item 1"), 
+            P("Column 2 Item 2"), 
+            P("Column 2 Item 3")),
+        Div(
+            P("Column 3 Item 1"), 
+            P("Column 3 Item 2"), 
+            P("Column 3 Item 3")))
+
+def ex_product_grid():
+    products = [
+        {"name": "Laptop", "price": "$999", "img": "https://picsum.photos/200/100?random=1"},
+        {"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/200/100?random=2"},
+        {"name": "Headphones", "price": "$199", "img": "https://picsum.photos/200/100?random=3"},
+        {"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/200/100?random=4"},
+        {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/200/100?random=5"},
+        {"name": "Camera", "price": "$799", "img": "https://picsum.photos/200/100?random=6"},
+    ]
+    
+    product_cards = [
+        Card(
+            Img(src=p["img"], alt=p["name"], style="width:100%; height:100px; object-fit:cover;"),
+            H4(p["name"], cls="mt-2"),
+            P(p["price"], cls=TextPresets.bold_sm),
+            Button("Add to Cart", cls=(ButtonT.primary, "mt-2"))
+        ) for p in products
+    ]
+    
+    return Grid(*product_cards, cols_lg=3)
+
+def ex_fully_spaced_div():
+    return DivFullySpaced(
+        Button("Left", cls=ButtonT.primary),
+        Button("Center", cls=ButtonT.secondary),
+        Button("Right", cls=ButtonT.destructive)
+    )
+
+def ex_centered_div():
+    return DivCentered(
+        H3("Centered Title"),
+        P("This content is centered both horizontally and vertically.")
+    )
+
+def ex_l_aligned_div():
+    return DivLAligned(
+        Img(src="https://picsum.photos/100/100?random=1", style="max-width: 100px;"),
+        H4("Left Aligned Title"),
+        P("Some text that's left-aligned with the title and image.")
+    )
+
+def ex_r_aligned_div():
+    return DivRAligned(
+        Button("Action", cls=ButtonT.primary),
+        P("Right-aligned text"),
+        Img(src="https://picsum.photos/100/100?random=3", style="max-width: 100px;")
+    )
+
+def ex_v_stacked_div():
+    return DivVStacked(
+        H2("Vertical Stack"),
+        P("First paragraph in the stack"),
+        P("Second paragraph in the stack"),
+        Button("Action Button", cls=ButtonT.secondary)
+    )
+
+def ex_h_stacked_div():
+    return DivHStacked(
+        Div(H4("Column 1"), P("Content for column 1")),
+        Div(H4("Column 2"), P("Content for column 2")),
+        Div(H4("Column 3"), P("Content for column 3"))
+    )
+
+docs_layout = create_doc_section(
+    H1("Layout (Flex and Grid) API Reference"),
+    P("This page covers `Grid`s, which are often used for general structure, `Flex` which is often used for layout of components that are not grid based, padding and positioning that can help you make your layout look good, and dividers that can help break up the page", cls=TextPresets.muted_sm),
+    H2("Grid"),
+    fn2code_string(ex_grid),
+    Grid,
+    H4("Practical Grid Example"),
+    fn2code_string(ex_product_grid),
+    H2("Flex"),
+    P("Play ", 
+      A("Flex Box Froggy", href="https://flexboxfroggy.com/", cls=AT.muted), 
+      " to get an understanding of flex box.",
+      cls=TextPresets.muted_sm),
+    DivFullySpaced,
+    fn2code_string(ex_fully_spaced_div),
+    DivCentered,
+    fn2code_string(ex_centered_div),
+    DivLAligned,
+    fn2code_string(ex_l_aligned_div),
+    DivRAligned,
+    fn2code_string(ex_r_aligned_div),
+    DivVStacked,
+    fn2code_string(ex_v_stacked_div),
+    DivHStacked,
+    fn2code_string(ex_h_stacked_div),
+    FlexT,
+    title="Layout")
+
+# Dividers
+
+def ex_dividers():
+    return Div(
+        P("Small Divider"),
+        Divider(cls=DividerT.sm),
+        DivCentered(
+            P("Vertical Divider"),
+            Divider(cls=DividerT.vertical)),
+        DivCentered("Icon Divider"),
+        Divider(cls=DividerT.icon))
+
+def ex_dividersplit():
+    return DividerSplit(P("Or continue with", cls=TextPresets.muted_sm))
+
+def ex_dividerline(): 
+    return DividerLine()
+
+docs_dividers = create_doc_section(
+    H1("Dividers API Reference"),
+    Divider,
+    DividerT,
+    fn2code_string(ex_dividers),
+    DividerSplit,
+    fn2code_string(ex_dividersplit),
+    DividerLine,
+    fn2code_string(ex_dividerline),
+    title="Dividers")
+
+# Navigation
+
+def ex_nav1():
+    mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
+    return NavContainer(*mbrs1)
+
+def ex_nav2():
+    mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
+    mbrs2 = [Li(A('Child 1')), Li(A('Child 2')),Li(A('Child 3'))]
+
+    return NavContainer(
+        NavHeaderLi("NavHeaderLi"),
+        *mbrs1,
+        Li(A(href='')(Div("Subtitle Ex",NavSubtitle("NavSubtitle text to be shown")))),
+        NavDividerLi(),
+        NavParentLi(
+            A('Parent Name'),
+            NavContainer(*mbrs2,parent=False),
+             ),
+    )
+
+def ex_navbar1():
+    return NavBar(A("Page1",href='/rt1'),
+                  A("Page2",href='/rt2'),
+                  A("Page3",href='/rt3'),
+                  brand=H3('My Blog'))
+
+def ex_navbar2():    
+    return NavBar(
+        A(Input(placeholder='search')), 
+        A(UkIcon("rocket")), 
+        A('Page1',href='/rt1'), 
+        A("Page2", href='/rt3'),
+        brand=DivLAligned(Img(src='/api_reference/logo.svg'),UkIcon('rocket',height=30,width=30)))
+
+def ex_navdrop():
+    return Div(
+        Button("Open DropDown"),
+        DropDownNavContainer(Li(A("Item 1",href=''),Li(A("Item 2",href='')))))
+
+def ex_tabs1():
+    return Container(
+        TabContainer(
+            Li(A("Active",href='#', cls='uk-active')),
+            Li(A("Item",href='#')),
+            Li(A("Item",href='#')),
+            Li(A("Disabled",href='#', cls='uk-disabled')),
+            uk_switcher='connect: #component-nav; animation: uk-animation-fade',
+            alt=True),
+         Ul(id="component-nav", cls="uk-switcher")(
+            Li(H1("Tab 1")),
+            Li(H1("Tab 2")),
+            Li(H1("Tab 3"))))
+
+def ex_tabs2():
+    return Container(
+        TabContainer(
+            Li(A("Active",href='javascript:void(0);', cls='uk-active')),
+            Li(A("Item",href='javascript:void(0);')),
+            Li(A("Item",href='javascript:void(0);')),
+            Li(A("Disabled", cls='uk-disabled'))))
+
+docs_navigation = create_doc_section(
+    H1("Navigation (Nav, NavBar, Tabs, etc.) API Reference"),
+    H1("Nav, NavBar, DowDownNav, and Tab examples"),
+    Divider(),
+    H2("Nav"),
+    fn2code_string(ex_nav1),
+    fn2code_string(ex_nav2),
+    H2("Navbars", id='navbars'),
+    "Fully responsive simple navbar using the high level API.  This will collapse to a hamburger menu on mobile devices.  See the Scrollspy example for a more complex navbar example.",
+    fn2code_string(ex_navbar1),
+    fn2code_string(ex_navbar2),
+    H2("Drop Down Navs"),
+    fn2code_string(ex_navdrop),
+    H2("Tabs"),
+    fn2code_string(ex_tabs2),
+    P("A tabs can use any method of navigation (htmx, or href).  However, often these are use in conjunction with switchers do to this client side", cls=TextPresets.muted_sm),
+    fn2code_string(ex_tabs1),
+    H1("API Docs"),
+    NavBar,
+    TabContainer,
+    NavContainer,
+    NavT,
+    NavCloseLi,
+    NavSubtitle,
+    NavHeaderLi,
+    NavDividerLi,
+    NavParentLi,
+    DropDownNavContainer,
+    title="Navigation")
+
+# Steps
+
+
+def ex_steps2():
+    return Steps(
+        LiStep("Account Created", cls=StepT.primary),
+        LiStep("Profile Setup", cls=StepT.neutral),
+        LiStep("Verification", cls=StepT.neutral),
+        cls="w-full")
+def ex_steps3():
+    return Steps(
+    LiStep("Project Planning", cls=StepT.success, data_content="📝"),
+    LiStep("Design Phase", cls=StepT.success, data_content="💡"),
+    LiStep("Development", cls=StepT.primary, data_content="🛠️"),
+    LiStep("Testing", cls=StepT.neutral, data_content="🔎"),
+    LiStep("Deployment", cls=StepT.neutral, data_content="🚀"),
+    cls=(StepsT.vertical, "min-h-[400px]"))
+
+docs_steps = create_doc_section(
+    H1("Steps API Reference"),
+    fn2code_string(ex_steps2),
+    fn2code_string(ex_steps3),
+    H1("API Docs"),
+    Steps,
+    StepsT,
+    LiStep,
+    StepT,
+    title="Steps")
+# Tables
+
+def ex_tables0():
+    return Table(
+        Thead(Tr(Th('Name'),    Th('Age'), Th('City'))),
+        Tbody(Tr(Td('Alice'),   Td('25'),  Td('New York')),
+              Tr(Td('Bob'),     Td('30'),  Td('San Francisco')),
+              Tr(Td('Charlie'), Td('35'),  Td('London'))),
+        Tfoot(Tr(Td('Total'),   Td('90'))))
+
+def ex_tables1():
+    header =  ['Name',    'Age', 'City']
+    body   = [['Alice',   '25',  'New York'],
+              ['Bob',     '30',  'San Francisco'],
+              ['Charlie', '35',  'London']]
+    footer =  ['Total',   '90']
+    return TableFromLists(header, body, footer)
+
+def ex_tables2():
+    def body_render(k, v):
+        match k.lower():
+            case 'name': return Td(v, cls='font-bold')
+            case 'age':  return Td(f"{v} years")
+            case _:      return Td(v)
+
+    header_data = ['Name',          'Age',     'City']
+    body_data   =[{'Name': 'Alice', 'Age': 30, 'City': 'New York'},
+                  {'Name': 'Bob',   'Age': 25, 'City': 'London'}]
+
+    return TableFromDicts(header_data, body_data, 
+        header_cell_render=lambda v: Th(v.upper()), 
+        body_cell_render=body_render)
+
+docs_tables = create_doc_section(
+    H1("Tables API Reference"),
+    fn2code_string(ex_tables0),
+    fn2code_string(ex_tables1),
+    fn2code_string(ex_tables2),
+    Table,
+    TableFromLists,
+    TableFromDicts,
+    TableT,
+    Tbody,
+    Th,
+    Td,    
+    title="Tables")
+
+# Icons
+
+def ex_dicebear():
+    return DivLAligned(
+        DiceBearAvatar('Isaac Flath',10,10),
+        DiceBearAvatar('Aaliyah',10,10),
+        DiceBearAvatar('Alyssa',10,10))
+
+def ex_picsum():
+    return Grid(PicSumImg(100,100), PicSumImg(100,100, blur=6),PicSumImg(100,100, grayscale=True))
+
+def ex_icon():
+    return Grid(
+        UkIcon('chevrons-right', height=15, width=15),
+        UkIcon('bug',            height=15, width=15),
+        UkIcon('phone-call',     height=15, width=15),
+        UkIcon('maximize-2',     height=15, width=15),
+        UkIcon('thumbs-up',      height=15, width=15),)        
+
+def ex_iconlink():
+    return DivLAligned(
+        UkIconLink('chevrons-right'),
+        UkIconLink('chevrons-right', button=True, cls=ButtonT.primary))
+
+docs_icons_images = create_doc_section(
+    H1("Icons & Images API Reference"),
+    H1("Avatars"),
+    fn2code_string(ex_dicebear),
+    DiceBearAvatar,
+    H1("PlaceHolder Images"),
+    fn2code_string(ex_picsum),
+    PicSumImg,
+    H1("Icons"),
+    P("Icons use Lucide icons - you can find a full list of icons in their docs.", cls=TextPresets.muted_sm),
+    fn2code_string(ex_icon),
+    UkIcon,
+    fn2code_string(ex_iconlink),
+    UkIconLink,
+    title="Icons")
+
+# Markdown
+
+def ex_markdown():
+    md = '''# Example Markdown
+
++ With **bold** and *italics*
++ With a [link](https://github.com)
+
+### And a subheading
+
+> This is a blockquote
+
+This supports inline latex: $e^{\\pi i} + 1 = 0$ as well as block latex thanks to Katex.
+
+$$
+\\frac{1}{2\\pi i} \\oint_C \\frac{f(z)}{z-z_0} dz
+$$
+
+And even syntax highlighting thanks to Highlight.js! (Just make sure you set `highlightjs=True` in the headers function)
+
+```python
+def add(a, b):
+    return a + b
+```
+'''
+    return render_md(md)
+
+def ex_markdown2():
+    md = '''With custom **bold** style\n\n > But no extra quote style because class_map overrides all default styled'''
+    return render_md(md, class_map={'b': 'text-red-500'})
+
+def ex_markdown3():
+    md = '''With custom **bold** style\n\n > But default  quote style because class_map_mods replaces sepecified styles and leaves the rest as default'''
+    return render_md(md, class_map_mods={'b': 'text-red-500'})
+
+def ex_applyclasses():
+    return apply_classes('<h1>Hello, World!</h1><p>This is a paragraph</p>')
+
+def ex_applyclasses2():
+    from mistletoe import markdown, HTMLRenderer
+    md = markdown('# Hi\n[a link](www.google.com)', renderer=HTMLRenderer)
+    return Safe(apply_classes(md))
+
+docs_markdown = create_doc_section(
+    H1("Markdown + automated HTML styling API Reference"),
+    fn2code_string(ex_markdown),
+    render_md("You can overwrite the default styling for markdown rendering with your own css classes with  `class_map"),
+    fn2code_string(ex_markdown2),
+    render_md("You can modify the default styling for markdown rendering with your own css classes with  `class_map_mods"),
+    fn2code_string(ex_markdown3),
+    render_md("This uses the `apply_classes` function, which can be used to apply classes to html strings.  This is useful for applying styles to any html you get from an external source."),
+    fn2code_string(ex_applyclasses),
+    render_md("One common external source is a markdown renderer.  MonsterUI uses tailwind css for styling so you don't get any styling without specifying classes, `apply_classes` can do that for you."),
+    fn2code_string(ex_applyclasses2),
+    apply_classes,
+    title="Markdown + HTML Frankification")
+
+
+docs_html = create_doc_section(
+    H1("HTML Styling API Reference"),
+    fn2code_string(ex_applyclasses),
+    title="HTML Styling")
+
+def ex_loading1():
+    return Loading()
+
+def ex_loading2():
+    types = [LoadingT.spinner, LoadingT.dots, LoadingT.ring, LoadingT.ball, LoadingT.bars, LoadingT.infinity]
+    sizes = [LoadingT.xs, LoadingT.sm, LoadingT.md, LoadingT.lg]
+    rows = [Div(*[Loading((t,s)) for s in sizes], cls='flex gap-4') for t in types]
+    return Div(*rows, cls='flex flex-col gap-4')
+
+docs_loading = create_doc_section(
+    H1("Loading Indicators API Reference"),
+    fn2code_string(ex_loading1),
+    fn2code_string(ex_loading2),
+    Loading,
+    LoadingT,
+    title="Loading")
+
+
+# Charts
+def ex_line_chart():
+    return ApexChart(
+        opts={
+            "chart": {"type":"line", "zoom":{"enabled": False}, "toolbar":{"show":False}},
+            "series": [{"name":"Desktops", "data": [186, 305, 237, 73, 209, 214, 355]}],
+            "xaxis": {"categories":["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
+        },
+        cls='max-w-md max-h-md'
+    )
+
+def ex_pie_chart():
+    return ApexChart(
+        opts={
+            "chart": {"type":"pie", "zoom":{"enabled": False}, "toolbar":{"show":False}},
+            "series": [186, 305, 237, 73, 209, 214, 355],
+            "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
+        },
+        cls='max-w-md max-h-md'
+    )
+
+docs_charts = create_doc_section(
+    H1("Charts API Reference"),
+    P(
+        "MonsterUI supports ", A("ApexCharts", href="https://apexcharts.com/", cls='underline'),
+        ", a javascript library for rendering different charts like line and pie charts. ",
+        "See the full list of chart types ", A("here.", href="https://apexcharts.com/javascript-chart-demos/", cls='underline'),
+    ),
+    P("To render a chart you'll need to include the ApexChart js in your app headers like this"),
+    CodeSpan("app, rt = fast_app(hdrs=Theme.blue.headers(apex_charts=True))"),
+    P("Then create an " , CodeSpan("ApexChart"), " component as shown in the examples below."),
+    P("Generally, you should be able to take any chart from the ApexChart docs, convert the chart's options var to a python dict and plug it straight into MonsterUI's ApexChart component."),
+    H2("Example usage", cls="mt-4"),
+    H4("Line chart", cls="mt-4"),
+    fn2code_string(ex_line_chart),
+    H4("Pie chart", cls="mt-4"),
+    fn2code_string(ex_pie_chart),
+    ApexChart,
+    title="Charts"
+)

MonsterUI/docs/apilist.txt

@@ -0,0 +1,520 @@
+# monsterui Module Documentation
+
+## monsterui.core
+
+- `class ThemeRadii(Enum)`
+    Members: none, sm, md, lg
+
+
+- `class ThemeShadows`
+
+- `class ThemeFont`
+
+- `class Theme(Enum)`
+    Selector to choose theme and get all headers needed for app.  Includes frankenui + tailwind + daisyui + highlight.js options
+    Members: slate, stone, gray, neutral, red, rose, orange, green, blue, yellow, violet, zinc
+
+    - `headers(self, mode, icons, daisy, highlightjs, katex, apex_charts, radii, shadows, font)`
+        Create frankenui and tailwind cdns
+
+    - `local_headers(self, mode, static_dir, icons, daisy, highlightjs, katex, apex_charts, radii, shadows, font)`
+        Create headers using local files downloaded from CDNs
+
+
+## monsterui.daisy
+
+- `class AlertT(Enum)`
+    Alert styles from DaisyUI
+    Members: info, success, warning, error
+
+
+- `def Alert(*c, **kwargs)`
+    Alert informs users about important events.
+
+- `class StepsT(Enum)`
+    Options for Steps
+    Members: vertical, horizonal
+
+
+- `class StepT(Enum)`
+    Step styles for LiStep
+    Members: primary, secondary, accent, info, success, warning, error, neutral
+
+
+- `def Steps(*li, **kwargs)`
+    Creates a steps container
+
+- `def LiStep(*c, **kwargs)`
+    Creates a step list item
+
+- `class LoadingT(Enum)`
+    Members: spinner, dots, ring, ball, bars, infinity, xs, sm, md, lg
+
+
+- `def Loading(cls, htmx_indicator, **kwargs)`
+    Creates a loading animation component
+
+- `class ToastHT(Enum)`
+    Horizontal position for Toast
+    Members: start, center, end
+
+
+- `class ToastVT(Enum)`
+    Vertical position for Toast
+    Members: top, middle, bottom
+
+
+## monsterui.foundations
+
+> Data Structures and Utilties
+
+- `def stringify(o)`
+    Converts input types into strings that can be passed to FT components
+
+- `class VEnum(Enum)`
+    Members: 
+
+    - `__str__(self)`
+    - `__add__(self, other)`
+    - `__radd__(self, other)`
+
+## monsterui.franken
+
+- `class TextT(Enum)`
+    Text Styles from https://franken-ui.dev/docs/text
+    Members: paragraph, lead, meta, gray, italic, xs, sm, lg, xl, light, normal, medium, bold, extrabold, muted, primary, secondary, success, warning, error, info, left, right, center, justify, start, end, top, middle, bottom, truncate, break_, nowrap, underline, highlight
+
+
+- `class TextPresets(Enum)`
+    Common Typography Presets
+    Members: muted_sm, muted_lg, bold_sm, bold_lg, md_weight_sm, md_weight_muted
+
+
+- `def CodeSpan(*c, **kwargs)`
+    A CodeSpan with Styling
+
+- `def CodeBlock(*c, **kwargs)`
+    CodeBlock with Styling
+
+- `def H1(*c, **kwargs)`
+    H1 with styling and appropriate size
+
+- `def H2(*c, **kwargs)`
+    H2 with styling and appropriate size
+
+- `def H3(*c, **kwargs)`
+    H3 with styling and appropriate size
+
+- `def H4(*c, **kwargs)`
+    H4 with styling and appropriate size
+
+- `def H5(*c, **kwargs)`
+    H5 with styling and appropriate size
+
+- `def H6(*c, **kwargs)`
+    H6 with styling and appropriate size
+
+- `def Subtitle(*c, **kwargs)`
+    Styled muted_sm text designed to go under Headings and Titles
+
+- `def Q(*c, **kwargs)`
+    Styled quotation mark
+
+- `def Em(*c, **kwargs)`
+    Styled emphasis text
+
+- `def Strong(*c, **kwargs)`
+    Styled strong text
+
+- `def I(*c, **kwargs)`
+    Styled italic text
+
+- `def Small(*c, **kwargs)`
+    Styled small text
+
+- `def Mark(*c, **kwargs)`
+    Styled highlighted text
+
+- `def Del(*c, **kwargs)`
+    Styled deleted text
+
+- `def Ins(*c, **kwargs)`
+    Styled inserted text
+
+- `def Sub(*c, **kwargs)`
+    Styled subscript text
+
+- `def Sup(*c, **kwargs)`
+    Styled superscript text
+
+- `def Blockquote(*c, **kwargs)`
+    Blockquote with Styling
+
+- `def Caption(*c, **kwargs)`
+    Styled caption text
+
+- `def Cite(*c, **kwargs)`
+    Styled citation text
+
+- `def Time(*c, **kwargs)`
+    Styled time element
+
+- `def Address(*c, **kwargs)`
+    Styled address element
+
+- `def Abbr(*c, **kwargs)`
+    Styled abbreviation with dotted underline
+
+- `def Dfn(*c, **kwargs)`
+    Styled definition term with italic and medium weight
+
+- `def Kbd(*c, **kwargs)`
+    Styled keyboard input with subtle background
+
+- `def Samp(*c, **kwargs)`
+    Styled sample output with subtle background
+
+- `def Var(*c, **kwargs)`
+    Styled variable with italic monospace
+
+- `def Figure(*c, **kwargs)`
+    Styled figure container with card-like appearance
+
+- `def Details(*c, **kwargs)`
+    Styled details element
+
+- `def Summary(*c, **kwargs)`
+    Styled summary element
+
+- `def Data(*c, **kwargs)`
+    Styled data element
+
+- `def Meter(*c, **kwargs)`
+    Styled meter element
+
+- `def S(*c, **kwargs)`
+    Styled strikethrough text (different semantic meaning from Del)
+
+- `def U(*c, **kwargs)`
+    Styled underline (for proper names in Chinese, proper spelling etc)
+
+- `def Output(*c, **kwargs)`
+    Styled output element for form results
+
+- `def PicSumImg(h, w, id, grayscale, blur, **kwargs)`
+    Creates a placeholder image using https://picsum.photos/
+
+- `def AccordionItem(title, *c)`
+    Creates a single item for use within an Accordion component, handling title, content, and open state.
+
+- `def Accordion(*c, **kwargs)`
+    Creates a styled Accordion container using accordion component.
+
+- `class ButtonT(Enum)`
+    Options for styling Buttons
+    Members: default, ghost, primary, secondary, destructive, text, link, xs, sm, lg, xl, icon
+
+
+- `def Button(*c, **kwargs)`
+    Button with Styling (defaults to `submit` for form submission)
+
+- `class ContainerT(Enum)`
+    Max width container sizes from https://franken-ui.dev/docs/container
+    Members: xs, sm, lg, xl, expand
+
+
+- `class BackgroundT(Enum)`
+    Members: muted, primary, secondary, default
+
+
+- `def Container(*c, **kwargs)`
+    Div to be used as a container that often wraps large sections or a page of content
+
+- `def Titled(title, *c, **kwargs)`
+    Creates a standard page structure for titled page.  Main(Container(title, content))
+
+- `class DividerT(Enum)`
+    Divider Styles from https://franken-ui.dev/docs/divider
+    Members: icon, sm, vertical
+
+
+- `def Divider(*c, **kwargs)`
+    Divider with default styling and margin
+
+- `def DividerSplit(*c)`
+    Creates a simple horizontal line divider with configurable thickness and vertical spacing
+
+- `def Article(*c, **kwargs)`
+    A styled article container for blog posts or similar content
+
+- `def ArticleTitle(*c, **kwargs)`
+    A title component for use within an Article
+
+- `def ArticleMeta(*c, **kwargs)`
+    A metadata component for use within an Article showing things like date, author etc
+
+- `class SectionT(Enum)`
+    Section styles from https://franken-ui.dev/docs/section
+    Members: default, muted, primary, secondary, xs, sm, lg, xl, remove_vertical
+
+
+- `def Section(*c, **kwargs)`
+    Section with styling and margins
+
+- `def Form(*c, **kwargs)`
+    A Form with default spacing between form elements
+
+- `def Fieldset(*c, **kwargs)`
+    A Fieldset with default styling
+
+- `def Legend(*c, **kwargs)`
+    A Legend with default styling
+
+- `def Input(*c, **kwargs)`
+    An Input with default styling
+
+- `def Radio(*c, **kwargs)`
+    A Radio with default styling
+
+- `def CheckboxX(*c, **kwargs)`
+    A Checkbox with default styling
+
+- `def Range(*c, **kwargs)`
+    A Range with default styling
+
+- `def TextArea(*c, **kwargs)`
+    A Textarea with default styling
+
+- `def Switch(*c, **kwargs)`
+    A Switch with default styling
+
+- `def Upload(*c, **kwargs)`
+    A file upload component with default styling
+
+- `def UploadZone(*c, **kwargs)`
+    A file drop zone component with default styling
+
+- `def FormLabel(*c, **kwargs)`
+    A Label with default styling
+
+- `class LabelT(Enum)`
+    Members: primary, secondary, destructive
+
+
+- `def Label(*c, **kwargs)`
+    FrankenUI labels, which look like pills
+
+- `def UkFormSection(title, description, *c)`
+    A form section with a title, description and optional button
+
+- `def GenericLabelInput(label, lbl_cls, input_cls, container, cls, id, input_fn, **kwargs)`
+    `Div(Label,Input)` component with Uk styling injected appropriately. Generally you should higher level API, such as `LabelInput` which is created for you in this library
+
+- `def LabelInput(label, lbl_cls, input_cls, cls, id, **kwargs)`
+    A `FormLabel` and `Input` pair that provides default spacing and links/names them based on id
+
+- `def LabelRadio(label, lbl_cls, input_cls, container, cls, id, **kwargs)`
+    A FormLabel and Radio pair that provides default spacing and links/names them based on id
+
+- `def LabelCheckboxX(label, lbl_cls, input_cls, container, cls, id, **kwargs)`
+    A FormLabel and CheckboxX pair that provides default spacing and links/names them based on id
+
+- `def Options(*c)`
+    Helper function to wrap things into `Option`s for use in `Select`
+
+- `def Select(*option, **kwargs)`
+    Creates a select dropdown with uk styling and option for adding a search box
+
+- `def LabelSelect(*option, **kwargs)`
+    A FormLabel and Select pair that provides default spacing and links/names them based on id
+
+- `@delegates(GenericLabelInput, but=['input_fn', 'cls']) def LabelRange(label, lbl_cls, input_cls, cls, id, value, min, max, step, label_range, **kwargs)`
+    A FormLabel and Range pair that provides default spacing and links/names them based on id
+
+- `class AT(Enum)`
+    Link styles from https://franken-ui.dev/docs/link
+    Members: muted, text, reset, primary, classic
+
+
+- `class ListT(Enum)`
+    List styles using Tailwind CSS
+    Members: disc, circle, square, decimal, hyphen, bullet, divider, striped
+
+
+- `def ModalContainer(*c, **kwargs)`
+    Creates a modal container that components go in
+
+- `def ModalDialog(*c, **kwargs)`
+    Creates a modal dialog
+
+- `def ModalHeader(*c, **kwargs)`
+    Creates a modal header
+
+- `def ModalBody(*c, **kwargs)`
+    Creates a modal body
+
+- `def ModalFooter(*c, **kwargs)`
+    Creates a modal footer
+
+- `def ModalTitle(*c, **kwargs)`
+    Creates a modal title
+
+- `def ModalCloseButton(*c, **kwargs)`
+    Creates a button that closes a modal with js
+
+- `def Modal(*c, **kwargs)`
+    Creates a modal with the appropriate classes to put the boilerplate in the appropriate places for you
+
+- `def Placeholder(*c, **kwargs)`
+    Creates a placeholder
+
+- `def Progress(*c, **kwargs)`
+    Creates a progress bar
+
+- `def UkIcon(icon, height, width, stroke_width, cls, **kwargs)`
+    Creates an icon using lucide icons
+
+- `def UkIconLink(icon, height, width, stroke_width, cls, button, **kwargs)`
+    Creates an icon link using lucide icons
+
+- `def DiceBearAvatar(seed_name, h, w)`
+    Creates an Avatar using https://dicebear.com/
+
+- `def Center(*c, **kwargs)`
+    Centers contents both vertically and horizontally by default
+
+- `class FlexT(Enum)`
+    Flexbox modifiers using Tailwind CSS
+    Members: block, inline, left, center, right, between, around, stretch, top, middle, bottom, row, row_reverse, column, column_reverse, nowrap, wrap, wrap_reverse
+
+
+- `def Grid(*div, **kwargs)`
+    Creates a responsive grid layout with smart defaults based on content
+
+- `def DivFullySpaced(*c, **kwargs)`
+    Creates a flex div with it's components having as much space between them as possible
+
+- `def DivCentered(*c, **kwargs)`
+    Creates a flex div with it's components centered in it
+
+- `def DivLAligned(*c, **kwargs)`
+    Creates a flex div with it's components aligned to the left
+
+- `def DivRAligned(*c, **kwargs)`
+    Creates a flex div with it's components aligned to the right
+
+- `def DivVStacked(*c, **kwargs)`
+    Creates a flex div with it's components stacked vertically
+
+- `def DivHStacked(*c, **kwargs)`
+    Creates a flex div with it's components stacked horizontally
+
+- `class NavT(Enum)`
+    Members: default, primary, secondary
+
+
+- `def NavContainer(*li, **kwargs)`
+    Creates a navigation container (useful for creating a sidebar navigation).  A Nav is a list (NavBar is something different)
+
+- `def NavParentLi(*nav_container, **kwargs)`
+    Creates a navigation list item with a parent nav for nesting
+
+- `def NavDividerLi(*c, **kwargs)`
+    Creates a navigation list item with a divider
+
+- `def NavHeaderLi(*c, **kwargs)`
+    Creates a navigation list item with a header
+
+- `def NavSubtitle(*c, **kwargs)`
+    Creates a navigation subtitle
+
+- `def NavCloseLi(*c, **kwargs)`
+    Creates a navigation list item with a close button
+
+- `class ScrollspyT(Enum)`
+    Members: underline, bold
+
+
+- `def NavBar(*c)`
+    Creates a responsive navigation bar with mobile menu support
+
+- `def SliderContainer(*c, **kwargs)`
+    Creates a slider container
+
+- `def SliderItems(*c, **kwargs)`
+    Creates a slider items container
+
+- `def SliderNav(cls, prev_cls, next_cls, **kwargs)`
+    Navigation arrows for Slider component
+
+- `def Slider(*c, **kwargs)`
+    Creates a slider with optional navigation arrows
+
+- `def DropDownNavContainer(*li, **kwargs)`
+    A Nav that is part of a DropDown
+
+- `def TabContainer(*li, **kwargs)`
+    A TabContainer where children will be different tabs
+
+- `class CardT(Enum)`
+    Card styles from UIkit
+    Members: default, primary, secondary, destructive, hover
+
+
+- `def CardTitle(*c, **kwargs)`
+    Creates a card title
+
+- `def CardHeader(*c, **kwargs)`
+    Creates a card header
+
+- `def CardBody(*c, **kwargs)`
+    Creates a card body
+
+- `def CardFooter(*c, **kwargs)`
+    Creates a card footer
+
+- `def CardContainer(*c, **kwargs)`
+    Creates a card container
+
+- `def Card(*c, **kwargs)`
+    Creates a Card with a header, body, and footer
+
+- `class TableT(Enum)`
+    Members: divider, striped, hover, sm, lg, justify, middle, responsive
+
+
+- `def Table(*c, **kwargs)`
+    Creates a table
+
+- `def TableFromLists(header_data, body_data, footer_data, header_cell_render, body_cell_render, footer_cell_render, cls, sortable, **kwargs)`
+    Creates a Table from a list of header data and a list of lists of body data
+
+- `def TableFromDicts(header_data, body_data, footer_data, header_cell_render, body_cell_render, footer_cell_render, cls, sortable, **kwargs)`
+    Creates a Table from a list of header data and a list of dicts of body data
+
+- `def apply_classes(html_str, class_map, class_map_mods)`
+    Apply classes to html string
+
+- `class FrankenRenderer`
+    Custom renderer for Franken UI that handles image paths
+
+    - `def __init__(self, *args, **kwargs)`
+    - `def render_image(self, token)`
+        Modify image paths if they're relative and self.img_dir is specified
+
+
+- `def render_md(md_content, class_map, class_map_mods, img_dir, renderer)`
+    Renders markdown using mistletoe and lxml with custom image handling
+
+- `def ThemePicker(color, radii, shadows, font, mode, cls, custom_themes)`
+    Theme picker component with configurable sections
+
+- `def LightboxContainer(*lightboxitem, **kwargs)`
+    Lightbox container that will hold `LightboxItems`
+
+- `def LightboxItem(*c, **kwargs)`
+    Anchor tag with appropriate structure to go inside a `LightBoxContainer`
+
+- `def ApexChart(**kws)`
+    Apex chart component
+

MonsterUI/docs/cf_addns.py

@@ -0,0 +1,18 @@
+
+# https://github.com/cloudflare/cloudflare-python/blob/main/api.md
+from fastcore.script import *
+from cloudflare import Cloudflare
+
+@call_parse
+def add_dns_record(
+    record_type: str,  # Type of DNS record (CNAME or A)
+    target: str,       # Target IP address or domain name
+    record: str,       # Record name (without the zone)
+    zone: str,         # Zone name
+    proxied: bool_arg=True # Use CF proxy?
+):
+    cf = Cloudflare()
+    zones = cf.zones.list(name=zone)
+    if not zones: raise ValueError(f"Zone '{zone}' not found")
+    zid = zones.result[0].id
+    cf.dns.records.create(zone_id=zid, type=record_type.upper(), name=f"{record}.{zone}", content=target, proxied=proxied)

MonsterUI/docs/createllms.sh

@@ -0,0 +1,48 @@
+#!/usr/bin/env python3
+
+from fastcore.utils import *
+import httpx
+import api_reference.api_reference as api_reference
+def fname2title(ref_fn_name): return ref_fn_name[5:].replace('_',' | ').title() 
+
+def create_llms_txt():    
+    # Get examples
+    base = "https://monsterui.answer.ai"
+    examples = [f for f in Path('examples').glob('*.py') if not f.name.startswith('__') and f.name.endswith('.py')]
+    example_links = []
+    for f in examples:
+        content = httpx.get(f"{base}/{f.stem}/md").text
+        first_line = content.split('\n')[0].strip('# ').strip('"')
+        example_links.append(f"[{f.stem.title()}]({base}/{f.name[:-3]}/md): {first_line}")
+    
+    # Get reference files with their H1 headings
+    reference_fns = L([o for o in dir(api_reference) if o.startswith('docs_')])
+    api_links = []
+    for f in reference_fns:
+        content = httpx.get(f"{base}/api_ref/{f}/md").text
+        first_heading = content.split('\n')[0].strip('# ')
+        api_links.append(f"[{fname2title(f)}]({base}/api_ref/{f}/md): {first_heading}")
+    
+    # Create content
+    content = [
+        "# MonsterUI Documentation",
+        '''
+> MonsterUI is a python library which brings styling to python for FastHTML apps.
+
+'''
+        "## API Reference",
+        '- [API List](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/apilist.txt): Complete API Reference',
+        "",
+        "## Examples",
+        *[f'- {a}' for a in example_links],
+        "",
+        "## Optional", 
+        *[f'- {a}' for a in api_links],
+        "- [Layout](https://monsterui.answer.ai/tutorial_layout/md): MonsterUI Page Layout Guide",
+        "- [Spacing](https://monsterui.answer.ai/tutorial_spacing/md): Padding & Margin & Spacing, Oh my! (MonsterUI Spacing Guide)",
+    ]
+    
+    # Write to file
+    Path('llms.txt').write_text('\n'.join(content))
+
+create_llms_txt()

MonsterUI/docs/custom_theme.css

@@ -0,0 +1,56 @@
+/* custom_theme.css */
+
+.uk-theme-grass {
+    --background: 78 47% 99%;
+    --foreground: 78 51% 0%;
+    --muted: 78 12% 85%;
+    --muted-foreground: 78 8% 38%;
+    --popover: 78 47% 99%;
+    --popover-foreground: 78 51% 0%;
+    --card: 78 47% 99%;
+    --card-foreground: 78 51% 0%;
+    --border: 78 2% 93%;
+    --input: 78 2% 93%;
+    --primary: 78 28% 60%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 78 8% 81%;
+    --secondary-foreground: 78 8% 21%;
+    --accent: 78 8% 81%;
+    --accent-foreground: 78 8% 21%;
+    --destructive: 17 86% 32%;
+    --destructive-foreground: 17 86% 92%;
+    --ring: 78 28% 60%;
+    --chart-1: 78 28% 60%;
+    --chart-2: 78 8% 81%;
+    --chart-3: 78 8% 81%;
+    --chart-4: 78 8% 84%;
+    --chart-5: 78 31% 60%;
+    --radius: 0.5rem;
+  }
+  
+  .dark.uk-theme-grass {
+    --background: 78 48% 2%;
+    --foreground: 78 24% 99%;
+    --muted: 78 12% 15%;
+    --muted-foreground: 78 8% 62%;
+    --popover: 78 48% 2%;
+    --popover-foreground: 78 24% 99%;
+    --card: 78 48% 2%;
+    --card-foreground: 78 24% 99%;
+    --border: 78 2% 14%;
+    --input: 78 2% 14%;
+    --primary: 78 28% 60%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 78 8% 14%;
+    --secondary-foreground: 78 8% 74%;
+    --accent: 78 8% 14%;
+    --accent-foreground: 78 8% 74%;
+    --destructive: 17 86% 60%;
+    --destructive-foreground: 17 86% 0%;
+    --ring: 78 28% 60%;
+    --chart-1: 78 28% 60%;
+    --chart-2: 78 8% 14%;
+    --chart-3: 78 8% 14%;
+    --chart-4: 78 8% 17%;
+    --chart-5: 78 31% 60%;
+  }

MonsterUI/docs/data_/mail.json

@@ -0,0 +1,206 @@
+[
+  {
+    "id": "6c84fb90-12c4-11e1-840d-7b25c5ee775a",
+    "initial": "WS",
+    "name": "William Smith",
+    "email": "[email protected]",
+    "subject": "Meeting Tomorrow",
+    "text": "Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success.\n\nPlease come prepared with any questions or insights you may have. Looking forward to our meeting!\n\nBest regards, William",
+    "date": "2023-10-22T09:00:00",
+    "read": true,
+    "active": true,
+    "labels": ["meeting", "work", "important"]
+  },
+  {
+    "id": "110e8400-e29b-11d4-a716-446655440000",
+    "initial": "AS",
+    "name": "Alice Smith",
+    "email": "[email protected]",
+    "subject": "Re: Project Update",
+    "text": "Thank you for the project update. It looks great! I've gone through the report, and the progress is impressive. The team has done a fantastic job, and I appreciate the hard work everyone has put in.\n\nI have a few minor suggestions that I'll include in the attached document.\n\nLet's discuss these during our next meeting. Keep up the excellent work!\n\nBest regards, Alice",
+    "date": "2023-10-22T10:30:00",
+    "read": true,
+    "active": false,
+    "labels": ["work", "important"]
+  },
+  {
+    "id": "3e7c3f6d-bdf5-46ae-8d90-171300f27ae2",
+    "initial": "BJ",
+    "name": "Bob Johnson",
+    "email": "[email protected]",
+    "subject": "Weekend Plans",
+    "text": "Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It's been a while since we had some outdoor fun.\n\nIf you're interested, let me know, and we can plan the details. It'll be a great way to unwind and enjoy nature.\n\nLooking forward to your response!\n\nBest, Bob",
+    "date": "2023-04-10T11:45:00",
+    "read": true,
+    "active": false,
+    "labels": ["personal"]
+  },
+  {
+    "id": "61c35085-72d7-42b4-8d62-738f700d4b92",
+    "initial": "ED",
+    "name": "Emily Davis",
+    "email": "[email protected]",
+    "subject": "Re: Question about Budget",
+    "text": "I have a question about the budget for the upcoming project. It seems like there's a discrepancy in the allocation of resources.\n\nI've reviewed the budget report and identified a few areas where we might be able to optimize our spending without compromising the project's quality.\n\nI've attached a detailed analysis for your reference. Let's discuss this further in our next meeting.\n\nThanks, Emily",
+    "date": "2023-03-25T13:15:00",
+    "read": false,
+    "active": false,
+    "labels": ["work", "budget"]
+  },
+  {
+    "id": "8f7b5db9-d935-4e42-8e05-1f1d0a3dfb97",
+    "initial": "MW",
+    "name": "Michael Wilson",
+    "email": "[email protected]",
+    "subject": "Important Announcement",
+    "text": "I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We've received valuable feedback from our beta testers, and I believe it's time to make some adjustments to better meet our customers' needs.\n\nThis change is crucial to our success, and I look forward to discussing it with the team. Please be prepared to share your insights during the meeting.\n\nRegards, Michael",
+    "date": "2023-03-10T15:00:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work", "important"]
+  },
+  {
+    "id": "1f0f2c02-e299-40de-9b1d-86ef9e42126b",
+    "initial": "SB",
+    "name": "Sarah Brown",
+    "email": "[email protected]",
+    "subject": "Re: Feedback on Proposal",
+    "text": "Thank you for your feedback on the proposal. It looks great! I'm pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.\n\nI've attached the revised proposal for your review.\n\nPlease let me know if you have any further comments or suggestions. Looking forward to your response.\n\nBest regards, Sarah",
+    "date": "2023-02-15T16:30:00",
+    "read": true,
+    "active": false,
+    "labels": ["work"]
+  },
+  {
+    "id": "17c0a96d-4415-42b1-8b4f-764efab57f66",
+    "initial": "DL",
+    "name": "David Lee",
+    "email": "[email protected]",
+    "subject": "New Project Idea",
+    "text": "I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months.\n\nI've prepared a detailed proposal outlining the potential benefits and the strategy for execution.\n\nThis project has the potential to significantly impact our business positively. Let's set up a meeting to dive into the details and determine if it aligns with our current goals.\n\nBest regards, David",
+    "date": "2023-01-28T17:45:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work", "important"]
+  },
+  {
+    "id": "2f0130cb-39fc-44c4-bb3c-0a4337edaaab",
+    "initial": "OW",
+    "name": "Olivia Wilson",
+    "email": "[email protected]",
+    "subject": "Vacation Plans",
+    "text": "Let's plan our vacation for next month. What do you think? I've been thinking of visiting a tropical paradise, and I've put together some destination options.\n\nI believe it's time for us to unwind and recharge. Please take a look at the options and let me know your preferences.\n\nWe can start making arrangements to ensure a smooth and enjoyable trip.\n\nExcited to hear your thoughts! Olivia",
+    "date": "2022-12-20T18:30:00",
+    "read": true,
+    "active": false,
+    "labels": ["personal"]
+  },
+  {
+    "id": "de305d54-75b4-431b-adb2-eb6b9e546014",
+    "initial": "JM",
+    "name": "James Martin",
+    "email": "[email protected]",
+    "subject": "Re: Conference Registration",
+    "text": "I've completed the registration for the conference next month. The event promises to be a great networking opportunity, and I'm looking forward to attending the various sessions and connecting with industry experts.\n\nI've also attached the conference schedule for your reference.\n\nIf there are any specific topics or sessions you'd like me to explore, please let me know. It's an exciting event, and I'll make the most of it.\n\nBest regards, James",
+    "date": "2022-11-30T19:15:00",
+    "read": true,
+    "active": false,
+    "labels": ["work", "conference"]
+  },
+  {
+    "id": "7dd90c63-00f6-40f3-bd87-5060a24e8ee7",
+    "initial": "SW",
+    "name": "Sophia White",
+    "email": "[email protected]",
+    "subject": "Team Dinner",
+    "text": "Let's have a team dinner next week to celebrate our success. We've achieved some significant milestones, and it's time to acknowledge our hard work and dedication.\n\nI've made reservations at a lovely restaurant, and I'm sure it'll be an enjoyable evening.\n\nPlease confirm your availability and any dietary preferences. Looking forward to a fun and memorable dinner with the team!\n\nBest, Sophia",
+    "date": "2022-11-05T20:30:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work"]
+  },
+  {
+    "id": "99a88f78-3eb4-4d87-87b7-7b15a49a0a05",
+    "initial": "DJ",
+    "name": "Daniel Johnson",
+    "email": "[email protected]",
+    "subject": "Feedback Request",
+    "text": "I'd like your feedback on the latest project deliverables. We've made significant progress, and I value your input to ensure we're on the right track.\n\nI've attached the deliverables for your review, and I'm particularly interested in any areas where you think we can further enhance the quality or efficiency.\n\nYour feedback is invaluable, and I appreciate your time and expertise. Let's work together to make this project a success.\n\nRegards, Daniel",
+    "date": "2022-10-22T09:30:00",
+    "read": false,
+    "active": false,
+    "labels": ["work"]
+  },
+  {
+    "id": "f47ac10b-58cc-4372-a567-0e02b2c3d479",
+    "initial": "AT",
+    "name": "Ava Taylor",
+    "email": "[email protected]",
+    "subject": "Re: Meeting Agenda",
+    "text": "Here's the agenda for our meeting next week. I've included all the topics we need to cover, as well as time allocations for each.\n\nIf you have any additional items to discuss or any specific points to address, please let me know, and we can integrate them into the agenda.\n\nIt's essential that our meeting is productive and addresses all relevant matters.\n\nLooking forward to our meeting! Ava",
+    "date": "2022-10-10T10:45:00",
+    "read": true,
+    "active": false,
+    "labels": ["meeting", "work"]
+  },
+  {
+    "id": "c1a0ecb4-2540-49c5-86f8-21e5ce79e4e6",
+    "initial": "WA",
+    "name": "William Anderson",
+    "email": "[email protected]",
+    "subject": "Product Launch Update",
+    "text": "The product launch is on track. I'll provide an update during our call. We've made substantial progress in the development and marketing of our new product.\n\nI'm excited to share the latest updates with you during our upcoming call. It's crucial that we coordinate our efforts to ensure a successful launch. Please come prepared with any questions or insights you may have.\n\nLet's make this product launch a resounding success!\n\nBest regards, William",
+    "date": "2022-09-20T12:00:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work", "important"]
+  },
+  {
+    "id": "ba54eefd-4097-4949-99f2-2a9ae4d1a836",
+    "initial": "MH",
+    "name": "Mia Harris",
+    "email": "[email protected]",
+    "subject": "Re: Travel Itinerary",
+    "text": "I've received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I've reviewed the schedule and the accommodations, and everything seems to be in order. I'm looking forward to the trip, and I'm confident it'll be a smooth and enjoyable experience.\n\nIf there are any specific activities or attractions you recommend at our destination, please feel free to share your suggestions.\n\nExcited for the trip! Mia",
+    "date": "2022-09-10T13:15:00",
+    "read": true,
+    "active": false,
+    "labels": ["personal", "travel"]
+  },
+  {
+    "id": "df09b6ed-28bd-4e0c-85a9-9320ec5179aa",
+    "initial": "EC",
+    "name": "Ethan Clark",
+    "email": "[email protected]",
+    "subject": "Team Building Event",
+    "text": "Let's plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I've done some research and have a few ideas for fun and engaging activities.\n\nPlease let me know your thoughts and availability. We want this event to be both enjoyable and productive.\n\nTogether, we'll strengthen our team and boost our performance.\n\nRegards, Ethan",
+    "date": "2022-08-25T15:30:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work"]
+  },
+  {
+    "id": "d67c1842-7f8b-4b4b-9be1-1b3b1ab4611d",
+    "initial": "CH",
+    "name": "Chloe Hall",
+    "email": "[email protected]",
+    "subject": "Re: Budget Approval",
+    "text": "The budget has been approved. We can proceed with the project. I'm delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone, and it means we can move forward with the project as planned.\n\nI've attached the finalized budget for your reference. Let's ensure that we stay on track and deliver the project on time and within budget.\n\nIt's an exciting time for us! Chloe",
+    "date": "2022-08-10T16:45:00",
+    "read": true,
+    "active": false,
+    "labels": ["work", "budget"]
+  },
+  {
+    "id": "6c9a7f94-8329-4d70-95d3-51f68c186ae1",
+    "initial": "ST",
+    "name": "Samuel Turner",
+    "email": "[email protected]",
+    "subject": "Weekend Hike",
+    "text": "Who's up for a weekend hike in the mountains? I've been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you're up for the challenge, we can explore some scenic trails and enjoy the beauty of nature.\n\nI've done some research and have a few routes in mind.\n\nLet me know if you're interested, and we can plan the details.\n\nIt's sure to be a memorable experience! Samuel",
+    "date": "2022-07-28T17:30:00",
+    "read": false,
+    "active": false,
+    "labels": ["personal"]
+  }
+]

MonsterUI/docs/data_/status_list.json

@@ -0,0 +1 @@
+[{"selected": true, "id": "TASK-8782", "title": "You can't compress the program without quantifying the open-source SSD pixel!", "status": "progress", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-7878", "title": "Try to calculate the EXE feed, maybe it will index the multi-byte pixel!", "status": "backlog", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-7839", "title": "We need to bypass the neural TCP card!", "status": "todo", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-5562", "title": "The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!", "status": "backlog", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-8686", "title": "I'll parse the wireless SSL protocol, that should driver the API panel!", "status": "cancelled", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-1280", "title": "Use the digital TLS panel, then you can transmit the haptic system!", "status": "done", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-7262", "title": "The UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!", "status": "done", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-1138", "title": "Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!", "status": "progress", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-7184", "title": "We need to program the back-end THX pixel!", "status": "todo", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-5160", "title": "Calculating the bus won't do anything, we need to navigate the back-end JSON protocol!", "status": "progress", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-5618", "title": "Generating the driver won't do anything, we need to index the online SSL application!", "status": "done", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-6699", "title": "I'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!", "status": "backlog", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-2858", "title": "We need to override the online UDP bus!", "status": "backlog", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-9864", "title": "I'll reboot the 1080p FTP panel, that should matrix the HEX hard drive!", "status": "done", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-8404", "title": "We need to generate the virtual HEX alarm!", "status": "progress", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-5365", "title": "Backing up the pixel won't do anything, we need to transmit the primary IB array!", "status": "progress", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-1780", "title": "The CSS feed is down, index the bluetooth transmitter so we can compress the CLI protocol!", "status": "todo", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-6938", "title": "Use the redundant SCSI application, then you can hack the optical alarm!", "status": "todo", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-9885", "title": "We need to compress the auxiliary VGA driver!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-3216", "title": "Transmitting the transmitter won't do anything, we need to compress the virtual HDD sensor!", "status": "backlog", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-9285", "title": "The IP monitor is down, copy the haptic alarm so we can generate the HTTP transmitter!", "status": "todo", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-1024", "title": "Overriding the microchip won't do anything, we need to transmit the digital OCR transmitter!", "status": "progress", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-7068", "title": "You can't generate the capacitor without indexing the wireless HEX pixel!", "status": "cancelled", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-6502", "title": "Navigating the microchip won't do anything, we need to bypass the back-end SQL bus!", "status": "todo", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-5326", "title": "We need to hack the redundant UTF8 transmitter!", "status": "todo", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-6274", "title": "Use the virtual PCI circuit, then you can parse the bluetooth alarm!", "status": "cancelled", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-1571", "title": "I'll input the neural DRAM circuit, that should protocol the SMTP interface!", "status": "progress", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-9518", "title": "Compressing the interface won't do anything, we need to compress the online SDD matrix!", "status": "cancelled", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-5581", "title": "I'll synthesize the digital COM pixel, that should transmitter the UTF8 protocol!", "status": "backlog", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-2197", "title": "Parsing the feed won't do anything, we need to copy the bluetooth DRAM bus!", "status": "todo", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-8484", "title": "We need to parse the solid state UDP firewall!", "status": "progress", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-9892", "title": "If we back up the application, we can get to the UDP application through the multi-byte THX capacitor!", "status": "done", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-9616", "title": "We need to synthesize the cross-platform ASCII pixel!", "status": "progress", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-9744", "title": "Use the back-end IP card, then you can input the solid state hard drive!", "status": "done", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-1376", "title": "Generating the alarm won't do anything, we need to generate the mobile IP capacitor!", "status": "backlog", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-7382", "title": "If we back up the firewall, we can get to the RAM alarm through the primary UTF8 pixel!", "status": "todo", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-2290", "title": "I'll compress the virtual JSON panel, that should application the UTF8 bus!", "status": "cancelled", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-1533", "title": "You can't input the firewall without overriding the wireless TCP firewall!", "status": "done", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-4920", "title": "Bypassing the hard drive won't do anything, we need to input the bluetooth JSON program!", "status": "progress", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-5168", "title": "If we synthesize the bus, we can get to the IP panel through the virtual TLS array!", "status": "progress", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-7103", "title": "We need to parse the multi-byte EXE bandwidth!", "status": "cancelled", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-4314", "title": "If we compress the program, we can get to the XML alarm through the multi-byte COM matrix!", "status": "progress", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-3415", "title": "Use the cross-platform XML application, then you can quantify the solid state feed!", "status": "todo", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-8339", "title": "Try to calculate the DNS interface, maybe it will input the bluetooth capacitor!", "status": "progress", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-6995", "title": "Try to hack the XSS bandwidth, maybe it will override the bluetooth matrix!", "status": "todo", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-8053", "title": "If we connect the program, we can get to the UTF8 matrix through the digital UDP protocol!", "status": "todo", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-4336", "title": "If we synthesize the microchip, we can get to the SAS sensor through the optical UDP program!", "status": "todo", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-8790", "title": "I'll back up the optical COM alarm, that should alarm the RSS capacitor!", "status": "done", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-8980", "title": "Try to navigate the SQL transmitter, maybe it will back up the virtual firewall!", "status": "cancelled", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-7342", "title": "Use the neural CLI card, then you can parse the online port!", "status": "backlog", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-5608", "title": "I'll hack the haptic SSL program, that should bus the UDP transmitter!", "status": "cancelled", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-1606", "title": "I'll generate the bluetooth PNG firewall, that should pixel the SSL driver!", "status": "done", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-7872", "title": "Transmitting the circuit won't do anything, we need to reboot the 1080p RSS monitor!", "status": "cancelled", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-4167", "title": "Use the cross-platform SMS circuit, then you can synthesize the optical feed!", "status": "cancelled", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-9581", "title": "You can't index the port without hacking the cross-platform XSS monitor!", "status": "backlog", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-8806", "title": "We need to bypass the back-end SSL panel!", "status": "done", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-6542", "title": "Try to quantify the RSS firewall, maybe it will quantify the open-source system!", "status": "done", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-6806", "title": "The VGA protocol is down, reboot the back-end matrix so we can parse the CSS panel!", "status": "cancelled", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-9549", "title": "You can't bypass the bus without connecting the neural JBOD bus!", "status": "todo", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-1075", "title": "Backing up the driver won't do anything, we need to parse the redundant RAM pixel!", "status": "done", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-1427", "title": "Use the auxiliary PCI circuit, then you can calculate the cross-platform interface!", "status": "done", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-1907", "title": "Hacking the circuit won't do anything, we need to back up the online DRAM system!", "status": "todo", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-4309", "title": "If we generate the system, we can get to the TCP sensor through the optical GB pixel!", "status": "backlog", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-3973", "title": "I'll parse the back-end ADP array, that should bandwidth the RSS bandwidth!", "status": "todo", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-7962", "title": "Use the wireless RAM program, then you can hack the cross-platform feed!", "status": "cancelled", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-3360", "title": "You can't quantify the program without synthesizing the neural OCR interface!", "status": "done", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-9887", "title": "Use the auxiliary ASCII sensor, then you can connect the solid state port!", "status": "backlog", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-3649", "title": "I'll input the virtual USB system, that should circuit the DNS monitor!", "status": "progress", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-3586", "title": "If we quantify the circuit, we can get to the CLI feed through the mobile SMS hard drive!", "status": "progress", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-5150", "title": "I'll hack the wireless XSS port, that should transmitter the IP interface!", "status": "cancelled", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-3652", "title": "The SQL interface is down, override the optical bus so we can program the ASCII interface!", "status": "backlog", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-6884", "title": "Use the digital PCI circuit, then you can synthesize the multi-byte microchip!", "status": "cancelled", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-1591", "title": "We need to connect the mobile XSS driver!", "status": "progress", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-3802", "title": "Try to override the ASCII protocol, maybe it will parse the virtual matrix!", "status": "progress", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-7253", "title": "Programming the capacitor won't do anything, we need to bypass the neural IB hard drive!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-9739", "title": "We need to hack the multi-byte HDD bus!", "status": "done", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-4424", "title": "Try to hack the HEX alarm, maybe it will connect the optical pixel!", "status": "progress", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-3922", "title": "You can't back up the capacitor without generating the wireless PCI program!", "status": "backlog", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-4921", "title": "I'll index the open-source IP feed, that should system the GB application!", "status": "cancelled", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-5814", "title": "We need to calculate the 1080p AGP feed!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-2645", "title": "Synthesizing the system won't do anything, we need to navigate the multi-byte HDD firewall!", "status": "todo", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-4535", "title": "Try to copy the JSON circuit, maybe it will connect the wireless feed!", "status": "progress", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-4463", "title": "We need to copy the solid state AGP monitor!", "status": "done", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-9745", "title": "If we connect the protocol, we can get to the GB system through the bluetooth PCI microchip!", "status": "cancelled", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-2080", "title": "If we input the bus, we can get to the RAM matrix through the auxiliary RAM card!", "status": "todo", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-3838", "title": "I'll bypass the online TCP application, that should panel the AGP system!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-1340", "title": "We need to navigate the virtual PNG circuit!", "status": "todo", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-6665", "title": "If we parse the monitor, we can get to the SSD hard drive through the cross-platform AGP alarm!", "status": "cancelled", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-7585", "title": "If we calculate the hard drive, we can get to the SSL program through the multi-byte CSS microchip!", "status": "backlog", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-6319", "title": "We need to copy the multi-byte SCSI program!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-4369", "title": "Try to input the SCSI bus, maybe it will generate the 1080p pixel!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-9035", "title": "We need to override the solid state PNG array!", "status": "cancelled", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-3970", "title": "You can't index the transmitter without quantifying the haptic ASCII card!", "status": "todo", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-4473", "title": "You can't bypass the protocol without overriding the neural RSS program!", "status": "todo", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-4136", "title": "You can't hack the hard drive without hacking the primary JSON program!", "status": "cancelled", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-3939", "title": "Use the back-end SQL firewall, then you can connect the neural hard drive!", "status": "done", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-2007", "title": "I'll input the back-end USB protocol, that should bandwidth the PCI system!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-7516", "title": "Use the primary SQL program, then you can generate the auxiliary transmitter!", "status": "done", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-6906", "title": "Try to back up the DRAM system, maybe it will reboot the online transmitter!", "status": "done", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-5207", "title": "The SMS interface is down, copy the bluetooth bus so we can quantify the VGA card!", "status": "progress", "label": "bug", "priority": "low"}]

MonsterUI/docs/data_/statuses.json

@@ -0,0 +1,22 @@
+{
+  "backlog": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M0.877075 7.49972C0.877075 3.84204 3.84222 0.876892 7.49991 0.876892C11.1576 0.876892 14.1227 3.84204 14.1227 7.49972C14.1227 11.1574 11.1576 14.1226 7.49991 14.1226C3.84222 14.1226 0.877075 11.1574 0.877075 7.49972ZM7.49991 1.82689C4.36689 1.82689 1.82708 4.36671 1.82708 7.49972C1.82708 10.6327 4.36689 13.1726 7.49991 13.1726C10.6329 13.1726 13.1727 10.6327 13.1727 7.49972C13.1727 4.36671 10.6329 1.82689 7.49991 1.82689ZM8.24993 10.5C8.24993 10.9142 7.91414 11.25 7.49993 11.25C7.08571 11.25 6.74993 10.9142 6.74993 10.5C6.74993 10.0858 7.08571 9.75 7.49993 9.75C7.91414 9.75 8.24993 10.0858 8.24993 10.5ZM6.05003 6.25C6.05003 5.57211 6.63511 4.925 7.50003 4.925C8.36496 4.925 8.95003 5.57211 8.95003 6.25C8.95003 6.74118 8.68002 6.99212 8.21447 7.27494C8.16251 7.30651 8.10258 7.34131 8.03847 7.37854L8.03841 7.37858C7.85521 7.48497 7.63788 7.61119 7.47449 7.73849C7.23214 7.92732 6.95003 8.23198 6.95003 8.7C6.95004 9.00376 7.19628 9.25 7.50004 9.25C7.8024 9.25 8.04778 9.00601 8.05002 8.70417L8.05056 8.7033C8.05924 8.6896 8.08493 8.65735 8.15058 8.6062C8.25207 8.52712 8.36508 8.46163 8.51567 8.37436L8.51571 8.37433C8.59422 8.32883 8.68296 8.27741 8.78559 8.21506C9.32004 7.89038 10.05 7.35382 10.05 6.25C10.05 4.92789 8.93511 3.825 7.50003 3.825C6.06496 3.825 4.95003 4.92789 4.95003 6.25C4.95003 6.55376 5.19628 6.8 5.50003 6.8C5.80379 6.8 6.05003 6.55376 6.05003 6.25Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "Backlog"
+  },
+  "cancelled": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "Cancelled"
+  },
+  "done": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "Done"
+  },
+  "progress": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M5.49998 0.5C5.49998 0.223858 5.72383 0 5.99998 0H7.49998H8.99998C9.27612 0 9.49998 0.223858 9.49998 0.5C9.49998 0.776142 9.27612 1 8.99998 1H7.99998V2.11922C9.09832 2.20409 10.119 2.56622 10.992 3.13572C11.0116 3.10851 11.0336 3.08252 11.058 3.05806L11.858 2.25806C12.1021 2.01398 12.4978 2.01398 12.7419 2.25806C12.986 2.50214 12.986 2.89786 12.7419 3.14194L11.967 3.91682C13.1595 5.07925 13.9 6.70314 13.9 8.49998C13.9 12.0346 11.0346 14.9 7.49998 14.9C3.96535 14.9 1.09998 12.0346 1.09998 8.49998C1.09998 5.13362 3.69904 2.3743 6.99998 2.11922V1H5.99998C5.72383 1 5.49998 0.776142 5.49998 0.5ZM2.09998 8.49998C2.09998 5.51764 4.51764 3.09998 7.49998 3.09998C10.4823 3.09998 12.9 5.51764 12.9 8.49998C12.9 11.4823 10.4823 13.9 7.49998 13.9C4.51764 13.9 2.09998 11.4823 2.09998 8.49998ZM7.99998 4.5C7.99998 4.22386 7.77612 4 7.49998 4C7.22383 4 6.99998 4.22386 6.99998 4.5V9.5C6.99998 9.77614 7.22383 10 7.49998 10C7.77612 10 7.99998 9.77614 7.99998 9.5V4.5Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "In Progress"
+  },
+  "todo": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M0.877075 7.49991C0.877075 3.84222 3.84222 0.877075 7.49991 0.877075C11.1576 0.877075 14.1227 3.84222 14.1227 7.49991C14.1227 11.1576 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1576 0.877075 7.49991ZM7.49991 1.82708C4.36689 1.82708 1.82708 4.36689 1.82708 7.49991C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49991C13.1727 4.36689 10.6329 1.82708 7.49991 1.82708Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "Todo"
+  }
+}

MonsterUI/docs/examples/auth.py

@@ -0,0 +1,40 @@
+"""FrankenUI Auth Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+@rt
+def index():    
+    left = Div(cls="col-span-1 hidden flex-col justify-between bg-zinc-900 p-8 text-white lg:flex")(
+        Div(cls=(TextT.bold))("Acme Inc"),
+        Blockquote(cls="space-y-2")(
+            P(cls=TextT.lg)('"This library has saved me countless hours of work and helped me deliver stunning designs to my clients faster than ever before."'),
+            Footer(cls=TextT.sm)("Sofia Davis")))
+
+    right = Div(cls="col-span-2 flex flex-col p-8 lg:col-span-1")(
+        DivRAligned(Button("Login", cls=ButtonT.ghost)),
+        DivCentered(cls='flex-1')(
+            Container(
+                DivVStacked(
+                    H3("Create an account"),
+                    Small("Enter your email below to create your account", cls=TextT.muted)),
+                Form(
+                    Input(placeholder="[email protected]"),
+                    Button(Span(cls="mr-2", uk_spinner="ratio: 0.54"), "Sign in with Email", cls=(ButtonT.primary, "w-full"), disabled=True),
+                    DividerSplit(Small("Or continue with"),cls=TextT.muted),
+                    Button(UkIcon('github',cls='mr-2'), "Github", cls=(ButtonT.default, "w-full")),
+                    cls='space-y-6'),
+                DivVStacked(Small(
+                        "By clicking continue, you agree to our ",
+                        A(cls=AT.muted, href="#demo")("Terms of Service")," and ",
+                        A(cls=AT.muted, href="#demo")("Privacy Policy"),".",
+                        cls=(TextT.muted,"text-center"))),
+                cls="space-y-6")))
+    
+    return Title("Auth Example"),Grid(left,right,cols=2, gap=0,cls='h-screen')
+
+
+serve()

MonsterUI/docs/examples/cards.py

@@ -0,0 +1,141 @@
+"""FrankenUI Cards Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from fasthtml.components import Uk_input_tag
+from fasthtml.svg import *
+from monsterui.all import *
+import calendar
+from datetime import datetime
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+CreateAccount = Card(
+    Grid(Button(DivLAligned(UkIcon('github'),Div('Github'))),Button('Google')),
+            DividerSplit("OR CONTINUE WITH", text_cls=TextPresets.muted_sm),
+            LabelInput('Email',    id='email',   placeholder='[email protected]'),
+            LabelInput('Password', id='password',placeholder='Password', type='Password'),
+            header=(H3('Create an Account'),Subtitle('Enter your email below to create your account')),
+            footer=Button('Create Account',cls=(ButtonT.primary,'w-full')))
+
+PaypalSVG_data = "M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
+AppleSVG_data = "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+Card1Svg  = Svg(viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke_linecap="round", stroke_linejoin="round", stroke_width="2", cls="h-6 w-6 mr-1")(Rect(width="20", height="14", x="2", y="5", rx="2"),Path(d="M2 10h20"))
+PaypalSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=PaypalSVG_data, fill="currentColor")),
+AppleSvg  = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=AppleSVG_data, fill="currentColor"))
+
+PaymentMethod = Card(
+    Grid(Button(DivCentered(Card1Svg,  "Card"),   cls='h-20 border-2 border-primary'),
+         Button(DivCentered(PaypalSvg, "PayPal"), cls='h-20'),
+         Button(DivCentered(AppleSvg,  "Apple"),  cls='h-20')),
+    Form(LabelInput('Name',        id='name',        placeholder='John Doe'),
+         LabelInput('Card Number', id='card_number', placeholder='[email protected]'),
+         Grid(LabelSelect(*Options(*calendar.month_name[1:],selected_idx=0),label='Expires',id='expire_month'),
+              LabelSelect(*Options(*range(2024,2030),selected_idx=0),       label='Year',   id='expire_year'),
+              LabelInput('CVV', id='cvv',placeholder='CVV', cls='mt-0'))),
+        header=(H3('Payment Method'),Subtitle('Add a new payment method to your account.')))
+
+area_opts = ('Team','Billing','Account','Deployment','Support')
+severity_opts = ('Severity 1 (Highest)', 'Severity 2', 'Severity 3', 'Severity 4 (Lowest)')
+ReportIssue = Card(
+    Grid(Div(LabelSelect(*Options(*area_opts),    label='Area',    id='area')),
+         Div(LabelSelect(*Options(*severity_opts),label='Severity',id='area'))),
+    LabelInput(    label='Subject',     id='subject',    placeholder='I need help with'),
+    LabelTextArea( label='Description', id='description',placeholder='Please include all information relevant to your issue'),
+    Div(FormLabel('Tags', fr='#tags'),
+        Uk_input_tag(name="Tags",state="danger", value="Spam,Invalid", uk_cloak=True, id='tags')),
+    header=(H3('Report Issue'),Subtitle('What area are you having problems with?')),
+    footer = DivFullySpaced(Button('Cancel'), Button(cls=ButtonT.primary)('Submit')))
+
+monster_desc ="Python-first beautifully designed components because you deserve to focus on features that matter and your app deserves to be beautiful from day one."
+MonsterUI = Card(H4("Monster UI"),
+              Subtitle(monster_desc),
+              DivLAligned(
+                    Div("Python"),
+                    DivLAligned(UkIcon('star'),Div("20k"), cls='space-x-1'),
+                    Div(datetime.now().strftime("%B %d, %Y")),
+                    cls=('space-x-4',TextPresets.muted_sm)))
+
+def CookieTableRow(heading, description, active=False):
+    return Tr(Td(H5(heading)),
+              Td(P(description, cls=TextPresets.muted_sm)),
+              Td(Switch(checked=active)))
+
+CookieSettings = Card(
+    Table(Tbody(
+        CookieTableRow('Strictly Necessary', 'These cookies are essential in order to use the website and use its features.', True),
+        CookieTableRow('Functional Cookies', 'These cookies allow the website to provide personalized functionality.'),
+        CookieTableRow('Performance Cookies', 'These cookies help to improve the performance of the website.'))),
+    header=(H4('Cookie Settings'),Subtitle('Manage your cookie settings here.')),
+    footer=Button('Save Preferences', cls=(ButtonT.primary, 'w-full')))
+
+team_members = [("Sofia Davis", "[email protected]", "Owner"),("Jackson Lee", "[email protected]", "Member"),]
+def TeamMemberRow(name, email, role):
+    return DivFullySpaced(
+        DivLAligned(
+            DiceBearAvatar(name, 10,10),
+            Div(P(name, cls=(TextT.sm, TextT.medium)),
+                P(email, cls=TextPresets.muted_sm))),
+        Button(role, UkIcon('chevron-down', cls='ml-4')),
+        DropDownNavContainer(map(NavCloseLi, [
+            A(Div('Viewer',    NavSubtitle('Can view and comment.'))),
+            A(Div('Developer', NavSubtitle('Can view, comment and edit.'))),
+            A(Div('Billing',   NavSubtitle('Can view, comment and manage billing.'))),
+            A(Div('Owner',     NavSubtitle('Admin-level access to all resources.')))])))
+
+TeamMembers = Card(*[TeamMemberRow(*member) for member in team_members],
+        header = (H4('Team Members'),Subtitle('Invite your team members to collaborate.')))
+
+access_roles = ("Read and write access", "Read-only access")
+team_members = [("Olivia Martin", "[email protected]", "Read and write access"),
+                ("Isabella Nguyen", "[email protected]", "Read-only access"),
+                ("Sofia Davis", "[email protected]", "Read-only access")]
+
+def TeamMemberRow(name, email, role):
+    return DivFullySpaced(
+        DivLAligned(DiceBearAvatar(name, 10,10),
+                    Div(P(name, cls=(TextT.sm, TextT.medium)),
+                        P(email, cls=TextPresets.muted_sm))),
+        Select(*Options(*access_roles, selected_idx=access_roles.index(role))))
+
+ShareDocument = Card(
+    DivLAligned(Input(value='http://example.com/link/to/document'),Button('Copy link', cls='whitespace-nowrap')),
+    Divider(),
+    H4('People with access', cls=TextPresets.bold_sm),
+    *[TeamMemberRow(*member) for member in team_members],
+    header = (H4('Share this document'),Subtitle('Anyone with the link can view this document.')))
+
+DateCard = Card(Button('Jan 20, 2024 - Feb 09, 2024'))
+
+section_content =(('bell','Everything',"Email digest, mentions & all activity."), 
+                  ('user',"Available","Only mentions and comments"),
+                  ('ban', "Ignoring","Turn of all notifications"))
+
+def NotificationRow(icon, name, desc):
+    return Li(cls='-mx-1')(A(DivLAligned(UkIcon(icon),Div(P(name),P(desc, cls=TextPresets.muted_sm)))))
+
+Notifications = Card(
+    NavContainer(
+        *[NotificationRow(*row) for row in section_content],
+        cls=NavT.secondary),
+    header = (H4('Notification'),Subtitle('Choose what you want to be notified about.')),
+    body_cls='pt-0')
+
+TeamCard = Card(
+    DivLAligned(
+        DiceBearAvatar("Isaac Flath", h=24, w=24),
+        Div(H3("Isaac Flath"), P("Library Creator"))),
+    footer=DivFullySpaced(
+        DivHStacked(UkIcon("map-pin", height=16), P("Alexandria, VA")),
+        DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github")))),
+    cls=CardT.hover)
+
+@rt
+def index():
+    return Title("Cards Example"),Container(Grid(
+            *map(Div,(
+                      Div(PaymentMethod,CreateAccount, TeamCard, cls='space-y-4'),
+                      Div(TeamMembers, ShareDocument,DateCard,Notifications, cls='space-y-4'),
+                      Div(ReportIssue,MonsterUI,CookieSettings, cls='space-y-4'))),
+         cols_md=1, cols_lg=2, cols_xl=3))
+
+serve()

MonsterUI/docs/examples/dashboard.py

@@ -0,0 +1,106 @@
+"""FrankenUI Dashboard Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import * # Bring in all of fasthtml
+import fasthtml.common as fh # Used to get unstyled components
+from monsterui.all import * # Bring in all of monsterui, including shadowing fasthtml components with styled components
+from fasthtml.svg import *
+import numpy as np
+import plotly.express as px
+import pandas as pd
+import numpy as np
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+def generate_chart(num_points=30):
+    df = pd.DataFrame({
+        'Date': pd.date_range('2024-01-01', periods=num_points),
+        'Revenue': np.random.normal(100, 10, num_points).cumsum(),
+        'Users': np.random.normal(80, 8, num_points).cumsum(), 
+        'Growth': np.random.normal(60, 6, num_points).cumsum()})
+    
+    fig = px.line(df, x='Date', y=['Revenue', 'Users', 'Growth'],  template='plotly_white', line_shape='spline')
+    
+    fig.update_traces(mode='lines+markers')
+    fig.update_layout(
+        margin=dict(l=20, r=20, t=20, b=20), hovermode='x unified',
+        showlegend=True, legend=dict(orientation='h', yanchor='bottom', y=1.02,  xanchor='right', x=1),
+        plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)',
+        xaxis=dict(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,0,0.1)'),
+        yaxis=dict(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,0,0.1)'))
+    
+    return fig.to_html(include_plotlyjs=True, full_html=False, config={'displayModeBar': False})
+
+def InfoCard(title, value, change): return Card(H3(value),P(change, cls=TextPresets.muted_sm), header = H4(title))
+
+rev = InfoCard("Total Revenue", "$45,231.89", "+20.1% from last month")
+sub = InfoCard("Subscriptions", "+2350", "+180.1% from last month")
+sal = InfoCard("Sales", "+12,234", "+19% from last month")
+act = InfoCard("Active Now", "+573", "+201 since last hour")
+
+info_card_data = [("Total Revenue", "$45,231.89", "+20.1% from last month"),
+                   ("Subscriptions", "+2350", "+180.1% from last month"),
+                   ("Sales", "+12,234", "+19% from last month"),
+                   ("Active Now", "+573", "+201 since last hour")]
+
+top_info_row = Grid(*[InfoCard(*row) for row in info_card_data])
+
+def AvatarItem(name, email, amount):
+    return DivFullySpaced(
+        DivLAligned(
+            DiceBearAvatar(name, 9,9),
+            Div(Strong(name, cls=TextT.sm), 
+                Address(A(email,href=f'mailto:{email}')))),
+        fh.Data(amount, cls="ml-auto font-medium", value=amount[2:]))
+
+recent_sales = Card(
+    Div(cls="space-y-8")(
+        *[AvatarItem(n,e,d) for (n,e,d) in (
+            ("Olivia Martin",   "[email protected]",   "+$1,999.00"),
+            ("Jackson Lee",     "[email protected]",     "+$39.00"),
+            ("Isabella Nguyen", "[email protected]", "+$299.00"),
+            ("William Kim",     "[email protected]",            "+$99.00"),
+            ("Sofia Davis",     "[email protected]",     "+$39.00"))]),
+    header=Div(H3("Recent Sales"),Subtitle("You made 265 sales this month.")),
+    cls='col-span-3')
+
+teams = [["Alicia Koch"],['Acme Inc', 'Monster Inc.'],['Create a Team']]
+
+opt_hdrs = ["Personal", "Team", ""]
+
+team_dropdown = Select(
+    Optgroup(Option(A("Alicia Koch")), label="Personal Account"),
+    Optgroup(Option(A("Acme Inc")), Option(A("Monster Inc.")), label="Teams"),
+    Option(A("Create a Team")),
+    cls='flex items-center')
+
+hotkeys = [('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team', ''), ('Logout', '')]
+
+def NavSpacedLi(t,s): return NavCloseLi(A(DivFullySpaced(P(t),P(s,cls=TextPresets.muted_sm))))
+
+avatar_dropdown = Div(
+      DiceBearAvatar('Alicia Koch',8,8),
+      DropDownNavContainer(
+          NavHeaderLi('sveltecult',NavSubtitle("[email protected]")),
+          *[NavSpacedLi(*hk) for hk in hotkeys],))
+
+top_nav = NavBar(
+    team_dropdown, *map(A, ["Overview", "Customers", "Products", "Settings"]),
+    brand=DivLAligned(avatar_dropdown, Input(placeholder='Search')))
+
+@rt
+def index():
+    return Title("Dashboard Example"), Container(
+        top_nav,
+        H2('Dashboard'),
+        TabContainer(
+            Li(A("Overview"),cls='uk-active'),
+            *map(lambda x: Li(A(x)), ["Analytics", "Reports", "Notifications"]),
+            alt=True),
+        top_info_row,
+        Grid(
+            Card(Safe(generate_chart(100)), cls='col-span-4'),
+            recent_sales,
+            gap=4,cols_xl=7,cols_lg=7,cols_md=1,cols_sm=1,cols_xs=1),
+        cls=('space-y-4', ContainerT.xl))
+
+serve()

MonsterUI/docs/examples/data/mail.json

@@ -0,0 +1,206 @@
+[
+  {
+    "id": "6c84fb90-12c4-11e1-840d-7b25c5ee775a",
+    "initial": "WS",
+    "name": "William Smith",
+    "email": "[email protected]",
+    "subject": "Meeting Tomorrow",
+    "text": "Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success.\n\nPlease come prepared with any questions or insights you may have. Looking forward to our meeting!\n\nBest regards, William",
+    "date": "2023-10-22T09:00:00",
+    "read": true,
+    "active": true,
+    "labels": ["meeting", "work", "important"]
+  },
+  {
+    "id": "110e8400-e29b-11d4-a716-446655440000",
+    "initial": "AS",
+    "name": "Alice Smith",
+    "email": "[email protected]",
+    "subject": "Re: Project Update",
+    "text": "Thank you for the project update. It looks great! I've gone through the report, and the progress is impressive. The team has done a fantastic job, and I appreciate the hard work everyone has put in.\n\nI have a few minor suggestions that I'll include in the attached document.\n\nLet's discuss these during our next meeting. Keep up the excellent work!\n\nBest regards, Alice",
+    "date": "2023-10-22T10:30:00",
+    "read": true,
+    "active": false,
+    "labels": ["work", "important"]
+  },
+  {
+    "id": "3e7c3f6d-bdf5-46ae-8d90-171300f27ae2",
+    "initial": "BJ",
+    "name": "Bob Johnson",
+    "email": "[email protected]",
+    "subject": "Weekend Plans",
+    "text": "Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It's been a while since we had some outdoor fun.\n\nIf you're interested, let me know, and we can plan the details. It'll be a great way to unwind and enjoy nature.\n\nLooking forward to your response!\n\nBest, Bob",
+    "date": "2023-04-10T11:45:00",
+    "read": true,
+    "active": false,
+    "labels": ["personal"]
+  },
+  {
+    "id": "61c35085-72d7-42b4-8d62-738f700d4b92",
+    "initial": "ED",
+    "name": "Emily Davis",
+    "email": "[email protected]",
+    "subject": "Re: Question about Budget",
+    "text": "I have a question about the budget for the upcoming project. It seems like there's a discrepancy in the allocation of resources.\n\nI've reviewed the budget report and identified a few areas where we might be able to optimize our spending without compromising the project's quality.\n\nI've attached a detailed analysis for your reference. Let's discuss this further in our next meeting.\n\nThanks, Emily",
+    "date": "2023-03-25T13:15:00",
+    "read": false,
+    "active": false,
+    "labels": ["work", "budget"]
+  },
+  {
+    "id": "8f7b5db9-d935-4e42-8e05-1f1d0a3dfb97",
+    "initial": "MW",
+    "name": "Michael Wilson",
+    "email": "[email protected]",
+    "subject": "Important Announcement",
+    "text": "I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We've received valuable feedback from our beta testers, and I believe it's time to make some adjustments to better meet our customers' needs.\n\nThis change is crucial to our success, and I look forward to discussing it with the team. Please be prepared to share your insights during the meeting.\n\nRegards, Michael",
+    "date": "2023-03-10T15:00:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work", "important"]
+  },
+  {
+    "id": "1f0f2c02-e299-40de-9b1d-86ef9e42126b",
+    "initial": "SB",
+    "name": "Sarah Brown",
+    "email": "[email protected]",
+    "subject": "Re: Feedback on Proposal",
+    "text": "Thank you for your feedback on the proposal. It looks great! I'm pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.\n\nI've attached the revised proposal for your review.\n\nPlease let me know if you have any further comments or suggestions. Looking forward to your response.\n\nBest regards, Sarah",
+    "date": "2023-02-15T16:30:00",
+    "read": true,
+    "active": false,
+    "labels": ["work"]
+  },
+  {
+    "id": "17c0a96d-4415-42b1-8b4f-764efab57f66",
+    "initial": "DL",
+    "name": "David Lee",
+    "email": "[email protected]",
+    "subject": "New Project Idea",
+    "text": "I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months.\n\nI've prepared a detailed proposal outlining the potential benefits and the strategy for execution.\n\nThis project has the potential to significantly impact our business positively. Let's set up a meeting to dive into the details and determine if it aligns with our current goals.\n\nBest regards, David",
+    "date": "2023-01-28T17:45:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work", "important"]
+  },
+  {
+    "id": "2f0130cb-39fc-44c4-bb3c-0a4337edaaab",
+    "initial": "OW",
+    "name": "Olivia Wilson",
+    "email": "[email protected]",
+    "subject": "Vacation Plans",
+    "text": "Let's plan our vacation for next month. What do you think? I've been thinking of visiting a tropical paradise, and I've put together some destination options.\n\nI believe it's time for us to unwind and recharge. Please take a look at the options and let me know your preferences.\n\nWe can start making arrangements to ensure a smooth and enjoyable trip.\n\nExcited to hear your thoughts! Olivia",
+    "date": "2022-12-20T18:30:00",
+    "read": true,
+    "active": false,
+    "labels": ["personal"]
+  },
+  {
+    "id": "de305d54-75b4-431b-adb2-eb6b9e546014",
+    "initial": "JM",
+    "name": "James Martin",
+    "email": "[email protected]",
+    "subject": "Re: Conference Registration",
+    "text": "I've completed the registration for the conference next month. The event promises to be a great networking opportunity, and I'm looking forward to attending the various sessions and connecting with industry experts.\n\nI've also attached the conference schedule for your reference.\n\nIf there are any specific topics or sessions you'd like me to explore, please let me know. It's an exciting event, and I'll make the most of it.\n\nBest regards, James",
+    "date": "2022-11-30T19:15:00",
+    "read": true,
+    "active": false,
+    "labels": ["work", "conference"]
+  },
+  {
+    "id": "7dd90c63-00f6-40f3-bd87-5060a24e8ee7",
+    "initial": "SW",
+    "name": "Sophia White",
+    "email": "[email protected]",
+    "subject": "Team Dinner",
+    "text": "Let's have a team dinner next week to celebrate our success. We've achieved some significant milestones, and it's time to acknowledge our hard work and dedication.\n\nI've made reservations at a lovely restaurant, and I'm sure it'll be an enjoyable evening.\n\nPlease confirm your availability and any dietary preferences. Looking forward to a fun and memorable dinner with the team!\n\nBest, Sophia",
+    "date": "2022-11-05T20:30:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work"]
+  },
+  {
+    "id": "99a88f78-3eb4-4d87-87b7-7b15a49a0a05",
+    "initial": "DJ",
+    "name": "Daniel Johnson",
+    "email": "[email protected]",
+    "subject": "Feedback Request",
+    "text": "I'd like your feedback on the latest project deliverables. We've made significant progress, and I value your input to ensure we're on the right track.\n\nI've attached the deliverables for your review, and I'm particularly interested in any areas where you think we can further enhance the quality or efficiency.\n\nYour feedback is invaluable, and I appreciate your time and expertise. Let's work together to make this project a success.\n\nRegards, Daniel",
+    "date": "2022-10-22T09:30:00",
+    "read": false,
+    "active": false,
+    "labels": ["work"]
+  },
+  {
+    "id": "f47ac10b-58cc-4372-a567-0e02b2c3d479",
+    "initial": "AT",
+    "name": "Ava Taylor",
+    "email": "[email protected]",
+    "subject": "Re: Meeting Agenda",
+    "text": "Here's the agenda for our meeting next week. I've included all the topics we need to cover, as well as time allocations for each.\n\nIf you have any additional items to discuss or any specific points to address, please let me know, and we can integrate them into the agenda.\n\nIt's essential that our meeting is productive and addresses all relevant matters.\n\nLooking forward to our meeting! Ava",
+    "date": "2022-10-10T10:45:00",
+    "read": true,
+    "active": false,
+    "labels": ["meeting", "work"]
+  },
+  {
+    "id": "c1a0ecb4-2540-49c5-86f8-21e5ce79e4e6",
+    "initial": "WA",
+    "name": "William Anderson",
+    "email": "[email protected]",
+    "subject": "Product Launch Update",
+    "text": "The product launch is on track. I'll provide an update during our call. We've made substantial progress in the development and marketing of our new product.\n\nI'm excited to share the latest updates with you during our upcoming call. It's crucial that we coordinate our efforts to ensure a successful launch. Please come prepared with any questions or insights you may have.\n\nLet's make this product launch a resounding success!\n\nBest regards, William",
+    "date": "2022-09-20T12:00:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work", "important"]
+  },
+  {
+    "id": "ba54eefd-4097-4949-99f2-2a9ae4d1a836",
+    "initial": "MH",
+    "name": "Mia Harris",
+    "email": "[email protected]",
+    "subject": "Re: Travel Itinerary",
+    "text": "I've received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I've reviewed the schedule and the accommodations, and everything seems to be in order. I'm looking forward to the trip, and I'm confident it'll be a smooth and enjoyable experience.\n\nIf there are any specific activities or attractions you recommend at our destination, please feel free to share your suggestions.\n\nExcited for the trip! Mia",
+    "date": "2022-09-10T13:15:00",
+    "read": true,
+    "active": false,
+    "labels": ["personal", "travel"]
+  },
+  {
+    "id": "df09b6ed-28bd-4e0c-85a9-9320ec5179aa",
+    "initial": "EC",
+    "name": "Ethan Clark",
+    "email": "[email protected]",
+    "subject": "Team Building Event",
+    "text": "Let's plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I've done some research and have a few ideas for fun and engaging activities.\n\nPlease let me know your thoughts and availability. We want this event to be both enjoyable and productive.\n\nTogether, we'll strengthen our team and boost our performance.\n\nRegards, Ethan",
+    "date": "2022-08-25T15:30:00",
+    "read": false,
+    "active": false,
+    "labels": ["meeting", "work"]
+  },
+  {
+    "id": "d67c1842-7f8b-4b4b-9be1-1b3b1ab4611d",
+    "initial": "CH",
+    "name": "Chloe Hall",
+    "email": "[email protected]",
+    "subject": "Re: Budget Approval",
+    "text": "The budget has been approved. We can proceed with the project. I'm delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone, and it means we can move forward with the project as planned.\n\nI've attached the finalized budget for your reference. Let's ensure that we stay on track and deliver the project on time and within budget.\n\nIt's an exciting time for us! Chloe",
+    "date": "2022-08-10T16:45:00",
+    "read": true,
+    "active": false,
+    "labels": ["work", "budget"]
+  },
+  {
+    "id": "6c9a7f94-8329-4d70-95d3-51f68c186ae1",
+    "initial": "ST",
+    "name": "Samuel Turner",
+    "email": "[email protected]",
+    "subject": "Weekend Hike",
+    "text": "Who's up for a weekend hike in the mountains? I've been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you're up for the challenge, we can explore some scenic trails and enjoy the beauty of nature.\n\nI've done some research and have a few routes in mind.\n\nLet me know if you're interested, and we can plan the details.\n\nIt's sure to be a memorable experience! Samuel",
+    "date": "2022-07-28T17:30:00",
+    "read": false,
+    "active": false,
+    "labels": ["personal"]
+  }
+]

MonsterUI/docs/examples/data/status_list.json

@@ -0,0 +1 @@
+[{"selected": true, "id": "TASK-8782", "title": "You can't compress the program without quantifying the open-source SSD pixel!", "status": "progress", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-7878", "title": "Try to calculate the EXE feed, maybe it will index the multi-byte pixel!", "status": "backlog", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-7839", "title": "We need to bypass the neural TCP card!", "status": "todo", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-5562", "title": "The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!", "status": "backlog", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-8686", "title": "I'll parse the wireless SSL protocol, that should driver the API panel!", "status": "cancelled", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-1280", "title": "Use the digital TLS panel, then you can transmit the haptic system!", "status": "done", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-7262", "title": "The UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!", "status": "done", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-1138", "title": "Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!", "status": "progress", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-7184", "title": "We need to program the back-end THX pixel!", "status": "todo", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-5160", "title": "Calculating the bus won't do anything, we need to navigate the back-end JSON protocol!", "status": "progress", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-5618", "title": "Generating the driver won't do anything, we need to index the online SSL application!", "status": "done", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-6699", "title": "I'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!", "status": "backlog", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-2858", "title": "We need to override the online UDP bus!", "status": "backlog", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-9864", "title": "I'll reboot the 1080p FTP panel, that should matrix the HEX hard drive!", "status": "done", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-8404", "title": "We need to generate the virtual HEX alarm!", "status": "progress", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-5365", "title": "Backing up the pixel won't do anything, we need to transmit the primary IB array!", "status": "progress", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-1780", "title": "The CSS feed is down, index the bluetooth transmitter so we can compress the CLI protocol!", "status": "todo", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-6938", "title": "Use the redundant SCSI application, then you can hack the optical alarm!", "status": "todo", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-9885", "title": "We need to compress the auxiliary VGA driver!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-3216", "title": "Transmitting the transmitter won't do anything, we need to compress the virtual HDD sensor!", "status": "backlog", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-9285", "title": "The IP monitor is down, copy the haptic alarm so we can generate the HTTP transmitter!", "status": "todo", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-1024", "title": "Overriding the microchip won't do anything, we need to transmit the digital OCR transmitter!", "status": "progress", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-7068", "title": "You can't generate the capacitor without indexing the wireless HEX pixel!", "status": "cancelled", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-6502", "title": "Navigating the microchip won't do anything, we need to bypass the back-end SQL bus!", "status": "todo", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-5326", "title": "We need to hack the redundant UTF8 transmitter!", "status": "todo", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-6274", "title": "Use the virtual PCI circuit, then you can parse the bluetooth alarm!", "status": "cancelled", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-1571", "title": "I'll input the neural DRAM circuit, that should protocol the SMTP interface!", "status": "progress", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-9518", "title": "Compressing the interface won't do anything, we need to compress the online SDD matrix!", "status": "cancelled", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-5581", "title": "I'll synthesize the digital COM pixel, that should transmitter the UTF8 protocol!", "status": "backlog", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-2197", "title": "Parsing the feed won't do anything, we need to copy the bluetooth DRAM bus!", "status": "todo", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-8484", "title": "We need to parse the solid state UDP firewall!", "status": "progress", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-9892", "title": "If we back up the application, we can get to the UDP application through the multi-byte THX capacitor!", "status": "done", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-9616", "title": "We need to synthesize the cross-platform ASCII pixel!", "status": "progress", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-9744", "title": "Use the back-end IP card, then you can input the solid state hard drive!", "status": "done", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-1376", "title": "Generating the alarm won't do anything, we need to generate the mobile IP capacitor!", "status": "backlog", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-7382", "title": "If we back up the firewall, we can get to the RAM alarm through the primary UTF8 pixel!", "status": "todo", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-2290", "title": "I'll compress the virtual JSON panel, that should application the UTF8 bus!", "status": "cancelled", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-1533", "title": "You can't input the firewall without overriding the wireless TCP firewall!", "status": "done", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-4920", "title": "Bypassing the hard drive won't do anything, we need to input the bluetooth JSON program!", "status": "progress", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-5168", "title": "If we synthesize the bus, we can get to the IP panel through the virtual TLS array!", "status": "progress", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-7103", "title": "We need to parse the multi-byte EXE bandwidth!", "status": "cancelled", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-4314", "title": "If we compress the program, we can get to the XML alarm through the multi-byte COM matrix!", "status": "progress", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-3415", "title": "Use the cross-platform XML application, then you can quantify the solid state feed!", "status": "todo", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-8339", "title": "Try to calculate the DNS interface, maybe it will input the bluetooth capacitor!", "status": "progress", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-6995", "title": "Try to hack the XSS bandwidth, maybe it will override the bluetooth matrix!", "status": "todo", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-8053", "title": "If we connect the program, we can get to the UTF8 matrix through the digital UDP protocol!", "status": "todo", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-4336", "title": "If we synthesize the microchip, we can get to the SAS sensor through the optical UDP program!", "status": "todo", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-8790", "title": "I'll back up the optical COM alarm, that should alarm the RSS capacitor!", "status": "done", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-8980", "title": "Try to navigate the SQL transmitter, maybe it will back up the virtual firewall!", "status": "cancelled", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-7342", "title": "Use the neural CLI card, then you can parse the online port!", "status": "backlog", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-5608", "title": "I'll hack the haptic SSL program, that should bus the UDP transmitter!", "status": "cancelled", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-1606", "title": "I'll generate the bluetooth PNG firewall, that should pixel the SSL driver!", "status": "done", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-7872", "title": "Transmitting the circuit won't do anything, we need to reboot the 1080p RSS monitor!", "status": "cancelled", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-4167", "title": "Use the cross-platform SMS circuit, then you can synthesize the optical feed!", "status": "cancelled", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-9581", "title": "You can't index the port without hacking the cross-platform XSS monitor!", "status": "backlog", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-8806", "title": "We need to bypass the back-end SSL panel!", "status": "done", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-6542", "title": "Try to quantify the RSS firewall, maybe it will quantify the open-source system!", "status": "done", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-6806", "title": "The VGA protocol is down, reboot the back-end matrix so we can parse the CSS panel!", "status": "cancelled", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-9549", "title": "You can't bypass the bus without connecting the neural JBOD bus!", "status": "todo", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-1075", "title": "Backing up the driver won't do anything, we need to parse the redundant RAM pixel!", "status": "done", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-1427", "title": "Use the auxiliary PCI circuit, then you can calculate the cross-platform interface!", "status": "done", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-1907", "title": "Hacking the circuit won't do anything, we need to back up the online DRAM system!", "status": "todo", "label": "documentation", "priority": "high"}, {"selected": false, "id": "TASK-4309", "title": "If we generate the system, we can get to the TCP sensor through the optical GB pixel!", "status": "backlog", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-3973", "title": "I'll parse the back-end ADP array, that should bandwidth the RSS bandwidth!", "status": "todo", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-7962", "title": "Use the wireless RAM program, then you can hack the cross-platform feed!", "status": "cancelled", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-3360", "title": "You can't quantify the program without synthesizing the neural OCR interface!", "status": "done", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-9887", "title": "Use the auxiliary ASCII sensor, then you can connect the solid state port!", "status": "backlog", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-3649", "title": "I'll input the virtual USB system, that should circuit the DNS monitor!", "status": "progress", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-3586", "title": "If we quantify the circuit, we can get to the CLI feed through the mobile SMS hard drive!", "status": "progress", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-5150", "title": "I'll hack the wireless XSS port, that should transmitter the IP interface!", "status": "cancelled", "label": "feature", "priority": "medium"}, {"selected": false, "id": "TASK-3652", "title": "The SQL interface is down, override the optical bus so we can program the ASCII interface!", "status": "backlog", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-6884", "title": "Use the digital PCI circuit, then you can synthesize the multi-byte microchip!", "status": "cancelled", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-1591", "title": "We need to connect the mobile XSS driver!", "status": "progress", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-3802", "title": "Try to override the ASCII protocol, maybe it will parse the virtual matrix!", "status": "progress", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-7253", "title": "Programming the capacitor won't do anything, we need to bypass the neural IB hard drive!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-9739", "title": "We need to hack the multi-byte HDD bus!", "status": "done", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-4424", "title": "Try to hack the HEX alarm, maybe it will connect the optical pixel!", "status": "progress", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-3922", "title": "You can't back up the capacitor without generating the wireless PCI program!", "status": "backlog", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-4921", "title": "I'll index the open-source IP feed, that should system the GB application!", "status": "cancelled", "label": "bug", "priority": "low"}, {"selected": false, "id": "TASK-5814", "title": "We need to calculate the 1080p AGP feed!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-2645", "title": "Synthesizing the system won't do anything, we need to navigate the multi-byte HDD firewall!", "status": "todo", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-4535", "title": "Try to copy the JSON circuit, maybe it will connect the wireless feed!", "status": "progress", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-4463", "title": "We need to copy the solid state AGP monitor!", "status": "done", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-9745", "title": "If we connect the protocol, we can get to the GB system through the bluetooth PCI microchip!", "status": "cancelled", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-2080", "title": "If we input the bus, we can get to the RAM matrix through the auxiliary RAM card!", "status": "todo", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-3838", "title": "I'll bypass the online TCP application, that should panel the AGP system!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-1340", "title": "We need to navigate the virtual PNG circuit!", "status": "todo", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-6665", "title": "If we parse the monitor, we can get to the SSD hard drive through the cross-platform AGP alarm!", "status": "cancelled", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-7585", "title": "If we calculate the hard drive, we can get to the SSL program through the multi-byte CSS microchip!", "status": "backlog", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-6319", "title": "We need to copy the multi-byte SCSI program!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-4369", "title": "Try to input the SCSI bus, maybe it will generate the 1080p pixel!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-9035", "title": "We need to override the solid state PNG array!", "status": "cancelled", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-3970", "title": "You can't index the transmitter without quantifying the haptic ASCII card!", "status": "todo", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-4473", "title": "You can't bypass the protocol without overriding the neural RSS program!", "status": "todo", "label": "documentation", "priority": "low"}, {"selected": false, "id": "TASK-4136", "title": "You can't hack the hard drive without hacking the primary JSON program!", "status": "cancelled", "label": "bug", "priority": "medium"}, {"selected": false, "id": "TASK-3939", "title": "Use the back-end SQL firewall, then you can connect the neural hard drive!", "status": "done", "label": "feature", "priority": "low"}, {"selected": false, "id": "TASK-2007", "title": "I'll input the back-end USB protocol, that should bandwidth the PCI system!", "status": "backlog", "label": "bug", "priority": "high"}, {"selected": false, "id": "TASK-7516", "title": "Use the primary SQL program, then you can generate the auxiliary transmitter!", "status": "done", "label": "documentation", "priority": "medium"}, {"selected": false, "id": "TASK-6906", "title": "Try to back up the DRAM system, maybe it will reboot the online transmitter!", "status": "done", "label": "feature", "priority": "high"}, {"selected": false, "id": "TASK-5207", "title": "The SMS interface is down, copy the bluetooth bus so we can quantify the VGA card!", "status": "progress", "label": "bug", "priority": "low"}]

MonsterUI/docs/examples/data/statuses.json

@@ -0,0 +1,22 @@
+{
+  "backlog": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M0.877075 7.49972C0.877075 3.84204 3.84222 0.876892 7.49991 0.876892C11.1576 0.876892 14.1227 3.84204 14.1227 7.49972C14.1227 11.1574 11.1576 14.1226 7.49991 14.1226C3.84222 14.1226 0.877075 11.1574 0.877075 7.49972ZM7.49991 1.82689C4.36689 1.82689 1.82708 4.36671 1.82708 7.49972C1.82708 10.6327 4.36689 13.1726 7.49991 13.1726C10.6329 13.1726 13.1727 10.6327 13.1727 7.49972C13.1727 4.36671 10.6329 1.82689 7.49991 1.82689ZM8.24993 10.5C8.24993 10.9142 7.91414 11.25 7.49993 11.25C7.08571 11.25 6.74993 10.9142 6.74993 10.5C6.74993 10.0858 7.08571 9.75 7.49993 9.75C7.91414 9.75 8.24993 10.0858 8.24993 10.5ZM6.05003 6.25C6.05003 5.57211 6.63511 4.925 7.50003 4.925C8.36496 4.925 8.95003 5.57211 8.95003 6.25C8.95003 6.74118 8.68002 6.99212 8.21447 7.27494C8.16251 7.30651 8.10258 7.34131 8.03847 7.37854L8.03841 7.37858C7.85521 7.48497 7.63788 7.61119 7.47449 7.73849C7.23214 7.92732 6.95003 8.23198 6.95003 8.7C6.95004 9.00376 7.19628 9.25 7.50004 9.25C7.8024 9.25 8.04778 9.00601 8.05002 8.70417L8.05056 8.7033C8.05924 8.6896 8.08493 8.65735 8.15058 8.6062C8.25207 8.52712 8.36508 8.46163 8.51567 8.37436L8.51571 8.37433C8.59422 8.32883 8.68296 8.27741 8.78559 8.21506C9.32004 7.89038 10.05 7.35382 10.05 6.25C10.05 4.92789 8.93511 3.825 7.50003 3.825C6.06496 3.825 4.95003 4.92789 4.95003 6.25C4.95003 6.55376 5.19628 6.8 5.50003 6.8C5.80379 6.8 6.05003 6.55376 6.05003 6.25Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "Backlog"
+  },
+  "cancelled": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "Cancelled"
+  },
+  "done": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "Done"
+  },
+  "progress": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M5.49998 0.5C5.49998 0.223858 5.72383 0 5.99998 0H7.49998H8.99998C9.27612 0 9.49998 0.223858 9.49998 0.5C9.49998 0.776142 9.27612 1 8.99998 1H7.99998V2.11922C9.09832 2.20409 10.119 2.56622 10.992 3.13572C11.0116 3.10851 11.0336 3.08252 11.058 3.05806L11.858 2.25806C12.1021 2.01398 12.4978 2.01398 12.7419 2.25806C12.986 2.50214 12.986 2.89786 12.7419 3.14194L11.967 3.91682C13.1595 5.07925 13.9 6.70314 13.9 8.49998C13.9 12.0346 11.0346 14.9 7.49998 14.9C3.96535 14.9 1.09998 12.0346 1.09998 8.49998C1.09998 5.13362 3.69904 2.3743 6.99998 2.11922V1H5.99998C5.72383 1 5.49998 0.776142 5.49998 0.5ZM2.09998 8.49998C2.09998 5.51764 4.51764 3.09998 7.49998 3.09998C10.4823 3.09998 12.9 5.51764 12.9 8.49998C12.9 11.4823 10.4823 13.9 7.49998 13.9C4.51764 13.9 2.09998 11.4823 2.09998 8.49998ZM7.99998 4.5C7.99998 4.22386 7.77612 4 7.49998 4C7.22383 4 6.99998 4.22386 6.99998 4.5V9.5C6.99998 9.77614 7.22383 10 7.49998 10C7.77612 10 7.99998 9.77614 7.99998 9.5V4.5Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "In Progress"
+  },
+  "todo": {
+    "icon": "<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-2 h-4 w-4 text-muted-foreground\"><path d=\"M0.877075 7.49991C0.877075 3.84222 3.84222 0.877075 7.49991 0.877075C11.1576 0.877075 14.1227 3.84222 14.1227 7.49991C14.1227 11.1576 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1576 0.877075 7.49991ZM7.49991 1.82708C4.36689 1.82708 1.82708 4.36689 1.82708 7.49991C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49991C13.1727 4.36689 10.6329 1.82708 7.49991 1.82708Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>",
+    "text": "Todo"
+  }
+}

MonsterUI/docs/examples/forms.py

@@ -0,0 +1,150 @@
+"""FrankenUI Forms Example built with MonsterUI (original design by ShadCN)"""
+
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+def HelpText(c): return P(c,cls=TextPresets.muted_sm)
+
+def heading():
+    return Div(cls="space-y-5")(
+            H2("Settings"),
+            Subtitle("Manage your account settings and set e-mail preferences."),
+            DividerSplit())
+
+
+sidebar = NavContainer(
+    *map(lambda x: Li(A(x)), ("Profile", "Account", "Appearance", "Notifications", "Display")),
+    uk_switcher="connect: #component-nav; animation: uk-animation-fade",
+    cls=(NavT.secondary,"space-y-4 p-4 w-1/5"))
+
+
+def FormSectionDiv(*c, cls='space-y-2', **kwargs): return Div(*c, cls=cls, **kwargs)
+
+def FormLayout(title, subtitle, *content, cls='space-y-3 mt-4'): return Container(Div(H3(title), Subtitle(subtitle), DividerLine(), Form(*content, cls=cls)))
+
+def profile_form():
+    content = (FormSectionDiv(
+            LabelInput("Username", placeholder='sveltecult', id='username'),
+            HelpText("This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days.")),
+        FormSectionDiv(
+            LabelSelect(
+                      Option("Select a verified email to display", value="", selected=True, disabled=True),
+                     *[Option(o, value=o) for o in ('[email protected]', '[email protected]', '[email protected]')],  
+                     label="Email", id="email"),
+            HelpText("You can manage verified email addresses in your email settings.")),
+        FormSectionDiv(
+            LabelTextArea("Bio", id="bio", placeholder="Tell us a little bit about yourself"),
+            HelpText("You can @mention other users and organizations to link to them."),
+            P("String must contain at least 4 character(s)", cls="text-destructive")),
+        FormSectionDiv(
+            FormLabel("URLs"),
+            HelpText("Add links to your website, blog, or social media profiles."),
+            Input(value="https://www.franken-ui.dev"),
+            Input(value="https://github.com/sveltecult/franken-ui"),
+            Button("Add URL")),
+            Button('Update profile', cls=ButtonT.primary))
+    
+    return FormLayout('Profile', 'This is how others will see you on the site.', *content)
+
+def account_form():
+    content = (
+        FormSectionDiv(
+            LabelInput("Name", placeholder="Your name", id="name"),
+            HelpText("This is the name that will be displayed on your profile and in emails.")),
+        FormSectionDiv(
+            LabelInput("Date of Birth", type="date", placeholder="Pick a date", id="date_of_birth"),
+            HelpText("Your date of birth is used to calculate your age.")),
+        FormSectionDiv(
+            LabelSelect(*Options("Select a language", "English", "French", "German", "Spanish", "Portuguese", selected_idx=1, disabled_idxs={0}),
+                          label='Language', id="language"),
+            HelpText("This is the language that will be used in the dashboard.")),
+        Button('Update profile', cls=ButtonT.primary))
+    
+    return FormLayout('Account', 'Update your account settings. Set your preferred language and timezone.', *content)
+
+def appearance_form():
+    def theme_item(bg_color, content_bg, text_bg):
+        common_content = f"space-y-2 rounded-md {content_bg} p-2 shadow-sm"
+        item_row = lambda: Div(cls=f"flex items-center space-x-2 {common_content}")(
+            Div(cls=f"h-4 w-4 rounded-full {text_bg}"),
+            Div(cls=f"h-2 w-[100px] rounded-lg {text_bg}"))
+        
+        return Div(cls=f"space-y-2 rounded-sm {bg_color} p-2")(
+            Div(cls=common_content)(
+                Div(cls=f"h-2 w-[80px] rounded-lg {text_bg}"),
+                Div(cls=f"h-2 w-[100px] rounded-lg {text_bg}")),
+            item_row(),
+            item_row())
+    
+    common_toggle_cls = "block cursor-pointer items-center rounded-md border-2 border-muted p-1 ring-ring"
+
+    content = (
+        FormSectionDiv(
+            LabelSelect(*Options('Select a font family', 'Inter', 'Geist', 'Open Sans', selected_idx=2, disabled_idxs={0}),
+            label='Font Family', id='font_family'), 
+            HelpText("Set the font you want to use in the dashboard.")),
+        FormSectionDiv(
+            FormLabel("Theme"),
+            HelpText("Select the theme for the dashboard."),
+            Grid(
+                A(id="theme-toggle-light", cls=common_toggle_cls)(theme_item("bg-[#ecedef]", "bg-white", "bg-[#ecedef]")),
+                A(id="theme-toggle-dark", cls=f"{common_toggle_cls} bg-popover")(theme_item("bg-slate-950", "bg-slate-800", "bg-slate-400")),
+                cols_max=2,cls=('max-w-md','gap-8'))),
+            Button('Update preferences', cls=ButtonT.primary))
+    
+    return FormLayout('Appearance', 'Customize the appearance of the app. Automatically switch between day and night themes.', *content)
+
+
+notification_items = [
+    {"title": "Communication emails", "description": "Receive emails about your account activity.", "checked": False, "disabled": False},
+    {"title": "Marketing emails", "description": "Receive emails about new products, features, and more.", "checked": False, "disabled": False},
+    {"title": "Social emails", "description": "Receive emails for friend requests, follows, and more.", "checked": True, "disabled": False},
+    {"title": "Security emails", "description": "Receive emails about your account activity and security.", "checked": True, "disabled": True}]
+
+def notifications_form():
+    def RadioLabel(label): return DivLAligned(Radio(name="notification", checked=(label=="Nothing")), FormLabel(label))
+
+    def NotificationCard(item):
+        return Card(
+            Div(cls="space-y-0.5")(
+                FormLabel(Strong(item['title'], cls=TextT.sm),
+                HelpText(item['description']))))
+    content = Div(
+        FormSectionDiv(
+            FormLabel("Notify me about"),
+            *map(RadioLabel, ["All new messages", "Direct messages and mentions", "Nothing"])),
+        Div(
+            H4("Email Notifications", cls="mb-4"),
+            Grid(*map(NotificationCard, notification_items), cols=1)),
+            LabelCheckboxX("Use different settings for my mobile devices", id="notification_mobile"),
+            HelpText("You can manage your mobile notifications in the mobile settings page."),
+            Button('Update notifications', cls=ButtonT.primary))
+    
+    return FormLayout('Notifications', 'Configure how you receive notifications.', *content)
+
+def display_form():
+    content = (
+        Div(cls="space-y-2")(
+            Div(cls="mb-4")(
+                H5("Sidebar"),
+                Subtitle("Select the items you want to display in the sidebar.")),
+            *[Div(CheckboxX(id=f"display_{i}", checked=i in [0, 1, 2]),FormLabel(label))
+              for i, label in enumerate(["Recents", "Home", "Applications", "Desktop", "Downloads", "Documents"])]),
+            Button('Update display', cls=ButtonT.primary))
+    return FormLayout('Display', 'Turn items on or off to control what\'s displayed in the app.', *content)
+
+@rt
+def index():
+    return Title("Forms Example"),Container(
+        heading(),
+        Div(cls="flex gap-x-12")(
+            sidebar,
+                Ul(id="component-nav", cls="uk-switcher max-w-2xl")(
+                    Li(cls="uk-active")(profile_form(),
+                    *map(Li, [account_form(), appearance_form(), notifications_form(), display_form()])))))
+
+serve()

MonsterUI/docs/examples/mail.py

@@ -0,0 +1,111 @@
+"""FrankenUI Mail Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+import pathlib, json
+from datetime import datetime
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+sidebar_group1 = (('home', 'Inbox', '128'), ('file-text', 'Drafts', '9'), (' arrow-up-right', 'Sent', ''),
+    ('ban', 'Junk', '23'), ('trash', 'Trash', ''), ('folder', 'Archive', ''))
+
+sidebar_group2 = (('globe','Social','972'),('info','Updates','342'),('messages-square','Forums','128'),
+    ('shopping-cart','Shopping','8'),('shopping-bag','Promotions','21'),)
+
+def MailSbLi(icon, title, cnt): 
+    return Li(A(DivLAligned(Span(UkIcon(icon)),Span(title),P(cnt, cls=TextPresets.muted_sm)),href='#',  cls='hover:bg-secondary p-4'))
+
+sidebar = NavContainer(
+    NavHeaderLi(H3("Email"), cls='p-3'),
+    Li(Select(map(Option, ('[email protected]','[email protected]', '[email protected]')))),
+    *[MailSbLi(i, t, c) for i, t, c in sidebar_group1],
+    Li(Hr()),
+    *[MailSbLi(i, t, c) for i, t, c in sidebar_group2],
+    cls='mt-3')
+
+mail_data = json.load(open(pathlib.Path('data_/mail.json')))
+
+def format_date(date_str):
+    date_obj = datetime.fromisoformat(date_str)
+    return date_obj.strftime("%Y-%m-%d %I:%M %p")
+
+def MailItem(mail):
+    cls_base = 'relative rounded-lg border border-border p-3 text-sm hover:bg-secondary space-y-2'
+    cls = f"{cls_base} {'bg-muted' if mail == mail_data[0] else ''} {'tag-unread' if not mail['read'] else 'tag-mail'}"
+    
+    return Li(
+        DivFullySpaced(
+            DivLAligned(
+                Strong(mail['name']),
+                    Span(cls='flex h-2 w-2 rounded-full bg-blue-600') if not mail['read'] else ''),
+                Time(format_date(mail['date']), cls='text-xs')),
+            Small(mail['subject'], href=f"#mail-{mail['id']}"),
+            Div(mail['text'][:100] + '...', cls=TextPresets.muted_sm),
+            DivLAligned(
+                *[Label(A(label, href='#'), cls='uk-label-primary' if label == 'work' else '') for label in mail['labels']]),
+        cls=cls)
+
+def MailList(mails): return Ul(cls='js-filter space-y-2 p-4 pt-0')(*[MailItem(mail) for mail in mails])
+
+def MailContent():
+    return Div(cls='flex flex-col',uk_filter="target: .js-filter")(
+        Div(cls='flex px-4 py-2 ')(
+            H3('Inbox'),
+            TabContainer(Li(A("All Mail",href='#', role='button'),cls='uk-active', uk_filter_control="filter: .tag-mail"), 
+                         Li(A("Unread",href='#', role='button'),                   uk_filter_control="filter: .tag-unread"), 
+                         alt=True, cls='ml-auto max-w-40', )),
+        Div(cls='flex flex-1 flex-col')(
+            Div(cls='p-4')(
+                Div(cls='uk-inline w-full')(
+                    Span(cls='uk-form-icon text-muted-foreground')(UkIcon('search')),
+                    Input(placeholder='Search'))),
+            Div(cls='flex-1 overflow-y-auto max-h-[600px]')(MailList(mail_data))))
+
+def IconNavItem(*d): return [Li(A(UkIcon(o[0],uk_tooltip=o[1]))) for o in d]  
+def IconNav(*c,cls=''): return Ul(cls=f'uk-iconnav {cls}')(*c)
+
+def MailDetailView(mail):
+    top_icons = [('folder','Archive'), ('ban','Move to junk'), ('trash','Move to trash')]
+    reply_icons = [('reply','Reply'), ('reply','Reply all'), ('forward','Forward')]
+    dropdown_items = ['Mark as unread', 'Star read', 'Add Label', 'Mute Thread']
+    
+    return Container(
+            DivFullySpaced(
+                DivLAligned(
+                    DivLAligned(*[UkIcon(o[0],uk_tooltip=o[1]) for o in top_icons]),  
+                    Div(UkIcon('clock', uk_tooltip='Snooze'), cls='pl-2'),
+                    cls='space-x-2 divide-x divide-border'),
+                DivLAligned(
+                    *[UkIcon(o[0],uk_tooltip=o[1]) for o in reply_icons],
+                    Div(UkIcon('ellipsis-vertical',button=True)),
+                    DropDownNavContainer(*map(lambda x: Li(A(x)), dropdown_items)))),
+            DivLAligned(
+                Span(mail['name'][:2], cls='flex h-10 w-10 items-center justify-center rounded-full bg-muted'),
+                Div(Strong(mail['name']),
+                    Div(mail['subject']),
+                    DivLAligned(P('Reply-To:'), A(mail['email'], href=f"mailto:{mail['email']}"), cls='space-x-1'),
+                    P(Time(format_date(mail['date']))),
+                    cls='space-y-1'+TextT.sm),
+                    cls='m-4 space-x-4'),
+            DividerLine(),
+            P(mail['text'], cls=TextT.sm +'p-4'),
+            DividerLine(),
+        Div(TextArea(id='message', placeholder=f"Reply {mail['name']}"),
+            DivFullySpaced(
+                LabelSwitch('Mute this thread',id='mute'),
+                Button('Send', cls=ButtonT.primary)),
+            cls='space-y-4'))
+
+@rt
+def index():
+    return Title("Mail Example"),Container(
+        Grid(Div(sidebar, cls='col-span-1'),
+             Div(MailContent(), cls='col-span-2'),
+             Div(MailDetailView(mail_data[0]), cls='col-span-2'),
+             cols_sm=1, cols_md=1, cols_lg=5, cols_xl=5, 
+             gap=0, cls='flex-1'),
+        cls=('flex', ContainerT.xl))
+
+serve()

MonsterUI/docs/examples/music.py

@@ -0,0 +1,138 @@
+"""FrankenUI Music Example build with MonsterUI (Original design by ShadCN)"""
+
+from fasthtml.common import *
+
+from monsterui.all import *
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+def MusicLi(t,hk=''): return Li(A(DivFullySpaced(t,P(hk,cls=TextPresets.muted_sm))))
+
+music_items = [("About Music", ""   ),
+               ("Preferences", "⌘"  ),
+               ("Hide Music" , "⌘H" ),
+               ("Hide Others", "⇧⌘H"),
+               ("Quit Music" , "⌘Q" )]
+
+file_dd_items = [("New",                   ""),
+                 ("Open Stream URL",       "⌘U"),
+                 ("Close Window",          "⌘W"),
+                 ("Library",               ""),
+                 ("Import",                "⌘O"),
+                 ("Burn Playlist to Disc", ""),
+                 ("Show in Finder",        "⇧⌘R"),
+                 ("Convert",               ""),
+                 ("Page Setup",            "Print")]
+
+edit_actions = [("Undo",         "⌘Z"),
+                ("Redo",         "⇧⌘Z"),
+                ("Cut",          "⌘X"),
+                ("Copy",         "⌘C"),
+                ("Paste",        "⌘V"),
+                ("Select All",   "⌘A"),
+                ("Deselect All", "⇧⌘A")]
+
+view_dd_data = ["Show Playing Next", "Show Lyrics", "Show Status Bar", "Hide Sidebar", "Enter Full Screen"]
+
+
+music_headers = NavBar(
+    Button("Music", cls=ButtonT.ghost+TextT.gray),DropDownNavContainer(Li(A("Music"),NavContainer(map(lambda x: MusicLi(*x), music_items)))),
+    Button("File", cls=ButtonT.ghost+TextT.gray), DropDownNavContainer(Li(A("File"), NavContainer(map(lambda x: MusicLi(*x), file_dd_items)))),
+    Button("Edit", cls=ButtonT.ghost+TextT.gray), DropDownNavContainer(Li(A("Edit")),NavContainer(
+            *map(lambda x: MusicLi(*x), edit_actions),
+            Li(A(DivFullySpaced("Smart Dictation",UkIcon("mic")))),
+            Li(A(DivFullySpaced("Emojis & Symbols",UkIcon("globe")))))),
+    Button("View", cls=ButtonT.ghost+TextT.gray),DropDownNavContainer(Li(A("View"),NavContainer(map(lambda x: MusicLi(x), view_dd_data)))),
+    brand=DivLAligned(H2("Purrify"))
+    )
+    
+
+
+
+# music_headers = NavBarContainer(
+#             NavBarLSide(
+#                 NavBarNav(
+#                 Li(A("Music"),NavBarNavContainer(map(lambda x: MusicLi(*x), music_items))),
+#                 Li(A("File"), NavBarNavContainer(map(lambda x: MusicLi(*x), file_dd_items))),
+#                 Li(A("Edit")),
+#                     NavBarNavContainer(
+#                         *map(lambda x: MusicLi(*x), edit_actions),
+#                         Li(A(DivFullySpaced("Smart Dictation",UkIcon("mic")))),
+#                         Li(A(DivFullySpaced("Emojis & Symbols",UkIcon("globe"))))),
+#                 Li(A("View"),
+#                 NavBarNavContainer(map(lambda x: MusicLi(x), view_dd_data))),
+#                 Li(A("Account"),
+#                     NavBarNavContainer(
+#                         NavHeaderLi("Switch Account"),
+#                         *map(MusicLi, ("Andy", "Benoit", "Luis", "Manage Family", "Add Account")))))))
+
+
+def Album(title,artist):
+    img_url = 'https://ucarecdn.com/e5607eaf-2b2a-43b9-ada9-330824b6afd7/music1.webp'
+    return Div(
+        Div(cls="overflow-hidden rounded-md")(Img(cls="transition-transform duration-200 hover:scale-105", src=img_url)),
+        Div(cls='space-y-1')(Strong(title),P(artist,cls=TextT.muted)))
+        
+listen_now_albums = (("Roar", "Catty Perry"), ("Feline on a Prayer", "Cat Jovi"),("Fur Elise", "Ludwig van Beethovpurr"),("Purrple Rain", "Prince's Cat"))
+
+made_for_you_albums = [("Like a Feline",         "Catdonna"),
+                       ("Livin' La Vida Purrda", "Ricky Catin"),
+                       ("Meow Meow Rocket",      "Elton Cat"),
+                       ("Rolling in the Purr",   "Catdelle"),
+                       ("Purrs of Silence",      "Cat Garfunkel"),
+                       ("Meow Me Maybe",         "Carly Rae Purrsen"),]
+
+music_content = (Div(H3("Listen Now"), cls="mt-6 space-y-1"),
+                    Subtitle("Top picks for you. Updated daily."),
+                    DividerLine(),
+                    Grid(*[Album(t,a) for t,a in listen_now_albums], cls='gap-8'),
+                    Div(H3("Made for You"), cls="mt-6 space-y-1"),
+                    Subtitle("Your personal playlists. Updated daily."),
+                    DividerLine(),
+                    Grid(*[Album(t,a) for t,a in made_for_you_albums], cols_xl=6))
+
+tabs = TabContainer(
+    Li(A('Music',    href='#'),    cls='uk-active'),
+    Li(A('Podcasts', href='#')),
+    Li(A('Live', cls='opacity-50'), cls='uk-disabled'),
+    uk_switcher='connect: #component-nav; animation: uk-animation-fade',
+    alt=True)
+
+def podcast_tab():
+    return Div(
+        Div(cls='space-y-3 mt-6')(
+            H3("New Episodes"),
+            Subtitle("Your favorite podcasts. Updated daily.")),
+        Div(cls="uk-placeholder flex h-[450px] items-center justify-center rounded-md mt-4",uk_placeholder=True)(
+            DivVStacked(cls="space-y-6")(
+                UkIcon("microphone", 3),
+                H4("No episodes added"),
+                Subtitle("You have not added any podcasts. Add one below."),
+                Button("Add Podcast", cls=ButtonT.primary))))
+
+discoved_data =  [("play-circle","Listen Now"), ("binoculars", "Browse"), ("rss","Radio")]
+library_data =   [("play-circle", "Playlists"), ("music", "Songs"), ("user", "Made for You"), ("users", "Artists"), ("bookmark", "Albums")]
+playlists_data = [("library","Recently Added"), ("library","Recently Played")]
+
+def MusicSidebarLi(icon, text): return Li(A(DivLAligned(UkIcon(icon), P(text))))
+sidebar = NavContainer(
+    NavHeaderLi(H3("Discover")), *[MusicSidebarLi(*o) for o in discoved_data],
+    NavHeaderLi(H3("Library")),  *[MusicSidebarLi(*o) for o in library_data],
+    NavHeaderLi(H3("Playlists")),*[MusicSidebarLi(*o) for o in playlists_data],
+    cls=(NavT.primary,'space-y-3','pl-8'))
+
+@rt
+def index():
+    return Title("Music Example"),Container(music_headers, DividerSplit(),
+        Grid(sidebar,
+            Div(cls="col-span-4 border-l border-border")(
+                Div(cls="px-8 py-6")(
+                    DivFullySpaced(
+                        Div(cls="max-w-80")(tabs),
+                        Button(cls=ButtonT.primary)(DivLAligned(UkIcon('circle-plus')),Div("Add music"))),
+                    Ul(id="component-nav", cls="uk-switcher")(
+                        Li(*music_content),
+                        Li(podcast_tab())))),
+            cols_sm=1, cols_md=1, cols_lg=5, cols_xl=5))
+
+serve()

MonsterUI/docs/examples/playground.py

@@ -0,0 +1,69 @@
+"""FrankenUI Playground Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+preset_options = ["Grammatical Standard English", "Summarize for a 2nd grader",
+        "Text to command","Q&A","English to other languages","Parse unstructured data",
+        "Classification","Natural language to Python","Explain code","Chat","More examples"]
+
+def playground_navbar():
+    save_modal = Modal(
+        ModalTitle("Save preset"),
+        P("This will save the current playground state as a preset which you can access later or share with others.",cls=("mt-1.5", TextPresets.muted_sm)),
+        LabelInput("Name",        id="name"), 
+        LabelInput("Description", id="description"),
+        ModalCloseButton("Save", cls=ButtonT.primary),
+        id="save")
+    
+    share_dd = Div(cls="space-y-6 p-4")(
+        H3("Share preset"),
+        P("Anyone who has this link and an OpenAI account will be able to view this.", cls=TextPresets.muted_sm),
+        Div(Input(value="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003", readonly=True),
+            Button(UkIcon('copy'), cls=(ButtonT.primary, "uk-drop-close",'mt-4'))))
+
+    rnav = (
+        Select(*Options(*preset_options), name='preset', optgroup_label="Examples",
+                 placeholder='Load a preset', searchable=True, cls='h-9 w-[200px] lg:w-[300px]'),
+        Button("Save",         cls=ButtonT.secondary, data_uk_toggle="#save"),save_modal,
+        Button("View Code",    cls=ButtonT.secondary),
+        Button("Share",        cls=ButtonT.secondary),DropDownNavContainer(share_dd),
+        Button(UkIcon(icon="ellipsis"), cls=ButtonT.secondary),
+        DropDownNavContainer(
+            Li(A("Content filter preferences")),
+            NavDividerLi(),
+            Li(A("Delete preset", cls="text-destructive")),
+        uk_dropdown="mode: click"))
+    
+    return NavBar(*rnav, brand=H4('Playground'))
+
+rsidebar = NavContainer(
+    Select(
+        Optgroup(map(Option,("text-davinci-003", "text-curie-001", "text-babbage-001", "text-ada-001")),label='GPT-3'),
+        Optgroup(map(Option,("code-davinci-002", "code-cushman-001")),label='Codex'),
+        label="Model",
+        searchable=True),
+    LabelRange(label='Temperature', value='12'),
+    LabelRange(label='Maximum Length', value='80'),
+    LabelRange(label='Top P', value='40'),
+    cls='space-y-6 mt-8')
+
+@rt
+def index(): 
+    navbar = playground_navbar()
+    main_content = Div(
+        Div(cls="flex-1")(
+            Textarea(cls="uk-textarea h-full p-4", placeholder="Write a tagline for an ice cream shop")),
+            cls="flex h-[700px] p-8 w-4/5")
+    
+    bottom_buttons = Div(
+        Button("Submit", cls=ButtonT.primary),
+        Button(UkIcon(icon="history"), cls=ButtonT.secondary),
+        cls="flex gap-x-2")
+    
+    return Title("Playground Example"),Div(navbar, Div(cls="flex w-full")(main_content, rsidebar), bottom_buttons)
+
+serve()

MonsterUI/docs/examples/scrollspy.py

@@ -0,0 +1,125 @@
+"MonsterUI Scrollspy Example application" 
+
+from fasthtml.common import *
+from monsterui.all import *
+import random
+
+# Using the "slate" theme with Highlight.js enabled
+hdrs = Theme.slate.headers(highlightjs=True)
+app, rt = fast_app(hdrs=hdrs)
+
+################################
+### Example Data and Content ###
+################################
+products = [
+    {"name": "Laptop", "price": "$999"},
+    {"name": "Smartphone", "price": "$599"}
+]
+
+code_example = """
+# Python Code Example
+def greet(name):
+    return f"Hello, {name}!"
+
+print(greet("World"))
+"""
+testimonials = [
+    {"name": "Alice", "feedback": "Great products and excellent customer service!"},
+    {"name": "Bob", "feedback": "Fast shipping and amazing quality!"},
+    {"name": "Charlie", "feedback": "Amazing experience! Will definitely buy again."},
+    {"name": "Diana", "feedback": "Affordable prices and great variety!"},
+    {"name": "Edward", "feedback": "Customer support was very helpful."},
+    {"name": "Fiona", "feedback": "Loved the design and quality!"}
+]
+
+# Team members
+team = [
+    {"name": "Isaac Flath", "role": "CEO"},
+    {"name": "Benjamin Clavié", "role": "AI Researcher"},
+    {"name": "Alexis Gallagher", "role": "ML Engineer"},
+    {"name": "Hamel Husain", "role": "Data Scientist"},
+    {"name": "Austin Huang", "role": "Software Engineer"},
+    {"name": "Benjamin Warner", "role": "Product Manager"},
+    {"name": "Jonathan Whitaker", "role": "UX Designer"},
+    {"name": "Kerem Turgutlu", "role": "DevOps Engineer"},
+    {"name": "Curtis Allan", "role": "DevOps Engineer"},
+    {"name": "Audrey Roy Greenfeld", "role": "Security Analyst"},
+    {"name": "Nathan Cooper", "role": "Full Stack Developer"},
+    {"name": "Jeremy Howard", "role": "CTO"},
+    {"name": "Wayde Gilliam", "role": "Cloud Architect"},
+    {"name": "Daniel Roy Greenfeld", "role": "Blockchain Expert"},
+    {"name": "Tommy Collins", "role": "AI Ethics Researcher"}
+]
+
+
+def ProductCard(p,img_id=1):
+    return Card(
+        PicSumImg(w=500, height=100, id=img_id),
+        DivFullySpaced(H4(p["name"]), P(Strong(p["price"], cls=TextT.sm))), 
+        Button("Details", cls=(ButtonT.primary, "w-full")))
+
+def TestimonialCard(t,img_id=1):
+    return Card(
+        DivLAligned(PicSumImg(w=50, h=50, cls='rounded-full', id=img_id), H4(t["name"])), 
+        P(Q((t["feedback"]))))
+
+
+def TeamCard(m,img_id=1): 
+    return Card(
+        DivLAligned(
+            PicSumImg(w=50, h=50, cls='rounded-full', id=img_id), 
+            Div(H4(m["name"]), P(m["role"]))),
+        DivRAligned(
+            UkIcon('twitter', cls='w-5 h-5'), 
+            UkIcon('linkedin', cls='w-5 h-5'),
+            UkIcon('github', cls='w-5 h-5'),
+            cls=TextT.gray+'space-x-2'
+        ),
+        cls='p-3')
+
+################################
+### Navigation and Scrollspy ###
+################################
+
+scrollspy_links = (
+                A("Welcome",      href="#welcome-section"),
+                A("Products",     href="#products-section"),
+                A("Testimonials", href="#testimonials-section"), 
+                A("Team",         href="#team-section"),
+                A("Code Example", href="#code-section"))
+@rt
+def index():
+    def _Section(*c, **kwargs): return Section(*c, cls='space-y-3 my-48',**kwargs)
+    return Container(
+        NavBar(
+            *scrollspy_links,
+            brand=DivLAligned(H3("Scrollspy Demo!"),UkIcon('rocket',height=30,width=30)),
+            sticky=True, uk_scrollspy_nav=True,
+            scrollspy_cls=ScrollspyT.bold),
+        NavContainer(
+            *map(Li, scrollspy_links),
+            uk_scrollspy_nav=True,
+            sticky=True,
+            cls=(NavT.primary,'pt-20 px-5 pr-10')),
+        Container(
+            # Notice the ID of each section corresponds to the `scrollspy_links` dictionary
+            # So in scollspy `NavContainer` the `href` of each `Li` is the ID of the section
+            DivCentered(
+                H1("Welcome to the Store!"), 
+                Subtitle("Explore our products and enjoy dynamic code examples."), 
+                id="welcome-section"),
+            _Section(H2("Products"),
+                     Grid(*[ProductCard(p,img_id=i) for i,p in enumerate(products)], cols_lg=2),                   
+                     id="products-section"),
+            _Section(H2("Testimonials"), 
+                     Slider(*[TestimonialCard(t,img_id=i) for i,t in enumerate(testimonials)]),       
+                     id="testimonials-section"),
+            _Section(H2("Our Team"), 
+                     Grid(*[TeamCard(m,img_id=i) for i,m in enumerate(team)], cols_lg=2, cols_max=3),                          
+                     id="team-section"),
+            _Section(H2("Code Example"), 
+                     CodeBlock(code_example, lang="python"),                             
+                     id="code-section")), 
+            cls=(ContainerT.xl,'uk-container-expand'))
+
+serve()

MonsterUI/docs/examples/tasks.py

@@ -0,0 +1,118 @@
+"""FrankenUI Tasks Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+import json
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+def LAlignedCheckTxt(txt): return DivLAligned(UkIcon(icon='check'), P(txt, cls=TextPresets.muted_sm))
+
+with open('data_/status_list.json', 'r') as f: data     = json.load(f)
+with open('data_/statuses.json',    'r') as f: statuses = json.load(f)
+
+def _create_tbl_data(d):
+    return {'Done': d['selected'], 'Task': d['id'], 'Title': d['title'],
+            'Status'  : d['status'], 'Priority': d['priority'] }
+
+data = [_create_tbl_data(d)  for d in data]
+page_size = 15
+current_page = 0
+paginated_data = data[current_page*page_size:(current_page+1)*page_size]
+
+priority_dd = [{'priority': "low", 'count': 36 }, {'priority': "medium", 'count': 33 }, {'priority': "high", 'count': 31 }]
+
+status_dd = [{'status': "backlog", 'count': 21 },{'status': "todo", 'count': 21 },{'status': "progress", 'count': 20 },{'status': "done",'count': 19 },{'status': "cancelled", 'count': 19 }]
+
+def create_hotkey_li(hotkey): return NavCloseLi(A(DivFullySpaced(hotkey[0], Span(hotkey[1], cls=TextPresets.muted_sm))))
+
+hotkeys_a = (('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team',''))
+hotkeys_b = (('Logout',''), )
+
+avatar_opts = DropDownNavContainer(
+    NavHeaderLi(P('sveltecult'),NavSubtitle('[email protected]')),
+    NavDividerLi(),
+    *map(create_hotkey_li, hotkeys_a),
+    NavDividerLi(),
+    *map(create_hotkey_li, hotkeys_b),)
+
+def CreateTaskModal():
+    return Modal(
+        Div(cls='p-6')(
+            ModalTitle('Create Task'),
+            P('Fill out the information below to create a new task', cls=TextPresets.muted_sm),
+            Br(),
+            Form(cls='space-y-6')(
+                Grid(Div(Select(*map(Option,('Documentation', 'Bug', 'Feature')), label='Task Type', id='task_type')),
+                     Div(Select(*map(Option,('In Progress', 'Backlog', 'Todo', 'Cancelled', 'Done')), label='Status', id='task_status')),
+                     Div(Select(*map(Option, ('Low', 'Medium', 'High')), label='Priority', id='task_priority'))),
+                TextArea(label='Title', placeholder='Please describe the task that needs to be completed'),
+                DivRAligned(
+                    ModalCloseButton('Cancel', cls=ButtonT.ghost),
+                    ModalCloseButton('Submit', cls=ButtonT.primary),
+                    cls='space-x-5'))),
+        id='TaskForm')
+
+page_heading = DivFullySpaced(cls='space-y-2')(
+            Div(cls='space-y-2')(
+                H2('Welcome back!'),P("Here's a list of your tasks for this month!", cls=TextPresets.muted_sm)),
+            Div(DiceBearAvatar("sveltcult",8,8),avatar_opts))
+
+table_controls =(Input(cls='w-[250px]',placeholder='Filter task'),
+     Button("Status"),
+     DropDownNavContainer(map(NavCloseLi,[A(DivFullySpaced(P(a['status']), P(a['count'])),cls='capitalize') for a in status_dd])), 
+     Button("Priority"),
+     DropDownNavContainer(map(NavCloseLi,[A(DivFullySpaced(LAlignedCheckTxt(a['priority']), a['count']),cls='capitalize') for a in priority_dd])),
+     Button("View"),
+     DropDownNavContainer(map(NavCloseLi,[A(LAlignedCheckTxt(o)) for o in ['Title','Status','Priority']])),
+     Button('Create Task',cls=(ButtonT.primary, TextPresets.bold_sm), data_uk_toggle="target: #TaskForm"))
+
+def task_dropdown():
+    return Div(Button(UkIcon('ellipsis')),
+               DropDownNavContainer(
+                   map(NavCloseLi,[
+                       *map(A,('Edit', 'Make a copy', 'Favorite')),
+                        A(DivFullySpaced(*[P(o, cls=TextPresets.muted_sm) for o in ('Delete', '⌘⌫')]))])))
+def header_render(col):
+    match col:
+        case "Done":    return Th(CheckboxX(), shrink=True)
+        case 'Actions': return Th("",          shrink=True)
+        case _:         return Th(col,         expand=True)
+
+def cell_render(col, val):
+    def _Td(*args,cls='', **kwargs): return Td(*args, cls=f'p-2 {cls}',**kwargs)
+    match col:
+        case "Done": return _Td(shrink=True)(CheckboxX(selected=val))
+        case "Task":  return _Td(val, cls='uk-visible@s')  # Hide on small screens
+        case "Title": return _Td(val, cls='font-medium', expand=True)
+        case "Status" | "Priority": return _Td(cls='uk-visible@m uk-text-nowrap capitalize')(Span(val))
+        case "Actions": return _Td(task_dropdown(), shrink=True)
+        case _: raise ValueError(f"Unknown column: {col}")
+
+task_columns = ["Done", 'Task', 'Title', 'Status', 'Priority', 'Actions']
+
+tasks_table = Div(cls='mt-4')(
+    TableFromDicts(
+        header_data=task_columns,
+        body_data=paginated_data,
+        body_cell_render=cell_render,
+        header_cell_render=header_render,
+        sortable=True,
+        cls=(TableT.responsive, TableT.sm, TableT.divider)))
+
+
+def footer():
+    total_pages = (len(data) + page_size - 1) // page_size
+    return DivFullySpaced(
+        Div('1 of 100 row(s) selected.', cls=TextPresets.muted_sm),
+        DivLAligned(
+            DivCentered(f'Page {current_page + 1} of {total_pages}', cls=TextT.sm),
+            DivLAligned(*[UkIconLink(icon=i,  button=True) for i in ('chevrons-left', 'chevron-left', 'chevron-right', 'chevrons-right')])))
+
+tasks_ui = Div(DivFullySpaced(DivLAligned(table_controls), cls='mt-8'), tasks_table, footer())
+
+@rt
+def index(): return Container(page_heading, tasks_ui, CreateTaskModal())
+
+serve()

MonsterUI/docs/examples/ticket.py

@@ -0,0 +1,95 @@
+"""MonsterUI Help Desk Example - Professional Dashboard with DaisyUI components"""
+from fasthtml.common import *
+from monsterui.all import *
+from datetime import datetime
+
+app, rt = fast_app(hdrs=Theme.blue.headers(daisy=True))
+
+def TicketSteps(step):
+    return Steps(
+        LiStep("Submitted", data_content="📝",
+               cls=StepT.success if step > 0 else StepT.primary if step == 0 else StepT.neutral),
+        LiStep("In Review", data_content="🔎",
+               cls=StepT.success if step > 1 else StepT.primary if step == 1 else StepT.neutral),
+        LiStep("Processing", data_content="⚙️",
+               cls=StepT.success if step > 2 else StepT.primary if step == 2 else StepT.neutral),
+        LiStep("Resolved", data_content="✅",
+               cls=StepT.success if step > 3 else StepT.primary if step == 3 else StepT.neutral),
+        cls="w-full")
+
+def StatusBadge(status):
+    styles = {'high': AlertT.error, 'medium': AlertT.warning,'low': AlertT.info}
+    alert_type = styles.get(status, AlertT.info)
+    return Alert(f"{status.title()} Priority", cls=(alert_type,"w-32 shadow-sm"))
+
+def TicketCard(id, title, description, status, step, department):
+    return Card(
+        CardHeader(
+            DivFullySpaced(
+                Div(H3(f"#{id}", cls=TextT.muted), 
+                    H4(title), 
+                    cls='space-y-2'),
+                StatusBadge(status))),
+        CardBody(
+            P(description, cls=(TextT.muted, "mb-6")),
+            DividerSplit(cls="my-6"),
+            TicketSteps(step),
+            DividerSplit(cls="my-6"), 
+            DivFullySpaced(
+                Div(Strong("Department"),
+                    P(department),
+                    cls=('space-y-3', TextPresets.muted_sm)),
+                Div(Strong("Last Updated"),
+                    P(Time(datetime.now().strftime('%b %d, %H:%M'))),
+                    cls=('space-y-3', TextPresets.muted_sm)),
+                Button("View Details", cls=ButtonT.primary),
+                cls='mt-6')),
+        cls=CardT.hover)
+
+def NewTicketModal():
+    return Modal(
+        ModalHeader(H3("Create New Support Ticket")),
+        ModalBody(
+            Alert(
+                DivLAligned(UkIcon("info"), Span("Please provide as much detail as possible to help us assist you quickly.")),
+                cls=(AlertT.info,"mb-4")),
+            Form(
+                Grid(LabelInput("Title", id="title", placeholder="Brief description of your issue"),
+                     LabelSelect(Options("IT Support", "HR", "Facilities", "Finance"), label="Department", id="department")),
+                LabelSelect(Options("Low", "Medium", "High"), label="Priority Level",  id="priority"),
+                LabelTextArea("Description", id="description", placeholder="Please provide detailed information about your issue"),
+                DivRAligned(
+                    Button("Cancel", cls=ButtonT.ghost, data_uk_toggle="target: #new-ticket"),
+                    Button(Loading(cls=LoadingT.spinner), "Submit Ticket", cls=ButtonT.primary, data_uk_toggle="target: #success-toast; target: #new-ticket")),
+                cls='space-y-8')),
+            id="new-ticket")
+
+@rt
+def index():
+    tickets = [
+        {'id': "TK-1001", 'title': "Cloud Storage Access Error", 
+         'description': "Unable to access cloud storage with persistent authorization errors. Multiple users affected across marketing department.",
+         'status': 'high', 'step': 2, 'department': 'IT Support'},
+        {'id': "TK-1002", 'title': "Email Integration Issue", 
+         'description': "Exchange server not syncing with mobile devices. Affecting external client communications.",
+         'status': 'medium', 'step': 1, 'department': 'IT Support'},
+        {'id': "TK-1003", 'title': "Office Equipment Setup", 
+         'description': "New department printer needs configuration and network integration. Required for upcoming client presentation.",
+         'status': 'low', 'step': 0, 'department': 'Facilities'}
+    ]
+
+    return Title("Help Desk Dashboard"), Container(
+        Section(
+            DivFullySpaced(
+                H2("Active Tickets"),
+                Button(UkIcon("plus-circle", cls="mr-2"), "New Ticket", cls=ButtonT.primary, data_uk_toggle="target: #new-ticket"),
+                cls='mb-8'),
+            Grid(*[TicketCard(**ticket) for ticket in tickets], cols=1),
+            cls="my-6"),
+        NewTicketModal(),
+        Toast(DivLAligned(UkIcon('check-circle', cls='mr-2'), "Ticket submitted successfully! Our team will review it shortly."), id="success-toast", alert_cls=AlertT.success, cls=(ToastHT.end, ToastVT.bottom)),
+        Loading(htmx_indicator=True, type=LoadingT.dots, cls="fixed top-0 right-0 m-4"),
+        cls="mx-auto max-w-7xl"
+    )   
+
+serve()

MonsterUI/docs/getting_started/GettingStarted.md

@@ -0,0 +1,98 @@
+# MonsterUI
+
+MonsterUI is a UI framework for FastHTML for building beautiful web interfaces with minimal code. It combines the simplicity of Python with the power of Tailwind. Perfect for data scientists, ML engineers, and developers who want to quickly turn their Python code into polished web apps without the complexity of traditional UI frameworks. Follows semantic HTML patterns when possible.
+
+MonsterUI adds the following  Tailwind-based libraries [Franken UI](https://franken-ui.dev/) and [DaisyUI](https://daisyui.com/) to FastHTML, as well as Python's [Mistletoe](https://github.com/miyuchina/mistletoe) for Markdown, [HighlightJS](https://highlightjs.org/) for code highlighting, and [Katex](https://katex.org/) for latex support.
+
+# Getting Started
+
+## Installation
+
+To install this library, uses
+
+`pip install MonsterUI`
+
+## Getting Started
+
+### TLDR
+
+Run `python file.py` on this to start:
+
+``` python
+from fasthtml.common import *
+from monsterui.all import *
+
+# Choose a theme color (blue, green, red, etc)
+hdrs = Theme.blue.headers()
+
+# Create your app with the theme
+app, rt = fast_app(hdrs=hdrs)
+
+@rt
+def index():
+    socials = (('github','https://github.com/AnswerDotAI/MonsterUI'),
+               ('twitter','https://twitter.com/isaac_flath/'),
+               ('linkedin','https://www.linkedin.com/in/isaacflath/'))
+    return Titled("Your First App",
+        Card(
+            H1("Welcome!"),
+            P("Your first MonsterUI app", cls=TextPresets.muted_sm),
+            P("I'm excited to see what you build with MonsterUI!"),
+            footer=DivLAligned(*[UkIconLink(icon,href=url) for icon,url in socials])))
+
+serve()
+```
+
+## LLM context files
+
+Using LLMs for development is a best practice way to get started and
+explore. While LLMs cannot code for you, they can be helpful assistants.
+You must check, refactor, test, and vet any code any LLM generates for
+you - but they are helpful productivity tools. Take a look inside the
+`llms.txt` file to see links to particularly useful context files!
+
+- [llms.txt](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/llms.txt): Links to what is included
+- [llms-ctx.txt](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/llms-ctx.txt): MonsterUI Documentation Pages
+- [API list](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/apilist.txt): API list for MonsterUI (included in llms-ctx.txt)
+- [llms-ctx-full.txt](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/llms-ctx-full.txt): Full context that includes all api reference pages as markdown
+
+In addition you can add `/md` (for markdown) to a url to get a markdown representation and `/rmd` for rendered markdown representation (nice for looking to see what would be put into context.
+
+### Step by Step
+
+To get started, check out:
+
+1.  Start by importing the modules as follows:
+
+``` python
+from fasthtml.common import *
+from monsterui.all import *
+```
+
+2.  Instantiate the app with the MonsterUI headers
+
+``` python
+app = FastHTML(hdrs=Theme.blue.headers())
+
+# Alternatively, using the fast_app method
+app, rt = fast_app(hdrs=Theme.slate.headers())
+```
+
+> *The color option can be any of the theme options available out of the
+> box*
+
+> `katex` and `highlightjs` are not included by default. To include them set `katex=True` or `highlightjs=True` when calling `.headers`. (i.e. `Theme.slate.headers(katex=True)`)*
+
+From here, you can explore the API Reference & examples to see how to
+implement the components. You can also check out these demo videos to as
+a quick start guide:
+
+- MonsterUI [documentation page and Tutorial
+  app](https://monsterui.answer.ai/tutorial_app)
+- Isaac & Hamel : [Building his website’s team
+  page](https://youtu.be/22Jn46-mmM0)
+- Isaac & Audrey : [Building a blog](https://youtu.be/gVWAsywxLXE)
+- Isaac : [Building a blog](https://youtu.be/22NJgfAqgko)
+
+More resources and improvements to the documentation will be added here
+soon!

MonsterUI/docs/getting_started/StylingRulesOfThumb.py

@@ -0,0 +1,110 @@
+from fasthtml.common import *
+from monsterui.all import *
+from utils import create_flippable_card, fn2code_string
+
+def prerequisites():
+    return Section(
+        H2("Prerequisites"),
+        P("""The MonsterUI library automatically handles a lot of styling for you, but it assumes you structure your page with HTML.
+          If you aren't familiar with the basics of HTML, check out the """, 
+          A("W3 Schools HTML references", href="https://www.w3schools.com/html", cls=AT.muted), 
+          " to learn more about the basics of HTML."),
+        cls='my-4 py-4'
+    )
+
+def next_steps():
+    return Section(
+        H2("Next Steps"),
+        P("""Once you have a good grasp of HTML, you can reference the following resources to continue to expand your capabilities.  Instead of trying to learn all of these, focus on the ones that are relevant to something specific you want to do."""),
+        List(map(Li, [
+          A("Improving Aesthetics with Spacing", href="https://frankenui.fasthtml.io/docs/getting_started/SpacingTutorial", cls=AT.muted), 
+          A("Manipulating Page and Element Layout", href="https://frankenui.fasthtml.io/docs/getting_started/LayoutTutorial", cls=AT.muted), 
+          A("FlexBox Froggy", href="https://flexboxfroggy.com/", cls=AT.muted),
+          A("Accessibility", href="https://frankenui.fasthtml.io/docs/getting_started/Accessibility", cls=AT.muted),
+        ]), cls=ListT.bullet),
+        cls='my-4 py-4'
+    )
+
+def page():
+    return Article(
+        ArticleTitle("Styling Rules of Thumb"),
+        ArticleMeta("A guide to making a pretty good looking website in a hurry"),
+        prerequisites(),
+        next_steps(),
+        # button_section(),
+        # typography_section(),
+    )
+
+
+def accessibility_section():
+    # TODO: Alt tags
+    # TODO: Aria labels
+    # TODO: High contrast
+    # TODO: Prefers reduced motion
+    pass 
+
+def further_reading():
+    # TODO: Tailwind CSS
+    # TODO: FlexBox Froggy
+    # TODO: Accessibility
+    pass 
+
+def button_section():
+   def _ex_buttons():
+       return Form(
+           Grid(LabelInput("Email"),
+                LabelInput("Name"), 
+                cols=2), 
+           Grid(Button("Submit Information", cls=ButtonT.primary),
+                Button("Delete Information", cls=ButtonT.destructive),
+                Button("Cancel"),
+                cols=3)
+       )
+
+   return Section(
+        H2("Pick button styles based on desired behavior"),
+        Blockquote("The aethetic of a button should match the desired behavior",cls='uk-blockquote mb-8'),
+        Strong("What to do:"),
+        List(
+            Li("Use ButtonT.primary for the most important actions (ie add to card, checkout, etc.)"),
+            Li("Use ButtonT.secondary for actions that are important but not the primary action (ie save, etc.)"),
+            Li("Use ButtonT.destructive for destructive actions"),
+            Li("Use default styling for UX actions (ie go cancel, close etc.)"),
+            cls=ListT.bullet
+        ),
+        create_flippable_card(*fn2code_string(_ex_buttons)),
+        cls='my-4 py-4'
+    )
+
+def typography_section():
+    def _ex_typography():
+        return Div(cls='space-y-5')(
+            Div(cls='space-y-3')(
+                H1("The main heading"),
+                Blockquote("A section describing easy ways to make generally good looking text"),
+            ),
+            Div(cls='space-y-3')(
+                H2("My First Section"),
+                P("A short description of what's in this section", cls=TextPresets.muted_sm),
+                P("""Now I can write the main content of the page with a normal P tag.  
+                We can use this for longer text like paragraphs.
+                It's ideal because this text is highly readable.
+                I can write longer sentences and paragraphs without is being really hard to read with highly styled text.
+                Often if you aren't careful with styling you can make the text hard to read, especially if you aren't thinking about light vs dark backgrounds.
+                """))
+        )
+
+
+    return Section(
+        H2("Use consistent typography"),
+        Blockquote("Consistency is key to a polished user experience",cls='uk-blockquote mb-8'),
+        Strong("What to do:"),
+        List(
+            Li("Use H1-4 for headings"),
+            Li("Use P with cls=TextPresets.muted_sm subheadings like "),
+            Li("Use P for most body text"),
+            cls=ListT.bullet),
+        create_flippable_card(*fn2code_string(_ex_typography)),
+        cls='my-4 py-4'
+    )
+

MonsterUI/docs/getting_started/app_product_gallery.py

@@ -0,0 +1,96 @@
+from fasthtml.common import *
+# MonsterUI shadows fasthtml components with the same name
+from monsterui.all import *
+# If you don't want shadowing behavior, you use import monsterui.core as ... style instead
+
+# Get frankenui and tailwind headers via CDN using Theme.blue.headers()
+hdrs = Theme.blue.headers()
+
+# fast_app is shadowed by MonsterUI to make it default to no Pico, and add body classes
+# needed for frankenui theme styling
+app, rt = fast_app(hdrs=hdrs)
+
+#  Examples Product Data to render in the gallery and detail pages   
+products = [
+    {"name": "Laptop", "price": "$999", "img": "https://picsum.photos/400/100?random=1"},
+    {"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/400/100?random=2"},
+    {"name": "Headphones", "price": "$199", "img": "https://picsum.photos/400/100?random=3"},
+    {"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/400/100?random=4"},
+    {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/400/100?random=5"},
+    {"name": "Camera", "price": "$799", "img": "https://picsum.photos/400/100?random=6"},]
+
+def ProductCard(p):
+    # Card does lots of boilerplate classes so you can just pass in the content
+    return Card( 
+        # width:100% makes the image take the full width so we are guarenteed that we won't
+        # have the image cut off or not large enough. Because all our images are a consistent
+        # size we do not need to worry about stretching or skewing the image, this is ideal.
+        # If you have images of different sizes, you will need to use object-fit:cover and/or
+        # height to either strech, shrink, or crop the image. It is much better to adjust your
+        # images to be a consistent size upfront so you don't have to handle edge cases of
+        # different images skeweing/stretching differently.
+        Img(src=p["img"], alt=p["name"], style="width:100%"),
+        # All components can take a cls argument to add additional styling - `mt-2` adds margin
+        # to the top (see spacing tutorial for details on spacing).
+        # 
+        # Often adding space makes a site look more put together - usually the 2 - 5 range is a
+        # good choice
+        H4(p["name"], cls="mt-2"), 
+        # There are helpful Enums, such as TextPresetsT, ButtonT, ContainerT, etc that allow for easy
+        # discoverability of class options.
+        # bold_sm is helpful for things that you want to look like regular text, but stand out
+        # visually for emphasis.
+        P(p["price"], cls=TextPresets.bold_sm), 
+        # ButtonT.primary is useful for actions you really want the user to take (like adding
+        # something to the card) - these stand out visually. For dangerous actions (like
+        # deleting something) you generally would want to use ButtonT.destructive. For UX actions
+        # that aren't a goal of the page (like cancelling something that hasn't been submitted)
+        # you generally want the default styling.
+        Button("Click me!", cls=(ButtonT.primary, "mt-2"),  
+               # HTMX can be used as normal on any component
+               hx_get=product_detail.to(product_name=p['name']),
+               hx_push_url='true',
+               hx_target='body'))
+
+@rt
+def index():
+    # Titled using a H1 title, sets the page title, and wraps contents in Main(Container(...)) using
+    # frankenui styles. Generally you will want to use Titled for all of your pages
+    return Titled("Example Store Front!",
+        Grid(*[ProductCard(p) for p in products], cols_lg=3))
+
+example_product_description = """\n
+This is a sample detailed description of the {product_name}.  You can see when clicking on the card
+from the gallery you can:
+
++ Have a detailed description of the product on the page
++ Have an order form to fill out and submit
++ Anything else you want!
+"""
+
+@rt
+def product_detail(product_name:str):
+    return Titled("Product Detail",
+        # Grid lays out its children in a responsive grid
+        Grid( 
+            Div(
+                H1(product_name),
+                # render_md is a helper that renders markdown into HTML using frankenui styles.
+                render_md(example_product_description.format(product_name=product_name))),
+            Div(
+                H3("Order Form"),
+                # Form automatically has a class of 'space-y-3' for a margin between each child.
+                Form( 
+                    # LabelInput is a convience wrapper for a label and input that links them.
+                    LabelInput("Name", id='name'), 
+                    LabelInput("Email", id='email'),
+                    LabelInput("Quantity", id='quantity'),
+                    # ButtonT.primary because this is the primary action of the page!
+                    Button("Submit", cls=ButtonT.primary))
+                    
+        ),
+        # Grid has defaults and args for cols at different breakpoints, but you can pass in
+        # your own to customize responsiveness.
+        cols_lg=2)) 
+
+serve()

MonsterUI/docs/guides/Layout.ipynb

@@ -0,0 +1,591 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "09a2b6fa",
+   "metadata": {},
+   "source": [
+    "# MonterUI Page Layout Guide \n",
+    "\n",
+    "This guide will discuss 3 tools for laying out your app pages, Grid, Flexbox, and Columns.  This page will discuss the strengths and when to use each individually, and then a section for how to combine them for more complex layouts at the end.\n",
+    "\n",
+    "> Note:  This guide is designed to get you started building layouts quickly, not to teach you all the details needed to build every possible custom layout with pixel-perfect control.  To get more detailed and lower-level control, explore the tailwind docs.\n",
+    "\n",
+    "\n",
+    "This guide is for creating flexible layouts you envision, but does not discuss responsiveness to make different layouts that are both mobile and desktop friendly.  Stay tunes for a responsiveness guide that will help with that!"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3bdf365b",
+   "metadata": {},
+   "source": [
+    "# Grid\n",
+    "\n",
+    "Grids are best for regular predictable layouts with lots of the same shape of things that may need to change a lot for different screen sizes.  I think the best way to see what it can do is to see a bunch of examples, so here they are!"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "7d1bc6e0",
+   "metadata": {},
+   "source": [
+    "## Minimal Image Cards\n",
+    "\n",
+    "This is a minimal example of a grid that just shows image and text.  This is the foundation for many more complex layouts so make sure to understand what's going on here first before moving on!\n",
+    "\n",
+    "A grid lays things out in a...grid.  As you can see, we have evenly sized cards by default."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "8b6ef3ea",
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [],
+   "source": [
+    "def picsum_img(seed): return Img(src=f'https://picsum.photos/300/200?random={seed}')\n",
+    "   \n",
+    "Grid(*[Card(picsum_img(i),P(f\"Image {i}\")) for i in range(6)])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c35376e2",
+   "metadata": {},
+   "source": [
+    "## Dashboard Example"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a7c9149c",
+   "metadata": {},
+   "source": [
+    "However, they don't have to be evenly sized!  By providing `row-span-{int}` and `col-span-{int}` we can control how many rows or columns specific grid elements take up.  By doing this, we can create a grid that has lots of different shapes and types of elements.\n",
+    "\n",
+    "Let's look at a dashboard layout at an examples of this."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 54,
+   "id": "5abd8bd1",
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe src=\"http://localhost:8000/_WvNL2TY3R0K8wGkaRFZ6GQ\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
+       "        let frame = this;\n",
+       "        window.addEventListener('message', function(e) {\n",
+       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
+       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
+       "        }, false);\n",
+       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "execution_count": 54,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "def StatCard(title, value, color='primary'):\n",
+    "    \"A card with a statistics.  Since there is no row/col span class it will take up 1 slot\"\n",
+    "    return Card(P(title, cls=TextPresets.muted_sm), H3(value, cls=f'text-{color}'),)\n",
+    "\n",
+    "stats = [StatCard(*data) for data in [\n",
+    "                (\"Total Users\", \"1,234\",   \"blue-600\"),\n",
+    "                (\"Active Now\",  \"342\",     \"green-600\"),\n",
+    "                (\"Revenue\",     \"$45,678\", \"purple-600\"),\n",
+    "                (\"Conversion\",  \"2.4%\",    \"amber-600\")]]\n",
+    "\n",
+    "def ChartCard(title): \n",
+    "    \"A card for a chart.  col-span-2 means it will take up 2 columns\"\n",
+    "    return Div(cls=\"col-span-2\")( \n",
+    "        Card(H3(title),Div(\"Chart Goes Here\", cls=\"h-64 uk-background-muted\")))\n",
+    "chart_cards = [ChartCard(title) for title in (\"Monthly Revenue\", \"User Growth\")]\n",
+    "\n",
+    "\n",
+    "sidebar = Form(\n",
+    "    H3(\"SideBar\"),\n",
+    "    LabelRange(\"Range For Filters\", min=0, max=100),\n",
+    "    LabelInput(\"A search Bar\"),\n",
+    "    LabelSelect(map(Option, [\"Product Line A\", \"Product Line B\", \"Product Line C\", \"Product Line D\"]),\n",
+    "                     label=\"Choose Product Line\"),\n",
+    "    LabelCheckboxX(\"Include Inactive Users\"),\n",
+    "    LabelCheckboxX(\"Include Users without order\"),\n",
+    "    LabelCheckboxX(\"Include Users without email\"),\n",
+    "    # This sidebar will take up 2 rows b/c of row-span-2\n",
+    "    cls='row-span-2 space-y-5'\n",
+    ")\n",
+    "\n",
+    "Container(Grid(sidebar, *stats, *chart_cards, cols=5))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "cc9bb132",
+   "metadata": {},
+   "source": [
+    "# Flexbox"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "1dcb8075",
+   "metadata": {},
+   "source": [
+    "Using Grid for the overall layout, and flex for the individual elements is a powerful pattern.  With `MonsterUI` you can do quite a bit without knowing anything about flexbox, which is what will be taught here.  \n",
+    "\n",
+    "However, flexbox is well worth learning about it in more detail.  You will run into situations where you need more flexbox knowledge than is covered here to build your vision.  Thankfully you can get that knowledge by playing a [fantastic tutorial game called FlexBox Froggy](https://flexboxfroggy.com/)!"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "d10557e5",
+   "metadata": {},
+   "source": [
+    "## Forms\n",
+    "\n",
+    "Often you want to stack things horizontally.  You can use the `DivHStacked` component to do this.\n",
+    "\n",
+    "`DivHStacked` is a helper function for flexbox and creates a div with these classes by default `cls=(FlexT.block, FlexT.row, FlexT.middle, 'space-x-4')`.  "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 71,
+   "id": "eaa39f3a",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe src=\"http://localhost:8000/__LtKiA4BQ_mTEOe1cbj0tg\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
+       "        let frame = this;\n",
+       "        window.addEventListener('message', function(e) {\n",
+       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
+       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
+       "        }, false);\n",
+       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "execution_count": 71,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "def InputGroup(label, placeholder='', button_text='Submit', cls=''):\n",
+    "    # Div H Stacked makes the label and input show up on the same row instead of putting the input on a newline\n",
+    "    return DivHStacked(\n",
+    "        FormLabel(label, cls='whitespace-nowrap'),\n",
+    "        Input(placeholder=placeholder))\n",
+    "\n",
+    "Container(\n",
+    "    H3(\"Form with Input Groups\"),\n",
+    "    Form(cls='space-y-4')(\n",
+    "        InputGroup(\"Search Users\", \"Enter username...\"),\n",
+    "        InputGroup(\"Filter Tags\", \"Add tags...\", \"Add\"),\n",
+    "        InputGroup(\"Email List\", \"Enter email...\", \"Subscribe\"),\n",
+    "        Div(*(  Button(UkIcon(icon, cls='mr-2'), text) for icon, text in [(\"rocket\", \"Submit\"), (\"circle-x\", \"Cancel\")]), cls='space-x-4')))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c4afd0d0",
+   "metadata": {},
+   "source": [
+    "## Avatar "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9154ae8f",
+   "metadata": {},
+   "source": [
+    "You can use this same `DivHStacked` to align things like text next to images.  And you can use `DivVStacked` to stack things vertically to create design structures you like.  `DivVStacked` works by using `cls=(FlexT.block,FlexT.column,FlexT.middle)`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 170,
+   "id": "f782c6ca",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
+       "<span class=\"relative flex h-20 w-20 shrink-0 overflow-hidden rounded-full bg-accent\"><img alt=\"Avatar\" loading=\"lazy\" src=\"https://api.dicebear.com/8.x/lorelei/svg?seed=user\" class=\"aspect-square h-20 w-20\"></span>  <div class=\"uk-flex uk-flex-column uk-flex-middle \">\n",
+       "    <p class=\"uk-text-large \">John Doe</p>\n",
+       "    <p class=\"uk-text-muted \">[email protected]</p>\n",
+       "    <p class=\"uk-text-muted \">+1-123-456-7890</p>\n",
+       "  </div>\n",
+       "</div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((span((img((),{'alt': 'Avatar', 'loading': 'lazy', 'src': 'https://api.dicebear.com/8.x/lorelei/svg?seed=user', 'class': 'aspect-square h-20 w-20'}),),{'class': 'relative flex h-20 w-20 shrink-0 overflow-hidden rounded-full bg-accent'}), div((p(('John Doe',),{'class': 'uk-text-large '}), p(('[email protected]',),{'class': 'uk-text-muted '}), p(('+1-123-456-7890',),{'class': 'uk-text-muted '})),{'class': 'uk-flex uk-flex-column uk-flex-middle '})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'})"
+      ]
+     },
+     "execution_count": 170,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# DivHStacked makes the a single row so text is to on same line as avatar\n",
+    "DivHStacked(\n",
+    "    DiceBearAvatar(\"user\"), \n",
+    "    # DivVStacked stacks things vertically together and centers it with flex\n",
+    "    DivVStacked(\n",
+    "        P(\"John Doe\", cls=TextT.lg),\n",
+    "        P(\"[email protected]\", cls=TextT.muted), \n",
+    "        P(\"+1-123-456-7890\"), cls=TextT.muted))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "6234fdf8",
+   "metadata": {},
+   "source": [
+    "## Pricing Card\n",
+    "\n",
+    "These can be combined with icons and other styling to create larger components like a pricing card."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 165,
+   "id": "f1846dc1",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div class=\"uk-flex uk-flex-column uk-flex-middle space-y-4\">\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <div class=\"uk-flex uk-flex-column uk-flex-middle space-y-1\">\n",
+       "        <h2 class=\"uk-h2 \">Pro Plan</h2>\n",
+       "        <h3 class=\"uk-h3 text-primary\">$99</h3>\n",
+       "        <p class=\"uk-text-muted \">per month</p>\n",
+       "      </div>\n",
+       "      <ul class=\"space-y-4\">\n",
+       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
+       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Unlimited users</li>\n",
+       "        </div>\n",
+       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
+       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>24/7 priority support</li>\n",
+       "        </div>\n",
+       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
+       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Custom branding options</li>\n",
+       "        </div>\n",
+       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
+       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Advanced analytics dashboard</li>\n",
+       "        </div>\n",
+       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
+       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Full API access</li>\n",
+       "        </div>\n",
+       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
+       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Priority request queue</li>\n",
+       "        </div>\n",
+       "      </ul>\n",
+       "<button type=\"submit\" class=\"uk-btn uk-btn-primary w-full\">Subscribe Now</button>    </div>\n",
+       "  </div>\n",
+       "</div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((div((div((div((h2(('Pro Plan',),{'class': 'uk-h2 '}), h3(('$99',),{'class': 'uk-h3 text-primary'}), p(('per month',),{'class': 'uk-text-muted '})),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-1'}), ul((div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Unlimited users',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('24/7 priority support',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Custom branding options',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Advanced analytics dashboard',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Full API access',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Priority request queue',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'})),{'class': 'space-y-4'}), button(('Subscribe Now',),{'type': 'submit', 'class': 'uk-btn uk-btn-primary w-full'})),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}),),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-4'})"
+      ]
+     },
+     "execution_count": 165,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "features = [\n",
+    "    \"Unlimited users\",\n",
+    "    \"24/7 priority support\",\n",
+    "    \"Custom branding options\", \n",
+    "    \"Advanced analytics dashboard\",\n",
+    "    \"Full API access\",\n",
+    "    \"Priority request queue\"\n",
+    "]\n",
+    "\n",
+    "\n",
+    "def PricingCard(plan, price, features):\n",
+    "    \"Create a polished pricing card with consistent styling\"\n",
+    "    return Card(\n",
+    "        DivVStacked( # Center and veritcally stack the plan name and price\n",
+    "            H2(plan),\n",
+    "            H3(price, cls='text-primary'),\n",
+    "            P('per month',cls=TextT.muted),\n",
+    "            cls='space-y-1'),\n",
+    "        # DivHStacked makes green check and feature Li show up on same row instead of newline\n",
+    "        Ul(*[DivHStacked(UkIcon('check', cls='text-green-500 mr-2'), Li(feature)) for feature in features], \n",
+    "           cls='space-y-4'),\n",
+    "        Button(\"Subscribe Now\", cls=(ButtonT.primary, 'w-full')))\n",
+    "\n",
+    "DivVStacked(PricingCard(\"Pro Plan\", \"$99\", features))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "ddf9cf78",
+   "metadata": {},
+   "source": [
+    "## Footer\n",
+    "\n",
+    "Or you can combine things to make advanced footers that have titles, organized links, and icons!\n",
+    "\n",
+    "In this example we add another flex helper function, `DivFullySpaced`.  `DivFullySpaced` is a flex class that puts as much space between items as possible"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 176,
+   "id": "ee79e8cf",
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div class=\"uk-container bg-gray-50 py-12\">\n",
+       "  <div class=\"space-y-8\">\n",
+       "    <div class=\"uk-flex uk-flex-between uk-flex-middle w-full\">\n",
+       "      <h3 class=\"uk-h3 \">Company Name</h3>\n",
+       "      <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
+       "<uk-icon icon=\"twitter\" class=\"uk-text-lead\"></uk-icon><uk-icon icon=\"facebook\" class=\"uk-text-lead\"></uk-icon><uk-icon icon=\"github\" class=\"uk-text-lead\"></uk-icon><uk-icon icon=\"linkedin\" class=\"uk-text-lead\"></uk-icon>      </div>\n",
+       "    </div>\n",
+       "<hr class=\"my-4 h-[2px] w-full bg-secondary\">    <div class=\"uk-flex uk-flex-between uk-flex-middle w-full\">\n",
+       "      <div class=\"uk-flex uk-flex-column uk-flex-middle space-y-4\">\n",
+       "        <h4 class=\"uk-h4 \">Company</h4>\n",
+       "<a href=\"#about\" class=\"uk-text-muted\">About</a><a href=\"#blog\" class=\"uk-text-muted\">Blog</a><a href=\"#careers\" class=\"uk-text-muted\">Careers</a><a href=\"#press-kit\" class=\"uk-text-muted\">Press Kit</a>      </div>\n",
+       "      <div class=\"uk-flex uk-flex-column uk-flex-middle space-y-4\">\n",
+       "        <h4 class=\"uk-h4 \">Resources</h4>\n",
+       "<a href=\"#documentation\" class=\"uk-text-muted\">Documentation</a><a href=\"#help-center\" class=\"uk-text-muted\">Help Center</a><a href=\"#status\" class=\"uk-text-muted\">Status</a><a href=\"#contact-sales\" class=\"uk-text-muted\">Contact Sales</a>      </div>\n",
+       "      <div class=\"uk-flex uk-flex-column uk-flex-middle space-y-4\">\n",
+       "        <h4 class=\"uk-h4 \">Legal</h4>\n",
+       "<a href=\"#terms-of-service\" class=\"uk-text-muted\">Terms of Service</a><a href=\"#privacy-policy\" class=\"uk-text-muted\">Privacy Policy</a><a href=\"#cookie-settings\" class=\"uk-text-muted\">Cookie Settings</a><a href=\"#accessibility\" class=\"uk-text-muted\">Accessibility</a>      </div>\n",
+       "    </div>\n",
+       "<hr class=\"my-4 h-[2px] w-full bg-secondary\">    <p class=\"uk-text-small uk-text-lead\">© 2024 Company Name. All rights reserved.</p>\n",
+       "  </div>\n",
+       "</div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((div((div((h3(('Company Name',),{'class': 'uk-h3 '}), div((uk-icon((),{'icon': 'twitter', 'class': <TextT.lead: 'uk-text-lead'>}), uk-icon((),{'icon': 'facebook', 'class': <TextT.lead: 'uk-text-lead'>}), uk-icon((),{'icon': 'github', 'class': <TextT.lead: 'uk-text-lead'>}), uk-icon((),{'icon': 'linkedin', 'class': <TextT.lead: 'uk-text-lead'>})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'})),{'class': 'uk-flex uk-flex-between uk-flex-middle w-full'}), hr((),{'class': 'my-4 h-[2px] w-full bg-secondary'}), div((div((h4(('Company',),{'class': 'uk-h4 '}), a(('About',),{'href': '#about', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Blog',),{'href': '#blog', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Careers',),{'href': '#careers', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Press Kit',),{'href': '#press-kit', 'class': <TextT.muted: 'uk-text-muted'>})),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-4'}), div((h4(('Resources',),{'class': 'uk-h4 '}), a(('Documentation',),{'href': '#documentation', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Help Center',),{'href': '#help-center', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Status',),{'href': '#status', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Contact Sales',),{'href': '#contact-sales', 'class': <TextT.muted: 'uk-text-muted'>})),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-4'}), div((h4(('Legal',),{'class': 'uk-h4 '}), a(('Terms of Service',),{'href': '#terms-of-service', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Privacy Policy',),{'href': '#privacy-policy', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Cookie Settings',),{'href': '#cookie-settings', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Accessibility',),{'href': '#accessibility', 'class': <TextT.muted: 'uk-text-muted'>})),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-4'})),{'class': 'uk-flex uk-flex-between uk-flex-middle w-full'}), hr((),{'class': 'my-4 h-[2px] w-full bg-secondary'}), p(('© 2024 Company Name. All rights reserved.',),{'class': 'uk-text-small uk-text-lead'})),{'class': 'space-y-8'}),),{'class': 'uk-container bg-gray-50 py-12'})"
+      ]
+     },
+     "execution_count": 176,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "def FooterLinkGroup(title, links):\n",
+    "    # DivVStacked centers and makes title and each link stack vertically\n",
+    "    return DivVStacked(\n",
+    "        H4(title),\n",
+    "        *[A(text, href=f\"#{text.lower().replace(' ', '-')}\", cls=TextT.muted)  for text in links])\n",
+    "\n",
+    "company = [\"About\", \"Blog\", \"Careers\", \"Press Kit\"]\n",
+    "resource = [\"Documentation\", \"Help Center\", \"Status\", \"Contact Sales\"]\n",
+    "legal = [\"Terms of Service\", \"Privacy Policy\", \"Cookie Settings\", \"Accessibility\"]\n",
+    "\n",
+    "Container(cls='uk-background-muted py-12')(Div(\n",
+    "    # Company Name and social icons will be on the same row with as much sapce between as possible\n",
+    "    DivFullySpaced( \n",
+    "        H3(\"Company Name\"),\n",
+    "        # DivHStacked makes the icons be on the same row in a group\n",
+    "        DivHStacked(*[UkIcon(icon, cls=TextT.lead) for icon in \n",
+    "                      ['twitter', 'facebook', 'github', 'linkedin']])),\n",
+    "    DividerLine(),\n",
+    "    DivFullySpaced( # Each child will be spread out as much as possible based on number of children\n",
+    "        FooterLinkGroup(\"Company\",   company),\n",
+    "        FooterLinkGroup(\"Resources\", resource),\n",
+    "        FooterLinkGroup(\"Legal\",     legal)), \n",
+    "    DividerLine(),\n",
+    "    P(\"© 2024 Company Name. All rights reserved.\", cls=TextT.lead+TextT.sm),\n",
+    "    cls='space-y-8 p-8'))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "bb311899",
+   "metadata": {},
+   "source": [
+    "## Dashboard"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "1e29f9de",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def StatsCard(label, value, change):\n",
+    "    color = 'green' if change[0] == '+' else 'red'\n",
+    "    return Card(DivVStacked( # Stacks vertically and centers all elements\n",
+    "        P(label, cls=TextPresets.muted_sm),\n",
+    "        H3(value),\n",
+    "        P(f\"{change}% from last month\", cls=f\"text-{color}-600 text-sm\")))\n",
+    "    \n",
+    "def RecentActivity(user, action, time):\n",
+    "    return DivHStacked( # Makes Avatar and text be on same row\n",
+    "        DiceBearAvatar(user, h=8, w=8),\n",
+    "        P(f\"{user} {action}\", cls=\"flex-1\"),\n",
+    "        P(time, cls=TextPresets.muted_sm))\n",
+    "    \n",
+    "DivVStacked( # Centers the entire dashboard layout\n",
+    "    # Page header\n",
+    "    DivVStacked( # Stacks vertically and centers the title/subtitle\n",
+    "        H2(\"Welcome back, Isaac!\"),\n",
+    "        P(\"Here's what's happening with your projects today.\",cls=TextT.muted)),\n",
+    "\n",
+    "    # DivHStacked puts all the stats cards on the same row\n",
+    "    DivHStacked(*(StatsCard(label, value, change)\n",
+    "        for label, value, change in [\n",
+    "            (\"Total Projects\", \"12\", \"+2.5\"),\n",
+    "            (\"Hours Logged\", \"164\", \"+12.3\"),\n",
+    "            (\"Tasks Complete\", \"64%\", \"-4.1\"),\n",
+    "            (\"Team Velocity\", \"23\", \"+8.4\")]\n",
+    "    )),\n",
+    "\n",
+    "    # Recent activity\n",
+    "    Card(*(RecentActivity(user, action, time) \n",
+    "        for user, action, time in [\n",
+    "            (\"Sarah Chen\", \"completed Project Alpha deployment\", \"2h ago\"),\n",
+    "            (\"James Wilson\", \"commented on Project Beta\", \"4h ago\"),\n",
+    "            (\"Maria Garcia\", \"uploaded new design files\", \"6h ago\"),\n",
+    "            (\"Alex Kumar\", \"started Sprint Planning\", \"8h ago\")]),\n",
+    "        header=H3(\"Recent Activity\"),\n",
+    "    ),\n",
+    "    cls=\"space-y-6\"\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "edd8dc07",
+   "metadata": {},
+   "source": [
+    "## Columns\n",
+    "\n",
+    "Columns are a great for sections that have a lot of text."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 181,
+   "id": "6dfbd634",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div class=\"uk-container mt-5 uk-container-xlarge\">\n",
+       "  <h1 class=\"uk-h1 text-center mb-8\">Lorem Ipsum</h1>\n",
+       "  <div class=\"columns-2 gap-12\">\n",
+       "    <p class=\"uk-paragraph \">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do \n",
+       "        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \n",
+       "        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \n",
+       "        ex ea commodo consequat.</p>\n",
+       "    <div class=\"uk-flex uk-flex-column uk-flex-middle uk-flex-center mt-8\">\n",
+       "      <p class=\"uk-text-large uk-text-bold uk-text-center uk-text-italic text-primary\">Duis aute irure dolor in reprehenderit in voluptate velit esse \n",
+       "            cillum dolore eu fugiat nulla pariatur.</p>\n",
+       "    </div>\n",
+       "    <p class=\"uk-paragraph \">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui \n",
+       "        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde \n",
+       "        omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>\n",
+       "    <p class=\"uk-paragraph \">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit \n",
+       "        aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem \n",
+       "        sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.</p>\n",
+       "  </div>\n",
+       "</div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((h1(('Lorem Ipsum',),{'class': 'uk-h1 text-center mb-8'}), div((p(('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do \\n        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \\n        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \\n        ex ea commodo consequat.',),{'class': 'uk-paragraph '}), div((p(('Duis aute irure dolor in reprehenderit in voluptate velit esse \\n            cillum dolore eu fugiat nulla pariatur.',),{'class': 'uk-text-large uk-text-bold uk-text-center uk-text-italic text-primary'}),),{'class': 'uk-flex uk-flex-column uk-flex-middle uk-flex-center mt-8'}), p(('Excepteur sint occaecat cupidatat non proident, sunt in culpa qui \\n        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde \\n        omnis iste natus error sit voluptatem accusantium doloremque laudantium.',),{'class': 'uk-paragraph '}), p(('Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit \\n        aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem \\n        sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.',),{'class': 'uk-paragraph '})),{'class': 'columns-2 gap-12'})),{'class': 'uk-container mt-5 uk-container-xlarge'})"
+      ]
+     },
+     "execution_count": 181,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Container(\n",
+    "    H1(\"Lorem Ipsum\", cls=\"text-center mb-8\"),\n",
+    "\n",
+    "    # Use 2 columns for the main content\n",
+    "    Div(cls=\"columns-2 gap-12\")(\n",
+    "        P(\"\"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do \n",
+    "        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \n",
+    "        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \n",
+    "        ex ea commodo consequat.\"\"\"),\n",
+    "\n",
+    "        DivCentered(cls='mt-8')(\n",
+    "            P(\"\"\"Duis aute irure dolor in reprehenderit in voluptate velit esse \n",
+    "            cillum dolore eu fugiat nulla pariatur.\"\"\", \n",
+    "                   cls=(TextT.lg, TextT.bold, TextT.center, TextT.italic, \"text-primary\"))),\n",
+    "\n",
+    "        P(\"\"\"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui \n",
+    "        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde \n",
+    "        omnis iste natus error sit voluptatem accusantium doloremque laudantium.\"\"\"),\n",
+    "\n",
+    "        P(\"\"\"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit \n",
+    "        aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem \n",
+    "        sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.\"\"\")))"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

MonsterUI/docs/guides/Spacing.ipynb

@@ -0,0 +1,482 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "ce15239f",
+   "metadata": {},
+   "source": [
+    "# Padding & Margin & Spacing, Oh my! (MonsterUI Spacing Guide)\n",
+    "\n",
+    "This guide will cover some essentials about how to properly space apps and what the differences are between:\n",
+    "\n",
+    "- Padding\n",
+    "- Margin\n",
+    "- Spacing\n",
+    "- Gap\n",
+    "\n",
+    "Manipulating the space between components can make a huge difference to the percieved quality of the page.  Being able to tweak the spacing can have a big impact!\n",
+    "\n",
+    "> Tip: I find it works best to get everything on the page without adjusting spacing much, and adjusting spacing at the end. \n",
+    "\n",
+    "## Abreviations:\n",
+    "\n",
+    "First a few abbreviations that are helpful to know with tailwind (and a convention we follow in `MonsterUI`).\n",
+    "\n",
+    "- `t`, `b`, `l`, `r` = top, bottom, left, right\n",
+    "- `p`, `m` = padding, margin\n",
+    "- `x`, `y` = horizontal, vertical\n",
+    "\n",
+    "That means:\n",
+    "\n",
+    "- `mt` means margin on top of the element\n",
+    "- `px` means padding on the x axis (both left and right)\n",
+    "- `space-y` means apply spacing on the y axis (both top and bottom)\n",
+    "\n",
+    "## Padding vs Margin\n",
+    "\n",
+    "Margin applies space to the left of the component, and padding applies space on the left inside of the component. \n",
+    "\n",
+    "Please reference the example with cards below:\n",
+    "\n",
+    "- `ml-20` applies space to the left of the card (outside the card)\n",
+    "- `pl-20` applies space on the left inside of the card (inside the card)\n",
+    "\n",
+    "This means that if you want to move the whole thing but keep the actual container unchanged, use margin.  If you want to change the container by adding space inside of it, use padding."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "aef6844a",
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4\">\n",
+       "  <div class=\"uk-card ml-20\">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \" style=\"background-color: red\">A Simple Card with ml-20</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card pl-20\">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \" style=\"background-color: red\">A Simple Card with pl-20</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "</div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((div((div((h4(('A Simple Card with ml-20',),{'class': 'uk-h4 ', 'style': 'background-color: red'}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card ml-20'}), div((div((h4(('A Simple Card with pl-20',),{'class': 'uk-h4 ', 'style': 'background-color: red'}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card pl-20'})),{'class': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4'})"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Grid(\n",
+    "    Card(H4(\"A Simple Card with ml-20\",style='background-color: red'), \n",
+    "        cls='ml-20'),\n",
+    "    Card(H4(\"A Simple Card with pl-20\", style='background-color: red'),\n",
+    "        cls='pl-20'))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "59ed6d0d",
+   "metadata": {},
+   "source": [
+    "## Space vs gap\n",
+    "\n",
+    "Spacing and gap are both about setting the space between components.\n",
+    "\n",
+    "+ Spacing applies margin to every element except for the first element in a group.  \n",
+    "+ Gap creates a gap between every element in flexbox elements and grids.\n",
+    "\n",
+    ">Rule of thumb: Use Gap when using grids.\n",
+    "\n",
+    "Let's take a look at some grid examples."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "22ad2226",
+   "metadata": {},
+   "source": [
+    "#### Grid"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "a296d044",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 \">\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "</div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '})),{'class': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 '})"
+      ]
+     },
+     "execution_count": 8,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Grid(\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    cls='')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "286c245f",
+   "metadata": {},
+   "source": [
+    "#### Grid with gap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "ed24f5d3",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4\">\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "</div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '})),{'class': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4'})"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Grid(\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    cls='gap-4')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "7bb43e6d",
+   "metadata": {},
+   "source": [
+    "#### Grid with space"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "44130942",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 space-x-4 space-y-4\">\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "  <div class=\"uk-card \">\n",
+       "    <div class=\"uk-card-body space-y-6\">\n",
+       "      <h4 class=\"uk-h4 \">A Simple Card</h4>\n",
+       "    </div>\n",
+       "  </div>\n",
+       "</div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '})),{'class': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 space-x-4 space-y-4'})"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Grid(\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    Card(H4(\"A Simple Card\")),\n",
+    "    cls='space-x-4 space-y-4')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "50c48f82",
+   "metadata": {},
+   "source": [
+    "### Grid with no gap or space\n",
+    "\n",
+    "The first example has no gap or not space applied.  As expected this means the cards are flush with each other.  Often this is not what you want, because a little space between cards looks much nicer.\n",
+    "\n",
+    "### Grid with gap\n",
+    "\n",
+    "The second example has the same grid but with gap applied.  As youc an see, this gives constent space between all elements of the grid looks great!\n",
+    "\n",
+    "### Grid with space\n",
+    "\n",
+    "The third example has the same grid but with space applied.  As you can see, it's not really what we want.  However it's a really good illustration of how space works so let's notice a few things about it:\n",
+    "\n",
+    "**X Axis**\n",
+    "\n",
+    "- The first card is flush with the left side of the page (no margin)\n",
+    "- The card below it isn't flush with the left side of the page (has margin)\n",
+    "\n",
+    "**Y Axis**\n",
+    "\n",
+    "- The first card is flush with the heading immediately above it (no margin)\n",
+    "- The card top it's right isn't flush with the heading above it (has margin)\n",
+    "\n",
+    "So `space` applies margin to every element except for the first element in a group!\n",
+    "\n",
+    "> Tip: Use your browser developer tools to inspect the examples\n",
+    "\n",
+    "Next, let's look at a form example where `gap` isn't a good choice but `space` works beautifully!"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "36d1949c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Form(DivCentered(H3(\"My Form\")),\n",
+    "     LabelInput(\"Name\"),\n",
+    "     Grid(LabelInput(\"Phone\"), LabelInput(\"Email\"), cols=2),\n",
+    "     cls='')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e8c5d280",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Form(DivCentered(H3(\"My Form with gap\")),\n",
+    "     LabelInput(\"Name\"),\n",
+    "     Grid(LabelInput(\"Phone\"), LabelInput(\"Email\"), cols=2),\n",
+    "     cls='gap-y-5')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "id": "b2566530",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<form enctype=\"multipart/form-data\" class=\"space-y-5\">  <div class=\"uk-flex uk-flex-column uk-flex-middle uk-flex-center space-y-4\">\n",
+       "    <h3 class=\"uk-h3 \">My Form with Spacing</h3>\n",
+       "  </div>\n",
+       "  <div class=\"space-y-2\">\n",
+       "<label class=\"uk-form-label \">Name</label>    <input class=\"uk-input \">\n",
+       "  </div>\n",
+       "  <div class=\"grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-4\">\n",
+       "    <div class=\"space-y-2\">\n",
+       "<label class=\"uk-form-label \">Phone</label>      <input class=\"uk-input \">\n",
+       "    </div>\n",
+       "    <div class=\"space-y-2\">\n",
+       "<label class=\"uk-form-label \">Email</label>      <input class=\"uk-input \">\n",
+       "    </div>\n",
+       "  </div>\n",
+       "</form>\n",
+       "```"
+      ],
+      "text/plain": [
+       "form((div((h3(('My Form with Spacing',),{'class': 'uk-h3 '}),),{'class': 'uk-flex uk-flex-column uk-flex-middle uk-flex-center space-y-4'}), div((label(('Name',),{'for': '', 'class': 'uk-form-label '}), input((),{'id': '', 'class': 'uk-input '})),{'class': 'space-y-2'}), div((div((label(('Phone',),{'for': '', 'class': 'uk-form-label '}), input((),{'id': '', 'class': 'uk-input '})),{'class': 'space-y-2'}), div((label(('Email',),{'for': '', 'class': 'uk-form-label '}), input((),{'id': '', 'class': 'uk-input '})),{'class': 'space-y-2'})),{'class': 'grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-4'})),{'enctype': 'multipart/form-data', 'class': 'space-y-5'})"
+      ]
+     },
+     "execution_count": 9,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Form(DivCentered(H3(\"My Form with Spacing\")),\n",
+    "     LabelInput(\"Name\"),\n",
+    "     Grid(LabelInput(\"Phone\"), LabelInput(\"Email\"), cols=2),\n",
+    "     cls='space-y-5')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "85e821ad",
+   "metadata": {},
+   "source": [
+    "### Form with no gap or space\n",
+    "\n",
+    "The top form looks a bit scrunched with defaults, but it's certainly passable.  There is a bit of a space between the label and it's associated input because of the defaults in MonsterUI.\n",
+    "\n",
+    "### Form with gap\n",
+    "\n",
+    "The second form with gap is identical to the first.  Because we're not in a flex element or a grid, it doesn't do anything at all!\n",
+    "\n",
+    "### Form with space\n",
+    "\n",
+    "`Space-y-5` adds vertical space between each child which really spreads out the form for a nice aesthetic.  If you recall from the grid example, it does not apply this margin to the first element - but in this situation (and many others) we do not want the spacing above the top element (heading) to be the same as the spacing between the form elements.\n",
+    "\n",
+    "> Tip: Use your browser developer tools to inspect the examples\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "83d0f4ea",
+   "metadata": {},
+   "source": [
+    "# Further reading\n",
+    "\n",
+    "For further reading, check out the [Tailwind CSS guide](https://tailwindcss.com/docs/margin#adding-margin-to-a-single-side), which other users have found to be a useful as an additional guide."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

MonsterUI/docs/htmxindicator.py

@@ -0,0 +1,25 @@
+from fasthtml.common import *
+from monsterui.all import *
+import time
+from fasthtml.components import Uk_theme_switcher
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+@rt
+def index(): 
+    return Titled("Loading Demo", 
+        Button("Load", id='load', 
+               hx_get=load, hx_target='#content', hx_swap='beforeend',
+               hx_indicator='#loading'), 
+        Div(id='content'), 
+        Loading(id='loading', htmx_indicator=True)) 
+
+@rt
+def load(): 
+    time.sleep(1)
+    return P("Loading Demo")
+
+@rt
+def theme(): return Uk_theme_switcher()
+
+serve()

MonsterUI/docs/llms-ctx.txt

@@ -0,0 +1,1603 @@
+<project title="MonsterUI Documentation">> MonsterUI is a python library which brings styling to python for FastHTML apps.<api reference><doc title="API List" desc="Complete API Reference"># monsterui Module Documentation
+
+## monsterui.core
+
+- `class ThemeRadii(Enum)`
+    Members: none, sm, md, lg
+
+
+- `class ThemeShadows`
+
+- `class ThemeFont`
+
+- `class Theme(Enum)`
+    Selector to choose theme and get all headers needed for app.  Includes frankenui + tailwind + daisyui + highlight.js options
+    Members: slate, stone, gray, neutral, red, rose, orange, green, blue, yellow, violet, zinc
+
+    - `headers(self, mode, icons, daisy, highlightjs, katex, apex_charts, radii, shadows, font)`
+        Create frankenui and tailwind cdns
+
+    - `local_headers(self, mode, static_dir, icons, daisy, highlightjs, katex, apex_charts, radii, shadows, font)`
+        Create headers using local files downloaded from CDNs
+
+
+## monsterui.daisy
+
+- `class AlertT(Enum)`
+    Alert styles from DaisyUI
+    Members: info, success, warning, error
+
+
+- `def Alert(*c, **kwargs)`
+    Alert informs users about important events.
+
+- `class StepsT(Enum)`
+    Options for Steps
+    Members: vertical, horizonal
+
+
+- `class StepT(Enum)`
+    Step styles for LiStep
+    Members: primary, secondary, accent, info, success, warning, error, neutral
+
+
+- `def Steps(*li, **kwargs)`
+    Creates a steps container
+
+- `def LiStep(*c, **kwargs)`
+    Creates a step list item
+
+- `class LoadingT(Enum)`
+    Members: spinner, dots, ring, ball, bars, infinity, xs, sm, md, lg
+
+
+- `def Loading(cls, htmx_indicator, **kwargs)`
+    Creates a loading animation component
+
+- `class ToastHT(Enum)`
+    Horizontal position for Toast
+    Members: start, center, end
+
+
+- `class ToastVT(Enum)`
+    Vertical position for Toast
+    Members: top, middle, bottom
+
+
+## monsterui.foundations
+
+> Data Structures and Utilties
+
+- `def stringify(o)`
+    Converts input types into strings that can be passed to FT components
+
+- `class VEnum(Enum)`
+    Members: 
+
+    - `__str__(self)`
+    - `__add__(self, other)`
+    - `__radd__(self, other)`
+
+## monsterui.franken
+
+- `class TextT(Enum)`
+    Text Styles from https://franken-ui.dev/docs/text
+    Members: paragraph, lead, meta, gray, italic, xs, sm, lg, xl, light, normal, medium, bold, extrabold, muted, primary, secondary, success, warning, error, info, left, right, center, justify, start, end, top, middle, bottom, truncate, break_, nowrap, underline, highlight
+
+
+- `class TextPresets(Enum)`
+    Common Typography Presets
+    Members: muted_sm, muted_lg, bold_sm, bold_lg, md_weight_sm, md_weight_muted
+
+
+- `def CodeSpan(*c, **kwargs)`
+    A CodeSpan with Styling
+
+- `def CodeBlock(*c, **kwargs)`
+    CodeBlock with Styling
+
+- `def H1(*c, **kwargs)`
+    H1 with styling and appropriate size
+
+- `def H2(*c, **kwargs)`
+    H2 with styling and appropriate size
+
+- `def H3(*c, **kwargs)`
+    H3 with styling and appropriate size
+
+- `def H4(*c, **kwargs)`
+    H4 with styling and appropriate size
+
+- `def H5(*c, **kwargs)`
+    H5 with styling and appropriate size
+
+- `def H6(*c, **kwargs)`
+    H6 with styling and appropriate size
+
+- `def Subtitle(*c, **kwargs)`
+    Styled muted_sm text designed to go under Headings and Titles
+
+- `def Q(*c, **kwargs)`
+    Styled quotation mark
+
+- `def Em(*c, **kwargs)`
+    Styled emphasis text
+
+- `def Strong(*c, **kwargs)`
+    Styled strong text
+
+- `def I(*c, **kwargs)`
+    Styled italic text
+
+- `def Small(*c, **kwargs)`
+    Styled small text
+
+- `def Mark(*c, **kwargs)`
+    Styled highlighted text
+
+- `def Del(*c, **kwargs)`
+    Styled deleted text
+
+- `def Ins(*c, **kwargs)`
+    Styled inserted text
+
+- `def Sub(*c, **kwargs)`
+    Styled subscript text
+
+- `def Sup(*c, **kwargs)`
+    Styled superscript text
+
+- `def Blockquote(*c, **kwargs)`
+    Blockquote with Styling
+
+- `def Caption(*c, **kwargs)`
+    Styled caption text
+
+- `def Cite(*c, **kwargs)`
+    Styled citation text
+
+- `def Time(*c, **kwargs)`
+    Styled time element
+
+- `def Address(*c, **kwargs)`
+    Styled address element
+
+- `def Abbr(*c, **kwargs)`
+    Styled abbreviation with dotted underline
+
+- `def Dfn(*c, **kwargs)`
+    Styled definition term with italic and medium weight
+
+- `def Kbd(*c, **kwargs)`
+    Styled keyboard input with subtle background
+
+- `def Samp(*c, **kwargs)`
+    Styled sample output with subtle background
+
+- `def Var(*c, **kwargs)`
+    Styled variable with italic monospace
+
+- `def Figure(*c, **kwargs)`
+    Styled figure container with card-like appearance
+
+- `def Details(*c, **kwargs)`
+    Styled details element
+
+- `def Summary(*c, **kwargs)`
+    Styled summary element
+
+- `def Data(*c, **kwargs)`
+    Styled data element
+
+- `def Meter(*c, **kwargs)`
+    Styled meter element
+
+- `def S(*c, **kwargs)`
+    Styled strikethrough text (different semantic meaning from Del)
+
+- `def U(*c, **kwargs)`
+    Styled underline (for proper names in Chinese, proper spelling etc)
+
+- `def Output(*c, **kwargs)`
+    Styled output element for form results
+
+- `def PicSumImg(h, w, id, grayscale, blur, **kwargs)`
+    Creates a placeholder image using https://picsum.photos/
+
+- `def AccordionItem(title, *c)`
+    Creates a single item for use within an Accordion component, handling title, content, and open state.
+
+- `def Accordion(*c, **kwargs)`
+    Creates a styled Accordion container using accordion component.
+
+- `class ButtonT(Enum)`
+    Options for styling Buttons
+    Members: default, ghost, primary, secondary, destructive, text, link, xs, sm, lg, xl, icon
+
+
+- `def Button(*c, **kwargs)`
+    Button with Styling (defaults to `submit` for form submission)
+
+- `class ContainerT(Enum)`
+    Max width container sizes from https://franken-ui.dev/docs/container
+    Members: xs, sm, lg, xl, expand
+
+
+- `class BackgroundT(Enum)`
+    Members: muted, primary, secondary, default
+
+
+- `def Container(*c, **kwargs)`
+    Div to be used as a container that often wraps large sections or a page of content
+
+- `def Titled(title, *c, **kwargs)`
+    Creates a standard page structure for titled page.  Main(Container(title, content))
+
+- `class DividerT(Enum)`
+    Divider Styles from https://franken-ui.dev/docs/divider
+    Members: icon, sm, vertical
+
+
+- `def Divider(*c, **kwargs)`
+    Divider with default styling and margin
+
+- `def DividerSplit(*c)`
+    Creates a simple horizontal line divider with configurable thickness and vertical spacing
+
+- `def Article(*c, **kwargs)`
+    A styled article container for blog posts or similar content
+
+- `def ArticleTitle(*c, **kwargs)`
+    A title component for use within an Article
+
+- `def ArticleMeta(*c, **kwargs)`
+    A metadata component for use within an Article showing things like date, author etc
+
+- `class SectionT(Enum)`
+    Section styles from https://franken-ui.dev/docs/section
+    Members: default, muted, primary, secondary, xs, sm, lg, xl, remove_vertical
+
+
+- `def Section(*c, **kwargs)`
+    Section with styling and margins
+
+- `def Form(*c, **kwargs)`
+    A Form with default spacing between form elements
+
+- `def Fieldset(*c, **kwargs)`
+    A Fieldset with default styling
+
+- `def Legend(*c, **kwargs)`
+    A Legend with default styling
+
+- `def Input(*c, **kwargs)`
+    An Input with default styling
+
+- `def Radio(*c, **kwargs)`
+    A Radio with default styling
+
+- `def CheckboxX(*c, **kwargs)`
+    A Checkbox with default styling
+
+- `def Range(*c, **kwargs)`
+    A Range with default styling
+
+- `def TextArea(*c, **kwargs)`
+    A Textarea with default styling
+
+- `def Switch(*c, **kwargs)`
+    A Switch with default styling
+
+- `def Upload(*c, **kwargs)`
+    A file upload component with default styling
+
+- `def UploadZone(*c, **kwargs)`
+    A file drop zone component with default styling
+
+- `def FormLabel(*c, **kwargs)`
+    A Label with default styling
+
+- `class LabelT(Enum)`
+    Members: primary, secondary, destructive
+
+
+- `def Label(*c, **kwargs)`
+    FrankenUI labels, which look like pills
+
+- `def UkFormSection(title, description, *c)`
+    A form section with a title, description and optional button
+
+- `def GenericLabelInput(label, lbl_cls, input_cls, container, cls, id, input_fn, **kwargs)`
+    `Div(Label,Input)` component with Uk styling injected appropriately. Generally you should higher level API, such as `LabelInput` which is created for you in this library
+
+- `def LabelInput(label, lbl_cls, input_cls, cls, id, **kwargs)`
+    A `FormLabel` and `Input` pair that provides default spacing and links/names them based on id
+
+- `def LabelRadio(label, lbl_cls, input_cls, container, cls, id, **kwargs)`
+    A FormLabel and Radio pair that provides default spacing and links/names them based on id
+
+- `def LabelCheckboxX(label, lbl_cls, input_cls, container, cls, id, **kwargs)`
+    A FormLabel and CheckboxX pair that provides default spacing and links/names them based on id
+
+- `def Options(*c)`
+    Helper function to wrap things into `Option`s for use in `Select`
+
+- `def Select(*option, **kwargs)`
+    Creates a select dropdown with uk styling and option for adding a search box
+
+- `def LabelSelect(*option, **kwargs)`
+    A FormLabel and Select pair that provides default spacing and links/names them based on id
+
+- `@delegates(GenericLabelInput, but=['input_fn', 'cls']) def LabelRange(label, lbl_cls, input_cls, cls, id, value, min, max, step, label_range, **kwargs)`
+    A FormLabel and Range pair that provides default spacing and links/names them based on id
+
+- `class AT(Enum)`
+    Link styles from https://franken-ui.dev/docs/link
+    Members: muted, text, reset, primary, classic
+
+
+- `class ListT(Enum)`
+    List styles using Tailwind CSS
+    Members: disc, circle, square, decimal, hyphen, bullet, divider, striped
+
+
+- `def ModalContainer(*c, **kwargs)`
+    Creates a modal container that components go in
+
+- `def ModalDialog(*c, **kwargs)`
+    Creates a modal dialog
+
+- `def ModalHeader(*c, **kwargs)`
+    Creates a modal header
+
+- `def ModalBody(*c, **kwargs)`
+    Creates a modal body
+
+- `def ModalFooter(*c, **kwargs)`
+    Creates a modal footer
+
+- `def ModalTitle(*c, **kwargs)`
+    Creates a modal title
+
+- `def ModalCloseButton(*c, **kwargs)`
+    Creates a button that closes a modal with js
+
+- `def Modal(*c, **kwargs)`
+    Creates a modal with the appropriate classes to put the boilerplate in the appropriate places for you
+
+- `def Placeholder(*c, **kwargs)`
+    Creates a placeholder
+
+- `def Progress(*c, **kwargs)`
+    Creates a progress bar
+
+- `def UkIcon(icon, height, width, stroke_width, cls, **kwargs)`
+    Creates an icon using lucide icons
+
+- `def UkIconLink(icon, height, width, stroke_width, cls, button, **kwargs)`
+    Creates an icon link using lucide icons
+
+- `def DiceBearAvatar(seed_name, h, w)`
+    Creates an Avatar using https://dicebear.com/
+
+- `def Center(*c, **kwargs)`
+    Centers contents both vertically and horizontally by default
+
+- `class FlexT(Enum)`
+    Flexbox modifiers using Tailwind CSS
+    Members: block, inline, left, center, right, between, around, stretch, top, middle, bottom, row, row_reverse, column, column_reverse, nowrap, wrap, wrap_reverse
+
+
+- `def Grid(*div, **kwargs)`
+    Creates a responsive grid layout with smart defaults based on content
+
+- `def DivFullySpaced(*c, **kwargs)`
+    Creates a flex div with it's components having as much space between them as possible
+
+- `def DivCentered(*c, **kwargs)`
+    Creates a flex div with it's components centered in it
+
+- `def DivLAligned(*c, **kwargs)`
+    Creates a flex div with it's components aligned to the left
+
+- `def DivRAligned(*c, **kwargs)`
+    Creates a flex div with it's components aligned to the right
+
+- `def DivVStacked(*c, **kwargs)`
+    Creates a flex div with it's components stacked vertically
+
+- `def DivHStacked(*c, **kwargs)`
+    Creates a flex div with it's components stacked horizontally
+
+- `class NavT(Enum)`
+    Members: default, primary, secondary
+
+
+- `def NavContainer(*li, **kwargs)`
+    Creates a navigation container (useful for creating a sidebar navigation).  A Nav is a list (NavBar is something different)
+
+- `def NavParentLi(*nav_container, **kwargs)`
+    Creates a navigation list item with a parent nav for nesting
+
+- `def NavDividerLi(*c, **kwargs)`
+    Creates a navigation list item with a divider
+
+- `def NavHeaderLi(*c, **kwargs)`
+    Creates a navigation list item with a header
+
+- `def NavSubtitle(*c, **kwargs)`
+    Creates a navigation subtitle
+
+- `def NavCloseLi(*c, **kwargs)`
+    Creates a navigation list item with a close button
+
+- `class ScrollspyT(Enum)`
+    Members: underline, bold
+
+
+- `def NavBar(*c)`
+    Creates a responsive navigation bar with mobile menu support
+
+- `def SliderContainer(*c, **kwargs)`
+    Creates a slider container
+
+- `def SliderItems(*c, **kwargs)`
+    Creates a slider items container
+
+- `def SliderNav(cls, prev_cls, next_cls, **kwargs)`
+    Navigation arrows for Slider component
+
+- `def Slider(*c, **kwargs)`
+    Creates a slider with optional navigation arrows
+
+- `def DropDownNavContainer(*li, **kwargs)`
+    A Nav that is part of a DropDown
+
+- `def TabContainer(*li, **kwargs)`
+    A TabContainer where children will be different tabs
+
+- `class CardT(Enum)`
+    Card styles from UIkit
+    Members: default, primary, secondary, destructive, hover
+
+
+- `def CardTitle(*c, **kwargs)`
+    Creates a card title
+
+- `def CardHeader(*c, **kwargs)`
+    Creates a card header
+
+- `def CardBody(*c, **kwargs)`
+    Creates a card body
+
+- `def CardFooter(*c, **kwargs)`
+    Creates a card footer
+
+- `def CardContainer(*c, **kwargs)`
+    Creates a card container
+
+- `def Card(*c, **kwargs)`
+    Creates a Card with a header, body, and footer
+
+- `class TableT(Enum)`
+    Members: divider, striped, hover, sm, lg, justify, middle, responsive
+
+
+- `def Table(*c, **kwargs)`
+    Creates a table
+
+- `def TableFromLists(header_data, body_data, footer_data, header_cell_render, body_cell_render, footer_cell_render, cls, sortable, **kwargs)`
+    Creates a Table from a list of header data and a list of lists of body data
+
+- `def TableFromDicts(header_data, body_data, footer_data, header_cell_render, body_cell_render, footer_cell_render, cls, sortable, **kwargs)`
+    Creates a Table from a list of header data and a list of dicts of body data
+
+- `def apply_classes(html_str, class_map, class_map_mods)`
+    Apply classes to html string
+
+- `class FrankenRenderer`
+    Custom renderer for Franken UI that handles image paths
+
+    - `def __init__(self, *args, **kwargs)`
+    - `def render_image(self, token)`
+        Modify image paths if they're relative and self.img_dir is specified
+
+
+- `def render_md(md_content, class_map, class_map_mods, img_dir, renderer)`
+    Renders markdown using mistletoe and lxml with custom image handling
+
+- `def ThemePicker(color, radii, shadows, font, mode, cls, custom_themes)`
+    Theme picker component with configurable sections
+
+- `def LightboxContainer(*lightboxitem, **kwargs)`
+    Lightbox container that will hold `LightboxItems`
+
+- `def LightboxItem(*c, **kwargs)`
+    Anchor tag with appropriate structure to go inside a `LightBoxContainer`
+
+- `def ApexChart(**kws)`
+    Apex chart component
+</doc></api reference><examples><doc title="Cards" desc="FrankenUI Cards Example built with MonsterUI (original design by ShadCN)">"""FrankenUI Cards Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from fasthtml.components import Uk_input_tag
+from fasthtml.svg import *
+from monsterui.all import *
+import calendar
+from datetime import datetime
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+CreateAccount = Card(
+    Grid(Button(DivLAligned(UkIcon('github'),Div('Github'))),Button('Google')),
+            DividerSplit("OR CONTINUE WITH", text_cls=TextPresets.muted_sm),
+            LabelInput('Email',    id='email',   placeholder='[email protected]'),
+            LabelInput('Password', id='password',placeholder='Password', type='Password'),
+            header=(H3('Create an Account'),Subtitle('Enter your email below to create your account')),
+            footer=Button('Create Account',cls=(ButtonT.primary,'w-full')))
+
+PaypalSVG_data = "M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
+AppleSVG_data = "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+Card1Svg  = Svg(viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke_linecap="round", stroke_linejoin="round", stroke_width="2", cls="h-6 w-6 mr-1")(Rect(width="20", height="14", x="2", y="5", rx="2"),Path(d="M2 10h20"))
+PaypalSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=PaypalSVG_data, fill="currentColor")),
+AppleSvg  = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=AppleSVG_data, fill="currentColor"))
+
+PaymentMethod = Card(
+    Grid(Button(DivCentered(Card1Svg,  "Card"),   cls='h-20 border-2 border-primary'),
+         Button(DivCentered(PaypalSvg, "PayPal"), cls='h-20'),
+         Button(DivCentered(AppleSvg,  "Apple"),  cls='h-20')),
+    Form(LabelInput('Name',        id='name',        placeholder='John Doe'),
+         LabelInput('Card Number', id='card_number', placeholder='[email protected]'),
+         Grid(LabelSelect(*Options(*calendar.month_name[1:],selected_idx=0),label='Expires',id='expire_month'),
+              LabelSelect(*Options(*range(2024,2030),selected_idx=0),       label='Year',   id='expire_year'),
+              LabelInput('CVV', id='cvv',placeholder='CVV', cls='mt-0'))),
+        header=(H3('Payment Method'),Subtitle('Add a new payment method to your account.')))
+
+area_opts = ('Team','Billing','Account','Deployment','Support')
+severity_opts = ('Severity 1 (Highest)', 'Severity 2', 'Severity 3', 'Severity 4 (Lowest)')
+ReportIssue = Card(
+    Grid(Div(LabelSelect(*Options(*area_opts),    label='Area',    id='area')),
+         Div(LabelSelect(*Options(*severity_opts),label='Severity',id='area'))),
+    LabelInput(    label='Subject',     id='subject',    placeholder='I need help with'),
+    LabelTextArea( label='Description', id='description',placeholder='Please include all information relevant to your issue'),
+    Div(FormLabel('Tags', fr='#tags'),
+        Uk_input_tag(name="Tags",state="danger", value="Spam,Invalid", uk_cloak=True, id='tags')),
+    header=(H3('Report Issue'),Subtitle('What area are you having problems with?')),
+    footer = DivFullySpaced(Button('Cancel'), Button(cls=ButtonT.primary)('Submit')))
+
+monster_desc ="Python-first beautifully designed components because you deserve to focus on features that matter and your app deserves to be beautiful from day one."
+MonsterUI = Card(H4("Monster UI"),
+              Subtitle(monster_desc),
+              DivLAligned(
+                    Div("Python"),
+                    DivLAligned(UkIcon('star'),Div("20k"), cls='space-x-1'),
+                    Div(datetime.now().strftime("%B %d, %Y")),
+                    cls=('space-x-4',TextPresets.muted_sm)))
+
+def CookieTableRow(heading, description, active=False):
+    return Tr(Td(H5(heading)),
+              Td(P(description, cls=TextPresets.muted_sm)),
+              Td(Switch(checked=active)))
+
+CookieSettings = Card(
+    Table(Tbody(
+        CookieTableRow('Strictly Necessary', 'These cookies are essential in order to use the website and use its features.', True),
+        CookieTableRow('Functional Cookies', 'These cookies allow the website to provide personalized functionality.'),
+        CookieTableRow('Performance Cookies', 'These cookies help to improve the performance of the website.'))),
+    header=(H4('Cookie Settings'),Subtitle('Manage your cookie settings here.')),
+    footer=Button('Save Preferences', cls=(ButtonT.primary, 'w-full')))
+
+team_members = [("Sofia Davis", "[email protected]", "Owner"),("Jackson Lee", "[email protected]", "Member"),]
+def TeamMemberRow(name, email, role):
+    return DivFullySpaced(
+        DivLAligned(
+            DiceBearAvatar(name, 10,10),
+            Div(P(name, cls=(TextT.sm, TextT.medium)),
+                P(email, cls=TextPresets.muted_sm))),
+        Button(role, UkIcon('chevron-down', cls='ml-4')),
+        DropDownNavContainer(map(NavCloseLi, [
+            A(Div('Viewer',    NavSubtitle('Can view and comment.'))),
+            A(Div('Developer', NavSubtitle('Can view, comment and edit.'))),
+            A(Div('Billing',   NavSubtitle('Can view, comment and manage billing.'))),
+            A(Div('Owner',     NavSubtitle('Admin-level access to all resources.')))])))
+
+TeamMembers = Card(*[TeamMemberRow(*member) for member in team_members],
+        header = (H4('Team Members'),Subtitle('Invite your team members to collaborate.')))
+
+access_roles = ("Read and write access", "Read-only access")
+team_members = [("Olivia Martin", "[email protected]", "Read and write access"),
+                ("Isabella Nguyen", "[email protected]", "Read-only access"),
+                ("Sofia Davis", "[email protected]", "Read-only access")]
+
+def TeamMemberRow(name, email, role):
+    return DivFullySpaced(
+        DivLAligned(DiceBearAvatar(name, 10,10),
+                    Div(P(name, cls=(TextT.sm, TextT.medium)),
+                        P(email, cls=TextPresets.muted_sm))),
+        Select(*Options(*access_roles, selected_idx=access_roles.index(role))))
+
+ShareDocument = Card(
+    DivLAligned(Input(value='http://example.com/link/to/document'),Button('Copy link', cls='whitespace-nowrap')),
+    Divider(),
+    H4('People with access', cls=TextPresets.bold_sm),
+    *[TeamMemberRow(*member) for member in team_members],
+    header = (H4('Share this document'),Subtitle('Anyone with the link can view this document.')))
+
+DateCard = Card(Button('Jan 20, 2024 - Feb 09, 2024'))
+
+section_content =(('bell','Everything',"Email digest, mentions & all activity."), 
+                  ('user',"Available","Only mentions and comments"),
+                  ('ban', "Ignoring","Turn of all notifications"))
+
+def NotificationRow(icon, name, desc):
+    return Li(cls='-mx-1')(A(DivLAligned(UkIcon(icon),Div(P(name),P(desc, cls=TextPresets.muted_sm)))))
+
+Notifications = Card(
+    NavContainer(
+        *[NotificationRow(*row) for row in section_content],
+        cls=NavT.secondary),
+    header = (H4('Notification'),Subtitle('Choose what you want to be notified about.')),
+    body_cls='pt-0')
+
+TeamCard = Card(
+    DivLAligned(
+        DiceBearAvatar("Isaac Flath", h=24, w=24),
+        Div(H3("Isaac Flath"), P("Library Creator"))),
+    footer=DivFullySpaced(
+        DivHStacked(UkIcon("map-pin", height=16), P("Alexandria, VA")),
+        DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github")))),
+    cls=CardT.hover)
+
+@rt
+def index():
+    return Title("Cards Example"),Container(Grid(
+            *map(Div,(
+                      Div(PaymentMethod,CreateAccount, TeamCard, cls='space-y-4'),
+                      Div(TeamMembers, ShareDocument,DateCard,Notifications, cls='space-y-4'),
+                      Div(ReportIssue,MonsterUI,CookieSettings, cls='space-y-4'))),
+         cols_md=1, cols_lg=2, cols_xl=3))
+
+serve()</doc><doc title="Dashboard" desc="FrankenUI Dashboard Example built with MonsterUI (original design by ShadCN)">"""FrankenUI Dashboard Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import * # Bring in all of fasthtml
+import fasthtml.common as fh # Used to get unstyled components
+from monsterui.all import * # Bring in all of monsterui, including shadowing fasthtml components with styled components
+from fasthtml.svg import *
+import numpy as np
+import plotly.express as px
+import pandas as pd
+import numpy as np
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+def generate_chart(num_points=30):
+    df = pd.DataFrame({
+        'Date': pd.date_range('2024-01-01', periods=num_points),
+        'Revenue': np.random.normal(100, 10, num_points).cumsum(),
+        'Users': np.random.normal(80, 8, num_points).cumsum(), 
+        'Growth': np.random.normal(60, 6, num_points).cumsum()})
+    
+    fig = px.line(df, x='Date', y=['Revenue', 'Users', 'Growth'],  template='plotly_white', line_shape='spline')
+    
+    fig.update_traces(mode='lines+markers')
+    fig.update_layout(
+        margin=dict(l=20, r=20, t=20, b=20), hovermode='x unified',
+        showlegend=True, legend=dict(orientation='h', yanchor='bottom', y=1.02,  xanchor='right', x=1),
+        plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)',
+        xaxis=dict(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,0,0.1)'),
+        yaxis=dict(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,0,0.1)'))
+    
+    return fig.to_html(include_plotlyjs=True, full_html=False, config={'displayModeBar': False})
+
+def InfoCard(title, value, change): return Card(H3(value),P(change, cls=TextPresets.muted_sm), header = H4(title))
+
+rev = InfoCard("Total Revenue", "$45,231.89", "+20.1% from last month")
+sub = InfoCard("Subscriptions", "+2350", "+180.1% from last month")
+sal = InfoCard("Sales", "+12,234", "+19% from last month")
+act = InfoCard("Active Now", "+573", "+201 since last hour")
+
+info_card_data = [("Total Revenue", "$45,231.89", "+20.1% from last month"),
+                   ("Subscriptions", "+2350", "+180.1% from last month"),
+                   ("Sales", "+12,234", "+19% from last month"),
+                   ("Active Now", "+573", "+201 since last hour")]
+
+top_info_row = Grid(*[InfoCard(*row) for row in info_card_data])
+
+def AvatarItem(name, email, amount):
+    return DivFullySpaced(
+        DivLAligned(
+            DiceBearAvatar(name, 9,9),
+            Div(Strong(name, cls=TextT.sm), 
+                Address(A(email,href=f'mailto:{email}')))),
+        fh.Data(amount, cls="ml-auto font-medium", value=amount[2:]))
+
+recent_sales = Card(
+    Div(cls="space-y-8")(
+        *[AvatarItem(n,e,d) for (n,e,d) in (
+            ("Olivia Martin",   "[email protected]",   "+$1,999.00"),
+            ("Jackson Lee",     "[email protected]",     "+$39.00"),
+            ("Isabella Nguyen", "[email protected]", "+$299.00"),
+            ("William Kim",     "[email protected]",            "+$99.00"),
+            ("Sofia Davis",     "[email protected]",     "+$39.00"))]),
+    header=Div(H3("Recent Sales"),Subtitle("You made 265 sales this month.")),
+    cls='col-span-3')
+
+teams = [["Alicia Koch"],['Acme Inc', 'Monster Inc.'],['Create a Team']]
+
+opt_hdrs = ["Personal", "Team", ""]
+
+team_dropdown = Select(
+    Optgroup(Option(A("Alicia Koch")), label="Personal Account"),
+    Optgroup(Option(A("Acme Inc")), Option(A("Monster Inc.")), label="Teams"),
+    Option(A("Create a Team")),
+    cls='flex items-center')
+
+hotkeys = [('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team', ''), ('Logout', '')]
+
+def NavSpacedLi(t,s): return NavCloseLi(A(DivFullySpaced(P(t),P(s,cls=TextPresets.muted_sm))))
+
+avatar_dropdown = Div(
+      DiceBearAvatar('Alicia Koch',8,8),
+      DropDownNavContainer(
+          NavHeaderLi('sveltecult',NavSubtitle("[email protected]")),
+          *[NavSpacedLi(*hk) for hk in hotkeys],))
+
+top_nav = NavBar(
+    team_dropdown, *map(A, ["Overview", "Customers", "Products", "Settings"]),
+    brand=DivLAligned(avatar_dropdown, Input(placeholder='Search')))
+
+@rt
+def index():
+    return Title("Dashboard Example"), Container(
+        top_nav,
+        H2('Dashboard'),
+        TabContainer(
+            Li(A("Overview"),cls='uk-active'),
+            *map(lambda x: Li(A(x)), ["Analytics", "Reports", "Notifications"]),
+            alt=True),
+        top_info_row,
+        Grid(
+            Card(Safe(generate_chart(100)), cls='col-span-4'),
+            recent_sales,
+            gap=4,cols_xl=7,cols_lg=7,cols_md=1,cols_sm=1,cols_xs=1),
+        cls=('space-y-4', ContainerT.xl))
+
+serve()</doc><doc title="Forms" desc="FrankenUI Forms Example built with MonsterUI (original design by ShadCN)">"""FrankenUI Forms Example built with MonsterUI (original design by ShadCN)"""
+
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+def HelpText(c): return P(c,cls=TextPresets.muted_sm)
+
+def heading():
+    return Div(cls="space-y-5")(
+            H2("Settings"),
+            Subtitle("Manage your account settings and set e-mail preferences."),
+            DividerSplit())
+
+
+sidebar = NavContainer(
+    *map(lambda x: Li(A(x)), ("Profile", "Account", "Appearance", "Notifications", "Display")),
+    uk_switcher="connect: #component-nav; animation: uk-animation-fade",
+    cls=(NavT.secondary,"space-y-4 p-4 w-1/5"))
+
+
+def FormSectionDiv(*c, cls='space-y-2', **kwargs): return Div(*c, cls=cls, **kwargs)
+
+def FormLayout(title, subtitle, *content, cls='space-y-3 mt-4'): return Container(Div(H3(title), Subtitle(subtitle), DividerLine(), Form(*content, cls=cls)))
+
+def profile_form():
+    content = (FormSectionDiv(
+            LabelInput("Username", placeholder='sveltecult', id='username'),
+            HelpText("This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days.")),
+        FormSectionDiv(
+            LabelSelect(
+                      Option("Select a verified email to display", value="", selected=True, disabled=True),
+                     *[Option(o, value=o) for o in ('[email protected]', '[email protected]', '[email protected]')],  
+                     label="Email", id="email"),
+            HelpText("You can manage verified email addresses in your email settings.")),
+        FormSectionDiv(
+            LabelTextArea("Bio", id="bio", placeholder="Tell us a little bit about yourself"),
+            HelpText("You can @mention other users and organizations to link to them."),
+            P("String must contain at least 4 character(s)", cls="text-destructive")),
+        FormSectionDiv(
+            FormLabel("URLs"),
+            HelpText("Add links to your website, blog, or social media profiles."),
+            Input(value="https://www.franken-ui.dev"),
+            Input(value="https://github.com/sveltecult/franken-ui"),
+            Button("Add URL")),
+            Button('Update profile', cls=ButtonT.primary))
+    
+    return FormLayout('Profile', 'This is how others will see you on the site.', *content)
+
+def account_form():
+    content = (
+        FormSectionDiv(
+            LabelInput("Name", placeholder="Your name", id="name"),
+            HelpText("This is the name that will be displayed on your profile and in emails.")),
+        FormSectionDiv(
+            LabelInput("Date of Birth", type="date", placeholder="Pick a date", id="date_of_birth"),
+            HelpText("Your date of birth is used to calculate your age.")),
+        FormSectionDiv(
+            LabelSelect(*Options("Select a language", "English", "French", "German", "Spanish", "Portuguese", selected_idx=1, disabled_idxs={0}),
+                          label='Language', id="language"),
+            HelpText("This is the language that will be used in the dashboard.")),
+        Button('Update profile', cls=ButtonT.primary))
+    
+    return FormLayout('Account', 'Update your account settings. Set your preferred language and timezone.', *content)
+
+def appearance_form():
+    def theme_item(bg_color, content_bg, text_bg):
+        common_content = f"space-y-2 rounded-md {content_bg} p-2 shadow-sm"
+        item_row = lambda: Div(cls=f"flex items-center space-x-2 {common_content}")(
+            Div(cls=f"h-4 w-4 rounded-full {text_bg}"),
+            Div(cls=f"h-2 w-[100px] rounded-lg {text_bg}"))
+        
+        return Div(cls=f"space-y-2 rounded-sm {bg_color} p-2")(
+            Div(cls=common_content)(
+                Div(cls=f"h-2 w-[80px] rounded-lg {text_bg}"),
+                Div(cls=f"h-2 w-[100px] rounded-lg {text_bg}")),
+            item_row(),
+            item_row())
+    
+    common_toggle_cls = "block cursor-pointer items-center rounded-md border-2 border-muted p-1 ring-ring"
+
+    content = (
+        FormSectionDiv(
+            LabelSelect(*Options('Select a font family', 'Inter', 'Geist', 'Open Sans', selected_idx=2, disabled_idxs={0}),
+            label='Font Family', id='font_family'), 
+            HelpText("Set the font you want to use in the dashboard.")),
+        FormSectionDiv(
+            FormLabel("Theme"),
+            HelpText("Select the theme for the dashboard."),
+            Grid(
+                A(id="theme-toggle-light", cls=common_toggle_cls)(theme_item("bg-[#ecedef]", "bg-white", "bg-[#ecedef]")),
+                A(id="theme-toggle-dark", cls=f"{common_toggle_cls} bg-popover")(theme_item("bg-slate-950", "bg-slate-800", "bg-slate-400")),
+                cols_max=2,cls=('max-w-md','gap-8'))),
+            Button('Update preferences', cls=ButtonT.primary))
+    
+    return FormLayout('Appearance', 'Customize the appearance of the app. Automatically switch between day and night themes.', *content)
+
+
+notification_items = [
+    {"title": "Communication emails", "description": "Receive emails about your account activity.", "checked": False, "disabled": False},
+    {"title": "Marketing emails", "description": "Receive emails about new products, features, and more.", "checked": False, "disabled": False},
+    {"title": "Social emails", "description": "Receive emails for friend requests, follows, and more.", "checked": True, "disabled": False},
+    {"title": "Security emails", "description": "Receive emails about your account activity and security.", "checked": True, "disabled": True}]
+
+def notifications_form():
+    def RadioLabel(label): return DivLAligned(Radio(name="notification", checked=(label=="Nothing")), FormLabel(label))
+
+    def NotificationCard(item):
+        return Card(
+            Div(cls="space-y-0.5")(
+                FormLabel(Strong(item['title'], cls=TextT.sm),
+                HelpText(item['description']))))
+    content = Div(
+        FormSectionDiv(
+            FormLabel("Notify me about"),
+            *map(RadioLabel, ["All new messages", "Direct messages and mentions", "Nothing"])),
+        Div(
+            H4("Email Notifications", cls="mb-4"),
+            Grid(*map(NotificationCard, notification_items), cols=1)),
+            LabelCheckboxX("Use different settings for my mobile devices", id="notification_mobile"),
+            HelpText("You can manage your mobile notifications in the mobile settings page."),
+            Button('Update notifications', cls=ButtonT.primary))
+    
+    return FormLayout('Notifications', 'Configure how you receive notifications.', *content)
+
+def display_form():
+    content = (
+        Div(cls="space-y-2")(
+            Div(cls="mb-4")(
+                H5("Sidebar"),
+                Subtitle("Select the items you want to display in the sidebar.")),
+            *[Div(CheckboxX(id=f"display_{i}", checked=i in [0, 1, 2]),FormLabel(label))
+              for i, label in enumerate(["Recents", "Home", "Applications", "Desktop", "Downloads", "Documents"])]),
+            Button('Update display', cls=ButtonT.primary))
+    return FormLayout('Display', 'Turn items on or off to control what\'s displayed in the app.', *content)
+
+@rt
+def index():
+    return Title("Forms Example"),Container(
+        heading(),
+        Div(cls="flex gap-x-12")(
+            sidebar,
+                Ul(id="component-nav", cls="uk-switcher max-w-2xl")(
+                    Li(cls="uk-active")(profile_form(),
+                    *map(Li, [account_form(), appearance_form(), notifications_form(), display_form()])))))
+
+serve()</doc><doc title="Scrollspy" desc="MonsterUI Scrollspy Example application">"MonsterUI Scrollspy Example application" 
+
+from fasthtml.common import *
+from monsterui.all import *
+import random
+
+# Using the "slate" theme with Highlight.js enabled
+hdrs = Theme.slate.headers(highlightjs=True)
+app, rt = fast_app(hdrs=hdrs)
+
+################################
+### Example Data and Content ###
+################################
+products = [
+    {"name": "Laptop", "price": "$999"},
+    {"name": "Smartphone", "price": "$599"}
+]
+
+code_example = """
+# Python Code Example
+def greet(name):
+    return f"Hello, {name}!"
+
+print(greet("World"))
+"""
+testimonials = [
+    {"name": "Alice", "feedback": "Great products and excellent customer service!"},
+    {"name": "Bob", "feedback": "Fast shipping and amazing quality!"},
+    {"name": "Charlie", "feedback": "Amazing experience! Will definitely buy again."},
+    {"name": "Diana", "feedback": "Affordable prices and great variety!"},
+    {"name": "Edward", "feedback": "Customer support was very helpful."},
+    {"name": "Fiona", "feedback": "Loved the design and quality!"}
+]
+
+# Team members
+team = [
+    {"name": "Isaac Flath", "role": "CEO"},
+    {"name": "Benjamin Clavié", "role": "AI Researcher"},
+    {"name": "Alexis Gallagher", "role": "ML Engineer"},
+    {"name": "Hamel Husain", "role": "Data Scientist"},
+    {"name": "Austin Huang", "role": "Software Engineer"},
+    {"name": "Benjamin Warner", "role": "Product Manager"},
+    {"name": "Jonathan Whitaker", "role": "UX Designer"},
+    {"name": "Kerem Turgutlu", "role": "DevOps Engineer"},
+    {"name": "Curtis Allan", "role": "DevOps Engineer"},
+    {"name": "Audrey Roy Greenfeld", "role": "Security Analyst"},
+    {"name": "Nathan Cooper", "role": "Full Stack Developer"},
+    {"name": "Jeremy Howard", "role": "CTO"},
+    {"name": "Wayde Gilliam", "role": "Cloud Architect"},
+    {"name": "Daniel Roy Greenfeld", "role": "Blockchain Expert"},
+    {"name": "Tommy Collins", "role": "AI Ethics Researcher"}
+]
+
+
+def ProductCard(p,img_id=1):
+    return Card(
+        PicSumImg(w=500, height=100, id=img_id),
+        DivFullySpaced(H4(p["name"]), P(Strong(p["price"], cls=TextT.sm))), 
+        Button("Details", cls=(ButtonT.primary, "w-full")))
+
+def TestimonialCard(t,img_id=1):
+    return Card(
+        DivLAligned(PicSumImg(w=50, h=50, cls='rounded-full', id=img_id), H4(t["name"])), 
+        P(Q((t["feedback"]))))
+
+
+def TeamCard(m,img_id=1): 
+    return Card(
+        DivLAligned(
+            PicSumImg(w=50, h=50, cls='rounded-full', id=img_id), 
+            Div(H4(m["name"]), P(m["role"]))),
+        DivRAligned(
+            UkIcon('twitter', cls='w-5 h-5'), 
+            UkIcon('linkedin', cls='w-5 h-5'),
+            UkIcon('github', cls='w-5 h-5'),
+            cls=TextT.gray+'space-x-2'
+        ),
+        cls='p-3')
+
+################################
+### Navigation and Scrollspy ###
+################################
+
+scrollspy_links = (
+                A("Welcome",      href="#welcome-section"),
+                A("Products",     href="#products-section"),
+                A("Testimonials", href="#testimonials-section"), 
+                A("Team",         href="#team-section"),
+                A("Code Example", href="#code-section"))
+@rt
+def index():
+    def _Section(*c, **kwargs): return Section(*c, cls='space-y-3 my-48',**kwargs)
+    return Container(
+        NavBar(
+            *scrollspy_links,
+            brand=DivLAligned(H3("Scrollspy Demo!"),UkIcon('rocket',height=30,width=30)),
+            sticky=True, uk_scrollspy_nav=True,
+            scrollspy_cls=ScrollspyT.bold),
+        NavContainer(
+            *map(Li, scrollspy_links),
+            uk_scrollspy_nav=True,
+            sticky=True,
+            cls=(NavT.primary,'pt-20 px-5 pr-10')),
+        Container(
+            # Notice the ID of each section corresponds to the `scrollspy_links` dictionary
+            # So in scollspy `NavContainer` the `href` of each `Li` is the ID of the section
+            DivCentered(
+                H1("Welcome to the Store!"), 
+                Subtitle("Explore our products and enjoy dynamic code examples."), 
+                id="welcome-section"),
+            _Section(H2("Products"),
+                     Grid(*[ProductCard(p,img_id=i) for i,p in enumerate(products)], cols_lg=2),                   
+                     id="products-section"),
+            _Section(H2("Testimonials"), 
+                     Slider(*[TestimonialCard(t,img_id=i) for i,t in enumerate(testimonials)]),       
+                     id="testimonials-section"),
+            _Section(H2("Our Team"), 
+                     Grid(*[TeamCard(m,img_id=i) for i,m in enumerate(team)], cols_lg=2, cols_max=3),                          
+                     id="team-section"),
+            _Section(H2("Code Example"), 
+                     CodeBlock(code_example, lang="python"),                             
+                     id="code-section")), 
+            cls=(ContainerT.xl,'uk-container-expand'))
+
+serve()</doc><doc title="Ticket" desc="MonsterUI Help Desk Example - Professional Dashboard with DaisyUI components">"""MonsterUI Help Desk Example - Professional Dashboard with DaisyUI components"""
+from fasthtml.common import *
+from monsterui.all import *
+from datetime import datetime
+
+app, rt = fast_app(hdrs=Theme.blue.headers(daisy=True))
+
+def TicketSteps(step):
+    return Steps(
+        LiStep("Submitted", data_content="📝",
+               cls=StepT.success if step > 0 else StepT.primary if step == 0 else StepT.neutral),
+        LiStep("In Review", data_content="🔎",
+               cls=StepT.success if step > 1 else StepT.primary if step == 1 else StepT.neutral),
+        LiStep("Processing", data_content="⚙️",
+               cls=StepT.success if step > 2 else StepT.primary if step == 2 else StepT.neutral),
+        LiStep("Resolved", data_content="✅",
+               cls=StepT.success if step > 3 else StepT.primary if step == 3 else StepT.neutral),
+        cls="w-full")
+
+def StatusBadge(status):
+    styles = {'high': AlertT.error, 'medium': AlertT.warning,'low': AlertT.info}
+    alert_type = styles.get(status, AlertT.info)
+    return Alert(f"{status.title()} Priority", cls=(alert_type,"w-32 shadow-sm"))
+
+def TicketCard(id, title, description, status, step, department):
+    return Card(
+        CardHeader(
+            DivFullySpaced(
+                Div(H3(f"#{id}", cls=TextT.muted), 
+                    H4(title), 
+                    cls='space-y-2'),
+                StatusBadge(status))),
+        CardBody(
+            P(description, cls=(TextT.muted, "mb-6")),
+            DividerSplit(cls="my-6"),
+            TicketSteps(step),
+            DividerSplit(cls="my-6"), 
+            DivFullySpaced(
+                Div(Strong("Department"),
+                    P(department),
+                    cls=('space-y-3', TextPresets.muted_sm)),
+                Div(Strong("Last Updated"),
+                    P(Time(datetime.now().strftime('%b %d, %H:%M'))),
+                    cls=('space-y-3', TextPresets.muted_sm)),
+                Button("View Details", cls=ButtonT.primary),
+                cls='mt-6')),
+        cls=CardT.hover)
+
+def NewTicketModal():
+    return Modal(
+        ModalHeader(H3("Create New Support Ticket")),
+        ModalBody(
+            Alert(
+                DivLAligned(UkIcon("info"), Span("Please provide as much detail as possible to help us assist you quickly.")),
+                cls=(AlertT.info,"mb-4")),
+            Form(
+                Grid(LabelInput("Title", id="title", placeholder="Brief description of your issue"),
+                     LabelSelect(Options("IT Support", "HR", "Facilities", "Finance"), label="Department", id="department")),
+                LabelSelect(Options("Low", "Medium", "High"), label="Priority Level",  id="priority"),
+                LabelTextArea("Description", id="description", placeholder="Please provide detailed information about your issue"),
+                DivRAligned(
+                    Button("Cancel", cls=ButtonT.ghost, data_uk_toggle="target: #new-ticket"),
+                    Button(Loading(cls=LoadingT.spinner), "Submit Ticket", cls=ButtonT.primary, data_uk_toggle="target: #success-toast; target: #new-ticket")),
+                cls='space-y-8')),
+            id="new-ticket")
+
+@rt
+def index():
+    tickets = [
+        {'id': "TK-1001", 'title': "Cloud Storage Access Error", 
+         'description': "Unable to access cloud storage with persistent authorization errors. Multiple users affected across marketing department.",
+         'status': 'high', 'step': 2, 'department': 'IT Support'},
+        {'id': "TK-1002", 'title': "Email Integration Issue", 
+         'description': "Exchange server not syncing with mobile devices. Affecting external client communications.",
+         'status': 'medium', 'step': 1, 'department': 'IT Support'},
+        {'id': "TK-1003", 'title': "Office Equipment Setup", 
+         'description': "New department printer needs configuration and network integration. Required for upcoming client presentation.",
+         'status': 'low', 'step': 0, 'department': 'Facilities'}
+    ]
+
+    return Title("Help Desk Dashboard"), Container(
+        Section(
+            DivFullySpaced(
+                H2("Active Tickets"),
+                Button(UkIcon("plus-circle", cls="mr-2"), "New Ticket", cls=ButtonT.primary, data_uk_toggle="target: #new-ticket"),
+                cls='mb-8'),
+            Grid(*[TicketCard(**ticket) for ticket in tickets], cols=1),
+            cls="my-6"),
+        NewTicketModal(),
+        Toast(DivLAligned(UkIcon('check-circle', cls='mr-2'), "Ticket submitted successfully! Our team will review it shortly."), id="success-toast", alert_cls=AlertT.success, cls=(ToastHT.end, ToastVT.bottom)),
+        Loading(htmx_indicator=True, type=LoadingT.dots, cls="fixed top-0 right-0 m-4"),
+        cls="mx-auto max-w-7xl"
+    )   
+
+serve()</doc><doc title="Playground" desc="FrankenUI Playground Example built with MonsterUI (original design by ShadCN)">"""FrankenUI Playground Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+preset_options = ["Grammatical Standard English", "Summarize for a 2nd grader",
+        "Text to command","Q&A","English to other languages","Parse unstructured data",
+        "Classification","Natural language to Python","Explain code","Chat","More examples"]
+
+def playground_navbar():
+    save_modal = Modal(
+        ModalTitle("Save preset"),
+        P("This will save the current playground state as a preset which you can access later or share with others.",cls=("mt-1.5", TextPresets.muted_sm)),
+        LabelInput("Name",        id="name"), 
+        LabelInput("Description", id="description"),
+        ModalCloseButton("Save", cls=ButtonT.primary),
+        id="save")
+    
+    share_dd = Div(cls="space-y-6 p-4")(
+        H3("Share preset"),
+        P("Anyone who has this link and an OpenAI account will be able to view this.", cls=TextPresets.muted_sm),
+        Div(Input(value="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003", readonly=True),
+            Button(UkIcon('copy'), cls=(ButtonT.primary, "uk-drop-close",'mt-4'))))
+
+    rnav = (
+        Select(*Options(*preset_options), name='preset', optgroup_label="Examples",
+                 placeholder='Load a preset', searchable=True, cls='h-9 w-[200px] lg:w-[300px]'),
+        Button("Save",         cls=ButtonT.secondary, data_uk_toggle="#save"),save_modal,
+        Button("View Code",    cls=ButtonT.secondary),
+        Button("Share",        cls=ButtonT.secondary),DropDownNavContainer(share_dd),
+        Button(UkIcon(icon="ellipsis"), cls=ButtonT.secondary),
+        DropDownNavContainer(
+            Li(A("Content filter preferences")),
+            NavDividerLi(),
+            Li(A("Delete preset", cls="text-destructive")),
+        uk_dropdown="mode: click"))
+    
+    return NavBar(*rnav, brand=H4('Playground'))
+
+rsidebar = NavContainer(
+    Select(
+        Optgroup(map(Option,("text-davinci-003", "text-curie-001", "text-babbage-001", "text-ada-001")),label='GPT-3'),
+        Optgroup(map(Option,("code-davinci-002", "code-cushman-001")),label='Codex'),
+        label="Model",
+        searchable=True),
+    LabelRange(label='Temperature', value='12'),
+    LabelRange(label='Maximum Length', value='80'),
+    LabelRange(label='Top P', value='40'),
+    cls='space-y-6 mt-8')
+
+@rt
+def index(): 
+    navbar = playground_navbar()
+    main_content = Div(
+        Div(cls="flex-1")(
+            Textarea(cls="uk-textarea h-full p-4", placeholder="Write a tagline for an ice cream shop")),
+            cls="flex h-[700px] p-8 w-4/5")
+    
+    bottom_buttons = Div(
+        Button("Submit", cls=ButtonT.primary),
+        Button(UkIcon(icon="history"), cls=ButtonT.secondary),
+        cls="flex gap-x-2")
+    
+    return Title("Playground Example"),Div(navbar, Div(cls="flex w-full")(main_content, rsidebar), bottom_buttons)
+
+serve()</doc><doc title="Mail" desc="FrankenUI Mail Example built with MonsterUI (original design by ShadCN)">"""FrankenUI Mail Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+import pathlib, json
+from datetime import datetime
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+sidebar_group1 = (('home', 'Inbox', '128'), ('file-text', 'Drafts', '9'), (' arrow-up-right', 'Sent', ''),
+    ('ban', 'Junk', '23'), ('trash', 'Trash', ''), ('folder', 'Archive', ''))
+
+sidebar_group2 = (('globe','Social','972'),('info','Updates','342'),('messages-square','Forums','128'),
+    ('shopping-cart','Shopping','8'),('shopping-bag','Promotions','21'),)
+
+def MailSbLi(icon, title, cnt): 
+    return Li(A(DivLAligned(Span(UkIcon(icon)),Span(title),P(cnt, cls=TextPresets.muted_sm)),href='#',  cls='hover:bg-secondary p-4'))
+
+sidebar = NavContainer(
+    NavHeaderLi(H3("Email"), cls='p-3'),
+    Li(Select(map(Option, ('[email protected]','[email protected]', '[email protected]')))),
+    *[MailSbLi(i, t, c) for i, t, c in sidebar_group1],
+    Li(Hr()),
+    *[MailSbLi(i, t, c) for i, t, c in sidebar_group2],
+    cls='mt-3')
+
+mail_data = json.load(open(pathlib.Path('data_/mail.json')))
+
+def format_date(date_str):
+    date_obj = datetime.fromisoformat(date_str)
+    return date_obj.strftime("%Y-%m-%d %I:%M %p")
+
+def MailItem(mail):
+    cls_base = 'relative rounded-lg border border-border p-3 text-sm hover:bg-secondary space-y-2'
+    cls = f"{cls_base} {'bg-muted' if mail == mail_data[0] else ''} {'tag-unread' if not mail['read'] else 'tag-mail'}"
+    
+    return Li(
+        DivFullySpaced(
+            DivLAligned(
+                Strong(mail['name']),
+                    Span(cls='flex h-2 w-2 rounded-full bg-blue-600') if not mail['read'] else ''),
+                Time(format_date(mail['date']), cls='text-xs')),
+            Small(mail['subject'], href=f"#mail-{mail['id']}"),
+            Div(mail['text'][:100] + '...', cls=TextPresets.muted_sm),
+            DivLAligned(
+                *[Label(A(label, href='#'), cls='uk-label-primary' if label == 'work' else '') for label in mail['labels']]),
+        cls=cls)
+
+def MailList(mails): return Ul(cls='js-filter space-y-2 p-4 pt-0')(*[MailItem(mail) for mail in mails])
+
+def MailContent():
+    return Div(cls='flex flex-col',uk_filter="target: .js-filter")(
+        Div(cls='flex px-4 py-2 ')(
+            H3('Inbox'),
+            TabContainer(Li(A("All Mail",href='#', role='button'),cls='uk-active', uk_filter_control="filter: .tag-mail"), 
+                         Li(A("Unread",href='#', role='button'),                   uk_filter_control="filter: .tag-unread"), 
+                         alt=True, cls='ml-auto max-w-40', )),
+        Div(cls='flex flex-1 flex-col')(
+            Div(cls='p-4')(
+                Div(cls='uk-inline w-full')(
+                    Span(cls='uk-form-icon text-muted-foreground')(UkIcon('search')),
+                    Input(placeholder='Search'))),
+            Div(cls='flex-1 overflow-y-auto max-h-[600px]')(MailList(mail_data))))
+
+def IconNavItem(*d): return [Li(A(UkIcon(o[0],uk_tooltip=o[1]))) for o in d]  
+def IconNav(*c,cls=''): return Ul(cls=f'uk-iconnav {cls}')(*c)
+
+def MailDetailView(mail):
+    top_icons = [('folder','Archive'), ('ban','Move to junk'), ('trash','Move to trash')]
+    reply_icons = [('reply','Reply'), ('reply','Reply all'), ('forward','Forward')]
+    dropdown_items = ['Mark as unread', 'Star read', 'Add Label', 'Mute Thread']
+    
+    return Container(
+            DivFullySpaced(
+                DivLAligned(
+                    DivLAligned(*[UkIcon(o[0],uk_tooltip=o[1]) for o in top_icons]),  
+                    Div(UkIcon('clock', uk_tooltip='Snooze'), cls='pl-2'),
+                    cls='space-x-2 divide-x divide-border'),
+                DivLAligned(
+                    *[UkIcon(o[0],uk_tooltip=o[1]) for o in reply_icons],
+                    Div(UkIcon('ellipsis-vertical',button=True)),
+                    DropDownNavContainer(*map(lambda x: Li(A(x)), dropdown_items)))),
+            DivLAligned(
+                Span(mail['name'][:2], cls='flex h-10 w-10 items-center justify-center rounded-full bg-muted'),
+                Div(Strong(mail['name']),
+                    Div(mail['subject']),
+                    DivLAligned(P('Reply-To:'), A(mail['email'], href=f"mailto:{mail['email']}"), cls='space-x-1'),
+                    P(Time(format_date(mail['date']))),
+                    cls='space-y-1'+TextT.sm),
+                    cls='m-4 space-x-4'),
+            DividerLine(),
+            P(mail['text'], cls=TextT.sm +'p-4'),
+            DividerLine(),
+        Div(TextArea(id='message', placeholder=f"Reply {mail['name']}"),
+            DivFullySpaced(
+                LabelSwitch('Mute this thread',id='mute'),
+                Button('Send', cls=ButtonT.primary)),
+            cls='space-y-4'))
+
+@rt
+def index():
+    return Title("Mail Example"),Container(
+        Grid(Div(sidebar, cls='col-span-1'),
+             Div(MailContent(), cls='col-span-2'),
+             Div(MailDetailView(mail_data[0]), cls='col-span-2'),
+             cols_sm=1, cols_md=1, cols_lg=5, cols_xl=5, 
+             gap=0, cls='flex-1'),
+        cls=('flex', ContainerT.xl))
+
+serve()</doc><doc title="Tasks" desc="FrankenUI Tasks Example built with MonsterUI (original design by ShadCN)">"""FrankenUI Tasks Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+import json
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+def LAlignedCheckTxt(txt): return DivLAligned(UkIcon(icon='check'), P(txt, cls=TextPresets.muted_sm))
+
+with open('data_/status_list.json', 'r') as f: data     = json.load(f)
+with open('data_/statuses.json',    'r') as f: statuses = json.load(f)
+
+def _create_tbl_data(d):
+    return {'Done': d['selected'], 'Task': d['id'], 'Title': d['title'],
+            'Status'  : d['status'], 'Priority': d['priority'] }
+
+data = [_create_tbl_data(d)  for d in data]
+page_size = 15
+current_page = 0
+paginated_data = data[current_page*page_size:(current_page+1)*page_size]
+
+priority_dd = [{'priority': "low", 'count': 36 }, {'priority': "medium", 'count': 33 }, {'priority': "high", 'count': 31 }]
+
+status_dd = [{'status': "backlog", 'count': 21 },{'status': "todo", 'count': 21 },{'status': "progress", 'count': 20 },{'status': "done",'count': 19 },{'status': "cancelled", 'count': 19 }]
+
+def create_hotkey_li(hotkey): return NavCloseLi(A(DivFullySpaced(hotkey[0], Span(hotkey[1], cls=TextPresets.muted_sm))))
+
+hotkeys_a = (('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team',''))
+hotkeys_b = (('Logout',''), )
+
+avatar_opts = DropDownNavContainer(
+    NavHeaderLi(P('sveltecult'),NavSubtitle('[email protected]')),
+    NavDividerLi(),
+    *map(create_hotkey_li, hotkeys_a),
+    NavDividerLi(),
+    *map(create_hotkey_li, hotkeys_b),)
+
+def CreateTaskModal():
+    return Modal(
+        Div(cls='p-6')(
+            ModalTitle('Create Task'),
+            P('Fill out the information below to create a new task', cls=TextPresets.muted_sm),
+            Br(),
+            Form(cls='space-y-6')(
+                Grid(Div(Select(*map(Option,('Documentation', 'Bug', 'Feature')), label='Task Type', id='task_type')),
+                     Div(Select(*map(Option,('In Progress', 'Backlog', 'Todo', 'Cancelled', 'Done')), label='Status', id='task_status')),
+                     Div(Select(*map(Option, ('Low', 'Medium', 'High')), label='Priority', id='task_priority'))),
+                TextArea(label='Title', placeholder='Please describe the task that needs to be completed'),
+                DivRAligned(
+                    ModalCloseButton('Cancel', cls=ButtonT.ghost),
+                    ModalCloseButton('Submit', cls=ButtonT.primary),
+                    cls='space-x-5'))),
+        id='TaskForm')
+
+page_heading = DivFullySpaced(cls='space-y-2')(
+            Div(cls='space-y-2')(
+                H2('Welcome back!'),P("Here's a list of your tasks for this month!", cls=TextPresets.muted_sm)),
+            Div(DiceBearAvatar("sveltcult",8,8),avatar_opts))
+
+table_controls =(Input(cls='w-[250px]',placeholder='Filter task'),
+     Button("Status"),
+     DropDownNavContainer(map(NavCloseLi,[A(DivFullySpaced(P(a['status']), P(a['count'])),cls='capitalize') for a in status_dd])), 
+     Button("Priority"),
+     DropDownNavContainer(map(NavCloseLi,[A(DivFullySpaced(LAlignedCheckTxt(a['priority']), a['count']),cls='capitalize') for a in priority_dd])),
+     Button("View"),
+     DropDownNavContainer(map(NavCloseLi,[A(LAlignedCheckTxt(o)) for o in ['Title','Status','Priority']])),
+     Button('Create Task',cls=(ButtonT.primary, TextPresets.bold_sm), data_uk_toggle="target: #TaskForm"))
+
+def task_dropdown():
+    return Div(Button(UkIcon('ellipsis')),
+               DropDownNavContainer(
+                   map(NavCloseLi,[
+                       *map(A,('Edit', 'Make a copy', 'Favorite')),
+                        A(DivFullySpaced(*[P(o, cls=TextPresets.muted_sm) for o in ('Delete', '⌘⌫')]))])))
+def header_render(col):
+    match col:
+        case "Done":    return Th(CheckboxX(), shrink=True)
+        case 'Actions': return Th("",          shrink=True)
+        case _:         return Th(col,         expand=True)
+
+def cell_render(col, val):
+    def _Td(*args,cls='', **kwargs): return Td(*args, cls=f'p-2 {cls}',**kwargs)
+    match col:
+        case "Done": return _Td(shrink=True)(CheckboxX(selected=val))
+        case "Task":  return _Td(val, cls='uk-visible@s')  # Hide on small screens
+        case "Title": return _Td(val, cls='font-medium', expand=True)
+        case "Status" | "Priority": return _Td(cls='uk-visible@m uk-text-nowrap capitalize')(Span(val))
+        case "Actions": return _Td(task_dropdown(), shrink=True)
+        case _: raise ValueError(f"Unknown column: {col}")
+
+task_columns = ["Done", 'Task', 'Title', 'Status', 'Priority', 'Actions']
+
+tasks_table = Div(cls='mt-4')(
+    TableFromDicts(
+        header_data=task_columns,
+        body_data=paginated_data,
+        body_cell_render=cell_render,
+        header_cell_render=header_render,
+        sortable=True,
+        cls=(TableT.responsive, TableT.sm, TableT.divider)))
+
+
+def footer():
+    total_pages = (len(data) + page_size - 1) // page_size
+    return DivFullySpaced(
+        Div('1 of 100 row(s) selected.', cls=TextPresets.muted_sm),
+        DivLAligned(
+            DivCentered(f'Page {current_page + 1} of {total_pages}', cls=TextT.sm),
+            DivLAligned(*[UkIconLink(icon=i,  button=True) for i in ('chevrons-left', 'chevron-left', 'chevron-right', 'chevrons-right')])))
+
+tasks_ui = Div(DivFullySpaced(DivLAligned(table_controls), cls='mt-8'), tasks_table, footer())
+
+@rt
+def index(): return Container(page_heading, tasks_ui, CreateTaskModal())
+
+serve()</doc><doc title="Music" desc="FrankenUI Music Example build with MonsterUI (Original design by ShadCN)">"""FrankenUI Music Example build with MonsterUI (Original design by ShadCN)"""
+
+from fasthtml.common import *
+
+from monsterui.all import *
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+def MusicLi(t,hk=''): return Li(A(DivFullySpaced(t,P(hk,cls=TextPresets.muted_sm))))
+
+music_items = [("About Music", ""   ),
+               ("Preferences", "⌘"  ),
+               ("Hide Music" , "⌘H" ),
+               ("Hide Others", "⇧⌘H"),
+               ("Quit Music" , "⌘Q" )]
+
+file_dd_items = [("New",                   ""),
+                 ("Open Stream URL",       "⌘U"),
+                 ("Close Window",          "⌘W"),
+                 ("Library",               ""),
+                 ("Import",                "⌘O"),
+                 ("Burn Playlist to Disc", ""),
+                 ("Show in Finder",        "⇧⌘R"),
+                 ("Convert",               ""),
+                 ("Page Setup",            "Print")]
+
+edit_actions = [("Undo",         "⌘Z"),
+                ("Redo",         "⇧⌘Z"),
+                ("Cut",          "⌘X"),
+                ("Copy",         "⌘C"),
+                ("Paste",        "⌘V"),
+                ("Select All",   "⌘A"),
+                ("Deselect All", "⇧⌘A")]
+
+view_dd_data = ["Show Playing Next", "Show Lyrics", "Show Status Bar", "Hide Sidebar", "Enter Full Screen"]
+
+
+music_headers = NavBar(
+    Button("Music", cls=ButtonT.ghost+TextT.gray),DropDownNavContainer(Li(A("Music"),NavContainer(map(lambda x: MusicLi(*x), music_items)))),
+    Button("File", cls=ButtonT.ghost+TextT.gray), DropDownNavContainer(Li(A("File"), NavContainer(map(lambda x: MusicLi(*x), file_dd_items)))),
+    Button("Edit", cls=ButtonT.ghost+TextT.gray), DropDownNavContainer(Li(A("Edit")),NavContainer(
+            *map(lambda x: MusicLi(*x), edit_actions),
+            Li(A(DivFullySpaced("Smart Dictation",UkIcon("mic")))),
+            Li(A(DivFullySpaced("Emojis & Symbols",UkIcon("globe")))))),
+    Button("View", cls=ButtonT.ghost+TextT.gray),DropDownNavContainer(Li(A("View"),NavContainer(map(lambda x: MusicLi(x), view_dd_data)))),
+    brand=DivLAligned(H2("Purrify"))
+    )
+    
+
+
+
+# music_headers = NavBarContainer(
+#             NavBarLSide(
+#                 NavBarNav(
+#                 Li(A("Music"),NavBarNavContainer(map(lambda x: MusicLi(*x), music_items))),
+#                 Li(A("File"), NavBarNavContainer(map(lambda x: MusicLi(*x), file_dd_items))),
+#                 Li(A("Edit")),
+#                     NavBarNavContainer(
+#                         *map(lambda x: MusicLi(*x), edit_actions),
+#                         Li(A(DivFullySpaced("Smart Dictation",UkIcon("mic")))),
+#                         Li(A(DivFullySpaced("Emojis & Symbols",UkIcon("globe"))))),
+#                 Li(A("View"),
+#                 NavBarNavContainer(map(lambda x: MusicLi(x), view_dd_data))),
+#                 Li(A("Account"),
+#                     NavBarNavContainer(
+#                         NavHeaderLi("Switch Account"),
+#                         *map(MusicLi, ("Andy", "Benoit", "Luis", "Manage Family", "Add Account")))))))
+
+
+def Album(title,artist):
+    img_url = 'https://ucarecdn.com/e5607eaf-2b2a-43b9-ada9-330824b6afd7/music1.webp'
+    return Div(
+        Div(cls="overflow-hidden rounded-md")(Img(cls="transition-transform duration-200 hover:scale-105", src=img_url)),
+        Div(cls='space-y-1')(Strong(title),P(artist,cls=TextT.muted)))
+        
+listen_now_albums = (("Roar", "Catty Perry"), ("Feline on a Prayer", "Cat Jovi"),("Fur Elise", "Ludwig van Beethovpurr"),("Purrple Rain", "Prince's Cat"))
+
+made_for_you_albums = [("Like a Feline",         "Catdonna"),
+                       ("Livin' La Vida Purrda", "Ricky Catin"),
+                       ("Meow Meow Rocket",      "Elton Cat"),
+                       ("Rolling in the Purr",   "Catdelle"),
+                       ("Purrs of Silence",      "Cat Garfunkel"),
+                       ("Meow Me Maybe",         "Carly Rae Purrsen"),]
+
+music_content = (Div(H3("Listen Now"), cls="mt-6 space-y-1"),
+                    Subtitle("Top picks for you. Updated daily."),
+                    DividerLine(),
+                    Grid(*[Album(t,a) for t,a in listen_now_albums], cls='gap-8'),
+                    Div(H3("Made for You"), cls="mt-6 space-y-1"),
+                    Subtitle("Your personal playlists. Updated daily."),
+                    DividerLine(),
+                    Grid(*[Album(t,a) for t,a in made_for_you_albums], cols_xl=6))
+
+tabs = TabContainer(
+    Li(A('Music',    href='#'),    cls='uk-active'),
+    Li(A('Podcasts', href='#')),
+    Li(A('Live', cls='opacity-50'), cls='uk-disabled'),
+    uk_switcher='connect: #component-nav; animation: uk-animation-fade',
+    alt=True)
+
+def podcast_tab():
+    return Div(
+        Div(cls='space-y-3 mt-6')(
+            H3("New Episodes"),
+            Subtitle("Your favorite podcasts. Updated daily.")),
+        Div(cls="uk-placeholder flex h-[450px] items-center justify-center rounded-md mt-4",uk_placeholder=True)(
+            DivVStacked(cls="space-y-6")(
+                UkIcon("microphone", 3),
+                H4("No episodes added"),
+                Subtitle("You have not added any podcasts. Add one below."),
+                Button("Add Podcast", cls=ButtonT.primary))))
+
+discoved_data =  [("play-circle","Listen Now"), ("binoculars", "Browse"), ("rss","Radio")]
+library_data =   [("play-circle", "Playlists"), ("music", "Songs"), ("user", "Made for You"), ("users", "Artists"), ("bookmark", "Albums")]
+playlists_data = [("library","Recently Added"), ("library","Recently Played")]
+
+def MusicSidebarLi(icon, text): return Li(A(DivLAligned(UkIcon(icon), P(text))))
+sidebar = NavContainer(
+    NavHeaderLi(H3("Discover")), *[MusicSidebarLi(*o) for o in discoved_data],
+    NavHeaderLi(H3("Library")),  *[MusicSidebarLi(*o) for o in library_data],
+    NavHeaderLi(H3("Playlists")),*[MusicSidebarLi(*o) for o in playlists_data],
+    cls=(NavT.primary,'space-y-3','pl-8'))
+
+@rt
+def index():
+    return Title("Music Example"),Container(music_headers, DividerSplit(),
+        Grid(sidebar,
+            Div(cls="col-span-4 border-l border-border")(
+                Div(cls="px-8 py-6")(
+                    DivFullySpaced(
+                        Div(cls="max-w-80")(tabs),
+                        Button(cls=ButtonT.primary)(DivLAligned(UkIcon('circle-plus')),Div("Add music"))),
+                    Ul(id="component-nav", cls="uk-switcher")(
+                        Li(*music_content),
+                        Li(podcast_tab())))),
+            cols_sm=1, cols_md=1, cols_lg=5, cols_xl=5))
+
+serve()</doc><doc title="Auth" desc="FrankenUI Auth Example built with MonsterUI (original design by ShadCN)">"""FrankenUI Auth Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.svg import *
+
+app, rt = fast_app(hdrs=Theme.blue.headers())
+
+@rt
+def index():    
+    left = Div(cls="col-span-1 hidden flex-col justify-between bg-zinc-900 p-8 text-white lg:flex")(
+        Div(cls=(TextT.bold))("Acme Inc"),
+        Blockquote(cls="space-y-2")(
+            P(cls=TextT.lg)('"This library has saved me countless hours of work and helped me deliver stunning designs to my clients faster than ever before."'),
+            Footer(cls=TextT.sm)("Sofia Davis")))
+
+    right = Div(cls="col-span-2 flex flex-col p-8 lg:col-span-1")(
+        DivRAligned(Button("Login", cls=ButtonT.ghost)),
+        DivCentered(cls='flex-1')(
+            Container(
+                DivVStacked(
+                    H3("Create an account"),
+                    Small("Enter your email below to create your account", cls=TextT.muted)),
+                Form(
+                    Input(placeholder="[email protected]"),
+                    Button(Span(cls="mr-2", uk_spinner="ratio: 0.54"), "Sign in with Email", cls=(ButtonT.primary, "w-full"), disabled=True),
+                    DividerSplit(Small("Or continue with"),cls=TextT.muted),
+                    Button(UkIcon('github',cls='mr-2'), "Github", cls=(ButtonT.default, "w-full")),
+                    cls='space-y-6'),
+                DivVStacked(Small(
+                        "By clicking continue, you agree to our ",
+                        A(cls=AT.muted, href="#demo")("Terms of Service")," and ",
+                        A(cls=AT.muted, href="#demo")("Privacy Policy"),".",
+                        cls=(TextT.muted,"text-center"))),
+                cls="space-y-6")))
+    
+    return Title("Auth Example"),Grid(left,right,cols=2, gap=0,cls='h-screen')
+
+
+serve()</doc></examples></project>

MonsterUI/docs/llms.txt

@@ -0,0 +1,44 @@
+# MonsterUI Documentation
+
+> MonsterUI is a python library which brings styling to python for FastHTML apps.
+
+## API Reference
+- [API List](https://raw.githubusercontent.com/AnswerDotAI/MonsterUI/refs/heads/main/docs/apilist.txt): Complete API Reference
+
+## Examples
+- [Cards](https://monsterui.answer.ai/cards/md): FrankenUI Cards Example built with MonsterUI (original design by ShadCN)
+- [Dashboard](https://monsterui.answer.ai/dashboard/md): FrankenUI Dashboard Example built with MonsterUI (original design by ShadCN)
+- [Forms](https://monsterui.answer.ai/forms/md): FrankenUI Forms Example built with MonsterUI (original design by ShadCN)
+- [Scrollspy](https://monsterui.answer.ai/scrollspy/md): MonsterUI Scrollspy Example application
+- [Ticket](https://monsterui.answer.ai/ticket/md): MonsterUI Help Desk Example - Professional Dashboard with DaisyUI components
+- [Playground](https://monsterui.answer.ai/playground/md): FrankenUI Playground Example built with MonsterUI (original design by ShadCN)
+- [Mail](https://monsterui.answer.ai/mail/md): FrankenUI Mail Example built with MonsterUI (original design by ShadCN)
+- [Tasks](https://monsterui.answer.ai/tasks/md): FrankenUI Tasks Example built with MonsterUI (original design by ShadCN)
+- [Music](https://monsterui.answer.ai/music/md): FrankenUI Music Example build with MonsterUI (Original design by ShadCN)
+- [Auth](https://monsterui.answer.ai/auth/md): FrankenUI Auth Example built with MonsterUI (original design by ShadCN)
+
+## Optional
+- [Accordion | Link](https://monsterui.answer.ai/api_ref/docs_accordion_link/md): Accordion API Reference
+- [Button | Link](https://monsterui.answer.ai/api_ref/docs_button_link/md): Buttons & Links API Reference
+- [Cards](https://monsterui.answer.ai/api_ref/docs_cards/md): Cards API Reference
+- [Charts](https://monsterui.answer.ai/api_ref/docs_charts/md): Charts API Reference
+- [Containers](https://monsterui.answer.ai/api_ref/docs_containers/md): Articles, Containers & Sections API Reference
+- [Dividers](https://monsterui.answer.ai/api_ref/docs_dividers/md): Dividers API Reference
+- [Forms](https://monsterui.answer.ai/api_ref/docs_forms/md): Forms and User Inputs API Reference
+- [Html](https://monsterui.answer.ai/api_ref/docs_html/md): HTML Styling API Reference
+- [Icons | Images](https://monsterui.answer.ai/api_ref/docs_icons_images/md): Icons & Images API Reference
+- [Layout](https://monsterui.answer.ai/api_ref/docs_layout/md): Layout (Flex and Grid) API Reference
+- [Lightbox](https://monsterui.answer.ai/api_ref/docs_lightbox/md): Lightbox API Reference
+- [Lists](https://monsterui.answer.ai/api_ref/docs_lists/md): Lists API Reference
+- [Loading](https://monsterui.answer.ai/api_ref/docs_loading/md): Loading Indicators API Reference
+- [Markdown](https://monsterui.answer.ai/api_ref/docs_markdown/md): Markdown + automated HTML styling API Reference
+- [Modals](https://monsterui.answer.ai/api_ref/docs_modals/md): Modals API Reference
+- [Navigation](https://monsterui.answer.ai/api_ref/docs_navigation/md): Navigation (Nav, NavBar, Tabs, etc.) API Reference
+- [Notifications](https://monsterui.answer.ai/api_ref/docs_notifications/md): Alerts & Toasts API Reference
+- [Sliders](https://monsterui.answer.ai/api_ref/docs_sliders/md): Carousel Sliders API Reference
+- [Steps](https://monsterui.answer.ai/api_ref/docs_steps/md): Steps API Reference
+- [Tables](https://monsterui.answer.ai/api_ref/docs_tables/md): Tables API Reference
+- [Theme | Headers](https://monsterui.answer.ai/api_ref/docs_theme_headers/md): Theme and Headers API Reference
+- [Typography](https://monsterui.answer.ai/api_ref/docs_typography/md): Typography API Reference
+- [Layout](https://monsterui.answer.ai/tutorial_layout/md): MonsterUI Page Layout Guide
+- [Spacing](https://monsterui.answer.ai/tutorial_spacing/md): Padding & Margin & Spacing, Oh my! (MonsterUI Spacing Guide)

MonsterUI/docs/main.py

@@ -0,0 +1,266 @@
+from fasthtml.common import *
+from functools import partial
+from monsterui.all import *
+from fasthtml.components import Uk_theme_switcher
+from utils import render_nb
+from pathlib import Path
+from toolslm.download import read_html,html2md
+from starlette.responses import PlainTextResponse
+import httpx
+
+def _not_found(req, exc):
+    _path = req.url.path.rstrip('/')
+    if _path.endswith('.md') or _path.endswith('.rmd'):
+        url = f'https://monsterui.answer.ai{_path[:-3].rstrip("/").rstrip(".")}'.rstrip("/").rstrip(".")
+        try:
+            r = httpx.head(url, follow_redirects=True, timeout=1.0)
+            if r.status_code < 400:  # Accept 2xx and 3xx status codes
+                if _path.endswith('.rmd') or _path.endswith('/rmd'): return Container(render_md(read_html(url, sel='#content')))
+                elif _path.endswith('.md') or _path.endswith('/md'): return PlainTextResponse(read_html(url, sel='#content'))
+        except (httpx.TimeoutException, httpx.NetworkError): pass    
+    return _create_page(
+        Container(Card(CardBody(H1("404 - Page Not Found"), P("The page you're looking for doesn't exist.")))),
+        req,
+        None)
+
+
+app,rt = fast_app(exception_handlers={404:_not_found}, pico=False, 
+                  hdrs=(*Theme.blue.headers(highlightjs=True,apex_charts=True), Link(rel="icon", type="image/x-icon", href="/favicon.ico"),
+                        Link(rel="stylesheet", href="/custom_theme.css", type="text/css")), 
+                  )
+
+def is_htmx(request=None): 
+    "Check if the request is an HTMX request"
+    return request and 'hx-request' in request.headers
+
+def _create_page(content, # The content to display (without the layout/sidebar)
+                 request, # Request object to determine if HTMX request
+                 sidebar_section, # The open section on the sidebar
+                 ):
+    "Makes page load sidebar if direct request, otherwise loads content only via HTMX"
+    if is_htmx(request): return content
+    else: return with_layout(sidebar_section, content)
+
+def with_layout(sidebar_section, content):
+    "Puts the sidebar and content into a layout"
+    return Title(f"MonsterUI"), Div(cls="flex flex-col md:flex-row w-full")(
+            Button(UkIcon("menu",50,50,cls='mt-4'), cls="md:hidden mb-4", data_uk_toggle="target: #mobile-sidebar"),
+            Div(sidebar(sidebar_section), id='mobile-sidebar', hidden=True),
+            Div(cls="md:flex w-full")(
+                Div(sidebar(sidebar_section), cls="hidden md:block w-1/5 max-w-52"),
+                Div(content, cls='md:w-4/5 w-full mr-5', id="content", )))
+
+
+###
+# Build the Example Pages
+###
+ 
+from examples.tasks import index as tasks_homepage
+from examples.cards import index as cards_homepage
+from examples.dashboard import index as dashboard_homepage
+from examples.forms import index as forms_homepage
+from examples.music import index as music_homepage
+from examples.auth import index as auth_homepage
+from examples.playground import index as playground_homepage
+from examples.mail import index as mail_homepage
+from examples.scrollspy import index as scrollspy_homepage
+from examples.ticket import index as ticket_homepage
+def _example_route(name, homepage, o:str, request=None):
+    match o:
+        case 'code' | 'rmd': return Div(render_md(f'''```python\n\n{open(f'examples/{name}.py').read()}\n\n```'''))
+        case 'md': return PlainTextResponse(open(f'examples/{name}.py').read())
+        case _: return _create_example_page(homepage, request)
+
+_create_example_page = partial(_create_page, sidebar_section='Examples')
+
+@rt('/scrollspy')
+@rt('/scrollspy/{o}')
+def scrollspy(o:str='', request=None): return _example_route('scrollspy', Div(DivRAligned(A("See Code",href='/scrollspy/code',cls='m-4 uk-btn'+ButtonT.default)),scrollspy_homepage()), o, request)
+
+@rt('/ticket')
+@rt('/ticket/{o}')
+def ticket(o:str='', request=None): return _example_route('ticket', Div(DivRAligned(A("See Code",href='/ticket/code',cls='m-4 uk-btn'+ButtonT.default)),ticket_homepage()), o, request)
+
+@rt('/tasks')
+@rt('/tasks/{o}')
+def tasks(o:str='', request=None): return _example_route('tasks', Div(DivRAligned(A("See Code",href='/tasks/code',cls='m-4 uk-btn'+ButtonT.default)),tasks_homepage()), o, request)
+
+@rt('/cards')
+@rt('/cards/{o}')
+def cards(o:str, request=None): return _example_route('cards', Div(DivRAligned(A("See Code",href='/cards/code',cls='m-4 uk-btn'+ButtonT.default)),cards_homepage()), o, request)
+
+@rt('/dashboard')
+@rt('/dashboard/{o}')
+def dashboard(o:str, request=None): return _example_route('dashboard', Div(DivRAligned(A("See Code",href='/dashboard/code',cls='m-4 uk-btn'+ButtonT.default)),dashboard_homepage()), o, request)
+
+@rt('/forms')
+@rt('/forms/{o}')
+def forms(o:str, request=None): return _example_route('forms', Div(DivRAligned(A("See Code",href='/forms/code',cls='m-4 uk-btn'+ButtonT.default)),forms_homepage()), o, request)
+
+@rt('/music')
+@rt('/music/{o}')
+def music(o:str, request=None): return _example_route('music', Div(DivRAligned(A("See Code",href='/music/code',cls='m-4 uk-btn'+ButtonT.default)),music_homepage()), o, request)
+
+@rt('/auth')
+@rt('/auth/{o}')
+def auth(o:str, request=None): return _example_route('auth', Div(DivRAligned(A("See Code",href='/auth/code',cls='m-4 uk-btn'+ButtonT.default)),auth_homepage()), o, request)
+
+@rt('/playground')
+@rt('/playground/{o}')
+def playground(o:str, request=None): return _example_route('playground', Div(DivRAligned(A("See Code",href='/playground/code',cls='m-4 uk-btn'+ButtonT.default)),playground_homepage()), o, request)
+
+@rt('/mail')
+@rt('/mail/{o}')    
+def mail(o:str, request=None): return _example_route('mail', Div(DivRAligned(A("See Code",href='/mail/code',cls='m-4 uk-btn'+ButtonT.default)),mail_homepage()), o, request)
+
+###
+# Build the API Reference Pages
+###
+
+import api_reference.api_reference as api_reference
+def fname2title(ref_fn_name): return ref_fn_name[5:].replace('_',' | ').title() 
+
+reference_fns = L([o for o in dir(api_reference) if o.startswith('docs_')])
+@rt('/api_ref/{o}')
+def api_route(request, o:str):
+    if o not in reference_fns: raise HTTPException(404)
+    content = getattr(api_reference, o)()
+    return _create_page(Container(content), request=request, sidebar_section='API Reference')
+
+@rt('/api_ref/{o}/md')
+def api_route_md(request, o:str):
+    if o not in reference_fns: raise HTTPException(404)
+    content = getattr(api_reference, o)()
+    return PlainTextResponse(html2md(to_xml(content)))
+
+@rt('/api_ref/{o}rmd')
+def api_route_md(request, o:str):
+    if o not in reference_fns: raise HTTPException(404)
+    content = getattr(api_reference, o)()
+    return Div(render_md(html2md(to_xml(content))))
+
+###
+# Build the Guides Pages
+###
+@rt('/tutorial_spacing')
+@rt('/tutorial_spacing/{o}')
+def tutorial_spacing(o:str='', request=None): 
+    if o=='md': return PlainTextResponse(read_html(f'https://monsterui.answer.ai/tutorial_spacing', sel='#content'))
+    if o=='rmd': return Div(render_md(read_html(f'https://monsterui.answer.ai/tutorial_spacing', sel='#content')))
+    return _create_page(render_nb('guides/Spacing.ipynb'), request, 'Guides')
+@rt('/tutorial_layout')
+@rt('/tutorial_layout/{o}')
+def tutorial_layout(o:str='', request=None): 
+    if o=='md': return PlainTextResponse(read_html(f'https://monsterui.answer.ai/tutorial_layout', sel='#content'))
+    if o=='rmd': return Div(render_md(read_html(f'https://monsterui.answer.ai/tutorial_layout', sel='#content')))
+    return _create_page(render_nb('guides/Layout.ipynb'), request,  'Guides',)
+
+###
+# Build the Theme Switcher Page
+###
+
+@rt
+def theme_switcher(request): 
+    return _create_page(Div(ThemePicker(custom_themes=[("Grass", "#10b981")]),cls="p-12"), request, None)
+
+###
+# Build the Getting Started Pages
+###
+
+gs_path = Path('getting_started')
+
+@rt('/tutorial_app')
+@rt('/tutorial_app/{o}')
+def tutorial_app(o:str='', request=None):
+    pass
+    if o=='md': return PlainTextResponse(read_html(f'https://monsterui.answer.ai/tutorial_app', sel='#content'))
+    if o=='rmd': return Div(render_md(read_html(f'https://monsterui.answer.ai/tutorial_app', sel='#content')))
+    app_code = open(gs_path/'app_product_gallery.py').read()
+    app_rendered = Div(Pre(Code(app_code)))
+    content = Container(cls='space-y-4')(
+        H1("Tutorial App"),
+        render_md("""This is a heavily commented example of a product gallery app built with MonsterUI for those that like to learn by example.  \
+          This tutorial app assumes you have some familiarity with fasthtml apps already, so focuses on what MonsterUI adds on top of fasthtml.
+          To make the most out of this tutorial, you should follow these steps:"""),
+        Ol(
+            Li("Briefly read through this to get an overview of what is happening, without focusing on any details"),
+            Li("Install fasthtml and MonsterUI"),
+            Li("Copy the code into your own project locally and run it using `python app.py`"),
+            Li("Go through the code in detail to understand how it works by experimenting with changing things"),
+            cls=ListT.decimal+TextT.lg
+        ),
+        render_md("""> Tip:  Try adding `import fasthtml.common as fh`, so you can replace things with the base fasthtml components to see what happens!
+For example, try replacing `H4` with `fh.H4` or `Button` with `fh.Button`."""),
+        Divider(),
+        app_rendered)
+    return _create_page(content, request, 'Getting Started')
+
+@rt('/')
+@rt('/{o}')
+def index(o:str='', request=None):
+    if o=='md': return PlainTextResponse(read_html(f'https://monsterui.answer.ai/getting_started', sel='#content'))
+    if o=='rmd': return Div(render_md(read_html(f'https://monsterui.answer.ai/getting_started', sel='#content')))
+    content = Container(render_md(open(gs_path/'GettingStarted.md').read()))
+    return _create_page(content, request,  'Getting Started')
+
+###
+# Build the Sidebar
+###
+
+def sidebar(open_section):
+    def create_li(title, href):
+        return Li(A(title,hx_target="#content", hx_get=href, hx_push_url='true'))
+
+    return NavContainer(
+        NavParentLi(
+            A(DivFullySpaced("Getting Started", )),
+            NavContainer(create_li("Getting Started", index),
+                         create_li("Tutorial App", tutorial_app),
+                         parent=False),
+            cls='uk-open' if open_section=='Getting Started' else ''
+        ),
+        NavParentLi(
+            A(DivFullySpaced("API Reference", )),
+            NavContainer(
+                *[create_li(fname2title(o), f"/api_ref/{o}") for o in reference_fns],
+                parent=False,  
+            ),
+            cls='uk-open' if open_section=='API Reference' else ''
+        ),
+        NavParentLi(
+            A(DivFullySpaced('Guides', )),
+            NavContainer(
+                *[create_li(title, href) for title, href in [
+                    ('Spacing', tutorial_spacing),
+                    ('Layout', tutorial_layout),
+                ]],
+                parent=False
+            ),
+            cls='uk-open' if open_section=='Guides' else ''
+        ),
+        
+        NavParentLi(
+            A(DivFullySpaced('Examples', )),
+            NavContainer(
+                *[create_li(title, href) for title, href in [
+                    ('Task', '/tasks/'),
+                    ('Card', '/cards/'),
+                    ('Dashboard', '/dashboard/'),
+                    ('Form', '/forms/'),
+                    ('Music', '/music/'),
+                    ('Auth', '/auth/'),
+                    ('Playground', '/playground/'),
+                    ('Mail', '/mail/'),
+                    ('Ticket', '/ticket/'),
+                    ('Scrollspy', '/scrollspy/'),
+                ]],
+                parent=False
+            ),
+            cls='uk-open' if open_section=='Examples' else ''
+        ),
+        create_li("Theme", theme_switcher),
+        uk_nav=True,
+        cls=(NavT.primary, "space-y-4 p-4 w-full md:w-full")
+    )
+
+serve()

MonsterUI/docs/requirements.txt

@@ -0,0 +1,13 @@
+toolslm
+python-fasthtml
+pandas
+plotly
+monsterui @ git+https://github.com/AnswerDotAI/monsterui
+fastcore
+fh_matplotlib
+numpy
+matplotlib
+pysymbol_llm @ git+https://github.com/AnswerDotAI/pysymbol-llm.git
+mistletoe
+lxml
+html2text

MonsterUI/docs/updatellms.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+./createllms.sh
+pysym2md --output_file apilist.txt monsterui
+llms_txt2ctx llms.txt >llms-ctx.txt
+llms_txt2ctx llms.txt --optional True > llms-ctx-full.txt

MonsterUI/docs/utils.py

@@ -0,0 +1,60 @@
+"""Utilities for building the docs page that don't belong anywhere else"""
+
+
+__all__ = ['hjs', 'HShow', 'create_server']
+
+from fasthtml.common import *
+from monsterui.all import *
+from fasthtml.jupyter import *
+from collections.abc import Callable
+import inspect
+import ast
+def get_last_statement(code): return ast.unparse(ast.parse(code).body[-1])
+import json
+from pathlib import Path
+
+
+def create_flippable_card(content, source_code, extra_cls=None):
+    "Creates a card that flips between content and source code"
+    _id = 'f'+str(unqid())
+    _card = Card(
+        Button(
+            DivFullySpaced(UkIcon('corner-down-right', 20, 20, 3),"See Source"), 
+            data_uk_toggle=f"target: #{_id}", id=_id, cls=ButtonT.primary),
+        Button(
+            DivFullySpaced(UkIcon('corner-down-right', 20, 20, 3),"See Output"), 
+            data_uk_toggle=f"target: #{_id}", id=_id, cls=ButtonT.primary, hidden=True),
+        Div(content, id=_id),
+        Div(Pre(Code(source_code, cls="hljs language-python")), id=_id, hidden=True),
+        cls='my-8')
+    return Div(_card, cls=extra_cls) if extra_cls else _card
+
+def fn2code_string(fn: Callable) -> tuple: return fn(), inspect.getsource(fn)
+
+
+def render_nb(path):
+    "Renders a Jupyter notebook with markdown cells and flippable code cards"
+    namespace = globals().copy()
+    # Read and parse the notebook
+    nb_content = json.loads(Path(path).read_text())
+    cells = nb_content['cells']
+    
+    # Convert cells to appropriate HTML elements
+    rendered_cells = []
+    for cell in cells:
+        if cell['cell_type'] == 'markdown':
+            # Combine all markdown lines and render
+            md_content = ''.join(cell['source'])
+            rendered_cells.append(render_md(md_content))
+        elif cell['cell_type'] == 'code':
+            # Skip empty code cells
+            if not ''.join(cell['source']).strip(): continue
+            # Create flippable card for code
+            code_content = ''.join(cell['source'])
+            exec(code_content, namespace)
+            result = eval(get_last_statement(code_content), namespace)
+            
+            rendered_cells.append(create_flippable_card(result, code_content))
+
+    # Return all cells wrapped in a container with vertical spacing
+    return Container(cls='space-y-4')(*rendered_cells)