@hanzo/ui 8.27.46 → 8.27.48
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/backends/gui/control.cjs +18 -1
- package/dist/backends/gui/control.d.ts +33 -0
- package/dist/backends/gui/control.d.ts.map +1 -1
- package/dist/backends/gui/control.js +17 -0
- package/dist/backends/gui/control.js.map +1 -1
- package/dist/backends/gui/index.cjs +7 -6
- package/dist/backends/gui/index.d.ts +2 -1
- package/dist/backends/gui/index.d.ts.map +1 -1
- package/dist/backends/gui/index.js +1 -1
- package/dist/backends/gui/index.js.map +1 -1
- package/dist/backends/gui/input.cjs +10 -9
- package/dist/backends/gui/input.d.ts +6 -1
- package/dist/backends/gui/input.d.ts.map +1 -1
- package/dist/backends/gui/input.js +11 -10
- package/dist/backends/gui/input.js.map +1 -1
- package/dist/backends/gui/select.cjs +24 -1
- package/dist/backends/gui/select.d.ts +25 -2
- package/dist/backends/gui/select.d.ts.map +1 -1
- package/dist/backends/gui/select.js +26 -4
- package/dist/backends/gui/select.js.map +1 -1
- package/dist/backends/gui/textarea.cjs +5 -4
- package/dist/backends/gui/textarea.d.ts +7 -1
- package/dist/backends/gui/textarea.d.ts.map +1 -1
- package/dist/backends/gui/textarea.js +6 -5
- package/dist/backends/gui/textarea.js.map +1 -1
- package/dist/gallery.html +107 -7
- package/dist/index.cjs +8 -7
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.node.cjs +8 -7
- package/dist/index.node.js +1 -1
- package/dist/marketing/Cta.cjs +9 -3
- package/dist/marketing/Cta.d.ts +7 -5
- package/dist/marketing/Cta.d.ts.map +1 -1
- package/dist/marketing/Cta.js +10 -4
- package/dist/marketing/Cta.js.map +1 -1
- package/dist/marketing/controls.cjs +112 -0
- package/dist/marketing/controls.d.ts +42 -0
- package/dist/marketing/controls.d.ts.map +1 -0
- package/dist/marketing/controls.js +108 -0
- package/dist/marketing/controls.js.map +1 -0
- package/dist/marketing/document.cjs +7 -0
- package/dist/marketing/document.d.ts +22 -0
- package/dist/marketing/document.d.ts.map +1 -0
- package/dist/marketing/document.js +5 -0
- package/dist/marketing/document.js.map +1 -0
- package/dist/marketing/host.cjs +39 -0
- package/dist/marketing/host.d.ts +21 -0
- package/dist/marketing/host.d.ts.map +1 -0
- package/dist/marketing/host.js +35 -0
- package/dist/marketing/host.js.map +1 -0
- package/dist/marketing/index.cjs +24 -1
- package/dist/marketing/index.d.ts +8 -2
- package/dist/marketing/index.d.ts.map +1 -1
- package/dist/marketing/index.js +7 -1
- package/dist/marketing/index.js.map +1 -1
- package/dist/marketing/loose.cjs +2 -0
- package/dist/marketing/loose.d.ts +41 -0
- package/dist/marketing/loose.d.ts.map +1 -0
- package/dist/marketing/loose.js +2 -0
- package/dist/marketing/loose.js.map +1 -0
- package/dist/marketing/pager.cjs +22 -0
- package/dist/marketing/pager.d.ts +22 -0
- package/dist/marketing/pager.d.ts.map +1 -0
- package/dist/marketing/pager.js +20 -0
- package/dist/marketing/pager.js.map +1 -0
- package/dist/marketing/pair.cjs +21 -0
- package/dist/marketing/pair.d.ts +22 -0
- package/dist/marketing/pair.d.ts.map +1 -0
- package/dist/marketing/pair.js +19 -0
- package/dist/marketing/pair.js.map +1 -0
- package/dist/marketing/run.cjs +28 -0
- package/dist/marketing/run.d.ts +33 -0
- package/dist/marketing/run.d.ts.map +1 -0
- package/dist/marketing/run.js +26 -0
- package/dist/marketing/run.js.map +1 -0
- package/dist/marketing/surface.cjs +76 -0
- package/dist/marketing/surface.d.ts +59 -0
- package/dist/marketing/surface.d.ts.map +1 -0
- package/dist/marketing/surface.js +70 -0
- package/dist/marketing/surface.js.map +1 -0
- package/dist/marketing/type.cjs +29 -2
- package/dist/marketing/type.d.ts +43 -4
- package/dist/marketing/type.d.ts.map +1 -1
- package/dist/marketing/type.js +24 -1
- package/dist/marketing/type.js.map +1 -1
- package/dist/styles/document.css +93 -0
- package/dist/styles/motion.css +52 -2
- package/dist/styles.css +104 -4
- package/dist/theme.css +52 -2
- package/package.json +3 -2
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
/**
|
|
4
|
+
* The three controls a marketing page closes a thought with, one set:
|
|
5
|
+
*
|
|
6
|
+
* Action the button — chrome glass, or `fill` for the one loud control
|
|
7
|
+
* Chip a word in an outline: a badge, a tag, a filter
|
|
8
|
+
* More the quiet link — "View all →", "See full pricing ↗"
|
|
9
|
+
*
|
|
10
|
+
* Each is a gui Text, so it carries its own type and draws its own box: the
|
|
11
|
+
* label and any icon beside it inherit the ink, and nothing reaches in from a
|
|
12
|
+
* stylesheet. White space is the parent's, so a control inside a line that
|
|
13
|
+
* clips with an ellipsis stays on that line. An `href` makes it a link: an internal one goes through the app's
|
|
14
|
+
* router link (@hanzo/ui's `Link` context, set once at the root), any other is
|
|
15
|
+
* an anchor. A control that does something passes `render="button"`.
|
|
16
|
+
*
|
|
17
|
+
* The ease between rest and hover is @hanzo/design's base, which grants every
|
|
18
|
+
* `<a>` and `<button>` its colour, fill, edge and shadow transition, and the
|
|
19
|
+
* pointer (or `not-allowed` on a disabled button); a control restates none of it.
|
|
20
|
+
*
|
|
21
|
+
* Both themes are props. On the light ground the dark glass would draw a grey
|
|
22
|
+
* slab and the white fill would vanish into the page, so `$theme-light` turns
|
|
23
|
+
* the quiet weight to white glass with a dark edge and the loud one to ink.
|
|
24
|
+
*/
|
|
25
|
+
import { Text } from '@hanzo/gui';
|
|
26
|
+
import { slot } from '../backends/gui/slot.js';
|
|
27
|
+
import { address, useHost } from './host.js';
|
|
28
|
+
const BOX = {
|
|
29
|
+
display: 'inline-flex',
|
|
30
|
+
items: 'center',
|
|
31
|
+
whiteSpace: 'inherit',
|
|
32
|
+
textDecorationLine: 'none',
|
|
33
|
+
};
|
|
34
|
+
/** A rung that carries its own leading: naming the size alone leaves the line
|
|
35
|
+
* box to whatever an ancestor sets. */
|
|
36
|
+
const SMALL = { fontSize: '$2', lineHeight: 'calc(1.25 / 0.875)' };
|
|
37
|
+
/**
|
|
38
|
+
* A caller's own value holds in every state, the way a value stated on the
|
|
39
|
+
* element always has: a key the caller passes is dropped from the hover and from
|
|
40
|
+
* the light theme, so `color` on a chip stays that colour under the pointer and
|
|
41
|
+
* on the light ground. A caller's own `hoverStyle` or `$theme-light` replaces
|
|
42
|
+
* the default whole.
|
|
43
|
+
*/
|
|
44
|
+
const states = (p, hover, light) => {
|
|
45
|
+
const own = (s) => Object.fromEntries(Object.entries(s).filter(([k]) => !(k in p)));
|
|
46
|
+
const { hoverStyle: lightHover, ...lightRest } = light;
|
|
47
|
+
return {
|
|
48
|
+
...(p.hoverStyle === undefined ? { hoverStyle: own(hover) } : null),
|
|
49
|
+
...(p['$theme-light'] === undefined
|
|
50
|
+
? { '$theme-light': { ...own(lightRest), ...(lightHover && p.hoverStyle === undefined ? { hoverStyle: own(lightHover) } : null) } }
|
|
51
|
+
: null),
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
/** The quiet weight is chrome glass; `fill` drops the border outright rather
|
|
55
|
+
* than making it transparent, which would leave the loud control 2px wider
|
|
56
|
+
* than the quiet one beside it. 44px is the thumb floor, not a style. */
|
|
57
|
+
const Action = ({ render, fill = false, ...p }) => {
|
|
58
|
+
const host = useHost(render, p.href, 'a');
|
|
59
|
+
return (_jsx(Text, { ...slot('action'), ...(fill ? { 'data-fill': '' } : null), render: host, ...BOX, ...SMALL, justify: "center", gap: "$2", minH: 44, px: "$5", rounded: 9999, fontWeight: "500", backdropFilter: "var(--chrome-blur)", ...(fill
|
|
60
|
+
? {
|
|
61
|
+
borderWidth: 0,
|
|
62
|
+
bg: 'var(--pure-white)',
|
|
63
|
+
color: 'var(--pure-black)',
|
|
64
|
+
boxShadow: '0 4px 20px -2px var(--white-22), 0 2px 8px 0 color-mix(in srgb, var(--pure-black) 40%, transparent)',
|
|
65
|
+
...states(p, { opacity: 0.92, bg: 'var(--neutral-100)', color: 'var(--pure-black)' }, {
|
|
66
|
+
bg: 'var(--foreground)',
|
|
67
|
+
color: 'var(--background)',
|
|
68
|
+
boxShadow: '0 4px 16px -6px color-mix(in srgb, var(--pure-black) 40%, transparent)',
|
|
69
|
+
hoverStyle: { bg: 'var(--foreground)', color: 'var(--background)' },
|
|
70
|
+
}),
|
|
71
|
+
}
|
|
72
|
+
: {
|
|
73
|
+
borderWidth: 1,
|
|
74
|
+
borderStyle: 'solid',
|
|
75
|
+
borderColor: 'var(--white-14)',
|
|
76
|
+
bg: 'color-mix(in srgb, var(--neutral-900) 65%, transparent)',
|
|
77
|
+
color: 'var(--foreground)',
|
|
78
|
+
boxShadow: 'inset 0 1px 0 0 var(--white-14), 0 4px 16px -2px color-mix(in srgb, var(--pure-black) 30%, transparent)',
|
|
79
|
+
...states(p, { bg: 'color-mix(in srgb, var(--neutral-800) 80%, transparent)', borderColor: 'var(--white-22)', color: 'var(--pure-white)' }, {
|
|
80
|
+
borderColor: 'color-mix(in srgb, var(--pure-black) 14%, transparent)',
|
|
81
|
+
bg: 'color-mix(in srgb, var(--pure-white) 72%, transparent)',
|
|
82
|
+
color: 'var(--foreground)',
|
|
83
|
+
boxShadow: '0 2px 10px -4px color-mix(in srgb, var(--pure-black) 18%, transparent)',
|
|
84
|
+
hoverStyle: { borderColor: 'color-mix(in srgb, var(--pure-black) 26%, transparent)', bg: 'var(--pure-white)', color: 'var(--foreground)' },
|
|
85
|
+
}),
|
|
86
|
+
}), ...p }));
|
|
87
|
+
};
|
|
88
|
+
/** A word in an outline. Not an action — no fill, no weight — so the padding is
|
|
89
|
+
* the caller's: a chip and a badge are the same outline at two sizes. It
|
|
90
|
+
* brightens on approach only when it is a link. */
|
|
91
|
+
const Chip = ({ render, ...p }) => {
|
|
92
|
+
const host = useHost(render, p.href, 'span');
|
|
93
|
+
const link = address(host, p.href);
|
|
94
|
+
return (_jsx(Text, { ...slot('chip'), render: host, ...BOX, ...SMALL, gap: "$2", borderWidth: 1, borderStyle: "solid", borderColor: "var(--white-08)", rounded: 9999, color: "var(--neutral-300)", bg: "var(--white-03)", ...states(p, link ? { borderColor: 'var(--white-20)', color: 'var(--pure-white)' } : {}, {
|
|
95
|
+
borderColor: 'var(--border)',
|
|
96
|
+
bg: 'var(--glass)',
|
|
97
|
+
color: 'var(--muted-foreground)',
|
|
98
|
+
...(link ? { hoverStyle: { borderColor: 'var(--border-strong)', color: 'var(--foreground)' } } : null),
|
|
99
|
+
}), ...p }));
|
|
100
|
+
};
|
|
101
|
+
/** The quiet link. The hover is the reason it is a component rather than a
|
|
102
|
+
* colour at the call site. */
|
|
103
|
+
const More = ({ render, ...p }) => {
|
|
104
|
+
const host = useHost(render, p.href, 'a');
|
|
105
|
+
return (_jsx(Text, { ...slot('more'), render: host, ...BOX, ...SMALL, gap: "$2", fontWeight: "500", color: "var(--neutral-300)", ...states(p, { color: 'var(--pure-white)' }, { color: 'var(--muted-foreground)', hoverStyle: { color: 'var(--foreground)' } }), ...p }));
|
|
106
|
+
};
|
|
107
|
+
export { Action, Chip, More };
|
|
108
|
+
//# sourceMappingURL=controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../src/marketing/controls.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Document = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const Document = ({ html, children }) => html !== undefined ? ((0, jsx_runtime_1.jsx)("div", { "data-slot": "document", dangerouslySetInnerHTML: { __html: html } })) : ((0, jsx_runtime_1.jsx)("div", { "data-slot": "document", children: children }));
|
|
7
|
+
exports.Document = Document;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Document — the body of a long document: a policy, a set of terms, an
|
|
3
|
+
* explanation.
|
|
4
|
+
*
|
|
5
|
+
* Its content is authored as markdown and arrives as bare tags, which no prop
|
|
6
|
+
* can reach, so the type is `@hanzo/ui/styles/document.css`, keyed on the slot
|
|
7
|
+
* this stamps and selecting by tag from here down. `html` is a document
|
|
8
|
+
* rendered from markdown at build time; it goes on this element itself, because
|
|
9
|
+
* nested one level deeper the whole document would be one flex item and every
|
|
10
|
+
* paragraph gap would vanish.
|
|
11
|
+
*
|
|
12
|
+
* A plain element, not a gui frame: a frame's base would lay the paragraphs out
|
|
13
|
+
* as its own flex items with its own type, and the sheet is the type here.
|
|
14
|
+
*/
|
|
15
|
+
import type { ReactNode } from 'react';
|
|
16
|
+
export type DocumentProps = {
|
|
17
|
+
html?: string;
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
};
|
|
20
|
+
declare const Document: ({ html, children }: DocumentProps) => import("react").JSX.Element;
|
|
21
|
+
export { Document };
|
|
22
|
+
//# sourceMappingURL=document.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../src/marketing/document.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAEnE,QAAA,MAAM,QAAQ,uBAAwB,aAAa,gCAKhD,CAAA;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const Document = ({ html, children }) => html !== undefined ? (_jsx("div", { "data-slot": "document", dangerouslySetInnerHTML: { __html: html } })) : (_jsx("div", { "data-slot": "document", children: children }));
|
|
4
|
+
export { Document };
|
|
5
|
+
//# sourceMappingURL=document.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"document.js","sourceRoot":"","sources":["../../src/marketing/document.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAoBZ,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAiB,EAAE,EAAE,CACrD,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACnB,2BAAe,UAAU,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,2BAAe,UAAU,YAAE,QAAQ,GAAO,CAC3C,CAAA;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.address = exports.useHost = void 0;
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const link_1 = require("../backends/gui/link.cjs");
|
|
7
|
+
/**
|
|
8
|
+
* Where a marketing control's element comes from.
|
|
9
|
+
*
|
|
10
|
+
* An explicit `render` wins. Otherwise an internal `href` to a page goes
|
|
11
|
+
* through the app's router link — @hanzo/ui's link context, `<Link value={NextLink}>` once
|
|
12
|
+
* at the root — so navigation stays client-side; any other address is a plain
|
|
13
|
+
* anchor, and no address is the role's own element.
|
|
14
|
+
*
|
|
15
|
+
* The router link is made HERE, in the client component, and never handed in
|
|
16
|
+
* from a page. A server page that passes `render={<NextLink …/>}` sends an
|
|
17
|
+
* element through the RSC payload, which may arrive as a lazy reference
|
|
18
|
+
* rather than an element; gui then renders that reference as a component and
|
|
19
|
+
* the prerender dies on "Element type is invalid … got: object".
|
|
20
|
+
*/
|
|
21
|
+
const useHost = (render, href, own) => {
|
|
22
|
+
const Link = (0, link_1.useLink)();
|
|
23
|
+
if (render !== undefined)
|
|
24
|
+
return render;
|
|
25
|
+
if (href === undefined)
|
|
26
|
+
return own;
|
|
27
|
+
return Link !== 'a' && route(href) ? (0, react_1.createElement)(Link, { href }) : 'a';
|
|
28
|
+
};
|
|
29
|
+
exports.useHost = useHost;
|
|
30
|
+
/** An address the app's router can open: a path on this site that names a
|
|
31
|
+
* page. A path that ends in a file extension — `/skill.md`, `/feed.xml` — is a
|
|
32
|
+
* file the server hands back as it is, so it stays an anchor; a version in a
|
|
33
|
+
* page's name (`/models/…/claude-opus-5.5`) is not an extension. */
|
|
34
|
+
const route = (href) => href.startsWith('/') && !href.startsWith('//') && !/\.[a-z][a-z0-9]{1,4}$/i.test(href.split(/[?#]/)[0]);
|
|
35
|
+
/** Whether a host is an address: an `href`, an anchor, or an element carrying
|
|
36
|
+
* one. A control that is a link answers the pointer; a card that is a link
|
|
37
|
+
* rests in the link ink the document gives every `<a>`. */
|
|
38
|
+
const address = (host, href) => href !== undefined || host === 'a' || ((0, react_1.isValidElement)(host) && host.props.href !== undefined);
|
|
39
|
+
exports.address = address;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type ReactElement } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Where a marketing control's element comes from.
|
|
4
|
+
*
|
|
5
|
+
* An explicit `render` wins. Otherwise an internal `href` to a page goes
|
|
6
|
+
* through the app's router link — @hanzo/ui's link context, `<Link value={NextLink}>` once
|
|
7
|
+
* at the root — so navigation stays client-side; any other address is a plain
|
|
8
|
+
* anchor, and no address is the role's own element.
|
|
9
|
+
*
|
|
10
|
+
* The router link is made HERE, in the client component, and never handed in
|
|
11
|
+
* from a page. A server page that passes `render={<NextLink …/>}` sends an
|
|
12
|
+
* element through the RSC payload, which may arrive as a lazy reference
|
|
13
|
+
* rather than an element; gui then renders that reference as a component and
|
|
14
|
+
* the prerender dies on "Element type is invalid … got: object".
|
|
15
|
+
*/
|
|
16
|
+
export declare const useHost: <R>(render: R | undefined, href: string | undefined, own: string) => R | string | ReactElement;
|
|
17
|
+
/** Whether a host is an address: an `href`, an anchor, or an element carrying
|
|
18
|
+
* one. A control that is a link answers the pointer; a card that is a link
|
|
19
|
+
* rests in the link ink the document gives every `<a>`. */
|
|
20
|
+
export declare const address: (host: unknown, href: string | undefined) => boolean;
|
|
21
|
+
//# sourceMappingURL=host.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../src/marketing/host.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAIxE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,UAAU,CAAC,GAAG,SAAS,QAAQ,MAAM,GAAG,SAAS,OAAO,MAAM,KAAG,CAAC,GAAG,MAAM,GAAG,YAKtG,CAAA;AAQD;;4DAE4D;AAC5D,eAAO,MAAM,OAAO,SAAU,OAAO,QAAQ,MAAM,GAAG,SAAS,YACwD,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createElement, isValidElement } from 'react';
|
|
3
|
+
import { useLink } from '../backends/gui/link.js';
|
|
4
|
+
/**
|
|
5
|
+
* Where a marketing control's element comes from.
|
|
6
|
+
*
|
|
7
|
+
* An explicit `render` wins. Otherwise an internal `href` to a page goes
|
|
8
|
+
* through the app's router link — @hanzo/ui's link context, `<Link value={NextLink}>` once
|
|
9
|
+
* at the root — so navigation stays client-side; any other address is a plain
|
|
10
|
+
* anchor, and no address is the role's own element.
|
|
11
|
+
*
|
|
12
|
+
* The router link is made HERE, in the client component, and never handed in
|
|
13
|
+
* from a page. A server page that passes `render={<NextLink …/>}` sends an
|
|
14
|
+
* element through the RSC payload, which may arrive as a lazy reference
|
|
15
|
+
* rather than an element; gui then renders that reference as a component and
|
|
16
|
+
* the prerender dies on "Element type is invalid … got: object".
|
|
17
|
+
*/
|
|
18
|
+
export const useHost = (render, href, own) => {
|
|
19
|
+
const Link = useLink();
|
|
20
|
+
if (render !== undefined)
|
|
21
|
+
return render;
|
|
22
|
+
if (href === undefined)
|
|
23
|
+
return own;
|
|
24
|
+
return Link !== 'a' && route(href) ? createElement(Link, { href }) : 'a';
|
|
25
|
+
};
|
|
26
|
+
/** An address the app's router can open: a path on this site that names a
|
|
27
|
+
* page. A path that ends in a file extension — `/skill.md`, `/feed.xml` — is a
|
|
28
|
+
* file the server hands back as it is, so it stays an anchor; a version in a
|
|
29
|
+
* page's name (`/models/…/claude-opus-5.5`) is not an extension. */
|
|
30
|
+
const route = (href) => href.startsWith('/') && !href.startsWith('//') && !/\.[a-z][a-z0-9]{1,4}$/i.test(href.split(/[?#]/)[0]);
|
|
31
|
+
/** Whether a host is an address: an `href`, an anchor, or an element carrying
|
|
32
|
+
* one. A control that is a link answers the pointer; a card that is a link
|
|
33
|
+
* rests in the link ink the document gives every `<a>`. */
|
|
34
|
+
export const address = (host, href) => href !== undefined || host === 'a' || (isValidElement(host) && host.props.href !== undefined);
|
|
35
|
+
//# sourceMappingURL=host.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"host.js","sourceRoot":"","sources":["../../src/marketing/host.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,aAAa,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAA;AAExE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAI,MAAqB,EAAE,IAAwB,EAAE,GAAW,EAA6B,EAAE;IACpH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,IAAI,MAAM,KAAK,SAAS;QAAE,OAAO,MAAM,CAAA;IACvC,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,GAAG,CAAA;IAClC,OAAO,IAAI,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;AAC1E,CAAC,CAAA;AAED;;;qEAGqE;AACrE,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAEvI;;4DAE4D;AAC5D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAa,EAAE,IAAwB,EAAE,EAAE,CACjE,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAK,IAAI,CAAC,KAA4B,CAAC,IAAI,KAAK,SAAS,CAAC,CAAA"}
|
package/dist/marketing/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.LogoRow = exports.Quote = exports.Steps = exports.FeatureGrid = exports.Feature = exports.Section = exports.PageHeader = exports.Line = exports.TextLink = exports.Cta = exports.ClosingCta = exports.Faq = exports.Footer = exports.way = exports.termOf = exports.seats = exports.saving = exports.money = exports.merged = exports.charge = exports.audience = exports.Plans = exports.Media = exports.Hero = exports.PageLoading = void 0;
|
|
3
|
+
exports.LogoRow = exports.Quote = exports.Steps = exports.FeatureGrid = exports.Feature = exports.Section = exports.PageHeader = exports.Run = exports.Document = exports.Pager = exports.Pair = exports.Lattice = exports.Reveal = exports.Lift = exports.Cell = exports.Leaf = exports.More = exports.Chip = exports.Action = exports.Claim = exports.Lede = exports.Eyebrow = exports.Title = exports.Display = exports.Line = exports.TextLink = exports.Cta = exports.ClosingCta = exports.Faq = exports.Footer = exports.way = exports.termOf = exports.seats = exports.saving = exports.money = exports.merged = exports.charge = exports.audience = exports.Plans = exports.Media = exports.Hero = exports.PageLoading = void 0;
|
|
4
4
|
/**
|
|
5
5
|
* The marketing surface every Hanzo, Lux and Zoo site shares: the first screen,
|
|
6
6
|
* the plans, the questions, the closing call and the blocks a feature page is
|
|
@@ -34,6 +34,29 @@ Object.defineProperty(exports, "Cta", { enumerable: true, get: function () { ret
|
|
|
34
34
|
Object.defineProperty(exports, "TextLink", { enumerable: true, get: function () { return Cta_1.TextLink; } });
|
|
35
35
|
var type_1 = require("./type.cjs");
|
|
36
36
|
Object.defineProperty(exports, "Line", { enumerable: true, get: function () { return type_1.Line; } });
|
|
37
|
+
Object.defineProperty(exports, "Display", { enumerable: true, get: function () { return type_1.Display; } });
|
|
38
|
+
Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return type_1.Title; } });
|
|
39
|
+
Object.defineProperty(exports, "Eyebrow", { enumerable: true, get: function () { return type_1.Eyebrow; } });
|
|
40
|
+
Object.defineProperty(exports, "Lede", { enumerable: true, get: function () { return type_1.Lede; } });
|
|
41
|
+
Object.defineProperty(exports, "Claim", { enumerable: true, get: function () { return type_1.Claim; } });
|
|
42
|
+
var controls_1 = require("./controls.cjs");
|
|
43
|
+
Object.defineProperty(exports, "Action", { enumerable: true, get: function () { return controls_1.Action; } });
|
|
44
|
+
Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return controls_1.Chip; } });
|
|
45
|
+
Object.defineProperty(exports, "More", { enumerable: true, get: function () { return controls_1.More; } });
|
|
46
|
+
var surface_1 = require("./surface.cjs");
|
|
47
|
+
Object.defineProperty(exports, "Leaf", { enumerable: true, get: function () { return surface_1.Leaf; } });
|
|
48
|
+
Object.defineProperty(exports, "Cell", { enumerable: true, get: function () { return surface_1.Cell; } });
|
|
49
|
+
Object.defineProperty(exports, "Lift", { enumerable: true, get: function () { return surface_1.Lift; } });
|
|
50
|
+
Object.defineProperty(exports, "Reveal", { enumerable: true, get: function () { return surface_1.Reveal; } });
|
|
51
|
+
Object.defineProperty(exports, "Lattice", { enumerable: true, get: function () { return surface_1.Lattice; } });
|
|
52
|
+
var pair_1 = require("./pair.cjs");
|
|
53
|
+
Object.defineProperty(exports, "Pair", { enumerable: true, get: function () { return pair_1.Pair; } });
|
|
54
|
+
var pager_1 = require("./pager.cjs");
|
|
55
|
+
Object.defineProperty(exports, "Pager", { enumerable: true, get: function () { return pager_1.Pager; } });
|
|
56
|
+
var document_1 = require("./document.cjs");
|
|
57
|
+
Object.defineProperty(exports, "Document", { enumerable: true, get: function () { return document_1.Document; } });
|
|
58
|
+
var run_1 = require("./run.cjs");
|
|
59
|
+
Object.defineProperty(exports, "Run", { enumerable: true, get: function () { return run_1.Run; } });
|
|
37
60
|
var blocks_1 = require("./blocks.cjs");
|
|
38
61
|
Object.defineProperty(exports, "PageHeader", { enumerable: true, get: function () { return blocks_1.PageHeader; } });
|
|
39
62
|
Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return blocks_1.Section; } });
|
|
@@ -11,7 +11,13 @@ export { audience, charge, merged, money, saving, seats, termOf, way, type Audie
|
|
|
11
11
|
export { Footer, type FooterColumn, type FooterLink, type FooterProps } from './Footer.js';
|
|
12
12
|
export { Faq, type FaqItem, type FaqProps } from './Faq.js';
|
|
13
13
|
export { ClosingCta, type ClosingCtaProps } from './ClosingCta.js';
|
|
14
|
-
export { Cta, TextLink, type CtaProps } from './Cta.js';
|
|
15
|
-
export { Line, type LineProps, type LineSize, type LineTone } from './type.js';
|
|
14
|
+
export { Cta, TextLink, type CtaProps, type TextLinkProps } from './Cta.js';
|
|
15
|
+
export { Line, Display, Title, Eyebrow, Lede, Claim, type LineProps, type LineSize, type LineTone, type RoleProps } from './type.js';
|
|
16
|
+
export { Action, Chip, More, type ControlProps } from './controls.js';
|
|
17
|
+
export { Leaf, Cell, Lift, Reveal, Lattice, type SurfaceProps, type LatticeProps } from './surface.js';
|
|
18
|
+
export { Pair, type PairProps } from './pair.js';
|
|
19
|
+
export { Pager, type PagerProps } from './pager.js';
|
|
20
|
+
export { Document, type DocumentProps } from './document.js';
|
|
21
|
+
export { Run, type RunProps } from './run.js';
|
|
16
22
|
export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow, type Step, type Logo, type PageHeaderProps, type SectionProps, type FeatureProps, type QuoteProps, } from './blocks.js';
|
|
17
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AACjI,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACnG,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,UAAU,GAChB,MAAM,UAAU,CAAA"}
|
package/dist/marketing/index.js
CHANGED
|
@@ -12,6 +12,12 @@ export { Footer } from './Footer.js';
|
|
|
12
12
|
export { Faq } from './Faq.js';
|
|
13
13
|
export { ClosingCta } from './ClosingCta.js';
|
|
14
14
|
export { Cta, TextLink } from './Cta.js';
|
|
15
|
-
export { Line } from './type.js';
|
|
15
|
+
export { Line, Display, Title, Eyebrow, Lede, Claim } from './type.js';
|
|
16
|
+
export { Action, Chip, More } from './controls.js';
|
|
17
|
+
export { Leaf, Cell, Lift, Reveal, Lattice } from './surface.js';
|
|
18
|
+
export { Pair } from './pair.js';
|
|
19
|
+
export { Pager } from './pager.js';
|
|
20
|
+
export { Document } from './document.js';
|
|
21
|
+
export { Run } from './run.js';
|
|
16
22
|
export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow, } from './blocks.js';
|
|
17
23
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAoC,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAwD,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAwD,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAoC,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAwD,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAwD,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAqC,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgE,MAAM,QAAQ,CAAA;AACjI,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAqB,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAwC,MAAM,WAAW,CAAA;AACnG,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAA;AAC1C,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,GAOR,MAAM,UAAU,CAAA"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { MouseEventHandler, ReactNode, Ref } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The props a marketing component takes from a page.
|
|
4
|
+
*
|
|
5
|
+
* gui types a style value against its token table, and a page's own values are
|
|
6
|
+
* CSS: `var(--text-xs)`, `color-mix(in srgb, var(--primary) 15%, transparent)`,
|
|
7
|
+
* a unitless leading. gui emits each of them exactly as written, so refusing
|
|
8
|
+
* them at the type only pushed callers back to `style={{…}}`, which is the
|
|
9
|
+
* thing these components exist to retire. A value prop also takes a string or a
|
|
10
|
+
* number, and a state or a breakpoint (`hoverStyle`, `$sm`, `$theme-light`)
|
|
11
|
+
* takes the same values inside it.
|
|
12
|
+
*
|
|
13
|
+
* `Host` is what the element underneath answers to on the web: a button's
|
|
14
|
+
* `type`, a link's `download`, a tooltip's `title`. gui forwards every prop it
|
|
15
|
+
* does not style to the DOM node, so these already arrive; they are declared
|
|
16
|
+
* so a call site does not have to re-declare the component to pass one.
|
|
17
|
+
*/
|
|
18
|
+
export type Loose<P> = {
|
|
19
|
+
[K in keyof P]?: K extends 'children' | 'render' ? P[K] : K extends `$${string}` | 'hoverStyle' | 'pressStyle' | 'focusStyle' | 'focusVisibleStyle' | 'focusWithinStyle' | 'disabledStyle' | 'enterStyle' | 'exitStyle' ? {
|
|
20
|
+
[key: string]: unknown;
|
|
21
|
+
} : NonNullable<P[K]> extends object ? P[K] : P[K] | (string & {}) | number;
|
|
22
|
+
};
|
|
23
|
+
export type Host = {
|
|
24
|
+
children?: ReactNode;
|
|
25
|
+
href?: string;
|
|
26
|
+
target?: string;
|
|
27
|
+
rel?: string;
|
|
28
|
+
download?: boolean | string;
|
|
29
|
+
type?: 'button' | 'submit' | 'reset';
|
|
30
|
+
title?: string;
|
|
31
|
+
name?: string;
|
|
32
|
+
value?: string;
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
tabIndex?: number;
|
|
35
|
+
onClick?: MouseEventHandler<HTMLElement>;
|
|
36
|
+
/** The node is whatever `render` names, so the ref takes any element. */
|
|
37
|
+
ref?: Ref<any>;
|
|
38
|
+
textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
|
|
39
|
+
WebkitBackdropFilter?: string;
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=loose.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loose.d.ts","sourceRoot":"","sources":["../../src/marketing/loose.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAE9D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;KACpB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,UAAU,GAAG,QAAQ,GAC5C,CAAC,CAAC,CAAC,CAAC,GACJ,CAAC,SAAS,IAAI,MAAM,EAAE,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,eAAe,GAAG,YAAY,GAAG,WAAW,GAC3J;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,GAC1B,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAC9B,CAAC,CAAC,CAAC,CAAC,GACJ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,MAAM;CACtC,CAAA;AAED,MAAM,MAAM,IAAI,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;IACxC,yEAAyE;IAEzE,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC9D,oBAAoB,CAAC,EAAE,MAAM,CAAA;CAC9B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loose.js","sourceRoot":"","sources":["../../src/marketing/loose.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Pager = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
/**
|
|
7
|
+
* Pager — which of a run of slides is showing, and the way to any other.
|
|
8
|
+
*
|
|
9
|
+
* Each page is a pill: six pixels high, a dot at rest and a 24px bar for the
|
|
10
|
+
* one showing, drawn in the ink of the ground it sits on so it reads on both
|
|
11
|
+
* themes. The mark is drawn INSIDE a target rather than being one: a 6px mark
|
|
12
|
+
* sized as the control would be a target nobody can hit, so each button is 24px
|
|
13
|
+
* square around it (44px tall under a coarse pointer) and the row stays the
|
|
14
|
+
* width of its marks plus their floors — ten pages fit a 360px phone.
|
|
15
|
+
*/
|
|
16
|
+
const gui_1 = require("@hanzo/gui");
|
|
17
|
+
const slot_1 = require("../backends/gui/slot.cjs");
|
|
18
|
+
const Pager = ({ count, index, onSelect, label = (i) => `Go to slide ${i + 1}`, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('pager'), items: "center", ...p, children: Array.from({ length: count }, (_, i) => {
|
|
19
|
+
const on = i === index;
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)(gui_1.View, { render: (0, jsx_runtime_1.jsx)("button", { type: "button" }), "aria-label": label(i), "aria-current": on ? 'true' : undefined, onPress: () => onSelect(i), group: true, containerType: "normal", display: "flex", items: "center", justify: "center", minW: 24, height: 24, px: 9, py: 0, borderWidth: 0, bg: "transparent", cursor: "pointer", $touchable: { height: 44 }, children: (0, jsx_runtime_1.jsx)(gui_1.View, { width: on ? 24 : 6, height: 6, rounded: 9999, bg: on ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: on ? 1 : 0.35, ...(on ? null : { '$group-hover': { opacity: 0.7 } }) }) }, i));
|
|
21
|
+
}) }));
|
|
22
|
+
exports.Pager = Pager;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pager — which of a run of slides is showing, and the way to any other.
|
|
3
|
+
*
|
|
4
|
+
* Each page is a pill: six pixels high, a dot at rest and a 24px bar for the
|
|
5
|
+
* one showing, drawn in the ink of the ground it sits on so it reads on both
|
|
6
|
+
* themes. The mark is drawn INSIDE a target rather than being one: a 6px mark
|
|
7
|
+
* sized as the control would be a target nobody can hit, so each button is 24px
|
|
8
|
+
* square around it (44px tall under a coarse pointer) and the row stays the
|
|
9
|
+
* width of its marks plus their floors — ten pages fit a 360px phone.
|
|
10
|
+
*/
|
|
11
|
+
import { type XStackProps } from '@hanzo/gui';
|
|
12
|
+
export type PagerProps = Omit<XStackProps, 'children'> & {
|
|
13
|
+
count: number;
|
|
14
|
+
/** The page showing. */
|
|
15
|
+
index: number;
|
|
16
|
+
onSelect: (index: number) => void;
|
|
17
|
+
/** What a page is called, for its button's label. */
|
|
18
|
+
label?: (index: number) => string;
|
|
19
|
+
};
|
|
20
|
+
declare const Pager: ({ count, index, onSelect, label, ...p }: PagerProps) => import("react").JSX.Element;
|
|
21
|
+
export { Pager };
|
|
22
|
+
//# sourceMappingURL=pager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pager.d.ts","sourceRoot":"","sources":["../../src/marketing/pager.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAI3D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,qDAAqD;IACrD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CAClC,CAAA;AAED,QAAA,MAAM,KAAK,4CAA6E,UAAU,gCAqCjG,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
/**
|
|
4
|
+
* Pager — which of a run of slides is showing, and the way to any other.
|
|
5
|
+
*
|
|
6
|
+
* Each page is a pill: six pixels high, a dot at rest and a 24px bar for the
|
|
7
|
+
* one showing, drawn in the ink of the ground it sits on so it reads on both
|
|
8
|
+
* themes. The mark is drawn INSIDE a target rather than being one: a 6px mark
|
|
9
|
+
* sized as the control would be a target nobody can hit, so each button is 24px
|
|
10
|
+
* square around it (44px tall under a coarse pointer) and the row stays the
|
|
11
|
+
* width of its marks plus their floors — ten pages fit a 360px phone.
|
|
12
|
+
*/
|
|
13
|
+
import { View, XStack } from '@hanzo/gui';
|
|
14
|
+
import { slot } from '../backends/gui/slot.js';
|
|
15
|
+
const Pager = ({ count, index, onSelect, label = (i) => `Go to slide ${i + 1}`, ...p }) => (_jsx(XStack, { ...slot('pager'), items: "center", ...p, children: Array.from({ length: count }, (_, i) => {
|
|
16
|
+
const on = i === index;
|
|
17
|
+
return (_jsx(View, { render: _jsx("button", { type: "button" }), "aria-label": label(i), "aria-current": on ? 'true' : undefined, onPress: () => onSelect(i), group: true, containerType: "normal", display: "flex", items: "center", justify: "center", minW: 24, height: 24, px: 9, py: 0, borderWidth: 0, bg: "transparent", cursor: "pointer", $touchable: { height: 44 }, children: _jsx(View, { width: on ? 24 : 6, height: 6, rounded: 9999, bg: on ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: on ? 1 : 0.35, ...(on ? null : { '$group-hover': { opacity: 0.7 } }) }) }, i));
|
|
18
|
+
}) }));
|
|
19
|
+
export { Pager };
|
|
20
|
+
//# sourceMappingURL=pager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pager.js","sourceRoot":"","sources":["../../src/marketing/pager.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;GASG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAW3C,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,EAAc,EAAE,EAAE,CAAC,CACrG,KAAC,MAAM,OAAK,IAAI,CAAC,OAAO,CAAC,EAAE,KAAK,EAAC,QAAQ,KAAM,CAAY,YACxD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,EAAE,GAAG,CAAC,KAAK,KAAK,CAAA;QACtB,OAAO,CACL,KAAC,IAAI,IAEH,MAAM,EAAE,iBAAQ,IAAI,EAAC,QAAQ,GAAG,gBACpB,KAAK,CAAC,CAAC,CAAC,kBACN,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC1B,KAAK,QACL,aAAa,EAAC,QAAQ,EACtB,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,EAAE,EACV,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,EACL,WAAW,EAAE,CAAC,EACd,EAAE,EAAC,aAAa,EAChB,MAAM,EAAC,SAAS,EAChB,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAE1B,KAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAClB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,IAAI,EACb,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,yBAAyB,EACxD,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAClB,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,GACtD,IA1BG,CAAC,CA2BD,CACR,CAAA;IACH,CAAC,CAAC,GACK,CACV,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Pair = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
/**
|
|
7
|
+
* Pair — the two controls that close a section: stacked on a phone, side by
|
|
8
|
+
* side from 640.
|
|
9
|
+
*
|
|
10
|
+
* A grid, not a row of flex items. A row of two is a track list, and
|
|
11
|
+
* `gridAutoFlow="column"` says the direction once; the stacked case needs
|
|
12
|
+
* nothing said at all, because a grid is already one column. Each control keeps
|
|
13
|
+
* its own width and the pair centres as a whole.
|
|
14
|
+
*
|
|
15
|
+
* `render` accepts an element, so an entrance can be the pair rather than wrap
|
|
16
|
+
* it: `render={<motion.div {...reveal} />}`.
|
|
17
|
+
*/
|
|
18
|
+
const gui_1 = require("@hanzo/gui");
|
|
19
|
+
const slot_1 = require("../backends/gui/slot.cjs");
|
|
20
|
+
const Pair = ({ render, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.slot)('pair'), ...(render === undefined ? null : { render }), display: "grid", gap: "$4", justifyItems: "center", justify: "center", items: "center", $sm: { gridAutoFlow: 'column' }, ...p }));
|
|
21
|
+
exports.Pair = Pair;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pair — the two controls that close a section: stacked on a phone, side by
|
|
3
|
+
* side from 640.
|
|
4
|
+
*
|
|
5
|
+
* A grid, not a row of flex items. A row of two is a track list, and
|
|
6
|
+
* `gridAutoFlow="column"` says the direction once; the stacked case needs
|
|
7
|
+
* nothing said at all, because a grid is already one column. Each control keeps
|
|
8
|
+
* its own width and the pair centres as a whole.
|
|
9
|
+
*
|
|
10
|
+
* `render` accepts an element, so an entrance can be the pair rather than wrap
|
|
11
|
+
* it: `render={<motion.div {...reveal} />}`.
|
|
12
|
+
*/
|
|
13
|
+
import { type ViewProps } from '@hanzo/gui';
|
|
14
|
+
import type { ReactNode } from 'react';
|
|
15
|
+
import type { Loose } from './loose.js';
|
|
16
|
+
export type PairProps = Loose<Omit<ViewProps, 'render' | 'children'>> & {
|
|
17
|
+
render?: ViewProps['render'];
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
};
|
|
20
|
+
declare const Pair: ({ render, ...p }: PairProps) => import("react").JSX.Element;
|
|
21
|
+
export { Pair };
|
|
22
|
+
//# sourceMappingURL=pair.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pair.d.ts","sourceRoot":"","sources":["../../src/marketing/pair.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC,GAAG;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,IAAI,qBAAsB,SAAS,gCAYxC,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
/**
|
|
4
|
+
* Pair — the two controls that close a section: stacked on a phone, side by
|
|
5
|
+
* side from 640.
|
|
6
|
+
*
|
|
7
|
+
* A grid, not a row of flex items. A row of two is a track list, and
|
|
8
|
+
* `gridAutoFlow="column"` says the direction once; the stacked case needs
|
|
9
|
+
* nothing said at all, because a grid is already one column. Each control keeps
|
|
10
|
+
* its own width and the pair centres as a whole.
|
|
11
|
+
*
|
|
12
|
+
* `render` accepts an element, so an entrance can be the pair rather than wrap
|
|
13
|
+
* it: `render={<motion.div {...reveal} />}`.
|
|
14
|
+
*/
|
|
15
|
+
import { View } from '@hanzo/gui';
|
|
16
|
+
import { slot } from '../backends/gui/slot.js';
|
|
17
|
+
const Pair = ({ render, ...p }) => (_jsx(View, { ...slot('pair'), ...(render === undefined ? null : { render }), display: "grid", gap: "$4", justifyItems: "center", justify: "center", items: "center", $sm: { gridAutoFlow: 'column' }, ...p }));
|
|
18
|
+
export { Pair };
|
|
19
|
+
//# sourceMappingURL=pair.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pair.js","sourceRoot":"","sources":["../../src/marketing/pair.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,IAAI,EAAkB,MAAM,YAAY,CAAA;AAGjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAQ3C,MAAM,IAAI,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAa,EAAE,EAAE,CAAC,CAC5C,KAAC,IAAI,OACC,IAAI,CAAC,MAAM,CAAC,KACZ,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAC9C,OAAO,EAAC,MAAM,EACd,GAAG,EAAC,IAAI,EACR,YAAY,EAAC,QAAQ,EACrB,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,KAC1B,CAAY,GACjB,CACH,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Run = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
/**
|
|
7
|
+
* Run — a light crosses a set of things that are all true at once.
|
|
8
|
+
*
|
|
9
|
+
* Prose states invariants one at a time, and a reader has finished the first
|
|
10
|
+
* before the fourth exists; a run lays the set out and sweeps it, so several
|
|
11
|
+
* are lit together and none is ever "next". Each DIRECT child says where it
|
|
12
|
+
* stands with `data-beat={n}`, and is lit `n` steps after the first:
|
|
13
|
+
*
|
|
14
|
+
* <Run step={0.31}>{steps.map((s, i) => <Chip key={s} data-beat={i}>{s}</Chip>)}</Run>
|
|
15
|
+
*
|
|
16
|
+
* `step` is the delay per beat, short against the 5.4s cycle so several are lit
|
|
17
|
+
* at once; an ORDERED set takes a step near cycle/n, and the order is the
|
|
18
|
+
* content's to say, so the caller says it. `rest` is the ink the sweep returns
|
|
19
|
+
* to, because the animation owns `color` for the whole cycle.
|
|
20
|
+
*
|
|
21
|
+
* The keyframe is `@hanzo/ui/styles/motion.css`, keyed on `data-motion`, and
|
|
22
|
+
* reduced motion stills it. The two knobs ride this element's own custom
|
|
23
|
+
* properties, which no gui prop names. Colour and edge only, so it composes
|
|
24
|
+
* with an entrance that owns transform and opacity.
|
|
25
|
+
*/
|
|
26
|
+
const gui_1 = require("@hanzo/gui");
|
|
27
|
+
const Run = ({ step = 0.22, rest, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.View, { "data-motion": "run", ...p, style: { '--run-step': `${step}s`, ...(rest ? { '--run-rest': rest } : null) } }));
|
|
28
|
+
exports.Run = Run;
|