@hanzo/ui 8.0.37 → 8.0.38
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.
|
@@ -21,16 +21,22 @@ const CardFrame = (0, gui_1.styled)(gui_1.YStack, {
|
|
|
21
21
|
py: PAD,
|
|
22
22
|
gap: PAD,
|
|
23
23
|
});
|
|
24
|
-
|
|
24
|
+
// STACKED, not a row. The reference header is a grid whose rows are
|
|
25
|
+
// `[auto_auto]` — title above description — and it only becomes two columns
|
|
26
|
+
// when a CardAction is present. Porting it to XStack put the title and the
|
|
27
|
+
// description side by side, so every plain <CardHeader><CardTitle/>
|
|
28
|
+
// <CardDescription/></CardHeader> rendered as two narrow columns with the
|
|
29
|
+
// title wrapping mid-phrase. That is the shape 79 of 79 call sites in
|
|
30
|
+
// hanzo.app use; CardAction is used in none of them and self-aligns instead.
|
|
31
|
+
const HeaderFrame = (0, gui_1.styled)(gui_1.YStack, {
|
|
25
32
|
name: 'CardHeader',
|
|
26
33
|
px: PAD,
|
|
27
34
|
gap: '$2',
|
|
28
35
|
items: 'flex-start',
|
|
29
|
-
justify: 'space-between',
|
|
30
36
|
});
|
|
31
37
|
const TitleFrame = (0, gui_1.styled)(gui_1.SizableText, { name: 'CardTitle', size: '$4', fontWeight: '600' });
|
|
32
38
|
const DescriptionFrame = (0, gui_1.styled)(gui_1.SizableText, { name: 'CardDescription', size: '$2', color: '$color11' });
|
|
33
|
-
const ActionFrame = (0, gui_1.styled)(gui_1.XStack, { name: 'CardAction', self: 'flex-
|
|
39
|
+
const ActionFrame = (0, gui_1.styled)(gui_1.XStack, { name: 'CardAction', self: 'flex-end', shrink: 0 });
|
|
34
40
|
const ContentFrame = (0, gui_1.styled)(gui_1.YStack, { name: 'CardContent', px: PAD });
|
|
35
41
|
const FooterFrame = (0, gui_1.styled)(gui_1.XStack, { name: 'CardFooter', px: PAD, items: 'center' });
|
|
36
42
|
const Card = (p) => (0, jsx_runtime_1.jsx)(CardFrame, { ...(0, slot_1.slot)('card'), ...p });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,QAAA,MAAM,SAAS;;;8CAQb,CAAA;
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,QAAA,MAAM,SAAS;;;8CAQb,CAAA;AASF,QAAA,MAAM,WAAW;;;8CAKf,CAAA;AAEF,QAAA,MAAM,UAAU;;;8CAA4E,CAAA;AAC5F,QAAA,MAAM,gBAAgB;;;8CAAkF,CAAA;AACxG,QAAA,MAAM,WAAW;;;8CAAsE,CAAA;AACvF,QAAA,MAAM,YAAY;;;8CAAmD,CAAA;AACrE,QAAA,MAAM,WAAW;;;8CAAmE,CAAA;AAEpF,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AACxD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAChE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAC9D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAC1E,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAChE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;AAClE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAEhE,QAAA,MAAM,IAAI,GAAI,GAAG,SAAS,4CAA2C,CAAA;AACrE,QAAA,MAAM,UAAU,GAAI,GAAG,eAAe,4CAAoD,CAAA;AAC1F,QAAA,MAAM,SAAS,GAAI,GAAG,cAAc,4CAAkD,CAAA;AACtF,QAAA,MAAM,eAAe,GAAI,GAAG,oBAAoB,4CAA8D,CAAA;AAC9G,QAAA,MAAM,UAAU,GAAI,GAAG,eAAe,4CAAoD,CAAA;AAC1F,QAAA,MAAM,WAAW,GAAI,GAAG,gBAAgB,4CAAsD,CAAA;AAC9F,QAAA,MAAM,UAAU,GAAI,GAAG,eAAe,4CAAoD,CAAA;AAE1F,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -18,16 +18,22 @@ const CardFrame = styled(YStack, {
|
|
|
18
18
|
py: PAD,
|
|
19
19
|
gap: PAD,
|
|
20
20
|
});
|
|
21
|
-
|
|
21
|
+
// STACKED, not a row. The reference header is a grid whose rows are
|
|
22
|
+
// `[auto_auto]` — title above description — and it only becomes two columns
|
|
23
|
+
// when a CardAction is present. Porting it to XStack put the title and the
|
|
24
|
+
// description side by side, so every plain <CardHeader><CardTitle/>
|
|
25
|
+
// <CardDescription/></CardHeader> rendered as two narrow columns with the
|
|
26
|
+
// title wrapping mid-phrase. That is the shape 79 of 79 call sites in
|
|
27
|
+
// hanzo.app use; CardAction is used in none of them and self-aligns instead.
|
|
28
|
+
const HeaderFrame = styled(YStack, {
|
|
22
29
|
name: 'CardHeader',
|
|
23
30
|
px: PAD,
|
|
24
31
|
gap: '$2',
|
|
25
32
|
items: 'flex-start',
|
|
26
|
-
justify: 'space-between',
|
|
27
33
|
});
|
|
28
34
|
const TitleFrame = styled(SizableText, { name: 'CardTitle', size: '$4', fontWeight: '600' });
|
|
29
35
|
const DescriptionFrame = styled(SizableText, { name: 'CardDescription', size: '$2', color: '$color11' });
|
|
30
|
-
const ActionFrame = styled(XStack, { name: 'CardAction', self: 'flex-
|
|
36
|
+
const ActionFrame = styled(XStack, { name: 'CardAction', self: 'flex-end', shrink: 0 });
|
|
31
37
|
const ContentFrame = styled(YStack, { name: 'CardContent', px: PAD });
|
|
32
38
|
const FooterFrame = styled(XStack, { name: 'CardFooter', px: PAD, items: 'center' });
|
|
33
39
|
const Card = (p) => _jsx(CardFrame, { ...slot('card'), ...p });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;GAKG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,GAAG,GAAG,EAAE,CAAA;AAEd,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE;IAC/B,IAAI,EAAE,MAAM;IACZ,EAAE,EAAE,aAAa;IACjB,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,GAAG;IACP,GAAG,EAAE,GAAG;CACT,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IACjC,IAAI,EAAE,YAAY;IAClB,EAAE,EAAE,GAAG;IACP,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,YAAY;
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/backends/gui/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;GAKG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,GAAG,GAAG,EAAE,CAAA;AAEd,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE;IAC/B,IAAI,EAAE,MAAM;IACZ,EAAE,EAAE,aAAa;IACjB,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,GAAG;IACP,GAAG,EAAE,GAAG;CACT,CAAC,CAAA;AAEF,oEAAoE;AACpE,4EAA4E;AAC5E,2EAA2E;AAC3E,oEAAoE;AACpE,0EAA0E;AAC1E,sEAAsE;AACtE,6EAA6E;AAC7E,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IACjC,IAAI,EAAE,YAAY;IAClB,EAAE,EAAE,GAAG;IACP,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,YAAY;CACpB,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAA;AAC5F,MAAM,gBAAgB,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAA;AACxG,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAA;AACvF,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAA;AACrE,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAA;AAUpF,MAAM,IAAI,GAAG,CAAC,CAAY,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,IAAI,CAAC,MAAM,CAAC,KAAM,CAAC,GAAI,CAAA;AACrE,MAAM,UAAU,GAAG,CAAC,CAAkB,EAAE,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,CAAC,aAAa,CAAC,KAAM,CAAC,GAAI,CAAA;AAC1F,MAAM,SAAS,GAAG,CAAC,CAAiB,EAAE,EAAE,CAAC,KAAC,UAAU,OAAK,IAAI,CAAC,YAAY,CAAC,KAAM,CAAC,GAAI,CAAA;AACtF,MAAM,eAAe,GAAG,CAAC,CAAuB,EAAE,EAAE,CAAC,KAAC,gBAAgB,OAAK,IAAI,CAAC,kBAAkB,CAAC,KAAM,CAAC,GAAI,CAAA;AAC9G,MAAM,UAAU,GAAG,CAAC,CAAkB,EAAE,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,CAAC,aAAa,CAAC,KAAM,CAAC,GAAI,CAAA;AAC1F,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,IAAI,CAAC,cAAc,CAAC,KAAM,CAAC,GAAI,CAAA;AAC9F,MAAM,UAAU,GAAG,CAAC,CAAkB,EAAE,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,CAAC,aAAa,CAAC,KAAM,CAAC,GAAI,CAAA;AAE1F,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.38",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/tokens. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
|
|
6
6
|
"exports": {
|