Metadata-Version: 2.5
Name: spaday-lion
Version: 0.3.0
Summary: Lion for spaday
Project-URL: Repository, https://github.com/1kbgz/spaday-lion
Project-URL: Homepage, https://github.com/1kbgz/spaday-lion
Author-email: 1kbgz <dev@1kbgz.com>
License: Apache-2.0
License-File: LICENSE
Classifier: Development Status :: 3 - Alpha
Classifier: Programming Language :: Python
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Programming Language :: Python :: 3.13
Classifier: Programming Language :: Python :: 3.14
Classifier: Programming Language :: Python :: Implementation :: CPython
Classifier: Programming Language :: Python :: Implementation :: PyPy
Requires-Python: >=3.11
Requires-Dist: spaday<1.0,>=0.11.1
Provides-Extra: develop
Requires-Dist: build; extra == 'develop'
Requires-Dist: bump-my-version; extra == 'develop'
Requires-Dist: check-dist; extra == 'develop'
Requires-Dist: codespell; extra == 'develop'
Requires-Dist: hatch-js; extra == 'develop'
Requires-Dist: hatchling; extra == 'develop'
Requires-Dist: httpx; extra == 'develop'
Requires-Dist: mdformat; extra == 'develop'
Requires-Dist: mdformat-tables>=1; extra == 'develop'
Requires-Dist: pydantic>=2; extra == 'develop'
Requires-Dist: pytest; extra == 'develop'
Requires-Dist: pytest-cov; extra == 'develop'
Requires-Dist: ruff; extra == 'develop'
Requires-Dist: starlette; extra == 'develop'
Requires-Dist: transports; extra == 'develop'
Requires-Dist: twine; extra == 'develop'
Requires-Dist: ty; extra == 'develop'
Requires-Dist: uv; extra == 'develop'
Requires-Dist: uvicorn; extra == 'develop'
Requires-Dist: websockets; extra == 'develop'
Requires-Dist: wheel; extra == 'develop'
Provides-Extra: examples
Requires-Dist: pydantic>=2; extra == 'examples'
Requires-Dist: starlette; extra == 'examples'
Requires-Dist: transports; extra == 'examples'
Requires-Dist: uvicorn; extra == 'examples'
Requires-Dist: websockets; extra == 'examples'
Description-Content-Type: text/markdown

<a href="https://github.com/1kbgz/spaday-lion">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/1kbgz/spaday-lion/raw/main/docs/img/logo-dark.webp?raw=true">
    <img alt="spaday-lion logo, a lion face inside a browser window" src="https://github.com/1kbgz/spaday-lion/raw/main/docs/img/logo-light.webp?raw=true" width="1200">
  </picture>
</a>

Typed [Lion](https://lion.js.org) components and browser assets for [spaday](https://github.com/1kbgz/spaday).

[![Build Status](https://github.com/1kbgz/spaday-lion/actions/workflows/build.yaml/badge.svg?branch=main&event=push)](https://github.com/1kbgz/spaday-lion/actions/workflows/build.yaml)
[![codecov](https://codecov.io/gh/1kbgz/spaday-lion/branch/main/graph/badge.svg)](https://codecov.io/gh/1kbgz/spaday-lion)
[![License](https://img.shields.io/github/license/1kbgz/spaday-lion)](https://github.com/1kbgz/spaday-lion)
[![PyPI](https://img.shields.io/pypi/v/spaday-lion.svg)](https://pypi.python.org/pypi/spaday-lion)

[![Preview of Lion components in spaday rendering a bank account opening page](https://raw.githubusercontent.com/1kbgz/spaday-lion/main/docs/img/preview.webp)](https://1kbgz.github.io/spaday-lion/lite/)

## Overview

```python
from spaday import SetField, element, serve
from spaday_lion import LionButton, LionInput

page = element("form").child(
    LionInput(label="Name", name="name"),
    LionButton().text("Approve").on("click", SetField("state", "approved")),
    element("output").bind("textContent", "state"),
)
serve(page, packages=["lion"], store={"state": "pending"})
```

Every element `@lion/ui` registers has a typed class generated from its Custom Elements Manifest,
including the attributes its form and localization mixins contribute, so props, events and slots are
checked when you author the tree. Installing the package does not inject assets; select it with
`packages=["lion"]` or pass the exported `package` descriptor.

## Generic controls

Select the `lion` design to render spaday's generic controls as Lion elements:

```python
from spaday import Button, Column, TextInput
from spaday.backends.starlette import serve

page = Column(
    TextInput(label="Name").bind("value", "name", mode="two-way"),
    Button(label="Save", intent="primary"),
)
app = serve(page, packages=["lion"], design="lion", store={"name": ""})
```

Lion realizes 12 of the 13 generic controls. `Alert` uses spaday's marked native fallback because
Lion does not provide a static alert component.

## Browser examples

- [Open the standard app](https://1kbgz.github.io/spaday-lion/lite/) ([source](spaday_lion/example.py)).
- [Open the complete component gallery](https://1kbgz.github.io/spaday-lion/lite/?example=gallery) ([source](spaday_lion/gallery.py)).

Both run Python locally through Pyodide; no install or server is required.

## Run examples locally

```bash
python -m pip install -e ".[examples]"
python -m spaday_lion.example
python -m spaday_lion.gallery
```

Open `http://127.0.0.1:8025` for the standard account-opening app or `http://127.0.0.1:8026` for the
component gallery. The standard app includes a complete `lion-form`, two-way bindings, an endpoint-backed
submission flow, a review queue streamed from Python, overlays, navigation, and shared dark-theme state.
The gallery includes every generated Lion component and a highlighted Python snippet for each component
family.

Both pass the local package descriptor directly, so they do not install or resolve the integration from
GitHub.

## Theming

Lion is white-label: its elements ship functional styles instead of a palette. Disabled form-control
text follows `--spa-muted` by default. Override Lion's native custom property on an app or one
component when it needs a different value:

```python
from spaday import App
from spaday_lion import LionDrawer, LionInput, LionTooltip

App(
    LionInput(label="Account").css(disabled_text_color="#64748b"),
    LionTooltip().css(tooltip_arrow_width="18px", tooltip_arrow_height="11px"),
    LionDrawer().css(min_width="16rem", max_width="32rem", transition_property="width"),
)
```

`spaday_lion.TOKENS` lists all ten custom properties consumed by Lion's registered production
components: disabled text, tooltip arrow dimensions, and drawer size and transition controls. Style
the rest of Lion with ordinary CSS, reading the shell's tokens where they fit:

```css
lion-button { background: var(--spa-accent); border: 1px solid var(--spa-border); }
```

## Sharing Lion with your own library

Lion registers global custom element names, so a second copy on the page throws from
`customElements.define`. The package serves Lion's modules under their own bare specifiers —
`@lion/ui/button.js`, `@lion/ui/define/lion-button.js`, the translation modules and the rest of its
exports — through the page's import map. A library built on Lion that leaves those imports out of its
bundle (`external: ["@lion/ui"]` with esbuild) gets this copy, and nothing registers twice.

> [!NOTE]
> This library was generated using [copier](https://copier.readthedocs.io/en/stable/) from the [Base Python Project Template repository](https://github.com/python-project-templates/base).
