@windrun-huaiin/base-ui 3.3.0 → 3.5.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.
Files changed (60) hide show
  1. package/dist/index.d.mts +2 -38
  2. package/dist/index.d.ts +2 -38
  3. package/dist/index.js +187 -4263
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +184 -4037
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/ui/index.d.mts +37 -711
  8. package/dist/ui/index.d.ts +37 -711
  9. package/dist/ui/index.js +172 -4248
  10. package/dist/ui/index.js.map +1 -1
  11. package/dist/ui/index.mjs +171 -4024
  12. package/dist/ui/index.mjs.map +1 -1
  13. package/package.json +2 -36
  14. package/src/ui/index.ts +2 -48
  15. package/src/ui/accordion.tsx +0 -58
  16. package/src/ui/alert.tsx +0 -59
  17. package/src/ui/aspect-ratio.tsx +0 -7
  18. package/src/ui/avatar.tsx +0 -50
  19. package/src/ui/badge.tsx +0 -36
  20. package/src/ui/breadcrumb.tsx +0 -115
  21. package/src/ui/calendar.tsx +0 -66
  22. package/src/ui/card.tsx +0 -79
  23. package/src/ui/carousel.tsx +0 -262
  24. package/src/ui/chart.tsx +0 -365
  25. package/src/ui/checkbox.tsx +0 -30
  26. package/src/ui/collapsible.tsx +0 -11
  27. package/src/ui/command.tsx +0 -153
  28. package/src/ui/context-menu.tsx +0 -200
  29. package/src/ui/dialog.tsx +0 -122
  30. package/src/ui/drawer.tsx +0 -118
  31. package/src/ui/form.tsx +0 -178
  32. package/src/ui/hover-card.tsx +0 -29
  33. package/src/ui/input-otp.tsx +0 -71
  34. package/src/ui/input.tsx +0 -22
  35. package/src/ui/menubar.tsx +0 -236
  36. package/src/ui/navigation-menu.tsx +0 -128
  37. package/src/ui/pagination.tsx +0 -117
  38. package/src/ui/popover.tsx +0 -31
  39. package/src/ui/progress.tsx +0 -28
  40. package/src/ui/radio-group.tsx +0 -44
  41. package/src/ui/resizable.tsx +0 -45
  42. package/src/ui/scroll-area.tsx +0 -48
  43. package/src/ui/select.tsx +0 -160
  44. package/src/ui/separator.tsx +0 -31
  45. package/src/ui/sheet.tsx +0 -140
  46. package/src/ui/sidebar.tsx +0 -763
  47. package/src/ui/skeleton.tsx +0 -15
  48. package/src/ui/slider.tsx +0 -28
  49. package/src/ui/sonner.tsx +0 -31
  50. package/src/ui/switch.tsx +0 -29
  51. package/src/ui/table.tsx +0 -117
  52. package/src/ui/tabs.tsx +0 -55
  53. package/src/ui/textarea.tsx +0 -22
  54. package/src/ui/toast.tsx +0 -129
  55. package/src/ui/toaster.tsx +0 -35
  56. package/src/ui/toggle-group.tsx +0 -61
  57. package/src/ui/toggle.tsx +0 -45
  58. package/src/ui/tooltip.tsx +0 -30
  59. package/src/ui/use-mobile.tsx +0 -19
  60. package/src/ui/use-toast.ts +0 -194
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@windrun-huaiin/base-ui",
3
- "version": "3.3.0",
3
+ "version": "3.5.0",
4
4
  "description": "Base UI components for windrun-huaiin projects",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -42,50 +42,16 @@
42
42
  "LICENSE"
43
43
  ],
44
44
  "dependencies": {
45
- "@radix-ui/react-accordion": "^1.2.10",
46
45
  "@radix-ui/react-alert-dialog": "^1.1.13",
47
- "@radix-ui/react-aspect-ratio": "^1.1.6",
48
- "@radix-ui/react-avatar": "^1.1.9",
49
- "@radix-ui/react-checkbox": "^1.3.1",
50
- "@radix-ui/react-collapsible": "^1.1.10",
51
- "@radix-ui/react-context-menu": "^2.2.14",
52
- "@radix-ui/react-dialog": "^1.1.13",
53
46
  "@radix-ui/react-dropdown-menu": "^2.1.14",
54
- "@radix-ui/react-hover-card": "^1.1.13",
55
47
  "@radix-ui/react-label": "^2.1.6",
56
- "@radix-ui/react-menubar": "^1.1.14",
57
- "@radix-ui/react-navigation-menu": "^1.2.12",
58
- "@radix-ui/react-popover": "^1.1.13",
59
- "@radix-ui/react-progress": "^1.1.6",
60
- "@radix-ui/react-radio-group": "^1.3.6",
61
- "@radix-ui/react-scroll-area": "^1.2.8",
62
- "@radix-ui/react-select": "^2.2.4",
63
- "@radix-ui/react-separator": "^1.1.6",
64
- "@radix-ui/react-slider": "^1.3.4",
65
48
  "@radix-ui/react-slot": "^1.2.2",
66
- "@radix-ui/react-switch": "^1.2.4",
67
- "@radix-ui/react-tabs": "^1.1.11",
68
- "@radix-ui/react-toast": "^1.2.13",
69
- "@radix-ui/react-toggle": "^1.1.8",
70
- "@radix-ui/react-toggle-group": "^1.1.9",
71
- "@radix-ui/react-tooltip": "^1.2.6",
72
49
  "class-variance-authority": "^0.7.1",
73
- "cmdk": "1.0.4",
74
- "embla-carousel-react": "8.5.1",
75
- "input-otp": "1.4.2",
76
50
  "lucide-react": "^0.511.0",
77
51
  "next": "15.3.2",
78
52
  "next-intl": "^3.26.5",
79
53
  "next-themes": "^0.4.6",
80
- "react": "19.1.0",
81
- "react-day-picker": "8.10.1",
82
- "react-dom": "19.1.0",
83
- "react-hook-form": "^7.56.3",
84
- "react-resizable-panels": "^2.1.9",
85
- "recharts": "2.15.3",
86
- "sonner": "^1.7.4",
87
- "vaul": "^0.9.9",
88
- "@windrun-huaiin/lib": "^3.2.2"
54
+ "@windrun-huaiin/lib": "^3.3.0"
89
55
  },
90
56
  "peerDependencies": {
91
57
  "clsx": "^2.0.0",
package/src/ui/index.ts CHANGED
@@ -1,52 +1,6 @@
1
- // UI Components
2
- export * from './accordion';
1
+ // UI Components - Only actively used components
3
2
  export * from './alert-dialog';
4
- export * from './alert';
5
- export * from './aspect-ratio';
6
- export * from './avatar';
7
- export * from './badge';
8
- export * from './breadcrumb';
9
3
  export { Button, buttonVariants, type ButtonProps } from './button';
10
- export * from './calendar';
11
- export * from './card';
12
- export * from './carousel';
13
- export * from './chart';
14
- export * from './checkbox';
15
- export * from './collapsible';
16
- export * from './command';
17
- export * from './context-menu';
18
- export * from './dialog';
19
- export * from './drawer';
20
4
  export * from './dropdown-menu';
21
- export * from './form';
22
- export * from './hover-card';
23
- export * from './input-otp';
24
- export * from './input';
25
5
  export * from './label';
26
- export { LanguageButton, type LanguageButtonProps } from './language-button';
27
- export * from './menubar';
28
- export * from './navigation-menu';
29
- export * from './pagination';
30
- export * from './popover';
31
- export * from './progress';
32
- export * from './radio-group';
33
- export * from './resizable';
34
- export * from './scroll-area';
35
- export * from './select';
36
- export * from './separator';
37
- export * from './sheet';
38
- export * from './sidebar';
39
- export * from './skeleton';
40
- export * from './slider';
41
- export { Toaster as SonnerToaster } from './sonner';
42
- export * from './switch';
43
- export * from './table';
44
- export * from './tabs';
45
- export * from './textarea';
46
- export * from './toast';
47
- export { Toaster as ToastToaster } from './toaster';
48
- export * from './toggle-group';
49
- export * from './toggle';
50
- export * from './tooltip';
51
- export * from './use-mobile';
52
- export * from './use-toast';
6
+ export { LanguageButton, type LanguageButtonProps } from './language-button';
@@ -1,58 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as AccordionPrimitive from "@radix-ui/react-accordion"
5
- import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
6
-
7
- import { cn } from "@lib/utils"
8
-
9
- const Accordion = AccordionPrimitive.Root
10
-
11
- const AccordionItem = React.forwardRef<
12
- React.ElementRef<typeof AccordionPrimitive.Item>,
13
- React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14
- >(({ className, ...props }, ref) => (
15
- <AccordionPrimitive.Item
16
- ref={ref}
17
- className={cn("border-b", className)}
18
- {...props}
19
- />
20
- ))
21
- AccordionItem.displayName = "AccordionItem"
22
-
23
- const AccordionTrigger = React.forwardRef<
24
- React.ElementRef<typeof AccordionPrimitive.Trigger>,
25
- React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26
- >(({ className, children, ...props }, ref) => (
27
- <AccordionPrimitive.Header className="flex">
28
- <AccordionPrimitive.Trigger
29
- ref={ref}
30
- className={cn(
31
- "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32
- className
33
- )}
34
- {...props}
35
- >
36
- {children}
37
- <icons.ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38
- </AccordionPrimitive.Trigger>
39
- </AccordionPrimitive.Header>
40
- ))
41
- AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42
-
43
- const AccordionContent = React.forwardRef<
44
- React.ElementRef<typeof AccordionPrimitive.Content>,
45
- React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46
- >(({ className, children, ...props }, ref) => (
47
- <AccordionPrimitive.Content
48
- ref={ref}
49
- className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50
- {...props}
51
- >
52
- <div className={cn("pb-4 pt-0", className)}>{children}</div>
53
- </AccordionPrimitive.Content>
54
- ))
55
-
56
- AccordionContent.displayName = AccordionPrimitive.Content.displayName
57
-
58
- export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
package/src/ui/alert.tsx DELETED
@@ -1,59 +0,0 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
-
4
- import { cn } from "@lib/utils"
5
-
6
- const alertVariants = cva(
7
- "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
8
- {
9
- variants: {
10
- variant: {
11
- default: "bg-background text-foreground",
12
- destructive:
13
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14
- },
15
- },
16
- defaultVariants: {
17
- variant: "default",
18
- },
19
- }
20
- )
21
-
22
- const Alert = React.forwardRef<
23
- HTMLDivElement,
24
- React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25
- >(({ className, variant, ...props }, ref) => (
26
- <div
27
- ref={ref}
28
- role="alert"
29
- className={cn(alertVariants({ variant }), className)}
30
- {...props}
31
- />
32
- ))
33
- Alert.displayName = "Alert"
34
-
35
- const AlertTitle = React.forwardRef<
36
- HTMLParagraphElement,
37
- React.HTMLAttributes<HTMLHeadingElement>
38
- >(({ className, ...props }, ref) => (
39
- <h5
40
- ref={ref}
41
- className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42
- {...props}
43
- />
44
- ))
45
- AlertTitle.displayName = "AlertTitle"
46
-
47
- const AlertDescription = React.forwardRef<
48
- HTMLParagraphElement,
49
- React.HTMLAttributes<HTMLParagraphElement>
50
- >(({ className, ...props }, ref) => (
51
- <div
52
- ref={ref}
53
- className={cn("text-sm [&_p]:leading-relaxed", className)}
54
- {...props}
55
- />
56
- ))
57
- AlertDescription.displayName = "AlertDescription"
58
-
59
- export { Alert, AlertTitle, AlertDescription }
@@ -1,7 +0,0 @@
1
- "use client"
2
-
3
- import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4
-
5
- const AspectRatio = AspectRatioPrimitive.Root
6
-
7
- export { AspectRatio }
package/src/ui/avatar.tsx DELETED
@@ -1,50 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as AvatarPrimitive from "@radix-ui/react-avatar"
5
-
6
- import { cn } from "@lib/utils"
7
-
8
- const Avatar = React.forwardRef<
9
- React.ElementRef<typeof AvatarPrimitive.Root>,
10
- React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11
- >(({ className, ...props }, ref) => (
12
- <AvatarPrimitive.Root
13
- ref={ref}
14
- className={cn(
15
- "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16
- className
17
- )}
18
- {...props}
19
- />
20
- ))
21
- Avatar.displayName = AvatarPrimitive.Root.displayName
22
-
23
- const AvatarImage = React.forwardRef<
24
- React.ElementRef<typeof AvatarPrimitive.Image>,
25
- React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26
- >(({ className, ...props }, ref) => (
27
- <AvatarPrimitive.Image
28
- ref={ref}
29
- className={cn("aspect-square h-full w-full", className)}
30
- {...props}
31
- />
32
- ))
33
- AvatarImage.displayName = AvatarPrimitive.Image.displayName
34
-
35
- const AvatarFallback = React.forwardRef<
36
- React.ElementRef<typeof AvatarPrimitive.Fallback>,
37
- React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38
- >(({ className, ...props }, ref) => (
39
- <AvatarPrimitive.Fallback
40
- ref={ref}
41
- className={cn(
42
- "flex h-full w-full items-center justify-center rounded-full bg-muted",
43
- className
44
- )}
45
- {...props}
46
- />
47
- ))
48
- AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49
-
50
- export { Avatar, AvatarImage, AvatarFallback }
package/src/ui/badge.tsx DELETED
@@ -1,36 +0,0 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
-
4
- import { cn } from "@lib/utils"
5
-
6
- const badgeVariants = cva(
7
- "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
8
- {
9
- variants: {
10
- variant: {
11
- default:
12
- "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13
- secondary:
14
- "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15
- destructive:
16
- "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17
- outline: "text-foreground",
18
- },
19
- },
20
- defaultVariants: {
21
- variant: "default",
22
- },
23
- }
24
- )
25
-
26
- export interface BadgeProps
27
- extends React.HTMLAttributes<HTMLDivElement>,
28
- VariantProps<typeof badgeVariants> { }
29
-
30
- function Badge({ className, variant, ...props }: BadgeProps) {
31
- return (
32
- <div className={cn(badgeVariants({ variant }), className)} {...props} />
33
- )
34
- }
35
-
36
- export { Badge, badgeVariants }
@@ -1,115 +0,0 @@
1
- import * as React from "react"
2
- import { Slot } from "@radix-ui/react-slot"
3
- import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
4
-
5
- import { cn } from "@lib/utils"
6
-
7
- const Breadcrumb = React.forwardRef<
8
- HTMLElement,
9
- React.ComponentPropsWithoutRef<"nav"> & {
10
- separator?: React.ReactNode
11
- }
12
- >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
13
- Breadcrumb.displayName = "Breadcrumb"
14
-
15
- const BreadcrumbList = React.forwardRef<
16
- HTMLOListElement,
17
- React.ComponentPropsWithoutRef<"ol">
18
- >(({ className, ...props }, ref) => (
19
- <ol
20
- ref={ref}
21
- className={cn(
22
- "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
23
- className
24
- )}
25
- {...props}
26
- />
27
- ))
28
- BreadcrumbList.displayName = "BreadcrumbList"
29
-
30
- const BreadcrumbItem = React.forwardRef<
31
- HTMLLIElement,
32
- React.ComponentPropsWithoutRef<"li">
33
- >(({ className, ...props }, ref) => (
34
- <li
35
- ref={ref}
36
- className={cn("inline-flex items-center gap-1.5", className)}
37
- {...props}
38
- />
39
- ))
40
- BreadcrumbItem.displayName = "BreadcrumbItem"
41
-
42
- const BreadcrumbLink = React.forwardRef<
43
- HTMLAnchorElement,
44
- React.ComponentPropsWithoutRef<"a"> & {
45
- asChild?: boolean
46
- }
47
- >(({ asChild, className, ...props }, ref) => {
48
- const Comp = asChild ? Slot : "a"
49
-
50
- return (
51
- <Comp
52
- ref={ref}
53
- className={cn("transition-colors hover:text-foreground", className)}
54
- {...props}
55
- />
56
- )
57
- })
58
- BreadcrumbLink.displayName = "BreadcrumbLink"
59
-
60
- const BreadcrumbPage = React.forwardRef<
61
- HTMLSpanElement,
62
- React.ComponentPropsWithoutRef<"span">
63
- >(({ className, ...props }, ref) => (
64
- <span
65
- ref={ref}
66
- role="link"
67
- aria-disabled="true"
68
- aria-current="page"
69
- className={cn("font-normal text-foreground", className)}
70
- {...props}
71
- />
72
- ))
73
- BreadcrumbPage.displayName = "BreadcrumbPage"
74
-
75
- const BreadcrumbSeparator = ({
76
- children,
77
- className,
78
- ...props
79
- }: React.ComponentProps<"li">) => (
80
- <li
81
- role="presentation"
82
- aria-hidden="true"
83
- className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
84
- {...props}
85
- >
86
- {children ?? <icons.ChevronRight />}
87
- </li>
88
- )
89
- BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
90
-
91
- const BreadcrumbEllipsis = ({
92
- className,
93
- ...props
94
- }: React.ComponentProps<"span">) => (
95
- <span
96
- role="presentation"
97
- aria-hidden="true"
98
- className={cn("flex h-9 w-9 items-center justify-center", className)}
99
- {...props}
100
- >
101
- <icons.MoreHorizontal className="h-4 w-4" />
102
- <span className="sr-only">More</span>
103
- </span>
104
- )
105
- BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
106
-
107
- export {
108
- Breadcrumb,
109
- BreadcrumbList,
110
- BreadcrumbItem,
111
- BreadcrumbLink,
112
- BreadcrumbPage,
113
- BreadcrumbSeparator,
114
- BreadcrumbEllipsis,
115
- }
@@ -1,66 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
5
- import { DayPicker } from "react-day-picker"
6
-
7
- import { cn } from "@lib/utils"
8
- import { buttonVariants } from "@base-ui/ui/button"
9
-
10
- export type CalendarProps = React.ComponentProps<typeof DayPicker>
11
-
12
- function Calendar({
13
- className,
14
- classNames,
15
- showOutsideDays = true,
16
- ...props
17
- }: CalendarProps) {
18
- return (
19
- <DayPicker
20
- showOutsideDays={showOutsideDays}
21
- className={cn("p-3", className)}
22
- classNames={{
23
- months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
24
- month: "space-y-4",
25
- caption: "flex justify-center pt-1 relative items-center",
26
- caption_label: "text-sm font-medium",
27
- nav: "space-x-1 flex items-center",
28
- nav_button: cn(
29
- buttonVariants({ variant: "outline" }),
30
- "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
31
- ),
32
- nav_button_previous: "absolute left-1",
33
- nav_button_next: "absolute right-1",
34
- table: "w-full border-collapse space-y-1",
35
- head_row: "flex",
36
- head_cell:
37
- "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
38
- row: "flex w-full mt-2",
39
- cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
40
- day: cn(
41
- buttonVariants({ variant: "ghost" }),
42
- "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
43
- ),
44
- day_range_end: "day-range-end",
45
- day_selected:
46
- "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
47
- day_today: "bg-accent text-accent-foreground",
48
- day_outside:
49
- "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
50
- day_disabled: "text-muted-foreground opacity-50",
51
- day_range_middle:
52
- "aria-selected:bg-accent aria-selected:text-accent-foreground",
53
- day_hidden: "invisible",
54
- ...classNames,
55
- }}
56
- components={{
57
- IconLeft: ({ ..._props }) => <icons.ChevronLeft className="h-4 w-4" />,
58
- IconRight: ({ ..._props }) => <icons.ChevronRight className="h-4 w-4" />,
59
- }}
60
- {...props}
61
- />
62
- )
63
- }
64
- Calendar.displayName = "Calendar"
65
-
66
- export { Calendar }
package/src/ui/card.tsx DELETED
@@ -1,79 +0,0 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "@lib/utils"
4
-
5
- const Card = React.forwardRef<
6
- HTMLDivElement,
7
- React.HTMLAttributes<HTMLDivElement>
8
- >(({ className, ...props }, ref) => (
9
- <div
10
- ref={ref}
11
- className={cn(
12
- "rounded-lg border bg-card text-card-foreground shadow-xs",
13
- className
14
- )}
15
- {...props}
16
- />
17
- ))
18
- Card.displayName = "Card"
19
-
20
- const CardHeader = React.forwardRef<
21
- HTMLDivElement,
22
- React.HTMLAttributes<HTMLDivElement>
23
- >(({ className, ...props }, ref) => (
24
- <div
25
- ref={ref}
26
- className={cn("flex flex-col space-y-1.5 p-6", className)}
27
- {...props}
28
- />
29
- ))
30
- CardHeader.displayName = "CardHeader"
31
-
32
- const CardTitle = React.forwardRef<
33
- HTMLDivElement,
34
- React.HTMLAttributes<HTMLDivElement>
35
- >(({ className, ...props }, ref) => (
36
- <div
37
- ref={ref}
38
- className={cn(
39
- "text-2xl font-semibold leading-none tracking-tight",
40
- className
41
- )}
42
- {...props}
43
- />
44
- ))
45
- CardTitle.displayName = "CardTitle"
46
-
47
- const CardDescription = React.forwardRef<
48
- HTMLDivElement,
49
- React.HTMLAttributes<HTMLDivElement>
50
- >(({ className, ...props }, ref) => (
51
- <div
52
- ref={ref}
53
- className={cn("text-sm text-muted-foreground", className)}
54
- {...props}
55
- />
56
- ))
57
- CardDescription.displayName = "CardDescription"
58
-
59
- const CardContent = React.forwardRef<
60
- HTMLDivElement,
61
- React.HTMLAttributes<HTMLDivElement>
62
- >(({ className, ...props }, ref) => (
63
- <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64
- ))
65
- CardContent.displayName = "CardContent"
66
-
67
- const CardFooter = React.forwardRef<
68
- HTMLDivElement,
69
- React.HTMLAttributes<HTMLDivElement>
70
- >(({ className, ...props }, ref) => (
71
- <div
72
- ref={ref}
73
- className={cn("flex items-center p-6 pt-0", className)}
74
- {...props}
75
- />
76
- ))
77
- CardFooter.displayName = "CardFooter"
78
-
79
- export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }