pyweft-ui 0.1.0__py3-none-any.whl

pyweft_ui/__init__.py

@@ -0,0 +1,23 @@
+"""pyweft-ui: ready-made controls for PyWeft.
+
+In a component's code block::
+
+    from pyweft_ui import ui
+
+then in its template ``<ui.Button>``, ``<ui.TextField @bind="name" />``,
+``<ui.Card>`` and the rest. Each control is a ``.weft`` file in this folder,
+loaded the first time it is used. ``toast()`` shows a message in the
+page's ``<ui.Toaster />``.
+"""
+
+from pathlib import Path
+
+from pyweft import ComponentLibrary
+
+from .toasts import Toast, clear_toasts, toast
+
+__version__ = "0.1.0"
+
+ui = ComponentLibrary(Path(__file__).parent, prefix="ui")
+
+__all__ = ["ui", "toast", "clear_toasts", "Toast", "__version__"]

pyweft_ui/alert.weft

@@ -0,0 +1,48 @@
+<template>
+  <div :class="'alert alert-' + kind" :role="'alert' if kind in ('danger', 'warning') else 'status'">
+    <Icon :name="icon_name" size="1.25em" />
+    <div class="content">
+      <If cond="title"><strong class="title">{{ title }}</strong></If>
+      <div><Slot /></div>
+    </div>
+    <If cond="dismissible">
+      <button class="close" type="button" aria-label="Dismiss" @click="emit('close')"><Icon name="x" /></button>
+    </If>
+  </div>
+</template>
+
+<code>
+# <ui.Alert kind="success" title="Saved">Your changes are live.</ui.Alert>
+# With dismissible="true" it shows an X and emits "close" when clicked.
+kind: str = "info"        # info, success, warning, danger
+title: str = ""
+dismissible: bool = False
+
+_ICONS = {"info": "info", "success": "check", "warning": "alert", "danger": "alert"}
+
+@property
+def icon_name(self):
+    return _ICONS.get(self.kind, "info")
+</code>
+
+<style>
+.alert {
+  --tone: var(--ui-info, #0969da);
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
+  border-radius: var(--ui-radius, 8px);
+  background: color-mix(in srgb, var(--tone) 10%, var(--ui-surface, #fff));
+}
+.alert > .icon { color: var(--tone); margin-top: 0.1em; }
+.alert-success { --tone: var(--ui-success, #1a7f37); }
+.alert-warning { --tone: var(--ui-warning, #9a6700); }
+.alert-danger { --tone: var(--ui-danger, #d1242f); }
+.content { flex: 1; min-width: 0; }
+.title { display: block; margin-bottom: 2px; }
+.close {
+  border: 0; background: transparent; color: inherit; cursor: pointer;
+  padding: 2px; border-radius: 4px; line-height: 0; opacity: 0.7;
+}
+.close:hover { opacity: 1; background: color-mix(in srgb, var(--tone) 15%, transparent); }
+</style>

pyweft_ui/app_shell.weft

@@ -0,0 +1,47 @@
+<template>
+  <div class="shell">
+    <header class="top">
+      <div class="brand"><Slot name="brand">{{ title }}</Slot></div>
+      <div class="actions"><Slot name="actions" /></div>
+    </header>
+    <div class="frame">
+      <If cond="has_slot('nav')">
+        <nav class="side"><Slot name="nav" /></nav>
+      </If>
+      <main class="main" :style="f'max-width: {_WIDTHS.get(width, width)}'"><Slot /></main>
+    </div>
+  </div>
+</template>
+
+<code>
+# The page frame: a header bar, an optional sidebar (<Fill name="nav">) and
+# the content. The sidebar moves above the content on narrow screens.
+title: str = ""
+width: str = "normal"   # narrow, normal, wide, full, or any CSS width
+
+_WIDTHS = {"narrow": "40rem", "normal": "64rem", "wide": "80rem", "full": "none"}
+</code>
+
+<style>
+.shell { display: flex; flex-direction: column; min-height: 100vh; }
+.top {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  padding: 12px 24px;
+  border-bottom: 1px solid var(--ui-border, #d1d9e0);
+  background: var(--ui-surface, #fff);
+}
+.brand { font-weight: 650; font-size: 1.1rem; }
+.actions { display: flex; align-items: center; gap: 8px; }
+.frame { display: flex; flex: 1; }
+.side {
+  width: 220px; flex-shrink: 0; padding: 16px;
+  border-right: 1px solid var(--ui-border, #d1d9e0);
+  display: flex; flex-direction: column; gap: 4px;
+}
+.main { flex: 1; width: 100%; margin: 0 auto; padding: 24px; box-sizing: border-box; }
+@media (max-width: 720px) {
+  .frame { flex-direction: column; }
+  .side { width: auto; border-right: 0; border-bottom: 1px solid var(--ui-border, #d1d9e0); flex-direction: row; flex-wrap: wrap; }
+  .top, .main { padding-left: 16px; padding-right: 16px; }
+}
+</style>

pyweft_ui/badge.weft

@@ -0,0 +1,25 @@
+<template>
+  <span :class="'badge badge-' + kind"><Slot /></span>
+</template>
+
+<code>
+# <ui.Badge kind="success">Active</ui.Badge>
+kind: str = "neutral"     # neutral, primary, info, success, warning, danger
+</code>
+
+<style>
+.badge {
+  --tone: var(--ui-muted, #59636e);
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 0.1em 0.6em;
+  border-radius: 999px;
+  font-size: 0.8rem; font-weight: 600; line-height: 1.5;
+  color: var(--tone);
+  background: color-mix(in srgb, var(--tone) 14%, transparent);
+}
+.badge-primary { --tone: var(--ui-primary, #4f46e5); }
+.badge-info { --tone: var(--ui-info, #0969da); }
+.badge-success { --tone: var(--ui-success, #1a7f37); }
+.badge-warning { --tone: var(--ui-warning, #9a6700); }
+.badge-danger { --tone: var(--ui-danger, #d1242f); }
+</style>

pyweft_ui/button.weft

@@ -0,0 +1,64 @@
+<template>
+  <button :type="type" :class="classes" :disabled="disabled or loading"
+          :aria-busy="'true' if loading else None" @click="emit('click', event)">
+    <If cond="loading"><span class="spinner" aria-hidden="true"></span></If>
+    <ElseIf cond="icon"><Icon :name="icon" size="1.15em" /></ElseIf>
+    <Slot />
+  </button>
+</template>
+
+<code>
+# <ui.Button variant="primary" icon="send" @click="save">Send</ui.Button>
+variant: str = "secondary"   # primary, secondary, ghost, danger
+size: str = "md"             # sm, md, lg
+type: str = "button"         # submit inside a form that should submit
+icon: str = ""               # an icon name, shown before the text
+loading: bool = False        # spinner, and not clickable
+disabled: bool = False
+block: bool = False          # full width
+
+@property
+def classes(self):
+    names = ["btn", f"btn-{self.variant}", f"btn-{self.size}"]
+    if self.block:
+        names.append("btn-block")
+    return " ".join(names)
+</code>
+
+<style>
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius, 8px);
+  font: inherit; font-weight: 550; line-height: 1.2;
+  cursor: pointer; white-space: nowrap;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
+}
+.btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary, #4f46e5) 35%, transparent);
+}
+.btn:disabled { opacity: 0.55; cursor: not-allowed; }
+.btn-sm { padding: 0.3em 0.75em; font-size: 0.875rem; }
+.btn-md { padding: 0.5em 1em; font-size: 0.95rem; }
+.btn-lg { padding: 0.7em 1.3em; font-size: 1.05rem; }
+.btn-block { display: flex; width: 100%; }
+.btn-primary { background: var(--ui-primary, #4f46e5); color: var(--ui-on-primary, #fff); }
+.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-primary, #4f46e5) 88%, black); }
+.btn-secondary {
+  background: var(--ui-surface, #fff); color: var(--ui-text, #1f2328);
+  border-color: var(--ui-border, #d1d9e0);
+}
+.btn-secondary:hover:not(:disabled) { background: var(--ui-subtle, #f6f8fa); }
+.btn-ghost { background: transparent; color: var(--ui-text, #1f2328); }
+.btn-ghost:hover:not(:disabled) { background: var(--ui-subtle, #f6f8fa); }
+.btn-danger { background: var(--ui-danger, #d1242f); color: #fff; }
+.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-danger, #d1242f) 88%, black); }
+.spinner {
+  width: 1em; height: 1em; border-radius: 50%;
+  border: 2px solid currentColor; border-right-color: transparent;
+  animation: ui-button-spin 0.7s linear infinite;
+}
+@keyframes ui-button-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.1s; } }
+</style>

pyweft_ui/card.weft

@@ -0,0 +1,45 @@
+<template>
+  <section class="card">
+    <If cond="title or subtitle or has_slot('title') or has_slot('actions')">
+      <header class="head">
+        <div>
+          <h3 class="title"><Slot name="title">{{ title }}</Slot></h3>
+          <If cond="subtitle"><p class="subtitle">{{ subtitle }}</p></If>
+        </div>
+        <If cond="has_slot('actions')"><div class="actions"><Slot name="actions" /></div></If>
+      </header>
+    </If>
+    <div class="body"><Slot /></div>
+    <If cond="has_slot('footer')"><footer class="foot"><Slot name="footer" /></footer></If>
+  </section>
+</template>
+
+<code>
+# A panel. Content between the tags is the body; <Fill name="title">,
+# <Fill name="actions"> (top right) and <Fill name="footer"> are optional.
+title: str = ""
+subtitle: str = ""
+</code>
+
+<style>
+.card {
+  background: var(--ui-surface, #fff);
+  border: 1px solid var(--ui-border, #d1d9e0);
+  border-radius: calc(var(--ui-radius, 8px) * 1.5);
+  overflow: hidden;
+}
+.head {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
+  padding: 16px 20px 0;
+}
+.title { margin: 0; font-size: 1.05rem; font-weight: 650; }
+.subtitle { margin: 2px 0 0; color: var(--ui-muted, #59636e); font-size: 0.9rem; }
+.actions { display: flex; gap: 8px; }
+.body { padding: 16px 20px; }
+.foot {
+  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
+  padding: 12px 20px;
+  border-top: 1px solid var(--ui-border, #d1d9e0);
+  background: var(--ui-subtle, #f6f8fa);
+}
+</style>

pyweft_ui/checkbox.weft

@@ -0,0 +1,26 @@
+<template>
+  <label class="check">
+    <input type="checkbox" :checked="value" :name="name or None" :disabled="disabled"
+           @change="emit('update', event.checked)" />
+    <span><Slot>{{ label }}</Slot></span>
+  </label>
+</template>
+
+<code>
+# <ui.Checkbox label="Remember me" @bind="remember" />
+label: str = ""
+value: bool = False
+name: str = ""
+disabled: bool = False
+</code>
+
+<style>
+.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
+input {
+  width: 1.1em; height: 1.1em; margin: 0;
+  accent-color: var(--ui-primary, #4f46e5);
+  cursor: inherit;
+}
+input:disabled { cursor: not-allowed; }
+input:disabled + span { opacity: 0.6; }
+</style>

pyweft_ui/column.weft

@@ -0,0 +1,23 @@
+<template>
+  <div class="column" :style="layout"><Slot /></div>
+</template>
+
+<code>
+# Children stacked top to bottom.
+gap: str = "md"          # none, xs, sm, md, lg, xl, or a CSS length
+align: str = "stretch"   # stretch, start, center, end (horizontal)
+
+_SPACE = {"none": "0", "xs": "4px", "sm": "8px", "md": "12px", "lg": "20px", "xl": "32px"}
+_FLEX = {"start": "flex-start", "end": "flex-end"}
+
+@property
+def layout(self):
+    return (
+        f"gap: {_SPACE.get(self.gap, self.gap)}; "
+        f"align-items: {_FLEX.get(self.align, self.align)}"
+    )
+</code>
+
+<style>
+.column { display: flex; flex-direction: column; }
+</style>

pyweft_ui/dialog.weft

@@ -0,0 +1,91 @@
+<template>
+  <div class="host">
+    <If cond="value">
+      <div class="backdrop" @click.self="dismiss" @keydown.esc="dismiss">
+        <!-- Tab past either end lands on a guard, which sends focus round. -->
+        <span class="guard" tabindex="0" data-focus-guard="" @focus="focus_last('box')"></span>
+        <div class="dialog" role="dialog" aria-modal="true" :aria-label="title or None"
+             tabindex="-1" ref="box" :style="f'max-width: {width}'">
+          <header class="head">
+            <h2 class="title">{{ title }}</h2>
+            <If cond="dismissible">
+              <button class="close" type="button" aria-label="Close" @click="close"><Icon name="x" size="1.2em" /></button>
+            </If>
+          </header>
+          <div class="body"><Slot /></div>
+          <If cond="has_slot('footer')"><footer class="foot"><Slot name="footer" /></footer></If>
+        </div>
+        <span class="guard" tabindex="0" data-focus-guard="" @focus="focus_first('box')"></span>
+      </div>
+    </If>
+  </div>
+</template>
+
+<code>
+# <ui.Dialog title="Delete file?" @bind="confirming"> ... </ui.Dialog>
+# Open while the bound field is True. Esc, a click outside, or the X set it
+# back to False (unless dismissible="false") and emit "close". Focus moves
+# in when it opens, Tab stays inside, and focus goes back when it closes.
+from pyweft import effect
+
+value: bool = False
+title: str = ""
+width: str = "32rem"
+dismissible: bool = True
+
+_open = False
+
+@effect
+def follow_focus(self):
+    # Runs when value changes, however it changed: the bound field, Esc,
+    # the X or the app's own buttons.
+    if self.value and not self._open:
+        self._open = True
+        self.save_focus()
+        self.focus("box")
+    elif not self.value and self._open:
+        self._open = False
+        self.restore_focus()
+
+def close(self):
+    self.emit("update", False)
+    self.emit("close")
+
+def dismiss(self):
+    if self.dismissible:
+        self.close()
+</code>
+
+<style>
+.host { display: contents; }
+.backdrop {
+  position: fixed; inset: 0; z-index: 1000;
+  display: grid; place-items: center; padding: 16px;
+  background: rgba(15, 23, 42, 0.5);
+  animation: ui-dialog-fade 0.12s ease-out;
+}
+.dialog {
+  width: 100%; max-height: calc(100vh - 32px); overflow: auto;
+  background: var(--ui-surface, #fff); color: var(--ui-text, #1f2328);
+  border-radius: calc(var(--ui-radius, 8px) * 1.5);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  outline: none;
+  animation: ui-dialog-rise 0.15s ease-out;
+}
+.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
+.title { margin: 0; font-size: 1.15rem; font-weight: 650; }
+.close {
+  border: 0; background: transparent; color: var(--ui-muted, #59636e);
+  cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0;
+}
+.close:hover { background: var(--ui-subtle, #f6f8fa); color: var(--ui-text, #1f2328); }
+.body { padding: 12px 20px 20px; }
+.guard { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; outline: none; }
+.foot {
+  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
+  padding: 12px 20px; border-top: 1px solid var(--ui-border, #d1d9e0);
+}
+@keyframes ui-dialog-fade { from { opacity: 0; } }
+@keyframes ui-dialog-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
+@media (prefers-reduced-motion: reduce) { .backdrop, .dialog { animation: none; } }
+</style>

pyweft_ui/grid.weft

@@ -0,0 +1,25 @@
+<template>
+  <div class="grid" :style="layout"><Slot /></div>
+</template>
+
+<code>
+# Children in a grid. With cols, that many equal columns; without, as many
+# columns of at least min_width as fit, so it adapts to the screen.
+cols: int = 0
+min_width: str = "14rem"
+gap: str = "md"          # none, xs, sm, md, lg, xl, or a CSS length
+
+_SPACE = {"none": "0", "xs": "4px", "sm": "8px", "md": "12px", "lg": "20px", "xl": "32px"}
+
+@property
+def layout(self):
+    if self.cols:
+        columns = f"repeat({self.cols}, minmax(0, 1fr))"
+    else:
+        columns = f"repeat(auto-fill, minmax(min({self.min_width}, 100%), 1fr))"
+    return f"grid-template-columns: {columns}; gap: {_SPACE.get(self.gap, self.gap)}"
+</code>
+
+<style>
+.grid { display: grid; }
+</style>

pyweft_ui/icon.weft

@@ -0,0 +1,50 @@
+<template>
+  <svg class="icon" :width="size" :height="size" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" aria-hidden="true">
+    <path :d="path" />
+  </svg>
+</template>
+
+<code>
+# A line icon in the current text colour: <ui.Icon name="check" />.
+name: str = ""
+size: str = "1em"
+
+_PATHS = {
+    "check": "M5 12.5l4.5 4.5L19 7.5",
+    "x": "M6 6l12 12M18 6L6 18",
+    "plus": "M12 5v14M5 12h14",
+    "minus": "M5 12h14",
+    "search": "M11 4a7 7 0 1 0 0 14a7 7 0 1 0 0-14zM20 20l-4-4",
+    "info": "M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18zM12 11v5M12 7.5v.5",
+    "alert": "M12 3.5L2.5 20h19L12 3.5zM12 10v4.5M12 17.5v.5",
+    "chevron-down": "M6 9l6 6l6-6",
+    "chevron-up": "M6 15l6-6l6 6",
+    "chevron-right": "M9 6l6 6l-6 6",
+    "chevron-left": "M15 6l-6 6l6 6",
+    "menu": "M4 6h16M4 12h16M4 18h16",
+    "trash": "M4 7h16M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13",
+    "edit": "M4 20h4L19 9l-4-4L4 16v4z",
+    "send": "M3 11.5L21 4l-7.5 18l-2.5-8z",
+    "user": "M12 4a4 4 0 1 0 0 8a4 4 0 1 0 0-8zM4.5 20.5a7.5 7.5 0 0 1 15 0",
+    "home": "M3.5 11L12 4l8.5 7M6 9.5V20h12V9.5",
+    "star": "M12 3.5l2.6 5.4l5.9.8l-4.3 4.1l1 5.8L12 16.8l-5.2 2.8l1-5.8l-4.3-4.1l5.9-.8z",
+    "heart": "M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.3A4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z",
+    "download": "M12 4v11M7 10.5l5 5l5-5M5 20h14",
+    "upload": "M12 20V9M7 13.5l5-5l5 5M5 4h14",
+    "external": "M14 4h6v6M20 4l-9 9M18 14v6H4V6h6",
+    "copy": "M8 8h12v12H8zM4 16V4h12",
+    "settings": "M12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6zM12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1",
+    "sun": "M12 8a4 4 0 1 0 0 8a4 4 0 1 0 0-8zM12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4",
+    "moon": "M20 14.5A8 8 0 0 1 9.5 4A8 8 0 1 0 20 14.5z",
+}
+
+@property
+def path(self):
+    return _PATHS.get(self.name, "")
+</code>
+
+<style>
+.icon { flex-shrink: 0; vertical-align: -0.125em; }
+</style>

pyweft_ui/number_field.weft

@@ -0,0 +1,69 @@
+<template>
+  <label class="field">
+    <If cond="label">
+      <span class="label">{{ label }}<If cond="required"><span class="req" aria-hidden="true"> *</span></If></span>
+    </If>
+    <input class="control" type="number" :value="shown" :min="min" :max="max" :step="step"
+           :name="name or None" :placeholder="placeholder or None" :required="required"
+           :disabled="disabled" :aria-invalid="'true' if error else None"
+           @input="typed(event)" />
+    <If cond="error"><span class="error">{{ error }}</span></If>
+    <ElseIf cond="hint"><span class="hint">{{ hint }}</span></ElseIf>
+  </label>
+</template>
+
+<code>
+# <ui.NumberField label="Quantity" min="1" max="99" @bind="quantity" />
+# Emits an int while the bound value is an int (or None), else a float.
+# Text that isn't a number yet (an empty box, "-") emits nothing.
+label: str = ""
+value: float | None = None
+min: float | None = None
+max: float | None = None
+step: str = "any"
+placeholder: str = ""
+hint: str = ""
+error: str = ""
+name: str = ""
+required: bool = False
+disabled: bool = False
+
+@property
+def shown(self):
+    return "" if self.value is None else str(self.value)
+
+def typed(self, event):
+    text = event.value.strip()
+    if not text:
+        return
+    wants_int = self.value is None or (isinstance(self.value, int) and not isinstance(self.value, bool))
+    try:
+        number = float(text)
+    except ValueError:
+        return
+    if wants_int and number.is_integer() and "." not in text and "e" not in text.lower():
+        number = int(number)
+    self.emit("update", number)
+</code>
+
+<style>
+.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.label { font-size: 0.9rem; font-weight: 550; }
+.req { color: var(--ui-danger, #d1242f); }
+.control {
+  font: inherit; color: var(--ui-text, #1f2328);
+  background: var(--ui-surface, #fff);
+  border: 1px solid var(--ui-border, #d1d9e0);
+  border-radius: var(--ui-radius, 8px);
+  padding: 0.5em 0.75em;
+}
+.control:focus {
+  outline: none;
+  border-color: var(--ui-primary, #4f46e5);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary, #4f46e5) 25%, transparent);
+}
+.control:disabled { opacity: 0.6; cursor: not-allowed; }
+.control[aria-invalid="true"] { border-color: var(--ui-danger, #d1242f); }
+.hint { font-size: 0.82rem; color: var(--ui-muted, #59636e); }
+.error { font-size: 0.82rem; color: var(--ui-danger, #d1242f); }
+</style>

pyweft_ui/radio_group.weft

@@ -0,0 +1,60 @@
+<template>
+  <fieldset class="group" :disabled="disabled">
+    <If cond="label"><legend class="label">{{ label }}</legend></If>
+    <div :class="'options inline' if inline else 'options'">
+      <For each="choice in choices" key="choice[2]">
+        <label class="option">
+          <input type="radio" :name="_group" :value="choice[2]" :checked="choice[0] == value"
+                 @change="emit('update', choice[0])" />
+          <span>{{ choice[1] }}</span>
+        </label>
+      </For>
+    </div>
+  </fieldset>
+</template>
+
+<code>
+# <ui.RadioGroup label="Plan" options="Free, Pro, Team" @bind="plan" />
+# options: a comma-separated string, a list of values, a list of
+# (value, label) pairs, or a list of {"value": ..., "label": ...} dicts.
+import itertools
+
+label: str = ""
+value = None
+options: list = []
+inline: bool = False      # side by side instead of stacked
+disabled: bool = False
+
+_ids = itertools.count(1)
+
+def on_init(self):
+    # Radios in one group share a name; each group needs its own.
+    self._group = f"ui-radio-{next(_ids)}"
+
+@property
+def choices(self):
+    items = self.options
+    if isinstance(items, str):
+        items = [part.strip() for part in items.split(",") if part.strip()]
+    out = []
+    for item in items:
+        if isinstance(item, dict):
+            val = item.get("value")
+            text = item.get("label", val)
+        elif isinstance(item, (tuple, list)) and len(item) == 2:
+            val, text = item
+        else:
+            val, text = item, item
+        out.append((val, str(text), str(val)))
+    return out
+</code>
+
+<style>
+.group { border: 0; padding: 0; margin: 0; min-width: 0; }
+.label { font-size: 0.9rem; font-weight: 550; padding: 0; margin-bottom: 6px; }
+.options { display: flex; flex-direction: column; gap: 6px; }
+.options.inline { flex-direction: row; flex-wrap: wrap; gap: 16px; }
+.option { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
+input { width: 1.05em; height: 1.05em; margin: 0; accent-color: var(--ui-primary, #4f46e5); cursor: inherit; }
+.group:disabled .option { opacity: 0.6; cursor: not-allowed; }
+</style>

pyweft_ui/row.weft

@@ -0,0 +1,28 @@
+<template>
+  <div class="row" :style="layout"><Slot /></div>
+</template>
+
+<code>
+# Children side by side.
+gap: str = "md"          # none, xs, sm, md, lg, xl, or a CSS length
+align: str = "center"    # start, center, end, stretch, baseline (vertical)
+justify: str = "start"   # start, center, end, between, around (horizontal)
+wrap: bool = True        # move to the next line when out of room
+
+_SPACE = {"none": "0", "xs": "4px", "sm": "8px", "md": "12px", "lg": "20px", "xl": "32px"}
+_FLEX = {"start": "flex-start", "end": "flex-end", "between": "space-between",
+         "around": "space-around", "evenly": "space-evenly"}
+
+@property
+def layout(self):
+    return (
+        f"gap: {_SPACE.get(self.gap, self.gap)}; "
+        f"align-items: {_FLEX.get(self.align, self.align)}; "
+        f"justify-content: {_FLEX.get(self.justify, self.justify)}; "
+        f"flex-wrap: {'wrap' if self.wrap else 'nowrap'}"
+    )
+</code>
+
+<style>
+.row { display: flex; flex-direction: row; }
+</style>