Skip to content

Commit 7745489

Browse files
brianorwhateverbrianorwhatever
committed
feat(c): updates
1 parent 7a6b0cd commit 7745489

File tree

24 files changed

+697
-378
lines changed

24 files changed

+697
-378
lines changed

‎bun.lockb‎

9.48 KB
Binary file not shown.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"devDependencies": {
3838
"@semantic-release/changelog": "^6.0.3",
3939
"@semantic-release/git": "^10.0.1",
40+
"@tailwindcss/cli": "^4.0.1",
4041
"@tailwindcss/postcss": "^4.0.1",
4142
"@types/react": "^18.3.3",
4243
"@types/react-dom": "^18.3.0",
@@ -53,8 +54,8 @@
5354
"scripts": {
5455
"build": "tsc",
5556
"dev": "tsc --watch",
56-
"docs:dev": "bun run src/docs/server.ts",
57-
"docs:build": "bun build src/docs/index.tsx --outdir dist/docs && cp src/docs/index.html dist/docs/index.html && bunx postcss src/docs/index.css -o dist/docs/index.css",
57+
"docs:dev": "bun run --watch src/docs/server.ts",
58+
"docs:build": "bun build src/docs/index.tsx --outdir dist/docs && cp src/docs/index.html dist/docs/index.html",
5859
"docs:preview": "bun run src/docs/server.ts --prod"
5960
},
6061
"keywords": [

‎postcss.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
3+
'@tailwindcss/postcss': {},
44
autoprefixer: {},
5-
},
5+
}
66
}

‎src/components/button/Button.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import { cva, type VariantProps } from "class-variance-authority";
33
import { cn } from "../../utils/cn";
44

55
const buttonVariants = cva(
6-
"inline-flex items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 disabled:pointer-events-none disabled:opacity-50",
6+
"inline-flex items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:pointer-events-none disabled:opacity-50",
77
{
88
variants: {
99
variant: {
10-
default: "bg-blue-500 text-white hover:bg-blue-600",
11-
destructive: "bg-red-500/20 text-red-300 hover:bg-red-500/30",
12-
outline: "border border-gray-700 bg-transparent hover:bg-gray-700",
13-
ghost: "hover:bg-gray-700",
14-
link: "text-blue-400 hover:text-blue-300 underline-offset-4 hover:underline",
15-
amber: "bg-amber-500/20 text-amber-300 border border-amber-500/30 hover:bg-amber-500/30",
10+
default: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600",
11+
destructive: "bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600",
12+
outline: "border border-gray-300 dark:border-gray-600 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-900 dark:text-gray-100",
13+
ghost: "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-900 dark:text-gray-100",
14+
link: "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline-offset-4 hover:underline",
15+
amber: "bg-amber-600 text-white hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600",
1616
},
1717
size: {
1818
default: "h-9 px-4 py-2",
@@ -35,9 +35,11 @@ export interface ButtonProps
3535
}
3636

3737
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
38-
({ className, variant, size, ...props }, ref) => {
38+
({ className, variant, size, asChild, ...props }, ref) => {
39+
const Comp = asChild ? 'span' : 'button';
40+
3941
return (
40-
<button
42+
<Comp
4143
className={cn(buttonVariants({ variant, size, className }))}
4244
ref={ref}
4345
{...props}

‎src/components/dropdown/Dropdown.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from "react";
22
import { cn } from "../../utils/cn";
3-
import { ChevronDown } from "lucide-react";
43
import { ZINDEX } from "../../utils/z-index";
54

65
export interface DropdownProps {
@@ -31,12 +30,19 @@ export const Dropdown: React.FC<DropdownProps> = ({
3130
}, []);
3231

3332
return (
34-
<div className="relative" ref={dropdownRef}>
33+
<div className="relative inline-block" ref={dropdownRef}>
3534
<div onClick={() => setIsOpen(!isOpen)}>{trigger}</div>
3635
{isOpen && (
3736
<div
3837
className={cn(
39-
"absolute right-0 mt-2 rounded-md bg-gray-800 shadow-lg",
38+
"absolute mt-2 rounded-lg shadow-lg",
39+
"bg-white dark:bg-gray-900",
40+
"border border-gray-200 dark:border-gray-800",
41+
"min-w-[8rem] py-1",
42+
{
43+
"left-0": align === "left",
44+
"right-0": align === "right",
45+
},
4046
className
4147
)}
4248
style={{ zIndex: ZINDEX.dropdown }}
@@ -55,7 +61,10 @@ export const DropdownItem = React.forwardRef<
5561
<button
5662
ref={ref}
5763
className={cn(
58-
"flex w-full items-center rounded-md px-2 py-1.5 text-sm text-gray-300 hover:bg-gray-700 focus:outline-none",
64+
"flex w-full items-center px-3 py-2 text-sm",
65+
"text-gray-700 dark:text-gray-200",
66+
"hover:bg-gray-100 dark:hover:bg-gray-800",
67+
"focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800",
5968
className
6069
)}
6170
{...props}

‎src/components/input/Input.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
1010
<input
1111
type={type}
1212
className={cn(
13-
"flex h-9 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
13+
"flex h-9 w-full rounded-md px-3 py-1 text-sm shadow-sm transition-colors",
14+
"bg-white dark:bg-gray-800",
15+
"text-gray-900 dark:text-gray-100",
16+
"border border-gray-300 dark:border-gray-700",
17+
"placeholder:text-gray-500 dark:placeholder:text-gray-400",
18+
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500",
19+
"disabled:cursor-not-allowed disabled:opacity-50",
1420
className
1521
)}
1622
ref={ref}

‎src/components/modal/Dialog.tsx‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from "react";
22
import { cn } from "../../utils/cn";
3+
import { ZINDEX } from "../../utils/z-index";
34

45
export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
56
open?: boolean;
@@ -11,20 +12,25 @@ export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
1112
if (!open) return null;
1213

1314
return (
14-
<div className="fixed inset-0 z-50 flex items-center justify-center">
15-
<div
16-
className="fixed inset-0"
17-
onClick={onClose}
18-
/>
19-
<div
20-
ref={ref}
21-
className={cn(
22-
"relative bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-4",
23-
className
24-
)}
25-
{...props}
26-
>
27-
{children}
15+
<div
16+
className="fixed inset-0 bg-black/50"
17+
style={{ zIndex: ZINDEX.dialog }}
18+
onClick={onClose}
19+
>
20+
<div className="fixed inset-0 flex items-center justify-center p-4">
21+
<div
22+
ref={ref}
23+
className={cn(
24+
"relative rounded-lg shadow-lg",
25+
"bg-white dark:bg-gray-900",
26+
"border border-gray-200 dark:border-gray-800",
27+
className
28+
)}
29+
onClick={(e) => e.stopPropagation()}
30+
{...props}
31+
>
32+
{children}
33+
</div>
2834
</div>
2935
</div>
3036
);
@@ -36,7 +42,10 @@ export const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttribute
3642
({ className, ...props }, ref) => (
3743
<div
3844
ref={ref}
39-
className={cn("p-6 border-b border-gray-700", className)}
45+
className={cn(
46+
"p-6 border-b border-gray-200 dark:border-gray-800",
47+
className
48+
)}
4049
{...props}
4150
/>
4251
)
@@ -47,7 +56,10 @@ export const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLAttribut
4756
({ className, ...props }, ref) => (
4857
<div
4958
ref={ref}
50-
className={cn("p-6", className)}
59+
className={cn(
60+
"p-6",
61+
className
62+
)}
5163
{...props}
5264
/>
5365
)

‎src/components/modal/DialogVariants.tsx‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,39 @@ interface AlertDialogProps extends React.HTMLAttributes<HTMLDivElement> {
1515
export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
1616
({ className, open, onClose, title, description, variant = "info", actions, ...props }, ref) => {
1717
const icons = {
18-
info: <Info className="h-5 w-5 text-blue-400" />,
19-
success: <CheckCircle className="h-5 w-5 text-green-400" />,
20-
warning: <AlertTriangle className="h-5 w-5 text-yellow-400" />,
21-
error: <XCircle className="h-5 w-5 text-red-400" />,
18+
info: <Info className="h-5 w-5 text-blue-600 dark:text-blue-400" />,
19+
success: <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-500" />,
20+
warning: <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-500" />,
21+
error: <XCircle className="h-5 w-5 text-red-600 dark:text-red-500" />,
2222
};
2323

2424
return (
25-
<Dialog open={open} onClose={onClose} className={cn("max-w-md", className)} {...props}>
26-
<DialogHeader className="flex items-start gap-3">
25+
<Dialog
26+
open={open}
27+
onClose={onClose}
28+
className={cn(
29+
"max-w-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100",
30+
className
31+
)}
32+
{...props}
33+
>
34+
<DialogHeader className="flex items-start gap-3 bg-white dark:bg-gray-900">
2735
{icons[variant]}
2836
<div>
29-
<h3 className="text-lg font-semibold">{title}</h3>
30-
{description && <p className="mt-1 text-sm text-gray-400">{description}</p>}
37+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
38+
{title}
39+
</h3>
40+
{description && (
41+
<p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
42+
{description}
43+
</p>
44+
)}
3145
</div>
3246
</DialogHeader>
3347
{actions && (
34-
<DialogContent className="flex justify-end gap-3">{actions}</DialogContent>
48+
<DialogContent className="flex justify-end gap-3 bg-gray-50 dark:bg-gray-900">
49+
{actions}
50+
</DialogContent>
3551
)}
3652
</Dialog>
3753
);

‎src/components/navigation/NavMenu.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,21 @@ export const NavMenu: React.FC<NavMenuProps> = ({
2424
}
2525
};
2626

27+
// Close menu when pressing escape
28+
const handleEscape = (event: KeyboardEvent) => {
29+
if (event.key === 'Escape') {
30+
setIsOpen(false);
31+
}
32+
};
33+
2734
document.addEventListener("mousedown", handleClickOutside);
28-
return () => document.removeEventListener("mousedown", handleClickOutside);
35+
document.addEventListener("keydown", handleEscape);
36+
37+
return () => {
38+
document.removeEventListener("mousedown", handleClickOutside);
39+
document.removeEventListener("keydown", handleEscape);
40+
setIsOpen(false); // Ensure menu is closed on unmount
41+
};
2942
}, []);
3043

3144
return (
@@ -43,7 +56,7 @@ export const NavMenu: React.FC<NavMenuProps> = ({
4356
"absolute right-0 mt-2 w-48 rounded-md bg-gray-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5",
4457
className
4558
)}
46-
style={{ zIndex: ZINDEX.navMenu }}
59+
style={{ zIndex: ZINDEX.dropdown }}
4760
>
4861
{children}
4962
</div>

‎src/components/select/Select.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
import * as React from "react";
22
import { cn } from "../../utils/cn";
3-
import { ZINDEX } from "../../utils/z-index";
43

54
export interface SelectProps
65
extends React.SelectHTMLAttributes<HTMLSelectElement> {}
76

87
export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
98
({ className, children, ...props }, ref) => {
109
return (
11-
<div
12-
className="absolute w-full rounded-md bg-gray-800 mt-1 shadow-lg"
13-
style={{ zIndex: ZINDEX.select }}
10+
<select
11+
ref={ref}
12+
className={cn(
13+
"flex h-9 w-full rounded-md px-3 py-1 text-sm shadow-sm transition-colors",
14+
// Light mode styles
15+
"bg-white border-gray-200 text-gray-900",
16+
// Dark mode styles
17+
"dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100",
18+
// Focus styles
19+
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500",
20+
// Disabled styles
21+
"disabled:cursor-not-allowed disabled:opacity-50",
22+
className
23+
)}
24+
{...props}
1425
>
15-
<select
16-
ref={ref}
17-
className={cn(
18-
"flex h-9 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
19-
className
20-
)}
21-
{...props}
22-
>
23-
{children}
24-
</select>
25-
</div>
26+
{children}
27+
</select>
2628
);
2729
}
2830
);

0 commit comments

Comments
 (0)