@astryxdesign/cli 0.1.2-canary.bfcbf64 → 0.1.2-canary.c395fca
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/package.json +7 -7
- package/templates/blocks/components/DropdownMenu/DropdownMenuShowcase.tsx +0 -1
- package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemShowcase.tsx +0 -1
- package/templates/blocks/components/Hooks/useKeyboardHintHookUsage.doc.mjs +14 -0
- package/templates/blocks/components/Hooks/useKeyboardHintHookUsage.tsx +57 -0
- package/templates/blocks/components/MoreMenu/MoreMenuShowcase.tsx +0 -1
- package/templates/pages/shell-side-nav/page.tsx +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.1.2-canary.
|
|
3
|
+
"version": "0.1.2-canary.c395fca",
|
|
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",
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"zod": "^4.4.3"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
|
-
"@astryxdesign/core": "0.1.2-canary.
|
|
79
|
-
"@astryxdesign/lab": "0.1.2-canary.
|
|
80
|
-
"@astryxdesign/theme-neutral": "0.1.2-canary.
|
|
78
|
+
"@astryxdesign/core": "0.1.2-canary.c395fca",
|
|
79
|
+
"@astryxdesign/lab": "0.1.2-canary.c395fca",
|
|
80
|
+
"@astryxdesign/theme-neutral": "0.1.2-canary.c395fca",
|
|
81
81
|
"gpt-tokenizer": "^2.0.0"
|
|
82
82
|
},
|
|
83
83
|
"peerDependenciesMeta": {
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
}
|
|
93
93
|
},
|
|
94
94
|
"devDependencies": {
|
|
95
|
-
"@astryxdesign/core": "0.1.2-canary.
|
|
96
|
-
"@astryxdesign/lab": "0.1.2-canary.
|
|
97
|
-
"@astryxdesign/theme-neutral": "0.1.2-canary.
|
|
95
|
+
"@astryxdesign/core": "0.1.2-canary.c395fca",
|
|
96
|
+
"@astryxdesign/lab": "0.1.2-canary.c395fca",
|
|
97
|
+
"@astryxdesign/theme-neutral": "0.1.2-canary.c395fca",
|
|
98
98
|
"gpt-tokenizer": "^2.0.0"
|
|
99
99
|
},
|
|
100
100
|
"scripts": {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
|
|
4
|
+
export const doc = {
|
|
5
|
+
type: 'block',
|
|
6
|
+
exampleFor: 'useKeyboardHint',
|
|
7
|
+
name: 'useKeyboardHint — Arrow-key Hint',
|
|
8
|
+
displayName: 'useKeyboardHint — Arrow-key Hint',
|
|
9
|
+
description:
|
|
10
|
+
'Toolbar shows an ephemeral "← → to navigate" hint on first keyboard focus via useKeyboardHint, teaching sighted keyboard users that arrows move within the group.',
|
|
11
|
+
isReady: true,
|
|
12
|
+
aspectRatio: 16 / 9,
|
|
13
|
+
componentsUsed: ['Toolbar', 'Button', 'Icon', 'Card', 'Section', 'Text', 'Layout'],
|
|
14
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
import {Toolbar} from '@astryxdesign/core/Toolbar';
|
|
6
|
+
import {Button} from '@astryxdesign/core/Button';
|
|
7
|
+
import {Icon} from '@astryxdesign/core/Icon';
|
|
8
|
+
import {Card} from '@astryxdesign/core/Card';
|
|
9
|
+
import {Section} from '@astryxdesign/core/Section';
|
|
10
|
+
import {Text} from '@astryxdesign/core/Text';
|
|
11
|
+
import {VStack} from '@astryxdesign/core/Layout';
|
|
12
|
+
import {BoldIcon, ItalicIcon, UnderlineIcon} from '@heroicons/react/24/outline';
|
|
13
|
+
|
|
14
|
+
export default function UseKeyboardHintHookUsage() {
|
|
15
|
+
return (
|
|
16
|
+
<Card style={{width: 420}}>
|
|
17
|
+
<Toolbar
|
|
18
|
+
label="Text formatting"
|
|
19
|
+
dividers={['bottom']}
|
|
20
|
+
startContent={
|
|
21
|
+
<>
|
|
22
|
+
<Button
|
|
23
|
+
label="Bold"
|
|
24
|
+
variant="ghost"
|
|
25
|
+
icon={<Icon icon={BoldIcon} />}
|
|
26
|
+
isIconOnly
|
|
27
|
+
/>
|
|
28
|
+
<Button
|
|
29
|
+
label="Italic"
|
|
30
|
+
variant="ghost"
|
|
31
|
+
icon={<Icon icon={ItalicIcon} />}
|
|
32
|
+
isIconOnly
|
|
33
|
+
/>
|
|
34
|
+
<Button
|
|
35
|
+
label="Underline"
|
|
36
|
+
variant="ghost"
|
|
37
|
+
icon={<Icon icon={UnderlineIcon} />}
|
|
38
|
+
isIconOnly
|
|
39
|
+
/>
|
|
40
|
+
</>
|
|
41
|
+
}
|
|
42
|
+
/>
|
|
43
|
+
<Section>
|
|
44
|
+
<VStack gap={1}>
|
|
45
|
+
<Text type="body" weight="bold">
|
|
46
|
+
Keyboard-friendly by default
|
|
47
|
+
</Text>
|
|
48
|
+
<Text type="supporting" color="secondary">
|
|
49
|
+
Tab into the toolbar with your keyboard and Toolbar shows an
|
|
50
|
+
ephemeral "← → to navigate" hint — powered by useKeyboardHint — so
|
|
51
|
+
sighted keyboard users learn that arrows move within the group.
|
|
52
|
+
</Text>
|
|
53
|
+
</VStack>
|
|
54
|
+
</Section>
|
|
55
|
+
</Card>
|
|
56
|
+
);
|
|
57
|
+
}
|