@sesionario/blocks 1.19.0 → 1.21.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/NOTICE +14 -0
- package/README.md +83 -2
- package/dist/index.cjs +790 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +180 -9
- package/dist/index.d.ts +180 -9
- package/dist/index.js +785 -21
- package/dist/index.js.map +1 -1
- package/package.json +7 -3
package/NOTICE
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
Payment card brand SVG artwork
|
|
2
|
+
==============================
|
|
3
|
+
|
|
4
|
+
The icons under `src/components/payment-icons/generated/` are derived from:
|
|
5
|
+
|
|
6
|
+
svg-credit-card-payment-icons
|
|
7
|
+
Copyright Aaron Fagan and contributors
|
|
8
|
+
https://github.com/aaronfagan/svg-credit-card-payment-icons
|
|
9
|
+
|
|
10
|
+
Licensed under the Apache License, Version 2.0
|
|
11
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
|
|
13
|
+
Generated into this package via `pnpm payment-icons:generate`
|
|
14
|
+
(`scripts/generate-payment-icons.mjs`).
|
package/README.md
CHANGED
|
@@ -6,6 +6,81 @@ This package is the Sesionario-specific successor to `@algenium/blocks`. It ship
|
|
|
6
6
|
|
|
7
7
|
Shared feedback patterns include `ConfirmDestructiveDialog` (confirm before delete/mute and similar irreversible actions).
|
|
8
8
|
|
|
9
|
+
### Read-first editable sections (`EditableSection`, `DataList`, `FieldMessage`)
|
|
10
|
+
|
|
11
|
+
Settings and profile data should be readable by default, then turn into a real `<form>` when the person chooses Edit. The primitives are chrome-free — no Card, border, or title — so you place actions in your own layout (`CardAction`, page header, dialog, or a bare section).
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import {
|
|
15
|
+
EditableSection,
|
|
16
|
+
DataList,
|
|
17
|
+
DataListItem,
|
|
18
|
+
FieldMessage,
|
|
19
|
+
} from "@sesionario/blocks";
|
|
20
|
+
|
|
21
|
+
<EditableSection
|
|
22
|
+
labelledBy="fiscal-title"
|
|
23
|
+
isDirty={dirty}
|
|
24
|
+
onDiscard={() => reset()}
|
|
25
|
+
onSave={async () => {
|
|
26
|
+
/* throw on validation/API failure so edit mode stays open */
|
|
27
|
+
await save();
|
|
28
|
+
}}
|
|
29
|
+
labels={{
|
|
30
|
+
edit: t("edit"),
|
|
31
|
+
save: t("save"),
|
|
32
|
+
saving: t("saving"),
|
|
33
|
+
cancel: t("cancel"),
|
|
34
|
+
saved: t("saved"),
|
|
35
|
+
}}
|
|
36
|
+
readView={() => (
|
|
37
|
+
<DataList>
|
|
38
|
+
<DataListItem label="RFC">{rfc}</DataListItem>
|
|
39
|
+
</DataList>
|
|
40
|
+
)}
|
|
41
|
+
editView={() => (
|
|
42
|
+
<div className="flex flex-col gap-1.5">
|
|
43
|
+
<label htmlFor="rfc">RFC</label>
|
|
44
|
+
<input id="rfc" value={rfc} onChange={...} aria-invalid={!!error} aria-describedby="rfc-err" />
|
|
45
|
+
<FieldMessage id="rfc-err">{error}</FieldMessage>
|
|
46
|
+
</div>
|
|
47
|
+
)}
|
|
48
|
+
>
|
|
49
|
+
{({ actions, content, status }) => (
|
|
50
|
+
<Card>
|
|
51
|
+
<CardHeader>
|
|
52
|
+
<CardTitle id="fiscal-title">Datos fiscales</CardTitle>
|
|
53
|
+
<CardAction>{actions}</CardAction>
|
|
54
|
+
</CardHeader>
|
|
55
|
+
<CardContent>
|
|
56
|
+
{content}
|
|
57
|
+
{status}
|
|
58
|
+
</CardContent>
|
|
59
|
+
</Card>
|
|
60
|
+
)}
|
|
61
|
+
</EditableSection>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Headless alternative: `useEditableSection` for card-less surfaces (dialogs, table rows, page headers).
|
|
65
|
+
|
|
66
|
+
Optional progressive-enhancement CSS for a smoother height change (Chromium 129+; no-op elsewhere). Honor reduced motion:
|
|
67
|
+
|
|
68
|
+
```css
|
|
69
|
+
@supports (interpolate-size: allow-keywords) {
|
|
70
|
+
.sesionario-editable-section-content {
|
|
71
|
+
interpolate-size: allow-keywords;
|
|
72
|
+
transition: min-height 200ms ease;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
@media (prefers-reduced-motion: reduce) {
|
|
76
|
+
.sesionario-editable-section-content {
|
|
77
|
+
transition: none;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Pass `stableHeight` for small (1–2 field) sections if you want later toggles to keep a cached `min-height`.
|
|
83
|
+
|
|
9
84
|
## Install
|
|
10
85
|
|
|
11
86
|
```bash
|
|
@@ -31,7 +106,7 @@ Peer dependencies (install in the consuming app as needed):
|
|
|
31
106
|
|
|
32
107
|
### Payment icons (`PaymentIcon`)
|
|
33
108
|
|
|
34
|
-
|
|
109
|
+
Vendored flat-rounded brand marks (Aaron Fagan’s [svg-credit-card-payment-icons](https://github.com/aaronfagan/svg-credit-card-payment-icons), Apache-2.0). Pass a Stripe `card.brand` code:
|
|
35
110
|
|
|
36
111
|
```tsx
|
|
37
112
|
import { PaymentIcon, formatPaymentCardBrand } from "@sesionario/blocks";
|
|
@@ -40,7 +115,13 @@ import { PaymentIcon, formatPaymentCardBrand } from "@sesionario/blocks";
|
|
|
40
115
|
<span>{formatPaymentCardBrand("amex")}</span> {/* American Express */}
|
|
41
116
|
```
|
|
42
117
|
|
|
43
|
-
Unknown or null brands render the Generic mark.
|
|
118
|
+
Unknown or null brands render the Generic mark. Regenerate icons after updating the upstream SVGs:
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
pnpm payment-icons:generate
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
See [`NOTICE`](NOTICE) for artwork attribution.
|
|
44
125
|
|
|
45
126
|
### Chat UI (`MessageScroller`, `ChatMessageList`, …)
|
|
46
127
|
|