@stackshift-ui/menu 1.0.0-beta.1 → 1.0.0-beta.4
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/chunk-4KX77JJZ.mjs +199 -0
- package/package.json +6 -6
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
// src/menu.tsx
|
|
2
|
+
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { ChevronDownIcon } from "lucide-react";
|
|
5
|
+
import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
var displayName = "NavigationMenu";
|
|
8
|
+
var displayNameList = "NavigationMenuList";
|
|
9
|
+
var displayNameItem = "NavigationMenuItem";
|
|
10
|
+
var displayNameTrigger = "NavigationMenuTrigger";
|
|
11
|
+
var displayNameContent = "NavigationMenuContent";
|
|
12
|
+
var displayNameLink = "NavigationMenuLink";
|
|
13
|
+
var displayNameIndicator = "NavigationMenuIndicator";
|
|
14
|
+
var displayNameViewport = "NavigationMenuViewport";
|
|
15
|
+
function NavigationMenu({
|
|
16
|
+
className,
|
|
17
|
+
children,
|
|
18
|
+
viewport = true,
|
|
19
|
+
...props
|
|
20
|
+
}) {
|
|
21
|
+
const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
22
|
+
return /* @__PURE__ */ jsxs(
|
|
23
|
+
Component,
|
|
24
|
+
{
|
|
25
|
+
as: NavigationMenuPrimitive.Root,
|
|
26
|
+
"data-slot": "navigation-menu",
|
|
27
|
+
"data-viewport": viewport,
|
|
28
|
+
className: cn(
|
|
29
|
+
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
|
30
|
+
className
|
|
31
|
+
),
|
|
32
|
+
...props,
|
|
33
|
+
children: [
|
|
34
|
+
children,
|
|
35
|
+
viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
NavigationMenu.displayName = displayName;
|
|
41
|
+
function NavigationMenuList({
|
|
42
|
+
className,
|
|
43
|
+
...props
|
|
44
|
+
}) {
|
|
45
|
+
const { [displayNameList]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
46
|
+
return /* @__PURE__ */ jsx(
|
|
47
|
+
Component,
|
|
48
|
+
{
|
|
49
|
+
as: NavigationMenuPrimitive.List,
|
|
50
|
+
"data-slot": "navigation-menu-list",
|
|
51
|
+
className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
|
|
52
|
+
...props
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
NavigationMenuList.displayName = displayNameList;
|
|
57
|
+
function NavigationMenuItem({
|
|
58
|
+
className,
|
|
59
|
+
...props
|
|
60
|
+
}) {
|
|
61
|
+
const { [displayNameItem]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
62
|
+
return /* @__PURE__ */ jsx(
|
|
63
|
+
Component,
|
|
64
|
+
{
|
|
65
|
+
as: NavigationMenuPrimitive.Item,
|
|
66
|
+
"data-slot": "navigation-menu-item",
|
|
67
|
+
className: cn("relative", className),
|
|
68
|
+
...props
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
NavigationMenuItem.displayName = displayNameItem;
|
|
73
|
+
var navigationMenuTriggerStyle = cva(
|
|
74
|
+
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
|
|
75
|
+
);
|
|
76
|
+
function NavigationMenuTrigger({
|
|
77
|
+
className,
|
|
78
|
+
children,
|
|
79
|
+
...props
|
|
80
|
+
}) {
|
|
81
|
+
const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
82
|
+
return /* @__PURE__ */ jsxs(
|
|
83
|
+
Component,
|
|
84
|
+
{
|
|
85
|
+
as: NavigationMenuPrimitive.Trigger,
|
|
86
|
+
"data-slot": "navigation-menu-trigger",
|
|
87
|
+
className: cn(navigationMenuTriggerStyle(), "group", className),
|
|
88
|
+
...props,
|
|
89
|
+
children: [
|
|
90
|
+
children,
|
|
91
|
+
" ",
|
|
92
|
+
/* @__PURE__ */ jsx(
|
|
93
|
+
ChevronDownIcon,
|
|
94
|
+
{
|
|
95
|
+
className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
|
|
96
|
+
"aria-hidden": "true"
|
|
97
|
+
}
|
|
98
|
+
)
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
NavigationMenuTrigger.displayName = displayNameTrigger;
|
|
104
|
+
function NavigationMenuContent({
|
|
105
|
+
className,
|
|
106
|
+
...props
|
|
107
|
+
}) {
|
|
108
|
+
const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
109
|
+
return /* @__PURE__ */ jsx(
|
|
110
|
+
Component,
|
|
111
|
+
{
|
|
112
|
+
as: NavigationMenuPrimitive.Content,
|
|
113
|
+
"data-slot": "navigation-menu-content",
|
|
114
|
+
className: cn(
|
|
115
|
+
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
|
116
|
+
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
|
117
|
+
className
|
|
118
|
+
),
|
|
119
|
+
...props
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
NavigationMenuContent.displayName = displayNameContent;
|
|
124
|
+
function NavigationMenuViewport({
|
|
125
|
+
className,
|
|
126
|
+
...props
|
|
127
|
+
}) {
|
|
128
|
+
const { [displayNameViewport]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
129
|
+
return /* @__PURE__ */ jsx(
|
|
130
|
+
Component,
|
|
131
|
+
{
|
|
132
|
+
className: cn("absolute top-full left-0 isolate z-50 flex justify-center"),
|
|
133
|
+
...props,
|
|
134
|
+
children: /* @__PURE__ */ jsx(
|
|
135
|
+
NavigationMenuPrimitive.Viewport,
|
|
136
|
+
{
|
|
137
|
+
"data-slot": "navigation-menu-viewport",
|
|
138
|
+
className: cn(
|
|
139
|
+
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
|
140
|
+
className
|
|
141
|
+
),
|
|
142
|
+
...props
|
|
143
|
+
}
|
|
144
|
+
)
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
NavigationMenuViewport.displayName = displayNameViewport;
|
|
149
|
+
function NavigationMenuLink({
|
|
150
|
+
className,
|
|
151
|
+
...props
|
|
152
|
+
}) {
|
|
153
|
+
const { [displayNameLink]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
154
|
+
return /* @__PURE__ */ jsx(
|
|
155
|
+
Component,
|
|
156
|
+
{
|
|
157
|
+
as: NavigationMenuPrimitive.Link,
|
|
158
|
+
"data-slot": "navigation-menu-link",
|
|
159
|
+
className: cn(
|
|
160
|
+
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
|
161
|
+
className
|
|
162
|
+
),
|
|
163
|
+
...props
|
|
164
|
+
}
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
NavigationMenuLink.displayName = displayNameLink;
|
|
168
|
+
function NavigationMenuIndicator({
|
|
169
|
+
className,
|
|
170
|
+
...props
|
|
171
|
+
}) {
|
|
172
|
+
const { [displayNameIndicator]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
173
|
+
return /* @__PURE__ */ jsx(
|
|
174
|
+
Component,
|
|
175
|
+
{
|
|
176
|
+
as: NavigationMenuPrimitive.Indicator,
|
|
177
|
+
"data-slot": "navigation-menu-indicator",
|
|
178
|
+
className: cn(
|
|
179
|
+
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
|
180
|
+
className
|
|
181
|
+
),
|
|
182
|
+
...props,
|
|
183
|
+
children: /* @__PURE__ */ jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" })
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
NavigationMenuIndicator.displayName = displayNameIndicator;
|
|
188
|
+
|
|
189
|
+
export {
|
|
190
|
+
NavigationMenu,
|
|
191
|
+
NavigationMenuList,
|
|
192
|
+
NavigationMenuItem,
|
|
193
|
+
navigationMenuTriggerStyle,
|
|
194
|
+
NavigationMenuTrigger,
|
|
195
|
+
NavigationMenuContent,
|
|
196
|
+
NavigationMenuViewport,
|
|
197
|
+
NavigationMenuLink,
|
|
198
|
+
NavigationMenuIndicator
|
|
199
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackshift-ui/menu",
|
|
3
3
|
"description": "A collection of links for navigating websites.",
|
|
4
|
-
"version": "1.0.0-beta.
|
|
4
|
+
"version": "1.0.0-beta.4",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"main": "./dist/index.js",
|
|
@@ -29,19 +29,19 @@
|
|
|
29
29
|
"typescript": "^5.6.2",
|
|
30
30
|
"vite-tsconfig-paths": "^5.0.1",
|
|
31
31
|
"vitest": "^2.1.1",
|
|
32
|
-
"@stackshift-ui/
|
|
33
|
-
"@stackshift-ui/
|
|
32
|
+
"@stackshift-ui/typescript-config": "6.0.10",
|
|
33
|
+
"@stackshift-ui/eslint-config": "6.0.10"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@radix-ui/react-navigation-menu": "^1.2.13",
|
|
37
37
|
"class-variance-authority": "^0.7.1",
|
|
38
38
|
"classnames": "^2.5.1",
|
|
39
39
|
"lucide-react": "^0.468.0",
|
|
40
|
-
"@stackshift-ui/scripts": "6.1.0-beta.
|
|
41
|
-
"@stackshift-ui/system": "6.1.0-beta.
|
|
40
|
+
"@stackshift-ui/scripts": "6.1.0-beta.2",
|
|
41
|
+
"@stackshift-ui/system": "6.1.0-beta.3"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"@stackshift-ui/system": ">=6.1.0-beta.
|
|
44
|
+
"@stackshift-ui/system": ">=6.1.0-beta.3",
|
|
45
45
|
"@types/react": "16.8 - 19",
|
|
46
46
|
"next": "10 - 14",
|
|
47
47
|
"react": "16.8 - 19",
|