@handamade/psi-react 0.5.0 → 0.6.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/dist/index.js CHANGED
@@ -72,7 +72,7 @@ function Dn({
72
72
  }
73
73
  );
74
74
  }
75
- const ie = "_iconButton_1dldx_3", re = "_disabled_1dldx_29", se = "_size24_1dldx_37", ae = "_size32_1dldx_42", ce = "_size40_1dldx_47", le = "_size48_1dldx_52", de = "_accent_1dldx_60", ue = "_neutral_1dldx_72", _e = "_ghost_1dldx_84", he = "_danger_1dldx_96", p = {
75
+ const ie = "_iconButton_1dldx_3", re = "_disabled_1dldx_29", se = "_size24_1dldx_37", ae = "_size32_1dldx_42", ce = "_size40_1dldx_47", le = "_size48_1dldx_52", de = "_accent_1dldx_60", ue = "_neutral_1dldx_72", _e = "_ghost_1dldx_84", he = "_danger_1dldx_96", y = {
76
76
  iconButton: ie,
77
77
  disabled: re,
78
78
  size24: se,
@@ -84,15 +84,15 @@ const ie = "_iconButton_1dldx_3", re = "_disabled_1dldx_29", se = "_size24_1dldx
84
84
  ghost: _e,
85
85
  danger: he
86
86
  }, ve = {
87
- accent: p.accent,
88
- neutral: p.neutral,
89
- ghost: p.ghost,
90
- danger: p.danger
87
+ accent: y.accent,
88
+ neutral: y.neutral,
89
+ ghost: y.ghost,
90
+ danger: y.danger
91
91
  }, fe = {
92
- 24: p.size24,
93
- 32: p.size32,
94
- 40: p.size40,
95
- 48: p.size48
92
+ 24: y.size24,
93
+ 32: y.size32,
94
+ 40: y.size40,
95
+ 48: y.size48
96
96
  };
97
97
  function ge({
98
98
  variant: e = "neutral",
@@ -107,10 +107,10 @@ function ge({
107
107
  ...h
108
108
  }) {
109
109
  const g = [
110
- p.iconButton,
110
+ y.iconButton,
111
111
  ve[e],
112
112
  fe[t],
113
- r !== void 0 && o ? p.disabled : void 0,
113
+ r !== void 0 && o ? y.disabled : void 0,
114
114
  i
115
115
  ].filter(Boolean).join(" ");
116
116
  return r !== void 0 ? /* @__PURE__ */ n(
@@ -136,10 +136,10 @@ function ge({
136
136
  }
137
137
  );
138
138
  }
139
- const be = "_card_1btb3_1", pe = "_stacked_1btb3_8", ye = "_featured_1btb3_10", ke = "_media_1btb3_22", me = "_body_1btb3_23", xe = "_hoverLift_1btb3_31", m = {
139
+ const be = "_card_1btb3_1", ye = "_stacked_1btb3_8", pe = "_featured_1btb3_10", ke = "_media_1btb3_22", me = "_body_1btb3_23", xe = "_hoverLift_1btb3_31", m = {
140
140
  card: be,
141
- stacked: pe,
142
- featured: ye,
141
+ stacked: ye,
142
+ featured: pe,
143
143
  media: ke,
144
144
  body: me,
145
145
  hoverLift: xe
@@ -345,7 +345,7 @@ function _t({ size: e = 20, ...t }) {
345
345
  /* @__PURE__ */ n("line", { x1: "17.5", y1: "6.5", x2: "17.51", y2: "6.5" })
346
346
  ] });
347
347
  }
348
- const Ae = "_dialog_j8ndn_2", Ee = "_w400_j8ndn_31", Ve = "_w560_j8ndn_32", qe = "_w720_j8ndn_33", Re = "_panel_j8ndn_35", De = "_header_j8ndn_41", Te = "_title_j8ndn_48", Fe = "_footer_j8ndn_54", y = {
348
+ const Ae = "_dialog_j8ndn_2", Ee = "_w400_j8ndn_31", Ve = "_w560_j8ndn_32", qe = "_w720_j8ndn_33", Re = "_panel_j8ndn_35", De = "_header_j8ndn_41", Te = "_title_j8ndn_48", Fe = "_footer_j8ndn_54", p = {
349
349
  dialog: Ae,
350
350
  w400: Ee,
351
351
  w560: Ve,
@@ -355,9 +355,9 @@ const Ae = "_dialog_j8ndn_2", Ee = "_w400_j8ndn_31", Ve = "_w560_j8ndn_32", qe =
355
355
  title: Te,
356
356
  footer: Fe
357
357
  }, Pe = {
358
- 400: y.w400,
359
- 560: y.w560,
360
- 720: y.w720
358
+ 400: p.w400,
359
+ 560: p.w560,
360
+ 720: p.w720
361
361
  };
362
362
  function ht({
363
363
  open: e,
@@ -388,7 +388,7 @@ function ht({
388
388
  _.preventDefault(), o && t("esc");
389
389
  }, k = (_) => {
390
390
  o && _.target === g.current && t("backdrop");
391
- }, N = [y.dialog, Pe[a], i].filter(Boolean).join(" ");
391
+ }, N = [p.dialog, Pe[a], i].filter(Boolean).join(" ");
392
392
  return /* @__PURE__ */ n(
393
393
  "dialog",
394
394
  {
@@ -398,9 +398,9 @@ function ht({
398
398
  onCancel: B,
399
399
  onClick: k,
400
400
  ...h,
401
- children: /* @__PURE__ */ c("div", { className: y.panel, children: [
402
- (r != null || o) && /* @__PURE__ */ c("div", { className: y.header, children: [
403
- r != null && /* @__PURE__ */ n("h2", { id: v, className: y.title, children: r }),
401
+ children: /* @__PURE__ */ c("div", { className: p.panel, children: [
402
+ (r != null || o) && /* @__PURE__ */ c("div", { className: p.header, children: [
403
+ r != null && /* @__PURE__ */ n("h2", { id: v, className: p.title, children: r }),
404
404
  o && /* @__PURE__ */ n(
405
405
  ge,
406
406
  {
@@ -413,7 +413,7 @@ function ht({
413
413
  )
414
414
  ] }),
415
415
  l,
416
- s != null && /* @__PURE__ */ n("div", { className: y.footer, children: s })
416
+ s != null && /* @__PURE__ */ n("div", { className: p.footer, children: s })
417
417
  ] })
418
418
  }
419
419
  );
@@ -487,7 +487,7 @@ function ft({
487
487
  }
488
488
  );
489
489
  }
490
- const sn = "_label_n457n_3", an = "_disabled_n457n_13", cn = "_input_n457n_20", ln = "_indicator_n457n_34", dn = "_text_n457n_74", $ = {
490
+ const sn = "_label_thyza_3", an = "_disabled_thyza_13", cn = "_input_thyza_20", ln = "_indicator_thyza_34", dn = "_text_thyza_75", $ = {
491
491
  label: sn,
492
492
  disabled: an,
493
493
  input: cn,
@@ -549,10 +549,10 @@ function bt({
549
549
  e && /* @__PURE__ */ n("span", { className: w.text, children: e })
550
550
  ] });
551
551
  }
552
- const bn = "_tag_3oysa_3", pn = "_dismiss_3oysa_17", yn = "_neutral_3oysa_43", kn = "_accent_3oysa_48", mn = "_success_3oysa_53", xn = "_warning_3oysa_58", wn = "_danger_3oysa_63", zn = "_neutralSubtle_3oysa_70", Cn = "_accentSubtle_3oysa_75", Ln = "_successSubtle_3oysa_80", Bn = "_warningSubtle_3oysa_85", jn = "_dangerSubtle_3oysa_90", b = {
552
+ const bn = "_tag_3oysa_3", yn = "_dismiss_3oysa_17", pn = "_neutral_3oysa_43", kn = "_accent_3oysa_48", mn = "_success_3oysa_53", xn = "_warning_3oysa_58", wn = "_danger_3oysa_63", zn = "_neutralSubtle_3oysa_70", Cn = "_accentSubtle_3oysa_75", Ln = "_successSubtle_3oysa_80", Bn = "_warningSubtle_3oysa_85", jn = "_dangerSubtle_3oysa_90", b = {
553
553
  tag: bn,
554
- dismiss: pn,
555
- neutral: yn,
554
+ dismiss: yn,
555
+ neutral: pn,
556
556
  accent: kn,
557
557
  success: mn,
558
558
  warning: xn,
@@ -575,7 +575,7 @@ const bn = "_tag_3oysa_3", pn = "_dismiss_3oysa_17", yn = "_neutral_3oysa_43", k
575
575
  warning: b.warningSubtle,
576
576
  danger: b.dangerSubtle
577
577
  };
578
- function pt({
578
+ function yt({
579
579
  variant: e = "neutral",
580
580
  subtle: t = !1,
581
581
  onDismiss: r,
@@ -629,7 +629,7 @@ const Sn = "_wrapper_17qua_3", In = "_tooltip_17qua_10", Mn = "_top_17qua_24", W
629
629
  left: L.left,
630
630
  right: L.right
631
631
  }, Vn = 150;
632
- function yt({
632
+ function pt({
633
633
  content: e,
634
634
  children: t,
635
635
  placement: r = "top"
@@ -714,6 +714,6 @@ export {
714
714
  Fn as NavBar,
715
715
  ft as Select,
716
716
  bt as Switch,
717
- pt as Tag,
718
- yt as Tooltip
717
+ yt as Tag,
718
+ pt as Tooltip
719
719
  };
@@ -227,7 +227,26 @@
227
227
  {
228
228
  "name": "Field",
229
229
  "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": [],
230
+ "slots": [
231
+ {
232
+ "name": "label",
233
+ "accepts": {},
234
+ "cardinality": "0..1",
235
+ "order": 1
236
+ },
237
+ {
238
+ "name": "body",
239
+ "accepts": {},
240
+ "cardinality": "1..*",
241
+ "order": 2
242
+ },
243
+ {
244
+ "name": "description",
245
+ "accepts": {},
246
+ "cardinality": "0..1",
247
+ "order": 3
248
+ }
249
+ ],
231
250
  "props": [
232
251
  {
233
252
  "name": "label",
@@ -0,0 +1,139 @@
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
+ "Toolbar"
94
+ ],
95
+ "blocked": true,
96
+ "preset": null
97
+ },
98
+ {
99
+ "id": "settings-form-row",
100
+ "intent": "Labeled settings row: a self-labeled control with a group label and helper text",
101
+ "match": [
102
+ "settings row",
103
+ "form row",
104
+ "labeled switch",
105
+ "preference toggle",
106
+ "settings form"
107
+ ],
108
+ "compose": {
109
+ "component": "Field",
110
+ "props": {
111
+ "group": true
112
+ },
113
+ "slots": {
114
+ "label": [
115
+ "{content:row-label}"
116
+ ],
117
+ "body": [
118
+ {
119
+ "component": "Switch",
120
+ "content": "control-label"
121
+ }
122
+ ],
123
+ "description": [
124
+ "{content:row-description}"
125
+ ]
126
+ }
127
+ },
128
+ "parameters": [],
129
+ "content": {
130
+ "row-label": "<setting name>",
131
+ "control-label": "<what turning it on does>",
132
+ "row-description": "<one-line consequence of the setting>"
133
+ },
134
+ "gaps": [],
135
+ "blocked": false,
136
+ "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"
137
+ }
138
+ ]
139
+ }
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)}._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_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)}
package/llms.txt CHANGED
@@ -4,6 +4,7 @@
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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@handamade/psi-react",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -38,10 +38,10 @@
38
38
  "tsx": "^4.22.4",
39
39
  "vite": "^6.0.0",
40
40
  "vitest": "^3.2.6",
41
- "@handamade/psi-tokens": "0.5.0"
41
+ "@handamade/psi-tokens": "0.6.0"
42
42
  },
43
43
  "scripts": {
44
- "build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-manifest.ts && tsx scripts/emit-docs.ts",
44
+ "build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-manifest.ts && tsx scripts/emit-patterns.ts && tsx scripts/emit-docs.ts",
45
45
  "dev": "vite build --watch"
46
46
  }
47
47
  }