@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.5
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/CHANGELOG.md +112 -0
- package/README.md +27 -16
- package/dist/components/accordion.d.mts +7 -22
- package/dist/components/accordion.mjs +26 -29
- package/dist/components/alert-dialog.d.mts +27 -26
- package/dist/components/alert-dialog.mjs +53 -45
- package/dist/components/alert.d.mts +12 -2
- package/dist/components/alert.mjs +15 -6
- package/dist/components/aspect-ratio.d.mts +2 -2
- package/dist/components/aspect-ratio.mjs +2 -3
- package/dist/components/avatar.d.mts +41 -5
- package/dist/components/avatar.mjs +40 -10
- package/dist/components/badge.mjs +4 -4
- package/dist/components/breadcrumb.d.mts +1 -0
- package/dist/components/breadcrumb.mjs +11 -10
- package/dist/components/button-group.d.mts +1 -1
- package/dist/components/button-group.mjs +6 -7
- package/dist/components/button.d.mts +0 -1
- package/dist/components/button.mjs +7 -7
- package/dist/components/calendar.d.mts +6 -2
- package/dist/components/calendar.mjs +39 -43
- package/dist/components/card.d.mts +4 -2
- package/dist/components/card.mjs +9 -9
- package/dist/components/carousel.d.mts +16 -4
- package/dist/components/carousel.mjs +25 -12
- package/dist/components/chart.d.mts +8 -3
- package/dist/components/chart.mjs +21 -15
- package/dist/components/checkbox-cards.mjs +6 -6
- package/dist/components/checkbox-group.mjs +6 -7
- package/dist/components/checkbox.d.mts +2 -2
- package/dist/components/checkbox.mjs +8 -9
- package/dist/components/collapsible.d.mts +4 -4
- package/dist/components/collapsible.mjs +4 -5
- package/dist/components/command.d.mts +11 -1
- package/dist/components/command.mjs +35 -32
- package/dist/components/context-menu.d.mts +22 -15
- package/dist/components/context-menu.mjs +44 -39
- package/dist/components/dialog.d.mts +19 -23
- package/dist/components/dialog.mjs +48 -47
- package/dist/components/direction.d.mts +24 -0
- package/dist/components/direction.mjs +18 -0
- package/dist/components/drawer.d.mts +2 -20
- package/dist/components/drawer.mjs +17 -25
- package/dist/components/dropdown-menu.d.mts +22 -15
- package/dist/components/dropdown-menu.mjs +41 -37
- package/dist/components/empty.mjs +5 -5
- package/dist/components/field.d.mts +1 -1
- package/dist/components/field.mjs +11 -12
- package/dist/components/form.d.mts +6 -7
- package/dist/components/form.mjs +6 -7
- package/dist/components/hover-card.d.mts +5 -5
- package/dist/components/hover-card.mjs +14 -12
- package/dist/components/input-group.d.mts +1 -1
- package/dist/components/input-group.mjs +12 -7
- package/dist/components/input-number.d.mts +3 -1
- package/dist/components/input-number.mjs +49 -27
- package/dist/components/input-otp.mjs +9 -7
- package/dist/components/input-password.mjs +1 -4
- package/dist/components/input-search.mjs +3 -5
- package/dist/components/input.mjs +1 -2
- package/dist/components/item.mjs +9 -9
- package/dist/components/kbd.mjs +1 -1
- package/dist/components/label.d.mts +2 -2
- package/dist/components/label.mjs +3 -4
- package/dist/components/menubar.d.mts +22 -16
- package/dist/components/menubar.mjs +54 -47
- package/dist/components/native-select.d.mts +5 -1
- package/dist/components/native-select.mjs +9 -6
- package/dist/components/navigation-menu.d.mts +30 -8
- package/dist/components/navigation-menu.mjs +33 -23
- package/dist/components/pagination.d.mts +6 -0
- package/dist/components/pagination.mjs +26 -11
- package/dist/components/popover.d.mts +40 -7
- package/dist/components/popover.mjs +46 -14
- package/dist/components/progress-circle.d.mts +1 -1
- package/dist/components/progress-circle.mjs +1 -2
- package/dist/components/progress.d.mts +2 -2
- package/dist/components/progress.mjs +5 -6
- package/dist/components/radio-cards.d.mts +3 -3
- package/dist/components/radio-cards.mjs +11 -11
- package/dist/components/radio-group.d.mts +3 -3
- package/dist/components/radio-group.mjs +9 -9
- package/dist/components/radio.mjs +2 -3
- package/dist/components/resizable.mjs +3 -8
- package/dist/components/scroll-area.d.mts +5 -5
- package/dist/components/scroll-area.mjs +13 -10
- package/dist/components/select.d.mts +14 -14
- package/dist/components/select.mjs +47 -47
- package/dist/components/separator.d.mts +2 -2
- package/dist/components/separator.mjs +3 -4
- package/dist/components/sheet.d.mts +13 -14
- package/dist/components/sheet.mjs +41 -39
- package/dist/components/sidebar.d.mts +2 -3
- package/dist/components/sidebar.mjs +46 -46
- package/dist/components/skeleton.mjs +1 -1
- package/dist/components/slider.d.mts +2 -2
- package/dist/components/slider.mjs +9 -11
- package/dist/components/sonner.mjs +11 -3
- package/dist/components/spinner.mjs +6 -7
- package/dist/components/switch.d.mts +5 -2
- package/dist/components/switch.mjs +7 -7
- package/dist/components/table.mjs +10 -10
- package/dist/components/tabs.d.mts +8 -5
- package/dist/components/tabs.mjs +18 -12
- package/dist/components/textarea.mjs +1 -1
- package/dist/components/toggle-group.d.mts +9 -6
- package/dist/components/toggle-group.mjs +19 -20
- package/dist/components/toggle.d.mts +2 -3
- package/dist/components/toggle.mjs +4 -6
- package/dist/components/tooltip.d.mts +7 -6
- package/dist/components/tooltip.mjs +19 -17
- package/dist/hooks/use-animated-value.mjs +0 -1
- package/dist/hooks/use-copy-to-clipboard.mjs +0 -1
- package/dist/hooks/use-is-mobile.mjs +0 -1
- package/dist/hooks/use-media-query.mjs +0 -1
- package/dist/hooks/use-mutation-observer.mjs +0 -1
- package/dist/hooks/use-pagination.mjs +0 -1
- package/dist/index.d.mts +15 -13
- package/dist/index.mjs +18 -16
- package/dist/primitives/checkbox-group.d.mts +9 -10
- package/dist/primitives/checkbox-group.mjs +14 -19
- package/dist/primitives/input-number.d.mts +3 -3
- package/dist/primitives/input-number.mjs +3 -5
- package/dist/primitives/input.d.mts +4 -4
- package/dist/primitives/input.mjs +2 -3
- package/dist/primitives/progress-circle.d.mts +3 -3
- package/dist/primitives/progress-circle.mjs +2 -3
- package/dist/variants/alert.d.mts +1 -1
- package/dist/variants/alert.mjs +3 -13
- package/dist/variants/badge.d.mts +6 -4
- package/dist/variants/badge.mjs +7 -34
- package/dist/variants/button-group.d.mts +2 -2
- package/dist/variants/button-group.mjs +3 -14
- package/dist/variants/button.d.mts +12 -10
- package/dist/variants/button.mjs +15 -57
- package/dist/variants/empty.d.mts +1 -1
- package/dist/variants/empty.mjs +2 -7
- package/dist/variants/field.d.mts +3 -3
- package/dist/variants/field.mjs +4 -22
- package/dist/variants/input-group.d.mts +9 -9
- package/dist/variants/input-group.mjs +11 -70
- package/dist/variants/input-number.d.mts +45 -0
- package/dist/variants/input-number.mjs +40 -0
- package/dist/variants/item.d.mts +5 -4
- package/dist/variants/item.mjs +9 -31
- package/dist/variants/navigation-menu.d.mts +1 -1
- package/dist/variants/navigation-menu.mjs +1 -5
- package/dist/variants/progress-circle.d.mts +1 -1
- package/dist/variants/progress-circle.mjs +1 -5
- package/dist/variants/scroll-area.d.mts +2 -2
- package/dist/variants/scroll-area.mjs +3 -8
- package/dist/variants/separator.mjs +6 -6
- package/dist/variants/sheet.d.mts +4 -4
- package/dist/variants/sheet.mjs +5 -38
- package/dist/variants/sidebar.d.mts +4 -4
- package/dist/variants/sidebar.mjs +6 -23
- package/dist/variants/tabs.d.mts +18 -0
- package/dist/variants/tabs.mjs +15 -0
- package/dist/variants/toggle.d.mts +4 -4
- package/dist/variants/toggle.mjs +9 -27
- package/package.json +27 -44
- package/src/components/accordion.tsx +26 -68
- package/src/components/alert-dialog.tsx +70 -86
- package/src/components/alert.tsx +27 -19
- package/src/components/aspect-ratio.tsx +1 -4
- package/src/components/avatar.tsx +99 -12
- package/src/components/badge.tsx +5 -8
- package/src/components/breadcrumb.tsx +18 -24
- package/src/components/button-group.tsx +10 -20
- package/src/components/button.tsx +8 -19
- package/src/components/calendar.tsx +77 -132
- package/src/components/card.tsx +16 -22
- package/src/components/carousel.tsx +40 -58
- package/src/components/chart.tsx +41 -92
- package/src/components/checkbox-cards.tsx +11 -30
- package/src/components/checkbox-group.tsx +6 -28
- package/src/components/checkbox.tsx +6 -26
- package/src/components/collapsible.tsx +1 -4
- package/src/components/command.tsx +52 -65
- package/src/components/context-menu.tsx +46 -125
- package/src/components/dialog.tsx +49 -101
- package/src/components/direction.tsx +32 -0
- package/src/components/drawer.tsx +17 -79
- package/src/components/dropdown-menu.tsx +39 -118
- package/src/components/empty.tsx +6 -20
- package/src/components/field.tsx +19 -52
- package/src/components/form.tsx +19 -61
- package/src/components/hover-card.tsx +4 -27
- package/src/components/input-group.tsx +13 -52
- package/src/components/input-number.tsx +55 -75
- package/src/components/input-otp.tsx +19 -38
- package/src/components/input-password.tsx +5 -29
- package/src/components/input-search.tsx +6 -23
- package/src/components/input.tsx +1 -17
- package/src/components/item.tsx +17 -31
- package/src/components/kbd.tsx +2 -14
- package/src/components/label.tsx +2 -10
- package/src/components/menubar.tsx +34 -125
- package/src/components/native-select.tsx +21 -30
- package/src/components/navigation-menu.tsx +34 -94
- package/src/components/pagination.tsx +28 -34
- package/src/components/popover.tsx +66 -35
- package/src/components/progress-circle.tsx +7 -25
- package/src/components/progress.tsx +3 -16
- package/src/components/radio-cards.tsx +8 -27
- package/src/components/radio-group.tsx +7 -27
- package/src/components/radio.tsx +3 -24
- package/src/components/resizable.tsx +5 -26
- package/src/components/scroll-area.tsx +12 -32
- package/src/components/select.tsx +37 -60
- package/src/components/separator.tsx +4 -18
- package/src/components/sheet.tsx +37 -74
- package/src/components/sidebar.tsx +47 -177
- package/src/components/skeleton.tsx +1 -3
- package/src/components/slider.tsx +7 -36
- package/src/components/sonner.tsx +16 -6
- package/src/components/spinner.tsx +6 -15
- package/src/components/switch.tsx +8 -30
- package/src/components/table.tsx +18 -35
- package/src/components/tabs.tsx +16 -34
- package/src/components/textarea.tsx +1 -15
- package/src/components/toggle-group.tsx +34 -38
- package/src/components/toggle.tsx +4 -13
- package/src/components/tooltip.tsx +11 -37
- package/src/css/foundation/base.css +74 -0
- package/src/css/foundation/motion.css +69 -0
- package/src/css/foundation/source.css +10 -0
- package/src/css/foundation/tokens.css +107 -0
- package/src/css/foundation/variants.css +121 -0
- package/src/css/preset.css +13 -214
- package/src/css/style.css +9 -1
- package/src/css/{amber.css → themes/amber.css} +29 -0
- package/src/css/{blue.css → themes/blue.css} +29 -0
- package/src/css/{cyan.css → themes/cyan.css} +29 -0
- package/src/css/{emerald.css → themes/emerald.css} +29 -0
- package/src/css/{fuchsia.css → themes/fuchsia.css} +29 -0
- package/src/css/{gray.css → themes/gray.css} +29 -0
- package/src/css/{green.css → themes/green.css} +29 -0
- package/src/css/{indigo.css → themes/indigo.css} +29 -0
- package/src/css/{lime.css → themes/lime.css} +29 -0
- package/src/css/{neutral.css → themes/neutral.css} +29 -0
- package/src/css/{orange.css → themes/orange.css} +29 -0
- package/src/css/{pink.css → themes/pink.css} +29 -0
- package/src/css/{purple.css → themes/purple.css} +29 -0
- package/src/css/{red.css → themes/red.css} +29 -0
- package/src/css/{rose.css → themes/rose.css} +29 -0
- package/src/css/{sky.css → themes/sky.css} +29 -0
- package/src/css/{slate.css → themes/slate.css} +29 -0
- package/src/css/{stone.css → themes/stone.css} +29 -0
- package/src/css/{teal.css → themes/teal.css} +29 -0
- package/src/css/{violet.css → themes/violet.css} +29 -0
- package/src/css/{yellow.css → themes/yellow.css} +29 -0
- package/src/css/{zinc.css → themes/zinc.css} +29 -0
- package/src/hooks/use-animated-value.ts +1 -7
- package/src/hooks/use-copy-to-clipboard.ts +1 -6
- package/src/hooks/use-is-mobile.ts +0 -2
- package/src/hooks/use-media-query.ts +0 -2
- package/src/hooks/use-mutation-observer.ts +0 -3
- package/src/hooks/use-pagination.ts +0 -2
- package/src/index.ts +39 -80
- package/src/primitives/checkbox-group.tsx +25 -39
- package/src/primitives/input-number.tsx +17 -63
- package/src/primitives/input.tsx +8 -24
- package/src/primitives/progress-circle.tsx +13 -43
- package/src/variants/alert.ts +3 -14
- package/src/variants/badge.ts +8 -35
- package/src/variants/button-group.ts +5 -18
- package/src/variants/button.ts +21 -58
- package/src/variants/empty.ts +2 -11
- package/src/variants/field.ts +6 -19
- package/src/variants/input-group.ts +12 -64
- package/src/variants/input-number.ts +65 -0
- package/src/variants/item.ts +10 -32
- package/src/variants/navigation-menu.ts +1 -8
- package/src/variants/progress-circle.ts +1 -2
- package/src/variants/scroll-area.ts +3 -9
- package/src/variants/separator.ts +6 -7
- package/src/variants/sheet.ts +6 -39
- package/src/variants/sidebar.ts +7 -27
- package/src/variants/tabs.ts +34 -0
- package/src/variants/toggle.ts +9 -28
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { cn } from "../lib/utils.mjs";
|
|
3
|
-
import { CheckIcon, ChevronRightIcon
|
|
2
|
+
import { CheckIcon, ChevronRightIcon } from "lucide-react";
|
|
3
|
+
import { Menubar as Menubar$1 } from "radix-ui";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import * as MenubarPrimitive from "@radix-ui/react-menubar";
|
|
6
5
|
//#region src/components/menubar.tsx
|
|
7
6
|
/**
|
|
8
7
|
* @since 0.3.16-canary.0
|
|
9
8
|
*/
|
|
10
9
|
function Menubar({ className, ...props }) {
|
|
11
|
-
return /* @__PURE__ */ jsx(
|
|
12
|
-
className: cn("flex items-center
|
|
10
|
+
return /* @__PURE__ */ jsx(Menubar$1.Root, {
|
|
11
|
+
className: cn("flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className),
|
|
13
12
|
"data-slot": "menubar",
|
|
14
13
|
...props
|
|
15
14
|
});
|
|
@@ -18,7 +17,7 @@ function Menubar({ className, ...props }) {
|
|
|
18
17
|
* @since 0.3.16-canary.0
|
|
19
18
|
*/
|
|
20
19
|
function MenubarMenu({ ...props }) {
|
|
21
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
+
return /* @__PURE__ */ jsx(Menubar$1.Menu, {
|
|
22
21
|
"data-slot": "menubar-menu",
|
|
23
22
|
...props
|
|
24
23
|
});
|
|
@@ -27,7 +26,7 @@ function MenubarMenu({ ...props }) {
|
|
|
27
26
|
* @since 0.3.16-canary.0
|
|
28
27
|
*/
|
|
29
28
|
function MenubarGroup({ ...props }) {
|
|
30
|
-
return /* @__PURE__ */ jsx(
|
|
29
|
+
return /* @__PURE__ */ jsx(Menubar$1.Group, {
|
|
31
30
|
"data-slot": "menubar-group",
|
|
32
31
|
...props
|
|
33
32
|
});
|
|
@@ -36,7 +35,7 @@ function MenubarGroup({ ...props }) {
|
|
|
36
35
|
* @since 0.3.16-canary.0
|
|
37
36
|
*/
|
|
38
37
|
function MenubarSub({ ...props }) {
|
|
39
|
-
return /* @__PURE__ */ jsx(
|
|
38
|
+
return /* @__PURE__ */ jsx(Menubar$1.Sub, {
|
|
40
39
|
"data-slot": "menubar-sub",
|
|
41
40
|
...props
|
|
42
41
|
});
|
|
@@ -45,7 +44,7 @@ function MenubarSub({ ...props }) {
|
|
|
45
44
|
* @since 0.3.16-canary.0
|
|
46
45
|
*/
|
|
47
46
|
function MenubarRadioGroup({ ...props }) {
|
|
48
|
-
return /* @__PURE__ */ jsx(
|
|
47
|
+
return /* @__PURE__ */ jsx(Menubar$1.RadioGroup, {
|
|
49
48
|
"data-slot": "menubar-radio-group",
|
|
50
49
|
...props
|
|
51
50
|
});
|
|
@@ -54,8 +53,8 @@ function MenubarRadioGroup({ ...props }) {
|
|
|
54
53
|
* @since 0.3.16-canary.0
|
|
55
54
|
*/
|
|
56
55
|
function MenubarTrigger({ className, ...props }) {
|
|
57
|
-
return /* @__PURE__ */ jsx(
|
|
58
|
-
className: cn("flex items-center
|
|
56
|
+
return /* @__PURE__ */ jsx(Menubar$1.Trigger, {
|
|
57
|
+
className: cn("flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className),
|
|
59
58
|
"data-slot": "menubar-trigger",
|
|
60
59
|
...props
|
|
61
60
|
});
|
|
@@ -64,43 +63,49 @@ function MenubarTrigger({ className, ...props }) {
|
|
|
64
63
|
* @since 0.3.16-canary.0
|
|
65
64
|
*/
|
|
66
65
|
function MenubarSubTrigger({ children, className, inset, ...props }) {
|
|
67
|
-
return /* @__PURE__ */ jsxs(
|
|
68
|
-
className: cn("flex items-center gap-
|
|
66
|
+
return /* @__PURE__ */ jsxs(Menubar$1.SubTrigger, {
|
|
67
|
+
className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className),
|
|
69
68
|
"data-inset": inset,
|
|
70
69
|
"data-slot": "menubar-sub-trigger",
|
|
71
70
|
...props,
|
|
72
|
-
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className:
|
|
71
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto size-4 rtl:rotate-180" })]
|
|
73
72
|
});
|
|
74
73
|
}
|
|
75
74
|
/**
|
|
76
75
|
* @since 0.3.16-canary.0
|
|
77
76
|
*/
|
|
78
77
|
function MenubarSubContent({ className, ...props }) {
|
|
79
|
-
return /* @__PURE__ */ jsx(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
78
|
+
return /* @__PURE__ */ jsx(Menubar$1.Portal, {
|
|
79
|
+
"data-slot": "menubar-portal",
|
|
80
|
+
children: /* @__PURE__ */ jsx(Menubar$1.SubContent, {
|
|
81
|
+
className: cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 ease-snappy data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2", className),
|
|
82
|
+
"data-slot": "menubar-sub-content",
|
|
83
|
+
...props
|
|
84
|
+
})
|
|
85
|
+
});
|
|
84
86
|
}
|
|
85
87
|
/**
|
|
86
88
|
* @since 0.3.16-canary.0
|
|
87
89
|
*/
|
|
88
|
-
function MenubarContent({ align = "start", alignOffset = -4, className, sideOffset =
|
|
89
|
-
return /* @__PURE__ */ jsx(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
90
|
+
function MenubarContent({ align = "start", alignOffset = -4, className, sideOffset = 8, ...props }) {
|
|
91
|
+
return /* @__PURE__ */ jsx(Menubar$1.Portal, {
|
|
92
|
+
"data-slot": "menubar-portal",
|
|
93
|
+
children: /* @__PURE__ */ jsx(Menubar$1.Content, {
|
|
94
|
+
align,
|
|
95
|
+
alignOffset,
|
|
96
|
+
className: cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 ease-snappy data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:ease-exit", className),
|
|
97
|
+
"data-slot": "menubar-content",
|
|
98
|
+
sideOffset,
|
|
99
|
+
...props
|
|
100
|
+
})
|
|
101
|
+
});
|
|
97
102
|
}
|
|
98
103
|
/**
|
|
99
104
|
* @since 0.3.16-canary.0
|
|
100
105
|
*/
|
|
101
|
-
function MenubarItem({ className, inset, variant, ...props }) {
|
|
102
|
-
return /* @__PURE__ */ jsx(
|
|
103
|
-
className: cn("group/menubar-item relative flex items-center gap-
|
|
106
|
+
function MenubarItem({ className, inset, variant = "default", ...props }) {
|
|
107
|
+
return /* @__PURE__ */ jsx(Menubar$1.Item, {
|
|
108
|
+
className: cn("group/menubar-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className),
|
|
104
109
|
"data-inset": inset,
|
|
105
110
|
"data-slot": "menubar-item",
|
|
106
111
|
"data-variant": variant,
|
|
@@ -110,29 +115,31 @@ function MenubarItem({ className, inset, variant, ...props }) {
|
|
|
110
115
|
/**
|
|
111
116
|
* @since 0.3.16-canary.0
|
|
112
117
|
*/
|
|
113
|
-
function MenubarCheckboxItem({ checked, children, className, ...props }) {
|
|
114
|
-
return /* @__PURE__ */ jsxs(
|
|
118
|
+
function MenubarCheckboxItem({ checked, children, className, inset, ...props }) {
|
|
119
|
+
return /* @__PURE__ */ jsxs(Menubar$1.CheckboxItem, {
|
|
115
120
|
checked,
|
|
116
|
-
className: cn("
|
|
121
|
+
className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
|
|
122
|
+
"data-inset": inset,
|
|
117
123
|
"data-slot": "menubar-checkbox-item",
|
|
118
124
|
...props,
|
|
119
125
|
children: [/* @__PURE__ */ jsx("span", {
|
|
120
|
-
className:
|
|
121
|
-
children: /* @__PURE__ */ jsx(
|
|
126
|
+
className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
|
|
127
|
+
children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
122
128
|
}), children]
|
|
123
129
|
});
|
|
124
130
|
}
|
|
125
131
|
/**
|
|
126
132
|
* @since 0.3.16-canary.0
|
|
127
133
|
*/
|
|
128
|
-
function MenubarRadioItem({ children, className, ...props }) {
|
|
129
|
-
return /* @__PURE__ */ jsxs(
|
|
130
|
-
className: cn("
|
|
134
|
+
function MenubarRadioItem({ children, className, inset, ...props }) {
|
|
135
|
+
return /* @__PURE__ */ jsxs(Menubar$1.RadioItem, {
|
|
136
|
+
className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
137
|
+
"data-inset": inset,
|
|
131
138
|
"data-slot": "menubar-radio-item",
|
|
132
139
|
...props,
|
|
133
140
|
children: [/* @__PURE__ */ jsx("span", {
|
|
134
|
-
className:
|
|
135
|
-
children: /* @__PURE__ */ jsx(
|
|
141
|
+
className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
|
|
142
|
+
children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
136
143
|
}), children]
|
|
137
144
|
});
|
|
138
145
|
}
|
|
@@ -140,8 +147,8 @@ function MenubarRadioItem({ children, className, ...props }) {
|
|
|
140
147
|
* @since 0.3.16-canary.0
|
|
141
148
|
*/
|
|
142
149
|
function MenubarLabel({ className, inset, ...props }) {
|
|
143
|
-
return /* @__PURE__ */ jsx(
|
|
144
|
-
className: cn("
|
|
150
|
+
return /* @__PURE__ */ jsx(Menubar$1.Label, {
|
|
151
|
+
className: cn("px-2 py-1.5 text-sm font-medium data-inset:ps-8", className),
|
|
145
152
|
"data-inset": inset,
|
|
146
153
|
"data-slot": "menubar-label",
|
|
147
154
|
...props
|
|
@@ -151,8 +158,8 @@ function MenubarLabel({ className, inset, ...props }) {
|
|
|
151
158
|
* @since 0.3.16-canary.0
|
|
152
159
|
*/
|
|
153
160
|
function MenubarSeparator({ className, ...props }) {
|
|
154
|
-
return /* @__PURE__ */ jsx(
|
|
155
|
-
className: cn("mx-
|
|
161
|
+
return /* @__PURE__ */ jsx(Menubar$1.Separator, {
|
|
162
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
156
163
|
"data-slot": "menubar-separator",
|
|
157
164
|
...props
|
|
158
165
|
});
|
|
@@ -162,7 +169,7 @@ function MenubarSeparator({ className, ...props }) {
|
|
|
162
169
|
*/
|
|
163
170
|
function MenubarShortcut({ className, ...props }) {
|
|
164
171
|
return /* @__PURE__ */ jsx("span", {
|
|
165
|
-
className: cn("
|
|
172
|
+
className: cn("ms-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className),
|
|
166
173
|
"data-slot": "menubar-shortcut",
|
|
167
174
|
...props
|
|
168
175
|
});
|
|
@@ -171,7 +178,7 @@ function MenubarShortcut({ className, ...props }) {
|
|
|
171
178
|
* @since 0.3.16-canary.0
|
|
172
179
|
*/
|
|
173
180
|
function MenubarArrow({ className, ...props }) {
|
|
174
|
-
return /* @__PURE__ */ jsx(
|
|
181
|
+
return /* @__PURE__ */ jsx(Menubar$1.Arrow, {
|
|
175
182
|
className: cn("fill-popover", className),
|
|
176
183
|
"data-slot": "menubar-arrow",
|
|
177
184
|
...props
|
|
@@ -4,12 +4,15 @@ import { ComponentProps, JSX } from "react";
|
|
|
4
4
|
/**
|
|
5
5
|
* @since 0.3.16-canary.0
|
|
6
6
|
*/
|
|
7
|
-
type NativeSelectProps = ComponentProps<"select"
|
|
7
|
+
type NativeSelectProps = Omit<ComponentProps<"select">, "size"> & {
|
|
8
|
+
size?: "default" | "sm";
|
|
9
|
+
};
|
|
8
10
|
/**
|
|
9
11
|
* @since 0.3.16-canary.0
|
|
10
12
|
*/
|
|
11
13
|
declare function NativeSelect({
|
|
12
14
|
className,
|
|
15
|
+
size,
|
|
13
16
|
...props
|
|
14
17
|
}: NativeSelectProps): JSX.Element;
|
|
15
18
|
/**
|
|
@@ -20,6 +23,7 @@ type NativeSelectOptionProps = ComponentProps<"option">;
|
|
|
20
23
|
* @since 0.3.16-canary.0
|
|
21
24
|
*/
|
|
22
25
|
declare function NativeSelectOption({
|
|
26
|
+
className,
|
|
23
27
|
...props
|
|
24
28
|
}: NativeSelectOptionProps): JSX.Element;
|
|
25
29
|
/**
|
|
@@ -5,17 +5,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
5
5
|
/**
|
|
6
6
|
* @since 0.3.16-canary.0
|
|
7
7
|
*/
|
|
8
|
-
function NativeSelect({ className, ...props }) {
|
|
8
|
+
function NativeSelect({ className, size = "default", ...props }) {
|
|
9
9
|
return /* @__PURE__ */ jsxs("div", {
|
|
10
|
-
className: cn("group/native-select relative
|
|
10
|
+
className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
|
|
11
|
+
"data-size": size,
|
|
11
12
|
"data-slot": "native-select-wrapper",
|
|
12
13
|
children: [/* @__PURE__ */ jsx("select", {
|
|
13
|
-
className:
|
|
14
|
+
className: "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
15
|
+
"data-size": size,
|
|
14
16
|
"data-slot": "native-select",
|
|
15
17
|
...props
|
|
16
18
|
}), /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
17
19
|
"aria-hidden": "true",
|
|
18
|
-
className:
|
|
20
|
+
className: "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground select-none",
|
|
19
21
|
"data-slot": "native-select-icon"
|
|
20
22
|
})]
|
|
21
23
|
});
|
|
@@ -23,8 +25,9 @@ function NativeSelect({ className, ...props }) {
|
|
|
23
25
|
/**
|
|
24
26
|
* @since 0.3.16-canary.0
|
|
25
27
|
*/
|
|
26
|
-
function NativeSelectOption({ ...props }) {
|
|
28
|
+
function NativeSelectOption({ className, ...props }) {
|
|
27
29
|
return /* @__PURE__ */ jsx("option", {
|
|
30
|
+
className: cn("bg-[Canvas] text-[CanvasText]", className),
|
|
28
31
|
"data-slot": "native-select-option",
|
|
29
32
|
...props
|
|
30
33
|
});
|
|
@@ -34,7 +37,7 @@ function NativeSelectOption({ ...props }) {
|
|
|
34
37
|
*/
|
|
35
38
|
function NativeSelectOptGroup({ className, ...props }) {
|
|
36
39
|
return /* @__PURE__ */ jsx("optgroup", {
|
|
37
|
-
className: cn(className),
|
|
40
|
+
className: cn("bg-[Canvas] text-[CanvasText]", className),
|
|
38
41
|
"data-slot": "native-select-optgroup",
|
|
39
42
|
...props
|
|
40
43
|
});
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenu$1 } from "radix-ui";
|
|
1
2
|
import { ComponentProps, JSX } from "react";
|
|
2
|
-
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
3
3
|
|
|
4
4
|
//#region src/components/navigation-menu.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* @since 0.3.16-canary.0
|
|
7
7
|
*/
|
|
8
|
-
interface NavigationMenuProps extends ComponentProps<typeof
|
|
8
|
+
interface NavigationMenuProps extends ComponentProps<typeof NavigationMenu$1.Root> {
|
|
9
9
|
viewport?: boolean;
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
@@ -20,7 +20,7 @@ declare function NavigationMenu({
|
|
|
20
20
|
/**
|
|
21
21
|
* @since 0.3.16-canary.0
|
|
22
22
|
*/
|
|
23
|
-
type NavigationMenuListProps = ComponentProps<typeof
|
|
23
|
+
type NavigationMenuListProps = ComponentProps<typeof NavigationMenu$1.List>;
|
|
24
24
|
/**
|
|
25
25
|
* @since 0.3.16-canary.0
|
|
26
26
|
*/
|
|
@@ -32,7 +32,7 @@ declare function NavigationMenuList({
|
|
|
32
32
|
/**
|
|
33
33
|
* @since 0.3.16-canary.0
|
|
34
34
|
*/
|
|
35
|
-
type NavigationMenuItemProps = ComponentProps<typeof
|
|
35
|
+
type NavigationMenuItemProps = ComponentProps<typeof NavigationMenu$1.Item>;
|
|
36
36
|
/**
|
|
37
37
|
* @since 0.3.16-canary.0
|
|
38
38
|
*/
|
|
@@ -43,7 +43,7 @@ declare function NavigationMenuItem({
|
|
|
43
43
|
/**
|
|
44
44
|
* @since 0.3.16-canary.0
|
|
45
45
|
*/
|
|
46
|
-
type NavigationMenuTriggerProps = ComponentProps<typeof
|
|
46
|
+
type NavigationMenuTriggerProps = ComponentProps<typeof NavigationMenu$1.Trigger>;
|
|
47
47
|
/**
|
|
48
48
|
* @since 0.3.16-canary.0
|
|
49
49
|
*/
|
|
@@ -55,7 +55,7 @@ declare function NavigationMenuTrigger({
|
|
|
55
55
|
/**
|
|
56
56
|
* @since 0.3.16-canary.0
|
|
57
57
|
*/
|
|
58
|
-
type NavigationMenuContentProps = ComponentProps<typeof
|
|
58
|
+
type NavigationMenuContentProps = ComponentProps<typeof NavigationMenu$1.Content>;
|
|
59
59
|
/**
|
|
60
60
|
* @since 0.3.16-canary.0
|
|
61
61
|
*/
|
|
@@ -66,7 +66,7 @@ declare function NavigationMenuContent({
|
|
|
66
66
|
/**
|
|
67
67
|
* @since 0.3.16-canary.0
|
|
68
68
|
*/
|
|
69
|
-
type NavigationMenuLinkProps = ComponentProps<typeof
|
|
69
|
+
type NavigationMenuLinkProps = ComponentProps<typeof NavigationMenu$1.Link>;
|
|
70
70
|
/**
|
|
71
71
|
* @since 0.3.16-canary.0
|
|
72
72
|
*/
|
|
@@ -74,5 +74,27 @@ declare function NavigationMenuLink({
|
|
|
74
74
|
className,
|
|
75
75
|
...props
|
|
76
76
|
}: NavigationMenuLinkProps): JSX.Element;
|
|
77
|
+
/**
|
|
78
|
+
* @since 0.4.0-canary.4
|
|
79
|
+
*/
|
|
80
|
+
type NavigationMenuViewportProps = ComponentProps<typeof NavigationMenu$1.Viewport>;
|
|
81
|
+
/**
|
|
82
|
+
* @since 0.4.0-canary.4
|
|
83
|
+
*/
|
|
84
|
+
declare function NavigationMenuViewport({
|
|
85
|
+
className,
|
|
86
|
+
...props
|
|
87
|
+
}: NavigationMenuViewportProps): JSX.Element;
|
|
88
|
+
/**
|
|
89
|
+
* @since 0.4.0-canary.4
|
|
90
|
+
*/
|
|
91
|
+
type NavigationMenuIndicatorProps = ComponentProps<typeof NavigationMenu$1.Indicator>;
|
|
92
|
+
/**
|
|
93
|
+
* @since 0.4.0-canary.4
|
|
94
|
+
*/
|
|
95
|
+
declare function NavigationMenuIndicator({
|
|
96
|
+
className,
|
|
97
|
+
...props
|
|
98
|
+
}: NavigationMenuIndicatorProps): JSX.Element;
|
|
77
99
|
//#endregion
|
|
78
|
-
export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps };
|
|
100
|
+
export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps };
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.mjs";
|
|
2
2
|
import { navigationMenuTriggerVariants } from "../variants/navigation-menu.mjs";
|
|
3
3
|
import { ChevronDownIcon } from "lucide-react";
|
|
4
|
+
import { NavigationMenu as NavigationMenu$1 } from "radix-ui";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
6
6
|
//#region src/components/navigation-menu.tsx
|
|
7
7
|
/**
|
|
8
8
|
* @since 0.3.16-canary.0
|
|
9
9
|
*/
|
|
10
10
|
function NavigationMenu({ children, className, viewport = true, ...props }) {
|
|
11
|
-
return /* @__PURE__ */ jsxs(
|
|
11
|
+
return /* @__PURE__ */ jsxs(NavigationMenu$1.Root, {
|
|
12
12
|
className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
|
|
13
13
|
"data-slot": "navigation-menu",
|
|
14
14
|
"data-viewport": viewport,
|
|
@@ -20,8 +20,8 @@ function NavigationMenu({ children, className, viewport = true, ...props }) {
|
|
|
20
20
|
* @since 0.3.16-canary.0
|
|
21
21
|
*/
|
|
22
22
|
function NavigationMenuList({ children, className, ...props }) {
|
|
23
|
-
return /* @__PURE__ */ jsxs(
|
|
24
|
-
className: cn("flex flex-1 items-center justify-center gap-
|
|
23
|
+
return /* @__PURE__ */ jsxs(NavigationMenu$1.List, {
|
|
24
|
+
className: cn("group flex flex-1 list-none items-center justify-center gap-0", className),
|
|
25
25
|
"data-slot": "navigation-menu-list",
|
|
26
26
|
...props,
|
|
27
27
|
children: [children, /* @__PURE__ */ jsx(NavigationMenuIndicator, { className: "invisible" })]
|
|
@@ -31,8 +31,8 @@ function NavigationMenuList({ children, className, ...props }) {
|
|
|
31
31
|
* @since 0.3.16-canary.0
|
|
32
32
|
*/
|
|
33
33
|
function NavigationMenuItem({ className, ...props }) {
|
|
34
|
-
return /* @__PURE__ */ jsx(
|
|
35
|
-
className: cn("
|
|
34
|
+
return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
|
|
35
|
+
className: cn("relative", className),
|
|
36
36
|
"data-slot": "navigation-menu-item",
|
|
37
37
|
...props
|
|
38
38
|
});
|
|
@@ -41,22 +41,26 @@ function NavigationMenuItem({ className, ...props }) {
|
|
|
41
41
|
* @since 0.3.16-canary.0
|
|
42
42
|
*/
|
|
43
43
|
function NavigationMenuTrigger({ children, className, ...props }) {
|
|
44
|
-
return /* @__PURE__ */ jsxs(
|
|
45
|
-
className: navigationMenuTriggerVariants({ className }),
|
|
44
|
+
return /* @__PURE__ */ jsxs(NavigationMenu$1.Trigger, {
|
|
45
|
+
className: navigationMenuTriggerVariants({ className: ["group", className] }),
|
|
46
46
|
"data-slot": "navigation-menu-trigger",
|
|
47
47
|
...props,
|
|
48
|
-
children: [
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
children: [
|
|
49
|
+
children,
|
|
50
|
+
" ",
|
|
51
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
52
|
+
"aria-hidden": "true",
|
|
53
|
+
className: "relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
|
|
54
|
+
})
|
|
55
|
+
]
|
|
52
56
|
});
|
|
53
57
|
}
|
|
54
58
|
/**
|
|
55
59
|
* @since 0.3.16-canary.0
|
|
56
60
|
*/
|
|
57
61
|
function NavigationMenuContent({ className, ...props }) {
|
|
58
|
-
return /* @__PURE__ */ jsx(
|
|
59
|
-
className: cn("
|
|
62
|
+
return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
|
|
63
|
+
className: cn("start-0 top-0 w-full p-2 pe-2.5 ease-snappy 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:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:animation-duration-300 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 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:ease-exit data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 data-closed:ease-exit group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className),
|
|
60
64
|
"data-slot": "navigation-menu-content",
|
|
61
65
|
...props
|
|
62
66
|
});
|
|
@@ -65,29 +69,35 @@ function NavigationMenuContent({ className, ...props }) {
|
|
|
65
69
|
* @since 0.3.16-canary.0
|
|
66
70
|
*/
|
|
67
71
|
function NavigationMenuLink({ className, ...props }) {
|
|
68
|
-
return /* @__PURE__ */ jsx(
|
|
69
|
-
className: cn("flex
|
|
72
|
+
return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
|
|
73
|
+
className: cn("flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className),
|
|
70
74
|
"data-slot": "navigation-menu-link",
|
|
71
75
|
...props
|
|
72
76
|
});
|
|
73
77
|
}
|
|
78
|
+
/**
|
|
79
|
+
* @since 0.4.0-canary.4
|
|
80
|
+
*/
|
|
74
81
|
function NavigationMenuViewport({ className, ...props }) {
|
|
75
82
|
return /* @__PURE__ */ jsx("div", {
|
|
76
|
-
className:
|
|
77
|
-
children: /* @__PURE__ */ jsx(
|
|
78
|
-
className: cn("relative
|
|
83
|
+
className: "absolute start-0 top-full isolate z-50 flex justify-center",
|
|
84
|
+
children: /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
|
|
85
|
+
className: cn("relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[width,height] duration-100 ease-snappy md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:animation-duration-100 data-open:zoom-in-90 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-100 data-closed:zoom-out-90", className),
|
|
79
86
|
"data-slot": "navigation-menu-viewport",
|
|
80
87
|
...props
|
|
81
88
|
})
|
|
82
89
|
});
|
|
83
90
|
}
|
|
91
|
+
/**
|
|
92
|
+
* @since 0.4.0-canary.4
|
|
93
|
+
*/
|
|
84
94
|
function NavigationMenuIndicator({ className, ...props }) {
|
|
85
|
-
return /* @__PURE__ */ jsx(
|
|
86
|
-
className: cn("top-full z-
|
|
95
|
+
return /* @__PURE__ */ jsx(NavigationMenu$1.Indicator, {
|
|
96
|
+
className: cn("top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-hidden:animate-out data-hidden:fade-out data-visible:animate-in data-visible:fade-in", className),
|
|
87
97
|
"data-slot": "navigation-menu-indicator",
|
|
88
98
|
...props,
|
|
89
|
-
children: /* @__PURE__ */ jsx("div", { className:
|
|
99
|
+
children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm bg-border shadow-md" })
|
|
90
100
|
});
|
|
91
101
|
}
|
|
92
102
|
//#endregion
|
|
93
|
-
export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger };
|
|
103
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport };
|
|
@@ -54,11 +54,14 @@ declare function PaginationLink({
|
|
|
54
54
|
*/
|
|
55
55
|
interface PaginationPreviousProps extends ComponentProps<"a">, Pick<VariantProps<typeof buttonVariants>, "size"> {
|
|
56
56
|
isActive?: boolean;
|
|
57
|
+
text?: string;
|
|
57
58
|
}
|
|
58
59
|
/**
|
|
59
60
|
* @since 0.3.16-canary.0
|
|
60
61
|
*/
|
|
61
62
|
declare function PaginationPrevious({
|
|
63
|
+
className,
|
|
64
|
+
text,
|
|
62
65
|
...props
|
|
63
66
|
}: PaginationPreviousProps): JSX.Element;
|
|
64
67
|
/**
|
|
@@ -66,11 +69,14 @@ declare function PaginationPrevious({
|
|
|
66
69
|
*/
|
|
67
70
|
interface PaginationNextProps extends ComponentProps<"a">, Pick<VariantProps<typeof buttonVariants>, "size"> {
|
|
68
71
|
isActive?: boolean;
|
|
72
|
+
text?: string;
|
|
69
73
|
}
|
|
70
74
|
/**
|
|
71
75
|
* @since 0.3.16-canary.0
|
|
72
76
|
*/
|
|
73
77
|
declare function PaginationNext({
|
|
78
|
+
className,
|
|
79
|
+
text,
|
|
74
80
|
...props
|
|
75
81
|
}: PaginationNextProps): JSX.Element;
|
|
76
82
|
/**
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.mjs";
|
|
2
2
|
import { buttonVariants } from "../variants/button.mjs";
|
|
3
|
-
import { ChevronLeftIcon, ChevronRightIcon,
|
|
3
|
+
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/pagination.tsx
|
|
6
6
|
/**
|
|
@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
9
9
|
function Pagination({ className, ...props }) {
|
|
10
10
|
return /* @__PURE__ */ jsx("nav", {
|
|
11
11
|
"aria-label": "pagination",
|
|
12
|
-
className: cn("flex w-full justify-center",
|
|
12
|
+
className: cn("mx-auto flex w-full justify-center", className),
|
|
13
13
|
"data-slot": "pagination",
|
|
14
14
|
...props
|
|
15
15
|
});
|
|
@@ -19,7 +19,7 @@ function Pagination({ className, ...props }) {
|
|
|
19
19
|
*/
|
|
20
20
|
function PaginationContent({ className, ...props }) {
|
|
21
21
|
return /* @__PURE__ */ jsx("ul", {
|
|
22
|
-
className: cn("flex
|
|
22
|
+
className: cn("flex items-center gap-1", className),
|
|
23
23
|
"data-slot": "pagination-content",
|
|
24
24
|
...props
|
|
25
25
|
});
|
|
@@ -44,6 +44,7 @@ function PaginationLink({ children, className, isActive, size = "icon", ...props
|
|
|
44
44
|
size,
|
|
45
45
|
variant: isActive ? "outline" : "ghost"
|
|
46
46
|
}),
|
|
47
|
+
"data-active": isActive,
|
|
47
48
|
"data-slot": "pagination-link",
|
|
48
49
|
...props,
|
|
49
50
|
children
|
|
@@ -52,25 +53,39 @@ function PaginationLink({ children, className, isActive, size = "icon", ...props
|
|
|
52
53
|
/**
|
|
53
54
|
* @since 0.3.16-canary.0
|
|
54
55
|
*/
|
|
55
|
-
function PaginationPrevious({ ...props }) {
|
|
56
|
+
function PaginationPrevious({ className, text = "Previous", ...props }) {
|
|
56
57
|
return /* @__PURE__ */ jsxs(PaginationLink, {
|
|
57
58
|
"aria-label": "Go to previous page",
|
|
59
|
+
className: cn("ps-2!", className),
|
|
58
60
|
"data-slot": "pagination-previous",
|
|
59
|
-
size: "
|
|
61
|
+
size: "default",
|
|
60
62
|
...props,
|
|
61
|
-
children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {
|
|
63
|
+
children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {
|
|
64
|
+
className: "rtl:rotate-180",
|
|
65
|
+
"data-icon": "inline-start"
|
|
66
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
67
|
+
className: "hidden sm:block",
|
|
68
|
+
children: text
|
|
69
|
+
})]
|
|
62
70
|
});
|
|
63
71
|
}
|
|
64
72
|
/**
|
|
65
73
|
* @since 0.3.16-canary.0
|
|
66
74
|
*/
|
|
67
|
-
function PaginationNext({ ...props }) {
|
|
75
|
+
function PaginationNext({ className, text = "Next", ...props }) {
|
|
68
76
|
return /* @__PURE__ */ jsxs(PaginationLink, {
|
|
69
77
|
"aria-label": "Go to next page",
|
|
78
|
+
className: cn("pe-2!", className),
|
|
70
79
|
"data-slot": "pagination-next",
|
|
71
|
-
size: "
|
|
80
|
+
size: "default",
|
|
72
81
|
...props,
|
|
73
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
82
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
83
|
+
className: "hidden sm:block",
|
|
84
|
+
children: text
|
|
85
|
+
}), /* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
86
|
+
className: "rtl:rotate-180",
|
|
87
|
+
"data-icon": "inline-end"
|
|
88
|
+
})]
|
|
74
89
|
});
|
|
75
90
|
}
|
|
76
91
|
/**
|
|
@@ -79,10 +94,10 @@ function PaginationNext({ ...props }) {
|
|
|
79
94
|
function PaginationEllipsis({ className, ...props }) {
|
|
80
95
|
return /* @__PURE__ */ jsxs("span", {
|
|
81
96
|
"aria-hidden": true,
|
|
82
|
-
className: cn("flex size-
|
|
97
|
+
className: cn("flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className),
|
|
83
98
|
"data-slot": "pagination-ellipsis",
|
|
84
99
|
...props,
|
|
85
|
-
children: [/* @__PURE__ */ jsx(
|
|
100
|
+
children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
86
101
|
className: "sr-only",
|
|
87
102
|
children: "More pages"
|
|
88
103
|
})]
|