appkit-mantine 0.7.3__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- appkit_mantine-0.7.3/.gitignore +114 -0
- appkit_mantine-0.7.3/PKG-INFO +441 -0
- appkit_mantine-0.7.3/README.md +419 -0
- appkit_mantine-0.7.3/docs/MANTINE_INPUTS_GUIDE.md +836 -0
- appkit_mantine-0.7.3/docs/MANTINE_TEXTAREA_GUIDE.md +702 -0
- appkit_mantine-0.7.3/docs/MANTINE_TIPTAP_GUIDE.md +692 -0
- appkit_mantine-0.7.3/docs/NUMBER_FORMAT_QUICK_REF.md +206 -0
- appkit_mantine-0.7.3/pyproject.toml +46 -0
- appkit_mantine-0.7.3/src/appkit_mantine/__init__.py +59 -0
- appkit_mantine-0.7.3/src/appkit_mantine/action_icon.py +117 -0
- appkit_mantine-0.7.3/src/appkit_mantine/autocomplete.py +52 -0
- appkit_mantine-0.7.3/src/appkit_mantine/base.py +351 -0
- appkit_mantine-0.7.3/src/appkit_mantine/button.py +90 -0
- appkit_mantine-0.7.3/src/appkit_mantine/date.py +76 -0
- appkit_mantine-0.7.3/src/appkit_mantine/inputs.py +158 -0
- appkit_mantine-0.7.3/src/appkit_mantine/json_input.py +44 -0
- appkit_mantine-0.7.3/src/appkit_mantine/mantine_provider.js +27 -0
- appkit_mantine-0.7.3/src/appkit_mantine/markdown_preview.py +149 -0
- appkit_mantine-0.7.3/src/appkit_mantine/markdown_preview_wrapper.js +426 -0
- appkit_mantine-0.7.3/src/appkit_mantine/markdown_zoom.py +26 -0
- appkit_mantine-0.7.3/src/appkit_mantine/masked_input.py +169 -0
- appkit_mantine-0.7.3/src/appkit_mantine/mermaid_zoom_loader.js +204 -0
- appkit_mantine-0.7.3/src/appkit_mantine/multi_select.py +132 -0
- appkit_mantine-0.7.3/src/appkit_mantine/nav_link.py +66 -0
- appkit_mantine-0.7.3/src/appkit_mantine/navigation_progress.js +12 -0
- appkit_mantine-0.7.3/src/appkit_mantine/nprogress.py +85 -0
- appkit_mantine-0.7.3/src/appkit_mantine/number_formatter.py +33 -0
- appkit_mantine-0.7.3/src/appkit_mantine/number_input.py +134 -0
- appkit_mantine-0.7.3/src/appkit_mantine/password_input.py +54 -0
- appkit_mantine-0.7.3/src/appkit_mantine/rich_select.jsx +204 -0
- appkit_mantine-0.7.3/src/appkit_mantine/rich_select.py +262 -0
- appkit_mantine-0.7.3/src/appkit_mantine/scroll_area.py +803 -0
- appkit_mantine-0.7.3/src/appkit_mantine/select.py +63 -0
- appkit_mantine-0.7.3/src/appkit_mantine/table.py +108 -0
- appkit_mantine-0.7.3/src/appkit_mantine/tags_input.py +141 -0
- appkit_mantine-0.7.3/src/appkit_mantine/textarea.py +120 -0
- appkit_mantine-0.7.3/src/appkit_mantine/tiptap.py +325 -0
- appkit_mantine-0.7.3/src/appkit_mantine/tiptap_wrapper.js +235 -0
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
__pycache__/
|
|
2
|
+
__pypackages__/
|
|
3
|
+
.cache
|
|
4
|
+
.coverage
|
|
5
|
+
.coverage.*
|
|
6
|
+
.dmypy.json
|
|
7
|
+
.DS_Store
|
|
8
|
+
.eggs/
|
|
9
|
+
.env
|
|
10
|
+
.env.backup
|
|
11
|
+
.env.docker
|
|
12
|
+
.hypothesis/
|
|
13
|
+
.idea/
|
|
14
|
+
.installed.cfg
|
|
15
|
+
.ipynb_checkpoints
|
|
16
|
+
.mypy_cache/
|
|
17
|
+
.nox/
|
|
18
|
+
.pdm.toml
|
|
19
|
+
.pybuilder/
|
|
20
|
+
.pyre/
|
|
21
|
+
.pytest_cache/
|
|
22
|
+
.Python
|
|
23
|
+
.python_packages
|
|
24
|
+
.pytype/
|
|
25
|
+
.ropeproject
|
|
26
|
+
.scrapy
|
|
27
|
+
.spyderproject
|
|
28
|
+
.spyproject
|
|
29
|
+
.states
|
|
30
|
+
.tox/
|
|
31
|
+
.venv
|
|
32
|
+
.venv.mac
|
|
33
|
+
.web
|
|
34
|
+
.webassets-cache
|
|
35
|
+
*.bak
|
|
36
|
+
*.cover
|
|
37
|
+
*.db
|
|
38
|
+
*.egg
|
|
39
|
+
*.egg-info/
|
|
40
|
+
*.kv-env.*
|
|
41
|
+
*.log
|
|
42
|
+
*.manifest
|
|
43
|
+
*.mo
|
|
44
|
+
*.pot
|
|
45
|
+
*.py,cover
|
|
46
|
+
*.py[cod]
|
|
47
|
+
*.sage.py
|
|
48
|
+
*.so
|
|
49
|
+
*.spec
|
|
50
|
+
*.terraform.lock.hcl
|
|
51
|
+
*.tfplan
|
|
52
|
+
*.tfstate
|
|
53
|
+
*.tfstate.*.backup
|
|
54
|
+
*.tfstate.backup
|
|
55
|
+
*.tfvars
|
|
56
|
+
**/.terraform/*
|
|
57
|
+
*$py.class
|
|
58
|
+
/site
|
|
59
|
+
/vectorstore/
|
|
60
|
+
aila-storage/
|
|
61
|
+
assets/external/
|
|
62
|
+
build/
|
|
63
|
+
celerybeat-schedule
|
|
64
|
+
celerybeat.pid
|
|
65
|
+
configuration/config.abaz009.yaml
|
|
66
|
+
configuration/config.bubb001.yaml
|
|
67
|
+
configuration/config.stie104.yaml
|
|
68
|
+
configuration/config.voro047.yaml
|
|
69
|
+
connector examples/sharepoint.json
|
|
70
|
+
cover/
|
|
71
|
+
coverage.xml
|
|
72
|
+
cython_debug/
|
|
73
|
+
db.sqlite3
|
|
74
|
+
db.sqlite3-journal
|
|
75
|
+
develop-eggs/
|
|
76
|
+
dist/
|
|
77
|
+
dmypy.json
|
|
78
|
+
docs/_build/
|
|
79
|
+
Documents/
|
|
80
|
+
downloads/
|
|
81
|
+
eggs/
|
|
82
|
+
env.bak/
|
|
83
|
+
env/
|
|
84
|
+
ENV/
|
|
85
|
+
htmlcov/
|
|
86
|
+
instance/
|
|
87
|
+
ipython_config.py
|
|
88
|
+
knowledge/migrate.py
|
|
89
|
+
lib/
|
|
90
|
+
lib64/
|
|
91
|
+
local_settings.py
|
|
92
|
+
local.settings.json
|
|
93
|
+
MANIFEST
|
|
94
|
+
nosetests.xml
|
|
95
|
+
out
|
|
96
|
+
parts/
|
|
97
|
+
pip-delete-this-directory.txt
|
|
98
|
+
pip-log.txt
|
|
99
|
+
Pipfile
|
|
100
|
+
profile_default/
|
|
101
|
+
sdist/
|
|
102
|
+
share/python-wheels/
|
|
103
|
+
sketchpad/
|
|
104
|
+
sketchpad/
|
|
105
|
+
stores/
|
|
106
|
+
target/
|
|
107
|
+
tests/mcp_test.py
|
|
108
|
+
tmp.txt
|
|
109
|
+
uploaded_files/
|
|
110
|
+
uploads/
|
|
111
|
+
var/
|
|
112
|
+
venv.bak/
|
|
113
|
+
venv/
|
|
114
|
+
wheels/
|
|
@@ -0,0 +1,441 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: appkit-mantine
|
|
3
|
+
Version: 0.7.3
|
|
4
|
+
Summary: Mantine UI input components for Reflex with type safety and comprehensive examples
|
|
5
|
+
Project-URL: Homepage, https://github.com/jenreh/appkit
|
|
6
|
+
Project-URL: Documentation, https://github.com/jenreh/appkit/tree/main/docs
|
|
7
|
+
Project-URL: Repository, https://github.com/jenreh/appkit
|
|
8
|
+
Project-URL: Issues, https://github.com/jenreh/appkit/issues
|
|
9
|
+
License: MIT
|
|
10
|
+
Keywords: components,forms,input,mantine,react,reflex,ui,web
|
|
11
|
+
Classifier: Development Status :: 3 - Alpha
|
|
12
|
+
Classifier: Framework :: AsyncIO
|
|
13
|
+
Classifier: Intended Audience :: Developers
|
|
14
|
+
Classifier: License :: OSI Approved :: MIT License
|
|
15
|
+
Classifier: Programming Language :: Python :: 3
|
|
16
|
+
Classifier: Programming Language :: Python :: 3.12
|
|
17
|
+
Classifier: Topic :: Software Development :: Libraries :: Python Modules
|
|
18
|
+
Classifier: Topic :: Software Development :: User Interfaces
|
|
19
|
+
Requires-Python: >=3.12
|
|
20
|
+
Requires-Dist: reflex>=0.8.12
|
|
21
|
+
Description-Content-Type: text/markdown
|
|
22
|
+
|
|
23
|
+
# appkit-mantine
|
|
24
|
+
|
|
25
|
+
[](https://badge.fury.io/py/appkit-mantine)
|
|
26
|
+
[](https://www.python.org/downloads/)
|
|
27
|
+
[](https://opensource.org/licenses/MIT)
|
|
28
|
+
[](https://github.com/jenreh/reflex-mantine)
|
|
29
|
+
|
|
30
|
+
**reflex.dev components based on MantineUI**
|
|
31
|
+
|
|
32
|
+
A Reflex wrapper library focusing on [Mantine UI v8.3.3](https://mantine.dev) input components, designed for building robust forms and data entry interfaces in Python web applications.
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## ✨ Features
|
|
37
|
+
|
|
38
|
+
- **🎯 Input-Focused** - Comprehensive coverage of form inputs: text, password, number, date, masked inputs, textarea, and rich text editor
|
|
39
|
+
- **🔒 Type-Safe** - Full type annotations with IDE autocomplete support for all props and event handlers
|
|
40
|
+
- **📚 Rich Examples** - Production-ready code examples for every component with common patterns and edge cases
|
|
41
|
+
- **🏗️ Clean Architecture** - Inheritance-based design eliminating code duplication across 40+ common props
|
|
42
|
+
- **🎨 Mantine Integration** - Seamless integration with Mantine's theming, color modes, and design system
|
|
43
|
+
- **⚡ Modern Stack** - Built on Reflex 0.8.13+ with React 18 and Mantine 8.3.3
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## 📦 Installation
|
|
48
|
+
|
|
49
|
+
### Using pip
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
pip install appkit-mantine
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Using uv (recommended)
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
uv add appkit-mantine
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Development Installation
|
|
62
|
+
|
|
63
|
+
For local development or to run the demo application:
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
# Clone the repository
|
|
67
|
+
git clone https://github.com/jenreh/appkit.git
|
|
68
|
+
cd appkit
|
|
69
|
+
|
|
70
|
+
# Install with uv (installs workspace components)
|
|
71
|
+
uv sync
|
|
72
|
+
|
|
73
|
+
# Run the demo app
|
|
74
|
+
reflex run
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
> **⚠️ Pre-release Notice:** This library is in development. APIs may change before the 1.0 release.
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## 🚀 Quick Start
|
|
82
|
+
|
|
83
|
+
```python
|
|
84
|
+
import reflex as rx
|
|
85
|
+
import appkit_mantine as mn
|
|
86
|
+
|
|
87
|
+
class FormState(rx.State):
|
|
88
|
+
email: str = ""
|
|
89
|
+
password: str = ""
|
|
90
|
+
|
|
91
|
+
def login_form() -> rx.Component:
|
|
92
|
+
return rx.container(
|
|
93
|
+
rx.vstack(
|
|
94
|
+
rx.heading("Login"),
|
|
95
|
+
|
|
96
|
+
# Basic input with validation
|
|
97
|
+
mn.form.input(
|
|
98
|
+
label="Email",
|
|
99
|
+
placeholder="you@example.com",
|
|
100
|
+
value=FormState.email,
|
|
101
|
+
on_change=FormState.set_email,
|
|
102
|
+
required=True,
|
|
103
|
+
type="email",
|
|
104
|
+
),
|
|
105
|
+
|
|
106
|
+
# Password input with visibility toggle
|
|
107
|
+
mn.password_input(
|
|
108
|
+
label="Password",
|
|
109
|
+
value=FormState.password,
|
|
110
|
+
on_change=FormState.set_password,
|
|
111
|
+
required=True,
|
|
112
|
+
),
|
|
113
|
+
|
|
114
|
+
rx.button("Sign In", on_click=FormState.handle_login),
|
|
115
|
+
spacing="4",
|
|
116
|
+
),
|
|
117
|
+
max_width="400px",
|
|
118
|
+
)
|
|
119
|
+
|
|
120
|
+
app = rx.App()
|
|
121
|
+
app.add_page(login_form)
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## 📋 Available Components
|
|
127
|
+
|
|
128
|
+
### Inputs
|
|
129
|
+
|
|
130
|
+
| Component | Description | Documentation |
|
|
131
|
+
|-----------|-------------|---------------|
|
|
132
|
+
| **`text_input`** | Basic text input / text inputs showcase | [Guide](docs/MANTINE_INPUTS_GUIDE.md) |
|
|
133
|
+
| **`input`** | Polymorphic base input element with sections, variants, sizes | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/input_examples.py) |
|
|
134
|
+
| **`password_input`** | Password field with visibility toggle | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/password_input_examples.py) |
|
|
135
|
+
| **`date_input`** | Date picker with range constraints and formatting | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/date_input_examples.py) |
|
|
136
|
+
| **`number_input`** | Numeric input with formatting, min/max, step controls | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/number_input_examples.py) |
|
|
137
|
+
| **`textarea`** | Multi-line text input with auto-resize | [Guide](docs/MANTINE_TEXTAREA_GUIDE.md) |
|
|
138
|
+
| **`json_input`** | JSON input with formatting, validation, parser, pretty printing | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/json_input_examples.py) |
|
|
139
|
+
| **`select`** | Dropdown select with data array, inherits input props | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/select_examples.py) |
|
|
140
|
+
| **`multi_select`** | Multi-select dropdown for selecting multiple values | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/multi_select_examples.py) |
|
|
141
|
+
| **`tags_input`** | Free-form tags input component | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/tags_input_examples.py) |
|
|
142
|
+
| **`autocomplete`** | Autocomplete input with string data array | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/autocomplete_examples.py) |
|
|
143
|
+
| **`rich_text_editor`** | WYSIWYG editor powered by Tiptap | [Guide](docs/MANTINE_TIPTAP_GUIDE.md) |
|
|
144
|
+
| **`masked_input`** | Input masking for phone numbers, credit cards, custom patterns | [Guide](docs/MANTINE_INPUTS_GUIDE.md) |
|
|
145
|
+
|
|
146
|
+
### Buttons
|
|
147
|
+
|
|
148
|
+
| Component | Description | Documentation |
|
|
149
|
+
|-----------|-------------|---------------|
|
|
150
|
+
| **`action_icon`** | Lightweight button for icons with size, variant, radius, disabled state | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/action_icon_examples.py) |
|
|
151
|
+
| **`button`** | Button with variants, sizes, gradient, loading states, sections | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/button_examples.py) |
|
|
152
|
+
|
|
153
|
+
### Others
|
|
154
|
+
|
|
155
|
+
| Component | Description | Documentation |
|
|
156
|
+
|-----------|-------------|---------------|
|
|
157
|
+
| **`navigation_progress`** | Page loading progress indicator | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/nprogress_examples.py) |
|
|
158
|
+
| **`nav_link`** | Navigation link with label, description, icons, nested links, active/disabled states | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/nav_link_examples.py) |
|
|
159
|
+
| **`number_formatter`** | Formats numeric input with parser/formatter, returns parsed value | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/number_formatter_examples.py) |
|
|
160
|
+
| **`scroll_area`** | Scrollable container with custom scrollbars and virtualization | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/scroll_area_examples.py) |
|
|
161
|
+
| **`table`** | Table component for tabular data display | [Examples](https://github.com/jenreh/appkit/tree/main/app/pages/examples/table_examples.py) |
|
|
162
|
+
|
|
163
|
+
### Common Props (Inherited by All Inputs)
|
|
164
|
+
|
|
165
|
+
All input components inherit ~40 common props from `MantineInputComponentBase`:
|
|
166
|
+
|
|
167
|
+
```python
|
|
168
|
+
# Input.Wrapper props
|
|
169
|
+
label="Field Label"
|
|
170
|
+
description="Helper text"
|
|
171
|
+
error="Validation error"
|
|
172
|
+
required=True
|
|
173
|
+
with_asterisk=True # Show red asterisk for required fields
|
|
174
|
+
|
|
175
|
+
# Visual variants
|
|
176
|
+
variant="filled" # "default" | "filled" | "unstyled"
|
|
177
|
+
size="md" # "xs" | "sm" | "md" | "lg" | "xl"
|
|
178
|
+
radius="md" # "xs" | "sm" | "md" | "lg" | "xl"
|
|
179
|
+
|
|
180
|
+
# State management
|
|
181
|
+
value=State.field_value
|
|
182
|
+
default_value="Initial value"
|
|
183
|
+
placeholder="Enter text..."
|
|
184
|
+
disabled=False
|
|
185
|
+
|
|
186
|
+
# Sections (icons, buttons)
|
|
187
|
+
left_section=rx.icon("search")
|
|
188
|
+
right_section=rx.button("Clear")
|
|
189
|
+
left_section_pointer_events="none" # Click-through
|
|
190
|
+
|
|
191
|
+
# Mantine style props
|
|
192
|
+
w="100%" # width
|
|
193
|
+
maw="500px" # max-width
|
|
194
|
+
m="md" # margin
|
|
195
|
+
p="sm" # padding
|
|
196
|
+
|
|
197
|
+
# Event handlers
|
|
198
|
+
on_change=State.handle_change
|
|
199
|
+
on_focus=State.handle_focus
|
|
200
|
+
on_blur=State.handle_blur
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
## 📖 Usage Examples
|
|
204
|
+
|
|
205
|
+
### Basic Input with Validation
|
|
206
|
+
|
|
207
|
+
```python
|
|
208
|
+
import reflex as rx
|
|
209
|
+
import appkit_mantine as mn
|
|
210
|
+
|
|
211
|
+
class EmailState(rx.State):
|
|
212
|
+
email: str = ""
|
|
213
|
+
error: str = ""
|
|
214
|
+
|
|
215
|
+
def validate_email(self):
|
|
216
|
+
if "@" not in self.email:
|
|
217
|
+
self.error = "Invalid email format"
|
|
218
|
+
else:
|
|
219
|
+
self.error = ""
|
|
220
|
+
|
|
221
|
+
def email_input():
|
|
222
|
+
return mn.form.input(
|
|
223
|
+
label="Email Address",
|
|
224
|
+
description="We'll never share your email",
|
|
225
|
+
placeholder="you@example.com",
|
|
226
|
+
value=EmailState.email,
|
|
227
|
+
on_change=EmailState.set_email,
|
|
228
|
+
on_blur=EmailState.validate_email,
|
|
229
|
+
error=EmailState.error,
|
|
230
|
+
required=True,
|
|
231
|
+
type="email",
|
|
232
|
+
left_section=rx.icon("mail"),
|
|
233
|
+
)
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
### Number Input with Formatting
|
|
237
|
+
|
|
238
|
+
```python
|
|
239
|
+
class PriceState(rx.State):
|
|
240
|
+
price: float = 0.0
|
|
241
|
+
|
|
242
|
+
def price_input():
|
|
243
|
+
return mn.number_input(
|
|
244
|
+
label="Product Price",
|
|
245
|
+
value=PriceState.price,
|
|
246
|
+
on_change=PriceState.set_price,
|
|
247
|
+
prefix="$",
|
|
248
|
+
decimal_scale=2,
|
|
249
|
+
fixed_decimal_scale=True,
|
|
250
|
+
thousand_separator=",",
|
|
251
|
+
min=0,
|
|
252
|
+
max=999999.99,
|
|
253
|
+
step=0.01,
|
|
254
|
+
)
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
### Masked Input (Phone Number)
|
|
258
|
+
|
|
259
|
+
```python
|
|
260
|
+
class PhoneState(rx.State):
|
|
261
|
+
phone: str = ""
|
|
262
|
+
|
|
263
|
+
def phone_input():
|
|
264
|
+
return mn.masked_input(
|
|
265
|
+
label="Phone Number",
|
|
266
|
+
mask="+1 (000) 000-0000",
|
|
267
|
+
value=PhoneState.phone,
|
|
268
|
+
on_accept=PhoneState.set_phone, # Note: on_accept, not on_change
|
|
269
|
+
placeholder="+1 (555) 123-4567",
|
|
270
|
+
)
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
### Date Input with Constraints
|
|
274
|
+
|
|
275
|
+
```python
|
|
276
|
+
from datetime import date, timedelta
|
|
277
|
+
|
|
278
|
+
class BookingState(rx.State):
|
|
279
|
+
checkin: str = ""
|
|
280
|
+
|
|
281
|
+
def date_picker():
|
|
282
|
+
today = date.today()
|
|
283
|
+
max_date = today + timedelta(days=365)
|
|
284
|
+
|
|
285
|
+
return mn.date_input(
|
|
286
|
+
label="Check-in Date",
|
|
287
|
+
value=BookingState.checkin,
|
|
288
|
+
on_change=BookingState.set_checkin,
|
|
289
|
+
min_date=today.isoformat(),
|
|
290
|
+
max_date=max_date.isoformat(),
|
|
291
|
+
clear_button_props={"aria_label": "Clear date"},
|
|
292
|
+
)
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
### Rich Text Editor
|
|
296
|
+
|
|
297
|
+
```python
|
|
298
|
+
class EditorState(rx.State):
|
|
299
|
+
content: str = "<p>Start typing...</p>"
|
|
300
|
+
|
|
301
|
+
def editor():
|
|
302
|
+
return mn.rich_text_editor(
|
|
303
|
+
value=EditorState.content,
|
|
304
|
+
on_change=EditorState.set_content,
|
|
305
|
+
toolbar_config=mn.EditorToolbarConfig(
|
|
306
|
+
controls=[
|
|
307
|
+
mn.ToolbarControlGroup.FORMATTING,
|
|
308
|
+
mn.ToolbarControlGroup.LISTS,
|
|
309
|
+
mn.ToolbarControlGroup.LINKS,
|
|
310
|
+
]
|
|
311
|
+
),
|
|
312
|
+
)
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
### Action Icon
|
|
316
|
+
|
|
317
|
+
```python
|
|
318
|
+
def action_icon_example():
|
|
319
|
+
return mn.action_icon(
|
|
320
|
+
rx.icon("heart"),
|
|
321
|
+
variant="filled",
|
|
322
|
+
color="red",
|
|
323
|
+
size="lg",
|
|
324
|
+
on_click=State.like_item,
|
|
325
|
+
)
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
### Autocomplete
|
|
329
|
+
|
|
330
|
+
```python
|
|
331
|
+
class SearchState(rx.State):
|
|
332
|
+
query: str = ""
|
|
333
|
+
|
|
334
|
+
def autocomplete_example():
|
|
335
|
+
return mn.autocomplete(
|
|
336
|
+
label="Search",
|
|
337
|
+
placeholder="Type to search...",
|
|
338
|
+
data=["Apple", "Banana", "Cherry"],
|
|
339
|
+
value=SearchState.query,
|
|
340
|
+
on_change=SearchState.set_query,
|
|
341
|
+
)
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
### Button
|
|
345
|
+
|
|
346
|
+
```python
|
|
347
|
+
def button_example():
|
|
348
|
+
return mn.button(
|
|
349
|
+
"Click me",
|
|
350
|
+
variant="gradient",
|
|
351
|
+
gradient={"from": "blue", "to": "cyan"},
|
|
352
|
+
size="lg",
|
|
353
|
+
on_click=State.handle_click,
|
|
354
|
+
)
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
### Combobox
|
|
358
|
+
|
|
359
|
+
```python
|
|
360
|
+
def combobox_example():
|
|
361
|
+
return mn.combobox(
|
|
362
|
+
label="Select option",
|
|
363
|
+
data=[
|
|
364
|
+
{"value": "react", "label": "React"},
|
|
365
|
+
{"value": "vue", "label": "Vue"},
|
|
366
|
+
],
|
|
367
|
+
on_option_submit=State.set_selected,
|
|
368
|
+
)
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
### Input
|
|
372
|
+
|
|
373
|
+
```python
|
|
374
|
+
def input_example():
|
|
375
|
+
return mn.input(
|
|
376
|
+
placeholder="Enter text...",
|
|
377
|
+
left_section=rx.icon("search"),
|
|
378
|
+
right_section=rx.button("Clear"),
|
|
379
|
+
)
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
### JSON Input
|
|
383
|
+
|
|
384
|
+
```python
|
|
385
|
+
class JsonState(rx.State):
|
|
386
|
+
data: str = '{"name": "example"}'
|
|
387
|
+
|
|
388
|
+
def json_input_example():
|
|
389
|
+
return mn.json_input(
|
|
390
|
+
label="JSON Data",
|
|
391
|
+
value=JsonState.data,
|
|
392
|
+
on_change=JsonState.set_data,
|
|
393
|
+
format_on_blur=True,
|
|
394
|
+
)
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
### Nav Link
|
|
398
|
+
|
|
399
|
+
```python
|
|
400
|
+
def nav_link_example():
|
|
401
|
+
return mn.nav_link(
|
|
402
|
+
label="Dashboard",
|
|
403
|
+
left_section=rx.icon("home"),
|
|
404
|
+
active=True,
|
|
405
|
+
on_click=State.navigate_to_dashboard,
|
|
406
|
+
)
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
### Number Formatter
|
|
410
|
+
|
|
411
|
+
```python
|
|
412
|
+
class PriceState(rx.State):
|
|
413
|
+
amount: float = 1234.56
|
|
414
|
+
|
|
415
|
+
def number_formatter_example():
|
|
416
|
+
return mn.number_formatter(
|
|
417
|
+
value=PriceState.amount,
|
|
418
|
+
prefix="$",
|
|
419
|
+
thousand_separator=",",
|
|
420
|
+
decimal_scale=2,
|
|
421
|
+
)
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
### Select
|
|
425
|
+
|
|
426
|
+
```python
|
|
427
|
+
class SelectState(rx.State):
|
|
428
|
+
choice: str = ""
|
|
429
|
+
|
|
430
|
+
def select_example():
|
|
431
|
+
return mn.select(
|
|
432
|
+
label="Choose one",
|
|
433
|
+
data=["Option 1", "Option 2", "Option 3"],
|
|
434
|
+
value=SelectState.choice,
|
|
435
|
+
on_change=SelectState.set_choice,
|
|
436
|
+
)
|
|
437
|
+
```
|
|
438
|
+
|
|
439
|
+
## 📄 License
|
|
440
|
+
|
|
441
|
+
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
|