@ttt-productions/ui-core 0.11.18 → 0.11.19
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/package.json +2 -4
- package/src/index.ts +0 -3
- package/src/lib/format-numbers.ts +0 -17
- package/src/lib/utils.ts +0 -9
- package/src/react/components/accordion.tsx +0 -53
- package/src/react/components/alert-dialog.tsx +0 -131
- package/src/react/components/alert.tsx +0 -59
- package/src/react/components/avatar.tsx +0 -51
- package/src/react/components/badge.tsx +0 -31
- package/src/react/components/button.tsx +0 -102
- package/src/react/components/card.tsx +0 -54
- package/src/react/components/checkbox.tsx +0 -28
- package/src/react/components/chunk-error-recovery.tsx +0 -57
- package/src/react/components/collapsible.tsx +0 -11
- package/src/react/components/consequence-dialog.tsx +0 -282
- package/src/react/components/date-picker.tsx +0 -567
- package/src/react/components/dialog.tsx +0 -114
- package/src/react/components/dropdown-menu.tsx +0 -200
- package/src/react/components/end-of-list-indicator.tsx +0 -27
- package/src/react/components/form.tsx +0 -174
- package/src/react/components/input.tsx +0 -23
- package/src/react/components/label.tsx +0 -21
- package/src/react/components/layout/screen-adaptive-view.tsx +0 -106
- package/src/react/components/list-pagination.tsx +0 -101
- package/src/react/components/menubar.tsx +0 -220
- package/src/react/components/popover.tsx +0 -31
- package/src/react/components/progress.tsx +0 -27
- package/src/react/components/radio-group.tsx +0 -36
- package/src/react/components/relative-time.tsx +0 -56
- package/src/react/components/scroll-area.tsx +0 -56
- package/src/react/components/scroll-to-top-button.tsx +0 -85
- package/src/react/components/search-dropdown.tsx +0 -233
- package/src/react/components/select.tsx +0 -165
- package/src/react/components/separator.tsx +0 -26
- package/src/react/components/sheet.tsx +0 -140
- package/src/react/components/skeleton.tsx +0 -16
- package/src/react/components/slider.tsx +0 -25
- package/src/react/components/spinner.tsx +0 -49
- package/src/react/components/switch.tsx +0 -41
- package/src/react/components/table.tsx +0 -121
- package/src/react/components/tabs.tsx +0 -59
- package/src/react/components/textarea.tsx +0 -22
- package/src/react/components/toast.tsx +0 -193
- package/src/react/components/toaster.tsx +0 -43
- package/src/react/components/tooltip.tsx +0 -28
- package/src/react/hooks/use-async-action.ts +0 -63
- package/src/react/hooks/use-cursor-page.ts +0 -139
- package/src/react/hooks/use-media-query.tsx +0 -26
- package/src/react/hooks/use-paged-list.ts +0 -106
- package/src/react/hooks/use-return-scroll.ts +0 -149
- package/src/react/hooks/use-toast.tsx +0 -176
- package/src/react/index.ts +0 -85
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttt-productions/ui-core",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.19",
|
|
4
4
|
"description": "Shared UI components for TTT Productions projects",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -16,8 +16,7 @@
|
|
|
16
16
|
"**/*.css"
|
|
17
17
|
],
|
|
18
18
|
"files": [
|
|
19
|
-
"dist"
|
|
20
|
-
"src"
|
|
19
|
+
"dist"
|
|
21
20
|
],
|
|
22
21
|
"exports": {
|
|
23
22
|
".": {
|
|
@@ -99,7 +98,6 @@
|
|
|
99
98
|
"@types/react-dom": "^19.0.0",
|
|
100
99
|
"react": "^19.2.0",
|
|
101
100
|
"react-dom": "^19.2.0",
|
|
102
|
-
"typescript": "^5.8.3",
|
|
103
101
|
"react-hook-form": "^7.69.0",
|
|
104
102
|
"@hookform/resolvers": "^5.2.2",
|
|
105
103
|
"@ttt-productions/firebase-helpers": "^0.12.9",
|
package/src/index.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Compact number formatter:
|
|
3
|
-
* < 10,000 → "1234"
|
|
4
|
-
* 10,000 ≤ n < 1,000,000 → "12.3k" (trailing ".0" stripped)
|
|
5
|
-
* ≥ 1,000,000 → "1.2M" (trailing ".0" stripped)
|
|
6
|
-
*/
|
|
7
|
-
export function formatLargeNumber(num: number): string {
|
|
8
|
-
if (num >= 1_000_000) {
|
|
9
|
-
const formatted = (num / 1_000_000).toFixed(1);
|
|
10
|
-
return (formatted.endsWith(".0") ? formatted.slice(0, -2) : formatted) + "M";
|
|
11
|
-
}
|
|
12
|
-
if (num >= 10_000) {
|
|
13
|
-
const formatted = (num / 1000).toFixed(1);
|
|
14
|
-
return (formatted.endsWith(".0") ? formatted.slice(0, -2) : formatted) + "k";
|
|
15
|
-
}
|
|
16
|
-
return num.toString();
|
|
17
|
-
}
|
package/src/lib/utils.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
|
5
|
-
import { ChevronDown } from "lucide-react"
|
|
6
|
-
|
|
7
|
-
import { cn } from "../../lib/utils.js"
|
|
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 ref={ref} className={cn(className)} {...props} />
|
|
16
|
-
))
|
|
17
|
-
AccordionItem.displayName = "AccordionItem"
|
|
18
|
-
|
|
19
|
-
const AccordionTrigger = React.forwardRef<
|
|
20
|
-
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
|
21
|
-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
|
22
|
-
>(({ className, children, ...props }, ref) => (
|
|
23
|
-
<AccordionPrimitive.Header className="flex">
|
|
24
|
-
<AccordionPrimitive.Trigger
|
|
25
|
-
ref={ref}
|
|
26
|
-
className={cn(
|
|
27
|
-
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
|
28
|
-
className
|
|
29
|
-
)}
|
|
30
|
-
{...props}
|
|
31
|
-
>
|
|
32
|
-
{children}
|
|
33
|
-
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
|
|
34
|
-
</AccordionPrimitive.Trigger>
|
|
35
|
-
</AccordionPrimitive.Header>
|
|
36
|
-
))
|
|
37
|
-
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
|
|
38
|
-
|
|
39
|
-
const AccordionContent = React.forwardRef<
|
|
40
|
-
React.ElementRef<typeof AccordionPrimitive.Content>,
|
|
41
|
-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
|
42
|
-
>(({ className, children, ...props }, ref) => (
|
|
43
|
-
<AccordionPrimitive.Content
|
|
44
|
-
ref={ref}
|
|
45
|
-
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
|
46
|
-
{...props}
|
|
47
|
-
>
|
|
48
|
-
<div className={cn("pb-4 pt-0", className)}>{children}</div>
|
|
49
|
-
</AccordionPrimitive.Content>
|
|
50
|
-
))
|
|
51
|
-
AccordionContent.displayName = AccordionPrimitive.Content.displayName
|
|
52
|
-
|
|
53
|
-
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../../lib/utils.js"
|
|
7
|
-
import { buttonVariants } from "./button.js"
|
|
8
|
-
|
|
9
|
-
const AlertDialog = AlertDialogPrimitive.Root
|
|
10
|
-
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
|
|
11
|
-
const AlertDialogPortal = AlertDialogPrimitive.Portal
|
|
12
|
-
|
|
13
|
-
const AlertDialogOverlay = React.forwardRef<
|
|
14
|
-
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
|
15
|
-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
|
16
|
-
>(({ className, ...props }, ref) => (
|
|
17
|
-
<AlertDialogPrimitive.Overlay
|
|
18
|
-
className={cn(
|
|
19
|
-
"fixed inset-0 z-50 bg-[color:var(--scrim)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
20
|
-
className
|
|
21
|
-
)}
|
|
22
|
-
{...props}
|
|
23
|
-
ref={ref}
|
|
24
|
-
/>
|
|
25
|
-
))
|
|
26
|
-
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
|
|
27
|
-
|
|
28
|
-
const AlertDialogContent = React.forwardRef<
|
|
29
|
-
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
|
30
|
-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
|
31
|
-
>(({ className, ...props }, ref) => (
|
|
32
|
-
<AlertDialogPortal>
|
|
33
|
-
<AlertDialogOverlay />
|
|
34
|
-
<AlertDialogPrimitive.Content
|
|
35
|
-
ref={ref}
|
|
36
|
-
className={cn(
|
|
37
|
-
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 elevation-raised duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg [&>*]:min-w-0",
|
|
38
|
-
className
|
|
39
|
-
)}
|
|
40
|
-
{...props}
|
|
41
|
-
/>
|
|
42
|
-
</AlertDialogPortal>
|
|
43
|
-
))
|
|
44
|
-
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
|
|
45
|
-
|
|
46
|
-
const AlertDialogHeader = ({
|
|
47
|
-
className,
|
|
48
|
-
...props
|
|
49
|
-
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
50
|
-
<div
|
|
51
|
-
className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
|
|
52
|
-
{...props}
|
|
53
|
-
/>
|
|
54
|
-
)
|
|
55
|
-
AlertDialogHeader.displayName = "AlertDialogHeader"
|
|
56
|
-
|
|
57
|
-
const AlertDialogFooter = ({
|
|
58
|
-
className,
|
|
59
|
-
...props
|
|
60
|
-
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
61
|
-
<div
|
|
62
|
-
className={cn(
|
|
63
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
64
|
-
className
|
|
65
|
-
)}
|
|
66
|
-
{...props}
|
|
67
|
-
/>
|
|
68
|
-
)
|
|
69
|
-
AlertDialogFooter.displayName = "AlertDialogFooter"
|
|
70
|
-
|
|
71
|
-
const AlertDialogTitle = React.forwardRef<
|
|
72
|
-
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
|
73
|
-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
|
74
|
-
>(({ className, ...props }, ref) => (
|
|
75
|
-
<AlertDialogPrimitive.Title
|
|
76
|
-
ref={ref}
|
|
77
|
-
className={cn("text-lg font-semibold break-words", className)}
|
|
78
|
-
{...props}
|
|
79
|
-
/>
|
|
80
|
-
))
|
|
81
|
-
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
|
|
82
|
-
|
|
83
|
-
const AlertDialogDescription = React.forwardRef<
|
|
84
|
-
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
|
85
|
-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
|
86
|
-
>(({ className, ...props }, ref) => (
|
|
87
|
-
<AlertDialogPrimitive.Description
|
|
88
|
-
ref={ref}
|
|
89
|
-
className={cn("text-sm text-muted-foreground break-words", className)}
|
|
90
|
-
{...props}
|
|
91
|
-
/>
|
|
92
|
-
))
|
|
93
|
-
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
|
|
94
|
-
|
|
95
|
-
const AlertDialogAction = React.forwardRef<
|
|
96
|
-
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
|
97
|
-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
|
98
|
-
>(({ className, ...props }, ref) => (
|
|
99
|
-
<AlertDialogPrimitive.Action
|
|
100
|
-
ref={ref}
|
|
101
|
-
className={cn(buttonVariants(), className)}
|
|
102
|
-
{...props}
|
|
103
|
-
/>
|
|
104
|
-
))
|
|
105
|
-
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
|
|
106
|
-
|
|
107
|
-
const AlertDialogCancel = React.forwardRef<
|
|
108
|
-
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
|
109
|
-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
|
110
|
-
>(({ className, ...props }, ref) => (
|
|
111
|
-
<AlertDialogPrimitive.Cancel
|
|
112
|
-
ref={ref}
|
|
113
|
-
className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
|
|
114
|
-
{...props}
|
|
115
|
-
/>
|
|
116
|
-
))
|
|
117
|
-
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
|
|
118
|
-
|
|
119
|
-
export {
|
|
120
|
-
AlertDialog,
|
|
121
|
-
AlertDialogPortal,
|
|
122
|
-
AlertDialogOverlay,
|
|
123
|
-
AlertDialogTrigger,
|
|
124
|
-
AlertDialogContent,
|
|
125
|
-
AlertDialogHeader,
|
|
126
|
-
AlertDialogFooter,
|
|
127
|
-
AlertDialogTitle,
|
|
128
|
-
AlertDialogDescription,
|
|
129
|
-
AlertDialogAction,
|
|
130
|
-
AlertDialogCancel,
|
|
131
|
-
}
|
|
@@ -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.js"
|
|
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 break-words", 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 break-words", className)}
|
|
54
|
-
{...props}
|
|
55
|
-
/>
|
|
56
|
-
))
|
|
57
|
-
AlertDescription.displayName = "AlertDescription"
|
|
58
|
-
|
|
59
|
-
export { Alert, AlertTitle, AlertDescription }
|
|
@@ -1,51 +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.js"
|
|
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("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
|
|
15
|
-
{...props}
|
|
16
|
-
/>
|
|
17
|
-
))
|
|
18
|
-
Avatar.displayName = AvatarPrimitive.Root.displayName
|
|
19
|
-
|
|
20
|
-
const AvatarImage = React.forwardRef<
|
|
21
|
-
React.ElementRef<typeof AvatarPrimitive.Image>,
|
|
22
|
-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
|
23
|
-
>(({ className, src, ...props }, ref) => {
|
|
24
|
-
if (!src) return null
|
|
25
|
-
return (
|
|
26
|
-
<AvatarPrimitive.Image
|
|
27
|
-
ref={ref}
|
|
28
|
-
src={src}
|
|
29
|
-
className={cn("aspect-square h-full w-full", className)}
|
|
30
|
-
{...props}
|
|
31
|
-
/>
|
|
32
|
-
)
|
|
33
|
-
})
|
|
34
|
-
AvatarImage.displayName = AvatarPrimitive.Image.displayName
|
|
35
|
-
|
|
36
|
-
const AvatarFallback = React.forwardRef<
|
|
37
|
-
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
|
38
|
-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
|
39
|
-
>(({ className, ...props }, ref) => (
|
|
40
|
-
<AvatarPrimitive.Fallback
|
|
41
|
-
ref={ref}
|
|
42
|
-
className={cn(
|
|
43
|
-
"flex h-full w-full items-center justify-center rounded-full bg-[color:var(--avatar-fallback)] text-primary font-semibold",
|
|
44
|
-
className
|
|
45
|
-
)}
|
|
46
|
-
{...props}
|
|
47
|
-
/>
|
|
48
|
-
))
|
|
49
|
-
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
|
|
50
|
-
|
|
51
|
-
export { Avatar, AvatarImage, AvatarFallback }
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
5
|
-
|
|
6
|
-
import { cn } from "../../lib/utils.js";
|
|
7
|
-
|
|
8
|
-
const badgeVariants = cva(
|
|
9
|
-
"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",
|
|
10
|
-
{
|
|
11
|
-
variants: {
|
|
12
|
-
variant: {
|
|
13
|
-
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
|
14
|
-
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
15
|
-
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
16
|
-
outline: "text-foreground",
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
defaultVariants: { variant: "default" },
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
export interface BadgeProps
|
|
24
|
-
extends React.HTMLAttributes<HTMLDivElement>,
|
|
25
|
-
VariantProps<typeof badgeVariants> {}
|
|
26
|
-
|
|
27
|
-
function Badge({ className, variant, ...props }: BadgeProps) {
|
|
28
|
-
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export { Badge, badgeVariants };
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import { Slot, Slottable } from "@radix-ui/react-slot"
|
|
5
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
6
|
-
|
|
7
|
-
import { cn } from "../../lib/utils.js"
|
|
8
|
-
import { Spinner } from "./spinner.js"
|
|
9
|
-
|
|
10
|
-
const buttonVariants = cva(
|
|
11
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
12
|
-
{
|
|
13
|
-
variants: {
|
|
14
|
-
variant: {
|
|
15
|
-
default:
|
|
16
|
-
"button-default bg-primary text-primary-foreground hover:bg-primary/90 border-2 border-[hsl(var(--brand-primary-deep))]",
|
|
17
|
-
destructive:
|
|
18
|
-
"bg-destructive text-destructive-foreground hover:bg-destructive/90 border-2 border-[hsl(var(--destructive-border))]",
|
|
19
|
-
success:
|
|
20
|
-
"bg-[color:var(--button-success)] text-[hsl(var(--success-foreground))] hover:bg-[color:var(--button-success)]/90 border-2 border-[hsl(var(--status-success-border))]",
|
|
21
|
-
outline:
|
|
22
|
-
"border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground text-foreground",
|
|
23
|
-
secondary:
|
|
24
|
-
"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-2 border-border",
|
|
25
|
-
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
26
|
-
link: "text-primary underline-offset-4 hover:underline",
|
|
27
|
-
inverted:
|
|
28
|
-
"bg-[hsl(var(--inverted-background))] text-[hsl(var(--inverted-foreground))] hover:bg-[hsl(var(--inverted-background))]/90 border-2 border-[hsl(var(--inverted-border))]",
|
|
29
|
-
},
|
|
30
|
-
size: {
|
|
31
|
-
default: "h-10 px-4 py-2",
|
|
32
|
-
sm: "h-9 rounded-md px-3",
|
|
33
|
-
lg: "h-11 rounded-md px-8",
|
|
34
|
-
icon: "h-9 w-9",
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
defaultVariants: {
|
|
38
|
-
variant: "default",
|
|
39
|
-
size: "default",
|
|
40
|
-
},
|
|
41
|
-
}
|
|
42
|
-
)
|
|
43
|
-
|
|
44
|
-
export interface ButtonProps
|
|
45
|
-
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
46
|
-
VariantProps<typeof buttonVariants> {
|
|
47
|
-
asChild?: boolean
|
|
48
|
-
/**
|
|
49
|
-
* Async work this button started is in flight. The button disables itself — so
|
|
50
|
-
* neither a repeat click nor an implicit form resubmit can fire — sets
|
|
51
|
-
* `aria-busy`, and shows the canonical spinner: an icon button (`size="icon"`)
|
|
52
|
-
* swaps its icon for it; any other button shows it in place of its `icon`.
|
|
53
|
-
*/
|
|
54
|
-
pending?: boolean
|
|
55
|
-
/** Leading icon, rendered before the label. While `pending`, the spinner takes its place. */
|
|
56
|
-
icon?: React.ReactNode
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
60
|
-
({ className, variant, size, asChild = false, pending = false, icon, disabled, children, ...props }, ref) => {
|
|
61
|
-
const shared = {
|
|
62
|
-
...props,
|
|
63
|
-
...(pending ? { "aria-busy": true, "data-pending": "" } : {}),
|
|
64
|
-
disabled: disabled || pending || undefined,
|
|
65
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
66
|
-
}
|
|
67
|
-
const spinner = <Spinner size={size === "lg" ? "sm" : "xs"} />
|
|
68
|
-
const leading = pending ? spinner : icon
|
|
69
|
-
|
|
70
|
-
if (asChild) {
|
|
71
|
-
// Slot finds the Slottable among its DIRECT children, so the leading slot and the
|
|
72
|
-
// Slottable must be siblings here — never wrapped in a fragment.
|
|
73
|
-
return leading ? (
|
|
74
|
-
<Slot ref={ref} {...shared}>
|
|
75
|
-
{leading}
|
|
76
|
-
<Slottable>{children}</Slottable>
|
|
77
|
-
</Slot>
|
|
78
|
-
) : (
|
|
79
|
-
<Slot ref={ref} {...shared}>
|
|
80
|
-
{children}
|
|
81
|
-
</Slot>
|
|
82
|
-
)
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
return (
|
|
86
|
-
<button ref={ref} {...shared}>
|
|
87
|
-
{size === "icon" ? (
|
|
88
|
-
pending ? spinner : children
|
|
89
|
-
) : (
|
|
90
|
-
<>
|
|
91
|
-
{leading}
|
|
92
|
-
{children}
|
|
93
|
-
</>
|
|
94
|
-
)}
|
|
95
|
-
</button>
|
|
96
|
-
)
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
|
|
100
|
-
Button.displayName = "Button"
|
|
101
|
-
|
|
102
|
-
export { Button, buttonVariants }
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import { cn } from "../../lib/utils.js"
|
|
5
|
-
|
|
6
|
-
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
7
|
-
({ className, ...props }, ref) => (
|
|
8
|
-
<div
|
|
9
|
-
ref={ref}
|
|
10
|
-
className={cn("rounded-lg border-2 card-border bg-card text-card-foreground", className)}
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
)
|
|
14
|
-
)
|
|
15
|
-
Card.displayName = "Card"
|
|
16
|
-
|
|
17
|
-
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
18
|
-
({ className, ...props }, ref) => (
|
|
19
|
-
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
|
|
20
|
-
)
|
|
21
|
-
)
|
|
22
|
-
CardHeader.displayName = "CardHeader"
|
|
23
|
-
|
|
24
|
-
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
|
25
|
-
({ className, ...props }, ref) => (
|
|
26
|
-
<h3
|
|
27
|
-
ref={ref}
|
|
28
|
-
className={cn("text-2xl font-semibold leading-none tracking-tight break-words card-title", className)}
|
|
29
|
-
{...props}
|
|
30
|
-
/>
|
|
31
|
-
)
|
|
32
|
-
)
|
|
33
|
-
CardTitle.displayName = "CardTitle"
|
|
34
|
-
|
|
35
|
-
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
|
|
36
|
-
({ className, ...props }, ref) => (
|
|
37
|
-
<p ref={ref} className={cn("break-words card-description", className)} {...props} />
|
|
38
|
-
)
|
|
39
|
-
)
|
|
40
|
-
CardDescription.displayName = "CardDescription"
|
|
41
|
-
|
|
42
|
-
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
43
|
-
({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
|
44
|
-
)
|
|
45
|
-
CardContent.displayName = "CardContent"
|
|
46
|
-
|
|
47
|
-
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
48
|
-
({ className, ...props }, ref) => (
|
|
49
|
-
<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
|
|
50
|
-
)
|
|
51
|
-
)
|
|
52
|
-
CardFooter.displayName = "CardFooter"
|
|
53
|
-
|
|
54
|
-
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
|
5
|
-
import { Check } from "lucide-react"
|
|
6
|
-
|
|
7
|
-
import { cn } from "../../lib/utils.js"
|
|
8
|
-
|
|
9
|
-
const Checkbox = React.forwardRef<
|
|
10
|
-
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
|
11
|
-
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
|
12
|
-
>(({ className, ...props }, ref) => (
|
|
13
|
-
<CheckboxPrimitive.Root
|
|
14
|
-
ref={ref}
|
|
15
|
-
className={cn(
|
|
16
|
-
"peer h-4 w-4 shrink-0 rounded-xs border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
|
17
|
-
className
|
|
18
|
-
)}
|
|
19
|
-
{...props}
|
|
20
|
-
>
|
|
21
|
-
<CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
|
|
22
|
-
<Check className="h-4 w-4" />
|
|
23
|
-
</CheckboxPrimitive.Indicator>
|
|
24
|
-
</CheckboxPrimitive.Root>
|
|
25
|
-
))
|
|
26
|
-
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
|
27
|
-
|
|
28
|
-
export { Checkbox }
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { Spinner } from "./spinner.js";
|
|
5
|
-
|
|
6
|
-
export interface ChunkErrorRecoveryProps {
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
/** Custom message shown during recovery reload. */
|
|
9
|
-
loadingMessage?: React.ReactNode;
|
|
10
|
-
/**
|
|
11
|
-
* Predicate to decide whether an error event indicates a stale-chunk failure.
|
|
12
|
-
* Defaults to matching "Failed to load chunk" in the message.
|
|
13
|
-
*/
|
|
14
|
-
isChunkError?: (event: ErrorEvent) => boolean;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function defaultIsChunkError(event: ErrorEvent): boolean {
|
|
18
|
-
const msg = event.message ?? "";
|
|
19
|
-
if (msg.includes("Failed to load chunk")) return true;
|
|
20
|
-
const nested =
|
|
21
|
-
event.error && typeof event.error === "object"
|
|
22
|
-
? (event.error as { message?: string }).message
|
|
23
|
-
: undefined;
|
|
24
|
-
return typeof nested === "string" && nested.includes("Failed to load chunk");
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export function ChunkErrorRecovery({
|
|
28
|
-
children,
|
|
29
|
-
loadingMessage = "Updating…",
|
|
30
|
-
isChunkError = defaultIsChunkError,
|
|
31
|
-
}: ChunkErrorRecoveryProps) {
|
|
32
|
-
const [hasError, setHasError] = React.useState(false);
|
|
33
|
-
|
|
34
|
-
React.useEffect(() => {
|
|
35
|
-
const handler = (event: ErrorEvent) => {
|
|
36
|
-
if (!isChunkError(event)) return;
|
|
37
|
-
|
|
38
|
-
console.error("Stale chunk detected — reloading.");
|
|
39
|
-
setHasError(true);
|
|
40
|
-
window.location.reload();
|
|
41
|
-
event.preventDefault();
|
|
42
|
-
event.stopPropagation();
|
|
43
|
-
};
|
|
44
|
-
window.addEventListener("error", handler);
|
|
45
|
-
return () => window.removeEventListener("error", handler);
|
|
46
|
-
}, [isChunkError]);
|
|
47
|
-
|
|
48
|
-
if (hasError) {
|
|
49
|
-
return (
|
|
50
|
-
<div className="flex flex-col h-screen w-screen items-center justify-center gap-4 bg-background">
|
|
51
|
-
<Spinner size="xl" />
|
|
52
|
-
<p className="text-muted-foreground">{loadingMessage}</p>
|
|
53
|
-
</div>
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
return <>{children}</>;
|
|
57
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
|
4
|
-
|
|
5
|
-
const Collapsible = CollapsiblePrimitive.Root
|
|
6
|
-
|
|
7
|
-
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
|
|
8
|
-
|
|
9
|
-
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
|
|
10
|
-
|
|
11
|
-
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|