orbital-ds 0.1.1 → 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/AGENTS.md +57 -0
- package/README.md +22 -14
- package/components.manifest.json +1255 -0
- package/contract.json +82 -0
- package/dist/styles.css +486 -347
- package/dist/themes/qratia.css +14 -14
- package/dist/themes/qratia.fonts.css +2 -0
- package/dist/themes/qratia.scoped.css +247 -0
- package/dist/themes/zyro.css +343 -0
- package/dist/themes/zyro.fonts.css +2 -0
- package/dist/themes/zyro.scoped.css +343 -0
- package/dist/ui/accordion.d.ts +9 -0
- package/dist/ui/accordion.js +79 -0
- package/dist/ui/alert-dialog.d.ts +23 -0
- package/dist/ui/alert-dialog.js +173 -0
- package/dist/ui/alert.d.ts +13 -0
- package/dist/ui/alert.js +77 -0
- package/dist/ui/aspect-ratio.d.ts +7 -0
- package/dist/ui/aspect-ratio.js +22 -0
- package/dist/ui/attachment.d.ts +26 -0
- package/dist/ui/attachment.js +197 -0
- package/dist/ui/avatar.js +1 -1
- package/dist/ui/badge.d.ts +1 -1
- package/dist/ui/badge.js +1 -1
- package/dist/ui/bubble.d.ts +19 -0
- package/dist/ui/bubble.js +115 -0
- package/dist/ui/button-group.d.ts +15 -0
- package/dist/ui/button-group.js +82 -0
- package/dist/ui/button.d.ts +5 -3
- package/dist/ui/button.js +9 -6
- package/dist/ui/calendar.d.ts +15 -0
- package/dist/ui/calendar.js +190 -0
- package/dist/ui/card.js +4 -4
- package/dist/ui/carousel.d.ts +33 -0
- package/dist/ui/carousel.js +199 -0
- package/dist/ui/checkbox.js +1 -1
- package/dist/ui/combobox.d.ts +26 -0
- package/dist/ui/combobox.js +281 -0
- package/dist/ui/command.d.ts +22 -0
- package/dist/ui/command.js +183 -0
- package/dist/ui/context-menu.d.ts +31 -0
- package/dist/ui/context-menu.js +242 -0
- package/dist/ui/dialog.js +2 -2
- package/dist/ui/direction.d.ts +1 -0
- package/dist/ui/direction.js +8 -0
- package/dist/ui/drawer.d.ts +18 -0
- package/dist/ui/drawer.js +208 -0
- package/dist/ui/dropdown-menu.d.ts +1 -1
- package/dist/ui/dropdown-menu.js +13 -9
- package/dist/ui/empty.d.ts +15 -0
- package/dist/ui/empty.js +102 -0
- package/dist/ui/field.d.ts +28 -0
- package/dist/ui/field.js +217 -0
- package/dist/ui/hover-card.d.ts +8 -0
- package/dist/ui/hover-card.js +45 -0
- package/dist/ui/input-group.d.ts +22 -0
- package/dist/ui/input-group.js +145 -0
- package/dist/ui/input-otp.d.ts +13 -0
- package/dist/ui/input-otp.js +82 -0
- package/dist/ui/input.js +1 -1
- package/dist/ui/item.d.ts +26 -0
- package/dist/ui/item.js +195 -0
- package/dist/ui/kbd.d.ts +6 -0
- package/dist/ui/kbd.js +29 -0
- package/dist/ui/marker.d.ts +13 -0
- package/dist/ui/marker.js +71 -0
- package/dist/ui/menubar.d.ts +31 -0
- package/dist/ui/menubar.js +259 -0
- package/dist/ui/message-scroller.d.ts +16 -0
- package/dist/ui/message-scroller.js +120 -0
- package/dist/ui/message.d.ts +12 -0
- package/dist/ui/message.js +90 -0
- package/dist/ui/native-select.d.ts +10 -0
- package/dist/ui/native-select.js +63 -0
- package/dist/ui/navigation-menu.d.ts +15 -0
- package/dist/ui/navigation-menu.js +162 -0
- package/dist/ui/pagination.d.ts +22 -0
- package/dist/ui/pagination.js +128 -0
- package/dist/ui/popover.js +2 -2
- package/dist/ui/questionnaire.d.ts +24 -0
- package/dist/ui/questionnaire.js +331 -0
- package/dist/ui/radio-group.d.ts +8 -0
- package/dist/ui/radio-group.js +39 -0
- package/dist/ui/resizable.d.ts +10 -0
- package/dist/ui/resizable.js +46 -0
- package/dist/ui/scroll-area.js +1 -1
- package/dist/ui/select.js +5 -5
- package/dist/ui/sheet.js +4 -4
- package/dist/ui/sidebar.js +8 -8
- package/dist/ui/slider.d.ts +6 -0
- package/dist/ui/slider.js +53 -0
- package/dist/ui/spinner.d.ts +5 -0
- package/dist/ui/spinner.js +9 -0
- package/dist/ui/switch.d.ts +8 -0
- package/dist/ui/switch.js +32 -0
- package/dist/ui/table.js +2 -2
- package/dist/ui/tabs.d.ts +1 -1
- package/dist/ui/tabs.js +1 -1
- package/dist/ui/textarea.js +1 -1
- package/dist/ui/toast.d.ts +19 -0
- package/dist/ui/toast.js +193 -0
- package/dist/ui/toggle-group.d.ts +14 -0
- package/dist/ui/toggle-group.js +77 -0
- package/dist/ui/toggle.d.ts +12 -0
- package/dist/ui/toggle.js +43 -0
- package/dist/ui/tooltip.js +3 -3
- package/docs/CONTRACT.md +123 -0
- package/package.json +138 -95
- package/scripts/doctor.mjs +202 -0
- package/scripts/manifest.mjs +79 -0
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import {
|
|
3
|
+
MessageScroller as MessageScrollerPrimitive,
|
|
4
|
+
useMessageScroller,
|
|
5
|
+
useMessageScrollerScrollable,
|
|
6
|
+
useMessageScrollerVisibility
|
|
7
|
+
} from "@shadcn/react/message-scroller";
|
|
8
|
+
import { cn } from "../lib/utils";
|
|
9
|
+
import { Button } from "./button";
|
|
10
|
+
import { ArrowDownIcon } from "lucide-react";
|
|
11
|
+
function MessageScrollerProvider(props) {
|
|
12
|
+
return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Provider, { ...props });
|
|
13
|
+
}
|
|
14
|
+
function MessageScroller({
|
|
15
|
+
className,
|
|
16
|
+
...props
|
|
17
|
+
}) {
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
MessageScrollerPrimitive.Root,
|
|
20
|
+
{
|
|
21
|
+
"data-slot": "message-scroller",
|
|
22
|
+
className: cn(
|
|
23
|
+
"group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
|
|
24
|
+
className
|
|
25
|
+
),
|
|
26
|
+
...props
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
function MessageScrollerViewport({
|
|
31
|
+
className,
|
|
32
|
+
...props
|
|
33
|
+
}) {
|
|
34
|
+
return /* @__PURE__ */ jsx(
|
|
35
|
+
MessageScrollerPrimitive.Viewport,
|
|
36
|
+
{
|
|
37
|
+
"data-slot": "message-scroller-viewport",
|
|
38
|
+
className: cn(
|
|
39
|
+
"size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
|
|
40
|
+
className
|
|
41
|
+
),
|
|
42
|
+
...props
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
function MessageScrollerContent({
|
|
47
|
+
className,
|
|
48
|
+
...props
|
|
49
|
+
}) {
|
|
50
|
+
return /* @__PURE__ */ jsx(
|
|
51
|
+
MessageScrollerPrimitive.Content,
|
|
52
|
+
{
|
|
53
|
+
"data-slot": "message-scroller-content",
|
|
54
|
+
className: cn("flex h-max min-h-full flex-col gap-8", className),
|
|
55
|
+
...props
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
function MessageScrollerItem({
|
|
60
|
+
className,
|
|
61
|
+
scrollAnchor = false,
|
|
62
|
+
...props
|
|
63
|
+
}) {
|
|
64
|
+
return /* @__PURE__ */ jsx(
|
|
65
|
+
MessageScrollerPrimitive.Item,
|
|
66
|
+
{
|
|
67
|
+
"data-slot": "message-scroller-item",
|
|
68
|
+
scrollAnchor,
|
|
69
|
+
className: cn(
|
|
70
|
+
"min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
|
|
71
|
+
className
|
|
72
|
+
),
|
|
73
|
+
...props
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
function MessageScrollerButton({
|
|
78
|
+
direction = "end",
|
|
79
|
+
className,
|
|
80
|
+
children,
|
|
81
|
+
render,
|
|
82
|
+
variant = "secondary",
|
|
83
|
+
size = "icon-sm",
|
|
84
|
+
...props
|
|
85
|
+
}) {
|
|
86
|
+
return /* @__PURE__ */ jsx(
|
|
87
|
+
MessageScrollerPrimitive.Button,
|
|
88
|
+
{
|
|
89
|
+
"data-slot": "message-scroller-button",
|
|
90
|
+
"data-direction": direction,
|
|
91
|
+
"data-variant": variant,
|
|
92
|
+
"data-size": size,
|
|
93
|
+
direction,
|
|
94
|
+
className: cn(
|
|
95
|
+
"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-(--ds-motion-base) hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-(--ds-motion-slow) data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
|
|
96
|
+
className
|
|
97
|
+
),
|
|
98
|
+
render: render ?? /* @__PURE__ */ jsx(Button, { variant, size }),
|
|
99
|
+
...props,
|
|
100
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
101
|
+
/* @__PURE__ */ jsx(
|
|
102
|
+
ArrowDownIcon,
|
|
103
|
+
{}
|
|
104
|
+
),
|
|
105
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
|
|
106
|
+
] })
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
export {
|
|
111
|
+
MessageScroller,
|
|
112
|
+
MessageScrollerButton,
|
|
113
|
+
MessageScrollerContent,
|
|
114
|
+
MessageScrollerItem,
|
|
115
|
+
MessageScrollerProvider,
|
|
116
|
+
MessageScrollerViewport,
|
|
117
|
+
useMessageScroller,
|
|
118
|
+
useMessageScrollerScrollable,
|
|
119
|
+
useMessageScrollerVisibility
|
|
120
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
4
|
+
declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
|
|
5
|
+
align?: "start" | "end";
|
|
6
|
+
}): React.JSX.Element;
|
|
7
|
+
declare function MessageAvatar({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
8
|
+
declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
9
|
+
declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
10
|
+
declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../lib/utils";
|
|
3
|
+
function MessageGroup({ className, ...props }) {
|
|
4
|
+
return /* @__PURE__ */ jsx(
|
|
5
|
+
"div",
|
|
6
|
+
{
|
|
7
|
+
"data-slot": "message-group",
|
|
8
|
+
className: cn("flex min-w-0 flex-col gap-2", className),
|
|
9
|
+
...props
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
function Message({
|
|
14
|
+
className,
|
|
15
|
+
align = "start",
|
|
16
|
+
...props
|
|
17
|
+
}) {
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
"div",
|
|
20
|
+
{
|
|
21
|
+
"data-slot": "message",
|
|
22
|
+
"data-align": align,
|
|
23
|
+
className: cn(
|
|
24
|
+
"group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
|
|
25
|
+
className
|
|
26
|
+
),
|
|
27
|
+
...props
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
function MessageAvatar({ className, ...props }) {
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
"div",
|
|
34
|
+
{
|
|
35
|
+
"data-slot": "message-avatar",
|
|
36
|
+
className: cn(
|
|
37
|
+
"flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
|
|
38
|
+
className
|
|
39
|
+
),
|
|
40
|
+
...props
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
function MessageContent({ className, ...props }) {
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
"data-slot": "message-content",
|
|
49
|
+
className: cn(
|
|
50
|
+
"flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
|
|
51
|
+
className
|
|
52
|
+
),
|
|
53
|
+
...props
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
function MessageHeader({ className, ...props }) {
|
|
58
|
+
return /* @__PURE__ */ jsx(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
"data-slot": "message-header",
|
|
62
|
+
className: cn(
|
|
63
|
+
"flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
|
|
64
|
+
className
|
|
65
|
+
),
|
|
66
|
+
...props
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
function MessageFooter({ className, ...props }) {
|
|
71
|
+
return /* @__PURE__ */ jsx(
|
|
72
|
+
"div",
|
|
73
|
+
{
|
|
74
|
+
"data-slot": "message-footer",
|
|
75
|
+
className: cn(
|
|
76
|
+
"flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
|
|
77
|
+
className
|
|
78
|
+
),
|
|
79
|
+
...props
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
export {
|
|
84
|
+
Message,
|
|
85
|
+
MessageAvatar,
|
|
86
|
+
MessageContent,
|
|
87
|
+
MessageFooter,
|
|
88
|
+
MessageGroup,
|
|
89
|
+
MessageHeader
|
|
90
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
|
|
4
|
+
size?: "sm" | "default";
|
|
5
|
+
};
|
|
6
|
+
declare function NativeSelect({ className, size, ...props }: NativeSelectProps): React.JSX.Element;
|
|
7
|
+
declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): React.JSX.Element;
|
|
8
|
+
declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): React.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../lib/utils";
|
|
3
|
+
import { ChevronDownIcon } from "lucide-react";
|
|
4
|
+
function NativeSelect({
|
|
5
|
+
className,
|
|
6
|
+
size = "default",
|
|
7
|
+
...props
|
|
8
|
+
}) {
|
|
9
|
+
return /* @__PURE__ */ jsxs(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
className: cn(
|
|
13
|
+
"group/native-select relative w-fit has-[select:disabled]:opacity-50",
|
|
14
|
+
className
|
|
15
|
+
),
|
|
16
|
+
"data-slot": "native-select-wrapper",
|
|
17
|
+
"data-size": size,
|
|
18
|
+
children: [
|
|
19
|
+
/* @__PURE__ */ jsx(
|
|
20
|
+
"select",
|
|
21
|
+
{
|
|
22
|
+
"data-slot": "native-select",
|
|
23
|
+
"data-size": size,
|
|
24
|
+
className: "h-9 w-full min-w-0 appearance-none rounded-control border border-input bg-input/30 py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) 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",
|
|
25
|
+
...props
|
|
26
|
+
}
|
|
27
|
+
),
|
|
28
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
function NativeSelectOption({
|
|
34
|
+
className,
|
|
35
|
+
...props
|
|
36
|
+
}) {
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
"option",
|
|
39
|
+
{
|
|
40
|
+
"data-slot": "native-select-option",
|
|
41
|
+
className: cn("bg-[Canvas] text-[CanvasText]", className),
|
|
42
|
+
...props
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
function NativeSelectOptGroup({
|
|
47
|
+
className,
|
|
48
|
+
...props
|
|
49
|
+
}) {
|
|
50
|
+
return /* @__PURE__ */ jsx(
|
|
51
|
+
"optgroup",
|
|
52
|
+
{
|
|
53
|
+
"data-slot": "native-select-optgroup",
|
|
54
|
+
className: cn("bg-[Canvas] text-[CanvasText]", className),
|
|
55
|
+
...props
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
NativeSelect,
|
|
61
|
+
NativeSelectOptGroup,
|
|
62
|
+
NativeSelectOption
|
|
63
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
|
|
4
|
+
|
|
5
|
+
declare function NavigationMenu({ align, className, children, ...props }: NavigationMenu$1.Root.Props & Pick<NavigationMenu$1.Positioner.Props, "align">): React$1.JSX.Element;
|
|
6
|
+
declare function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenu$1.List>): React$1.JSX.Element;
|
|
7
|
+
declare function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenu$1.Item>): React$1.JSX.Element;
|
|
8
|
+
declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
9
|
+
declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenu$1.Trigger.Props): React$1.JSX.Element;
|
|
10
|
+
declare function NavigationMenuContent({ className, ...props }: NavigationMenu$1.Content.Props): React$1.JSX.Element;
|
|
11
|
+
declare function NavigationMenuPositioner({ className, side, sideOffset, align, alignOffset, ...props }: NavigationMenu$1.Positioner.Props): React$1.JSX.Element;
|
|
12
|
+
declare function NavigationMenuLink({ className, ...props }: NavigationMenu$1.Link.Props): React$1.JSX.Element;
|
|
13
|
+
declare function NavigationMenuIndicator({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenu$1.Icon>): React$1.JSX.Element;
|
|
14
|
+
|
|
15
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle };
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
import { ChevronDownIcon } from "lucide-react";
|
|
6
|
+
function NavigationMenu({
|
|
7
|
+
align = "start",
|
|
8
|
+
className,
|
|
9
|
+
children,
|
|
10
|
+
...props
|
|
11
|
+
}) {
|
|
12
|
+
return /* @__PURE__ */ jsxs(
|
|
13
|
+
NavigationMenuPrimitive.Root,
|
|
14
|
+
{
|
|
15
|
+
"data-slot": "navigation-menu",
|
|
16
|
+
className: cn(
|
|
17
|
+
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
|
18
|
+
className
|
|
19
|
+
),
|
|
20
|
+
...props,
|
|
21
|
+
children: [
|
|
22
|
+
children,
|
|
23
|
+
/* @__PURE__ */ jsx(NavigationMenuPositioner, { align })
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
function NavigationMenuList({
|
|
29
|
+
className,
|
|
30
|
+
...props
|
|
31
|
+
}) {
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
NavigationMenuPrimitive.List,
|
|
34
|
+
{
|
|
35
|
+
"data-slot": "navigation-menu-list",
|
|
36
|
+
className: cn(
|
|
37
|
+
"group flex flex-1 list-none items-center justify-center gap-0",
|
|
38
|
+
className
|
|
39
|
+
),
|
|
40
|
+
...props
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
function NavigationMenuItem({
|
|
45
|
+
className,
|
|
46
|
+
...props
|
|
47
|
+
}) {
|
|
48
|
+
return /* @__PURE__ */ jsx(
|
|
49
|
+
NavigationMenuPrimitive.Item,
|
|
50
|
+
{
|
|
51
|
+
"data-slot": "navigation-menu-item",
|
|
52
|
+
className: cn("relative", className),
|
|
53
|
+
...props
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
const navigationMenuTriggerStyle = cva(
|
|
58
|
+
"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
|
|
59
|
+
);
|
|
60
|
+
function NavigationMenuTrigger({
|
|
61
|
+
className,
|
|
62
|
+
children,
|
|
63
|
+
...props
|
|
64
|
+
}) {
|
|
65
|
+
return /* @__PURE__ */ jsxs(
|
|
66
|
+
NavigationMenuPrimitive.Trigger,
|
|
67
|
+
{
|
|
68
|
+
"data-slot": "navigation-menu-trigger",
|
|
69
|
+
className: cn(navigationMenuTriggerStyle(), "group", className),
|
|
70
|
+
...props,
|
|
71
|
+
children: [
|
|
72
|
+
children,
|
|
73
|
+
" ",
|
|
74
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, { className: "relative top-px ml-1 size-3 transition duration-(--ds-motion-slow) group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
function NavigationMenuContent({
|
|
80
|
+
className,
|
|
81
|
+
...props
|
|
82
|
+
}) {
|
|
83
|
+
return /* @__PURE__ */ jsx(
|
|
84
|
+
NavigationMenuPrimitive.Content,
|
|
85
|
+
{
|
|
86
|
+
"data-slot": "navigation-menu-content",
|
|
87
|
+
className: cn(
|
|
88
|
+
"data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] isolate z-(--ds-z-overlay) h-full w-auto p-2.5 pr-3 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-popover group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/5 group-data-[viewport=false]/navigation-menu:duration-(--ds-motion-slow) data-ending-style:opacity-0 data-starting-style:opacity-0 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-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none 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 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",
|
|
89
|
+
className
|
|
90
|
+
),
|
|
91
|
+
...props
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
function NavigationMenuPositioner({
|
|
96
|
+
className,
|
|
97
|
+
side = "bottom",
|
|
98
|
+
sideOffset = 8,
|
|
99
|
+
align = "start",
|
|
100
|
+
alignOffset = 0,
|
|
101
|
+
...props
|
|
102
|
+
}) {
|
|
103
|
+
return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
104
|
+
NavigationMenuPrimitive.Positioner,
|
|
105
|
+
{
|
|
106
|
+
side,
|
|
107
|
+
sideOffset,
|
|
108
|
+
align,
|
|
109
|
+
alignOffset,
|
|
110
|
+
className: cn(
|
|
111
|
+
"isolate z-(--ds-z-overlay) h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
|
|
112
|
+
className
|
|
113
|
+
),
|
|
114
|
+
...props,
|
|
115
|
+
children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Popup, { className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-2xl bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/5 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-(--ds-motion-fast) data-starting-style:scale-90 data-starting-style:opacity-0", children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Viewport, { className: "relative size-full overflow-hidden" }) })
|
|
116
|
+
}
|
|
117
|
+
) });
|
|
118
|
+
}
|
|
119
|
+
function NavigationMenuLink({
|
|
120
|
+
className,
|
|
121
|
+
...props
|
|
122
|
+
}) {
|
|
123
|
+
return /* @__PURE__ */ jsx(
|
|
124
|
+
NavigationMenuPrimitive.Link,
|
|
125
|
+
{
|
|
126
|
+
"data-slot": "navigation-menu-link",
|
|
127
|
+
className: cn(
|
|
128
|
+
"flex items-center gap-1.5 rounded-2xl p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-xl data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
|
|
129
|
+
className
|
|
130
|
+
),
|
|
131
|
+
...props
|
|
132
|
+
}
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
function NavigationMenuIndicator({
|
|
136
|
+
className,
|
|
137
|
+
...props
|
|
138
|
+
}) {
|
|
139
|
+
return /* @__PURE__ */ jsx(
|
|
140
|
+
NavigationMenuPrimitive.Icon,
|
|
141
|
+
{
|
|
142
|
+
"data-slot": "navigation-menu-indicator",
|
|
143
|
+
className: cn(
|
|
144
|
+
"top-full z-(--ds-z-raised) flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
|
|
145
|
+
className
|
|
146
|
+
),
|
|
147
|
+
...props,
|
|
148
|
+
children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-overlay" })
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
export {
|
|
153
|
+
NavigationMenu,
|
|
154
|
+
NavigationMenuContent,
|
|
155
|
+
NavigationMenuIndicator,
|
|
156
|
+
NavigationMenuItem,
|
|
157
|
+
NavigationMenuLink,
|
|
158
|
+
NavigationMenuList,
|
|
159
|
+
NavigationMenuPositioner,
|
|
160
|
+
NavigationMenuTrigger,
|
|
161
|
+
navigationMenuTriggerStyle
|
|
162
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Button } from './button.js';
|
|
3
|
+
import 'class-variance-authority/types';
|
|
4
|
+
import '@base-ui/react/use-render';
|
|
5
|
+
import 'class-variance-authority';
|
|
6
|
+
|
|
7
|
+
declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
|
|
8
|
+
declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
9
|
+
declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
10
|
+
type PaginationLinkProps = {
|
|
11
|
+
isActive?: boolean;
|
|
12
|
+
} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
|
|
13
|
+
declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
|
|
14
|
+
declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
|
|
15
|
+
text?: string;
|
|
16
|
+
}): React.JSX.Element;
|
|
17
|
+
declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
|
|
18
|
+
text?: string;
|
|
19
|
+
}): React.JSX.Element;
|
|
20
|
+
declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
21
|
+
|
|
22
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../lib/utils";
|
|
3
|
+
import { Button } from "./button";
|
|
4
|
+
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
|
5
|
+
function Pagination({ className, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(
|
|
7
|
+
"nav",
|
|
8
|
+
{
|
|
9
|
+
role: "navigation",
|
|
10
|
+
"aria-label": "pagination",
|
|
11
|
+
"data-slot": "pagination",
|
|
12
|
+
className: cn("mx-auto flex w-full justify-center", className),
|
|
13
|
+
...props
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
function PaginationContent({
|
|
18
|
+
className,
|
|
19
|
+
...props
|
|
20
|
+
}) {
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
"ul",
|
|
23
|
+
{
|
|
24
|
+
"data-slot": "pagination-content",
|
|
25
|
+
className: cn("flex items-center gap-1", className),
|
|
26
|
+
...props
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
function PaginationItem({ ...props }) {
|
|
31
|
+
return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
|
|
32
|
+
}
|
|
33
|
+
function PaginationLink({
|
|
34
|
+
className,
|
|
35
|
+
isActive,
|
|
36
|
+
size = "icon",
|
|
37
|
+
...props
|
|
38
|
+
}) {
|
|
39
|
+
return /* @__PURE__ */ jsx(
|
|
40
|
+
Button,
|
|
41
|
+
{
|
|
42
|
+
variant: isActive ? "outline" : "ghost",
|
|
43
|
+
size,
|
|
44
|
+
className: cn(className),
|
|
45
|
+
nativeButton: false,
|
|
46
|
+
render: /* @__PURE__ */ jsx(
|
|
47
|
+
"a",
|
|
48
|
+
{
|
|
49
|
+
"aria-current": isActive ? "page" : void 0,
|
|
50
|
+
"data-slot": "pagination-link",
|
|
51
|
+
"data-active": isActive,
|
|
52
|
+
...props
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
function PaginationPrevious({
|
|
59
|
+
className,
|
|
60
|
+
text = "Previous",
|
|
61
|
+
...props
|
|
62
|
+
}) {
|
|
63
|
+
return /* @__PURE__ */ jsxs(
|
|
64
|
+
PaginationLink,
|
|
65
|
+
{
|
|
66
|
+
"aria-label": "Go to previous page",
|
|
67
|
+
size: "default",
|
|
68
|
+
className: cn("pl-2!", className),
|
|
69
|
+
...props,
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ jsx(ChevronLeftIcon, { "data-icon": "inline-start" }),
|
|
72
|
+
/* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: text })
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
function PaginationNext({
|
|
78
|
+
className,
|
|
79
|
+
text = "Next",
|
|
80
|
+
...props
|
|
81
|
+
}) {
|
|
82
|
+
return /* @__PURE__ */ jsxs(
|
|
83
|
+
PaginationLink,
|
|
84
|
+
{
|
|
85
|
+
"aria-label": "Go to next page",
|
|
86
|
+
size: "default",
|
|
87
|
+
className: cn("pr-2!", className),
|
|
88
|
+
...props,
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: text }),
|
|
91
|
+
/* @__PURE__ */ jsx(ChevronRightIcon, { "data-icon": "inline-end" })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
function PaginationEllipsis({
|
|
97
|
+
className,
|
|
98
|
+
...props
|
|
99
|
+
}) {
|
|
100
|
+
return /* @__PURE__ */ jsxs(
|
|
101
|
+
"span",
|
|
102
|
+
{
|
|
103
|
+
"aria-hidden": true,
|
|
104
|
+
"data-slot": "pagination-ellipsis",
|
|
105
|
+
className: cn(
|
|
106
|
+
"flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
|
|
107
|
+
className
|
|
108
|
+
),
|
|
109
|
+
...props,
|
|
110
|
+
children: [
|
|
111
|
+
/* @__PURE__ */ jsx(
|
|
112
|
+
MoreHorizontalIcon,
|
|
113
|
+
{}
|
|
114
|
+
),
|
|
115
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
export {
|
|
121
|
+
Pagination,
|
|
122
|
+
PaginationContent,
|
|
123
|
+
PaginationEllipsis,
|
|
124
|
+
PaginationItem,
|
|
125
|
+
PaginationLink,
|
|
126
|
+
PaginationNext,
|
|
127
|
+
PaginationPrevious
|
|
128
|
+
};
|
package/dist/ui/popover.js
CHANGED
|
@@ -21,13 +21,13 @@ function PopoverContent({
|
|
|
21
21
|
align,
|
|
22
22
|
side,
|
|
23
23
|
sideOffset,
|
|
24
|
-
className: "z-(--z-overlay)",
|
|
24
|
+
className: "z-(--ds-z-overlay)",
|
|
25
25
|
children: /* @__PURE__ */ jsx(
|
|
26
26
|
PopoverPrimitive.Popup,
|
|
27
27
|
{
|
|
28
28
|
"data-slot": "popover-content",
|
|
29
29
|
className: cn(
|
|
30
|
-
"flex w-72 origin-(--transform-origin) flex-col gap-
|
|
30
|
+
"flex w-72 origin-(--transform-origin) flex-col gap-(--ds-popover-p) rounded-2xl bg-popover p-(--ds-popover-p) text-sm text-popover-foreground shadow-popover ring-1 ring-foreground/5 outline-hidden duration-(--ds-motion-fast) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
31
31
|
className
|
|
32
32
|
),
|
|
33
33
|
...props
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Questionnaire as Questionnaire$1 } from '@shadcn/react/questionnaire';
|
|
3
|
+
import { Button } from './button.js';
|
|
4
|
+
import 'class-variance-authority/types';
|
|
5
|
+
import '@base-ui/react/use-render';
|
|
6
|
+
import 'class-variance-authority';
|
|
7
|
+
|
|
8
|
+
declare function Questionnaire({ className, ...props }: React.ComponentProps<typeof Questionnaire$1.Root>): React.JSX.Element;
|
|
9
|
+
declare function QuestionnaireProgress({ className, ...props }: React.ComponentProps<typeof Questionnaire$1.Progress>): React.JSX.Element;
|
|
10
|
+
declare function QuestionnaireItem({ className, ...props }: React.ComponentProps<typeof Questionnaire$1.Item>): React.JSX.Element;
|
|
11
|
+
declare function QuestionnaireTitle({ className, ...props }: React.ComponentProps<typeof Questionnaire$1.Title>): React.JSX.Element;
|
|
12
|
+
declare function QuestionnaireDescription({ className, ...props }: React.ComponentProps<typeof Questionnaire$1.Description>): React.JSX.Element;
|
|
13
|
+
declare function QuestionnaireChoices({ className, ...props }: React.ComponentProps<typeof Questionnaire$1.Choices>): React.JSX.Element;
|
|
14
|
+
declare function QuestionnaireChoice({ children, className, ...props }: React.ComponentProps<typeof Questionnaire$1.Choice>): React.JSX.Element;
|
|
15
|
+
declare function QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
16
|
+
declare function QuestionnaireInput({ className, ...props }: React.ComponentProps<typeof Questionnaire$1.Input>): React.JSX.Element;
|
|
17
|
+
declare function QuestionnaireError({ className, ...props }: React.ComponentProps<typeof Questionnaire$1.Error>): React.JSX.Element;
|
|
18
|
+
declare function QuestionnaireActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
19
|
+
declare function QuestionnairePrevious({ children, className, size, variant, ...props }: React.ComponentProps<typeof Questionnaire$1.Previous> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
|
|
20
|
+
declare function QuestionnaireSkip({ children, className, size, variant, ...props }: React.ComponentProps<typeof Questionnaire$1.Skip> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
|
|
21
|
+
declare function QuestionnaireNext({ children, className, size, variant, ...props }: React.ComponentProps<typeof Questionnaire$1.Next> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
|
|
22
|
+
declare function QuestionnaireSubmit({ children, className, size, variant, ...props }: React.ComponentProps<typeof Questionnaire$1.Submit> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
|
|
23
|
+
|
|
24
|
+
export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle };
|