@inspirare/design-system 0.0.31 → 0.0.33
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/dist/components/ui/alert-dialog.js +2 -2
- package/dist/components/ui/badge.js +1 -1
- package/dist/components/ui/card.js +3 -3
- package/dist/components/ui/command.js +2 -2
- package/dist/components/ui/dialog.js +2 -2
- package/dist/components/ui/empty.js +1 -1
- package/dist/components/ui/sidebar.js +1 -1
- package/dist/index.css +1 -1
- package/package.json +1 -1
- package/src/components/ui/alert-dialog.tsx +2 -2
- package/src/components/ui/attachment.tsx +2 -2
- package/src/components/ui/badge.tsx +1 -1
- package/src/components/ui/bubble.tsx +1 -1
- package/src/components/ui/card.tsx +3 -3
- package/src/components/ui/command.tsx +2 -2
- package/src/components/ui/dialog.tsx +2 -2
- package/src/components/ui/empty.tsx +1 -1
- package/src/components/ui/sidebar.tsx +1 -1
- package/src/index.css +44 -44
package/package.json
CHANGED
|
@@ -56,7 +56,7 @@ function AlertDialogContent({
|
|
|
56
56
|
data-slot="alert-dialog-content"
|
|
57
57
|
data-size={size}
|
|
58
58
|
className={cn(
|
|
59
|
-
"pointer-events-auto relative z-50 my-auto grid w-full max-h-[85dvh] overflow-y-auto gap-4 rounded-
|
|
59
|
+
"pointer-events-auto relative z-50 my-auto grid w-full max-h-[85dvh] overflow-y-auto gap-4 rounded-lg bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
60
60
|
className
|
|
61
61
|
)}
|
|
62
62
|
{...props}
|
|
@@ -90,7 +90,7 @@ function AlertDialogFooter({
|
|
|
90
90
|
<div
|
|
91
91
|
data-slot="alert-dialog-footer"
|
|
92
92
|
className={cn(
|
|
93
|
-
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-
|
|
93
|
+
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
|
|
94
94
|
className
|
|
95
95
|
)}
|
|
96
96
|
{...props}
|
|
@@ -9,14 +9,14 @@ import { cn } from "@/lib/utils"
|
|
|
9
9
|
import { Button } from "@/components/ui/button"
|
|
10
10
|
|
|
11
11
|
const attachmentVariants = cva(
|
|
12
|
-
"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-
|
|
12
|
+
"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-lg border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
|
|
13
13
|
{
|
|
14
14
|
variants: {
|
|
15
15
|
size: {
|
|
16
16
|
default:
|
|
17
17
|
"gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
|
|
18
18
|
sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
|
|
19
|
-
xs: "gap-1.5 rounded-
|
|
19
|
+
xs: "gap-1.5 rounded-md text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
|
|
20
20
|
},
|
|
21
21
|
orientation: {
|
|
22
22
|
horizontal: "min-w-40 items-center",
|
|
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
|
|
|
7
7
|
import { cn } from "@/lib/utils"
|
|
8
8
|
|
|
9
9
|
const badgeVariants = cva(
|
|
10
|
-
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-
|
|
10
|
+
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
|
11
11
|
{
|
|
12
12
|
variants: {
|
|
13
13
|
variant: {
|
|
@@ -74,7 +74,7 @@ function BubbleContent({
|
|
|
74
74
|
props: mergeProps<"div">(
|
|
75
75
|
{
|
|
76
76
|
className: cn(
|
|
77
|
-
"w-fit max-w-full min-w-0 overflow-hidden rounded-
|
|
77
|
+
"w-fit max-w-full min-w-0 overflow-hidden rounded-lg border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
|
|
78
78
|
className
|
|
79
79
|
),
|
|
80
80
|
},
|
|
@@ -14,7 +14,7 @@ function Card({
|
|
|
14
14
|
data-slot="card"
|
|
15
15
|
data-size={size}
|
|
16
16
|
className={cn(
|
|
17
|
-
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-
|
|
17
|
+
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-lg bg-card py-(--card-spacing) text-sm text-card-foreground border border-border/50 shadow-sm [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
|
|
18
18
|
className
|
|
19
19
|
)}
|
|
20
20
|
{...props}
|
|
@@ -27,7 +27,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
27
27
|
<div
|
|
28
28
|
data-slot="card-header"
|
|
29
29
|
className={cn(
|
|
30
|
-
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-
|
|
30
|
+
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
|
31
31
|
className
|
|
32
32
|
)}
|
|
33
33
|
{...props}
|
|
@@ -86,7 +86,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
86
86
|
<div
|
|
87
87
|
data-slot="card-footer"
|
|
88
88
|
className={cn(
|
|
89
|
-
"flex items-center rounded-b-
|
|
89
|
+
"flex items-center rounded-b-lg border-t bg-muted/50 p-(--card-spacing)",
|
|
90
90
|
className
|
|
91
91
|
)}
|
|
92
92
|
{...props}
|
|
@@ -25,7 +25,7 @@ function Command({
|
|
|
25
25
|
<CommandPrimitive
|
|
26
26
|
data-slot="command"
|
|
27
27
|
className={cn(
|
|
28
|
-
"flex size-full flex-col overflow-hidden rounded-
|
|
28
|
+
"flex size-full flex-col overflow-hidden rounded-lg! bg-popover p-1 text-popover-foreground",
|
|
29
29
|
className
|
|
30
30
|
)}
|
|
31
31
|
{...props}
|
|
@@ -55,7 +55,7 @@ function CommandDialog({
|
|
|
55
55
|
</DialogHeader>
|
|
56
56
|
<DialogContent
|
|
57
57
|
className={cn(
|
|
58
|
-
"top-1/3 translate-y-0 overflow-hidden rounded-
|
|
58
|
+
"top-1/3 translate-y-0 overflow-hidden rounded-lg! p-0",
|
|
59
59
|
className
|
|
60
60
|
)}
|
|
61
61
|
showCloseButton={showCloseButton}
|
|
@@ -62,7 +62,7 @@ const DialogContent = React.forwardRef<
|
|
|
62
62
|
ref={ref}
|
|
63
63
|
data-slot="dialog-content"
|
|
64
64
|
className={cn(
|
|
65
|
-
"pointer-events-auto relative z-50 my-auto grid w-[90vw] max-w-lg max-h-[85dvh] overflow-y-auto gap-4 rounded-
|
|
65
|
+
"pointer-events-auto relative z-50 my-auto grid w-[90vw] max-w-lg max-h-[85dvh] overflow-y-auto gap-4 rounded-lg bg-popover/95 backdrop-blur-xl p-6 text-sm text-popover-foreground shadow-2xl ring-1 ring-border duration-200 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
66
66
|
className
|
|
67
67
|
)}
|
|
68
68
|
{...props}
|
|
@@ -74,7 +74,7 @@ const DialogContent = React.forwardRef<
|
|
|
74
74
|
render={
|
|
75
75
|
<Button
|
|
76
76
|
variant="ghost"
|
|
77
|
-
className="absolute top-4 right-4 rounded-
|
|
77
|
+
className="absolute top-4 right-4 rounded-md"
|
|
78
78
|
size="icon-sm"
|
|
79
79
|
/>
|
|
80
80
|
}
|
|
@@ -9,7 +9,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
9
9
|
<div
|
|
10
10
|
data-slot="empty"
|
|
11
11
|
className={cn(
|
|
12
|
-
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-
|
|
12
|
+
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-6 text-center text-balance",
|
|
13
13
|
className
|
|
14
14
|
)}
|
|
15
15
|
{...props}
|
|
@@ -313,7 +313,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
|
|
313
313
|
<main
|
|
314
314
|
data-slot="sidebar-inset"
|
|
315
315
|
className={cn(
|
|
316
|
-
"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-
|
|
316
|
+
"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
|
317
317
|
className
|
|
318
318
|
)}
|
|
319
319
|
{...props}
|
package/src/index.css
CHANGED
|
@@ -30,47 +30,47 @@ html {
|
|
|
30
30
|
--icon-sm: 1.5rem; /* 24px — padrão em botões e itens de lista */
|
|
31
31
|
--icon-md: 2rem; /* 32px — destaque em cards, headers de seção */
|
|
32
32
|
--icon-lg: 2.5rem;
|
|
33
|
-
--background: #
|
|
34
|
-
--foreground: #
|
|
35
|
-
--card: #
|
|
36
|
-
--card-foreground: #
|
|
37
|
-
--popover: #
|
|
38
|
-
--popover-foreground: #
|
|
39
|
-
--primary: #
|
|
40
|
-
--primary-foreground: #
|
|
33
|
+
--background: #F4EEE6;
|
|
34
|
+
--foreground: #221813;
|
|
35
|
+
--card: #FAF5EE;
|
|
36
|
+
--card-foreground: #221813;
|
|
37
|
+
--popover: #FAF5EE;
|
|
38
|
+
--popover-foreground: #221813;
|
|
39
|
+
--primary: #DC663E;
|
|
40
|
+
--primary-foreground: #FFFFFF;
|
|
41
41
|
--secondary: #E3AC8E;
|
|
42
|
-
--secondary-foreground: #
|
|
43
|
-
--muted: #
|
|
44
|
-
--muted-foreground: #
|
|
45
|
-
--accent: #
|
|
46
|
-
--accent-foreground: #
|
|
42
|
+
--secondary-foreground: #221813;
|
|
43
|
+
--muted: #E8DED2;
|
|
44
|
+
--muted-foreground: #6B5A4D;
|
|
45
|
+
--accent: #EDE3D7;
|
|
46
|
+
--accent-foreground: #221813;
|
|
47
47
|
--destructive: #DC663E;
|
|
48
48
|
--destructive-foreground: #FCEED7;
|
|
49
|
-
--border: #
|
|
50
|
-
--input: #
|
|
51
|
-
--ring: #
|
|
52
|
-
--radius:
|
|
49
|
+
--border: #DED2C3;
|
|
50
|
+
--input: #E8DED2;
|
|
51
|
+
--ring: #DC663E;
|
|
52
|
+
--radius: 0.5rem;
|
|
53
53
|
|
|
54
54
|
--chart-1: #dc663e;
|
|
55
55
|
--chart-2: #e3ac8e;
|
|
56
56
|
--chart-3: #fceed7;
|
|
57
|
-
--chart-4: #
|
|
58
|
-
--chart-5: #
|
|
59
|
-
--sidebar: #
|
|
60
|
-
--sidebar-foreground: #
|
|
57
|
+
--chart-4: #6b5a4d;
|
|
58
|
+
--chart-5: #E8DED2;
|
|
59
|
+
--sidebar: #EDE4D8;
|
|
60
|
+
--sidebar-foreground: #221813;
|
|
61
61
|
--sidebar-primary: #dc663e;
|
|
62
62
|
--sidebar-primary-foreground: #ffffff;
|
|
63
|
-
--sidebar-accent: #
|
|
64
|
-
--sidebar-accent-foreground: #
|
|
65
|
-
--sidebar-border: #
|
|
63
|
+
--sidebar-accent: #E4D8CB;
|
|
64
|
+
--sidebar-accent-foreground: #221813;
|
|
65
|
+
--sidebar-border: #DED2C3;
|
|
66
66
|
--sidebar-ring: #dc663e;
|
|
67
67
|
--font-sans: Josefin Sans, ui-sans-serif, sans-serif, system-ui;
|
|
68
68
|
--font-serif: Special Elite, ui-serif, serif;
|
|
69
69
|
--font-mono: Fira Code;
|
|
70
70
|
--radius: 0.5rem;
|
|
71
|
-
--radius-2xl: calc(var(--radius) * 1.
|
|
72
|
-
--radius-3xl: calc(var(--radius) *
|
|
73
|
-
--radius-4xl: calc(var(--radius) *
|
|
71
|
+
--radius-2xl: calc(var(--radius) * 1.25);
|
|
72
|
+
--radius-3xl: calc(var(--radius) * 1.5);
|
|
73
|
+
--radius-4xl: calc(var(--radius) * 1.75);
|
|
74
74
|
--font-heading: var(--font-sans);
|
|
75
75
|
/* 8px */
|
|
76
76
|
--shadow-2xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.01);
|
|
@@ -109,39 +109,39 @@ html {
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.dark {
|
|
112
|
-
--background: #
|
|
112
|
+
--background: #181411;
|
|
113
113
|
--foreground: #FCEED7;
|
|
114
|
-
--card: #
|
|
114
|
+
--card: #221B16;
|
|
115
115
|
--card-foreground: #FCEED7;
|
|
116
|
-
--popover: #
|
|
116
|
+
--popover: #201914;
|
|
117
117
|
--popover-foreground: #FCEED7;
|
|
118
118
|
--primary: #DC663E;
|
|
119
119
|
--primary-foreground: #FCEED7;
|
|
120
120
|
--secondary: #E3AC8E;
|
|
121
|
-
--secondary-foreground: #
|
|
122
|
-
--muted: #
|
|
123
|
-
--muted-foreground: #
|
|
124
|
-
--accent: #
|
|
121
|
+
--secondary-foreground: #181411;
|
|
122
|
+
--muted: #2D241D;
|
|
123
|
+
--muted-foreground: #BAA997;
|
|
124
|
+
--accent: #2D241D;
|
|
125
125
|
--accent-foreground: #FCEED7;
|
|
126
|
-
--destructive: #
|
|
127
|
-
--destructive-foreground: #
|
|
128
|
-
--border: #
|
|
129
|
-
--input: #
|
|
126
|
+
--destructive: #EF4444;
|
|
127
|
+
--destructive-foreground: #FCEED7;
|
|
128
|
+
--border: #3D3027;
|
|
129
|
+
--input: #2D241D;
|
|
130
130
|
--ring: #DC663E;
|
|
131
|
-
--radius: 0.
|
|
131
|
+
--radius: 0.5rem;
|
|
132
132
|
|
|
133
133
|
--chart-1: #dc663e;
|
|
134
134
|
--chart-2: #fceed7;
|
|
135
135
|
--chart-3: #e3ac8e;
|
|
136
|
-
--chart-4: #
|
|
137
|
-
--chart-5: #
|
|
138
|
-
--sidebar: #
|
|
136
|
+
--chart-4: #baa997;
|
|
137
|
+
--chart-5: #2d241d;
|
|
138
|
+
--sidebar: #1E1713;
|
|
139
139
|
--sidebar-foreground: #fceed7;
|
|
140
140
|
--sidebar-primary: #dc663e;
|
|
141
141
|
--sidebar-primary-foreground: #fceed7;
|
|
142
|
-
--sidebar-accent: #
|
|
142
|
+
--sidebar-accent: #2D241D;
|
|
143
143
|
--sidebar-accent-foreground: #fceed7;
|
|
144
|
-
--sidebar-border: #
|
|
144
|
+
--sidebar-border: #3D3027;
|
|
145
145
|
--sidebar-ring: #dc663e;
|
|
146
146
|
--radius: 0.5rem;
|
|
147
147
|
/* 8px */
|