@carefully-built/ui 0.1.17 → 0.1.18
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/index.d.mts +72 -72
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +14 -14
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -56,12 +56,12 @@ const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer ite
|
|
|
56
56
|
},
|
|
57
57
|
size: {
|
|
58
58
|
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
59
|
-
xs: "h-6 gap-1 rounded-
|
|
60
|
-
sm: "h-7 gap-1 rounded-
|
|
59
|
+
xs: "h-6 gap-1 rounded-xl px-2 text-xs in-data-[slot=button-group]:rounded-xl has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
60
|
+
sm: "h-7 gap-1 rounded-xl px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-xl has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
61
61
|
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
62
62
|
icon: "size-8",
|
|
63
|
-
"icon-xs": "size-6 rounded-
|
|
64
|
-
"icon-sm": "size-7 rounded-
|
|
63
|
+
"icon-xs": "size-6 rounded-xl in-data-[slot=button-group]:rounded-xl [&_svg:not([class*='size-'])]:size-3",
|
|
64
|
+
"icon-sm": "size-7 rounded-xl in-data-[slot=button-group]:rounded-xl",
|
|
65
65
|
"icon-lg": "size-9"
|
|
66
66
|
}
|
|
67
67
|
},
|
|
@@ -139,14 +139,14 @@ function Card({ className, size = "default", ...props }) {
|
|
|
139
139
|
return /* @__PURE__ */ jsx("div", {
|
|
140
140
|
"data-slot": "card",
|
|
141
141
|
"data-size": size,
|
|
142
|
-
className: cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-
|
|
142
|
+
className: cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-3xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl group/card flex flex-col", className),
|
|
143
143
|
...props
|
|
144
144
|
});
|
|
145
145
|
}
|
|
146
146
|
function CardHeader({ className, ...props }) {
|
|
147
147
|
return /* @__PURE__ */ jsx("div", {
|
|
148
148
|
"data-slot": "card-header",
|
|
149
|
-
className: cn("gap-1 rounded-t-
|
|
149
|
+
className: cn("gap-1 rounded-t-3xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]", className),
|
|
150
150
|
...props
|
|
151
151
|
});
|
|
152
152
|
}
|
|
@@ -174,7 +174,7 @@ function CardContent({ className, ...props }) {
|
|
|
174
174
|
function CardFooter({ className, ...props }) {
|
|
175
175
|
return /* @__PURE__ */ jsx("div", {
|
|
176
176
|
"data-slot": "card-footer",
|
|
177
|
-
className: cn("bg-muted/50 rounded-b-
|
|
177
|
+
className: cn("bg-muted/50 rounded-b-3xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className),
|
|
178
178
|
...props
|
|
179
179
|
});
|
|
180
180
|
}
|
|
@@ -337,7 +337,7 @@ function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...pr
|
|
|
337
337
|
"data-slot": "dropdown-menu-content",
|
|
338
338
|
sideOffset,
|
|
339
339
|
align,
|
|
340
|
-
className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-
|
|
340
|
+
className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-xl p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", className),
|
|
341
341
|
...props
|
|
342
342
|
}) });
|
|
343
343
|
}
|
|
@@ -1104,7 +1104,7 @@ function Input({ className, type, ...props }) {
|
|
|
1104
1104
|
return /* @__PURE__ */ jsx("input", {
|
|
1105
1105
|
type,
|
|
1106
1106
|
"data-slot": "input",
|
|
1107
|
-
className: cn("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-
|
|
1107
|
+
className: cn("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-xl border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
1108
1108
|
...props
|
|
1109
1109
|
});
|
|
1110
1110
|
}
|
|
@@ -1430,7 +1430,7 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
|
|
|
1430
1430
|
...props
|
|
1431
1431
|
});
|
|
1432
1432
|
}
|
|
1433
|
-
const tabsListVariants = cva("gap-2 rounded-
|
|
1433
|
+
const tabsListVariants = cva("gap-2 rounded-xl p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", {
|
|
1434
1434
|
variants: { variant: {
|
|
1435
1435
|
default: "bg-muted",
|
|
1436
1436
|
line: "gap-2 bg-transparent"
|
|
@@ -1457,7 +1457,7 @@ function TabsScrollArea({ className, viewportClassName, ...props }) {
|
|
|
1457
1457
|
function TabsTrigger({ className, ...props }) {
|
|
1458
1458
|
return /* @__PURE__ */ jsx(Tabs$1.Trigger, {
|
|
1459
1459
|
"data-slot": "tabs-trigger",
|
|
1460
|
-
className: cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-
|
|
1460
|
+
className: cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground", "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", "group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none", "group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground", "group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
|
|
1461
1461
|
...props
|
|
1462
1462
|
});
|
|
1463
1463
|
}
|
|
@@ -1527,7 +1527,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
|
1527
1527
|
return /* @__PURE__ */ jsxs(Select$1.Trigger, {
|
|
1528
1528
|
"data-slot": "select-trigger",
|
|
1529
1529
|
"data-size": size,
|
|
1530
|
-
className: cn("border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-
|
|
1530
|
+
className: cn("border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-xl border bg-transparent py-1 pr-2 pl-2 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-xl *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
|
|
1531
1531
|
...props,
|
|
1532
1532
|
children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
|
|
1533
1533
|
asChild: true,
|
|
@@ -1539,7 +1539,7 @@ function SelectContent({ className, children, position = "item-aligned", align =
|
|
|
1539
1539
|
return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(Select$1.Content, {
|
|
1540
1540
|
"data-slot": "select-content",
|
|
1541
1541
|
"data-align-trigger": position === "item-aligned",
|
|
1542
|
-
className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-[250px] rounded-
|
|
1542
|
+
className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-[250px] rounded-xl shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
|
|
1543
1543
|
position,
|
|
1544
1544
|
align,
|
|
1545
1545
|
...props,
|
|
@@ -1674,7 +1674,7 @@ function TableCaption({ className, ...props }) {
|
|
|
1674
1674
|
function Textarea({ className, ...props }) {
|
|
1675
1675
|
return /* @__PURE__ */ jsx("textarea", {
|
|
1676
1676
|
"data-slot": "textarea",
|
|
1677
|
-
className: cn("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 min-h-24 rounded-
|
|
1677
|
+
className: cn("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 min-h-24 rounded-xl border bg-transparent px-3 py-2 text-base transition-colors placeholder:text-muted-foreground w-full min-w-0 resize-y outline-none focus-visible:ring-3 aria-invalid:ring-3 md:text-sm disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
1678
1678
|
...props
|
|
1679
1679
|
});
|
|
1680
1680
|
}
|