@cosmicdrift/kumiko-renderer-web 0.65.0 → 0.67.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/package.json +6 -4
- package/src/__tests__/form-action-bar.test.tsx +50 -15
- package/src/__tests__/nav-tree.test.tsx +250 -16
- package/src/__tests__/primitives.test.tsx +9 -6
- package/src/__tests__/render-edit.test.tsx +6 -6
- package/src/__tests__/test-utils.tsx +21 -0
- package/src/__tests__/workspace-shell.test.tsx +21 -66
- package/src/app/__tests__/qualify-nav-provider-key.test.ts +27 -0
- package/src/app/client-plugin.tsx +12 -27
- package/src/app/create-app.tsx +31 -19
- package/src/app/nav-providers-context.tsx +56 -0
- package/src/index.ts +8 -0
- package/src/layout/app-layout.tsx +9 -2
- package/src/layout/default-app-shell.tsx +116 -33
- package/src/layout/nav-tree.tsx +491 -125
- package/src/layout/sidebar-brand.tsx +40 -0
- package/src/layout/sidebar-user.tsx +46 -0
- package/src/layout/sidebar.tsx +1 -1
- package/src/layout/target-resolver-stub.tsx +3 -5
- package/src/layout/workspace-shell.tsx +32 -34
- package/src/primitives/file-upload.tsx +118 -0
- package/src/primitives/index.tsx +314 -175
- package/src/styles.css +76 -50
- package/src/ui/avatar.tsx +110 -0
- package/src/ui/badge.tsx +49 -0
- package/src/ui/breadcrumb.tsx +110 -0
- package/src/ui/button.tsx +65 -0
- package/src/ui/card.tsx +93 -0
- package/src/ui/checkbox.tsx +33 -0
- package/src/ui/collapsible.tsx +34 -0
- package/src/ui/dropdown-menu.tsx +258 -0
- package/src/ui/input.tsx +22 -0
- package/src/ui/label.tsx +25 -0
- package/src/ui/select.tsx +191 -0
- package/src/ui/separator.tsx +29 -0
- package/src/ui/sheet.tsx +144 -0
- package/src/ui/sidebar.tsx +727 -0
- package/src/ui/skeleton.tsx +14 -0
- package/src/ui/table.tsx +117 -0
- package/src/ui/textarea.tsx +19 -0
- package/src/ui/tooltip.tsx +58 -0
- package/src/ui/use-mobile.ts +20 -0
- package/src/__tests__/visual-tree-integration.test.tsx +0 -314
- package/src/app/tree-providers-context.tsx +0 -68
- package/src/layout/__tests__/visual-tree.test.tsx +0 -303
- package/src/layout/tree-node-renderer.tsx +0 -386
- package/src/layout/visual-tree.tsx +0 -398
package/src/styles.css
CHANGED
|
@@ -38,36 +38,48 @@
|
|
|
38
38
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
39
39
|
|
|
40
40
|
@theme {
|
|
41
|
-
/* Dark-Mode (Default) —
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
--color-
|
|
46
|
-
--color-
|
|
47
|
-
--color-card: hsl(
|
|
48
|
-
--color-
|
|
49
|
-
--color-popover: hsl(
|
|
50
|
-
--color-
|
|
51
|
-
--color-primary: hsl(
|
|
52
|
-
--color-
|
|
53
|
-
--color-secondary: hsl(
|
|
54
|
-
--color-
|
|
55
|
-
--color-muted: hsl(
|
|
56
|
-
--color-
|
|
57
|
-
--color-accent: hsl(
|
|
58
|
-
--color-
|
|
59
|
-
--color-destructive: hsl(0
|
|
60
|
-
--color-
|
|
61
|
-
--color-
|
|
62
|
-
--color-
|
|
63
|
-
--color-ring: hsl(232 60% 64%);
|
|
41
|
+
/* Dark-Mode (Default) — shadcn-Preset „Rhea"/Neutral (hue 0, reines Grau —
|
|
42
|
+
kein zinc-Blaustich). background == card; Cards trennen über Border +
|
|
43
|
+
Shadow. Primary near-white, Apps überschreiben mit ihrer Brand. */
|
|
44
|
+
--color-background: hsl(0 0% 3.9%);
|
|
45
|
+
--color-foreground: hsl(0 0% 98%);
|
|
46
|
+
--color-card: hsl(0 0% 3.9%);
|
|
47
|
+
--color-card-foreground: hsl(0 0% 98%);
|
|
48
|
+
--color-popover: hsl(0 0% 3.9%);
|
|
49
|
+
--color-popover-foreground: hsl(0 0% 98%);
|
|
50
|
+
--color-primary: hsl(0 0% 98%);
|
|
51
|
+
--color-primary-foreground: hsl(0 0% 9%);
|
|
52
|
+
--color-secondary: hsl(0 0% 14.9%);
|
|
53
|
+
--color-secondary-foreground: hsl(0 0% 98%);
|
|
54
|
+
--color-muted: hsl(0 0% 14.9%);
|
|
55
|
+
--color-muted-foreground: hsl(0 0% 63.9%);
|
|
56
|
+
--color-accent: hsl(0 0% 14.9%);
|
|
57
|
+
--color-accent-foreground: hsl(0 0% 98%);
|
|
58
|
+
--color-destructive: hsl(0 62.8% 30.6%);
|
|
59
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
60
|
+
--color-border: hsl(0 0% 14.9%);
|
|
61
|
+
--color-input: hsl(0 0% 14.9%);
|
|
62
|
+
--color-ring: hsl(0 0% 83.1%);
|
|
64
63
|
|
|
65
|
-
/*
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
--
|
|
64
|
+
/* Sidebar-Familie Dark (Neutral). Eigene Werte (KEIN Alias auf background) —
|
|
65
|
+
Rail braucht Kontrast zum Content. Hierarchie: background 3.9% < rail 10% <
|
|
66
|
+
aktiv 20%. */
|
|
67
|
+
--color-sidebar: hsl(0 0% 10%);
|
|
68
|
+
--color-sidebar-foreground: hsl(0 0% 95.9%);
|
|
69
|
+
--color-sidebar-primary: hsl(0 0% 98%);
|
|
70
|
+
--color-sidebar-primary-foreground: hsl(0 0% 9%);
|
|
71
|
+
--color-sidebar-accent: hsl(0 0% 20%);
|
|
72
|
+
--color-sidebar-accent-foreground: hsl(0 0% 98%);
|
|
73
|
+
--color-sidebar-border: hsl(0 0% 14.9%);
|
|
74
|
+
--color-sidebar-ring: hsl(0 0% 83.1%);
|
|
75
|
+
|
|
76
|
+
/* Radius — shadcn-Default 0.625rem (runder als new-yorks 0.5rem). Skala
|
|
77
|
+
wird per calc vom Basiswert abgeleitet (shadcn-Konvention). */
|
|
78
|
+
--radius: 0.625rem;
|
|
79
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
80
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
81
|
+
--radius-lg: var(--radius);
|
|
82
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
71
83
|
}
|
|
72
84
|
|
|
73
85
|
/* Light-Mode-Overrides — aktiv wenn `<html>` KEINE `.dark` Klasse
|
|
@@ -75,29 +87,40 @@
|
|
|
75
87
|
auf light, greifen diese Werte. */
|
|
76
88
|
@layer base {
|
|
77
89
|
:root:not(.dark) {
|
|
78
|
-
/* Light-Mode —
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
dezent (rgba-style alpha statt full grey-200). */
|
|
90
|
+
/* Light-Mode — Neutral (hue 0, reines Grau). Weißes Background, Cards ==
|
|
91
|
+
weiß, trennen über Border + Shadow. Primary near-black; Apps überschreiben
|
|
92
|
+
mit Brand. Werte = shadcn-Preset (aus dem Live-Preview verifiziert). */
|
|
82
93
|
--color-background: hsl(0 0% 100%);
|
|
83
|
-
--color-foreground: hsl(
|
|
94
|
+
--color-foreground: hsl(0 0% 3.9%);
|
|
84
95
|
--color-card: hsl(0 0% 100%);
|
|
85
|
-
--color-card-foreground: hsl(
|
|
96
|
+
--color-card-foreground: hsl(0 0% 3.9%);
|
|
86
97
|
--color-popover: hsl(0 0% 100%);
|
|
87
|
-
--color-popover-foreground: hsl(
|
|
88
|
-
--color-primary: hsl(
|
|
89
|
-
--color-primary-foreground: hsl(0 0%
|
|
90
|
-
--color-secondary: hsl(
|
|
91
|
-
--color-secondary-foreground: hsl(
|
|
92
|
-
--color-muted: hsl(
|
|
93
|
-
--color-muted-foreground: hsl(
|
|
94
|
-
--color-accent: hsl(
|
|
95
|
-
--color-accent-foreground: hsl(
|
|
96
|
-
--color-destructive: hsl(0
|
|
97
|
-
--color-destructive-foreground: hsl(0 0%
|
|
98
|
-
--color-border: hsl(
|
|
99
|
-
--color-input: hsl(
|
|
100
|
-
--color-ring: hsl(
|
|
98
|
+
--color-popover-foreground: hsl(0 0% 3.9%);
|
|
99
|
+
--color-primary: hsl(0 0% 9%);
|
|
100
|
+
--color-primary-foreground: hsl(0 0% 98%);
|
|
101
|
+
--color-secondary: hsl(0 0% 96.1%);
|
|
102
|
+
--color-secondary-foreground: hsl(0 0% 9%);
|
|
103
|
+
--color-muted: hsl(0 0% 96.1%);
|
|
104
|
+
--color-muted-foreground: hsl(0 0% 45.1%);
|
|
105
|
+
--color-accent: hsl(0 0% 96.1%);
|
|
106
|
+
--color-accent-foreground: hsl(0 0% 9%);
|
|
107
|
+
--color-destructive: hsl(0 84.2% 60.2%);
|
|
108
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
109
|
+
--color-border: hsl(0 0% 89.8%);
|
|
110
|
+
--color-input: hsl(0 0% 89.8%);
|
|
111
|
+
--color-ring: hsl(0 0% 63%);
|
|
112
|
+
|
|
113
|
+
/* Sidebar-Familie Light (Neutral) = shadcn-Werte: Rail 98%, aktiv 96.1%,
|
|
114
|
+
Border 89.8%. Inset-Panel (100%) schwebt via Shadow + Rounded auf dem
|
|
115
|
+
Rail; der Kontrast ist bewusst subtil (wie im Original). */
|
|
116
|
+
--color-sidebar: hsl(0 0% 98%);
|
|
117
|
+
--color-sidebar-foreground: hsl(0 0% 26.1%);
|
|
118
|
+
--color-sidebar-primary: hsl(0 0% 9%);
|
|
119
|
+
--color-sidebar-primary-foreground: hsl(0 0% 98%);
|
|
120
|
+
--color-sidebar-accent: hsl(0 0% 96.1%);
|
|
121
|
+
--color-sidebar-accent-foreground: hsl(0 0% 9%);
|
|
122
|
+
--color-sidebar-border: hsl(0 0% 89.8%);
|
|
123
|
+
--color-sidebar-ring: hsl(0 0% 63%);
|
|
101
124
|
}
|
|
102
125
|
|
|
103
126
|
* {
|
|
@@ -107,8 +130,11 @@
|
|
|
107
130
|
body {
|
|
108
131
|
background-color: var(--color-background);
|
|
109
132
|
color: var(--color-foreground);
|
|
133
|
+
/* shadcn-Preset-Font: Inter (Heading + Body). Apps laden Inter selbst
|
|
134
|
+
(z.B. Google Fonts / self-hosted); ohne geladene Inter greift der
|
|
135
|
+
System-Fallback. */
|
|
110
136
|
font-family:
|
|
111
|
-
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
137
|
+
"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
112
138
|
font-size: 14px;
|
|
113
139
|
line-height: 1.5;
|
|
114
140
|
margin: 0;
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
|
|
2
|
+
"use client"
|
|
3
|
+
|
|
4
|
+
import * as React from "react"
|
|
5
|
+
import { Avatar as AvatarPrimitive } from "radix-ui"
|
|
6
|
+
|
|
7
|
+
import { cn } from "../lib/cn"
|
|
8
|
+
|
|
9
|
+
function Avatar({
|
|
10
|
+
className,
|
|
11
|
+
size = "default",
|
|
12
|
+
...props
|
|
13
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
|
|
14
|
+
size?: "default" | "sm" | "lg"
|
|
15
|
+
}) {
|
|
16
|
+
return (
|
|
17
|
+
<AvatarPrimitive.Root
|
|
18
|
+
data-slot="avatar"
|
|
19
|
+
data-size={size}
|
|
20
|
+
className={cn(
|
|
21
|
+
"group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
|
|
22
|
+
className
|
|
23
|
+
)}
|
|
24
|
+
{...props}
|
|
25
|
+
/>
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function AvatarImage({
|
|
30
|
+
className,
|
|
31
|
+
...props
|
|
32
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
|
33
|
+
return (
|
|
34
|
+
<AvatarPrimitive.Image
|
|
35
|
+
data-slot="avatar-image"
|
|
36
|
+
className={cn("aspect-square size-full", className)}
|
|
37
|
+
{...props}
|
|
38
|
+
/>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function AvatarFallback({
|
|
43
|
+
className,
|
|
44
|
+
...props
|
|
45
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
|
46
|
+
return (
|
|
47
|
+
<AvatarPrimitive.Fallback
|
|
48
|
+
data-slot="avatar-fallback"
|
|
49
|
+
className={cn(
|
|
50
|
+
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
|
51
|
+
className
|
|
52
|
+
)}
|
|
53
|
+
{...props}
|
|
54
|
+
/>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
|
59
|
+
return (
|
|
60
|
+
<span
|
|
61
|
+
data-slot="avatar-badge"
|
|
62
|
+
className={cn(
|
|
63
|
+
"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
|
|
64
|
+
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
|
65
|
+
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
|
66
|
+
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
|
67
|
+
className
|
|
68
|
+
)}
|
|
69
|
+
{...props}
|
|
70
|
+
/>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
75
|
+
return (
|
|
76
|
+
<div
|
|
77
|
+
data-slot="avatar-group"
|
|
78
|
+
className={cn(
|
|
79
|
+
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
|
|
80
|
+
className
|
|
81
|
+
)}
|
|
82
|
+
{...props}
|
|
83
|
+
/>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function AvatarGroupCount({
|
|
88
|
+
className,
|
|
89
|
+
...props
|
|
90
|
+
}: React.ComponentProps<"div">) {
|
|
91
|
+
return (
|
|
92
|
+
<div
|
|
93
|
+
data-slot="avatar-group-count"
|
|
94
|
+
className={cn(
|
|
95
|
+
"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",
|
|
96
|
+
className
|
|
97
|
+
)}
|
|
98
|
+
{...props}
|
|
99
|
+
/>
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export {
|
|
104
|
+
Avatar,
|
|
105
|
+
AvatarImage,
|
|
106
|
+
AvatarFallback,
|
|
107
|
+
AvatarBadge,
|
|
108
|
+
AvatarGroup,
|
|
109
|
+
AvatarGroupCount,
|
|
110
|
+
}
|
package/src/ui/badge.tsx
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
|
|
2
|
+
import * as React from "react"
|
|
3
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
|
4
|
+
import { Slot } from "radix-ui"
|
|
5
|
+
|
|
6
|
+
import { cn } from "../lib/cn"
|
|
7
|
+
|
|
8
|
+
const badgeVariants = cva(
|
|
9
|
+
"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
14
|
+
secondary:
|
|
15
|
+
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
16
|
+
destructive:
|
|
17
|
+
"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
|
|
18
|
+
outline:
|
|
19
|
+
"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
20
|
+
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
21
|
+
link: "text-primary underline-offset-4 [a&]:hover:underline",
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
defaultVariants: {
|
|
25
|
+
variant: "default",
|
|
26
|
+
},
|
|
27
|
+
}
|
|
28
|
+
)
|
|
29
|
+
|
|
30
|
+
function Badge({
|
|
31
|
+
className,
|
|
32
|
+
variant = "default",
|
|
33
|
+
asChild = false,
|
|
34
|
+
...props
|
|
35
|
+
}: React.ComponentProps<"span"> &
|
|
36
|
+
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
|
37
|
+
const Comp = asChild ? Slot.Root : "span"
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Comp
|
|
41
|
+
data-slot="badge"
|
|
42
|
+
data-variant={variant}
|
|
43
|
+
className={cn(badgeVariants({ variant }), className)}
|
|
44
|
+
{...props}
|
|
45
|
+
/>
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { Badge, badgeVariants }
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
|
|
2
|
+
import * as React from "react"
|
|
3
|
+
import { ChevronRight, MoreHorizontal } from "lucide-react"
|
|
4
|
+
import { Slot } from "radix-ui"
|
|
5
|
+
|
|
6
|
+
import { cn } from "../lib/cn"
|
|
7
|
+
|
|
8
|
+
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
|
9
|
+
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
|
13
|
+
return (
|
|
14
|
+
<ol
|
|
15
|
+
data-slot="breadcrumb-list"
|
|
16
|
+
className={cn(
|
|
17
|
+
"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
|
26
|
+
return (
|
|
27
|
+
<li
|
|
28
|
+
data-slot="breadcrumb-item"
|
|
29
|
+
className={cn("inline-flex items-center gap-1.5", className)}
|
|
30
|
+
{...props}
|
|
31
|
+
/>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function BreadcrumbLink({
|
|
36
|
+
asChild,
|
|
37
|
+
className,
|
|
38
|
+
...props
|
|
39
|
+
}: React.ComponentProps<"a"> & {
|
|
40
|
+
asChild?: boolean
|
|
41
|
+
}) {
|
|
42
|
+
const Comp = asChild ? Slot.Root : "a"
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<Comp
|
|
46
|
+
data-slot="breadcrumb-link"
|
|
47
|
+
className={cn("transition-colors hover:text-foreground", className)}
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
|
54
|
+
return (
|
|
55
|
+
<span
|
|
56
|
+
data-slot="breadcrumb-page"
|
|
57
|
+
role="link"
|
|
58
|
+
aria-disabled="true"
|
|
59
|
+
aria-current="page"
|
|
60
|
+
className={cn("font-normal text-foreground", className)}
|
|
61
|
+
{...props}
|
|
62
|
+
/>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function BreadcrumbSeparator({
|
|
67
|
+
children,
|
|
68
|
+
className,
|
|
69
|
+
...props
|
|
70
|
+
}: React.ComponentProps<"li">) {
|
|
71
|
+
return (
|
|
72
|
+
<li
|
|
73
|
+
data-slot="breadcrumb-separator"
|
|
74
|
+
role="presentation"
|
|
75
|
+
aria-hidden="true"
|
|
76
|
+
className={cn("[&>svg]:size-3.5", className)}
|
|
77
|
+
{...props}
|
|
78
|
+
>
|
|
79
|
+
{children ?? <ChevronRight />}
|
|
80
|
+
</li>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
function BreadcrumbEllipsis({
|
|
85
|
+
className,
|
|
86
|
+
...props
|
|
87
|
+
}: React.ComponentProps<"span">) {
|
|
88
|
+
return (
|
|
89
|
+
<span
|
|
90
|
+
data-slot="breadcrumb-ellipsis"
|
|
91
|
+
role="presentation"
|
|
92
|
+
aria-hidden="true"
|
|
93
|
+
className={cn("flex size-9 items-center justify-center", className)}
|
|
94
|
+
{...props}
|
|
95
|
+
>
|
|
96
|
+
<MoreHorizontal className="size-4" />
|
|
97
|
+
<span className="sr-only">More</span>
|
|
98
|
+
</span>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export {
|
|
103
|
+
Breadcrumb,
|
|
104
|
+
BreadcrumbList,
|
|
105
|
+
BreadcrumbItem,
|
|
106
|
+
BreadcrumbLink,
|
|
107
|
+
BreadcrumbPage,
|
|
108
|
+
BreadcrumbSeparator,
|
|
109
|
+
BreadcrumbEllipsis,
|
|
110
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
|
|
2
|
+
import * as React from "react"
|
|
3
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
|
4
|
+
import { Slot } from "radix-ui"
|
|
5
|
+
|
|
6
|
+
import { cn } from "../lib/cn"
|
|
7
|
+
|
|
8
|
+
const buttonVariants = cva(
|
|
9
|
+
"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
14
|
+
destructive:
|
|
15
|
+
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
|
|
16
|
+
outline:
|
|
17
|
+
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
18
|
+
secondary:
|
|
19
|
+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
20
|
+
ghost:
|
|
21
|
+
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
22
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
23
|
+
},
|
|
24
|
+
size: {
|
|
25
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
26
|
+
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
27
|
+
sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
|
|
28
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
29
|
+
icon: "size-9",
|
|
30
|
+
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
|
31
|
+
"icon-sm": "size-8",
|
|
32
|
+
"icon-lg": "size-10",
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
variant: "default",
|
|
37
|
+
size: "default",
|
|
38
|
+
},
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
|
|
42
|
+
function Button({
|
|
43
|
+
className,
|
|
44
|
+
variant = "default",
|
|
45
|
+
size = "default",
|
|
46
|
+
asChild = false,
|
|
47
|
+
...props
|
|
48
|
+
}: React.ComponentProps<"button"> &
|
|
49
|
+
VariantProps<typeof buttonVariants> & {
|
|
50
|
+
asChild?: boolean
|
|
51
|
+
}) {
|
|
52
|
+
const Comp = asChild ? Slot.Root : "button"
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<Comp
|
|
56
|
+
data-slot="button"
|
|
57
|
+
data-variant={variant}
|
|
58
|
+
data-size={size}
|
|
59
|
+
className={cn(buttonVariants({ variant, size, className }))}
|
|
60
|
+
{...props}
|
|
61
|
+
/>
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export { Button, buttonVariants }
|
package/src/ui/card.tsx
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
|
|
2
|
+
import * as React from "react"
|
|
3
|
+
|
|
4
|
+
import { cn } from "../lib/cn"
|
|
5
|
+
|
|
6
|
+
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
data-slot="card"
|
|
10
|
+
className={cn(
|
|
11
|
+
"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
|
|
12
|
+
className
|
|
13
|
+
)}
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
)
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
20
|
+
return (
|
|
21
|
+
<div
|
|
22
|
+
data-slot="card-header"
|
|
23
|
+
className={cn(
|
|
24
|
+
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
|
25
|
+
className
|
|
26
|
+
)}
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
33
|
+
return (
|
|
34
|
+
<div
|
|
35
|
+
data-slot="card-title"
|
|
36
|
+
className={cn("leading-none font-semibold", className)}
|
|
37
|
+
{...props}
|
|
38
|
+
/>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
43
|
+
return (
|
|
44
|
+
<div
|
|
45
|
+
data-slot="card-description"
|
|
46
|
+
className={cn("text-sm text-muted-foreground", className)}
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
|
53
|
+
return (
|
|
54
|
+
<div
|
|
55
|
+
data-slot="card-action"
|
|
56
|
+
className={cn(
|
|
57
|
+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
58
|
+
className
|
|
59
|
+
)}
|
|
60
|
+
{...props}
|
|
61
|
+
/>
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
66
|
+
return (
|
|
67
|
+
<div
|
|
68
|
+
data-slot="card-content"
|
|
69
|
+
className={cn("px-6", className)}
|
|
70
|
+
{...props}
|
|
71
|
+
/>
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
76
|
+
return (
|
|
77
|
+
<div
|
|
78
|
+
data-slot="card-footer"
|
|
79
|
+
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
|
80
|
+
{...props}
|
|
81
|
+
/>
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
export {
|
|
86
|
+
Card,
|
|
87
|
+
CardHeader,
|
|
88
|
+
CardFooter,
|
|
89
|
+
CardTitle,
|
|
90
|
+
CardAction,
|
|
91
|
+
CardDescription,
|
|
92
|
+
CardContent,
|
|
93
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
|
|
2
|
+
"use client"
|
|
3
|
+
|
|
4
|
+
import * as React from "react"
|
|
5
|
+
import { CheckIcon } from "lucide-react"
|
|
6
|
+
import { Checkbox as CheckboxPrimitive } from "radix-ui"
|
|
7
|
+
|
|
8
|
+
import { cn } from "../lib/cn"
|
|
9
|
+
|
|
10
|
+
function Checkbox({
|
|
11
|
+
className,
|
|
12
|
+
...props
|
|
13
|
+
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
|
14
|
+
return (
|
|
15
|
+
<CheckboxPrimitive.Root
|
|
16
|
+
data-slot="checkbox"
|
|
17
|
+
className={cn(
|
|
18
|
+
"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
|
|
19
|
+
className
|
|
20
|
+
)}
|
|
21
|
+
{...props}
|
|
22
|
+
>
|
|
23
|
+
<CheckboxPrimitive.Indicator
|
|
24
|
+
data-slot="checkbox-indicator"
|
|
25
|
+
className="grid place-content-center text-current transition-none"
|
|
26
|
+
>
|
|
27
|
+
<CheckIcon className="size-3.5" />
|
|
28
|
+
</CheckboxPrimitive.Indicator>
|
|
29
|
+
</CheckboxPrimitive.Root>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { Checkbox }
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
|
|
2
|
+
"use client"
|
|
3
|
+
|
|
4
|
+
import { Collapsible as CollapsiblePrimitive } from "radix-ui"
|
|
5
|
+
|
|
6
|
+
function Collapsible({
|
|
7
|
+
...props
|
|
8
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
|
9
|
+
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function CollapsibleTrigger({
|
|
13
|
+
...props
|
|
14
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
|
15
|
+
return (
|
|
16
|
+
<CollapsiblePrimitive.CollapsibleTrigger
|
|
17
|
+
data-slot="collapsible-trigger"
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function CollapsibleContent({
|
|
24
|
+
...props
|
|
25
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
|
26
|
+
return (
|
|
27
|
+
<CollapsiblePrimitive.CollapsibleContent
|
|
28
|
+
data-slot="collapsible-content"
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|