pyweft-ui 0.1.0__tar.gz

pyweft_ui-0.1.0/.gitignore

@@ -0,0 +1,10 @@
+__pycache__/
+*.py[cod]
+.pytest_cache/
+*.egg-info/
+build/
+dist/
+dist-desktop/
+.venv/
+CLAUDE.md
+PROMPTS.md

pyweft_ui-0.1.0/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+What changed in each release of `pyweft-ui`. Newest first.
+
+Add a line under **Unreleased** with each change worth knowing about;
+releasing moves them under the new version (see
+[RELEASING.md](../../RELEASING.md)).
+
+## Unreleased
+
+## 0.1.0
+
+The first release, for `pyweft` 0.2.
+
+- **22 controls**: `Theme`, `AppShell`, `Row`, `Column`, `Grid`, `Card`,
+  `Button`, `Icon`, `TextField`, `TextArea`, `NumberField`, `Select`,
+  `RadioGroup`, `Checkbox`, `Switch`, `Alert`, `Badge`, `Spinner`,
+  `Dialog`, `Tabs`, `Table` and `Toaster` with `toast()`.
+- Light, dark and system themes, every colour a `--ui-*` CSS variable.
+- Keyboard and screen reader support: labelled fields, focus kept inside
+  dialogs and returned on close, arrow keys between tabs, sortable table
+  headings announced.
+- A gallery app and a guide with tested examples.

pyweft_ui-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Prassanth Nicholas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

pyweft_ui-0.1.0/PKG-INFO

@@ -0,0 +1,184 @@
+Metadata-Version: 2.5
+Name: pyweft-ui
+Version: 0.1.0
+Summary: Ready-made controls for PyWeft: buttons, fields, cards, layout, dialogs. No HTML or CSS required.
+Project-URL: Homepage, https://github.com/prassanthn/PyWeft
+Project-URL: Documentation, https://github.com/prassanthn/PyWeft/blob/main/packages/pyweft-ui/docs/guide.md
+Project-URL: Issues, https://github.com/prassanthn/PyWeft/issues
+Author: Prassanth Nicholas
+License-Expression: MIT
+License-File: LICENSE
+Keywords: components,controls,pyodide,pyweft,ui
+Classifier: Development Status :: 3 - Alpha
+Classifier: Intended Audience :: Developers
+Classifier: Programming Language :: Python :: 3
+Classifier: Topic :: Software Development :: User Interfaces
+Requires-Python: >=3.10
+Requires-Dist: pyweft<0.3,>=0.2
+Description-Content-Type: text/markdown
+
+# pyweft-ui
+
+Ready-made controls for [PyWeft](https://github.com/prassanthn/PyWeft):
+buttons, form fields, cards, layout, tabs, tables, dialogs, toasts and more,
+styled and accessible out of the box. Build a good-looking app in Python without writing HTML or
+CSS.
+
+```xml
+<template>
+  <ui.Theme>
+    <ui.AppShell title="Orders">
+      <ui.Card title="New order">
+        <ui.Column>
+          <ui.TextField label="Customer" @bind="customer" required="true" />
+          <ui.Select label="Size" options="Small, Medium, Large" @bind="size" />
+          <ui.Switch label="Express delivery" @bind="express" />
+        </ui.Column>
+        <Fill name="footer">
+          <ui.Button variant="ghost" @click="reset">Reset</ui.Button>
+          <ui.Button variant="primary" icon="send" :loading="saving" @click="submit">
+            Place order
+          </ui.Button>
+        </Fill>
+      </ui.Card>
+    </ui.AppShell>
+  </ui.Theme>
+</template>
+
+<code>
+from pyweft_ui import ui
+
+customer: str = ""
+size: str = "Medium"
+express: bool = False
+saving: bool = False
+
+def reset(self):
+    self.customer, self.size, self.express = "", "Medium", False
+
+async def submit(self):
+    ...
+</code>
+```
+
+**New to the toolkit? Read the [guide](docs/guide.md)**: page layout, forms
+with validation, dialogs, themes and building your own components, with
+complete examples. This README is the compact reference.
+
+## Install
+
+It isn't on PyPI yet, so install it from GitHub, into the same environment
+as PyWeft itself (see PyWeft's [quick start](../../README.md#quick-start)):
+
+```bash
+uv add "pyweft-ui @ git+https://github.com/prassanthn/PyWeft.git#subdirectory=packages/pyweft-ui"
+```
+
+With pip:
+
+```bash
+pip install "git+https://github.com/prassanthn/PyWeft.git#subdirectory=packages/pyweft-ui"
+```
+
+Then add `"pyweft-ui"` to the `dependencies` list in your app's own
+`pyproject.toml` (`myapp/pyproject.toml`), import it in a component's code
+block with `from pyweft_ui import ui`, and use the controls as `<ui.Name>`.
+`pyweft run` and `pyweft build` see that it is installed locally and send it
+to the browser for you.
+
+## Controls
+
+Every control is a PyWeft component: attributes set its fields, `@bind`
+connects it to a field of yours, and attributes it doesn't have, such as
+`class`, `style`, `id` and `aria-*`, go onto its outer element. Plain
+attribute values are converted to each field's type, so `cols="3"` is the
+number 3 and `disabled="true"` is `True`.
+
+### Layout
+
+| Control | Fields | Notes |
+|---|---|---|
+| `Theme` | `mode` (light, dark, auto), `primary`, `radius`, `font` | Wrap your app in it to set colours and corners for everything inside. Optional. |
+| `AppShell` | `title`, `width` (narrow, normal, wide, full) | Header, optional sidebar and content. Fills: `brand`, `actions`, `nav`. |
+| `Row` | `gap`, `align`, `justify` (start, center, end, between), `wrap` | Children side by side. |
+| `Column` | `gap`, `align` | Children stacked. |
+| `Grid` | `cols`, `min_width`, `gap` | Fixed columns, or as many as fit. |
+| `Card` | `title`, `subtitle` | Fills: `title`, `actions`, `footer`. |
+
+Gaps take `none`, `xs`, `sm`, `md`, `lg`, `xl`, or any CSS length.
+
+### Form fields
+
+All have `label`, `hint`, `error`, `required`, `disabled`, `name`, and take
+`@bind`.
+
+| Control | Binds | Extra fields |
+|---|---|---|
+| `TextField` | `str` | `type` (text, email, password, search, url, tel, date, time), `placeholder`, `autocomplete`; emits `enter` on Enter |
+| `TextArea` | `str` | `rows`, `placeholder` |
+| `NumberField` | `int` or `float` | `min`, `max`, `step`, `placeholder` |
+| `Select` | the chosen option's value | `options`, `placeholder` |
+| `RadioGroup` | the chosen option's value | `options`, `inline` |
+| `Checkbox` | `bool` | |
+| `Switch` | `bool` | |
+
+`options` can be a comma-separated string (`"Small, Medium, Large"`), a list
+of values, a list of `(value, label)` pairs or a list of
+`{"value": ..., "label": ...}` dicts. The bound field gets the value itself,
+so `[(1, "One"), (2, "Two")]` binds an `int`.
+
+### Data and navigation
+
+| Control | Fields | Notes |
+|---|---|---|
+| `Tabs` | `options`, `label`, `variant` (line, pills) | `@bind` to the chosen option's value. The content between the tags is the panel; `tab` inside it is the chosen value. Arrow keys, Home and End move between tabs. |
+| `Table` | `rows`, `columns`, `row_key`, `sortable`, `sort`, `striped`, `dense`, `caption`, `empty` | `rows` are dicts or objects. Emits `select` with the clicked row. Fills: `cell` (with `row`, `column`, `value`, `text`), `empty`. |
+
+`Table` columns are field names (`"id, customer"`), `(field, heading)` pairs,
+or dicts with `key` and optionally `label`, `format` (`",.2f"` or a
+function), `align` and `sortable`. Left out, they come from the first row.
+`sort="-total"` starts sorted by `total`, largest first.
+
+### Actions and feedback
+
+| Control | Fields | Notes |
+|---|---|---|
+| `Button` | `variant` (primary, secondary, ghost, danger), `size` (sm, md, lg), `icon`, `loading`, `disabled`, `block`, `type` | Emits `click`. |
+| `Dialog` | `title`, `width`, `dismissible` | `@bind` to a `bool`: open while it is `True`. Esc, a click outside or the X close it. Keeps Tab inside while open and gives focus back when closed. Fill: `footer`. |
+| `Toaster` | `position` (bottom-right, bottom-left, bottom-center, top-left, top-center, top-right), `limit` | Put one on the page; it shows what `toast()` raises. |
+| `Alert` | `kind` (info, success, warning, danger), `title`, `dismissible` | Emits `close`. |
+| `Badge` | `kind` (neutral, primary, info, success, warning, danger) | |
+| `Spinner` | `size`, `label` | |
+| `Icon` | `name`, `size` | check, x, plus, minus, search, info, alert, chevron-up/down/left/right, menu, trash, edit, send, user, home, star, heart, download, upload, external, copy, settings, sun, moon |
+
+## Toasts
+
+```python
+from pyweft_ui import toast, clear_toasts
+
+toast("Saved")                                   # info, closes after 4 s
+toast("Payment failed", "danger", title="Oops")  # kind: info, success, warning, danger
+toast("Archived", action="Undo", on_action=undo) # a button that calls undo()
+note = toast("Uploading…", duration=None)        # stays until note.close()
+```
+
+Call it from any handler or task; the page's `<ui.Toaster />` shows it.
+
+## Theming
+
+```xml
+<ui.Theme mode="auto" primary="#0f766e" radius="12px">
+  ...
+</ui.Theme>
+```
+
+Every colour is a CSS variable (`--ui-primary`, `--ui-text`, `--ui-surface`,
+`--ui-border`, `--ui-danger` ...), so you can also set them in your own CSS.
+
+## The gallery
+
+`gallery/` is a PyWeft app showing every control. From the PyWeft repository:
+
+```bash
+uv run pyweft run packages/pyweft-ui/gallery
+```

pyweft_ui-0.1.0/README.md

@@ -0,0 +1,165 @@
+# pyweft-ui
+
+Ready-made controls for [PyWeft](https://github.com/prassanthn/PyWeft):
+buttons, form fields, cards, layout, tabs, tables, dialogs, toasts and more,
+styled and accessible out of the box. Build a good-looking app in Python without writing HTML or
+CSS.
+
+```xml
+<template>
+  <ui.Theme>
+    <ui.AppShell title="Orders">
+      <ui.Card title="New order">
+        <ui.Column>
+          <ui.TextField label="Customer" @bind="customer" required="true" />
+          <ui.Select label="Size" options="Small, Medium, Large" @bind="size" />
+          <ui.Switch label="Express delivery" @bind="express" />
+        </ui.Column>
+        <Fill name="footer">
+          <ui.Button variant="ghost" @click="reset">Reset</ui.Button>
+          <ui.Button variant="primary" icon="send" :loading="saving" @click="submit">
+            Place order
+          </ui.Button>
+        </Fill>
+      </ui.Card>
+    </ui.AppShell>
+  </ui.Theme>
+</template>
+
+<code>
+from pyweft_ui import ui
+
+customer: str = ""
+size: str = "Medium"
+express: bool = False
+saving: bool = False
+
+def reset(self):
+    self.customer, self.size, self.express = "", "Medium", False
+
+async def submit(self):
+    ...
+</code>
+```
+
+**New to the toolkit? Read the [guide](docs/guide.md)**: page layout, forms
+with validation, dialogs, themes and building your own components, with
+complete examples. This README is the compact reference.
+
+## Install
+
+It isn't on PyPI yet, so install it from GitHub, into the same environment
+as PyWeft itself (see PyWeft's [quick start](../../README.md#quick-start)):
+
+```bash
+uv add "pyweft-ui @ git+https://github.com/prassanthn/PyWeft.git#subdirectory=packages/pyweft-ui"
+```
+
+With pip:
+
+```bash
+pip install "git+https://github.com/prassanthn/PyWeft.git#subdirectory=packages/pyweft-ui"
+```
+
+Then add `"pyweft-ui"` to the `dependencies` list in your app's own
+`pyproject.toml` (`myapp/pyproject.toml`), import it in a component's code
+block with `from pyweft_ui import ui`, and use the controls as `<ui.Name>`.
+`pyweft run` and `pyweft build` see that it is installed locally and send it
+to the browser for you.
+
+## Controls
+
+Every control is a PyWeft component: attributes set its fields, `@bind`
+connects it to a field of yours, and attributes it doesn't have, such as
+`class`, `style`, `id` and `aria-*`, go onto its outer element. Plain
+attribute values are converted to each field's type, so `cols="3"` is the
+number 3 and `disabled="true"` is `True`.
+
+### Layout
+
+| Control | Fields | Notes |
+|---|---|---|
+| `Theme` | `mode` (light, dark, auto), `primary`, `radius`, `font` | Wrap your app in it to set colours and corners for everything inside. Optional. |
+| `AppShell` | `title`, `width` (narrow, normal, wide, full) | Header, optional sidebar and content. Fills: `brand`, `actions`, `nav`. |
+| `Row` | `gap`, `align`, `justify` (start, center, end, between), `wrap` | Children side by side. |
+| `Column` | `gap`, `align` | Children stacked. |
+| `Grid` | `cols`, `min_width`, `gap` | Fixed columns, or as many as fit. |
+| `Card` | `title`, `subtitle` | Fills: `title`, `actions`, `footer`. |
+
+Gaps take `none`, `xs`, `sm`, `md`, `lg`, `xl`, or any CSS length.
+
+### Form fields
+
+All have `label`, `hint`, `error`, `required`, `disabled`, `name`, and take
+`@bind`.
+
+| Control | Binds | Extra fields |
+|---|---|---|
+| `TextField` | `str` | `type` (text, email, password, search, url, tel, date, time), `placeholder`, `autocomplete`; emits `enter` on Enter |
+| `TextArea` | `str` | `rows`, `placeholder` |
+| `NumberField` | `int` or `float` | `min`, `max`, `step`, `placeholder` |
+| `Select` | the chosen option's value | `options`, `placeholder` |
+| `RadioGroup` | the chosen option's value | `options`, `inline` |
+| `Checkbox` | `bool` | |
+| `Switch` | `bool` | |
+
+`options` can be a comma-separated string (`"Small, Medium, Large"`), a list
+of values, a list of `(value, label)` pairs or a list of
+`{"value": ..., "label": ...}` dicts. The bound field gets the value itself,
+so `[(1, "One"), (2, "Two")]` binds an `int`.
+
+### Data and navigation
+
+| Control | Fields | Notes |
+|---|---|---|
+| `Tabs` | `options`, `label`, `variant` (line, pills) | `@bind` to the chosen option's value. The content between the tags is the panel; `tab` inside it is the chosen value. Arrow keys, Home and End move between tabs. |
+| `Table` | `rows`, `columns`, `row_key`, `sortable`, `sort`, `striped`, `dense`, `caption`, `empty` | `rows` are dicts or objects. Emits `select` with the clicked row. Fills: `cell` (with `row`, `column`, `value`, `text`), `empty`. |
+
+`Table` columns are field names (`"id, customer"`), `(field, heading)` pairs,
+or dicts with `key` and optionally `label`, `format` (`",.2f"` or a
+function), `align` and `sortable`. Left out, they come from the first row.
+`sort="-total"` starts sorted by `total`, largest first.
+
+### Actions and feedback
+
+| Control | Fields | Notes |
+|---|---|---|
+| `Button` | `variant` (primary, secondary, ghost, danger), `size` (sm, md, lg), `icon`, `loading`, `disabled`, `block`, `type` | Emits `click`. |
+| `Dialog` | `title`, `width`, `dismissible` | `@bind` to a `bool`: open while it is `True`. Esc, a click outside or the X close it. Keeps Tab inside while open and gives focus back when closed. Fill: `footer`. |
+| `Toaster` | `position` (bottom-right, bottom-left, bottom-center, top-left, top-center, top-right), `limit` | Put one on the page; it shows what `toast()` raises. |
+| `Alert` | `kind` (info, success, warning, danger), `title`, `dismissible` | Emits `close`. |
+| `Badge` | `kind` (neutral, primary, info, success, warning, danger) | |
+| `Spinner` | `size`, `label` | |
+| `Icon` | `name`, `size` | check, x, plus, minus, search, info, alert, chevron-up/down/left/right, menu, trash, edit, send, user, home, star, heart, download, upload, external, copy, settings, sun, moon |
+
+## Toasts
+
+```python
+from pyweft_ui import toast, clear_toasts
+
+toast("Saved")                                   # info, closes after 4 s
+toast("Payment failed", "danger", title="Oops")  # kind: info, success, warning, danger
+toast("Archived", action="Undo", on_action=undo) # a button that calls undo()
+note = toast("Uploading…", duration=None)        # stays until note.close()
+```
+
+Call it from any handler or task; the page's `<ui.Toaster />` shows it.
+
+## Theming
+
+```xml
+<ui.Theme mode="auto" primary="#0f766e" radius="12px">
+  ...
+</ui.Theme>
+```
+
+Every colour is a CSS variable (`--ui-primary`, `--ui-text`, `--ui-surface`,
+`--ui-border`, `--ui-danger` ...), so you can also set them in your own CSS.
+
+## The gallery
+
+`gallery/` is a PyWeft app showing every control. From the PyWeft repository:
+
+```bash
+uv run pyweft run packages/pyweft-ui/gallery
+```