@jinaan/uikit 0.1.12 → 0.1.14
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/dropdown-menu.d.ts +5 -0
- package/dist/dropdown-menu.d.ts.map +1 -1
- package/dist/index.js +508 -466
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/dropdown-menu.tsx +49 -1
package/package.json
CHANGED
package/src/dropdown-menu.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
2
|
-
import { Check } from "@phosphor-icons/react";
|
|
2
|
+
import { CaretRight, Check } from "@phosphor-icons/react";
|
|
3
3
|
import {
|
|
4
4
|
createContext,
|
|
5
5
|
forwardRef,
|
|
@@ -22,6 +22,7 @@ export function DropdownMenu({
|
|
|
22
22
|
countDescendants(children, [
|
|
23
23
|
DropdownMenuItem,
|
|
24
24
|
DropdownMenuCheckboxItem,
|
|
25
|
+
DropdownMenuSubTrigger,
|
|
25
26
|
]) === 0;
|
|
26
27
|
|
|
27
28
|
return (
|
|
@@ -129,6 +130,53 @@ export const DropdownMenuLabel = forwardRef<
|
|
|
129
130
|
));
|
|
130
131
|
DropdownMenuLabel.displayName = "DropdownMenuLabel";
|
|
131
132
|
|
|
133
|
+
export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
|
134
|
+
|
|
135
|
+
export const DropdownMenuSubTrigger = forwardRef<
|
|
136
|
+
ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
|
137
|
+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
138
|
+
inset?: boolean;
|
|
139
|
+
}
|
|
140
|
+
>(({ className, inset, children, ...props }, ref) => (
|
|
141
|
+
<DropdownMenuPrimitive.SubTrigger
|
|
142
|
+
ref={ref}
|
|
143
|
+
className={cn(
|
|
144
|
+
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-fg outline-none transition-colors",
|
|
145
|
+
"focus:bg-(--menu-highlight) data-[state=open]:bg-(--menu-highlight)",
|
|
146
|
+
"[&_svg]:size-4 [&_svg]:text-muted",
|
|
147
|
+
inset && "pl-8",
|
|
148
|
+
className,
|
|
149
|
+
)}
|
|
150
|
+
{...props}
|
|
151
|
+
>
|
|
152
|
+
{children}
|
|
153
|
+
<CaretRight className="ml-auto shrink-0" />
|
|
154
|
+
</DropdownMenuPrimitive.SubTrigger>
|
|
155
|
+
));
|
|
156
|
+
DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
|
|
157
|
+
|
|
158
|
+
export const DropdownMenuSubContent = forwardRef<
|
|
159
|
+
ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
|
160
|
+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
|
161
|
+
>(({ className, ...props }, ref) => (
|
|
162
|
+
<DropdownMenuPrimitive.SubContent
|
|
163
|
+
ref={ref}
|
|
164
|
+
sideOffset={8}
|
|
165
|
+
className={cn(
|
|
166
|
+
"menu-surface btn-inner-border z-50 min-w-48 overflow-hidden rounded-lg border border-line bg-(--button-secondary-bg) p-1",
|
|
167
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
168
|
+
"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
|
|
169
|
+
"data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
|
|
170
|
+
"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
|
|
171
|
+
"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
|
|
172
|
+
"duration-150 ease-out",
|
|
173
|
+
className,
|
|
174
|
+
)}
|
|
175
|
+
{...props}
|
|
176
|
+
/>
|
|
177
|
+
));
|
|
178
|
+
DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
|
|
179
|
+
|
|
132
180
|
export const DropdownMenuSeparator = forwardRef<
|
|
133
181
|
ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
|
134
182
|
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|