@astryxdesign/cli 0.4.4-canary.39d8a5a → 0.4.4-canary.6bd4a75
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,23 @@
|
|
|
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: 'BottomSheet',
|
|
7
|
+
name: 'Bottom Sheet — Snap points',
|
|
8
|
+
displayName: 'Bottom Sheet — Snap points',
|
|
9
|
+
description:
|
|
10
|
+
'Drag-to-resize stops: a half-height working surface, and a peek that slides away and thins the scrim.',
|
|
11
|
+
isReady: true,
|
|
12
|
+
aspectRatio: 3 / 4,
|
|
13
|
+
componentsUsed: [
|
|
14
|
+
'BottomSheet',
|
|
15
|
+
'Button',
|
|
16
|
+
'Divider',
|
|
17
|
+
'Heading',
|
|
18
|
+
'Icon',
|
|
19
|
+
'Item',
|
|
20
|
+
'Stack',
|
|
21
|
+
'Text',
|
|
22
|
+
],
|
|
23
|
+
};
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
import {useState} from 'react';
|
|
6
|
+
import {
|
|
7
|
+
BottomSheet,
|
|
8
|
+
type BottomSheetSnapPoint,
|
|
9
|
+
} from '@astryxdesign/core/BottomSheet';
|
|
10
|
+
import {Button} from '@astryxdesign/core/Button';
|
|
11
|
+
import {Divider} from '@astryxdesign/core/Divider';
|
|
12
|
+
import {Heading} from '@astryxdesign/core/Heading';
|
|
13
|
+
import {Icon} from '@astryxdesign/core/Icon';
|
|
14
|
+
import {Item} from '@astryxdesign/core/Item';
|
|
15
|
+
import {HStack, VStack} from '@astryxdesign/core/Stack';
|
|
16
|
+
import {Text} from '@astryxdesign/core/Text';
|
|
17
|
+
import {
|
|
18
|
+
ArrowLeftIcon,
|
|
19
|
+
ArrowRightIcon,
|
|
20
|
+
ArrowUpIcon,
|
|
21
|
+
ArrowUturnLeftIcon,
|
|
22
|
+
FlagIcon,
|
|
23
|
+
MapPinIcon,
|
|
24
|
+
} from '@heroicons/react/24/outline';
|
|
25
|
+
|
|
26
|
+
// Half the viewport is a working surface — the sheet lays its content out at
|
|
27
|
+
// that height and keeps a full scrim. The 96px stop is a peek: a sliver, so the
|
|
28
|
+
// sheet slides away rather than reflowing into it, and the scrim thins.
|
|
29
|
+
const SNAP_POINTS: ReadonlyArray<BottomSheetSnapPoint> = ['96px', '50%'];
|
|
30
|
+
|
|
31
|
+
const steps = [
|
|
32
|
+
{
|
|
33
|
+
icon: MapPinIcon,
|
|
34
|
+
label: 'Head northeast on Mission St',
|
|
35
|
+
detail: 'Toward 3rd St',
|
|
36
|
+
distance: '350 ft',
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
icon: ArrowRightIcon,
|
|
40
|
+
label: 'Turn right onto 3rd St',
|
|
41
|
+
detail: 'Pass Yerba Buena Gardens on your left',
|
|
42
|
+
distance: '0.2 mi',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
icon: ArrowUpIcon,
|
|
46
|
+
label: 'Continue onto Kearny St',
|
|
47
|
+
detail: 'Stay in the right lane',
|
|
48
|
+
distance: '0.4 mi',
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
icon: ArrowLeftIcon,
|
|
52
|
+
label: 'Turn left onto Market St',
|
|
53
|
+
detail: 'Cable car crossing ahead',
|
|
54
|
+
distance: '0.6 mi',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
icon: ArrowRightIcon,
|
|
58
|
+
label: 'Bear right onto Sutter St',
|
|
59
|
+
detail: 'Toward the Financial District',
|
|
60
|
+
distance: '0.3 mi',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
icon: ArrowUpIcon,
|
|
64
|
+
label: 'Continue on Sansome St',
|
|
65
|
+
detail: 'Four blocks, past Pine St',
|
|
66
|
+
distance: '0.5 mi',
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
icon: ArrowUturnLeftIcon,
|
|
70
|
+
label: 'Make a U-turn at Washington St',
|
|
71
|
+
detail: 'Construction detour until March',
|
|
72
|
+
distance: '150 ft',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
icon: ArrowRightIcon,
|
|
76
|
+
label: 'Turn right onto Battery St',
|
|
77
|
+
detail: 'Follow signs for the Embarcadero',
|
|
78
|
+
distance: '0.4 mi',
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
icon: ArrowLeftIcon,
|
|
82
|
+
label: 'Turn left onto Sacramento St',
|
|
83
|
+
detail: 'Toward the waterfront',
|
|
84
|
+
distance: '0.2 mi',
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
icon: ArrowRightIcon,
|
|
88
|
+
label: 'Turn right onto The Embarcadero',
|
|
89
|
+
detail: 'Bay Bridge on your right',
|
|
90
|
+
distance: '0.5 mi',
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
icon: ArrowUpIcon,
|
|
94
|
+
label: 'Continue past Pier 14',
|
|
95
|
+
detail: 'Ferry terminal signage begins here',
|
|
96
|
+
distance: '0.3 mi',
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
icon: FlagIcon,
|
|
100
|
+
label: 'Arrive at the Ferry Building',
|
|
101
|
+
detail: 'Parking garage entrance on Washington St',
|
|
102
|
+
distance: '—',
|
|
103
|
+
},
|
|
104
|
+
];
|
|
105
|
+
|
|
106
|
+
export default function BottomSheetSnapPoints() {
|
|
107
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
108
|
+
|
|
109
|
+
return (
|
|
110
|
+
<>
|
|
111
|
+
<VStack gap={3} align="start">
|
|
112
|
+
<Text type="body">
|
|
113
|
+
This sheet has two extra stops: half the viewport, and a 96px peek.
|
|
114
|
+
Drag the handle down to collapse it, then back up — it rests at each
|
|
115
|
+
stop instead of following your finger.
|
|
116
|
+
</Text>
|
|
117
|
+
<Button label="Show directions" onClick={() => setIsOpen(true)} />
|
|
118
|
+
</VStack>
|
|
119
|
+
<BottomSheet
|
|
120
|
+
isOpen={isOpen}
|
|
121
|
+
onOpenChange={setIsOpen}
|
|
122
|
+
label="Directions to the Ferry Building"
|
|
123
|
+
height="tall"
|
|
124
|
+
snapPoints={SNAP_POINTS}>
|
|
125
|
+
<VStack gap={4} padding={4}>
|
|
126
|
+
<VStack gap={1}>
|
|
127
|
+
<Heading level={3}>Ferry Building</Heading>
|
|
128
|
+
<HStack gap={2}>
|
|
129
|
+
<Text type="label">18 min</Text>
|
|
130
|
+
<Text type="supporting">3.7 mi · arrive 9:41 AM</Text>
|
|
131
|
+
</HStack>
|
|
132
|
+
</VStack>
|
|
133
|
+
<Divider />
|
|
134
|
+
<VStack gap={0}>
|
|
135
|
+
{steps.map(step => (
|
|
136
|
+
<Item
|
|
137
|
+
key={step.label}
|
|
138
|
+
startContent={<Icon icon={step.icon} size="sm" />}
|
|
139
|
+
label={step.label}
|
|
140
|
+
description={step.detail}
|
|
141
|
+
endContent={<Text type="supporting">{step.distance}</Text>}
|
|
142
|
+
/>
|
|
143
|
+
))}
|
|
144
|
+
</VStack>
|
|
145
|
+
<Divider />
|
|
146
|
+
<Button
|
|
147
|
+
label="Start"
|
|
148
|
+
onClick={() => setIsOpen(false)}
|
|
149
|
+
variant="primary"
|
|
150
|
+
/>
|
|
151
|
+
</VStack>
|
|
152
|
+
</BottomSheet>
|
|
153
|
+
</>
|
|
154
|
+
);
|
|
155
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.4.4-canary.
|
|
3
|
+
"version": "0.4.4-canary.6bd4a75",
|
|
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.4-canary.
|
|
91
|
-
"@astryxdesign/core": "0.4.4-canary.
|
|
92
|
-
"@astryxdesign/lab": "0.4.4-canary.
|
|
93
|
-
"@astryxdesign/theme-neutral": "0.4.4-canary.
|
|
90
|
+
"@astryxdesign/charts": "0.4.4-canary.6bd4a75",
|
|
91
|
+
"@astryxdesign/core": "0.4.4-canary.6bd4a75",
|
|
92
|
+
"@astryxdesign/lab": "0.4.4-canary.6bd4a75",
|
|
93
|
+
"@astryxdesign/theme-neutral": "0.4.4-canary.6bd4a75",
|
|
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.4-canary.
|
|
112
|
-
"@astryxdesign/core": "0.4.4-canary.
|
|
113
|
-
"@astryxdesign/lab": "0.4.4-canary.
|
|
114
|
-
"@astryxdesign/theme-neutral": "0.4.4-canary.
|
|
111
|
+
"@astryxdesign/charts": "0.4.4-canary.6bd4a75",
|
|
112
|
+
"@astryxdesign/core": "0.4.4-canary.6bd4a75",
|
|
113
|
+
"@astryxdesign/lab": "0.4.4-canary.6bd4a75",
|
|
114
|
+
"@astryxdesign/theme-neutral": "0.4.4-canary.6bd4a75",
|
|
115
115
|
"gpt-tokenizer": "^3.4.0"
|
|
116
116
|
},
|
|
117
117
|
"scripts": {
|