@hilum/ui 0.1.1 → 0.1.3
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/README.md +23 -4
- package/dist/chunk-J2QQDUF4.js +204 -0
- package/dist/chunk-J2QQDUF4.js.map +1 -0
- package/dist/create-theme.d.ts +27 -0
- package/dist/create-theme.js +172 -0
- package/dist/create-theme.js.map +1 -0
- package/dist/index.d.ts +21 -8
- package/dist/index.js +393 -381
- package/dist/index.js.map +1 -1
- package/dist/tokens.css +59 -50
- package/dist/tokens.d.ts +46 -38
- package/dist/tokens.js +1 -191
- package/dist/tokens.js.map +1 -1
- package/llms.txt +1514 -0
- package/package.json +11 -7
- package/src/components/accordion.tsx +5 -5
- package/src/components/action-panel.tsx +6 -6
- package/src/components/activity-feed.tsx +4 -4
- package/src/components/alert-dialog.tsx +3 -3
- package/src/components/alert.tsx +4 -4
- package/src/components/avatar-stack.tsx +2 -2
- package/src/components/avatar.tsx +2 -2
- package/src/components/badge.tsx +6 -5
- package/src/components/breadcrumb.tsx +5 -5
- package/src/components/button-group.tsx +4 -4
- package/src/components/button.tsx +6 -5
- package/src/components/calendar.tsx +7 -7
- package/src/components/card-heading.tsx +3 -3
- package/src/components/card.tsx +3 -3
- package/src/components/chart.tsx +11 -11
- package/src/components/checkbox.tsx +1 -1
- package/src/components/color-input.tsx +7 -7
- package/src/components/color-picker.tsx +5 -5
- package/src/components/combobox.tsx +10 -10
- package/src/components/command-palette.tsx +11 -11
- package/src/components/command.tsx +13 -13
- package/src/components/context-menu.tsx +15 -16
- package/src/components/data-table.tsx +6 -6
- package/src/components/date-picker.tsx +9 -4
- package/src/components/description-list.tsx +8 -8
- package/src/components/dialog.tsx +3 -3
- package/src/components/drawer.tsx +5 -5
- package/src/components/dropdown-menu.tsx +15 -16
- package/src/components/empty-state.tsx +3 -3
- package/src/components/field.tsx +13 -6
- package/src/components/grid-list.tsx +12 -12
- package/src/components/hover-card.tsx +1 -1
- package/src/components/input-group.tsx +8 -8
- package/src/components/input-number.tsx +7 -7
- package/src/components/input-otp.tsx +3 -3
- package/src/components/input.tsx +5 -4
- package/src/components/kbd.tsx +1 -1
- package/src/components/label.tsx +1 -1
- package/src/components/menubar.tsx +21 -22
- package/src/components/native-select.tsx +4 -4
- package/src/components/navigation-menu.tsx +10 -10
- package/src/components/notification.tsx +10 -10
- package/src/components/page-heading.tsx +8 -8
- package/src/components/pagination.tsx +1 -1
- package/src/components/progress.tsx +1 -1
- package/src/components/property-row.tsx +1 -1
- package/src/components/radio-card.tsx +6 -6
- package/src/components/radio-group.tsx +3 -3
- package/src/components/resizable.tsx +3 -3
- package/src/components/scroll-area.tsx +1 -1
- package/src/components/section-heading.tsx +3 -3
- package/src/components/select.tsx +11 -11
- package/src/components/separator.tsx +1 -1
- package/src/components/sheet.tsx +3 -3
- package/src/components/sidebar.tsx +19 -19
- package/src/components/skeleton.tsx +1 -1
- package/src/components/slider.tsx +1 -1
- package/src/components/sonner.tsx +5 -5
- package/src/components/stacked-list.tsx +4 -4
- package/src/components/stat-card.tsx +6 -6
- package/src/components/steps.tsx +13 -12
- package/src/components/switch.tsx +1 -1
- package/src/components/table.tsx +9 -9
- package/src/components/tabs.tsx +2 -2
- package/src/components/textarea.tsx +4 -4
- package/src/components/toggle.tsx +8 -8
- package/src/components/tooltip.tsx +1 -1
- package/src/index.ts +3 -2
- package/src/tokens/tokens.ts +54 -40
- package/src/components/__tests__/data.test.tsx +0 -180
- package/src/components/__tests__/disclosure.test.tsx +0 -198
- package/src/components/__tests__/display.test.tsx +0 -262
- package/src/components/__tests__/feedback.test.tsx +0 -138
- package/src/components/__tests__/form.test.tsx +0 -297
- package/src/components/__tests__/layout.test.tsx +0 -388
- package/src/components/__tests__/overlay.test.tsx +0 -90
- package/src/components/__tests__/primitives.test.tsx +0 -248
package/src/components/table.tsx
CHANGED
|
@@ -7,13 +7,13 @@ const Table = React.forwardRef<
|
|
|
7
7
|
>(({ className, containerClassName, ...props }, ref) => (
|
|
8
8
|
<div
|
|
9
9
|
className={cn(
|
|
10
|
-
"w-full overflow-hidden rounded-xl border border-
|
|
10
|
+
"w-full overflow-hidden rounded-xl border border-ground-100 bg-white",
|
|
11
11
|
containerClassName,
|
|
12
12
|
)}
|
|
13
13
|
>
|
|
14
14
|
<table
|
|
15
15
|
ref={ref}
|
|
16
|
-
className={cn("min-w-full caption-bottom divide-y divide-
|
|
16
|
+
className={cn("min-w-full caption-bottom divide-y divide-ground-200", className)}
|
|
17
17
|
{...props}
|
|
18
18
|
/>
|
|
19
19
|
</div>
|
|
@@ -24,7 +24,7 @@ const TableHeader = React.forwardRef<
|
|
|
24
24
|
HTMLTableSectionElement,
|
|
25
25
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
26
26
|
>(({ className, ...props }, ref) => (
|
|
27
|
-
<thead ref={ref} className={cn("bg-
|
|
27
|
+
<thead ref={ref} className={cn("bg-ground-50", className)} {...props} />
|
|
28
28
|
));
|
|
29
29
|
TableHeader.displayName = "TableHeader";
|
|
30
30
|
|
|
@@ -32,7 +32,7 @@ const TableBody = React.forwardRef<
|
|
|
32
32
|
HTMLTableSectionElement,
|
|
33
33
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
34
34
|
>(({ className, ...props }, ref) => (
|
|
35
|
-
<tbody ref={ref} className={cn("divide-y divide-
|
|
35
|
+
<tbody ref={ref} className={cn("divide-y divide-ground-100 bg-white", className)} {...props} />
|
|
36
36
|
));
|
|
37
37
|
TableBody.displayName = "TableBody";
|
|
38
38
|
|
|
@@ -40,7 +40,7 @@ const TableFooter = React.forwardRef<
|
|
|
40
40
|
HTMLTableSectionElement,
|
|
41
41
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
42
42
|
>(({ className, ...props }, ref) => (
|
|
43
|
-
<tfoot ref={ref} className={cn("bg-
|
|
43
|
+
<tfoot ref={ref} className={cn("bg-ground-50 font-medium", className)} {...props} />
|
|
44
44
|
));
|
|
45
45
|
TableFooter.displayName = "TableFooter";
|
|
46
46
|
|
|
@@ -49,7 +49,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
|
|
|
49
49
|
<tr
|
|
50
50
|
ref={ref}
|
|
51
51
|
className={cn(
|
|
52
|
-
"transition-colors hover:bg-
|
|
52
|
+
"transition-colors hover:bg-ground-50/50 data-[state=selected]:bg-ground-50",
|
|
53
53
|
className,
|
|
54
54
|
)}
|
|
55
55
|
{...props}
|
|
@@ -65,7 +65,7 @@ const TableHead = React.forwardRef<
|
|
|
65
65
|
<th
|
|
66
66
|
ref={ref}
|
|
67
67
|
className={cn(
|
|
68
|
-
"px-6 py-3 text-left align-middle label text-
|
|
68
|
+
"px-6 py-3 text-left align-middle label text-ground-400",
|
|
69
69
|
"[&:has([role=checkbox])]:pr-0",
|
|
70
70
|
className,
|
|
71
71
|
)}
|
|
@@ -81,7 +81,7 @@ const TableCell = React.forwardRef<
|
|
|
81
81
|
<td
|
|
82
82
|
ref={ref}
|
|
83
83
|
className={cn(
|
|
84
|
-
"px-6 py-4 align-middle body text-
|
|
84
|
+
"px-6 py-4 align-middle body text-ground-500",
|
|
85
85
|
"[&:has([role=checkbox])]:pr-0",
|
|
86
86
|
className,
|
|
87
87
|
)}
|
|
@@ -94,7 +94,7 @@ const TableCaption = React.forwardRef<
|
|
|
94
94
|
HTMLTableCaptionElement,
|
|
95
95
|
React.HTMLAttributes<HTMLTableCaptionElement>
|
|
96
96
|
>(({ className, ...props }, ref) => (
|
|
97
|
-
<caption ref={ref} className={cn("mt-4 caption text-
|
|
97
|
+
<caption ref={ref} className={cn("mt-4 caption text-ground-400", className)} {...props} />
|
|
98
98
|
));
|
|
99
99
|
TableCaption.displayName = "TableCaption";
|
|
100
100
|
|
package/src/components/tabs.tsx
CHANGED
|
@@ -18,7 +18,7 @@ const TabsList = React.forwardRef<
|
|
|
18
18
|
>(({ className, ...props }, ref) => (
|
|
19
19
|
<Tabs.List
|
|
20
20
|
ref={ref}
|
|
21
|
-
className={cn("inline-flex items-center gap-1 border-b border-
|
|
21
|
+
className={cn("inline-flex items-center gap-1 border-b border-ground-100 w-full", className)}
|
|
22
22
|
{...props}
|
|
23
23
|
/>
|
|
24
24
|
));
|
|
@@ -31,7 +31,7 @@ const TabsTrigger = React.forwardRef<
|
|
|
31
31
|
<Tabs.Trigger
|
|
32
32
|
ref={ref}
|
|
33
33
|
className={cn(
|
|
34
|
-
"px-0 pb-2.5 body font-medium text-
|
|
34
|
+
"px-0 pb-2.5 body font-medium text-ground-400",
|
|
35
35
|
"border-b-2 border-transparent -mb-px",
|
|
36
36
|
"transition-colors cursor-pointer",
|
|
37
37
|
"data-[state=active]:text-brand-primary data-[state=active]:border-brand-primary",
|
|
@@ -6,11 +6,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
|
|
6
6
|
<textarea
|
|
7
7
|
data-slot="textarea"
|
|
8
8
|
className={cn(
|
|
9
|
-
"flex min-h-[80px] w-full rounded-md border border-
|
|
10
|
-
"body text-
|
|
9
|
+
"flex min-h-[80px] w-full rounded-md border border-ground-200 bg-white px-3 py-2",
|
|
10
|
+
"body text-ground-900 placeholder:text-ground-400",
|
|
11
11
|
"resize-none transition-colors duration-150",
|
|
12
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
13
|
-
"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-
|
|
12
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15 focus-visible:border-ground-400",
|
|
13
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
|
|
14
14
|
className,
|
|
15
15
|
)}
|
|
16
16
|
{...props}
|
|
@@ -18,18 +18,18 @@ const toggleVariants = cva(
|
|
|
18
18
|
variants: {
|
|
19
19
|
variant: {
|
|
20
20
|
default: [
|
|
21
|
-
"bg-transparent text-
|
|
22
|
-
"hover:bg-
|
|
23
|
-
"data-[state=on]:bg-
|
|
21
|
+
"bg-transparent text-ground-600",
|
|
22
|
+
"hover:bg-ground-100 hover:text-ground-900",
|
|
23
|
+
"data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900",
|
|
24
24
|
],
|
|
25
25
|
outline: [
|
|
26
|
-
"border border-
|
|
27
|
-
"hover:bg-
|
|
28
|
-
"data-[state=on]:bg-
|
|
26
|
+
"border border-ground-200 bg-white text-ground-600 shadow-natural",
|
|
27
|
+
"hover:bg-ground-50 hover:text-ground-900",
|
|
28
|
+
"data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900 data-[state=on]:border-ground-300",
|
|
29
29
|
],
|
|
30
30
|
brand: [
|
|
31
|
-
"bg-transparent text-
|
|
32
|
-
"hover:bg-
|
|
31
|
+
"bg-transparent text-ground-600",
|
|
32
|
+
"hover:bg-ground-100 hover:text-ground-900",
|
|
33
33
|
"data-[state=on]:bg-brand-primary data-[state=on]:text-white",
|
|
34
34
|
],
|
|
35
35
|
},
|
|
@@ -27,7 +27,7 @@ const TooltipContent = React.forwardRef<
|
|
|
27
27
|
ref={ref}
|
|
28
28
|
sideOffset={sideOffset}
|
|
29
29
|
className={cn(
|
|
30
|
-
"z-50 rounded-lg bg-
|
|
30
|
+
"z-50 rounded-lg bg-ground-900 px-2.5 py-1.5 caption text-white",
|
|
31
31
|
"animate-in fade-in-0 zoom-in-95",
|
|
32
32
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
33
33
|
"data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
|
package/src/index.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
// @hilum/ui — Hilum design system primitives.
|
|
2
2
|
// All components, utilities, and re-exports.
|
|
3
3
|
//
|
|
4
|
-
// Hilum
|
|
5
|
-
//
|
|
4
|
+
// Hilum targets React apps across browser, prerendered docs, Electron, and a
|
|
5
|
+
// future React Native package. Keep exports framework-agnostic and avoid
|
|
6
|
+
// framework-specific entrypoint directives here.
|
|
6
7
|
|
|
7
8
|
// Utilities
|
|
8
9
|
export { cn } from "./lib/utils";
|
package/src/tokens/tokens.ts
CHANGED
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
// A build step (scripts/build-tokens.mjs) reads the compiled output of this
|
|
5
5
|
// file and emits dist/tokens.css for consumers to `@import`.
|
|
6
6
|
//
|
|
7
|
-
// Brand model: D8 —
|
|
7
|
+
// Brand model: D8 — base palette is fixed here. Per-product overrides are
|
|
8
|
+
// applied at runtime via createTheme() in @hilum/ui/create-theme.
|
|
8
9
|
// Color modes: D7 — light + dark, both auto (`prefers-color-scheme`) and
|
|
9
10
|
// explicit via `[data-theme]`.
|
|
10
11
|
//
|
|
@@ -12,25 +13,25 @@
|
|
|
12
13
|
// brand.primary #C100F1 — vivid purple — purple-500 on the scale below
|
|
13
14
|
// brand.secondary #FFF5BF — pale lemon — butter-200 on the scale below
|
|
14
15
|
//
|
|
15
|
-
//
|
|
16
|
+
// ground — neutral spine for text, borders, and structure (values: Tailwind neutral)
|
|
16
17
|
|
|
17
18
|
export const tokens = {
|
|
18
19
|
/* ============================================================== *
|
|
19
20
|
* PALETTE — concrete colors *
|
|
20
21
|
* ============================================================== */
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
50: "#
|
|
24
|
-
100: "#
|
|
25
|
-
200: "#
|
|
26
|
-
300: "#
|
|
27
|
-
400: "#
|
|
28
|
-
500: "#
|
|
29
|
-
600: "#
|
|
30
|
-
700: "#
|
|
31
|
-
800: "#
|
|
32
|
-
900: "#
|
|
33
|
-
950: "#
|
|
23
|
+
ground: {
|
|
24
|
+
50: "#fafafa",
|
|
25
|
+
100: "#f5f5f5",
|
|
26
|
+
200: "#e5e5e5",
|
|
27
|
+
300: "#d4d4d4",
|
|
28
|
+
400: "#a3a3a3",
|
|
29
|
+
500: "#737373",
|
|
30
|
+
600: "#525252",
|
|
31
|
+
700: "#404040",
|
|
32
|
+
800: "#262626",
|
|
33
|
+
900: "#171717",
|
|
34
|
+
950: "#0a0a0a",
|
|
34
35
|
},
|
|
35
36
|
|
|
36
37
|
// Pale lemon — anchor: butter-200 = #FFF5BF
|
|
@@ -78,50 +79,50 @@ export const tokens = {
|
|
|
78
79
|
semantic: {
|
|
79
80
|
light: {
|
|
80
81
|
background: "#ffffff",
|
|
81
|
-
foreground: "#
|
|
82
|
+
foreground: "#171717", // ground-900
|
|
82
83
|
card: "#ffffff",
|
|
83
|
-
cardForeground: "#
|
|
84
|
-
surface: "#
|
|
85
|
-
surfaceForeground: "#
|
|
86
|
-
border: "#
|
|
87
|
-
input: "#
|
|
88
|
-
muted: "#
|
|
89
|
-
mutedForeground: "#
|
|
84
|
+
cardForeground: "#171717",
|
|
85
|
+
surface: "#fafafa", // ground-50
|
|
86
|
+
surfaceForeground: "#262626", // ground-800
|
|
87
|
+
border: "#f5f5f5", // ground-100
|
|
88
|
+
input: "#f5f5f5",
|
|
89
|
+
muted: "#fafafa",
|
|
90
|
+
mutedForeground: "#737373", // ground-500
|
|
90
91
|
accent: "#fdf0ff", // purple-50
|
|
91
92
|
accentForeground: "#740092", // purple-700
|
|
92
93
|
primary: "#c100f1", // purple-500 = brand.primary
|
|
93
94
|
primaryForeground: "#ffffff",
|
|
94
|
-
secondary: "#
|
|
95
|
-
secondaryForeground: "#
|
|
95
|
+
secondary: "#fafafa", // ground-50
|
|
96
|
+
secondaryForeground: "#404040", // ground-700
|
|
96
97
|
destructive: "#dc2626",
|
|
97
98
|
destructiveForeground: "#ffffff",
|
|
98
99
|
success: "#CDEA19", // lime — functional semantic only
|
|
99
|
-
successForeground: "#
|
|
100
|
+
successForeground: "#171717",
|
|
100
101
|
warning: "#fff5bf", // butter-200 = brand.secondary
|
|
101
|
-
warningForeground: "#
|
|
102
|
+
warningForeground: "#171717", // ground-900
|
|
102
103
|
ring: "#c100f1", // purple-500 = brand.primary
|
|
103
104
|
},
|
|
104
105
|
dark: {
|
|
105
|
-
background: "#
|
|
106
|
-
foreground: "#
|
|
107
|
-
card: "#
|
|
108
|
-
cardForeground: "#
|
|
109
|
-
surface: "#
|
|
110
|
-
surfaceForeground: "#
|
|
111
|
-
border: "#
|
|
112
|
-
input: "#
|
|
113
|
-
muted: "#
|
|
114
|
-
mutedForeground: "#
|
|
106
|
+
background: "#0a0a0a", // ground-950
|
|
107
|
+
foreground: "#fafafa", // ground-50
|
|
108
|
+
card: "#171717", // ground-900
|
|
109
|
+
cardForeground: "#fafafa",
|
|
110
|
+
surface: "#171717",
|
|
111
|
+
surfaceForeground: "#f5f5f5",
|
|
112
|
+
border: "#262626", // ground-800
|
|
113
|
+
input: "#262626",
|
|
114
|
+
muted: "#171717",
|
|
115
|
+
mutedForeground: "#a3a3a3", // ground-400
|
|
115
116
|
accent: "#330040", // purple-900
|
|
116
117
|
accentForeground: "#f5d6ff", // purple-100
|
|
117
118
|
primary: "#c100f1", // purple-500 — brand stays consistent (D8)
|
|
118
119
|
primaryForeground: "#ffffff",
|
|
119
|
-
secondary: "#
|
|
120
|
-
secondaryForeground: "#
|
|
120
|
+
secondary: "#171717",
|
|
121
|
+
secondaryForeground: "#f5f5f5",
|
|
121
122
|
destructive: "#ef4444", // red-500 (slightly lighter for dark)
|
|
122
123
|
destructiveForeground: "#ffffff",
|
|
123
124
|
success: "#CDEA19", // lime — functional semantic only
|
|
124
|
-
successForeground: "#
|
|
125
|
+
successForeground: "#0a0a0a",
|
|
125
126
|
warning: "#221600", // butter-950 surface
|
|
126
127
|
warningForeground: "#fffad0", // butter-100
|
|
127
128
|
ring: "#c100f1", // purple-500 = brand.primary
|
|
@@ -167,11 +168,24 @@ export const tokens = {
|
|
|
167
168
|
base: "0.5rem",
|
|
168
169
|
sm: "calc(0.5rem - 4px)",
|
|
169
170
|
md: "calc(0.5rem - 2px)",
|
|
170
|
-
lg: "0.5rem",
|
|
171
|
+
lg: "calc(0.5rem + 2px)",
|
|
171
172
|
xl: "calc(0.5rem + 4px)",
|
|
172
173
|
full: "9999px",
|
|
173
174
|
},
|
|
174
175
|
|
|
176
|
+
/* ============================================================== *
|
|
177
|
+
* Z-INDEX — semantic layering scale *
|
|
178
|
+
* ============================================================== */
|
|
179
|
+
|
|
180
|
+
zIndex: {
|
|
181
|
+
dropdown: 40,
|
|
182
|
+
sticky: 50,
|
|
183
|
+
fixed: 60,
|
|
184
|
+
modal: 100,
|
|
185
|
+
popover: 110,
|
|
186
|
+
tooltip: 120,
|
|
187
|
+
},
|
|
188
|
+
|
|
175
189
|
shadow: {
|
|
176
190
|
natural:
|
|
177
191
|
"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)",
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect } from "vitest";
|
|
2
|
-
import { render, screen } from "@testing-library/react";
|
|
3
|
-
import {
|
|
4
|
-
Table,
|
|
5
|
-
TableBody,
|
|
6
|
-
TableCell,
|
|
7
|
-
TableHead,
|
|
8
|
-
TableHeader,
|
|
9
|
-
TableRow,
|
|
10
|
-
TableFooter,
|
|
11
|
-
TableCaption,
|
|
12
|
-
} from "../table";
|
|
13
|
-
import {
|
|
14
|
-
Pagination,
|
|
15
|
-
PaginationContent,
|
|
16
|
-
PaginationEllipsis,
|
|
17
|
-
PaginationItem,
|
|
18
|
-
PaginationLink,
|
|
19
|
-
PaginationNext,
|
|
20
|
-
PaginationPrevious,
|
|
21
|
-
} from "../pagination";
|
|
22
|
-
import { ScrollArea } from "../scroll-area";
|
|
23
|
-
import { AspectRatio } from "../aspect-ratio";
|
|
24
|
-
|
|
25
|
-
/* ------------------------------------------------------------------ */
|
|
26
|
-
/* Table */
|
|
27
|
-
/* ------------------------------------------------------------------ */
|
|
28
|
-
|
|
29
|
-
describe("Table", () => {
|
|
30
|
-
function TestTable() {
|
|
31
|
-
return (
|
|
32
|
-
<Table>
|
|
33
|
-
<TableHeader>
|
|
34
|
-
<TableRow>
|
|
35
|
-
<TableHead>Name</TableHead>
|
|
36
|
-
<TableHead>Email</TableHead>
|
|
37
|
-
</TableRow>
|
|
38
|
-
</TableHeader>
|
|
39
|
-
<TableBody>
|
|
40
|
-
<TableRow>
|
|
41
|
-
<TableCell>Alice</TableCell>
|
|
42
|
-
<TableCell>alice@example.com</TableCell>
|
|
43
|
-
</TableRow>
|
|
44
|
-
</TableBody>
|
|
45
|
-
<TableFooter>
|
|
46
|
-
<TableRow>
|
|
47
|
-
<TableCell>Total</TableCell>
|
|
48
|
-
<TableCell>1 user</TableCell>
|
|
49
|
-
</TableRow>
|
|
50
|
-
</TableFooter>
|
|
51
|
-
</Table>
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
it("renders a table element", () => {
|
|
56
|
-
render(<TestTable />);
|
|
57
|
-
expect(screen.getByRole("table")).toBeInTheDocument();
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
it("renders column headers", () => {
|
|
61
|
-
render(<TestTable />);
|
|
62
|
-
expect(screen.getByRole("columnheader", { name: "Name" })).toBeInTheDocument();
|
|
63
|
-
expect(screen.getByRole("columnheader", { name: "Email" })).toBeInTheDocument();
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
it("renders data cells", () => {
|
|
67
|
-
render(<TestTable />);
|
|
68
|
-
expect(screen.getByRole("cell", { name: "Alice" })).toBeInTheDocument();
|
|
69
|
-
expect(screen.getByRole("cell", { name: "alice@example.com" })).toBeInTheDocument();
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
it("renders caption when provided", () => {
|
|
73
|
-
render(
|
|
74
|
-
<Table>
|
|
75
|
-
<TableCaption>Users list</TableCaption>
|
|
76
|
-
<TableBody>
|
|
77
|
-
<TableRow>
|
|
78
|
-
<TableCell>Cell</TableCell>
|
|
79
|
-
</TableRow>
|
|
80
|
-
</TableBody>
|
|
81
|
-
</Table>,
|
|
82
|
-
);
|
|
83
|
-
expect(screen.getByText("Users list")).toBeInTheDocument();
|
|
84
|
-
});
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
/* ------------------------------------------------------------------ */
|
|
88
|
-
/* Pagination */
|
|
89
|
-
/* ------------------------------------------------------------------ */
|
|
90
|
-
|
|
91
|
-
describe("Pagination", () => {
|
|
92
|
-
it("renders navigation", () => {
|
|
93
|
-
render(
|
|
94
|
-
<Pagination>
|
|
95
|
-
<PaginationContent>
|
|
96
|
-
<PaginationItem>
|
|
97
|
-
<PaginationPrevious href="#" />
|
|
98
|
-
</PaginationItem>
|
|
99
|
-
<PaginationItem>
|
|
100
|
-
<PaginationLink href="#" isActive>
|
|
101
|
-
1
|
|
102
|
-
</PaginationLink>
|
|
103
|
-
</PaginationItem>
|
|
104
|
-
<PaginationItem>
|
|
105
|
-
<PaginationLink href="#">2</PaginationLink>
|
|
106
|
-
</PaginationItem>
|
|
107
|
-
<PaginationItem>
|
|
108
|
-
<PaginationEllipsis />
|
|
109
|
-
</PaginationItem>
|
|
110
|
-
<PaginationItem>
|
|
111
|
-
<PaginationNext href="#" />
|
|
112
|
-
</PaginationItem>
|
|
113
|
-
</PaginationContent>
|
|
114
|
-
</Pagination>,
|
|
115
|
-
);
|
|
116
|
-
expect(screen.getByRole("navigation", { name: /pagination/i })).toBeInTheDocument();
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
it("renders previous and next links", () => {
|
|
120
|
-
render(
|
|
121
|
-
<Pagination>
|
|
122
|
-
<PaginationContent>
|
|
123
|
-
<PaginationItem>
|
|
124
|
-
<PaginationPrevious href="/prev" />
|
|
125
|
-
</PaginationItem>
|
|
126
|
-
<PaginationItem>
|
|
127
|
-
<PaginationNext href="/next" />
|
|
128
|
-
</PaginationItem>
|
|
129
|
-
</PaginationContent>
|
|
130
|
-
</Pagination>,
|
|
131
|
-
);
|
|
132
|
-
expect(screen.getByRole("link", { name: /previous/i })).toBeInTheDocument();
|
|
133
|
-
expect(screen.getByRole("link", { name: /next/i })).toBeInTheDocument();
|
|
134
|
-
});
|
|
135
|
-
|
|
136
|
-
it("marks active link with aria-current", () => {
|
|
137
|
-
render(
|
|
138
|
-
<Pagination>
|
|
139
|
-
<PaginationContent>
|
|
140
|
-
<PaginationItem>
|
|
141
|
-
<PaginationLink href="#" isActive>
|
|
142
|
-
3
|
|
143
|
-
</PaginationLink>
|
|
144
|
-
</PaginationItem>
|
|
145
|
-
</PaginationContent>
|
|
146
|
-
</Pagination>,
|
|
147
|
-
);
|
|
148
|
-
expect(screen.getByRole("link", { name: "3" })).toHaveAttribute("aria-current", "page");
|
|
149
|
-
});
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
/* ------------------------------------------------------------------ */
|
|
153
|
-
/* ScrollArea */
|
|
154
|
-
/* ------------------------------------------------------------------ */
|
|
155
|
-
|
|
156
|
-
describe("ScrollArea", () => {
|
|
157
|
-
it("renders children", () => {
|
|
158
|
-
render(
|
|
159
|
-
<ScrollArea style={{ height: 100 }}>
|
|
160
|
-
<p>Scrollable content</p>
|
|
161
|
-
</ScrollArea>,
|
|
162
|
-
);
|
|
163
|
-
expect(screen.getByText("Scrollable content")).toBeInTheDocument();
|
|
164
|
-
});
|
|
165
|
-
});
|
|
166
|
-
|
|
167
|
-
/* ------------------------------------------------------------------ */
|
|
168
|
-
/* AspectRatio */
|
|
169
|
-
/* ------------------------------------------------------------------ */
|
|
170
|
-
|
|
171
|
-
describe("AspectRatio", () => {
|
|
172
|
-
it("renders children", () => {
|
|
173
|
-
render(
|
|
174
|
-
<AspectRatio ratio={16 / 9}>
|
|
175
|
-
<img alt="hero" src="" />
|
|
176
|
-
</AspectRatio>,
|
|
177
|
-
);
|
|
178
|
-
expect(screen.getByAltText("hero")).toBeInTheDocument();
|
|
179
|
-
});
|
|
180
|
-
});
|