@handamade/psi-react 0.5.0 → 0.7.0
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.
- package/README.md +1 -1
- package/dist/Checkbox/Checkbox.d.ts +1 -1
- package/dist/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/Panel/Panel.d.ts +12 -0
- package/dist/Panel/Panel.d.ts.map +1 -0
- package/dist/Switch/Switch.d.ts +1 -1
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.d.ts +15 -0
- package/dist/Toolbar/Toolbar.d.ts.map +1 -0
- package/dist/a11y-meta.d.ts.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +384 -364
- package/dist/manifest.json +97 -1
- package/dist/patterns.json +137 -0
- package/dist/styles.css +1 -1
- package/docs/Input.md +1 -0
- package/docs/Panel.md +37 -0
- package/docs/Toolbar.md +37 -0
- package/llms.txt +9 -1
- package/package.json +5 -4
package/dist/manifest.json
CHANGED
|
@@ -154,6 +154,41 @@
|
|
|
154
154
|
}
|
|
155
155
|
]
|
|
156
156
|
},
|
|
157
|
+
{
|
|
158
|
+
"name": "Panel",
|
|
159
|
+
"description": "Elevated surface panel (D51): secondary background, faint hairline, radius-12 — the shared --psi-surface-* recipe Dialog's panel also binds. Not a Card: no media slot, no hover lift, opaque by design.",
|
|
160
|
+
"slots": [
|
|
161
|
+
{
|
|
162
|
+
"name": "body",
|
|
163
|
+
"accepts": {},
|
|
164
|
+
"cardinality": "1..*",
|
|
165
|
+
"order": 1
|
|
166
|
+
}
|
|
167
|
+
],
|
|
168
|
+
"props": [
|
|
169
|
+
{
|
|
170
|
+
"name": "padding",
|
|
171
|
+
"type": "16 | 24",
|
|
172
|
+
"required": false,
|
|
173
|
+
"default": 24,
|
|
174
|
+
"description": "Inner padding in px."
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": "ref",
|
|
178
|
+
"type": "Ref<HTMLDivElement>",
|
|
179
|
+
"required": false,
|
|
180
|
+
"default": null,
|
|
181
|
+
"description": "Forwarded ref to the root element."
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "className",
|
|
185
|
+
"type": "string",
|
|
186
|
+
"required": false,
|
|
187
|
+
"default": null,
|
|
188
|
+
"description": "Additional CSS class name(s) merged onto the component's root element."
|
|
189
|
+
}
|
|
190
|
+
]
|
|
191
|
+
},
|
|
157
192
|
{
|
|
158
193
|
"name": "Input",
|
|
159
194
|
"description": "Single-line text input with pixel-true heights (24–48) and an error state. Inside a Field, id/aria-describedby/aria-invalid/required are wired automatically (D49).",
|
|
@@ -180,6 +215,13 @@
|
|
|
180
215
|
"default": null,
|
|
181
216
|
"description": "Forwarded ref to the underlying `<input>` element."
|
|
182
217
|
},
|
|
218
|
+
{
|
|
219
|
+
"name": "placeholder",
|
|
220
|
+
"type": "string",
|
|
221
|
+
"required": false,
|
|
222
|
+
"default": null,
|
|
223
|
+
"description": "Native placeholder text shown while the field is empty (only on components whose host element supports it)."
|
|
224
|
+
},
|
|
183
225
|
{
|
|
184
226
|
"name": "className",
|
|
185
227
|
"type": "string",
|
|
@@ -227,7 +269,26 @@
|
|
|
227
269
|
{
|
|
228
270
|
"name": "Field",
|
|
229
271
|
"description": "Labeled form-row wrapper: label above, control, one message line below — description normally, error when set (aria-live). Auto-wires id/aria-describedby/aria-invalid into Input and Select (D49).",
|
|
230
|
-
"slots": [
|
|
272
|
+
"slots": [
|
|
273
|
+
{
|
|
274
|
+
"name": "label",
|
|
275
|
+
"accepts": {},
|
|
276
|
+
"cardinality": "0..1",
|
|
277
|
+
"order": 1
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"name": "body",
|
|
281
|
+
"accepts": {},
|
|
282
|
+
"cardinality": "1..*",
|
|
283
|
+
"order": 2
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"name": "description",
|
|
287
|
+
"accepts": {},
|
|
288
|
+
"cardinality": "0..1",
|
|
289
|
+
"order": 3
|
|
290
|
+
}
|
|
291
|
+
],
|
|
231
292
|
"props": [
|
|
232
293
|
{
|
|
233
294
|
"name": "label",
|
|
@@ -478,6 +539,41 @@
|
|
|
478
539
|
}
|
|
479
540
|
]
|
|
480
541
|
},
|
|
542
|
+
{
|
|
543
|
+
"name": "Toolbar",
|
|
544
|
+
"description": "Horizontal grouping row for filter/search controls (D52). Wraps on overflow; zero JS. Deliberately NOT ARIA role=\"toolbar\" — that role contracts roving-tabindex arrow-key navigation, wrong for form controls. With aria-label it announces as role=\"group\".",
|
|
545
|
+
"slots": [
|
|
546
|
+
{
|
|
547
|
+
"name": "body",
|
|
548
|
+
"accepts": {},
|
|
549
|
+
"cardinality": "0..*",
|
|
550
|
+
"order": 1
|
|
551
|
+
}
|
|
552
|
+
],
|
|
553
|
+
"props": [
|
|
554
|
+
{
|
|
555
|
+
"name": "gap",
|
|
556
|
+
"type": "8 | 12 | 16",
|
|
557
|
+
"required": false,
|
|
558
|
+
"default": 8,
|
|
559
|
+
"description": "Gap between controls in px."
|
|
560
|
+
},
|
|
561
|
+
{
|
|
562
|
+
"name": "ref",
|
|
563
|
+
"type": "Ref<HTMLDivElement>",
|
|
564
|
+
"required": false,
|
|
565
|
+
"default": null,
|
|
566
|
+
"description": "Forwarded ref to the root element."
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
"name": "className",
|
|
570
|
+
"type": "string",
|
|
571
|
+
"required": false,
|
|
572
|
+
"default": null,
|
|
573
|
+
"description": "Additional CSS class name(s) merged onto the component's root element."
|
|
574
|
+
}
|
|
575
|
+
]
|
|
576
|
+
},
|
|
481
577
|
{
|
|
482
578
|
"name": "Tooltip",
|
|
483
579
|
"description": "Short hover/focus hint attached to a single trigger element.",
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
{
|
|
2
|
+
"patterns": [
|
|
3
|
+
{
|
|
4
|
+
"id": "destructive-confirm",
|
|
5
|
+
"intent": "Dialog confirming a destructive action",
|
|
6
|
+
"match": [
|
|
7
|
+
"delete confirmation",
|
|
8
|
+
"are you sure",
|
|
9
|
+
"destructive dialog",
|
|
10
|
+
"confirm delete"
|
|
11
|
+
],
|
|
12
|
+
"compose": {
|
|
13
|
+
"component": "Dialog",
|
|
14
|
+
"slots": {
|
|
15
|
+
"title": [
|
|
16
|
+
"{content:title}"
|
|
17
|
+
],
|
|
18
|
+
"body": [
|
|
19
|
+
"{content:consequence}"
|
|
20
|
+
],
|
|
21
|
+
"footer": [
|
|
22
|
+
{
|
|
23
|
+
"component": "Button",
|
|
24
|
+
"props": {
|
|
25
|
+
"variant": "ghost",
|
|
26
|
+
"size": "{param:size}"
|
|
27
|
+
},
|
|
28
|
+
"content": "cancel-label"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"component": "Button",
|
|
32
|
+
"props": {
|
|
33
|
+
"variant": "danger",
|
|
34
|
+
"size": "{param:size}"
|
|
35
|
+
},
|
|
36
|
+
"content": "confirm-label"
|
|
37
|
+
}
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"parameters": [
|
|
42
|
+
{
|
|
43
|
+
"key": "size",
|
|
44
|
+
"ask": "Button size?",
|
|
45
|
+
"options": [
|
|
46
|
+
32,
|
|
47
|
+
40
|
|
48
|
+
],
|
|
49
|
+
"default": 32
|
|
50
|
+
}
|
|
51
|
+
],
|
|
52
|
+
"content": {
|
|
53
|
+
"title": "<Delete the object?>",
|
|
54
|
+
"consequence": "<what is permanently lost>",
|
|
55
|
+
"cancel-label": "Cancel",
|
|
56
|
+
"confirm-label": "<verb the object>"
|
|
57
|
+
},
|
|
58
|
+
"gaps": [],
|
|
59
|
+
"blocked": false,
|
|
60
|
+
"preset": "<Dialog\n footer={<>\n <Button size={32} variant=\"ghost\">Cancel</Button>\n <Button size={32} variant=\"danger\"><verb the object></Button>\n </>}\n title=\"<Delete the object?>\"\n>\n <what is permanently lost>\n</Dialog>\n"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"id": "filter-toolbar",
|
|
64
|
+
"intent": "Toolbar of filter controls: search, category select, active-filter tags",
|
|
65
|
+
"match": [
|
|
66
|
+
"filter toolbar",
|
|
67
|
+
"filter bar",
|
|
68
|
+
"search and filter",
|
|
69
|
+
"faceted filters"
|
|
70
|
+
],
|
|
71
|
+
"compose": {
|
|
72
|
+
"component": "Toolbar",
|
|
73
|
+
"slots": {
|
|
74
|
+
"body": [
|
|
75
|
+
{
|
|
76
|
+
"component": "Input"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"component": "Select"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"component": "Tag",
|
|
83
|
+
"content": "example-filter"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
"parameters": [],
|
|
89
|
+
"content": {
|
|
90
|
+
"example-filter": "<active filter>"
|
|
91
|
+
},
|
|
92
|
+
"gaps": [],
|
|
93
|
+
"blocked": false,
|
|
94
|
+
"preset": "<Toolbar>\n <Input />\n <Select />\n <Tag><active filter></Tag>\n</Toolbar>\n"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"id": "settings-form-row",
|
|
98
|
+
"intent": "Labeled settings row: a self-labeled control with a group label and helper text",
|
|
99
|
+
"match": [
|
|
100
|
+
"settings row",
|
|
101
|
+
"form row",
|
|
102
|
+
"labeled switch",
|
|
103
|
+
"preference toggle",
|
|
104
|
+
"settings form"
|
|
105
|
+
],
|
|
106
|
+
"compose": {
|
|
107
|
+
"component": "Field",
|
|
108
|
+
"props": {
|
|
109
|
+
"group": true
|
|
110
|
+
},
|
|
111
|
+
"slots": {
|
|
112
|
+
"label": [
|
|
113
|
+
"{content:row-label}"
|
|
114
|
+
],
|
|
115
|
+
"body": [
|
|
116
|
+
{
|
|
117
|
+
"component": "Switch",
|
|
118
|
+
"content": "control-label"
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
"description": [
|
|
122
|
+
"{content:row-description}"
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
"parameters": [],
|
|
127
|
+
"content": {
|
|
128
|
+
"row-label": "<setting name>",
|
|
129
|
+
"control-label": "<what turning it on does>",
|
|
130
|
+
"row-description": "<one-line consequence of the setting>"
|
|
131
|
+
},
|
|
132
|
+
"gaps": [],
|
|
133
|
+
"blocked": false,
|
|
134
|
+
"preset": "<Field\n description=\"<one-line consequence of the setting>\"\n group={true}\n label=\"<setting name>\"\n>\n <Switch><what turning it on does></Switch>\n</Field>\n"
|
|
135
|
+
}
|
|
136
|
+
]
|
|
137
|
+
}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._button_m8fis_3{display:inline-flex;align-items:center;justify-content:center;gap:var(--psi-space-6);border:none;border-radius:var(--psi-radius-8);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_m8fis_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._button_m8fis_3:disabled{opacity:.4;cursor:not-allowed}._button_m8fis_3._disabled_m8fis_31{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_m8fis_39{height:var(--psi-size-24);padding-inline:var(--psi-space-8);font:var(--psi-button-font, var(--psi-text-12-16-medium))}._size32_m8fis_45{height:var(--psi-size-32);padding-inline:var(--psi-space-12);font:var(--psi-button-font, var(--psi-text-14-20-medium))}._size40_m8fis_51{height:var(--psi-size-40);padding-inline:var(--psi-space-16);font:var(--psi-button-font, var(--psi-text-16-24-medium))}._size48_m8fis_57{height:var(--psi-size-48);padding-inline:var(--psi-space-20);font:var(--psi-button-font, var(--psi-text-18-28-medium))}._accent_m8fis_66{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_m8fis_66:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-hover)}._accent_m8fis_66:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-active)}._accentSubtle_m8fis_78{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_m8fis_78:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_m8fis_78:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-active)}._neutral_m8fis_90{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_m8fis_90:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-hover)}._neutral_m8fis_90:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_m8fis_102{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_m8fis_102:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_m8fis_102:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_m8fis_114{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_m8fis_114:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-hover)}._ghost_m8fis_114:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-active)}._danger_m8fis_126{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_m8fis_126:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-hover)}._danger_m8fis_126:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-active)}._dangerSubtle_m8fis_138{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_m8fis_138:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_m8fis_138:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-active)}._outline_m8fis_150{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_m8fis_150:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_m8fis_150:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-active)}._iconButton_1dldx_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-radius-8);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_1dldx_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._iconButton_1dldx_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_1dldx_3._disabled_1dldx_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1dldx_37{width:var(--psi-size-24);height:var(--psi-size-24)}._size32_1dldx_42{width:var(--psi-size-32);height:var(--psi-size-32)}._size40_1dldx_47{width:var(--psi-size-40);height:var(--psi-size-40)}._size48_1dldx_52{width:var(--psi-size-48);height:var(--psi-size-48)}._accent_1dldx_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1dldx_60:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-hover)}._accent_1dldx_60:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-active)}._neutral_1dldx_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1dldx_72:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-hover)}._neutral_1dldx_72:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-active)}._ghost_1dldx_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1dldx_84:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-hover)}._ghost_1dldx_84:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-active)}._danger_1dldx_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1dldx_96:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-hover)}._danger_1dldx_96:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-active)}._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}._navbar_1uory_1{position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1uory_11{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._brand_1uory_18{display:flex;align-items:center}._links_1uory_19{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._links_1uory_19 a,._brand_1uory_18 a{text-decoration:none;transition:color var(--psi-duration-150) var(--psi-ease-soft)}._links_1uory_19 a{color:var(--psi-navbar-link-fg)}._links_1uory_19 a:hover,._brand_1uory_18 a{color:var(--psi-navbar-link-fg-hover)}._links_1uory_19 a:focus-visible,._brand_1uory_18 a:focus-visible{outline:2px solid var(--psi-navbar-focus-ring);outline-offset:2px}._actions_1uory_49{display:flex;align-items:center;gap:var(--psi-space-8)}._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}._field_lplye_1{display:grid;gap:var(--psi-field-gap);border:0;margin:0;padding:0;min-width:0}._label_lplye_10{font:var(--psi-text-14-20-medium);color:var(--psi-field-label-fg);padding:0}._marker_lplye_16{color:var(--psi-field-marker-fg)}._message_lplye_20{margin:0;font:var(--psi-text-12-16-regular);color:var(--psi-field-message-fg)}._invalid_lplye_26 ._message_lplye_20{color:var(--psi-field-error-fg)}._dialog_j8ndn_2{padding:0;border:1px solid var(--psi-dialog-border);border-radius:var(--psi-radius-12);background:var(--psi-dialog-bg);color:var(--psi-dialog-fg);max-width:calc(100vw - var(--psi-space-32))}._dialog_j8ndn_2::backdrop{background:var(--psi-dialog-backdrop)}._dialog_j8ndn_2[open]{animation:_dialog-enter_j8ndn_1 var(--psi-duration-200) var(--psi-ease-soft)}._dialog_j8ndn_2[open]::backdrop{animation:_backdrop-enter_j8ndn_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _dialog-enter_j8ndn_1{0%{opacity:0;transform:scale(.97)}}@keyframes _backdrop-enter_j8ndn_1{0%{opacity:0}}._w400_j8ndn_31{width:400px}._w560_j8ndn_32{width:560px}._w720_j8ndn_33{width:720px}._panel_j8ndn_35{display:grid;gap:var(--psi-space-16);padding:var(--psi-space-24)}._header_j8ndn_41{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--psi-space-12)}._title_j8ndn_48{margin:0;font:var(--psi-text-18-28-medium);color:var(--psi-dialog-title-fg)}._footer_j8ndn_54{display:flex;justify-content:flex-end;gap:var(--psi-space-8)}._input_8tzcf_3{display:block;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-radius-8);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);padding-inline:var(--psi-space-8);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_8tzcf_3::placeholder{color:var(--psi-input-placeholder)}._input_8tzcf_3:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-hover)}._input_8tzcf_3:focus{outline:2px solid var(--psi-input-focus-ring);outline-offset:-1px;border-color:transparent}._input_8tzcf_3:disabled{opacity:.4;cursor:not-allowed}._size24_8tzcf_38{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_8tzcf_43{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_8tzcf_48{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_8tzcf_53{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_8tzcf_60{border-color:var(--psi-input-border-error)}._error_8tzcf_60:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-error)}._select_140kg_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-radius-8);background-color:var(--psi-select-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--psi-space-8) center;color:var(--psi-select-fg);font-family:var(--psi-font-sans);padding-inline-start:var(--psi-space-8);padding-inline-end:var(--psi-space-24);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_140kg_3:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-hover)}._select_140kg_3:focus{outline:2px solid var(--psi-select-focus-ring);outline-offset:-1px;border-color:transparent}._select_140kg_3:disabled{opacity:.4;cursor:not-allowed}._size24_140kg_40{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_140kg_45{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_140kg_50{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_140kg_55{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_140kg_62{border-color:var(--psi-select-border-error)}._error_140kg_62:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-error)}._label_n457n_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_n457n_13{opacity:.4;cursor:not-allowed}._input_n457n_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._indicator_n457n_34{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-radius-4);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_n457n_20:checked+._indicator_n457n_34{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_n457n_20:checked+._indicator_n457n_34:after{content:"";display:block;width:4px;height:8px;border:solid var(--psi-checkbox-check-fg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_n457n_20:focus-visible+._indicator_n457n_34{outline:2px solid var(--psi-checkbox-focus-ring);outline-offset:2px}._text_n457n_74{color:var(--psi-checkbox-fg)}._label_jru2c_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_jru2c_13{opacity:.4;cursor:not-allowed}._input_jru2c_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._track_jru2c_34{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_jru2c_20:checked+._track_jru2c_34{background:var(--psi-switch-track-bg-checked)}._input_jru2c_20:focus-visible+._track_jru2c_34{outline:2px solid var(--psi-switch-focus-ring);outline-offset:2px}._thumb_jru2c_58{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_jru2c_20:checked+._track_jru2c_34 ._thumb_jru2c_58{left:18px}._text_jru2c_75{color:var(--psi-switch-fg)}._tag_3oysa_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_3oysa_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_3oysa_17:hover{opacity:1}._dismiss_3oysa_17:focus-visible{outline:2px solid var(--psi-tag-focus-ring);outline-offset:2px}._neutral_3oysa_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_3oysa_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_3oysa_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_3oysa_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_3oysa_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_3oysa_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_3oysa_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_3oysa_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_3oysa_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_3oysa_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}._wrapper_17qua_3{position:relative;display:inline-flex}._tooltip_17qua_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-radius-6);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap;pointer-events:none}._top_17qua_24{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._bottom_17qua_31{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._left_17qua_38{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._right_17qua_45{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}
|
|
1
|
+
._button_m8fis_3{display:inline-flex;align-items:center;justify-content:center;gap:var(--psi-space-6);border:none;border-radius:var(--psi-radius-8);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_m8fis_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._button_m8fis_3:disabled{opacity:.4;cursor:not-allowed}._button_m8fis_3._disabled_m8fis_31{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_m8fis_39{height:var(--psi-size-24);padding-inline:var(--psi-space-8);font:var(--psi-button-font, var(--psi-text-12-16-medium))}._size32_m8fis_45{height:var(--psi-size-32);padding-inline:var(--psi-space-12);font:var(--psi-button-font, var(--psi-text-14-20-medium))}._size40_m8fis_51{height:var(--psi-size-40);padding-inline:var(--psi-space-16);font:var(--psi-button-font, var(--psi-text-16-24-medium))}._size48_m8fis_57{height:var(--psi-size-48);padding-inline:var(--psi-space-20);font:var(--psi-button-font, var(--psi-text-18-28-medium))}._accent_m8fis_66{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_m8fis_66:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-hover)}._accent_m8fis_66:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-active)}._accentSubtle_m8fis_78{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_m8fis_78:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_m8fis_78:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-active)}._neutral_m8fis_90{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_m8fis_90:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-hover)}._neutral_m8fis_90:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_m8fis_102{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_m8fis_102:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_m8fis_102:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_m8fis_114{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_m8fis_114:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-hover)}._ghost_m8fis_114:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-active)}._danger_m8fis_126{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_m8fis_126:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-hover)}._danger_m8fis_126:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-active)}._dangerSubtle_m8fis_138{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_m8fis_138:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_m8fis_138:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-active)}._outline_m8fis_150{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_m8fis_150:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_m8fis_150:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-active)}._iconButton_1dldx_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-radius-8);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_1dldx_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._iconButton_1dldx_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_1dldx_3._disabled_1dldx_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1dldx_37{width:var(--psi-size-24);height:var(--psi-size-24)}._size32_1dldx_42{width:var(--psi-size-32);height:var(--psi-size-32)}._size40_1dldx_47{width:var(--psi-size-40);height:var(--psi-size-40)}._size48_1dldx_52{width:var(--psi-size-48);height:var(--psi-size-48)}._accent_1dldx_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1dldx_60:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-hover)}._accent_1dldx_60:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-active)}._neutral_1dldx_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1dldx_72:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-hover)}._neutral_1dldx_72:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-active)}._ghost_1dldx_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1dldx_84:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-hover)}._ghost_1dldx_84:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-active)}._danger_1dldx_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1dldx_96:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-hover)}._danger_1dldx_96:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-active)}._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}._panel_jn8w4_1{background:var(--psi-panel-bg);border:1px solid var(--psi-panel-border);border-radius:var(--psi-panel-radius);padding:var(--psi-panel-padding)}._padding16_jn8w4_8{padding:var(--psi-space-16)}._navbar_1uory_1{position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1uory_11{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._brand_1uory_18{display:flex;align-items:center}._links_1uory_19{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._links_1uory_19 a,._brand_1uory_18 a{text-decoration:none;transition:color var(--psi-duration-150) var(--psi-ease-soft)}._links_1uory_19 a{color:var(--psi-navbar-link-fg)}._links_1uory_19 a:hover,._brand_1uory_18 a{color:var(--psi-navbar-link-fg-hover)}._links_1uory_19 a:focus-visible,._brand_1uory_18 a:focus-visible{outline:2px solid var(--psi-navbar-focus-ring);outline-offset:2px}._actions_1uory_49{display:flex;align-items:center;gap:var(--psi-space-8)}._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}._field_lplye_1{display:grid;gap:var(--psi-field-gap);border:0;margin:0;padding:0;min-width:0}._label_lplye_10{font:var(--psi-text-14-20-medium);color:var(--psi-field-label-fg);padding:0}._marker_lplye_16{color:var(--psi-field-marker-fg)}._message_lplye_20{margin:0;font:var(--psi-text-12-16-regular);color:var(--psi-field-message-fg)}._invalid_lplye_26 ._message_lplye_20{color:var(--psi-field-error-fg)}._dialog_l23jf_2{padding:0;border:1px solid var(--psi-dialog-border);border-radius:var(--psi-dialog-radius);background:var(--psi-dialog-bg);color:var(--psi-dialog-fg);max-width:calc(100vw - var(--psi-space-32))}._dialog_l23jf_2::backdrop{background:var(--psi-dialog-backdrop)}._dialog_l23jf_2[open]{animation:_dialog-enter_l23jf_1 var(--psi-duration-200) var(--psi-ease-soft)}._dialog_l23jf_2[open]::backdrop{animation:_backdrop-enter_l23jf_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _dialog-enter_l23jf_1{0%{opacity:0;transform:scale(.97)}}@keyframes _backdrop-enter_l23jf_1{0%{opacity:0}}._w400_l23jf_31{width:400px}._w560_l23jf_32{width:560px}._w720_l23jf_33{width:720px}._panel_l23jf_35{display:grid;gap:var(--psi-space-16);padding:var(--psi-space-24)}._header_l23jf_41{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--psi-space-12)}._title_l23jf_48{margin:0;font:var(--psi-text-18-28-medium);color:var(--psi-dialog-title-fg)}._footer_l23jf_54{display:flex;justify-content:flex-end;gap:var(--psi-space-8)}._input_8tzcf_3{display:block;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-radius-8);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);padding-inline:var(--psi-space-8);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_8tzcf_3::placeholder{color:var(--psi-input-placeholder)}._input_8tzcf_3:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-hover)}._input_8tzcf_3:focus{outline:2px solid var(--psi-input-focus-ring);outline-offset:-1px;border-color:transparent}._input_8tzcf_3:disabled{opacity:.4;cursor:not-allowed}._size24_8tzcf_38{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_8tzcf_43{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_8tzcf_48{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_8tzcf_53{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_8tzcf_60{border-color:var(--psi-input-border-error)}._error_8tzcf_60:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-error)}._select_140kg_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-radius-8);background-color:var(--psi-select-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--psi-space-8) center;color:var(--psi-select-fg);font-family:var(--psi-font-sans);padding-inline-start:var(--psi-space-8);padding-inline-end:var(--psi-space-24);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_140kg_3:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-hover)}._select_140kg_3:focus{outline:2px solid var(--psi-select-focus-ring);outline-offset:-1px;border-color:transparent}._select_140kg_3:disabled{opacity:.4;cursor:not-allowed}._size24_140kg_40{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_140kg_45{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_140kg_50{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_140kg_55{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_140kg_62{border-color:var(--psi-select-border-error)}._error_140kg_62:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-error)}._label_thyza_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_thyza_13{opacity:.4;cursor:not-allowed}._input_thyza_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._indicator_thyza_34{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-radius-4);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_thyza_20:checked+._indicator_thyza_34{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_thyza_20:checked+._indicator_thyza_34:after{content:"";display:block;width:4px;height:8px;color:var(--psi-checkbox-check-fg);border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_thyza_20:focus-visible+._indicator_thyza_34{outline:2px solid var(--psi-checkbox-focus-ring);outline-offset:2px}._text_thyza_75{color:var(--psi-checkbox-fg)}._label_jru2c_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_jru2c_13{opacity:.4;cursor:not-allowed}._input_jru2c_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._track_jru2c_34{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_jru2c_20:checked+._track_jru2c_34{background:var(--psi-switch-track-bg-checked)}._input_jru2c_20:focus-visible+._track_jru2c_34{outline:2px solid var(--psi-switch-focus-ring);outline-offset:2px}._thumb_jru2c_58{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_jru2c_20:checked+._track_jru2c_34 ._thumb_jru2c_58{left:18px}._text_jru2c_75{color:var(--psi-switch-fg)}._tag_3oysa_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_3oysa_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_3oysa_17:hover{opacity:1}._dismiss_3oysa_17:focus-visible{outline:2px solid var(--psi-tag-focus-ring);outline-offset:2px}._neutral_3oysa_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_3oysa_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_3oysa_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_3oysa_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_3oysa_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_3oysa_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_3oysa_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_3oysa_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_3oysa_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_3oysa_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}._wrapper_17qua_3{position:relative;display:inline-flex}._tooltip_17qua_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-radius-6);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap;pointer-events:none}._top_17qua_24{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._bottom_17qua_31{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._left_17qua_38{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._right_17qua_45{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}._toolbar_1i848_1{display:flex;flex-wrap:wrap;align-items:center}._gap8_1i848_7{gap:var(--psi-space-8)}._gap12_1i848_8{gap:var(--psi-space-12)}._gap16_1i848_9{gap:var(--psi-space-16)}
|
package/docs/Input.md
CHANGED
|
@@ -10,6 +10,7 @@ Single-line text input with pixel-true heights (24–48) and an error state. Ins
|
|
|
10
10
|
| `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). |
|
|
11
11
|
| `error` | `boolean` | false | no | Show error styling. Inside a Field, the Field's error also lights this. |
|
|
12
12
|
| `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input>` element. |
|
|
13
|
+
| `placeholder` | `string` | — | no | Native placeholder text shown while the field is empty (only on components whose host element supports it). |
|
|
13
14
|
| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
|
|
14
15
|
|
|
15
16
|
## Keyboard & assistive tech
|
package/docs/Panel.md
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<!-- Generated by emit-docs.ts — do not edit. -->
|
|
2
|
+
# Panel
|
|
3
|
+
|
|
4
|
+
Elevated surface panel (D51): secondary background, faint hairline, radius-12 — the shared --psi-surface-* recipe Dialog's panel also binds. Not a Card: no media slot, no hover lift, opaque by design.
|
|
5
|
+
|
|
6
|
+
## Props
|
|
7
|
+
|
|
8
|
+
| Prop | Type | Default | Required | Description |
|
|
9
|
+
|---|---|---|---|---|
|
|
10
|
+
| `padding` | `16 \| 24` | 24 | no | Inner padding in px. |
|
|
11
|
+
| `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root element. |
|
|
12
|
+
| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
|
|
13
|
+
|
|
14
|
+
## Keyboard & assistive tech
|
|
15
|
+
|
|
16
|
+
| Keys | Behavior |
|
|
17
|
+
|---|---|
|
|
18
|
+
| Tab | Skipped — Panel itself is not focusable; focus moves through its children. |
|
|
19
|
+
|
|
20
|
+
Plain <div> container with no implicit role. Pass aria-* host props if the panel should announce as a region.
|
|
21
|
+
|
|
22
|
+
## Theming
|
|
23
|
+
|
|
24
|
+
Override `--psi-panel-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Rules
|
|
29
|
+
|
|
30
|
+
- One accent per visual group; everything else neutral or ghost.
|
|
31
|
+
- danger only for actions with real consequences.
|
|
32
|
+
- Sizes are px numbers (24|32|40|48), never S/M/L.
|
|
33
|
+
- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
|
|
34
|
+
- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
|
|
35
|
+
- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
|
|
36
|
+
- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
|
|
37
|
+
- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
|
package/docs/Toolbar.md
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<!-- Generated by emit-docs.ts — do not edit. -->
|
|
2
|
+
# Toolbar
|
|
3
|
+
|
|
4
|
+
Horizontal grouping row for filter/search controls (D52). Wraps on overflow; zero JS. Deliberately NOT ARIA role="toolbar" — that role contracts roving-tabindex arrow-key navigation, wrong for form controls. With aria-label it announces as role="group".
|
|
5
|
+
|
|
6
|
+
## Props
|
|
7
|
+
|
|
8
|
+
| Prop | Type | Default | Required | Description |
|
|
9
|
+
|---|---|---|---|---|
|
|
10
|
+
| `gap` | `8 \| 12 \| 16` | 8 | no | Gap between controls in px. |
|
|
11
|
+
| `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root element. |
|
|
12
|
+
| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
|
|
13
|
+
|
|
14
|
+
## Keyboard & assistive tech
|
|
15
|
+
|
|
16
|
+
| Keys | Behavior |
|
|
17
|
+
|---|---|
|
|
18
|
+
| Tab | Moves through the controls in DOM order — no roving tabindex (deliberately not role=toolbar, D52). |
|
|
19
|
+
|
|
20
|
+
With aria-label it renders role=group so the control cluster announces with a name; unlabeled it is a plain layout div.
|
|
21
|
+
|
|
22
|
+
## Theming
|
|
23
|
+
|
|
24
|
+
Override `--psi-toolbar-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Rules
|
|
29
|
+
|
|
30
|
+
- One accent per visual group; everything else neutral or ghost.
|
|
31
|
+
- danger only for actions with real consequences.
|
|
32
|
+
- Sizes are px numbers (24|32|40|48), never S/M/L.
|
|
33
|
+
- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
|
|
34
|
+
- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
|
|
35
|
+
- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
|
|
36
|
+
- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
|
|
37
|
+
- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
|
package/llms.txt
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
# @handamade/psi-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
15 React 19 components consuming @handamade/psi-tokens. Zero runtime deps, CSS Modules, ref-as-prop.
|
|
4
4
|
|
|
5
5
|
## Machine-readable artifacts
|
|
6
6
|
- dist/manifest.json: full component/prop inventory with types and defaults
|
|
7
|
+
- dist/patterns.json: 3 composition patterns (D47) — gap-annotated recipes with clarifying parameters; presets are generated JSX, never hand-written
|
|
7
8
|
- docs/{Component}.md: per-component docs (props, theming, variant guidance)
|
|
8
9
|
|
|
9
10
|
## Rules for generated code
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
- size is a px number (24|32|40|48), never "sm"/"md"/"lg".
|
|
13
14
|
- variant vocabulary: accent | accent-subtle | neutral | neutral-subtle | ghost | danger | danger-subtle | outline.
|
|
14
15
|
- One accent per visual group. danger only for destructive actions.
|
|
16
|
+
- Before composing multi-component UI, consult dist/patterns.json (or psi-mcp search) for a matching pattern and honor its clarifying parameters; presets are copy-paste JSX generated from the compose tree.
|
|
15
17
|
|
|
16
18
|
## Button: href + outline (D33/D34)
|
|
17
19
|
- Button renders as an <a> when given `href` (plus optional `target`/`rel`); disabled anchors get aria-disabled, no href attribute, and pointer-events: none instead of the disabled attribute.
|
|
@@ -21,6 +23,12 @@
|
|
|
21
23
|
## Card
|
|
22
24
|
- <Card variant="stacked" | "featured" media={...} hoverLift>: stacked places media above the body, featured places media beside it (~1.6fr/1fr, stacks under the md breakpoint). hoverLift lifts the card translateY(-6px) over --psi-duration-350. Border uses --psi-border-faint.
|
|
23
25
|
|
|
26
|
+
## Panel
|
|
27
|
+
- <Panel padding={16|24}>: the elevated surface panel (D51) — bg-secondary, faint hairline border, radius-12, space-24 padding (16 for compact). Binds the shared --psi-surface-* recipe Dialog's panel also uses; brands retune both by overriding --psi-surface-*. Not a Card: no media slot, no hover lift.
|
|
28
|
+
|
|
29
|
+
## Toolbar
|
|
30
|
+
- <Toolbar gap={8|12|16} aria-label="Filters">: horizontal wrapping row for filter/search controls (Input, Select, Tag, Button). Wraps on overflow (D52); with aria-label it announces as role=group. Deliberately not ARIA role=toolbar (no roving tabindex). Unblocks the filter-toolbar pattern — consult dist/patterns.json for the preset.
|
|
31
|
+
|
|
24
32
|
## NavBar
|
|
25
33
|
- <NavBar brand={...} actions={...}>{links}</NavBar>: brand slot leading, nav links centered/inline, actions slot trailing (theme switch, CTA). Renders inside .psi-container. Background defaults to --psi-scrim-heavy so content can scroll underneath; border uses --psi-border-faint.
|
|
26
34
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@handamade/psi-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
},
|
|
12
12
|
"./styles": "./dist/styles.css",
|
|
13
13
|
"./styles.css": "./dist/styles.css",
|
|
14
|
-
"./manifest.json": "./dist/manifest.json"
|
|
14
|
+
"./manifest.json": "./dist/manifest.json",
|
|
15
|
+
"./patterns.json": "./dist/patterns.json"
|
|
15
16
|
},
|
|
16
17
|
"files": [
|
|
17
18
|
"dist",
|
|
@@ -38,10 +39,10 @@
|
|
|
38
39
|
"tsx": "^4.22.4",
|
|
39
40
|
"vite": "^6.0.0",
|
|
40
41
|
"vitest": "^3.2.6",
|
|
41
|
-
"@handamade/psi-tokens": "0.
|
|
42
|
+
"@handamade/psi-tokens": "0.7.0"
|
|
42
43
|
},
|
|
43
44
|
"scripts": {
|
|
44
|
-
"build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-manifest.ts && tsx scripts/emit-docs.ts",
|
|
45
|
+
"build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-manifest.ts && tsx scripts/emit-patterns.ts && tsx scripts/emit-docs.ts",
|
|
45
46
|
"dev": "vite build --watch"
|
|
46
47
|
}
|
|
47
48
|
}
|