@hanzo/ui 8.0.68 → 8.0.69
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/gui-config.cjs +76 -43
- package/dist/gui-config.d.ts +204 -204
- package/dist/gui-config.d.ts.map +1 -1
- package/dist/gui-config.js +76 -43
- package/dist/gui-config.js.map +1 -1
- package/dist/product/AppHeader.cjs +3 -3
- package/dist/product/AppHeader.js +3 -3
- package/dist/product/CommerceResource.cjs +1 -1
- package/dist/product/CommerceResource.js +1 -1
- package/dist/product/ConfirmDelete.cjs +1 -1
- package/dist/product/ConfirmDelete.js +1 -1
- package/dist/product/EmptyState.cjs +1 -1
- package/dist/product/EmptyState.js +1 -1
- package/dist/product/Filters.cjs +1 -1
- package/dist/product/Filters.js +1 -1
- package/dist/product/OrgSwitcher.cjs +2 -2
- package/dist/product/OrgSwitcher.js +2 -2
- package/dist/product/Pagination.cjs +1 -1
- package/dist/product/Pagination.js +1 -1
- package/dist/product/UserMenu.cjs +1 -1
- package/dist/product/UserMenu.js +1 -1
- package/dist/product/social/PostCard.cjs +1 -1
- package/dist/product/social/PostCard.js +1 -1
- package/dist/styles.css +77 -45
- package/dist/theme.css +73 -41
- package/package.json +2 -2
package/dist/gui-config.js
CHANGED
|
@@ -32,50 +32,70 @@ const GEIST = "'Geist', system-ui, -apple-system, sans-serif";
|
|
|
32
32
|
* same face or the same number renders in two different fonts depending on
|
|
33
33
|
* which one a component reached for. */
|
|
34
34
|
const GEIST_MONO = "'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
|
|
35
|
-
/** Type — SIX sizes
|
|
35
|
+
/** Type — the same SIX sizes, now DEFERRED to @hanzo/design rather than restated.
|
|
36
36
|
* $1 label · $2 nav + dense body · $3 base · $4/$5 emphasis · $6 section head ·
|
|
37
|
-
* $7 page title · $8+ display. `$5` collapses onto 15 to retire the 16px
|
|
38
|
-
* (217 stray nodes); `$9` collapses onto 26 so a page title has ONE
|
|
37
|
+
* $7 page title · $8+ display. `$5` still collapses onto 15 to retire the 16px
|
|
38
|
+
* base (217 stray nodes); `$9` still collapses onto 26 so a page title has ONE
|
|
39
|
+
* size — those are decisions, and deferring the VALUE does not undo them.
|
|
40
|
+
*
|
|
41
|
+
* Twelve rungs name a design token whose published value is byte-identical to
|
|
42
|
+
* the number that was here, so this is a zero-change edit; gui-config.test.ts
|
|
43
|
+
* asserts that equality rung by rung, the same way it already does for the
|
|
44
|
+
* three colour rungs, so design cannot move a size without this failing.
|
|
45
|
+
*
|
|
46
|
+
* Four rungs ($12 48 · $13 56 · $15 80 · $16 96) have no counterpart: design's
|
|
47
|
+
* display ramp goes 52/64/84/112. Inventing a token or silently resizing them
|
|
48
|
+
* would both be worse than saying so, so they keep their literal and carry the
|
|
49
|
+
* knob directly.
|
|
50
|
+
*
|
|
51
|
+
* Why a var() at all: gui resolves these in JS and applies them INLINE, and an
|
|
52
|
+
* inline style outranks every stylesheet — so a CSS custom property is the only
|
|
53
|
+
* thing that can reach a `fontSize="$n"` call site, and there are ~1600 of them.
|
|
54
|
+
* design's ramp multiplies by `--type-scale`, so one number retunes the whole
|
|
55
|
+
* product and a person can set it for themselves. The px literal stays as the
|
|
56
|
+
* var()'s fallback, so a host that mounts no token layer still renders. */
|
|
39
57
|
const FONT_SIZE = {
|
|
40
|
-
1:
|
|
41
|
-
2:
|
|
42
|
-
3:
|
|
43
|
-
4:
|
|
44
|
-
5:
|
|
45
|
-
6:
|
|
46
|
-
7:
|
|
47
|
-
8:
|
|
48
|
-
9:
|
|
49
|
-
10:
|
|
50
|
-
11:
|
|
51
|
-
12:
|
|
52
|
-
13:
|
|
53
|
-
14:
|
|
54
|
-
15:
|
|
55
|
-
16:
|
|
56
|
-
true:
|
|
58
|
+
1: `var(--text-xs, 11px)`,
|
|
59
|
+
2: `var(--text-sm, 13px)`,
|
|
60
|
+
3: `var(--text-base, 14px)`,
|
|
61
|
+
4: `var(--text-lg, 15px)`,
|
|
62
|
+
5: `var(--text-lg, 15px)`,
|
|
63
|
+
6: `var(--text-xl, 17px)`,
|
|
64
|
+
7: `var(--text-2xl, 21px)`,
|
|
65
|
+
8: `var(--text-3xl, 26px)`,
|
|
66
|
+
9: `var(--text-3xl, 26px)`,
|
|
67
|
+
10: `var(--text-4xl, 32px)`,
|
|
68
|
+
11: `var(--text-5xl, 40px)`,
|
|
69
|
+
12: `calc(48px * var(--type-scale, 1))`,
|
|
70
|
+
13: `calc(56px * var(--type-scale, 1))`,
|
|
71
|
+
14: `var(--text-7xl, 64px)`,
|
|
72
|
+
15: `calc(80px * var(--type-scale, 1))`,
|
|
73
|
+
16: `calc(96px * var(--type-scale, 1))`,
|
|
74
|
+
true: `var(--text-base, 14px)`,
|
|
57
75
|
};
|
|
58
|
-
/** Leading, paired 1:1 with the sizes above
|
|
59
|
-
*
|
|
60
|
-
*
|
|
76
|
+
/** Leading, paired 1:1 with the sizes above — and NOT deferred, deliberately.
|
|
77
|
+
* design publishes its own `--leading-*` rhythm and exactly ONE of these
|
|
78
|
+
* sixteen matches it, so adopting those would re-flow every line box in the
|
|
79
|
+
* product. These are the values tuned for this ladder; they keep them, and
|
|
80
|
+
* carry `--type-scale` so leading grows with the text instead of clamping it. */
|
|
61
81
|
const LINE_HEIGHT = {
|
|
62
|
-
1:
|
|
63
|
-
2:
|
|
64
|
-
3:
|
|
65
|
-
4:
|
|
66
|
-
5:
|
|
67
|
-
6:
|
|
68
|
-
7:
|
|
69
|
-
8:
|
|
70
|
-
9:
|
|
71
|
-
10:
|
|
72
|
-
11:
|
|
73
|
-
12:
|
|
74
|
-
13:
|
|
75
|
-
14:
|
|
76
|
-
15:
|
|
77
|
-
16:
|
|
78
|
-
true:
|
|
82
|
+
1: `calc(16px * var(--type-scale, 1))`,
|
|
83
|
+
2: `calc(18px * var(--type-scale, 1))`,
|
|
84
|
+
3: `calc(20px * var(--type-scale, 1))`,
|
|
85
|
+
4: `calc(22px * var(--type-scale, 1))`,
|
|
86
|
+
5: `calc(22px * var(--type-scale, 1))`,
|
|
87
|
+
6: `calc(24px * var(--type-scale, 1))`,
|
|
88
|
+
7: `calc(28px * var(--type-scale, 1))`,
|
|
89
|
+
8: `calc(32px * var(--type-scale, 1))`,
|
|
90
|
+
9: `calc(32px * var(--type-scale, 1))`,
|
|
91
|
+
10: `calc(38px * var(--type-scale, 1))`,
|
|
92
|
+
11: `calc(46px * var(--type-scale, 1))`,
|
|
93
|
+
12: `calc(54px * var(--type-scale, 1))`,
|
|
94
|
+
13: `calc(62px * var(--type-scale, 1))`,
|
|
95
|
+
14: `calc(70px * var(--type-scale, 1))`,
|
|
96
|
+
15: `calc(86px * var(--type-scale, 1))`,
|
|
97
|
+
16: `calc(102px * var(--type-scale, 1))`,
|
|
98
|
+
true: `calc(20px * var(--type-scale, 1))`,
|
|
79
99
|
};
|
|
80
100
|
/** Radius — FOUR values, no more. 6 control · 8 input/row · 12 panel · pill.
|
|
81
101
|
* The inherited ladder had thirteen spellings rendering ten values, including
|
|
@@ -223,6 +243,19 @@ const themes = Object.fromEntries(Object.entries(defaultConfig.themes).map(([nam
|
|
|
223
243
|
}));
|
|
224
244
|
// Everything except the theme table, which is the one thing the two configs
|
|
225
245
|
// below disagree about. Stated once so they cannot drift on radius or fonts.
|
|
246
|
+
/**
|
|
247
|
+
* gui types a font size as a NUMBER, and at runtime it is a CSS value.
|
|
248
|
+
*
|
|
249
|
+
* The token table is handed straight through to the style layer — verified by
|
|
250
|
+
* reading the built config, where `config.fonts.body.size['3']` is the string
|
|
251
|
+
* `var(--text-base, 14px)` — which is exactly how the three colour rungs above
|
|
252
|
+
* already carry `var(--border, …)`. Colour is typed loosely enough to allow it;
|
|
253
|
+
* size is not, so upstream's type is narrower than upstream's behaviour.
|
|
254
|
+
*
|
|
255
|
+
* Asserting here rather than widening the tokens keeps the lie in ONE place,
|
|
256
|
+
* next to the reason for it, instead of letting `any` spread through the config.
|
|
257
|
+
*/
|
|
258
|
+
const asSizes = (t) => t;
|
|
226
259
|
const base = {
|
|
227
260
|
...defaultConfig,
|
|
228
261
|
tokens: {
|
|
@@ -232,14 +265,14 @@ const base = {
|
|
|
232
265
|
},
|
|
233
266
|
fonts: {
|
|
234
267
|
...defaultConfig.fonts,
|
|
235
|
-
body: { ...defaultConfig.fonts.body, family: GEIST, size: FONT_SIZE, lineHeight: LINE_HEIGHT },
|
|
236
|
-
heading: { ...defaultConfig.fonts.heading, family: GEIST, size: FONT_SIZE, lineHeight: LINE_HEIGHT },
|
|
268
|
+
body: { ...defaultConfig.fonts.body, family: GEIST, size: asSizes(FONT_SIZE), lineHeight: asSizes(LINE_HEIGHT) },
|
|
269
|
+
heading: { ...defaultConfig.fonts.heading, family: GEIST, size: asSizes(FONT_SIZE), lineHeight: asSizes(LINE_HEIGHT) },
|
|
237
270
|
// `$mono` was NOT defined here, and gui emits NO class for a font token it
|
|
238
271
|
// does not know — no warning, no fallback, a green build and text that is
|
|
239
272
|
// simply not monospace. 260 `fontFamily="$mono"` call sites across 74 files
|
|
240
273
|
// in hanzo.app were dead on that alone. A missing token has to be a defined
|
|
241
274
|
// token, not a silent no-op, so it is defined.
|
|
242
|
-
mono: { ...defaultConfig.fonts.body, family: GEIST_MONO, size: FONT_SIZE, lineHeight: LINE_HEIGHT },
|
|
275
|
+
mono: { ...defaultConfig.fonts.body, family: GEIST_MONO, size: asSizes(FONT_SIZE), lineHeight: asSizes(LINE_HEIGHT) },
|
|
243
276
|
},
|
|
244
277
|
};
|
|
245
278
|
export const config = createGui({ ...base, themes });
|
package/dist/gui-config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gui-config.js","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAEtC,gFAAgF;AAChF,6EAA6E;AAC7E,EAAE;AACF,iFAAiF;AACjF,mFAAmF;AACnF,iFAAiF;AACjF,6DAA6D;AAC7D,EAAE;AACF,0EAA0E;AAC1E,6EAA6E;AAC7E,+EAA+E;AAC/E,2EAA2E;AAC3E,gFAAgF;AAChF,6CAA6C;AAC7C,EAAE;AACF,6EAA6E;AAC7E,+EAA+E;AAC/E,oEAAoE;AACpE,gFAAgF;AAChF,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,6EAA6E;AAC7E,4EAA4E;AAC5E,cAAc;AACd,gFAAgF;AAEhF,MAAM,KAAK,GAAG,+CAA+C,CAAA;AAE7D;;;yCAGyC;AACzC,MAAM,UAAU,GAAG,wEAAwE,CAAA;AAE3F
|
|
1
|
+
{"version":3,"file":"gui-config.js","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"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"}
|
|
@@ -49,9 +49,9 @@ function AppHeader({ brand, wordmark = 'Hanzo', onBrand, org, children, current,
|
|
|
49
49
|
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => launch(s), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16 }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, fontSize: "$2", fontWeight: "600", color: "$color12", children: s.label }), s.hint ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", children: s.hint })) : null] }, s.id));
|
|
50
50
|
}) }) })] })) : null, (0, jsx_runtime_1.jsx)(UserMenu_1.UserMenu, { name: user, groups: [
|
|
51
51
|
[
|
|
52
|
-
onProfile ? { id: 'profile', label: 'Profile', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.UserRound, { size:
|
|
53
|
-
onTeam ? { id: 'team', label: 'Team settings', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings2, { size:
|
|
54
|
-
onBilling ? { id: 'billing', label: 'Billing', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CreditCard, { size:
|
|
52
|
+
onProfile ? { id: 'profile', label: 'Profile', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.UserRound, { size: 16 }), onPress: onProfile } : null,
|
|
53
|
+
onTeam ? { id: 'team', label: 'Team settings', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings2, { size: 16 }), onPress: onTeam } : null,
|
|
54
|
+
onBilling ? { id: 'billing', label: 'Billing', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CreditCard, { size: 16 }), onPress: onBilling } : null,
|
|
55
55
|
].filter((r) => r !== null),
|
|
56
56
|
], theme: theme, onSignOut: onSignOut, height: 36, children: menu })] }));
|
|
57
57
|
}
|
|
@@ -46,9 +46,9 @@ export function AppHeader({ brand, wordmark = 'Hanzo', onBrand, org, children, c
|
|
|
46
46
|
return (_jsxs(XStack, { onPress: () => launch(s), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$color5' }, children: [_jsx(Icon, { size: 16 }), _jsx(Text, { flex: 1, fontSize: "$2", fontWeight: "600", color: "$color12", children: s.label }), s.hint ? (_jsx(Text, { fontSize: "$1", color: "$color10", children: s.hint })) : null] }, s.id));
|
|
47
47
|
}) }) })] })) : null, _jsx(UserMenu, { name: user, groups: [
|
|
48
48
|
[
|
|
49
|
-
onProfile ? { id: 'profile', label: 'Profile', icon: _jsx(UserRound, { size:
|
|
50
|
-
onTeam ? { id: 'team', label: 'Team settings', icon: _jsx(Settings2, { size:
|
|
51
|
-
onBilling ? { id: 'billing', label: 'Billing', icon: _jsx(CreditCard, { size:
|
|
49
|
+
onProfile ? { id: 'profile', label: 'Profile', icon: _jsx(UserRound, { size: 16 }), onPress: onProfile } : null,
|
|
50
|
+
onTeam ? { id: 'team', label: 'Team settings', icon: _jsx(Settings2, { size: 16 }), onPress: onTeam } : null,
|
|
51
|
+
onBilling ? { id: 'billing', label: 'Billing', icon: _jsx(CreditCard, { size: 16 }), onPress: onBilling } : null,
|
|
52
52
|
].filter((r) => r !== null),
|
|
53
53
|
], theme: theme, onSignOut: onSignOut, height: 36, children: menu })] }));
|
|
54
54
|
}
|
|
@@ -35,5 +35,5 @@ function CommerceResource({ title, subtitle, load, columns, rowKey, empty, hint,
|
|
|
35
35
|
(0, react_1.useEffect)(() => {
|
|
36
36
|
reload();
|
|
37
37
|
}, [reload]);
|
|
38
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { title: title, subtitle: subtitle, actions: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", children: [actions?.(reload), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.RefreshCw, { size:
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { title: title, subtitle: subtitle, actions: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", children: [actions?.(reload), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.RefreshCw, { size: 16 }), onPress: reload, children: "Refresh" })] }) }), state.phase === 'error' ? ((0, jsx_runtime_1.jsx)(BackendState_1.BackendStateCard, { state: state.error, onRetry: reload, hint: hint })) : ((0, jsx_runtime_1.jsx)(DataTable_1.DataTable, { columns: columns, rows: state.phase === 'ready' ? state.data : [], loading: state.phase === 'loading', rowKey: rowKey, empty: empty }))] }));
|
|
39
39
|
}
|
|
@@ -32,6 +32,6 @@ export function CommerceResource({ title, subtitle, load, columns, rowKey, empty
|
|
|
32
32
|
useEffect(() => {
|
|
33
33
|
reload();
|
|
34
34
|
}, [reload]);
|
|
35
|
-
return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { title: title, subtitle: subtitle, actions: _jsxs(XStack, { gap: "$2", children: [actions?.(reload), _jsx(Button, { size: "$2", icon: _jsx(RefreshCw, { size:
|
|
35
|
+
return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { title: title, subtitle: subtitle, actions: _jsxs(XStack, { gap: "$2", children: [actions?.(reload), _jsx(Button, { size: "$2", icon: _jsx(RefreshCw, { size: 16 }), onPress: reload, children: "Refresh" })] }) }), state.phase === 'error' ? (_jsx(BackendStateCard, { state: state.error, onRetry: reload, hint: hint })) : (_jsx(DataTable, { columns: columns, rows: state.phase === 'ready' ? state.data : [], loading: state.phase === 'loading', rowKey: rowKey, empty: empty }))] }));
|
|
36
36
|
}
|
|
37
37
|
//# sourceMappingURL=CommerceResource.js.map
|
|
@@ -35,7 +35,7 @@ function ConfirmDelete({ message, confirmLabel, run, onDone, }) {
|
|
|
35
35
|
setBusy(false);
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
|
-
return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color11", children: message }), err ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$red10", children: err })) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: go, disabled: busy, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Trash2, { size:
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color11", children: message }), err ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$red10", children: err })) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: go, disabled: busy, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Trash2, { size: 16 }), style: { backgroundColor: '#dc2626', borderColor: '#dc2626', color: '#fff' }, children: busy ? 'Deleting…' : confirmLabel }), (0, jsx_runtime_1.jsx)(gui_1.Button, { chromeless: true, onPress: () => {
|
|
39
39
|
track({ component: 'ConfirmDelete', action: 'cancel', id: confirmLabel });
|
|
40
40
|
onDone();
|
|
41
41
|
}, disabled: busy, children: "Cancel" })] })] }));
|
|
@@ -32,7 +32,7 @@ export function ConfirmDelete({ message, confirmLabel, run, onDone, }) {
|
|
|
32
32
|
setBusy(false);
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
|
-
return (_jsxs(YStack, { gap: "$3", children: [_jsx(Text, { fontSize: "$3", color: "$color11", children: message }), err ? (_jsx(Text, { fontSize: "$2", color: "$red10", children: err })) : null, _jsxs(XStack, { gap: "$2", flexWrap: "wrap", children: [_jsx(Button, { onPress: go, disabled: busy, icon: _jsx(Trash2, { size:
|
|
35
|
+
return (_jsxs(YStack, { gap: "$3", children: [_jsx(Text, { fontSize: "$3", color: "$color11", children: message }), err ? (_jsx(Text, { fontSize: "$2", color: "$red10", children: err })) : null, _jsxs(XStack, { gap: "$2", flexWrap: "wrap", children: [_jsx(Button, { onPress: go, disabled: busy, icon: _jsx(Trash2, { size: 16 }), style: { backgroundColor: '#dc2626', borderColor: '#dc2626', color: '#fff' }, children: busy ? 'Deleting…' : confirmLabel }), _jsx(Button, { chromeless: true, onPress: () => {
|
|
36
36
|
track({ component: 'ConfirmDelete', action: 'cancel', id: confirmLabel });
|
|
37
37
|
onDone();
|
|
38
38
|
}, disabled: busy, children: "Cancel" })] })] }));
|
|
@@ -14,7 +14,7 @@ function openHref(href) {
|
|
|
14
14
|
const instrument_1 = require("./instrument.cjs");
|
|
15
15
|
function EmptyState({ icon: Icon, title, description, bullets, primary, secondary, }) {
|
|
16
16
|
const track = (0, instrument_1.useEmit)();
|
|
17
|
-
return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { borderWidth: 1, borderColor: "$borderColor", borderStyle: "dashed", p: "$6", gap: "$4", items: "center", maxWidth: 640, self: "center", width: "100%", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 48, height: 48, items: "center", justify: "center", rounded: "$4", bg: "$color3", children: (0, jsx_runtime_1.jsx)(Icon, { size: 24 }) }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", items: "center", maxW: 480, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$6", fontWeight: "500", text: "center", letterSpacing: -0.3, children: title }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color11", text: "center", children: description })] }), bullets && bullets.length ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$2", self: "stretch", maxW: 420, mx: "auto", children: bullets.map((b) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "flex-start", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { pt: "$1", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "$color10" }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color11", flex: 1, children: b })] }, b))) })) : null, primary || secondary ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "center", flexWrap: "wrap", justify: "center", children: [primary ? ((0, jsx_runtime_1.jsx)(PrimaryButton_1.PrimaryButton, { icon: primary.icon, iconAfter: primary.href ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ExternalLink, { size:
|
|
17
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { borderWidth: 1, borderColor: "$borderColor", borderStyle: "dashed", p: "$6", gap: "$4", items: "center", maxWidth: 640, self: "center", width: "100%", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 48, height: 48, items: "center", justify: "center", rounded: "$4", bg: "$color3", children: (0, jsx_runtime_1.jsx)(Icon, { size: 24 }) }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", items: "center", maxW: 480, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$6", fontWeight: "500", text: "center", letterSpacing: -0.3, children: title }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color11", text: "center", children: description })] }), bullets && bullets.length ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$2", self: "stretch", maxW: 420, mx: "auto", children: bullets.map((b) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "flex-start", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { pt: "$1", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "$color10" }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color11", flex: 1, children: b })] }, b))) })) : null, primary || secondary ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "center", flexWrap: "wrap", justify: "center", children: [primary ? ((0, jsx_runtime_1.jsx)(PrimaryButton_1.PrimaryButton, { icon: primary.icon, iconAfter: primary.href ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ExternalLink, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowRight, { size: 16 }), onPress: () => {
|
|
18
18
|
track({ component: 'EmptyState', action: 'click', id: title, value: primary.label });
|
|
19
19
|
if (primary.href)
|
|
20
20
|
openHref(primary.href);
|
|
@@ -11,7 +11,7 @@ function openHref(href) {
|
|
|
11
11
|
import { useEmit } from './instrument.js';
|
|
12
12
|
export function EmptyState({ icon: Icon, title, description, bullets, primary, secondary, }) {
|
|
13
13
|
const track = useEmit();
|
|
14
|
-
return (_jsxs(Card, { borderWidth: 1, borderColor: "$borderColor", borderStyle: "dashed", p: "$6", gap: "$4", items: "center", maxWidth: 640, self: "center", width: "100%", children: [_jsx(YStack, { width: 48, height: 48, items: "center", justify: "center", rounded: "$4", bg: "$color3", children: _jsx(Icon, { size: 24 }) }), _jsxs(YStack, { gap: "$2", items: "center", maxW: 480, children: [_jsx(Text, { fontSize: "$6", fontWeight: "500", text: "center", letterSpacing: -0.3, children: title }), _jsx(Text, { fontSize: "$3", color: "$color11", text: "center", children: description })] }), bullets && bullets.length ? (_jsx(YStack, { gap: "$2", self: "stretch", maxW: 420, mx: "auto", children: bullets.map((b) => (_jsxs(XStack, { gap: "$2", items: "flex-start", children: [_jsx(YStack, { pt: "$1", children: _jsx(Check, { size: 14, color: "$color10" }) }), _jsx(Text, { fontSize: "$3", color: "$color11", flex: 1, children: b })] }, b))) })) : null, primary || secondary ? (_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", justify: "center", children: [primary ? (_jsx(PrimaryButton, { icon: primary.icon, iconAfter: primary.href ? _jsx(ExternalLink, { size:
|
|
14
|
+
return (_jsxs(Card, { borderWidth: 1, borderColor: "$borderColor", borderStyle: "dashed", p: "$6", gap: "$4", items: "center", maxWidth: 640, self: "center", width: "100%", children: [_jsx(YStack, { width: 48, height: 48, items: "center", justify: "center", rounded: "$4", bg: "$color3", children: _jsx(Icon, { size: 24 }) }), _jsxs(YStack, { gap: "$2", items: "center", maxW: 480, children: [_jsx(Text, { fontSize: "$6", fontWeight: "500", text: "center", letterSpacing: -0.3, children: title }), _jsx(Text, { fontSize: "$3", color: "$color11", text: "center", children: description })] }), bullets && bullets.length ? (_jsx(YStack, { gap: "$2", self: "stretch", maxW: 420, mx: "auto", children: bullets.map((b) => (_jsxs(XStack, { gap: "$2", items: "flex-start", children: [_jsx(YStack, { pt: "$1", children: _jsx(Check, { size: 14, color: "$color10" }) }), _jsx(Text, { fontSize: "$3", color: "$color11", flex: 1, children: b })] }, b))) })) : null, primary || secondary ? (_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", justify: "center", children: [primary ? (_jsx(PrimaryButton, { icon: primary.icon, iconAfter: primary.href ? _jsx(ExternalLink, { size: 16 }) : _jsx(ArrowRight, { size: 16 }), onPress: () => {
|
|
15
15
|
track({ component: 'EmptyState', action: 'click', id: title, value: primary.label });
|
|
16
16
|
if (primary.href)
|
|
17
17
|
openHref(primary.href);
|
package/dist/product/Filters.cjs
CHANGED
|
@@ -27,5 +27,5 @@ function SearchInput({ value, onChange, placeholder, name, }) {
|
|
|
27
27
|
track({ component: 'SearchInput', action: 'search', id: name, value: (0, instrument_1.textSize)(v) });
|
|
28
28
|
onChange(v);
|
|
29
29
|
};
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$color1", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size:
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$color1", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16, color: "$color10" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { flex: 1, value: value, onChangeText: onChangeTracked, placeholder: placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })] }));
|
|
31
31
|
}
|
package/dist/product/Filters.js
CHANGED
|
@@ -23,6 +23,6 @@ export function SearchInput({ value, onChange, placeholder, name, }) {
|
|
|
23
23
|
track({ component: 'SearchInput', action: 'search', id: name, value: textSize(v) });
|
|
24
24
|
onChange(v);
|
|
25
25
|
};
|
|
26
|
-
return (_jsxs(XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$color1", children: [_jsx(Search, { size:
|
|
26
|
+
return (_jsxs(XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$color1", children: [_jsx(Search, { size: 16, color: "$color10" }), _jsx(Input, { flex: 1, value: value, onChangeText: onChangeTracked, placeholder: placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })] }));
|
|
27
27
|
}
|
|
28
28
|
//# sourceMappingURL=Filters.js.map
|
|
@@ -126,11 +126,11 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picke
|
|
|
126
126
|
setBusy(false);
|
|
127
127
|
}
|
|
128
128
|
};
|
|
129
|
-
return ((0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: open, onOpenChange: setOpen, placement: direction === 'up' ? 'top-start' : 'bottom-start', children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} · switch organization`, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: current, size: 30 }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size:
|
|
129
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: open, onOpenChange: setOpen, placement: direction === 'up' ? 'top-start' : 'bottom-start', children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} · switch organization`, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: current, size: 30 }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size: 16, color: "$color9" })] }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { bordered: true, elevate: true, p: "$2", width: 300, bg: "$color2", borderColor: "$borderColor", children: creating ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", fontWeight: "700", children: "Create organization" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { size: "$3", placeholder: "Organization name", value: newName, onChangeText: setNewName, autoCapitalize: "words", onSubmitEditing: () => void submitCreate() }), err ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$red10", children: err })) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, onPress: () => setCreating(false), disabled: busy, children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", onPress: () => void submitCreate(), disabled: busy || !newName.trim(), icon: busy ? (0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small" }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 14 }), children: "Create" })] })] })) : ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [orgs ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$1", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 13, opacity: 0.6 }), (0, jsx_runtime_1.jsx)(gui_1.Input, { flex: 1, size: "$2", borderWidth: 0, bg: "transparent", placeholder: "Find organization\u2026", value: query, onChangeText: setQuery, autoCapitalize: "none", autoCorrect: false })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: { maxHeight: 300, overflowY: 'auto', display: 'flex', flexDirection: 'column' }, onScroll: (e) => {
|
|
130
130
|
const el = e.currentTarget;
|
|
131
131
|
if (el.scrollHeight - el.scrollTop - el.clientHeight < 48)
|
|
132
132
|
loadMore();
|
|
133
|
-
}, children: [loading ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", color: "$color11" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color10", children: "Loading organizations\u2026" })] })) : visible.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { px: "$2", py: "$2", fontSize: "$2", color: "$color10", children: query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.' })) : (visible.map((org) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => select(org.name), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: org.name === currentId ? '$color4' : 'transparent', hoverStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: org }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }), org.name === currentId ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size:
|
|
133
|
+
}, children: [loading ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", color: "$color11" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color10", children: "Loading organizations\u2026" })] })) : visible.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { px: "$2", py: "$2", fontSize: "$2", color: "$color10", children: query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.' })) : (visible.map((org) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => select(org.name), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: org.name === currentId ? '$color4' : 'transparent', hoverStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: org }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }), org.name === currentId ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16 }) : null] }, org.name)))), loadingMore ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", color: "$color11" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", children: "Loading more\u2026" })] })) : hasMore ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { onPress: loadMore, cursor: "pointer", items: "center", justify: "center", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color4' }, children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color11", fontWeight: "600", children: "Load more" }) })) : null] }), footer, create ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => {
|
|
134
134
|
setCreating(true);
|
|
135
135
|
setErr(null);
|
|
136
136
|
}, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", mt: "$1", rounded: "$3", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 14 }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "Create organization" })] })) : null, picker ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => {
|
|
@@ -123,11 +123,11 @@ export function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create
|
|
|
123
123
|
setBusy(false);
|
|
124
124
|
}
|
|
125
125
|
};
|
|
126
|
-
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, placement: direction === 'up' ? 'top-start' : 'bottom-start', children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} · switch organization`, children: _jsxs(XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [_jsx(OrgMark, { org: current, size: 30 }), _jsx(Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }), _jsx(ChevronsUpDown, { size:
|
|
126
|
+
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, placement: direction === 'up' ? 'top-start' : 'bottom-start', children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} · switch organization`, children: _jsxs(XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [_jsx(OrgMark, { org: current, size: 30 }), _jsx(Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }), _jsx(ChevronsUpDown, { size: 16, color: "$color9" })] }) }) }), _jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 300, bg: "$color2", borderColor: "$borderColor", children: creating ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "700", children: "Create organization" }), _jsx(Input, { size: "$3", placeholder: "Organization name", value: newName, onChangeText: setNewName, autoCapitalize: "words", onSubmitEditing: () => void submitCreate() }), err ? (_jsx(Text, { fontSize: "$1", color: "$red10", children: err })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "$2", chromeless: true, onPress: () => setCreating(false), disabled: busy, children: "Cancel" }), _jsx(Button, { size: "$2", onPress: () => void submitCreate(), disabled: busy || !newName.trim(), icon: busy ? _jsx(Spinner, { size: "small" }) : _jsx(Plus, { size: 14 }), children: "Create" })] })] })) : (_jsxs(YStack, { gap: "$1", children: [orgs ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$1", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 13, opacity: 0.6 }), _jsx(Input, { flex: 1, size: "$2", borderWidth: 0, bg: "transparent", placeholder: "Find organization\u2026", value: query, onChangeText: setQuery, autoCapitalize: "none", autoCorrect: false })] })) : null, _jsxs("div", { style: { maxHeight: 300, overflowY: 'auto', display: 'flex', flexDirection: 'column' }, onScroll: (e) => {
|
|
127
127
|
const el = e.currentTarget;
|
|
128
128
|
if (el.scrollHeight - el.scrollTop - el.clientHeight < 48)
|
|
129
129
|
loadMore();
|
|
130
|
-
}, children: [loading ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$3", children: [_jsx(Spinner, { size: "small", color: "$color11" }), _jsx(Text, { fontSize: "$2", color: "$color10", children: "Loading organizations\u2026" })] })) : visible.length === 0 ? (_jsx(Text, { px: "$2", py: "$2", fontSize: "$2", color: "$color10", children: query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.' })) : (visible.map((org) => (_jsxs(XStack, { onPress: () => select(org.name), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: org.name === currentId ? '$color4' : 'transparent', hoverStyle: { bg: '$color5' }, children: [_jsx(OrgMark, { org: org }), _jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }), org.name === currentId ? _jsx(Check, { size:
|
|
130
|
+
}, children: [loading ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$3", children: [_jsx(Spinner, { size: "small", color: "$color11" }), _jsx(Text, { fontSize: "$2", color: "$color10", children: "Loading organizations\u2026" })] })) : visible.length === 0 ? (_jsx(Text, { px: "$2", py: "$2", fontSize: "$2", color: "$color10", children: query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.' })) : (visible.map((org) => (_jsxs(XStack, { onPress: () => select(org.name), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: org.name === currentId ? '$color4' : 'transparent', hoverStyle: { bg: '$color5' }, children: [_jsx(OrgMark, { org: org }), _jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }), org.name === currentId ? _jsx(Check, { size: 16 }) : null] }, org.name)))), loadingMore ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [_jsx(Spinner, { size: "small", color: "$color11" }), _jsx(Text, { fontSize: "$1", color: "$color10", children: "Loading more\u2026" })] })) : hasMore ? (_jsx(XStack, { onPress: loadMore, cursor: "pointer", items: "center", justify: "center", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color4' }, children: _jsx(Text, { fontSize: "$1", color: "$color11", fontWeight: "600", children: "Load more" }) })) : null] }), footer, create ? (_jsxs(XStack, { onPress: () => {
|
|
131
131
|
setCreating(true);
|
|
132
132
|
setErr(null);
|
|
133
133
|
}, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", mt: "$1", rounded: "$3", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$color5' }, children: [_jsx(YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: _jsx(Plus, { size: 14 }) }), _jsx(Text, { fontSize: "$2", color: "$color12", children: "Create organization" })] })) : null, picker ? (_jsxs(XStack, { onPress: () => {
|
|
@@ -28,5 +28,5 @@ function Pagination({ page, count, onChange, around = 1 }) {
|
|
|
28
28
|
track({ component: 'Pagination', action: 'select', value: to });
|
|
29
29
|
onChange(to);
|
|
30
30
|
};
|
|
31
|
-
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "center", gap: "$1", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronLeft, { size:
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "center", gap: "$1", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronLeft, { size: 16 }), onPress: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page" }), (0, pages_1.pages)(page, count, around).map((slot, i) => slot === pages_1.GAP ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { px: "$1.5", fontSize: "$2", color: "$color10", "aria-hidden": true, children: pages_1.GAP }, `gap-${i}`)) : ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: slot !== page, onPress: () => go(slot), "aria-label": `Page ${slot}`, "aria-current": slot === page ? 'page' : undefined, bg: slot === page ? '$color4' : undefined, children: String(slot) }, slot))), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: 16 }), onPress: () => go(page + 1), disabled: page >= count, "aria-label": "Next page" })] }));
|
|
32
32
|
}
|
|
@@ -23,6 +23,6 @@ export function Pagination({ page, count, onChange, around = 1 }) {
|
|
|
23
23
|
track({ component: 'Pagination', action: 'select', value: to });
|
|
24
24
|
onChange(to);
|
|
25
25
|
};
|
|
26
|
-
return (_jsxs(XStack, { items: "center", justify: "center", gap: "$1", flexWrap: "wrap", children: [_jsx(Button, { size: "$2", chromeless: true, icon: _jsx(ChevronLeft, { size:
|
|
26
|
+
return (_jsxs(XStack, { items: "center", justify: "center", gap: "$1", flexWrap: "wrap", children: [_jsx(Button, { size: "$2", chromeless: true, icon: _jsx(ChevronLeft, { size: 16 }), onPress: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page" }), pages(page, count, around).map((slot, i) => slot === GAP ? (_jsx(Text, { px: "$1.5", fontSize: "$2", color: "$color10", "aria-hidden": true, children: GAP }, `gap-${i}`)) : (_jsx(Button, { size: "$2", chromeless: slot !== page, onPress: () => go(slot), "aria-label": `Page ${slot}`, "aria-current": slot === page ? 'page' : undefined, bg: slot === page ? '$color4' : undefined, children: String(slot) }, slot))), _jsx(Button, { size: "$2", chromeless: true, icon: _jsx(ChevronRight, { size: 16 }), onPress: () => go(page + 1), disabled: page >= count, "aria-label": "Next page" })] }));
|
|
27
27
|
}
|
|
28
28
|
//# sourceMappingURL=Pagination.js.map
|
|
@@ -51,7 +51,7 @@ function UserMenu({ name, email, avatar, groups = [], theme, onSignOut, signOutL
|
|
|
51
51
|
}, placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { cursor: "pointer", items: "center", gap: "$2.5", height: height, px: "$2", rounded: "$3", minW: 0, hoverStyle: { bg: '$color4' }, role: "button", tabIndex: 0, "aria-label": shown ? `${shown} · account` : 'Account', children: [avatar || shown ? ((0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: { name: shown || 'Account', logo: avatar }, size: 30 })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.UserRound, { size: 18 })), label && shown ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", fontWeight: "600", color: "$color12", numberOfLines: 1, maxW: 160, children: shown })) : null] }) }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { bordered: true, elevate: true, p: "$2", width: 240, bg: "$color2", borderColor: "$borderColor", children: children ?? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [shown || email ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$0.5", px: "$2", py: "$1.5", children: [shown ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "700", color: "$color12", numberOfLines: 1, children: shown })) : null, email && email !== shown ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: email })) : null] })) : null, filled.map((group, i) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(i > 0 || shown || email) ? (0, jsx_runtime_1.jsx)(gui_1.Separator, { borderColor: "$borderColor", my: "$1" }) : null, group.map((item) => ((0, jsx_runtime_1.jsx)(Row, { item: item, onDone: close }, item.id)))] }, i))), theme !== null ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.Separator, { borderColor: "$borderColor", my: "$1" }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2.5", px: "$2", py: "$1", rounded: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, fontSize: "$2", color: "$color12", children: "Theme" }), theme ?? (0, jsx_runtime_1.jsx)(ThemeToggle_1.ThemeToggle, {})] })] })) : null, onSignOut ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.Separator, { borderColor: "$borderColor", my: "$1" }), (0, jsx_runtime_1.jsx)(Row, { item: {
|
|
52
52
|
id: 'sign-out',
|
|
53
53
|
label: signOutLabel,
|
|
54
|
-
icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.LogOut, { size:
|
|
54
|
+
icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.LogOut, { size: 16 }),
|
|
55
55
|
onPress: onSignOut,
|
|
56
56
|
}, onDone: close })] })) : null] })) })] }));
|
|
57
57
|
}
|
package/dist/product/UserMenu.js
CHANGED
|
@@ -50,7 +50,7 @@ export function UserMenu({ name, email, avatar, groups = [], theme, onSignOut, s
|
|
|
50
50
|
}, placement: "bottom-end", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs(XStack, { cursor: "pointer", items: "center", gap: "$2.5", height: height, px: "$2", rounded: "$3", minW: 0, hoverStyle: { bg: '$color4' }, role: "button", tabIndex: 0, "aria-label": shown ? `${shown} · account` : 'Account', children: [avatar || shown ? (_jsx(OrgMark, { org: { name: shown || 'Account', logo: avatar }, size: 30 })) : (_jsx(UserRound, { size: 18 })), label && shown ? (_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$color12", numberOfLines: 1, maxW: 160, children: shown })) : null] }) }), _jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 240, bg: "$color2", borderColor: "$borderColor", children: children ?? (_jsxs(YStack, { gap: "$1", children: [shown || email ? (_jsxs(YStack, { gap: "$0.5", px: "$2", py: "$1.5", children: [shown ? (_jsx(Text, { fontSize: "$2", fontWeight: "700", color: "$color12", numberOfLines: 1, children: shown })) : null, email && email !== shown ? (_jsx(Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: email })) : null] })) : null, filled.map((group, i) => (_jsxs(YStack, { gap: "$1", children: [(i > 0 || shown || email) ? _jsx(Separator, { borderColor: "$borderColor", my: "$1" }) : null, group.map((item) => (_jsx(Row, { item: item, onDone: close }, item.id)))] }, i))), theme !== null ? (_jsxs(_Fragment, { children: [_jsx(Separator, { borderColor: "$borderColor", my: "$1" }), _jsxs(XStack, { items: "center", gap: "$2.5", px: "$2", py: "$1", rounded: "$3", children: [_jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", children: "Theme" }), theme ?? _jsx(ThemeToggle, {})] })] })) : null, onSignOut ? (_jsxs(_Fragment, { children: [_jsx(Separator, { borderColor: "$borderColor", my: "$1" }), _jsx(Row, { item: {
|
|
51
51
|
id: 'sign-out',
|
|
52
52
|
label: signOutLabel,
|
|
53
|
-
icon: _jsx(LogOut, { size:
|
|
53
|
+
icon: _jsx(LogOut, { size: 16 }),
|
|
54
54
|
onPress: onSignOut,
|
|
55
55
|
}, onDone: close })] })) : null] })) })] }));
|
|
56
56
|
}
|
|
@@ -15,5 +15,5 @@ const ChannelBadge_1 = require("./ChannelBadge.cjs");
|
|
|
15
15
|
const format_1 = require("./format.cjs");
|
|
16
16
|
function PostCard({ post, onEdit, onDelete, }) {
|
|
17
17
|
const mediaCount = post.media?.length ?? 0;
|
|
18
|
-
return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { p: "$3", gap: "$2.5", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(ChannelBadge_1.ChannelBadge, { channel: post.channel }), (0, jsx_runtime_1.jsx)(StatusTag_1.StatusTag, { status: post.status })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$1", children: [onEdit ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Pencil, { size:
|
|
18
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { p: "$3", gap: "$2.5", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(ChannelBadge_1.ChannelBadge, { channel: post.channel }), (0, jsx_runtime_1.jsx)(StatusTag_1.StatusTag, { status: post.status })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$1", children: [onEdit ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Pencil, { size: 16 }), onPress: () => onEdit(post) })) : null, onDelete ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Trash2, { size: 16 }), onPress: () => onDelete(post) })) : null] })] }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color12", children: post.content }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$2", children: [post.scheduleAt ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color11", children: (0, format_1.formatPostTime)(post.scheduleAt) })) : ((0, jsx_runtime_1.jsx)(gui_1.YStack, {})), mediaCount ? ((0, jsx_runtime_1.jsxs)(gui_1.Text, { fontSize: "$1", color: "$color10", children: [mediaCount, " media"] })) : null] })] }));
|
|
19
19
|
}
|
|
@@ -12,6 +12,6 @@ import { ChannelBadge } from './ChannelBadge.js';
|
|
|
12
12
|
import { formatPostTime } from './format.js';
|
|
13
13
|
export function PostCard({ post, onEdit, onDelete, }) {
|
|
14
14
|
const mediaCount = post.media?.length ?? 0;
|
|
15
|
-
return (_jsxs(Card, { p: "$3", gap: "$2.5", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(ChannelBadge, { channel: post.channel }), _jsx(StatusTag, { status: post.status })] }), _jsxs(XStack, { gap: "$1", children: [onEdit ? (_jsx(Button, { size: "$2", chromeless: true, icon: _jsx(Pencil, { size:
|
|
15
|
+
return (_jsxs(Card, { p: "$3", gap: "$2.5", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(ChannelBadge, { channel: post.channel }), _jsx(StatusTag, { status: post.status })] }), _jsxs(XStack, { gap: "$1", children: [onEdit ? (_jsx(Button, { size: "$2", chromeless: true, icon: _jsx(Pencil, { size: 16 }), onPress: () => onEdit(post) })) : null, onDelete ? (_jsx(Button, { size: "$2", chromeless: true, icon: _jsx(Trash2, { size: 16 }), onPress: () => onDelete(post) })) : null] })] }), _jsx(Text, { fontSize: "$3", color: "$color12", children: post.content }), _jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [post.scheduleAt ? (_jsx(Text, { fontSize: "$1", color: "$color11", children: formatPostTime(post.scheduleAt) })) : (_jsx(YStack, {})), mediaCount ? (_jsxs(Text, { fontSize: "$1", color: "$color10", children: [mediaCount, " media"] })) : null] })] }));
|
|
16
16
|
}
|
|
17
17
|
//# sourceMappingURL=PostCard.js.map
|