@mednet/ui 0.0.0-stage → 1.0.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/LICENSE +21 -0
- package/README.md +46 -2
- package/THIRD_PARTY_NOTICES.md +27 -0
- package/dist/brand/logo/logo-horizontal.d.ts +6 -0
- package/dist/brand/logo/logo-horizontal.js +7 -0
- package/dist/brand/logo/logo-mark.d.ts +6 -0
- package/dist/brand/logo/logo-mark.js +7 -0
- package/dist/brand/logo/logo-vertical.d.ts +6 -0
- package/dist/brand/logo/logo-vertical.js +7 -0
- package/dist/brand/logo.d.ts +18 -0
- package/dist/brand/logo.js +12 -0
- package/dist/brand/site-footer.d.ts +24 -0
- package/dist/brand/site-footer.js +15 -0
- package/dist/brand/site-header.d.ts +11 -0
- package/dist/brand/site-header.js +7 -0
- package/dist/components/accordion.d.ts +6 -0
- package/dist/components/accordion.js +17 -0
- package/dist/components/alert-dialog.d.ts +18 -0
- package/dist/components/alert-dialog.js +42 -0
- package/dist/components/alert.d.ts +10 -0
- package/dist/components/alert.js +27 -0
- package/dist/components/aspect-ratio.d.ts +4 -0
- package/dist/components/aspect-ratio.js +8 -0
- package/dist/components/attachment.d.ts +23 -0
- package/dist/components/attachment.js +68 -0
- package/dist/components/avatar.d.ts +11 -0
- package/dist/components/avatar.js +23 -0
- package/dist/components/badge.d.ts +7 -0
- package/dist/components/badge.js +33 -0
- package/dist/components/breadcrumb.d.ts +10 -0
- package/dist/components/breadcrumb.js +36 -0
- package/dist/components/bubble.d.ts +16 -0
- package/dist/components/bubble.js +59 -0
- package/dist/components/button-group.d.ts +10 -0
- package/dist/components/button-group.js +36 -0
- package/dist/components/button.d.ts +8 -0
- package/dist/components/button.js +34 -0
- package/dist/components/calendar.d.ts +10 -0
- package/dist/components/calendar.js +76 -0
- package/dist/components/card.d.ts +11 -0
- package/dist/components/card.js +24 -0
- package/dist/components/carousel.d.ts +28 -0
- package/dist/components/carousel.js +91 -0
- package/dist/components/chart.d.ts +44 -0
- package/dist/components/chart.js +132 -0
- package/dist/components/checkbox.d.ts +3 -0
- package/dist/components/checkbox.js +9 -0
- package/dist/components/collapsible.d.ts +5 -0
- package/dist/components/collapsible.js +13 -0
- package/dist/components/combobox.d.ts +24 -0
- package/dist/components/combobox.js +58 -0
- package/dist/components/command.d.ts +19 -0
- package/dist/components/command.js +35 -0
- package/dist/components/context-menu.d.ts +29 -0
- package/dist/components/context-menu.js +51 -0
- package/dist/components/dialog.d.ts +17 -0
- package/dist/components/dialog.js +37 -0
- package/dist/components/direction.d.ts +1 -0
- package/dist/components/direction.js +2 -0
- package/dist/components/drawer.d.ts +16 -0
- package/dist/components/drawer.js +75 -0
- package/dist/components/dropdown-menu.d.ts +29 -0
- package/dist/components/dropdown-menu.js +51 -0
- package/dist/components/empty.d.ts +11 -0
- package/dist/components/empty.js +33 -0
- package/dist/components/field.d.ts +24 -0
- package/dist/components/field.js +68 -0
- package/dist/components/hover-card.d.ts +5 -0
- package/dist/components/hover-card.js +14 -0
- package/dist/components/input-group.d.ts +18 -0
- package/dist/components/input-group.js +57 -0
- package/dist/components/input-otp.d.ts +11 -0
- package/dist/components/input-otp.js +21 -0
- package/dist/components/input.d.ts +3 -0
- package/dist/components/input.js +7 -0
- package/dist/components/item.d.ts +22 -0
- package/dist/components/item.js +78 -0
- package/dist/components/kbd.d.ts +3 -0
- package/dist/components/kbd.js +9 -0
- package/dist/components/label.d.ts +3 -0
- package/dist/components/label.js +7 -0
- package/dist/components/marker.d.ts +10 -0
- package/dist/components/marker.js +34 -0
- package/dist/components/menubar.d.ts +29 -0
- package/dist/components/menubar.js +56 -0
- package/dist/components/message-scroller.d.ts +10 -0
- package/dist/components/message-scroller.js +25 -0
- package/dist/components/message.d.ts +10 -0
- package/dist/components/message.js +21 -0
- package/dist/components/native-select.d.ts +8 -0
- package/dist/components/native-select.js +13 -0
- package/dist/components/navigation-menu.d.ts +11 -0
- package/dist/components/navigation-menu.js +31 -0
- package/dist/components/pagination.d.ts +17 -0
- package/dist/components/pagination.js +26 -0
- package/dist/components/popover.d.ts +9 -0
- package/dist/components/popover.js +23 -0
- package/dist/components/progress.d.ts +7 -0
- package/dist/components/progress.js +20 -0
- package/dist/components/questionnaire.d.ts +19 -0
- package/dist/components/questionnaire.js +52 -0
- package/dist/components/radio-group.d.ts +5 -0
- package/dist/components/radio-group.js +12 -0
- package/dist/components/resizable.d.ts +7 -0
- package/dist/components/resizable.js +14 -0
- package/dist/components/scroll-area.d.ts +5 -0
- package/dist/components/scroll-area.js +11 -0
- package/dist/components/select.d.ts +15 -0
- package/dist/components/select.js +34 -0
- package/dist/components/separator.d.ts +3 -0
- package/dist/components/separator.js +8 -0
- package/dist/components/sheet.d.ts +14 -0
- package/dist/components/sheet.js +37 -0
- package/dist/components/sidebar.d.ts +63 -0
- package/dist/components/sidebar.js +256 -0
- package/dist/components/skeleton.d.ts +2 -0
- package/dist/components/skeleton.js +6 -0
- package/dist/components/slider.d.ts +3 -0
- package/dist/components/slider.js +12 -0
- package/dist/components/spinner.d.ts +2 -0
- package/dist/components/spinner.js +7 -0
- package/dist/components/switch.d.ts +5 -0
- package/dist/components/switch.js +8 -0
- package/dist/components/table.d.ts +10 -0
- package/dist/components/table.js +28 -0
- package/dist/components/tabs.d.ts +10 -0
- package/dist/components/tabs.js +29 -0
- package/dist/components/textarea.d.ts +3 -0
- package/dist/components/textarea.js +6 -0
- package/dist/components/toast.d.ts +16 -0
- package/dist/components/toast.js +66 -0
- package/dist/components/toggle-group.d.ts +11 -0
- package/dist/components/toggle-group.js +24 -0
- package/dist/components/toggle.d.ts +8 -0
- package/dist/components/toggle.js +26 -0
- package/dist/components/tooltip.d.ts +6 -0
- package/dist/components/tooltip.js +17 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js +15 -0
- package/dist/index.d.ts +67 -0
- package/dist/index.js +69 -0
- package/dist/layouts/app-shell.d.ts +19 -0
- package/dist/layouts/app-shell.js +9 -0
- package/dist/layouts/public-layout.d.ts +14 -0
- package/dist/layouts/public-layout.js +8 -0
- package/dist/layouts/skip-link.d.ts +2 -0
- package/dist/layouts/skip-link.js +5 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/lib/utils.js +7 -0
- package/llms.md +521 -0
- package/package.json +128 -3
- package/postcss.cjs +163 -0
- package/src/brand.css +69 -0
- package/src/shadcn-tailwind.css +638 -0
- package/src/styles.css +48 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
function Avatar({ className, size = "default", ...props }) {
|
|
6
|
+
return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
|
|
7
|
+
}
|
|
8
|
+
function AvatarImage({ className, ...props }) {
|
|
9
|
+
return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
function AvatarFallback({ className, ...props }) {
|
|
12
|
+
return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
|
|
13
|
+
}
|
|
14
|
+
function AvatarBadge({ className, ...props }) {
|
|
15
|
+
return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
|
|
16
|
+
}
|
|
17
|
+
function AvatarGroup({ className, ...props }) {
|
|
18
|
+
return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
|
|
19
|
+
}
|
|
20
|
+
function AvatarGroupCount({ className, ...props }) {
|
|
21
|
+
return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
7
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
2
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
9
|
+
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
|
10
|
+
destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
|
11
|
+
outline: "border-border bg-input/30 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
|
12
|
+
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
13
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
defaultVariants: {
|
|
17
|
+
variant: "default",
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
function Badge({ className, variant = "default", render, ...props }) {
|
|
21
|
+
return useRender({
|
|
22
|
+
defaultTagName: "span",
|
|
23
|
+
props: mergeProps({
|
|
24
|
+
className: cn(badgeVariants({ variant }), className),
|
|
25
|
+
}, props),
|
|
26
|
+
render,
|
|
27
|
+
state: {
|
|
28
|
+
slot: "badge",
|
|
29
|
+
variant,
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
+
declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
|
|
4
|
+
declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
|
|
5
|
+
declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
6
|
+
declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
7
|
+
declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
8
|
+
declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
9
|
+
declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
10
|
+
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
3
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
|
6
|
+
function Breadcrumb({ className, ...props }) {
|
|
7
|
+
return (_jsx("nav", { "aria-label": "\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043E\u043D\u043D\u0430\u044F \u0446\u0435\u043F\u043E\u0447\u043A\u0430", "data-slot": "breadcrumb", className: cn(className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
function BreadcrumbList({ className, ...props }) {
|
|
10
|
+
return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5", className), ...props }));
|
|
11
|
+
}
|
|
12
|
+
function BreadcrumbItem({ className, ...props }) {
|
|
13
|
+
return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props }));
|
|
14
|
+
}
|
|
15
|
+
function BreadcrumbLink({ className, render, ...props }) {
|
|
16
|
+
return useRender({
|
|
17
|
+
defaultTagName: "a",
|
|
18
|
+
props: mergeProps({
|
|
19
|
+
className: cn("transition-colors hover:text-foreground", className),
|
|
20
|
+
}, props),
|
|
21
|
+
render,
|
|
22
|
+
state: {
|
|
23
|
+
slot: "breadcrumb-link",
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function BreadcrumbPage({ className, ...props }) {
|
|
28
|
+
return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props }));
|
|
29
|
+
}
|
|
30
|
+
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
31
|
+
return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? (_jsx(ChevronRightIcon, {})) }));
|
|
32
|
+
}
|
|
33
|
+
function BreadcrumbEllipsis({ className, ...props }) {
|
|
34
|
+
return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className), ...props, children: [_jsx(MoreHorizontalIcon, {}), _jsx("span", { className: "sr-only", children: "\u0415\u0449\u0451" })] }));
|
|
35
|
+
}
|
|
36
|
+
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
|
4
|
+
declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
5
|
+
declare const bubbleVariants: (props?: ({
|
|
6
|
+
variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "muted" | "tinted" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
|
|
9
|
+
align?: "start" | "end";
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function BubbleContent({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
12
|
+
declare function BubbleReactions({ side, align, className, ...props }: React.ComponentProps<"div"> & {
|
|
13
|
+
align?: "start" | "end";
|
|
14
|
+
side?: "top" | "bottom";
|
|
15
|
+
}): React.JSX.Element;
|
|
16
|
+
export { BubbleGroup, Bubble, BubbleContent, BubbleReactions };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
3
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { cn } from "#lib/utils";
|
|
6
|
+
function BubbleGroup({ className, ...props }) {
|
|
7
|
+
return (_jsx("div", { "data-slot": "bubble-group", className: cn("flex min-w-0 flex-col gap-2", className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
const bubbleVariants = cva("group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full", {
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
|
|
13
|
+
secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
|
|
14
|
+
muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
|
|
15
|
+
tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
|
|
16
|
+
outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
|
|
17
|
+
ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
|
|
18
|
+
destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
defaultVariants: {
|
|
22
|
+
variant: "default",
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
function Bubble({ variant = "default", align = "start", className, ...props }) {
|
|
26
|
+
return (_jsx("div", { "data-slot": "bubble", "data-variant": variant, "data-align": align, className: cn(bubbleVariants({ variant }), className), ...props }));
|
|
27
|
+
}
|
|
28
|
+
function BubbleContent({ className, render, ...props }) {
|
|
29
|
+
return useRender({
|
|
30
|
+
defaultTagName: "div",
|
|
31
|
+
props: mergeProps({
|
|
32
|
+
className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3.5 py-2.5 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-[3px] [button,a]:focus-visible:ring-ring/50", className),
|
|
33
|
+
}, props),
|
|
34
|
+
render,
|
|
35
|
+
state: {
|
|
36
|
+
slot: "bubble-content",
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
const bubbleReactionsVariants = cva("absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0", {
|
|
41
|
+
variants: {
|
|
42
|
+
side: {
|
|
43
|
+
top: "top-0 -translate-y-3/4",
|
|
44
|
+
bottom: "bottom-0 translate-y-3/4",
|
|
45
|
+
},
|
|
46
|
+
align: {
|
|
47
|
+
start: "left-3",
|
|
48
|
+
end: "right-3",
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
defaultVariants: {
|
|
52
|
+
side: "bottom",
|
|
53
|
+
align: "end",
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
|
|
57
|
+
return (_jsx("div", { "data-slot": "bubble-reactions", "data-align": align, "data-side": side, className: cn(bubbleReactionsVariants({ side, align }), className), ...props }));
|
|
58
|
+
}
|
|
59
|
+
export { BubbleGroup, Bubble, BubbleContent, BubbleReactions };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import { Separator } from "#components/separator";
|
|
4
|
+
declare const buttonGroupVariants: (props?: ({
|
|
5
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
|
|
8
|
+
declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
9
|
+
declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
|
|
10
|
+
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
3
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { cn } from "#lib/utils";
|
|
6
|
+
import { Separator } from "#components/separator";
|
|
7
|
+
const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
|
|
8
|
+
variants: {
|
|
9
|
+
orientation: {
|
|
10
|
+
horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
|
|
11
|
+
vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
defaultVariants: {
|
|
15
|
+
orientation: "horizontal",
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
function ButtonGroup({ className, orientation, ...props }) {
|
|
19
|
+
return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
|
|
20
|
+
}
|
|
21
|
+
function ButtonGroupText({ className, render, ...props }) {
|
|
22
|
+
return useRender({
|
|
23
|
+
defaultTagName: "div",
|
|
24
|
+
props: mergeProps({
|
|
25
|
+
className: cn("flex items-center gap-2 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
|
|
26
|
+
}, props),
|
|
27
|
+
render,
|
|
28
|
+
state: {
|
|
29
|
+
slot: "button-group-text",
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
34
|
+
return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className), ...props }));
|
|
35
|
+
}
|
|
36
|
+
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
|
|
5
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
|
|
8
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
9
|
+
outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
|
|
10
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
11
|
+
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
12
|
+
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
13
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
14
|
+
},
|
|
15
|
+
size: {
|
|
16
|
+
default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
|
|
17
|
+
xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
|
|
18
|
+
sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
19
|
+
lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
|
|
20
|
+
icon: "size-9",
|
|
21
|
+
"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
|
|
22
|
+
"icon-sm": "size-8",
|
|
23
|
+
"icon-lg": "size-10",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
variant: "default",
|
|
28
|
+
size: "default",
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
function Button({ className, variant = "default", size = "default", ...props }) {
|
|
32
|
+
return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
|
|
33
|
+
}
|
|
34
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { DayPicker, type DayButton, type Locale } from "react-day-picker";
|
|
3
|
+
import { Button } from "#components/button";
|
|
4
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
|
|
5
|
+
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
6
|
+
}): React.JSX.Element;
|
|
7
|
+
declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
|
|
8
|
+
locale?: Partial<Locale>;
|
|
9
|
+
}): React.JSX.Element;
|
|
10
|
+
export { Calendar, CalendarDayButton };
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
import { DayPicker, getDefaultClassNames, } from "react-day-picker";
|
|
6
|
+
import { Button, buttonVariants } from "#components/button";
|
|
7
|
+
import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
|
|
8
|
+
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
|
|
9
|
+
const defaultClassNames = getDefaultClassNames();
|
|
10
|
+
return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
|
|
11
|
+
formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
|
|
12
|
+
...formatters,
|
|
13
|
+
}, classNames: {
|
|
14
|
+
root: cn("w-fit", defaultClassNames.root),
|
|
15
|
+
months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
|
|
16
|
+
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
|
17
|
+
nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
|
|
18
|
+
button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
|
|
19
|
+
button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
|
|
20
|
+
month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
|
|
21
|
+
dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
|
|
22
|
+
dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
|
|
23
|
+
dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
|
|
24
|
+
caption_label: cn("font-medium select-none", captionLayout === "label"
|
|
25
|
+
? "text-sm"
|
|
26
|
+
: "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
|
|
27
|
+
month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
|
|
28
|
+
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
29
|
+
weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
|
|
30
|
+
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
|
31
|
+
week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
|
|
32
|
+
week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
|
|
33
|
+
day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber
|
|
34
|
+
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
|
|
35
|
+
: "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
|
|
36
|
+
range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
|
|
37
|
+
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
38
|
+
range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
|
|
39
|
+
today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
|
|
40
|
+
outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
|
|
41
|
+
disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
|
|
42
|
+
hidden: cn("invisible", defaultClassNames.hidden),
|
|
43
|
+
...classNames,
|
|
44
|
+
}, components: {
|
|
45
|
+
Root: ({ className, rootRef, ...props }) => {
|
|
46
|
+
return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
|
|
47
|
+
},
|
|
48
|
+
Chevron: ({ className, orientation, ...props }) => {
|
|
49
|
+
if (orientation === "left") {
|
|
50
|
+
return (_jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props }));
|
|
51
|
+
}
|
|
52
|
+
if (orientation === "right") {
|
|
53
|
+
return (_jsx(ChevronRightIcon, { className: cn("size-4", className), ...props }));
|
|
54
|
+
}
|
|
55
|
+
return (_jsx(ChevronDownIcon, { className: cn("size-4", className), ...props }));
|
|
56
|
+
},
|
|
57
|
+
DayButton: ({ ...props }) => (_jsx(CalendarDayButton, { locale: locale, ...props })),
|
|
58
|
+
WeekNumber: ({ children, ...props }) => {
|
|
59
|
+
return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
|
|
60
|
+
},
|
|
61
|
+
...components,
|
|
62
|
+
}, ...props }));
|
|
63
|
+
}
|
|
64
|
+
function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
|
|
65
|
+
const defaultClassNames = getDefaultClassNames();
|
|
66
|
+
const ref = React.useRef(null);
|
|
67
|
+
React.useEffect(() => {
|
|
68
|
+
if (modifiers.focused)
|
|
69
|
+
ref.current?.focus();
|
|
70
|
+
}, [modifiers.focused]);
|
|
71
|
+
return (_jsx(Button, { variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
|
|
72
|
+
!modifiers.range_start &&
|
|
73
|
+
!modifiers.range_end &&
|
|
74
|
+
!modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
|
|
75
|
+
}
|
|
76
|
+
export { Calendar, CalendarDayButton };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
|
|
3
|
+
size?: "default" | "sm";
|
|
4
|
+
}): React.JSX.Element;
|
|
5
|
+
declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
6
|
+
declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
7
|
+
declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
8
|
+
declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
9
|
+
declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
10
|
+
declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "#lib/utils";
|
|
3
|
+
function Card({ className, size = "default", ...props }) {
|
|
4
|
+
return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-2xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
|
|
5
|
+
}
|
|
6
|
+
function CardHeader({ className, ...props }) {
|
|
7
|
+
return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
function CardTitle({ className, ...props }) {
|
|
10
|
+
return (_jsx("div", { "data-slot": "card-title", className: cn("text-base font-medium", className), ...props }));
|
|
11
|
+
}
|
|
12
|
+
function CardDescription({ className, ...props }) {
|
|
13
|
+
return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
|
|
14
|
+
}
|
|
15
|
+
function CardAction({ className, ...props }) {
|
|
16
|
+
return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
|
|
17
|
+
}
|
|
18
|
+
function CardContent({ className, ...props }) {
|
|
19
|
+
return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
|
|
20
|
+
}
|
|
21
|
+
function CardFooter({ className, ...props }) {
|
|
22
|
+
return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)", className), ...props }));
|
|
23
|
+
}
|
|
24
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
|
|
3
|
+
import { Button } from "#components/button";
|
|
4
|
+
type CarouselApi = UseEmblaCarouselType[1];
|
|
5
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
6
|
+
type CarouselOptions = UseCarouselParameters[0];
|
|
7
|
+
type CarouselPlugin = UseCarouselParameters[1];
|
|
8
|
+
type CarouselProps = {
|
|
9
|
+
opts?: CarouselOptions;
|
|
10
|
+
plugins?: CarouselPlugin;
|
|
11
|
+
orientation?: "horizontal" | "vertical";
|
|
12
|
+
setApi?: (api: CarouselApi) => void;
|
|
13
|
+
};
|
|
14
|
+
type CarouselContextProps = {
|
|
15
|
+
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
|
16
|
+
api: ReturnType<typeof useEmblaCarousel>[1];
|
|
17
|
+
scrollPrev: () => void;
|
|
18
|
+
scrollNext: () => void;
|
|
19
|
+
canScrollPrev: boolean;
|
|
20
|
+
canScrollNext: boolean;
|
|
21
|
+
} & CarouselProps;
|
|
22
|
+
declare function useCarousel(): CarouselContextProps;
|
|
23
|
+
declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
|
|
24
|
+
declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
25
|
+
declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
26
|
+
declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
|
|
27
|
+
declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
|
|
28
|
+
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
import useEmblaCarousel from "embla-carousel-react";
|
|
6
|
+
import { Button } from "#components/button";
|
|
7
|
+
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
8
|
+
const CarouselContext = React.createContext(null);
|
|
9
|
+
function useCarousel() {
|
|
10
|
+
const context = React.useContext(CarouselContext);
|
|
11
|
+
if (!context) {
|
|
12
|
+
throw new Error("useCarousel must be used within a <Carousel />");
|
|
13
|
+
}
|
|
14
|
+
return context;
|
|
15
|
+
}
|
|
16
|
+
function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
|
|
17
|
+
const [carouselRef, api] = useEmblaCarousel({
|
|
18
|
+
...opts,
|
|
19
|
+
axis: orientation === "horizontal" ? "x" : "y",
|
|
20
|
+
}, plugins);
|
|
21
|
+
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
|
22
|
+
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
|
23
|
+
const onSelect = React.useCallback((api) => {
|
|
24
|
+
if (!api)
|
|
25
|
+
return;
|
|
26
|
+
setCanScrollPrev(api.canScrollPrev());
|
|
27
|
+
setCanScrollNext(api.canScrollNext());
|
|
28
|
+
}, []);
|
|
29
|
+
const scrollPrev = React.useCallback(() => {
|
|
30
|
+
api?.scrollPrev();
|
|
31
|
+
}, [api]);
|
|
32
|
+
const scrollNext = React.useCallback(() => {
|
|
33
|
+
api?.scrollNext();
|
|
34
|
+
}, [api]);
|
|
35
|
+
const handleKeyDown = React.useCallback((event) => {
|
|
36
|
+
if (event.key === "ArrowLeft") {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
scrollPrev();
|
|
39
|
+
}
|
|
40
|
+
else if (event.key === "ArrowRight") {
|
|
41
|
+
event.preventDefault();
|
|
42
|
+
scrollNext();
|
|
43
|
+
}
|
|
44
|
+
}, [scrollPrev, scrollNext]);
|
|
45
|
+
React.useEffect(() => {
|
|
46
|
+
if (!api || !setApi)
|
|
47
|
+
return;
|
|
48
|
+
setApi(api);
|
|
49
|
+
}, [api, setApi]);
|
|
50
|
+
React.useEffect(() => {
|
|
51
|
+
if (!api)
|
|
52
|
+
return;
|
|
53
|
+
onSelect(api);
|
|
54
|
+
api.on("reInit", onSelect);
|
|
55
|
+
api.on("select", onSelect);
|
|
56
|
+
return () => {
|
|
57
|
+
api?.off("select", onSelect);
|
|
58
|
+
};
|
|
59
|
+
}, [api, onSelect]);
|
|
60
|
+
return (_jsx(CarouselContext.Provider, { value: {
|
|
61
|
+
carouselRef,
|
|
62
|
+
api: api,
|
|
63
|
+
opts,
|
|
64
|
+
orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
65
|
+
scrollPrev,
|
|
66
|
+
scrollNext,
|
|
67
|
+
canScrollPrev,
|
|
68
|
+
canScrollNext,
|
|
69
|
+
}, children: _jsx("div", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
|
|
70
|
+
}
|
|
71
|
+
function CarouselContent({ className, ...props }) {
|
|
72
|
+
const { carouselRef, orientation } = useCarousel();
|
|
73
|
+
return (_jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: _jsx("div", { className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className), ...props }) }));
|
|
74
|
+
}
|
|
75
|
+
function CarouselItem({ className, ...props }) {
|
|
76
|
+
const { orientation } = useCarousel();
|
|
77
|
+
return (_jsx("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className), ...props }));
|
|
78
|
+
}
|
|
79
|
+
function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
|
|
80
|
+
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
81
|
+
return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
|
|
82
|
+
? "inset-y-0 -left-12 my-auto"
|
|
83
|
+
: "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "sr-only", children: "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0441\u043B\u0430\u0439\u0434" })] }));
|
|
84
|
+
}
|
|
85
|
+
function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
|
|
86
|
+
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
87
|
+
return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
|
|
88
|
+
? "inset-y-0 -right-12 my-auto"
|
|
89
|
+
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [_jsx(ChevronRightIcon, {}), _jsx("span", { className: "sr-only", children: "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0441\u043B\u0430\u0439\u0434" })] }));
|
|
90
|
+
}
|
|
91
|
+
export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as RechartsPrimitive from "recharts";
|
|
3
|
+
import type { TooltipValueType } from "recharts";
|
|
4
|
+
declare const THEMES: {
|
|
5
|
+
readonly light: "";
|
|
6
|
+
readonly dark: ".dark";
|
|
7
|
+
};
|
|
8
|
+
type TooltipNameType = number | string;
|
|
9
|
+
export type ChartConfig = Record<string, {
|
|
10
|
+
label?: React.ReactNode;
|
|
11
|
+
icon?: React.ComponentType;
|
|
12
|
+
} & ({
|
|
13
|
+
color?: string;
|
|
14
|
+
theme?: never;
|
|
15
|
+
} | {
|
|
16
|
+
color?: never;
|
|
17
|
+
theme: Record<keyof typeof THEMES, string>;
|
|
18
|
+
})>;
|
|
19
|
+
declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
|
|
20
|
+
config: ChartConfig;
|
|
21
|
+
children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
|
|
22
|
+
initialDimension?: {
|
|
23
|
+
width: number;
|
|
24
|
+
height: number;
|
|
25
|
+
};
|
|
26
|
+
}): React.JSX.Element;
|
|
27
|
+
declare const ChartStyle: ({ id, config }: {
|
|
28
|
+
id: string;
|
|
29
|
+
config: ChartConfig;
|
|
30
|
+
}) => React.JSX.Element | null;
|
|
31
|
+
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
32
|
+
declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
|
|
33
|
+
hideLabel?: boolean;
|
|
34
|
+
hideIndicator?: boolean;
|
|
35
|
+
indicator?: "line" | "dot" | "dashed";
|
|
36
|
+
nameKey?: string;
|
|
37
|
+
labelKey?: string;
|
|
38
|
+
} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
|
|
39
|
+
declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
|
|
40
|
+
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
|
|
41
|
+
hideIcon?: boolean;
|
|
42
|
+
nameKey?: string;
|
|
43
|
+
} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
|
|
44
|
+
export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
|