harebear-ui 0.0.0-stage → 0.1.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 +63 -0
- package/LICENSE +21 -0
- package/README.md +92 -2
- package/bin/harebear-ui.mjs +125 -0
- package/dist/components/admin/activity-feed.d.ts +15 -0
- package/dist/components/admin/activity-feed.js +50 -0
- package/dist/components/admin/app-shell.d.ts +47 -0
- package/dist/components/admin/app-shell.js +108 -0
- package/dist/components/admin/callout.d.ts +7 -0
- package/dist/components/admin/callout.js +18 -0
- package/dist/components/admin/key-value-grid.d.ts +11 -0
- package/dist/components/admin/key-value-grid.js +23 -0
- package/dist/components/admin/link-tile.d.ts +17 -0
- package/dist/components/admin/link-tile.js +36 -0
- package/dist/components/admin/page-header.d.ts +14 -0
- package/dist/components/admin/page-header.js +41 -0
- package/dist/components/admin/search-input.d.ts +12 -0
- package/dist/components/admin/search-input.js +32 -0
- package/dist/components/admin/stat-card.d.ts +20 -0
- package/dist/components/admin/stat-card.js +53 -0
- package/dist/components/admin/status.d.ts +12 -0
- package/dist/components/admin/status.js +32 -0
- package/dist/components/admin/timeline.d.ts +13 -0
- package/dist/components/admin/timeline.js +36 -0
- package/dist/components/admin/usage-meter.d.ts +17 -0
- package/dist/components/admin/usage-meter.js +43 -0
- package/dist/components/admin/user-chip.d.ts +14 -0
- package/dist/components/admin/user-chip.js +38 -0
- package/dist/components/ai/chat.d.ts +44 -0
- package/dist/components/ai/chat.js +147 -0
- package/dist/components/ai/code-block.d.ts +21 -0
- package/dist/components/ai/code-block.js +53 -0
- package/dist/components/ai/conversation-list.d.ts +18 -0
- package/dist/components/ai/conversation-list.js +30 -0
- package/dist/components/ai/model-picker.d.ts +21 -0
- package/dist/components/ai/model-picker.js +55 -0
- package/dist/components/ai/prompt-input.d.ts +27 -0
- package/dist/components/ai/prompt-input.js +99 -0
- package/dist/components/data/bar-list.d.ts +14 -0
- package/dist/components/data/bar-list.js +27 -0
- package/dist/components/data/data-table.d.ts +70 -0
- package/dist/components/data/data-table.js +208 -0
- package/dist/components/data/sparkline.d.ts +16 -0
- package/dist/components/data/sparkline.js +72 -0
- package/dist/components/data/status-bars.d.ts +17 -0
- package/dist/components/data/status-bars.js +37 -0
- package/dist/components/data/trend-chart.d.ts +31 -0
- package/dist/components/data/trend-chart.js +136 -0
- package/dist/components/theme/theme-provider.d.ts +42 -0
- package/dist/components/theme/theme-provider.js +110 -0
- package/dist/components/theme/theme-toggle.d.ts +5 -0
- package/dist/components/theme/theme-toggle.js +20 -0
- package/dist/components/ui/accordion.d.ts +7 -0
- package/dist/components/ui/accordion.js +53 -0
- package/dist/components/ui/alert-dialog.d.ts +18 -0
- package/dist/components/ui/alert-dialog.js +99 -0
- package/dist/components/ui/alert.d.ts +10 -0
- package/dist/components/ui/alert.js +42 -0
- package/dist/components/ui/aspect-ratio.d.ts +3 -0
- package/dist/components/ui/aspect-ratio.js +11 -0
- package/dist/components/ui/avatar.d.ts +11 -0
- package/dist/components/ui/avatar.js +49 -0
- package/dist/components/ui/badge.d.ts +9 -0
- package/dist/components/ui/badge.js +30 -0
- package/dist/components/ui/breadcrumb.d.ts +11 -0
- package/dist/components/ui/breadcrumb.js +70 -0
- package/dist/components/ui/button-group.d.ts +11 -0
- package/dist/components/ui/button-group.js +39 -0
- package/dist/components/ui/button.d.ts +11 -0
- package/dist/components/ui/button.js +55 -0
- package/dist/components/ui/calendar.d.ts +10 -0
- package/dist/components/ui/calendar.js +108 -0
- package/dist/components/ui/card.d.ts +11 -0
- package/dist/components/ui/card.js +55 -0
- package/dist/components/ui/carousel.d.ts +28 -0
- package/dist/components/ui/carousel.js +131 -0
- package/dist/components/ui/chart.d.ts +44 -0
- package/dist/components/ui/chart.js +148 -0
- package/dist/components/ui/checkbox.d.ts +4 -0
- package/dist/components/ui/checkbox.js +19 -0
- package/dist/components/ui/collapsible.d.ts +5 -0
- package/dist/components/ui/collapsible.js +23 -0
- package/dist/components/ui/command.d.ts +18 -0
- package/dist/components/ui/command.js +86 -0
- package/dist/components/ui/context-menu.d.ts +31 -0
- package/dist/components/ui/context-menu.js +123 -0
- package/dist/components/ui/dialog.d.ts +17 -0
- package/dist/components/ui/dialog.js +94 -0
- package/dist/components/ui/drawer.d.ts +13 -0
- package/dist/components/ui/drawer.js +76 -0
- package/dist/components/ui/dropdown-menu.d.ts +29 -0
- package/dist/components/ui/dropdown-menu.js +126 -0
- package/dist/components/ui/empty.d.ts +11 -0
- package/dist/components/ui/empty.js +59 -0
- package/dist/components/ui/field.d.ts +24 -0
- package/dist/components/ui/field.js +109 -0
- package/dist/components/ui/hover-card.d.ts +6 -0
- package/dist/components/ui/hover-card.js +30 -0
- package/dist/components/ui/input-group.d.ts +16 -0
- package/dist/components/ui/input-group.js +77 -0
- package/dist/components/ui/input-otp.d.ts +11 -0
- package/dist/components/ui/input-otp.js +46 -0
- package/dist/components/ui/input.d.ts +3 -0
- package/dist/components/ui/input.js +13 -0
- package/dist/components/ui/item.d.ts +23 -0
- package/dist/components/ui/item.js +117 -0
- package/dist/components/ui/kbd.d.ts +3 -0
- package/dist/components/ui/kbd.js +19 -0
- package/dist/components/ui/label.d.ts +4 -0
- package/dist/components/ui/label.js +13 -0
- package/dist/components/ui/menubar.d.ts +30 -0
- package/dist/components/ui/menubar.js +133 -0
- package/dist/components/ui/navigation-menu.d.ts +14 -0
- package/dist/components/ui/navigation-menu.js +79 -0
- package/dist/components/ui/pagination.d.ts +17 -0
- package/dist/components/ui/pagination.js +79 -0
- package/dist/components/ui/popover.d.ts +10 -0
- package/dist/components/ui/popover.js +54 -0
- package/dist/components/ui/progress.d.ts +4 -0
- package/dist/components/ui/progress.js +18 -0
- package/dist/components/ui/radio-group.d.ts +5 -0
- package/dist/components/ui/radio-group.js +25 -0
- package/dist/components/ui/resizable.d.ts +7 -0
- package/dist/components/ui/resizable.js +27 -0
- package/dist/components/ui/scroll-area.d.ts +5 -0
- package/dist/components/ui/scroll-area.js +35 -0
- package/dist/components/ui/select.d.ts +15 -0
- package/dist/components/ui/select.js +98 -0
- package/dist/components/ui/separator.d.ts +4 -0
- package/dist/components/ui/separator.js +15 -0
- package/dist/components/ui/sheet.d.ts +14 -0
- package/dist/components/ui/sheet.js +88 -0
- package/dist/components/ui/sidebar.d.ts +69 -0
- package/dist/components/ui/sidebar.js +377 -0
- package/dist/components/ui/skeleton.d.ts +2 -0
- package/dist/components/ui/skeleton.js +12 -0
- package/dist/components/ui/slider.d.ts +4 -0
- package/dist/components/ui/slider.js +35 -0
- package/dist/components/ui/sonner.d.ts +3 -0
- package/dist/components/ui/sonner.js +29 -0
- package/dist/components/ui/spinner.d.ts +2 -0
- package/dist/components/ui/spinner.js +15 -0
- package/dist/components/ui/switch.d.ts +6 -0
- package/dist/components/ui/switch.js +18 -0
- package/dist/components/ui/table.d.ts +10 -0
- package/dist/components/ui/table.js +65 -0
- package/dist/components/ui/tabs.d.ts +11 -0
- package/dist/components/ui/tabs.js +45 -0
- package/dist/components/ui/textarea.d.ts +3 -0
- package/dist/components/ui/textarea.js +12 -0
- package/dist/components/ui/toggle-group.d.ts +10 -0
- package/dist/components/ui/toggle-group.js +50 -0
- package/dist/components/ui/toggle.d.ts +9 -0
- package/dist/components/ui/toggle.js +35 -0
- package/dist/components/ui/tooltip.d.ts +7 -0
- package/dist/components/ui/tooltip.js +34 -0
- package/dist/hooks/use-copy-to-clipboard.d.ts +5 -0
- package/dist/hooks/use-copy-to-clipboard.js +24 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js +17 -0
- package/dist/index.d.ts +80 -0
- package/dist/index.js +80 -0
- package/dist/lib/utils.d.ts +3 -0
- package/dist/lib/utils.js +8 -0
- package/dist/shadcn-base.css +638 -0
- package/dist/styles.css +188 -0
- package/docs/COMPONENTS.md +352 -0
- package/llms.txt +34 -0
- package/package.json +116 -4
- package/skills/harebear-ui/SKILL.md +33 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Avatar as Avatar$1 } from "radix-ui";
|
|
3
|
+
declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
|
|
4
|
+
size?: "default" | "sm" | "lg";
|
|
5
|
+
}): React.JSX.Element;
|
|
6
|
+
declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof Avatar$1.Image>): React.JSX.Element;
|
|
7
|
+
declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Avatar$1.Fallback>): React.JSX.Element;
|
|
8
|
+
declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
9
|
+
declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
10
|
+
declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
|
+
export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Avatar as Avatar$1 } from "radix-ui";
|
|
5
|
+
// src/components/ui/avatar.tsx
|
|
6
|
+
function Avatar({ className, size = "default", ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Avatar$1.Root, {
|
|
8
|
+
"data-slot": "avatar",
|
|
9
|
+
"data-size": size,
|
|
10
|
+
className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-14 data-[size=sm]:size-7 data-[size=default]:size-9", className),
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function AvatarImage({ className, ...props }) {
|
|
15
|
+
return /* @__PURE__ */ jsx(Avatar$1.Image, {
|
|
16
|
+
"data-slot": "avatar-image",
|
|
17
|
+
className: cn("aspect-square size-full rounded-full object-cover", className),
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function AvatarFallback({ className, ...props }) {
|
|
22
|
+
return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
|
|
23
|
+
"data-slot": "avatar-fallback",
|
|
24
|
+
className: cn("flex size-full items-center justify-center rounded-full bg-primary-soft text-[13px] font-semibold text-primary group-data-[size=sm]/avatar:text-[11px] group-data-[size=lg]/avatar:text-lg", className),
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function AvatarBadge({ className, ...props }) {
|
|
29
|
+
return /* @__PURE__ */ jsx("span", {
|
|
30
|
+
"data-slot": "avatar-badge",
|
|
31
|
+
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),
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
function AvatarGroup({ className, ...props }) {
|
|
36
|
+
return /* @__PURE__ */ jsx("div", {
|
|
37
|
+
"data-slot": "avatar-group",
|
|
38
|
+
className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
|
|
39
|
+
...props
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function AvatarGroupCount({ className, ...props }) {
|
|
43
|
+
return /* @__PURE__ */ jsx("div", {
|
|
44
|
+
"data-slot": "avatar-group-count",
|
|
45
|
+
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),
|
|
46
|
+
...props
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | "soft" | "success" | "warning" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
|
|
7
|
+
asChild?: boolean;
|
|
8
|
+
}): React.JSX.Element;
|
|
9
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { Slot } from "radix-ui";
|
|
6
|
+
// src/components/ui/badge.tsx
|
|
7
|
+
const badgeVariants = cva("group/badge inline-flex h-6 w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-full border border-transparent px-2.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.5!", {
|
|
8
|
+
variants: { variant: {
|
|
9
|
+
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
10
|
+
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
|
11
|
+
soft: "bg-primary-soft text-primary",
|
|
12
|
+
success: "bg-success/12 text-success",
|
|
13
|
+
warning: "bg-warning/12 text-warning",
|
|
14
|
+
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",
|
|
15
|
+
outline: "border-border bg-card text-foreground [a]:hover:bg-muted",
|
|
16
|
+
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
17
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
18
|
+
} },
|
|
19
|
+
defaultVariants: { variant: "default" }
|
|
20
|
+
});
|
|
21
|
+
function Badge({ className, variant = "default", asChild = false, ...props }) {
|
|
22
|
+
const Comp = asChild ? Slot.Root : "span";
|
|
23
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
24
|
+
"data-slot": "badge",
|
|
25
|
+
"data-variant": variant,
|
|
26
|
+
className: cn(badgeVariants({ variant }), className),
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
|
|
3
|
+
declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
|
|
4
|
+
declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
5
|
+
declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
}): React.JSX.Element;
|
|
8
|
+
declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
9
|
+
declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
10
|
+
declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
11
|
+
export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
|
5
|
+
import { Slot } from "radix-ui";
|
|
6
|
+
// src/components/ui/breadcrumb.tsx
|
|
7
|
+
function Breadcrumb({ className, ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
9
|
+
"aria-label": "breadcrumb",
|
|
10
|
+
"data-slot": "breadcrumb",
|
|
11
|
+
className: cn(className),
|
|
12
|
+
...props
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function BreadcrumbList({ className, ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx("ol", {
|
|
17
|
+
"data-slot": "breadcrumb-list",
|
|
18
|
+
className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className),
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function BreadcrumbItem({ className, ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx("li", {
|
|
24
|
+
"data-slot": "breadcrumb-item",
|
|
25
|
+
className: cn("inline-flex items-center gap-1", className),
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function BreadcrumbLink({ asChild, className, ...props }) {
|
|
30
|
+
const Comp = asChild ? Slot.Root : "a";
|
|
31
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
32
|
+
"data-slot": "breadcrumb-link",
|
|
33
|
+
className: cn("transition-colors hover:text-foreground", className),
|
|
34
|
+
...props
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function BreadcrumbPage({ className, ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsx("span", {
|
|
39
|
+
"data-slot": "breadcrumb-page",
|
|
40
|
+
role: "link",
|
|
41
|
+
"aria-disabled": "true",
|
|
42
|
+
"aria-current": "page",
|
|
43
|
+
className: cn("font-normal text-foreground", className),
|
|
44
|
+
...props
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
48
|
+
return /* @__PURE__ */ jsx("li", {
|
|
49
|
+
"data-slot": "breadcrumb-separator",
|
|
50
|
+
role: "presentation",
|
|
51
|
+
"aria-hidden": "true",
|
|
52
|
+
className: cn("[&>svg]:size-3.5", className),
|
|
53
|
+
...props,
|
|
54
|
+
children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
function BreadcrumbEllipsis({ className, ...props }) {
|
|
58
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
59
|
+
"data-slot": "breadcrumb-ellipsis",
|
|
60
|
+
role: "presentation",
|
|
61
|
+
"aria-hidden": "true",
|
|
62
|
+
className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className),
|
|
63
|
+
...props,
|
|
64
|
+
children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
65
|
+
className: "sr-only",
|
|
66
|
+
children: "More"
|
|
67
|
+
})]
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Separator } from "./separator.js";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const buttonGroupVariants: (props?: ({
|
|
4
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
|
|
7
|
+
declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
}): import("react").JSX.Element;
|
|
10
|
+
declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
|
|
11
|
+
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { Separator as Separator$1 } from "./separator.js";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cva } from "class-variance-authority";
|
|
6
|
+
import { Slot } from "radix-ui";
|
|
7
|
+
// src/components/ui/button-group.tsx
|
|
8
|
+
const buttonGroupVariants = cva("group/button-group 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-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
|
|
9
|
+
variants: { orientation: {
|
|
10
|
+
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!",
|
|
11
|
+
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!"
|
|
12
|
+
} },
|
|
13
|
+
defaultVariants: { orientation: "horizontal" }
|
|
14
|
+
});
|
|
15
|
+
function ButtonGroup({ className, orientation, ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx("div", {
|
|
17
|
+
role: "group",
|
|
18
|
+
"data-slot": "button-group",
|
|
19
|
+
"data-orientation": orientation,
|
|
20
|
+
className: cn(buttonGroupVariants({ orientation }), className),
|
|
21
|
+
...props
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function ButtonGroupText({ className, asChild = false, ...props }) {
|
|
25
|
+
const Comp = asChild ? Slot.Root : "div";
|
|
26
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
27
|
+
className: cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
32
|
+
return /* @__PURE__ */ jsx(Separator$1, {
|
|
33
|
+
"data-slot": "button-group-separator",
|
|
34
|
+
orientation,
|
|
35
|
+
className: cn("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className),
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "dashed" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | "soft" | null | undefined;
|
|
5
|
+
size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
|
|
6
|
+
shape?: "default" | "pill" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
declare function Button({ className, variant, size, shape, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
9
|
+
asChild?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { Slot } from "radix-ui";
|
|
6
|
+
// src/components/ui/button.tsx
|
|
7
|
+
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,color,box-shadow,border-color] outline-none select-none focus-visible:ring-4 focus-visible:ring-ring/20 focus-visible:border-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[18px]", {
|
|
8
|
+
variants: {
|
|
9
|
+
variant: {
|
|
10
|
+
default: "bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--primary),black_10%)]",
|
|
11
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklab,var(--secondary),var(--foreground)_6%)] aria-expanded:bg-[color-mix(in_oklab,var(--secondary),var(--foreground)_6%)]",
|
|
12
|
+
outline: "border-border bg-card text-foreground hover:bg-muted aria-expanded:bg-muted",
|
|
13
|
+
ghost: "text-muted-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
|
|
14
|
+
soft: "bg-primary-soft text-primary hover:bg-[color-mix(in_oklab,var(--primary-soft),var(--primary)_8%)]",
|
|
15
|
+
dashed: "border-dashed border-border bg-transparent text-muted-foreground hover:border-muted-foreground hover:text-foreground",
|
|
16
|
+
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",
|
|
17
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
18
|
+
},
|
|
19
|
+
size: {
|
|
20
|
+
default: "h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
|
|
21
|
+
xs: "h-6 gap-1 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
|
|
22
|
+
sm: "h-8 gap-1.5 px-3 text-[13px] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
|
|
23
|
+
lg: "h-11 gap-2 px-5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
|
|
24
|
+
icon: "size-10",
|
|
25
|
+
"icon-xs": "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3",
|
|
26
|
+
"icon-sm": "size-8 [&_svg:not([class*='size-'])]:size-4",
|
|
27
|
+
"icon-lg": "size-11"
|
|
28
|
+
},
|
|
29
|
+
shape: {
|
|
30
|
+
default: "",
|
|
31
|
+
pill: "rounded-full"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: {
|
|
35
|
+
variant: "default",
|
|
36
|
+
size: "default",
|
|
37
|
+
shape: "default"
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
function Button({ className, variant = "default", size = "default", shape = "default", asChild = false, ...props }) {
|
|
41
|
+
const Comp = asChild ? Slot.Root : "button";
|
|
42
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
43
|
+
"data-slot": "button",
|
|
44
|
+
"data-variant": variant,
|
|
45
|
+
"data-size": size,
|
|
46
|
+
className: cn(buttonVariants({
|
|
47
|
+
variant,
|
|
48
|
+
size,
|
|
49
|
+
shape,
|
|
50
|
+
className
|
|
51
|
+
})),
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Button } from "./button.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { DayButton, DayPicker, Locale } from "react-day-picker";
|
|
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,108 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { Button, buttonVariants } from "./button.js";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
7
|
+
import { DayPicker, getDefaultClassNames } from "react-day-picker";
|
|
8
|
+
// src/components/ui/calendar.tsx
|
|
9
|
+
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
|
|
10
|
+
const defaultClassNames = getDefaultClassNames();
|
|
11
|
+
return /* @__PURE__ */ jsx(DayPicker, {
|
|
12
|
+
showOutsideDays,
|
|
13
|
+
className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] 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),
|
|
14
|
+
captionLayout,
|
|
15
|
+
locale,
|
|
16
|
+
formatters: {
|
|
17
|
+
formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
|
|
18
|
+
...formatters
|
|
19
|
+
},
|
|
20
|
+
classNames: {
|
|
21
|
+
root: cn("w-fit", defaultClassNames.root),
|
|
22
|
+
months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
|
|
23
|
+
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
|
24
|
+
nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
|
|
25
|
+
button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
|
|
26
|
+
button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
|
|
27
|
+
month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
|
|
28
|
+
dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
|
|
29
|
+
dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
|
|
30
|
+
dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
|
|
31
|
+
caption_label: cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
|
|
32
|
+
month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
|
|
33
|
+
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
34
|
+
weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
|
|
35
|
+
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
|
36
|
+
week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
|
|
37
|
+
week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
|
|
38
|
+
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 ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
|
|
39
|
+
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),
|
|
40
|
+
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
41
|
+
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),
|
|
42
|
+
today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
|
|
43
|
+
outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
|
|
44
|
+
disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
|
|
45
|
+
hidden: cn("invisible", defaultClassNames.hidden),
|
|
46
|
+
...classNames
|
|
47
|
+
},
|
|
48
|
+
components: {
|
|
49
|
+
Root: ({ className, rootRef, ...props }) => {
|
|
50
|
+
return /* @__PURE__ */ jsx("div", {
|
|
51
|
+
"data-slot": "calendar",
|
|
52
|
+
ref: rootRef,
|
|
53
|
+
className: cn(className),
|
|
54
|
+
...props
|
|
55
|
+
});
|
|
56
|
+
},
|
|
57
|
+
Chevron: ({ className, orientation, ...props }) => {
|
|
58
|
+
if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
|
|
59
|
+
className: cn("size-4", className),
|
|
60
|
+
...props
|
|
61
|
+
});
|
|
62
|
+
if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
63
|
+
className: cn("size-4", className),
|
|
64
|
+
...props
|
|
65
|
+
});
|
|
66
|
+
return /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
67
|
+
className: cn("size-4", className),
|
|
68
|
+
...props
|
|
69
|
+
});
|
|
70
|
+
},
|
|
71
|
+
DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
|
|
72
|
+
locale,
|
|
73
|
+
...props
|
|
74
|
+
}),
|
|
75
|
+
WeekNumber: ({ children, ...props }) => {
|
|
76
|
+
return /* @__PURE__ */ jsx("td", {
|
|
77
|
+
...props,
|
|
78
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
79
|
+
className: "flex size-(--cell-size) items-center justify-center text-center",
|
|
80
|
+
children
|
|
81
|
+
})
|
|
82
|
+
});
|
|
83
|
+
},
|
|
84
|
+
...components
|
|
85
|
+
},
|
|
86
|
+
...props
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
|
|
90
|
+
const defaultClassNames = getDefaultClassNames();
|
|
91
|
+
const ref = React.useRef(null);
|
|
92
|
+
React.useEffect(() => {
|
|
93
|
+
if (modifiers.focused) ref.current?.focus();
|
|
94
|
+
}, [modifiers.focused]);
|
|
95
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
96
|
+
ref,
|
|
97
|
+
variant: "ghost",
|
|
98
|
+
size: "icon",
|
|
99
|
+
"data-day": day.date.toLocaleDateString(locale?.code),
|
|
100
|
+
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
101
|
+
"data-range-start": modifiers.range_start,
|
|
102
|
+
"data-range-end": modifiers.range_end,
|
|
103
|
+
"data-range-middle": modifiers.range_middle,
|
|
104
|
+
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),
|
|
105
|
+
...props
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
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, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
// src/components/ui/card.tsx
|
|
5
|
+
function Card({ className, size = "default", ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx("div", {
|
|
7
|
+
"data-slot": "card",
|
|
8
|
+
"data-size": size,
|
|
9
|
+
className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border bg-card py-(--card-spacing) text-sm text-card-foreground shadow-card [--card-spacing:--spacing(6)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function CardHeader({ className, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx("div", {
|
|
15
|
+
"data-slot": "card-header",
|
|
16
|
+
className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 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),
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function CardTitle({ className, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx("div", {
|
|
22
|
+
"data-slot": "card-title",
|
|
23
|
+
className: cn("text-base leading-snug font-semibold group-data-[size=sm]/card:text-sm", className),
|
|
24
|
+
...props
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function CardDescription({ className, ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsx("div", {
|
|
29
|
+
"data-slot": "card-description",
|
|
30
|
+
className: cn("text-[13px] text-muted-foreground", className),
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function CardAction({ className, ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx("div", {
|
|
36
|
+
"data-slot": "card-action",
|
|
37
|
+
className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function CardContent({ className, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx("div", {
|
|
43
|
+
"data-slot": "card-content",
|
|
44
|
+
className: cn("px-(--card-spacing)", className),
|
|
45
|
+
...props
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function CardFooter({ className, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx("div", {
|
|
50
|
+
"data-slot": "card-footer",
|
|
51
|
+
className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className),
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Button } from "./button.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
|
|
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 { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
|