@astryxdesign/cli 0.4.5-canary.e238799 → 0.4.5-canary.ffd05c4
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.
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
|
|
4
|
+
export const doc = {
|
|
5
|
+
type: 'block',
|
|
6
|
+
exampleFor: 'Selector',
|
|
7
|
+
name: 'Selector — Option descriptions',
|
|
8
|
+
displayName: 'Selector — Option descriptions',
|
|
9
|
+
description:
|
|
10
|
+
'Options carry a description, so the dropdown draws a two-line row. The closed trigger is sized by padding, so it is the size token for a one-line value and exactly one line taller for a two-line one — both on the 4px rhythm. An InputGroup pins the row, so the value folds back onto one line there.',
|
|
11
|
+
isReady: true,
|
|
12
|
+
aspectRatio: 16 / 9,
|
|
13
|
+
componentsUsed: ['Selector', 'SelectorOption', 'InputGroup', 'Button', 'Stack'],
|
|
14
|
+
};
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
import {useState} from 'react';
|
|
6
|
+
import {Selector, SelectorOption} from '@astryxdesign/core/Selector';
|
|
7
|
+
import {InputGroup} from '@astryxdesign/core/InputGroup';
|
|
8
|
+
import {Button} from '@astryxdesign/core/Button';
|
|
9
|
+
import {Stack} from '@astryxdesign/core/Layout';
|
|
10
|
+
import {LockClosedIcon, GlobeAltIcon} from '@heroicons/react/24/outline';
|
|
11
|
+
|
|
12
|
+
const VISIBILITY = [
|
|
13
|
+
{
|
|
14
|
+
value: 'private',
|
|
15
|
+
label: 'Private',
|
|
16
|
+
icon: LockClosedIcon,
|
|
17
|
+
description: 'Only members can access this space and its content.',
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
value: 'public',
|
|
21
|
+
label: 'Public',
|
|
22
|
+
icon: GlobeAltIcon,
|
|
23
|
+
description: 'Anyone at the company can find and join this space.',
|
|
24
|
+
},
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
export default function SelectorOptionDescriptions() {
|
|
28
|
+
const [condensed, setCondensed] = useState<string | undefined>('private');
|
|
29
|
+
const [full, setFull] = useState<string | undefined>('private');
|
|
30
|
+
const [grouped, setGrouped] = useState<string | undefined>('private');
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<Stack direction="vertical" gap={6}>
|
|
34
|
+
<Selector
|
|
35
|
+
style={{width: 320}}
|
|
36
|
+
label="Visibility"
|
|
37
|
+
description="Default trigger: one line at the size token."
|
|
38
|
+
options={VISIBILITY}
|
|
39
|
+
value={condensed}
|
|
40
|
+
onChange={setCondensed}
|
|
41
|
+
/>
|
|
42
|
+
<Selector
|
|
43
|
+
style={{width: 320}}
|
|
44
|
+
label="Visibility"
|
|
45
|
+
description="A stacked SelectorOption: the description gets its own line, and the trigger grows by exactly one line."
|
|
46
|
+
options={VISIBILITY}
|
|
47
|
+
value={full}
|
|
48
|
+
onChange={setFull}
|
|
49
|
+
renderValue={option => (
|
|
50
|
+
<SelectorOption
|
|
51
|
+
icon={option.icon}
|
|
52
|
+
label={option.label ?? option.value}
|
|
53
|
+
description={option.description}
|
|
54
|
+
/>
|
|
55
|
+
)}
|
|
56
|
+
/>
|
|
57
|
+
<InputGroup label="Visibility">
|
|
58
|
+
<Selector
|
|
59
|
+
label="Visibility"
|
|
60
|
+
isLabelHidden
|
|
61
|
+
options={VISIBILITY}
|
|
62
|
+
value={grouped}
|
|
63
|
+
onChange={setGrouped}
|
|
64
|
+
renderValue={option => (
|
|
65
|
+
<SelectorOption
|
|
66
|
+
icon={option.icon}
|
|
67
|
+
label={option.label ?? option.value}
|
|
68
|
+
description={option.description}
|
|
69
|
+
/>
|
|
70
|
+
)}
|
|
71
|
+
/>
|
|
72
|
+
<Button label="Save" />
|
|
73
|
+
</InputGroup>
|
|
74
|
+
</Stack>
|
|
75
|
+
);
|
|
76
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.4.5-canary.
|
|
3
|
+
"version": "0.4.5-canary.ffd05c4",
|
|
4
4
|
"displayName": "CLI",
|
|
5
5
|
"description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -87,10 +87,10 @@
|
|
|
87
87
|
"zod": "^4.4.3"
|
|
88
88
|
},
|
|
89
89
|
"peerDependencies": {
|
|
90
|
-
"@astryxdesign/charts": "0.4.5-canary.
|
|
91
|
-
"@astryxdesign/core": "0.4.5-canary.
|
|
92
|
-
"@astryxdesign/lab": "0.4.5-canary.
|
|
93
|
-
"@astryxdesign/theme-neutral": "0.4.5-canary.
|
|
90
|
+
"@astryxdesign/charts": "0.4.5-canary.ffd05c4",
|
|
91
|
+
"@astryxdesign/core": "0.4.5-canary.ffd05c4",
|
|
92
|
+
"@astryxdesign/lab": "0.4.5-canary.ffd05c4",
|
|
93
|
+
"@astryxdesign/theme-neutral": "0.4.5-canary.ffd05c4",
|
|
94
94
|
"gpt-tokenizer": "^3.4.0"
|
|
95
95
|
},
|
|
96
96
|
"peerDependenciesMeta": {
|
|
@@ -108,10 +108,10 @@
|
|
|
108
108
|
}
|
|
109
109
|
},
|
|
110
110
|
"devDependencies": {
|
|
111
|
-
"@astryxdesign/charts": "0.4.5-canary.
|
|
112
|
-
"@astryxdesign/core": "0.4.5-canary.
|
|
113
|
-
"@astryxdesign/lab": "0.4.5-canary.
|
|
114
|
-
"@astryxdesign/theme-neutral": "0.4.5-canary.
|
|
111
|
+
"@astryxdesign/charts": "0.4.5-canary.ffd05c4",
|
|
112
|
+
"@astryxdesign/core": "0.4.5-canary.ffd05c4",
|
|
113
|
+
"@astryxdesign/lab": "0.4.5-canary.ffd05c4",
|
|
114
|
+
"@astryxdesign/theme-neutral": "0.4.5-canary.ffd05c4",
|
|
115
115
|
"gpt-tokenizer": "^3.4.0"
|
|
116
116
|
},
|
|
117
117
|
"scripts": {
|