@modlin/ui 0.0.2 → 0.0.22
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/components/button.tsx +6 -16
- package/components/global.ts +11 -9
- package/components/globals.css +72 -0
- package/components/select.tsx +7 -7
- package/components/typography.tsx +3 -3
- package/package.json +6 -5
package/components/button.tsx
CHANGED
|
@@ -30,19 +30,19 @@ const sizeMap = {
|
|
|
30
30
|
),
|
|
31
31
|
icon: cn("p-2 rounded-full text-sm font-medium"),
|
|
32
32
|
iconr: cn("p-2 rounded-2xl text-sm font-medium"),
|
|
33
|
-
none: cn(),
|
|
33
|
+
none: cn("overflow-visible"),
|
|
34
34
|
}
|
|
35
35
|
const variant: Variants = {
|
|
36
36
|
primary:
|
|
37
|
-
"bg-
|
|
38
|
-
secondary: "bg-
|
|
37
|
+
"bg-primary disabled:bg-priority hover:bg-primary/85 text-background",
|
|
38
|
+
secondary: "bg-secondary hover:bg-secondary/75",
|
|
39
39
|
destructive: "bg-(--red) hover:bg-(--red)/85 text-white",
|
|
40
40
|
outline: cn(
|
|
41
|
-
"bg-
|
|
42
|
-
"hover:bg-
|
|
41
|
+
"bg-background inset-ring inset-ring-outline",
|
|
42
|
+
"hover:bg-secondary active:bg-secondary focus-visible:inset-ring-description disabled:bg-background disabled:text-description",
|
|
43
43
|
),
|
|
44
44
|
ghost: "hover:bg-black/5 dark:hover:bg-white/10",
|
|
45
|
-
link: "text-
|
|
45
|
+
link: "text-primary hover:underline",
|
|
46
46
|
none: cn(),
|
|
47
47
|
// jnsa: "bg-(--purple) hover:bg-(--purple)/90 text-white",
|
|
48
48
|
// outline_red: "inset-ring inset-ring-(--red)/50 hover:bg-(--red)/5 text-(--red)",
|
|
@@ -53,16 +53,6 @@ const shapes = {
|
|
|
53
53
|
rounded: "",
|
|
54
54
|
pill: "rounded-full",
|
|
55
55
|
}
|
|
56
|
-
const acyrlic = {
|
|
57
|
-
primary: "",
|
|
58
|
-
secondary: "",
|
|
59
|
-
destructive: "",
|
|
60
|
-
outline:
|
|
61
|
-
"inset-ring inset-ring-gray-300 dark:inset-ring-white/25 backdrop-blur-xl hover:bg-black/5 dark:hover:bg-white/10 dark:text-white",
|
|
62
|
-
ghost: "",
|
|
63
|
-
link: "",
|
|
64
|
-
shadcn: "",
|
|
65
|
-
}
|
|
66
56
|
export interface ButtonProps {
|
|
67
57
|
variant?: Variant
|
|
68
58
|
size?: keyof typeof sizeMap
|
package/components/global.ts
CHANGED
|
@@ -12,20 +12,22 @@ export type Variants = Record<Variant, string>
|
|
|
12
12
|
|
|
13
13
|
export const input_variant: Variants = {
|
|
14
14
|
primary: cn(
|
|
15
|
-
"bg-
|
|
16
|
-
"placeholder:text-
|
|
15
|
+
"bg-background",
|
|
16
|
+
"placeholder:text-description disabled:text-disabled",
|
|
17
17
|
// "inset-ring inset-ring-(--disabled) disabled:inset-ring-(--outline) focus:inset-ring-(--description)",
|
|
18
|
-
"border border-
|
|
19
|
-
"focus:ring-4 focus:ring-
|
|
20
|
-
"invalid:inset-ring-
|
|
18
|
+
"border border-disabled disabled:border-outline focus:border-description",
|
|
19
|
+
"focus:ring-4 focus:ring-foreground/5",
|
|
20
|
+
"invalid:inset-ring-red",
|
|
21
|
+
"data-[invalid=true]:border data-[invalid=true]:border-red/50 data-[invalid=true]:focus:border-red",
|
|
22
|
+
"data-[invalid=true]:focus:ring-4 data-[invalid=true]:focus:ring-red/5",
|
|
21
23
|
),
|
|
22
24
|
secondary: cn(),
|
|
23
25
|
destructive: cn(
|
|
24
|
-
"bg-
|
|
25
|
-
"placeholder:text-
|
|
26
|
+
"bg-background",
|
|
27
|
+
"placeholder:text-description disabled:text-disabled",
|
|
26
28
|
// "inset-ring inset-ring-(--red)/50 disabled:inset-ring-(--red)/25 focus:inset-ring-(--red)",
|
|
27
|
-
"border border-
|
|
28
|
-
"focus:ring-4 focus:ring-
|
|
29
|
+
"border border-red/50 disabled:border-red/25 focus:border-red",
|
|
30
|
+
"focus:ring-4 focus:ring-red/5",
|
|
29
31
|
),
|
|
30
32
|
outline: cn(),
|
|
31
33
|
ghost: cn(),
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--background: hsl(0 0% 100%);
|
|
5
|
+
/* 100% white */
|
|
6
|
+
--foreground: hsl(0 0% 0%);
|
|
7
|
+
/* 100% black */
|
|
8
|
+
--muted: hsl(0 0% 75%);
|
|
9
|
+
--muted-foreground: hsl(0 0% 50%);
|
|
10
|
+
--outline: oklch(90% 0 0);
|
|
11
|
+
/* 15% black */
|
|
12
|
+
--priority: rgb(64, 64, 64);
|
|
13
|
+
/* 75% black */
|
|
14
|
+
--description: #7f7f7f;
|
|
15
|
+
/* 50% black */
|
|
16
|
+
--disabled: #bfbfbf;
|
|
17
|
+
/* 25% black */
|
|
18
|
+
--light: rgb(236, 236, 242);
|
|
19
|
+
/* 5% black */
|
|
20
|
+
--shadow: rgba(0, 0, 0, 0.1);
|
|
21
|
+
--primary: hsl(0 0% 0%);
|
|
22
|
+
--secondary: hsl(0 0% 95%);
|
|
23
|
+
--red: #f11c42;
|
|
24
|
+
--green: #00bc7a;
|
|
25
|
+
--blue: #4c52f4;
|
|
26
|
+
--purple: #7962f0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (prefers-color-scheme: dark) {
|
|
30
|
+
:root {
|
|
31
|
+
--background: #000000;
|
|
32
|
+
/* 100% black */
|
|
33
|
+
--foreground: #ffffff;
|
|
34
|
+
/* 100% white */
|
|
35
|
+
--muted: oklch(25% 0 0);
|
|
36
|
+
--muted-foreground: oklch(70% 0 0);
|
|
37
|
+
|
|
38
|
+
--outline: oklch(30% 0 0);
|
|
39
|
+
/* 25% white */
|
|
40
|
+
--priority: rgb(191, 191, 191);
|
|
41
|
+
/* 75% white */
|
|
42
|
+
--description: rgba(255, 255, 255, 0.5);
|
|
43
|
+
--disabled: rgba(255, 255, 255, 0.25);
|
|
44
|
+
--light: rgb(25, 25, 25);
|
|
45
|
+
/* 5% black */
|
|
46
|
+
--shadow: rgba(255, 255, 255, 0.25);
|
|
47
|
+
--primary: #ffffff;
|
|
48
|
+
--secondary: #1a1a1a;
|
|
49
|
+
--red: #f11c42;
|
|
50
|
+
--green: #33c995;
|
|
51
|
+
--blue: #7075f6;
|
|
52
|
+
--purple: #8366f4;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
body {
|
|
57
|
+
background: var(--background);
|
|
58
|
+
color: var(--foreground);
|
|
59
|
+
font-size: 16px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
button:focus {
|
|
63
|
+
outline: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
input:focus {
|
|
67
|
+
outline: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
textarea:focus {
|
|
71
|
+
outline: none;
|
|
72
|
+
}
|
package/components/select.tsx
CHANGED
|
@@ -33,15 +33,15 @@ export function Dropdown() {
|
|
|
33
33
|
)
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
export interface
|
|
36
|
+
export interface SelectItemProps {
|
|
37
37
|
value: string
|
|
38
38
|
children: ReactNode
|
|
39
39
|
className?: string
|
|
40
40
|
onClick?: () => void
|
|
41
41
|
}
|
|
42
|
-
export function
|
|
43
|
-
props: Readonly<
|
|
44
|
-
): ReactElement<
|
|
42
|
+
export function SelectItem(
|
|
43
|
+
props: Readonly<SelectItemProps>,
|
|
44
|
+
): ReactElement<SelectItemProps> {
|
|
45
45
|
return (
|
|
46
46
|
<button
|
|
47
47
|
type="button"
|
|
@@ -49,8 +49,8 @@ export function SelectOption(
|
|
|
49
49
|
value={props.value}
|
|
50
50
|
onClick={props.onClick}
|
|
51
51
|
className={cn(
|
|
52
|
-
"flex items-center h-12 px-4 gap-4",
|
|
53
|
-
"select-none hover:bg-
|
|
52
|
+
"flex items-center min-h-12 px-4 gap-4",
|
|
53
|
+
"select-none hover:bg-secondary",
|
|
54
54
|
// "[&>svg]:size-4 [&>svg]:scale-125",
|
|
55
55
|
props.className
|
|
56
56
|
)}
|
|
@@ -66,7 +66,7 @@ export interface SelectProps {
|
|
|
66
66
|
value?: string
|
|
67
67
|
name?: string
|
|
68
68
|
id?: string
|
|
69
|
-
children: ReactElement<
|
|
69
|
+
children: ReactElement<SelectItemProps>[]
|
|
70
70
|
}
|
|
71
71
|
export function Select(props: SelectProps) {
|
|
72
72
|
const [expanded, setExpanded] = useState(false)
|
|
@@ -12,7 +12,7 @@ export const InlineCode = forwardRef<HTMLElement, TypographyProps>(
|
|
|
12
12
|
<code
|
|
13
13
|
ref={ref}
|
|
14
14
|
className={cn(
|
|
15
|
-
"bg-
|
|
15
|
+
"bg-muted relative rounded px-[2px] leading-12 font-mono text-sm font-medium",
|
|
16
16
|
props.className,
|
|
17
17
|
)}
|
|
18
18
|
>
|
|
@@ -27,7 +27,7 @@ export const Lead = forwardRef<HTMLParagraphElement, TypographyProps>(
|
|
|
27
27
|
return (
|
|
28
28
|
<p
|
|
29
29
|
ref={ref}
|
|
30
|
-
className={cn("text-
|
|
30
|
+
className={cn("text-muted-foreground text-xl", props.className)}
|
|
31
31
|
>
|
|
32
32
|
{props.children}
|
|
33
33
|
</p>
|
|
@@ -61,7 +61,7 @@ export const Muted = forwardRef<HTMLParagraphElement, TypographyProps>(
|
|
|
61
61
|
return (
|
|
62
62
|
<p
|
|
63
63
|
ref={ref}
|
|
64
|
-
className={cn("text-
|
|
64
|
+
className={cn("text-muted-foreground text-sm", props.className)}
|
|
65
65
|
>
|
|
66
66
|
{props.children}
|
|
67
67
|
</p>
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@modlin/ui",
|
|
3
3
|
"description": "A lightweight UI library built on the Suffix design system for consistent, fast, and elegant interfaces.",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.22",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"exports": {
|
|
8
|
-
"./*": "./components/*.tsx"
|
|
8
|
+
"./*": "./components/*.tsx",
|
|
9
|
+
"./globals.css": "./components/globals.css"
|
|
9
10
|
},
|
|
10
11
|
"scripts": {
|
|
11
12
|
"dev": "next dev --turbopack",
|
|
@@ -20,9 +21,9 @@
|
|
|
20
21
|
"tailwind-merge": "^3.3.1"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
23
|
-
"next": "
|
|
24
|
-
"react": "
|
|
25
|
-
"react-dom": "
|
|
24
|
+
"next": "latest",
|
|
25
|
+
"react": "latest",
|
|
26
|
+
"react-dom": "latest"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
29
|
"@types/bun": "^1.2.22",
|