reflex-silverpoint-react 0.7.0__tar.gz → 0.7.1__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.
Files changed (45) hide show
  1. {reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react.egg-info → reflex_silverpoint_react-0.7.1}/PKG-INFO +62 -36
  2. reflex_silverpoint_react-0.7.0/PKG-INFO → reflex_silverpoint_react-0.7.1/README.md +60 -61
  3. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/__init__.py +54 -3
  4. reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/assets/trigger.jsx +63 -0
  5. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/base.py +40 -12
  6. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/base.pyi +6 -3
  7. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/charts.pyi +1 -1
  8. reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/composed.py +633 -0
  9. reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/composed.pyi +684 -0
  10. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/dashboard.py +5 -3
  11. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/dashboard.pyi +1 -1
  12. reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/overlays.py +784 -0
  13. reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/overlays.pyi +674 -0
  14. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/palette.py +85 -70
  15. reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/surfaces.py +235 -0
  16. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/surfaces.pyi +30 -106
  17. reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react/timeline.py +172 -0
  18. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/timeline.pyi +43 -15
  19. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/ui.py +3 -0
  20. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/ui.pyi +1 -1
  21. reflex_silverpoint_react-0.7.0/README.md → reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react.egg-info/PKG-INFO +87 -32
  22. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react.egg-info/SOURCES.txt +3 -4
  23. reflex_silverpoint_react-0.7.1/custom_components/reflex_silverpoint_react.egg-info/requires.txt +9 -0
  24. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/pyproject.toml +8 -7
  25. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/tests/test_components.py +3 -3
  26. reflex_silverpoint_react-0.7.1/tests/test_v07.py +322 -0
  27. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/assets/surface.jsx +0 -219
  28. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/assets/surfaces.css +0 -375
  29. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/assets/timeline.css +0 -225
  30. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/assets/timeline.jsx +0 -64
  31. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/composed.py +0 -702
  32. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/overlays.py +0 -835
  33. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/surfaces.py +0 -329
  34. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react/timeline.py +0 -157
  35. reflex_silverpoint_react-0.7.0/custom_components/reflex_silverpoint_react.egg-info/requires.txt +0 -11
  36. reflex_silverpoint_react-0.7.0/tests/test_v07.py +0 -234
  37. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/LICENSE +0 -0
  38. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/catalog.py +0 -0
  39. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/charts.py +0 -0
  40. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/helpers.py +0 -0
  41. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react/ui_catalog.py +0 -0
  42. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react.egg-info/dependency_links.txt +0 -0
  43. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/custom_components/reflex_silverpoint_react.egg-info/top_level.txt +0 -0
  44. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/setup.cfg +0 -0
  45. {reflex_silverpoint_react-0.7.0 → reflex_silverpoint_react-0.7.1}/tests/test_demo_data.py +0 -0
@@ -1,7 +1,7 @@
1
1
  Metadata-Version: 2.4
2
2
  Name: reflex-silverpoint-react
3
- Version: 0.7.0
4
- Summary: The 60 silverpoint charts, the Dashboard, 17 UI components, palettes, 20 composed components and a Knight Lab timeline (Renaissance silverpoint drawing style) for Reflex, wrapping @silverpoint/react
3
+ Version: 0.7.1
4
+ Summary: The 60 silverpoint charts, the Dashboard, 38 UI, composed and overlay components, palettes and a Knight Lab timeline (Renaissance silverpoint drawing style) for Reflex, wrapping @silverpoint/react 0.7
5
5
  Author-email: Ernesto Crespo <ecrespo@gmail.com>
6
6
  License: MIT
7
7
  Project-URL: Homepage, https://github.com/ecrespo/reflex-silverpoint-react
@@ -18,13 +18,11 @@ Description-Content-Type: text/markdown
18
18
  License-File: LICENSE
19
19
  Requires-Dist: reflex>=0.10.0
20
20
  Provides-Extra: timeline
21
- Requires-Dist: reflex-knightlab-timeline>=0.1.2; extra == "timeline"
22
21
  Provides-Extra: dev
23
22
  Requires-Dist: build; extra == "dev"
24
23
  Requires-Dist: twine; extra == "dev"
25
24
  Requires-Dist: pytest; extra == "dev"
26
25
  Requires-Dist: ruff; extra == "dev"
27
- Requires-Dist: reflex-knightlab-timeline>=0.1.2; extra == "dev"
28
26
  Dynamic: license-file
29
27
 
30
28
  # reflex-silverpoint-react
@@ -36,17 +34,40 @@ prepared ground, tone built from hatching, and white heightening on the live val
36
34
  The hand-drawn irregularity lives only in the ornament. The data geometry is exact, and every chart
37
35
  has a `precision` mode that turns the inking off.
38
36
 
39
- It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.6.0 and exposes
37
+ It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) **0.7.0** and exposes
40
38
  **all 60 charts**, the **`Dashboard`** (a laid-out, linkable grid of charts), the **17 UI
41
- components** (buttons, inputs, tabs, cards, alerts…), the `SilverpointProvider`, both grounds
42
- (`silverpoint` and `cyanotype`), the interaction events, custom readouts and the imperative handle
43
- (SVG export and geometry) as Python.
44
-
45
- On top of that it adds, in Reflex: **palettes** for every chart and component, **20 composed
46
- components** built on silverpoint's own frames and tones (tables, overlays, toasts…), and the
47
- **Knight Lab timeline** drawn in silverpoint.
48
-
49
- ### New in 0.7
39
+ components** (buttons, inputs, tabs, cards, alerts…), the **12 composed components** (table,
40
+ pagination, breadcrumb, avatar…), the **7 overlays** and the toaster (modal, drawer, popover,
41
+ tooltip, select, dropdown menu, toast), the **palettes**, the **Knight Lab timeline**, the
42
+ `SilverpointProvider`, both grounds (`silverpoint` and `cyanotype`), the interaction events, custom
43
+ readouts and the imperative handle (SVG export and geometry) as Python.
44
+
45
+ Everything it renders is an npm component of silverpoint, under its parity contract: the same
46
+ markup React, Vue and Angular render.
47
+
48
+ ### New in 0.7.1
49
+
50
+ - Wraps **`@silverpoint/react` 0.7.0** (0.7.0 wrapped 0.6.0). silverpoint 0.7 took this package's
51
+ palettes, composed components, overlays and timeline into the library itself, so they are now the
52
+ npm components, not Reflex-composed copies: same Python builders, the library's markup.
53
+ - **Palettes** are the npm `palette` prop: they merge element → dashboard → provider field by field,
54
+ `silverpoint_provider(palette=...)` works, and `silverpoint_palette(...)` is a provider with a
55
+ palette. `check_palette()` measures the core's nine contrast pairs (the focus ring and the white
56
+ heightening included); `"ironGall"` names the `iron_gall` preset too.
57
+ - **Composed components and overlays read `silverpoint_provider`**, as the `Sp` components do.
58
+ Overlays are a native `<dialog>` and the Popover API (no Radix); they render in place, so a
59
+ section's palette reaches them.
60
+ - **Logical sides**: `side="start"`/`"end"` and `position="bottom-end"`…; `left`/`right` still work
61
+ with a `DeprecationWarning`. `sp_drawer(size=)` is `extent=`, `sp_popover(side_offset=)` is
62
+ `offset=`; `sp_modal` gains `label` and `dismissible`, `sp_result`/`sp_descriptions`
63
+ `heading_level`.
64
+ - `sp_textarea(textarea_id=)` and `sp_input_number(input_id=)` are `id=` (deprecated aliases kept);
65
+ `sp_textarea` has no `on_blur`. `sp_collapse_item(on_toggle=)` receives the new open state (a bool).
66
+ - **`sp_timeline`** is the npm `SpTimeline`: TimelineJS is an npm dependency of that component, so the
67
+ `[timeline]` extra pulls in nothing any more (it is kept so existing installs keep working).
68
+ - `sort_rows()` follows the core's `uiSortRows` order (numbers first, then text by code point).
69
+
70
+ ### New in 0.7.0
50
71
 
51
72
  - **Reflex 0.10.0**, and therefore **Python 3.11 or later** (Python 3.10 is no longer supported).
52
73
  Reflex 0.10 removed `reflex component build`: stubs are regenerated with `scripts/make_stubs.py`.
@@ -63,7 +84,7 @@ components** built on silverpoint's own frames and tones (tables, overlays, toas
63
84
  `sp_trigger` as their drawn button. See [Composed components](#composed-components).
64
85
  - **`sp_timeline`** — Knight Lab TimelineJS drawn in silverpoint: a skin on the ground's colours and
65
86
  type, plus the ground's own hand-inked frames and tone tiles on its markers, eras and buttons.
66
- Optional extra: `pip install "reflex-silverpoint-react[timeline]"`. See [Timeline](#timeline).
87
+ Optional extra (until 0.7.1): `pip install "reflex-silverpoint-react[timeline]"`. See [Timeline](#timeline).
67
88
  - `sp_surface`, `sp_glyph`: the building blocks, for components of your own.
68
89
 
69
90
  ### New in 0.6
@@ -396,19 +417,19 @@ silverpoint_palette(dashboard(...), sp_card(...), palette="indigo") # a whole s
396
417
  ```
397
418
 
398
419
  Fields: `substrate`, `ink`, `ink_secondary`, `heighten`, `rule`, `grid`, `text`, `text_muted` and
399
- `focus` (the UI focus ring). Unset fields keep the ground's own. An element's own `palette` always
400
- wins over its section's. A palette is **monochrome by design**: tone is built from hatch density
401
- (Art. 6), so a chart has two inks (`ink` for the main series, `ink_secondary` for the second), never
402
- a colour per series. `precision` mode and the system's high-contrast modes still apply on top.
403
- `silverpoint_provider` takes no palette (it renders no element): use `silverpoint_palette`.
420
+ `focus` (the UI focus ring). Unset fields keep the ground's own. Palettes merge field by field,
421
+ element → dashboard → provider, so an element's own `palette` wins over its section's. A palette is
422
+ **monochrome by design**: tone is built from hatch density (Art. 6), so a chart has two inks (`ink`
423
+ for the main series, `ink_secondary` for the second), never a colour per series. `precision` mode and
424
+ the system's high-contrast modes still apply on top. `silverpoint_palette(...)` is
425
+ `silverpoint_provider(palette=...)` around the section.
404
426
 
405
427
  ## Composed components
406
428
 
407
- Components built in Reflex on silverpoint's markup contract: `@silverpoint/grounds/ui.css` draws its
408
- hand-inked frames, hatched tones and heightening on any element that follows it, so these are drawn
409
- with exactly the same pieces as the `Sp` components. They are **Reflex-only** (silverpoint's React,
410
- Vue and Angular adapters do not have them) and, unlike the `Sp` components, they do not read
411
- `silverpoint_provider`: pass `ground`, `substrate`, `mode` and `palette` explicitly.
429
+ silverpoint 0.7's composed components and overlays, the npm components of `@silverpoint/react/ui`:
430
+ native markup drawn by the core with the ground's hand-inked frames, hatched tones and
431
+ heightening, exactly as the `Sp` components are. Like them they read `silverpoint_provider` (and
432
+ the dashboard they sit in); a prop on the component always wins.
412
433
 
413
434
  ```python
414
435
  from reflex_silverpoint_react import sort_rows, sp_pagination, sp_table
@@ -428,7 +449,7 @@ sp_table(
428
449
  sp_pagination(total=240, current=State.page, on_change=State.set_page, show_total=True)
429
450
  ```
430
451
 
431
- | Level A (native) | |
452
+ | Composed (native markup) | |
432
453
  |---|---|
433
454
  | `sp_table` | Card-framed table: small-caps header, tabular figures, hatched striping, sortable headers with `aria-sort` |
434
455
  | `sp_pagination` | Previous/next, first/last, a window around the current page (heightened); `on_change(page)` |
@@ -441,7 +462,7 @@ sp_pagination(total=240, current=State.page, on_change=State.set_page, show_tota
441
462
  | `sp_empty`, `sp_result` | Empty state; outcome with a drawn round mark |
442
463
  | `sp_textarea`, `sp_input_number` | On the `SpInput` contract; `on_change` receives the value (text or number) |
443
464
 
444
- | Level B (Radix primitives) | |
465
+ | Overlays (`<dialog>`, Popover API) | |
445
466
  |---|---|
446
467
  | `sp_modal`, `sp_drawer` | Dialog on a card frame over a hatched backdrop; drawer from any edge |
447
468
  | `sp_popover`, `sp_tooltip` | Anchored content; tooltip on hover or keyboard focus |
@@ -449,10 +470,15 @@ sp_pagination(total=240, current=State.page, on_change=State.set_page, show_tota
449
470
  | `sp_dropdown_menu` | Commands with shortcuts, separators and labels; `on_select(key)` |
450
471
  | `sp_toast`, `sp_toaster` | Notices that stack in a corner; `error`/`warning` are announced assertively |
451
472
 
452
- Behaviour (focus trapping, keyboard, dismissal, positioning, ARIA) is Radix's, at the versions
453
- Reflex already installs. Overlays render in a portal at the end of `<body>`, outside any
454
- `silverpoint_palette` section, so give them `palette` directly. A string `trigger` becomes
455
- `sp_trigger(...)`, the drawn button that can forward Radix's props (`sp_button` cannot).
473
+ Behaviour is the platform's: `showModal()` for the modal and the drawer (focus stays inside, Escape
474
+ and the backdrop close it unless `dismissible=False`), the Popover API for the rest (light
475
+ dismiss), keyboard and placement from `@silverpoint/core` (APG listbox and menu, typeahead, flip and
476
+ shift). Overlays render in place (the top layer, no portal), so a section's palette reaches them.
477
+ Sides are logical (`start`/`end`) and mirror in right-to-left text. An overlay clones its `trigger`
478
+ with its ARIA and a toggling click, so the trigger must keep the props it is given: a native
479
+ `rx.el.button`, or `sp_trigger(...)`, the drawn button strings become (`sp_button` drops them in
480
+ silverpoint 0.7.0). `sp_trigger` does not read the provider: give it `ground`, `substrate`, `mode`
481
+ and `palette`.
456
482
 
457
483
  ```python
458
484
  sp_modal(
@@ -471,15 +497,15 @@ sp_toaster(sp_toast("Saved", State.text, kind="success", open=State.toast_open,
471
497
 
472
498
  ## Timeline
473
499
 
474
- ```bash
475
- pip install "reflex-silverpoint-react[timeline]" # adds reflex-knightlab-timeline
476
- ```
500
+ The npm `SpTimeline` of `@silverpoint/react/timeline`. TimelineJS (`@knight-lab/timelinejs` 3.9.13)
501
+ is an npm dependency of this component: Reflex installs it when a page uses `sp_timeline`, and no
502
+ Python extra is needed. If it cannot be loaded, the component warns `SP025` and renders `fallback`.
477
503
 
478
504
  ```python
479
505
  from reflex_silverpoint_react import sp_timeline
480
506
 
481
507
  sp_timeline(
482
- DATA, # TimelineJS data: title, events, eras (or a TimelineData)
508
+ DATA, # TimelineJS data: title, events, eras (or any object with to_dict())
483
509
  height=560,
484
510
  ground="silverpoint",
485
511
  substrate="cream",
@@ -564,7 +590,7 @@ The exported SVG carries its own ground colours, so it renders the same outside
564
590
  ## Demo app
565
591
 
566
592
  ```bash
567
- uv venv && uv pip install -e ".[timeline]"
593
+ uv venv && uv pip install -e .
568
594
  cd silverpoint_react_demo
569
595
  uv run reflex run
570
596
  ```
@@ -1,32 +1,3 @@
1
- Metadata-Version: 2.4
2
- Name: reflex-silverpoint-react
3
- Version: 0.7.0
4
- Summary: The 60 silverpoint charts, the Dashboard, 17 UI components, palettes, 20 composed components and a Knight Lab timeline (Renaissance silverpoint drawing style) for Reflex, wrapping @silverpoint/react
5
- Author-email: Ernesto Crespo <ecrespo@gmail.com>
6
- License: MIT
7
- Project-URL: Homepage, https://github.com/ecrespo/reflex-silverpoint-react
8
- Project-URL: Source, https://github.com/ecrespo/reflex-silverpoint-react
9
- Project-URL: Issues, https://github.com/ecrespo/reflex-silverpoint-react/issues
10
- Project-URL: Upstream, https://github.com/ecrespo/silverpoint
11
- Keywords: reflex,reflex-custom-components,charts,silverpoint,data-visualization,svg,ui-components,palette,timeline
12
- Classifier: Development Status :: 4 - Beta
13
- Classifier: License :: OSI Approved :: MIT License
14
- Classifier: Programming Language :: Python :: 3
15
- Classifier: Topic :: Scientific/Engineering :: Visualization
16
- Requires-Python: >=3.11
17
- Description-Content-Type: text/markdown
18
- License-File: LICENSE
19
- Requires-Dist: reflex>=0.10.0
20
- Provides-Extra: timeline
21
- Requires-Dist: reflex-knightlab-timeline>=0.1.2; extra == "timeline"
22
- Provides-Extra: dev
23
- Requires-Dist: build; extra == "dev"
24
- Requires-Dist: twine; extra == "dev"
25
- Requires-Dist: pytest; extra == "dev"
26
- Requires-Dist: ruff; extra == "dev"
27
- Requires-Dist: reflex-knightlab-timeline>=0.1.2; extra == "dev"
28
- Dynamic: license-file
29
-
30
1
  # reflex-silverpoint-react
31
2
 
32
3
  A [Reflex](https://reflex.dev) custom component for **[silverpoint](https://github.com/ecrespo/silverpoint)**:
@@ -36,17 +7,40 @@ prepared ground, tone built from hatching, and white heightening on the live val
36
7
  The hand-drawn irregularity lives only in the ornament. The data geometry is exact, and every chart
37
8
  has a `precision` mode that turns the inking off.
38
9
 
39
- It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.6.0 and exposes
10
+ It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) **0.7.0** and exposes
40
11
  **all 60 charts**, the **`Dashboard`** (a laid-out, linkable grid of charts), the **17 UI
41
- components** (buttons, inputs, tabs, cards, alerts…), the `SilverpointProvider`, both grounds
42
- (`silverpoint` and `cyanotype`), the interaction events, custom readouts and the imperative handle
43
- (SVG export and geometry) as Python.
44
-
45
- On top of that it adds, in Reflex: **palettes** for every chart and component, **20 composed
46
- components** built on silverpoint's own frames and tones (tables, overlays, toasts…), and the
47
- **Knight Lab timeline** drawn in silverpoint.
48
-
49
- ### New in 0.7
12
+ components** (buttons, inputs, tabs, cards, alerts…), the **12 composed components** (table,
13
+ pagination, breadcrumb, avatar…), the **7 overlays** and the toaster (modal, drawer, popover,
14
+ tooltip, select, dropdown menu, toast), the **palettes**, the **Knight Lab timeline**, the
15
+ `SilverpointProvider`, both grounds (`silverpoint` and `cyanotype`), the interaction events, custom
16
+ readouts and the imperative handle (SVG export and geometry) as Python.
17
+
18
+ Everything it renders is an npm component of silverpoint, under its parity contract: the same
19
+ markup React, Vue and Angular render.
20
+
21
+ ### New in 0.7.1
22
+
23
+ - Wraps **`@silverpoint/react` 0.7.0** (0.7.0 wrapped 0.6.0). silverpoint 0.7 took this package's
24
+ palettes, composed components, overlays and timeline into the library itself, so they are now the
25
+ npm components, not Reflex-composed copies: same Python builders, the library's markup.
26
+ - **Palettes** are the npm `palette` prop: they merge element → dashboard → provider field by field,
27
+ `silverpoint_provider(palette=...)` works, and `silverpoint_palette(...)` is a provider with a
28
+ palette. `check_palette()` measures the core's nine contrast pairs (the focus ring and the white
29
+ heightening included); `"ironGall"` names the `iron_gall` preset too.
30
+ - **Composed components and overlays read `silverpoint_provider`**, as the `Sp` components do.
31
+ Overlays are a native `<dialog>` and the Popover API (no Radix); they render in place, so a
32
+ section's palette reaches them.
33
+ - **Logical sides**: `side="start"`/`"end"` and `position="bottom-end"`…; `left`/`right` still work
34
+ with a `DeprecationWarning`. `sp_drawer(size=)` is `extent=`, `sp_popover(side_offset=)` is
35
+ `offset=`; `sp_modal` gains `label` and `dismissible`, `sp_result`/`sp_descriptions`
36
+ `heading_level`.
37
+ - `sp_textarea(textarea_id=)` and `sp_input_number(input_id=)` are `id=` (deprecated aliases kept);
38
+ `sp_textarea` has no `on_blur`. `sp_collapse_item(on_toggle=)` receives the new open state (a bool).
39
+ - **`sp_timeline`** is the npm `SpTimeline`: TimelineJS is an npm dependency of that component, so the
40
+ `[timeline]` extra pulls in nothing any more (it is kept so existing installs keep working).
41
+ - `sort_rows()` follows the core's `uiSortRows` order (numbers first, then text by code point).
42
+
43
+ ### New in 0.7.0
50
44
 
51
45
  - **Reflex 0.10.0**, and therefore **Python 3.11 or later** (Python 3.10 is no longer supported).
52
46
  Reflex 0.10 removed `reflex component build`: stubs are regenerated with `scripts/make_stubs.py`.
@@ -63,7 +57,7 @@ components** built on silverpoint's own frames and tones (tables, overlays, toas
63
57
  `sp_trigger` as their drawn button. See [Composed components](#composed-components).
64
58
  - **`sp_timeline`** — Knight Lab TimelineJS drawn in silverpoint: a skin on the ground's colours and
65
59
  type, plus the ground's own hand-inked frames and tone tiles on its markers, eras and buttons.
66
- Optional extra: `pip install "reflex-silverpoint-react[timeline]"`. See [Timeline](#timeline).
60
+ Optional extra (until 0.7.1): `pip install "reflex-silverpoint-react[timeline]"`. See [Timeline](#timeline).
67
61
  - `sp_surface`, `sp_glyph`: the building blocks, for components of your own.
68
62
 
69
63
  ### New in 0.6
@@ -396,19 +390,19 @@ silverpoint_palette(dashboard(...), sp_card(...), palette="indigo") # a whole s
396
390
  ```
397
391
 
398
392
  Fields: `substrate`, `ink`, `ink_secondary`, `heighten`, `rule`, `grid`, `text`, `text_muted` and
399
- `focus` (the UI focus ring). Unset fields keep the ground's own. An element's own `palette` always
400
- wins over its section's. A palette is **monochrome by design**: tone is built from hatch density
401
- (Art. 6), so a chart has two inks (`ink` for the main series, `ink_secondary` for the second), never
402
- a colour per series. `precision` mode and the system's high-contrast modes still apply on top.
403
- `silverpoint_provider` takes no palette (it renders no element): use `silverpoint_palette`.
393
+ `focus` (the UI focus ring). Unset fields keep the ground's own. Palettes merge field by field,
394
+ element → dashboard → provider, so an element's own `palette` wins over its section's. A palette is
395
+ **monochrome by design**: tone is built from hatch density (Art. 6), so a chart has two inks (`ink`
396
+ for the main series, `ink_secondary` for the second), never a colour per series. `precision` mode and
397
+ the system's high-contrast modes still apply on top. `silverpoint_palette(...)` is
398
+ `silverpoint_provider(palette=...)` around the section.
404
399
 
405
400
  ## Composed components
406
401
 
407
- Components built in Reflex on silverpoint's markup contract: `@silverpoint/grounds/ui.css` draws its
408
- hand-inked frames, hatched tones and heightening on any element that follows it, so these are drawn
409
- with exactly the same pieces as the `Sp` components. They are **Reflex-only** (silverpoint's React,
410
- Vue and Angular adapters do not have them) and, unlike the `Sp` components, they do not read
411
- `silverpoint_provider`: pass `ground`, `substrate`, `mode` and `palette` explicitly.
402
+ silverpoint 0.7's composed components and overlays, the npm components of `@silverpoint/react/ui`:
403
+ native markup drawn by the core with the ground's hand-inked frames, hatched tones and
404
+ heightening, exactly as the `Sp` components are. Like them they read `silverpoint_provider` (and
405
+ the dashboard they sit in); a prop on the component always wins.
412
406
 
413
407
  ```python
414
408
  from reflex_silverpoint_react import sort_rows, sp_pagination, sp_table
@@ -428,7 +422,7 @@ sp_table(
428
422
  sp_pagination(total=240, current=State.page, on_change=State.set_page, show_total=True)
429
423
  ```
430
424
 
431
- | Level A (native) | |
425
+ | Composed (native markup) | |
432
426
  |---|---|
433
427
  | `sp_table` | Card-framed table: small-caps header, tabular figures, hatched striping, sortable headers with `aria-sort` |
434
428
  | `sp_pagination` | Previous/next, first/last, a window around the current page (heightened); `on_change(page)` |
@@ -441,7 +435,7 @@ sp_pagination(total=240, current=State.page, on_change=State.set_page, show_tota
441
435
  | `sp_empty`, `sp_result` | Empty state; outcome with a drawn round mark |
442
436
  | `sp_textarea`, `sp_input_number` | On the `SpInput` contract; `on_change` receives the value (text or number) |
443
437
 
444
- | Level B (Radix primitives) | |
438
+ | Overlays (`<dialog>`, Popover API) | |
445
439
  |---|---|
446
440
  | `sp_modal`, `sp_drawer` | Dialog on a card frame over a hatched backdrop; drawer from any edge |
447
441
  | `sp_popover`, `sp_tooltip` | Anchored content; tooltip on hover or keyboard focus |
@@ -449,10 +443,15 @@ sp_pagination(total=240, current=State.page, on_change=State.set_page, show_tota
449
443
  | `sp_dropdown_menu` | Commands with shortcuts, separators and labels; `on_select(key)` |
450
444
  | `sp_toast`, `sp_toaster` | Notices that stack in a corner; `error`/`warning` are announced assertively |
451
445
 
452
- Behaviour (focus trapping, keyboard, dismissal, positioning, ARIA) is Radix's, at the versions
453
- Reflex already installs. Overlays render in a portal at the end of `<body>`, outside any
454
- `silverpoint_palette` section, so give them `palette` directly. A string `trigger` becomes
455
- `sp_trigger(...)`, the drawn button that can forward Radix's props (`sp_button` cannot).
446
+ Behaviour is the platform's: `showModal()` for the modal and the drawer (focus stays inside, Escape
447
+ and the backdrop close it unless `dismissible=False`), the Popover API for the rest (light
448
+ dismiss), keyboard and placement from `@silverpoint/core` (APG listbox and menu, typeahead, flip and
449
+ shift). Overlays render in place (the top layer, no portal), so a section's palette reaches them.
450
+ Sides are logical (`start`/`end`) and mirror in right-to-left text. An overlay clones its `trigger`
451
+ with its ARIA and a toggling click, so the trigger must keep the props it is given: a native
452
+ `rx.el.button`, or `sp_trigger(...)`, the drawn button strings become (`sp_button` drops them in
453
+ silverpoint 0.7.0). `sp_trigger` does not read the provider: give it `ground`, `substrate`, `mode`
454
+ and `palette`.
456
455
 
457
456
  ```python
458
457
  sp_modal(
@@ -471,15 +470,15 @@ sp_toaster(sp_toast("Saved", State.text, kind="success", open=State.toast_open,
471
470
 
472
471
  ## Timeline
473
472
 
474
- ```bash
475
- pip install "reflex-silverpoint-react[timeline]" # adds reflex-knightlab-timeline
476
- ```
473
+ The npm `SpTimeline` of `@silverpoint/react/timeline`. TimelineJS (`@knight-lab/timelinejs` 3.9.13)
474
+ is an npm dependency of this component: Reflex installs it when a page uses `sp_timeline`, and no
475
+ Python extra is needed. If it cannot be loaded, the component warns `SP025` and renders `fallback`.
477
476
 
478
477
  ```python
479
478
  from reflex_silverpoint_react import sp_timeline
480
479
 
481
480
  sp_timeline(
482
- DATA, # TimelineJS data: title, events, eras (or a TimelineData)
481
+ DATA, # TimelineJS data: title, events, eras (or any object with to_dict())
483
482
  height=560,
484
483
  ground="silverpoint",
485
484
  substrate="cream",
@@ -564,7 +563,7 @@ The exported SVG carries its own ground colours, so it renders the same outside
564
563
  ## Demo app
565
564
 
566
565
  ```bash
567
- uv venv && uv pip install -e ".[timeline]"
566
+ uv venv && uv pip install -e .
568
567
  cd silverpoint_react_demo
569
568
  uv run reflex run
570
569
  ```
@@ -1,7 +1,8 @@
1
1
  """reflex-silverpoint-react: silverpoint charts and UI components for Reflex.
2
2
 
3
3
  Charts and interface components drawn in the manner of a Renaissance silverpoint drawing,
4
- wrapping ``@silverpoint/react``.
4
+ wrapping ``@silverpoint/react`` 0.7.0: the 60 charts, the dashboard, the 38 UI, composed and overlay
5
+ components, the palettes and the Knight Lab timeline.
5
6
  """
6
7
 
7
8
  from .base import (
@@ -11,6 +12,7 @@ from .base import (
11
12
  GroundName,
12
13
  SilverpointChart,
13
14
  SilverpointProvider,
15
+ silverpoint_palette,
14
16
  silverpoint_provider,
15
17
  )
16
18
  from .catalog import CHARTS, COMMON_PROPS, FAMILIES, ChartInfo, PropDoc, chart_by_name, chart_by_slug
@@ -138,6 +140,18 @@ from .charts import (
138
140
  wind_rose,
139
141
  )
140
142
  from .composed import (
143
+ SpAvatar,
144
+ SpAvatarGroup,
145
+ SpBreadcrumb,
146
+ SpCollapse,
147
+ SpCollapseItem,
148
+ SpDescriptions,
149
+ SpEmpty,
150
+ SpResult,
151
+ SpStatistic,
152
+ SpTable,
153
+ SpTextarea,
154
+ SpTimelineList,
141
155
  sort_rows,
142
156
  sp_avatar,
143
157
  sp_avatar_group,
@@ -165,6 +179,15 @@ from .dashboard import (
165
179
  )
166
180
  from .helpers import chart_ref, download_svg, get_geometry, get_svg, tooltip_template
167
181
  from .overlays import (
182
+ SpDrawer,
183
+ SpDropdownMenu,
184
+ SpModal,
185
+ SpPopover,
186
+ SpSelect,
187
+ SpToast,
188
+ SpToaster,
189
+ SpTooltip,
190
+ SpTrigger,
168
191
  sp_drawer,
169
192
  sp_dropdown_menu,
170
193
  sp_modal,
@@ -176,13 +199,15 @@ from .overlays import (
176
199
  sp_trigger,
177
200
  )
178
201
  from .palette import (
202
+ PALETTE_JS_FIELDS,
203
+ PALETTE_PAIRS,
179
204
  PALETTE_PROPERTIES,
180
205
  PALETTES,
181
206
  Palette,
182
207
  check_palette,
183
208
  contrast_ratio,
184
209
  palette_css,
185
- silverpoint_palette,
210
+ palette_prop,
186
211
  )
187
212
  from .surfaces import (
188
213
  SpGlyph,
@@ -194,7 +219,7 @@ from .surfaces import (
194
219
  sp_pagination,
195
220
  sp_surface,
196
221
  )
197
- from .timeline import sp_timeline, timeline_available
222
+ from .timeline import TIMELINEJS_VERSION, SpTimeline, sp_timeline, timeline_available
198
223
  from .ui import (
199
224
  SILVERPOINT_UI_STYLESHEET,
200
225
  SilverpointUi,
@@ -254,11 +279,14 @@ __all__ = [
254
279
  "DASHBOARD_DEFAULTS",
255
280
  "FAMILIES",
256
281
  "PALETTES",
282
+ "PALETTE_JS_FIELDS",
283
+ "PALETTE_PAIRS",
257
284
  "PALETTE_PROPERTIES",
258
285
  "SILVERPOINT_LIBRARY",
259
286
  "SILVERPOINT_STYLESHEETS",
260
287
  "SILVERPOINT_UI_STYLESHEET",
261
288
  "SILVERPOINT_VERSION",
289
+ "TIMELINEJS_VERSION",
262
290
  "UI_COMMON_PROPS",
263
291
  "UI_COMPONENTS",
264
292
  "UI_DEMOS",
@@ -321,27 +349,49 @@ __all__ = [
321
349
  "SilverpointUi",
322
350
  "SlopeChart",
323
351
  "SpAlert",
352
+ "SpAvatar",
353
+ "SpAvatarGroup",
324
354
  "SpBadge",
355
+ "SpBreadcrumb",
325
356
  "SpButton",
326
357
  "SpCard",
327
358
  "SpCheckbox",
359
+ "SpCollapse",
360
+ "SpCollapseItem",
361
+ "SpDescriptions",
328
362
  "SpDivider",
363
+ "SpDrawer",
364
+ "SpDropdownMenu",
365
+ "SpEmpty",
329
366
  "SpGlyph",
330
367
  "SpInput",
331
368
  "SpInputNumber",
369
+ "SpModal",
332
370
  "SpPagination",
371
+ "SpPopover",
333
372
  "SpProgress",
334
373
  "SpRadioGroup",
335
374
  "SpRate",
375
+ "SpResult",
336
376
  "SpSegmented",
377
+ "SpSelect",
337
378
  "SpSkeleton",
338
379
  "SpSlider",
380
+ "SpStatistic",
339
381
  "SpSteps",
340
382
  "SpSurface",
341
383
  "SpSwitch",
342
384
  "SpTabPanel",
385
+ "SpTable",
343
386
  "SpTabs",
344
387
  "SpTag",
388
+ "SpTextarea",
389
+ "SpTimeline",
390
+ "SpTimelineList",
391
+ "SpToast",
392
+ "SpToaster",
393
+ "SpTooltip",
394
+ "SpTrigger",
345
395
  "SparklineRows",
346
396
  "SquarifiedTreemap",
347
397
  "StackedBarChart",
@@ -405,6 +455,7 @@ __all__ = [
405
455
  "network_node",
406
456
  "orbit_chart",
407
457
  "palette_css",
458
+ "palette_prop",
408
459
  "parallel_coordinates_chart",
409
460
  "polar_bar_chart",
410
461
  "polar_line_chart",
@@ -0,0 +1,63 @@
1
+ /* reflex-silverpoint-react — sp_trigger: a native <button> drawn as SpButton, that keeps every prop.
2
+ *
3
+ * An overlay of @silverpoint/react clones its trigger with aria-haspopup, aria-expanded,
4
+ * aria-controls, onPointerDown and onClick (useTrigger, REQ-500). SpButton 0.7.0 keeps only its own
5
+ * props, so those would be lost on it; this button renders the very tree @silverpoint/core's
6
+ * uiButtonView builds (resolveUi resolves ground, substrate, mode, size, frame variant and palette)
7
+ * and adds everything else it is given to the native element.
8
+ */
9
+ const SP_TRIGGER_ATTRS = { class: "className", for: "htmlFor", readonly: "readOnly", tabindex: "tabIndex" };
10
+
11
+ function spTriggerStyle(text) {
12
+ const out = {};
13
+ for (const declaration of (text || "").split(";")) {
14
+ const colon = declaration.indexOf(":");
15
+ if (colon > 0) out[declaration.slice(0, colon).trim()] = declaration.slice(colon + 1).trim();
16
+ }
17
+ return out;
18
+ }
19
+
20
+ function spTriggerNode(node, content, extra) {
21
+ if ("text" in node) return node.text;
22
+ if ("slot" in node) return node.slot === "content" ? content : null;
23
+ const props = {};
24
+ for (const [name, value] of Object.entries(node.attrs)) {
25
+ if (value === undefined) continue;
26
+ props[SP_TRIGGER_ATTRS[name] || name] = name === "style" ? spTriggerStyle(value) : value;
27
+ }
28
+ if (extra) {
29
+ const { style, ...rest } = extra;
30
+ Object.assign(props, rest);
31
+ if (style) props.style = { ...(props.style || {}), ...style };
32
+ }
33
+ return createElement(node.tag, props, ...node.children.map((child) => spTriggerNode(child, content)));
34
+ }
35
+
36
+ function useSpTriggerForced() {
37
+ const [forced, setForced] = useState(false);
38
+ useEffect(() => {
39
+ if (typeof matchMedia !== "function") return undefined;
40
+ const query = matchMedia(FORCED_PRECISION_QUERY);
41
+ const update = () => setForced(query.matches);
42
+ update();
43
+ query.addEventListener?.("change", update);
44
+ return () => query.removeEventListener?.("change", update);
45
+ }, []);
46
+ return forced;
47
+ }
48
+
49
+ const SilverpointTrigger = forwardRef(function SilverpointTrigger(
50
+ { ground, substrate, mode, size, seed, palette, variant, chevron, disabled, label, children, className, id, ...rest },
51
+ ref,
52
+ ) {
53
+ const forcedPrecision = useSpTriggerForced();
54
+ const props = { ground, substrate, mode, size, seed, palette, variant, disabled, label, className, id, type: "button" };
55
+ const resolved = resolveUi(props, { forcedPrecision });
56
+ const text = typeof children === "string" || typeof children === "number" ? String(children) : children == null ? undefined : "·";
57
+ const view = uiButtonView(props, resolved, { text });
58
+ // The chevron sits beside the label, as SpButton's own danger cross does.
59
+ const tree = chevron
60
+ ? { ...view, children: [...view.children, { tag: "svg", attrs: { part: "sp-mark", "data-glyph": "chevronDown", viewBox: "0 0 16 16", "aria-hidden": "true" }, children: [{ tag: "path", attrs: { d: UI_GLYPHS.chevronDown }, children: [] }] }] }
61
+ : view;
62
+ return spTriggerNode(tree, children, { ...rest, ref });
63
+ });