@stealthscale/component-navigation 0.1.0 → 0.3.0
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/README.md +414 -48
- package/dist/cyclonedx/bom.json +1 -1
- package/dist/index.d.ts +900 -38
- package/dist/index.js +2250 -32
- package/dist/recipe-wIXGUbM7.js +1541 -0
- package/dist/theme.js +8 -2
- package/package.json +41 -23
- package/dist/recipe-TfPpeGkM.js +0 -150
package/dist/theme.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as recipe$1, t as recipe } from "./recipe-
|
|
1
|
+
import { a as recipe$3, n as recipe$4, o as recipe, r as recipe$2, s as recipe$1, t as recipe$5 } from "./recipe-wIXGUbM7.js";
|
|
2
2
|
import { definePreset } from "@stealthscale/theme/authoring";
|
|
3
3
|
//#region src/theme.ts
|
|
4
4
|
/**
|
|
@@ -13,7 +13,13 @@ var theme_default = definePreset({
|
|
|
13
13
|
name: "@stealthscale/component-navigation",
|
|
14
14
|
theme: { extend: {
|
|
15
15
|
recipes: { link: recipe },
|
|
16
|
-
slotRecipes: {
|
|
16
|
+
slotRecipes: {
|
|
17
|
+
breadcrumb: recipe$1,
|
|
18
|
+
navigationMenu: recipe$2,
|
|
19
|
+
navList: recipe$3,
|
|
20
|
+
pagination: recipe$4,
|
|
21
|
+
toc: recipe$5
|
|
22
|
+
}
|
|
17
23
|
} }
|
|
18
24
|
});
|
|
19
25
|
//#endregion
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stealthscale/component-navigation",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Draws the ways a person moves between places: links, tabs, breadcrumbs and rails.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
"react",
|
|
9
9
|
"tabs"
|
|
10
10
|
],
|
|
11
|
-
"homepage": "https://github.com/stealth-scale/
|
|
12
|
-
"bugs": "https://github.com/stealth-scale/
|
|
11
|
+
"homepage": "https://github.com/stealth-scale/scale/tree/main/components/navigation#readme",
|
|
12
|
+
"bugs": "https://github.com/stealth-scale/scale/issues",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"repository": {
|
|
15
15
|
"type": "git",
|
|
16
|
-
"url": "git+https://github.com/stealth-scale/
|
|
16
|
+
"url": "git+https://github.com/stealth-scale/scale.git",
|
|
17
17
|
"directory": "components/navigation"
|
|
18
18
|
},
|
|
19
19
|
"files": [
|
|
@@ -34,29 +34,47 @@
|
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"@zag-js/collapsible": "1.45.0",
|
|
39
|
+
"@zag-js/navigation-menu": "1.45.0",
|
|
40
|
+
"@zag-js/pagination": "1.45.0",
|
|
41
|
+
"@zag-js/react": "1.45.0",
|
|
42
|
+
"@zag-js/toc": "1.45.0",
|
|
43
|
+
"@zag-js/types": "1.45.0"
|
|
44
|
+
},
|
|
37
45
|
"devDependencies": {
|
|
38
|
-
"@arethetypeswrong/core": "^0.18
|
|
39
|
-
"@
|
|
40
|
-
"@stealthscale/
|
|
41
|
-
"@stealthscale/
|
|
42
|
-
"@stealthscale/
|
|
43
|
-
"@stealthscale/
|
|
46
|
+
"@arethetypeswrong/core": "^0.18",
|
|
47
|
+
"@stealthscale/component-actions": "^0.2.1",
|
|
48
|
+
"@stealthscale/component-disclosure": "^0.2.2",
|
|
49
|
+
"@stealthscale/component-layout": "^0.2.1",
|
|
50
|
+
"@stealthscale/component-primitives": "^0.3.0",
|
|
51
|
+
"@stealthscale/hooks": "^0.3.0",
|
|
52
|
+
"@stealthscale/theme": "^0.5.0",
|
|
53
|
+
"@stealthscale/vite-config": "^0.8.0",
|
|
54
|
+
"@stealthscale/vite-config-i18n": "^0.2.1",
|
|
55
|
+
"@stealthscale/vite-config-react": "^0.9.1",
|
|
56
|
+
"@stealthscale/vite-config-specimen": "^0.2.1",
|
|
57
|
+
"@stealthscale/vite-config-theme": "^0.2.1",
|
|
44
58
|
"@stealthscale/vite-config-typescript": "^0.3.0",
|
|
45
|
-
"@testing-library/react": "^16.3
|
|
46
|
-
"@types/react": "^19.3
|
|
47
|
-
"@types/react-dom": "^19.3
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"oxc-transform-react": "^0.
|
|
51
|
-
"publint": "^0.3
|
|
52
|
-
"react": "^19.3
|
|
53
|
-
"react-dom": "^19.3
|
|
54
|
-
"typescript": "^7.0
|
|
55
|
-
"vitest": "
|
|
59
|
+
"@testing-library/react": "^16.3",
|
|
60
|
+
"@types/react": "^19.3",
|
|
61
|
+
"@types/react-dom": "^19.3",
|
|
62
|
+
"happy-dom": "^20.14",
|
|
63
|
+
"lucide-react": "^1.52",
|
|
64
|
+
"oxc-transform-react": "^0.153",
|
|
65
|
+
"publint": "^0.3",
|
|
66
|
+
"react": "^19.3",
|
|
67
|
+
"react-dom": "^19.3",
|
|
68
|
+
"typescript": "^7.0",
|
|
69
|
+
"vitest": "5.0.3"
|
|
56
70
|
},
|
|
57
71
|
"peerDependencies": {
|
|
58
|
-
"@stealthscale/
|
|
59
|
-
"
|
|
72
|
+
"@stealthscale/component-actions": "^0.2.1",
|
|
73
|
+
"@stealthscale/component-disclosure": "^0.2.2",
|
|
74
|
+
"@stealthscale/component-primitives": "^0.3.0",
|
|
75
|
+
"@stealthscale/hooks": "^0.3.0",
|
|
76
|
+
"@stealthscale/theme": "^0.5.0",
|
|
77
|
+
"react": "^19.3"
|
|
60
78
|
},
|
|
61
79
|
"engines": {
|
|
62
80
|
"node": ">=26.0.0"
|
package/dist/recipe-TfPpeGkM.js
DELETED
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
import { defineRecipe, defineSlotRecipe, gapSizes, link, onSlots, textSizes } from "@stealthscale/theme/authoring";
|
|
2
|
-
//#region src/breadcrumb/recipe.ts
|
|
3
|
-
/**
|
|
4
|
-
* States what a breadcrumb trail is: the path from the front of a site to the page a person is on,
|
|
5
|
-
* drawn as a list of links with a mark between each pair.
|
|
6
|
-
*
|
|
7
|
-
* @remarks
|
|
8
|
-
* Six parts. The root is the landmark, the list holds the trail, and each crumb is an item
|
|
9
|
-
* holding either a link to somewhere above or the name of the page itself. A separator sits
|
|
10
|
-
* between two crumbs as a row of the list rather than inside one, which is how a screen reader
|
|
11
|
-
* counts the crumbs rather than counting them twice.
|
|
12
|
-
* The size axis sets the text on the root and the gap on the list, so every part reads at one
|
|
13
|
-
* size by inheriting it and only the spacing is stated twice. It stops at `xl` because it reads
|
|
14
|
-
* the body role, and a trail is read at the size the page around it is read at rather than as a
|
|
15
|
-
* heading.
|
|
16
|
-
* The trail is quieter than the page it sits above: the links are muted and darken under a
|
|
17
|
-
* pointer, and the crumb for the page itself is the one at full strength. That is the way round
|
|
18
|
-
* a reader needs, because the one crumb that is not a link is the one naming where they are.
|
|
19
|
-
*/
|
|
20
|
-
/**
|
|
21
|
-
* Draws a muted trail at the middle size until a caller says otherwise.
|
|
22
|
-
*/
|
|
23
|
-
const recipe$1 = defineSlotRecipe({
|
|
24
|
-
base: {
|
|
25
|
-
currentLink: {
|
|
26
|
-
alignItems: "center",
|
|
27
|
-
display: "inline-flex",
|
|
28
|
-
gap: "gap.xs"
|
|
29
|
-
},
|
|
30
|
-
item: {
|
|
31
|
-
alignItems: "center",
|
|
32
|
-
display: "inline-flex"
|
|
33
|
-
},
|
|
34
|
-
link: {
|
|
35
|
-
alignItems: "center",
|
|
36
|
-
borderRadius: "l1",
|
|
37
|
-
cursor: "button",
|
|
38
|
-
display: "inline-flex",
|
|
39
|
-
focusRingColor: "colorPalette.focusRing",
|
|
40
|
-
focusVisibleRing: "outside",
|
|
41
|
-
gap: "gap.xs",
|
|
42
|
-
textDecoration: "none"
|
|
43
|
-
},
|
|
44
|
-
list: {
|
|
45
|
-
alignItems: "center",
|
|
46
|
-
display: "flex",
|
|
47
|
-
flexWrap: "wrap",
|
|
48
|
-
listStyle: "none",
|
|
49
|
-
margin: "0",
|
|
50
|
-
padding: "0",
|
|
51
|
-
wordBreak: "break-word"
|
|
52
|
-
},
|
|
53
|
-
separator: {
|
|
54
|
-
_rtl: { rotate: "180deg" },
|
|
55
|
-
color: "fg.muted"
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
className: "breadcrumb",
|
|
59
|
-
defaultVariants: {
|
|
60
|
-
size: "md",
|
|
61
|
-
variant: "plain"
|
|
62
|
-
},
|
|
63
|
-
jsx: [/^Breadcrumb(\.\w+)?$/u],
|
|
64
|
-
slots: [
|
|
65
|
-
"root",
|
|
66
|
-
"list",
|
|
67
|
-
"item",
|
|
68
|
-
"link",
|
|
69
|
-
"currentLink",
|
|
70
|
-
"separator"
|
|
71
|
-
],
|
|
72
|
-
variants: {
|
|
73
|
-
/**
|
|
74
|
-
* How big the trail is read at, which every part inherits from the root.
|
|
75
|
-
*/
|
|
76
|
-
size: onSlots({
|
|
77
|
-
list: gapSizes([
|
|
78
|
-
"xs",
|
|
79
|
-
"sm",
|
|
80
|
-
"md",
|
|
81
|
-
"lg",
|
|
82
|
-
"xl"
|
|
83
|
-
]),
|
|
84
|
-
root: textSizes("body")
|
|
85
|
-
}),
|
|
86
|
-
/**
|
|
87
|
-
* Whether a crumb above the page is underlined at rest or only under a pointer.
|
|
88
|
-
*/
|
|
89
|
-
variant: {
|
|
90
|
-
plain: {
|
|
91
|
-
currentLink: { color: "fg" },
|
|
92
|
-
link: {
|
|
93
|
-
_hover: {
|
|
94
|
-
color: "fg",
|
|
95
|
-
textDecoration: "underline"
|
|
96
|
-
},
|
|
97
|
-
color: "fg.muted"
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
underline: {
|
|
101
|
-
currentLink: { color: "fg" },
|
|
102
|
-
link: {
|
|
103
|
-
_hover: { color: "fg" },
|
|
104
|
-
color: "fg.muted",
|
|
105
|
-
textDecoration: "underline"
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
//#endregion
|
|
112
|
-
//#region src/link/recipe.ts
|
|
113
|
-
/**
|
|
114
|
-
* States what a link is: words a person follows to somewhere else, drawn in the theme's link ink
|
|
115
|
-
* and underlined either always or under a pointer.
|
|
116
|
-
*
|
|
117
|
-
* @remarks
|
|
118
|
-
* The ink, the visited ink, the cursor and the focus ring all come from the theme's own link
|
|
119
|
-
* fragment, so a theme that decides what a link looks like decides it once for every link. The
|
|
120
|
-
* box is inline so a link sits in a line of words, and it lays its content out in a row so a
|
|
121
|
-
* mark beside the words is centred on them rather than sitting on the baseline.
|
|
122
|
-
* The underline is the one thing this recipe adds. A link inside a paragraph is found by its
|
|
123
|
-
* underline as much as by its colour, and a reader who cannot tell the two inks apart has
|
|
124
|
-
* nothing else to go on, which is why colour alone is not enough to mark a link.
|
|
125
|
-
*/
|
|
126
|
-
/**
|
|
127
|
-
* Draws a link underlined under a pointer until a caller asks for one that always is.
|
|
128
|
-
*/
|
|
129
|
-
const recipe = defineRecipe({
|
|
130
|
-
base: {
|
|
131
|
-
...link(),
|
|
132
|
-
alignItems: "center",
|
|
133
|
-
borderRadius: "l1",
|
|
134
|
-
display: "inline-flex",
|
|
135
|
-
gap: "gap.xs"
|
|
136
|
-
},
|
|
137
|
-
className: "link",
|
|
138
|
-
defaultVariants: { variant: "plain" },
|
|
139
|
-
jsx: [/^Link$/u],
|
|
140
|
-
variants: {
|
|
141
|
-
/**
|
|
142
|
-
* Whether the underline is drawn at rest or only under a pointer.
|
|
143
|
-
*/
|
|
144
|
-
variant: {
|
|
145
|
-
plain: { textDecoration: "none" },
|
|
146
|
-
underline: { textDecoration: "underline" }
|
|
147
|
-
} }
|
|
148
|
-
});
|
|
149
|
-
//#endregion
|
|
150
|
-
export { recipe$1 as n, recipe as t };
|