Skip to content

Commit 7701874

Browse files
austinlparkeraustinlparker
committed
chore: add copyright headers to UI components
1 parent 3e57d1b commit 7701874

File tree

7 files changed

+572
-0
lines changed

7 files changed

+572
-0
lines changed

‎src/components/ui/button.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*
2+
* Copyright The OpenTelemetry Authors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import * as React from "react"
7+
import { Slot } from "@radix-ui/react-slot"
8+
import { cva, type VariantProps } from "class-variance-authority"
9+
10+
import { cn } from "@/lib/utils"
11+
12+
const buttonVariants = cva(
13+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-neutral-400 focus-visible:ring-neutral-400/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500",
14+
{
15+
variants: {
16+
variant: {
17+
default:
18+
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
19+
destructive:
20+
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
21+
outline:
22+
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
23+
secondary:
24+
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
25+
ghost:
26+
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
27+
link: "text-primary underline-offset-4 hover:underline",
28+
},
29+
size: {
30+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
31+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
32+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
33+
icon: "size-9",
34+
},
35+
},
36+
defaultVariants: {
37+
variant: "default",
38+
size: "default",
39+
},
40+
}
41+
)
42+
43+
function Button({
44+
className,
45+
variant,
46+
size,
47+
asChild = false,
48+
...props
49+
}: React.ComponentProps<"button"> &
50+
VariantProps<typeof buttonVariants> & {
51+
asChild?: boolean
52+
}) {
53+
const Comp = asChild ? Slot : "button"
54+
55+
return (
56+
<Comp
57+
data-slot="button"
58+
className={cn(buttonVariants({ variant, size, className }))}
59+
{...props}
60+
/>
61+
)
62+
}
63+
64+
export { Button, buttonVariants }

‎src/components/ui/card.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/*
2+
* Copyright The OpenTelemetry Authors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import * as React from "react"
7+
8+
import { cn } from "@/lib/utils"
9+
10+
function Card({ className, ...props }: React.ComponentProps<"div">) {
11+
return (
12+
<div
13+
data-slot="card"
14+
className={cn(
15+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
16+
className
17+
)}
18+
{...props}
19+
/>
20+
)
21+
}
22+
23+
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
24+
return (
25+
<div
26+
data-slot="card-header"
27+
className={cn(
28+
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
29+
className
30+
)}
31+
{...props}
32+
/>
33+
)
34+
}
35+
36+
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
37+
return (
38+
<div
39+
data-slot="card-title"
40+
className={cn("leading-none font-semibold", className)}
41+
{...props}
42+
/>
43+
)
44+
}
45+
46+
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
47+
return (
48+
<div
49+
data-slot="card-description"
50+
className={cn("text-muted-foreground text-sm", className)}
51+
{...props}
52+
/>
53+
)
54+
}
55+
56+
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
57+
return (
58+
<div
59+
data-slot="card-action"
60+
className={cn(
61+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
62+
className
63+
)}
64+
{...props}
65+
/>
66+
)
67+
}
68+
69+
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
70+
return (
71+
<div
72+
data-slot="card-content"
73+
className={cn("px-6", className)}
74+
{...props}
75+
/>
76+
)
77+
}
78+
79+
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
80+
return (
81+
<div
82+
data-slot="card-footer"
83+
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
84+
{...props}
85+
/>
86+
)
87+
}
88+
89+
export {
90+
Card,
91+
CardHeader,
92+
CardFooter,
93+
CardTitle,
94+
CardAction,
95+
CardDescription,
96+
CardContent,
97+
}

‎src/components/ui/input.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* Copyright The OpenTelemetry Authors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import * as React from "react"
7+
8+
import { cn } from "@/lib/utils"
9+
10+
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
11+
return (
12+
<input
13+
type={type}
14+
data-slot="input"
15+
className={cn(
16+
"file:text-black dark:file:text-white placeholder:text-neutral-500 selection:bg-blue-600 selection:text-white dark:bg-neutral-800/30 border-neutral-200 dark:border-neutral-700 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
17+
"focus-visible:border-neutral-400 focus-visible:ring-neutral-400/50 focus-visible:ring-[3px]",
18+
"aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500",
19+
className
20+
)}
21+
{...props}
22+
/>
23+
)
24+
}
25+
26+
export { Input }

‎src/components/ui/pagination.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/*
2+
* Copyright The OpenTelemetry Authors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import * as React from "react"
7+
import {
8+
ChevronLeftIcon,
9+
ChevronRightIcon,
10+
MoreHorizontalIcon,
11+
} from "lucide-react"
12+
13+
import { cn } from "@/lib/utils"
14+
import { Button, buttonVariants } from "@/components/ui/button"
15+
16+
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
17+
return (
18+
<nav
19+
role="navigation"
20+
aria-label="pagination"
21+
data-slot="pagination"
22+
className={cn("mx-auto flex w-full justify-center", className)}
23+
{...props}
24+
/>
25+
)
26+
}
27+
28+
function PaginationContent({
29+
className,
30+
...props
31+
}: React.ComponentProps<"ul">) {
32+
return (
33+
<ul
34+
data-slot="pagination-content"
35+
className={cn("flex flex-row items-center gap-1", className)}
36+
{...props}
37+
/>
38+
)
39+
}
40+
41+
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
42+
return <li data-slot="pagination-item" {...props} />
43+
}
44+
45+
type PaginationLinkProps = {
46+
isActive?: boolean
47+
} & Pick<React.ComponentProps<typeof Button>, "size"> &
48+
React.ComponentProps<"a">
49+
50+
function PaginationLink({
51+
className,
52+
isActive,
53+
size = "icon",
54+
...props
55+
}: PaginationLinkProps) {
56+
return (
57+
<a
58+
aria-current={isActive ? "page" : undefined}
59+
data-slot="pagination-link"
60+
data-active={isActive}
61+
className={cn(
62+
buttonVariants({
63+
variant: isActive ? "outline" : "ghost",
64+
size,
65+
}),
66+
className
67+
)}
68+
{...props}
69+
/>
70+
)
71+
}
72+
73+
function PaginationPrevious({
74+
className,
75+
...props
76+
}: React.ComponentProps<typeof PaginationLink>) {
77+
return (
78+
<PaginationLink
79+
aria-label="Go to previous page"
80+
size="default"
81+
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
82+
{...props}
83+
>
84+
<ChevronLeftIcon />
85+
<span className="hidden sm:block">Previous</span>
86+
</PaginationLink>
87+
)
88+
}
89+
90+
function PaginationNext({
91+
className,
92+
...props
93+
}: React.ComponentProps<typeof PaginationLink>) {
94+
return (
95+
<PaginationLink
96+
aria-label="Go to next page"
97+
size="default"
98+
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
99+
{...props}
100+
>
101+
<span className="hidden sm:block">Next</span>
102+
<ChevronRightIcon />
103+
</PaginationLink>
104+
)
105+
}
106+
107+
function PaginationEllipsis({
108+
className,
109+
...props
110+
}: React.ComponentProps<"span">) {
111+
return (
112+
<span
113+
aria-hidden
114+
data-slot="pagination-ellipsis"
115+
className={cn("flex size-9 items-center justify-center", className)}
116+
{...props}
117+
>
118+
<MoreHorizontalIcon className="size-4" />
119+
<span className="sr-only">More pages</span>
120+
</span>
121+
)
122+
}
123+
124+
export {
125+
Pagination,
126+
PaginationContent,
127+
PaginationLink,
128+
PaginationItem,
129+
PaginationPrevious,
130+
PaginationNext,
131+
PaginationEllipsis,
132+
}

0 commit comments

Comments
 (0)