@inspirare/design-system 0.0.22 → 0.0.24

package/dist/components/ui/alert.js

@@ -1,32 +1,44 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { cva as r } from "class-variance-authority";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { cva as n } from "class-variance-authority";
 //#region src/components/ui/alert.tsx
-var i = r("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", {
+var r = n("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
 	variants: { variant: {
-		default: "bg-background text-foreground",
-		destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+		default: "bg-card text-card-foreground",
+		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
 	} },
 	defaultVariants: { variant: "default" }
-}), a = t.forwardRef(({ className: t, variant: r, ...a }, o) => /* @__PURE__ */ n("div", {
-	ref: o,
-	role: "alert",
-	className: e(i({ variant: r }), t),
-	...a
-}));
-a.displayName = "Alert";
-var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("h5", {
-	ref: i,
-	className: e("mb-1 font-medium leading-none tracking-tight", t),
-	...r
-}));
-o.displayName = "AlertTitle";
-var s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
-	ref: i,
-	className: e("text-sm [&_p]:leading-relaxed", t),
-	...r
-}));
-s.displayName = "AlertDescription";
+});
+function i({ className: n, variant: i, ...a }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: e(r({ variant: i }), n),
+		...a
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "alert-title",
+		className: e("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", n),
+		...r
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "alert-description",
+		className: e("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", n),
+		...r
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "alert-action",
+		className: e("absolute top-2 right-2", n),
+		...r
+	});
+}
 //#endregion
-export { a as Alert, s as AlertDescription, o as AlertTitle };
+export { i as Alert, s as AlertAction, o as AlertDescription, a as AlertTitle };

package/dist/components/ui/aspect-ratio.js

@@ -1,6 +1,14 @@
 "use client";
-import * as e from "@radix-ui/react-aspect-ratio";
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/components/ui/aspect-ratio.tsx
-var t = e.Root;
+function n({ ratio: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "aspect-ratio",
+		style: { "--ratio": n },
+		className: e("relative aspect-(--ratio)", r),
+		...i
+	});
+}
 //#endregion
-export { t as AspectRatio };
+export { n as AspectRatio };

package/dist/components/ui/avatar.js

@@ -1,29 +1,51 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { jsx as t } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-avatar";
+import "react";
+import { Avatar as n } from "@base-ui/react/avatar";
 //#region src/components/ui/avatar.tsx
-function r({ className: r, ...i }) {
+function r({ className: r, size: i = "default", ...a }) {
 	return /* @__PURE__ */ t(n.Root, {
 		"data-slot": "avatar",
-		className: e("relative flex size-8 shrink-0 overflow-hidden rounded-full", r),
-		...i
+		"data-size": i,
+		className: e("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", r),
+		...a
 	});
 }
 function i({ className: r, ...i }) {
 	return /* @__PURE__ */ t(n.Image, {
 		"data-slot": "avatar-image",
-		className: e("aspect-square size-full", r),
+		className: e("aspect-square size-full rounded-full object-cover", r),
 		...i
 	});
 }
 function a({ className: r, ...i }) {
 	return /* @__PURE__ */ t(n.Fallback, {
 		"data-slot": "avatar-fallback",
-		className: e("bg-muted flex size-full items-center justify-center rounded-full", r),
+		className: e("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", r),
 		...i
 	});
 }
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "avatar-badge",
+		className: e("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", n),
+		...r
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "avatar-group",
+		className: e("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", n),
+		...r
+	});
+}
+function c({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "avatar-group-count",
+		className: e("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", n),
+		...r
+	});
+}
 //#endregion
-export { r as Avatar, a as AvatarFallback, i as AvatarImage };
+export { r as Avatar, o as AvatarBadge, a as AvatarFallback, s as AvatarGroup, c as AvatarGroupCount, i as AvatarImage };

package/dist/components/ui/badge.js

@@ -1,23 +1,29 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
-import { jsx as t } from "react/jsx-runtime";
-import { cva as n } from "class-variance-authority";
-import { Slot as r } from "@radix-ui/react-slot";
+import { cva as t } from "class-variance-authority";
+import { mergeProps as n } from "@base-ui/react/merge-props";
+import { useRender as r } from "@base-ui/react/use-render";
 //#region src/components/ui/badge.tsx
-var i = n("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+var i = t("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl 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!", {
 	variants: { variant: {
-		default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-		secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-		destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-		outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
 	} },
 	defaultVariants: { variant: "default" }
 });
-function a({ className: n, variant: a, asChild: o = !1, ...s }) {
-	return /* @__PURE__ */ t(o ? r : "span", {
-		"data-slot": "badge",
-		className: e(i({ variant: a }), n),
-		...s
+function a({ className: t, variant: a = "default", render: o, ...s }) {
+	return r({
+		defaultTagName: "span",
+		props: n({ className: e(i({ variant: a }), t) }, s),
+		render: o,
+		state: {
+			slot: "badge",
+			variant: a
+		}
 	});
 }
 //#endregion

package/dist/components/ui/breadcrumb.js

@@ -1,60 +1,73 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import * as t from "react";
-import { ChevronRight as n, MoreHorizontal as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Slot as o } from "@radix-ui/react-slot";
+import { ChevronRightIcon as t, MoreHorizontalIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import "react";
+import { mergeProps as a } from "@base-ui/react/merge-props";
+import { useRender as o } from "@base-ui/react/use-render";
 //#region src/components/ui/breadcrumb.tsx
-var s = t.forwardRef(({ ...e }, t) => /* @__PURE__ */ i("nav", {
-	ref: t,
-	"aria-label": "breadcrumb",
-	...e
-}));
-s.displayName = "Breadcrumb";
-var c = t.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("ol", {
-	ref: r,
-	className: e("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", t),
-	...n
-}));
-c.displayName = "BreadcrumbList";
-var l = t.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("li", {
-	ref: r,
-	className: e("inline-flex items-center gap-1.5", t),
-	...n
-}));
-l.displayName = "BreadcrumbItem";
-var u = t.forwardRef(({ asChild: t, className: n, ...r }, a) => /* @__PURE__ */ i(t ? o : "a", {
-	ref: a,
-	className: e("transition-colors hover:text-foreground", n),
-	...r
-}));
-u.displayName = "BreadcrumbLink";
-var d = t.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("span", {
-	ref: r,
-	role: "link",
-	"aria-disabled": "true",
-	"aria-current": "page",
-	className: e("font-normal text-foreground", t),
-	...n
-}));
-d.displayName = "BreadcrumbPage";
-var f = ({ children: t, className: r, ...a }) => /* @__PURE__ */ i("li", {
-	role: "presentation",
-	"aria-hidden": "true",
-	className: e("[&>svg]:w-3.5 [&>svg]:h-3.5", r),
-	...a,
-	children: t ?? /* @__PURE__ */ i(n, {})
-});
-f.displayName = "BreadcrumbSeparator";
-var p = ({ className: t, ...n }) => /* @__PURE__ */ a("span", {
-	role: "presentation",
-	"aria-hidden": "true",
-	className: e("flex h-9 w-9 items-center justify-center", t),
-	...n,
-	children: [/* @__PURE__ */ i(r, { className: "h-4 w-4" }), /* @__PURE__ */ i("span", {
-		className: "sr-only",
-		children: "More"
-	})]
-});
-p.displayName = "BreadcrumbElipssis";
+function s({ className: t, ...n }) {
+	return /* @__PURE__ */ r("nav", {
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		className: e(t),
+		...n
+	});
+}
+function c({ className: t, ...n }) {
+	return /* @__PURE__ */ r("ol", {
+		"data-slot": "breadcrumb-list",
+		className: e("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", t),
+		...n
+	});
+}
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ r("li", {
+		"data-slot": "breadcrumb-item",
+		className: e("inline-flex items-center gap-1", t),
+		...n
+	});
+}
+function u({ className: t, render: n, ...r }) {
+	return o({
+		defaultTagName: "a",
+		props: a({ className: e("transition-colors hover:text-foreground", t) }, r),
+		render: n,
+		state: { slot: "breadcrumb-link" }
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ r("span", {
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: e("font-normal text-foreground", t),
+		...n
+	});
+}
+function f({ children: n, className: i, ...a }) {
+	return /* @__PURE__ */ r("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: e("[&>svg]:size-3.5", i),
+		...a,
+		children: n ?? /* @__PURE__ */ r(t, {})
+	});
+}
+function p({ className: t, ...a }) {
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: e("flex size-5 items-center justify-center [&>svg]:size-4", t),
+		...a,
+		children: [/* @__PURE__ */ r(n, {}), /* @__PURE__ */ r("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
+}
 //#endregion
 export { s as Breadcrumb, p as BreadcrumbEllipsis, l as BreadcrumbItem, u as BreadcrumbLink, c as BreadcrumbList, d as BreadcrumbPage, f as BreadcrumbSeparator };

package/dist/components/ui/button-group.js

@@ -1,38 +1,42 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
 import { Separator as t } from "./separator.js";
 import { jsx as n } from "react/jsx-runtime";
 import { cva as r } from "class-variance-authority";
-import { Slot as i } from "@radix-ui/react-slot";
+import { mergeProps as i } from "@base-ui/react/merge-props";
+import { useRender as a } from "@base-ui/react/use-render";
 //#region src/components/ui/button-group.tsx
-var a = r("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+var o = r("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
 	variants: { orientation: {
-		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+		horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+		vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
 	} },
 	defaultVariants: { orientation: "horizontal" }
 });
-function o({ className: t, orientation: r, ...i }) {
+function s({ className: t, orientation: r, ...i }) {
 	return /* @__PURE__ */ n("div", {
 		role: "group",
 		"data-slot": "button-group",
 		"data-orientation": r,
-		className: e(a({ orientation: r }), t),
+		className: e(o({ orientation: r }), t),
 		...i
 	});
 }
-function s({ className: t, asChild: r = !1, ...a }) {
-	return /* @__PURE__ */ n(r ? i : "div", {
-		className: e("bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", t),
-		...a
+function c({ className: t, render: n, ...r }) {
+	return a({
+		defaultTagName: "div",
+		props: i({ className: e("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", t) }, r),
+		render: n,
+		state: { slot: "button-group-text" }
 	});
 }
-function c({ className: r, orientation: i = "vertical", ...a }) {
+function l({ className: r, orientation: i = "vertical", ...a }) {
 	return /* @__PURE__ */ n(t, {
 		"data-slot": "button-group-separator",
 		orientation: i,
-		className: e("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", r),
+		className: e("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", r),
 		...a
 	});
 }
 //#endregion
-export { o as ButtonGroup, c as ButtonGroupSeparator, s as ButtonGroupText, a as buttonGroupVariants };
+export { s as ButtonGroup, l as ButtonGroupSeparator, c as ButtonGroupText, o as buttonGroupVariants };

package/dist/components/ui/button.js

@@ -1,24 +1,28 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { jsx as t } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
-import { Slot as r } from "@radix-ui/react-slot";
+import { Button as r } from "@base-ui/react/button";
 //#region src/components/ui/button.tsx
-var i = n("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer 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-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+var i = n("group/button inline-flex shrink-0 items-center justify-center cursor-pointer rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-			destructive: "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",
-			outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-card dark:border-border dark:hover:bg-accent dark:hover:text-accent-foreground",
-			secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 dark:bg-secondary/20 dark:text-secondary-foreground dark:hover:bg-secondary/30",
-			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-9 px-4 py-2 has-[>svg]:px-3",
-			sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-			icon: "size-9"
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
 		}
 	},
 	defaultVariants: {
@@ -26,15 +30,15 @@ var i = n("inline-flex items-center justify-center gap-2 whitespace-nowrap round
 		size: "default"
 	}
 });
-function a({ className: n, variant: a, size: o, asChild: s = !1, ...c }) {
-	return /* @__PURE__ */ t(s ? r : "button", {
+function a({ className: n, variant: a = "default", size: o = "default", ...s }) {
+	return /* @__PURE__ */ t(r, {
 		"data-slot": "button",
 		className: e(i({
 			variant: a,
 			size: o,
 			className: n
 		})),
-		...c
+		...s
 	});
 }
 //#endregion

package/dist/components/ui/calendar.js

@@ -1,89 +1,93 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { Button as t, buttonVariants as n } from "./button.js";
-import * as r from "react";
-import { ChevronDownIcon as i, ChevronLeftIcon as a, ChevronRightIcon as o } from "lucide-react";
-import { jsx as s } from "react/jsx-runtime";
+import { ChevronDownIcon as r, ChevronLeftIcon as i, ChevronRightIcon as a } from "lucide-react";
+import { jsx as o } from "react/jsx-runtime";
+import * as s from "react";
 import { DayPicker as c, getDefaultClassNames as l } from "react-day-picker";
+import { ptBR as u } from "date-fns/locale";
 //#region src/components/ui/calendar.tsx
-function u({ className: t, classNames: r, showOutsideDays: u = !0, captionLayout: f = "label", buttonVariant: p = "ghost", formatters: m, components: h, ...g }) {
-	let _ = l();
-	return /* @__PURE__ */ s(c, {
-		showOutsideDays: u,
-		className: e("group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, t),
-		captionLayout: f,
+function d({ className: t, classNames: s, showOutsideDays: d = !0, captionLayout: p = "label", buttonVariant: m = "ghost", locale: h = u, formatters: g, components: _, ...v }) {
+	let y = l();
+	return /* @__PURE__ */ o(c, {
+		showOutsideDays: d,
+		className: e("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, t),
+		captionLayout: p,
+		locale: h,
 		formatters: {
-			formatMonthDropdown: (e) => e.toLocaleString("default", { month: "short" }),
-			...m
+			formatMonthDropdown: (e) => e.toLocaleString(h?.code, { month: "short" }),
+			...g
 		},
 		classNames: {
-			root: e("w-fit", _.root),
-			months: e("relative flex flex-col gap-4 md:flex-row", _.months),
-			month: e("flex w-full flex-col gap-4", _.month),
-			nav: e("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", _.nav),
-			button_previous: e(n({ variant: p }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", _.button_previous),
-			button_next: e(n({ variant: p }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", _.button_next),
-			month_caption: e("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", _.month_caption),
-			dropdowns: e("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", _.dropdowns),
-			dropdown_root: e("relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50", _.dropdown_root),
-			dropdown: e("absolute inset-0 bg-popover opacity-0", _.dropdown),
-			caption_label: e("font-medium select-none", f === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", _.caption_label),
-			table: "w-full border-collapse",
-			weekdays: e("flex", _.weekdays),
-			weekday: e("flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none", _.weekday),
-			week: e("mt-2 flex w-full", _.week),
-			week_number_header: e("w-(--cell-size) select-none", _.week_number_header),
-			week_number: e("text-[0.8rem] text-muted-foreground select-none", _.week_number),
-			day: e("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md", g.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", _.day),
-			range_start: e("rounded-l-md bg-accent", _.range_start),
-			range_middle: e("rounded-none", _.range_middle),
-			range_end: e("rounded-r-md bg-accent", _.range_end),
-			today: e("rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none", _.today),
-			outside: e("text-muted-foreground aria-selected:text-muted-foreground", _.outside),
-			disabled: e("text-muted-foreground opacity-50", _.disabled),
-			hidden: e("invisible", _.hidden),
-			...r
+			root: e("w-fit", y.root),
+			months: e("relative flex flex-col gap-4 md:flex-row", y.months),
+			month: e("flex w-full flex-col gap-4", y.month),
+			nav: e("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", y.nav),
+			button_previous: e(n({ variant: m }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", y.button_previous),
+			button_next: e(n({ variant: m }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", y.button_next),
+			month_caption: e("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", y.month_caption),
+			dropdowns: e("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", y.dropdowns),
+			dropdown_root: e("relative rounded-(--cell-radius)", y.dropdown_root),
+			dropdown: e("absolute inset-0 bg-popover opacity-0", y.dropdown),
+			caption_label: e("font-medium select-none", p === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", y.caption_label),
+			month_grid: e("w-full border-collapse", y.month_grid),
+			weekdays: e("flex", y.weekdays),
+			weekday: e("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", y.weekday),
+			week: e("mt-2 flex w-full", y.week),
+			week_number_header: e("w-(--cell-size) select-none", y.week_number_header),
+			week_number: e("text-[0.8rem] text-muted-foreground select-none", y.week_number),
+			day: e("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", v.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", y.day),
+			range_start: e("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", y.range_start),
+			range_middle: e("rounded-none", y.range_middle),
+			range_end: e("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", y.range_end),
+			today: e("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", y.today),
+			outside: e("text-muted-foreground aria-selected:text-muted-foreground", y.outside),
+			disabled: e("text-muted-foreground opacity-50", y.disabled),
+			hidden: e("invisible", y.hidden),
+			...s
 		},
 		components: {
-			Root: ({ className: t, rootRef: n, ...r }) => /* @__PURE__ */ s("div", {
+			Root: ({ className: t, rootRef: n, ...r }) => /* @__PURE__ */ o("div", {
 				"data-slot": "calendar",
 				ref: n,
 				className: e(t),
 				...r
 			}),
-			Chevron: ({ className: t, orientation: n, ...r }) => s(n === "left" ? a : n === "right" ? o : i, {
+			Chevron: ({ className: t, orientation: n, ...s }) => o(n === "left" ? i : n === "right" ? a : r, {
 				className: e("size-4", t),
-				...r
+				...s
+			}),
+			DayButton: ({ ...e }) => /* @__PURE__ */ o(f, {
+				locale: h,
+				...e
 			}),
-			DayButton: d,
-			WeekNumber: ({ children: e, ...t }) => /* @__PURE__ */ s("td", {
+			WeekNumber: ({ children: e, ...t }) => /* @__PURE__ */ o("td", {
 				...t,
-				children: /* @__PURE__ */ s("div", {
+				children: /* @__PURE__ */ o("div", {
 					className: "flex size-(--cell-size) items-center justify-center text-center",
 					children: e
 				})
 			}),
-			...h
+			..._
 		},
-		...g
+		...v
 	});
 }
-function d({ className: n, day: i, modifiers: a, ...o }) {
-	let c = l(), u = r.useRef(null);
-	return r.useEffect(() => {
-		a.focused && u.current?.focus();
-	}, [a.focused]), /* @__PURE__ */ s(t, {
-		ref: u,
+function f({ className: n, day: r, modifiers: i, locale: a, ...c }) {
+	let u = l(), d = s.useRef(null);
+	return s.useEffect(() => {
+		i.focused && d.current?.focus();
+	}, [i.focused]), /* @__PURE__ */ o(t, {
 		variant: "ghost",
 		size: "icon",
-		"data-day": i.date.toLocaleDateString(),
-		"data-selected-single": a.selected && !a.range_start && !a.range_end && !a.range_middle,
-		"data-range-start": a.range_start,
-		"data-range-end": a.range_end,
-		"data-range-middle": a.range_middle,
-		className: e("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", c.day, n),
-		...o
+		"data-day": r.date.toLocaleDateString(a?.code),
+		"data-selected-single": i.selected && !i.range_start && !i.range_end && !i.range_middle,
+		"data-range-start": i.range_start,
+		"data-range-end": i.range_end,
+		"data-range-middle": i.range_middle,
+		className: e("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", u.day, n),
+		...c
 	});
 }
 //#endregion
-export { u as Calendar, d as CalendarDayButton };
+export { d as Calendar, f as CalendarDayButton };