@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/dist/components/alert-dialog.mjs

@@ -1,14 +1,13 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
+import { Button } from "./button.mjs";
+import { AlertDialog as AlertDialog$1 } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 //#region src/components/alert-dialog.tsx
 /**
 * @since 0.3.16-canary.0
 */
 function AlertDialog({ ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
 		"data-slot": "alert-dialog",
 		...props
 	});
@@ -17,7 +16,7 @@ function AlertDialog({ ...props }) {
 * @since 0.3.16-canary.0
 */
 function AlertDialogTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
 		"data-slot": "alert-dialog-trigger",
 		...props
 	});
@@ -25,27 +24,26 @@ function AlertDialogTrigger({ ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function AlertDialogContent({ children, className, classNames, ...props }) {
-	return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
-		className: cn("fixed inset-0 z-50", "bg-black/50", "ease-ui data-open:animate-in data-open:fade-in-0", "data-closed:animate-out data-closed:fade-out-0", classNames?.overlay),
-		"data-slot": "alert-dialog-overlay"
-	}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
-		className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center overflow-auto p-8", "sm:grid-rows-[1fr_auto_3fr] sm:p-4", "ease-ui 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", classNames?.wrapper),
-		"data-slot": "alert-dialog-content-wrapper",
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn("relative row-start-2 flex w-full max-w-lg flex-col", "rounded-2xl border", "bg-popover text-popover-foreground shadow-lg", classNames?.content, className),
+function AlertDialogContent({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, {
+		"data-slot": "alert-dialog-portal",
+		children: [/* @__PURE__ */ jsx(AlertDialog$1.Overlay, {
+			className: "fixed inset-0 z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0",
+			"data-slot": "alert-dialog-overlay"
+		}), /* @__PURE__ */ jsx(AlertDialog$1.Content, {
+			className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			"data-size": size,
 			"data-slot": "alert-dialog-content",
-			children
-		})
-	})] });
+			...props
+		})]
+	});
 }
 /**
 * @since 0.3.16-canary.0
 */
 function AlertDialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center", "sm:text-left", className),
+		className: cn("grid shrink-0 grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
 		"data-slot": "alert-dialog-header",
 		...props
 	});
@@ -53,9 +51,19 @@ function AlertDialogHeader({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
+function AlertDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className),
+		"data-slot": "alert-dialog-media",
+		...props
+	});
+}
+/**
+* @since 0.3.16-canary.0
+*/
 function AlertDialogBody({ className, ...props }) {
-	return /* @__PURE__ */ jsx("main", {
-		className: cn("overflow-auto", "px-6 py-2", className),
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("-mx-6 min-h-0 flex-1 overflow-y-auto px-6", className),
 		"data-slot": "alert-dialog-body",
 		...props
 	});
@@ -65,7 +73,7 @@ function AlertDialogBody({ className, ...props }) {
 */
 function AlertDialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6", "sm:flex-row sm:justify-end", className),
+		className: cn("flex shrink-0 flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
 		"data-slot": "alert-dialog-footer",
 		...props
 	});
@@ -74,8 +82,8 @@ function AlertDialogFooter({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function AlertDialogTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
-		className: cn("text-lg leading-none font-semibold tracking-tight", className),
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		className: cn("font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
 		"data-slot": "alert-dialog-title",
 		...props
 	});
@@ -84,8 +92,8 @@ function AlertDialogTitle({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function AlertDialogDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
-		className: cn("text-sm text-muted-foreground", className),
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
 		"data-slot": "alert-dialog-description",
 		...props
 	});
@@ -93,30 +101,30 @@ function AlertDialogDescription({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function AlertDialogAction({ className, size, variant, ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
-		className: buttonVariants({
-			className,
-			size,
-			variant
-		}),
-		"data-slot": "alert-dialog-action",
-		...props
+function AlertDialogAction({ size = "default", variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		size,
+		variant,
+		children: /* @__PURE__ */ jsx(AlertDialog$1.Action, {
+			"data-slot": "alert-dialog-action",
+			...props
+		})
 	});
 }
 /**
 * @since 0.3.16-canary.0
 */
-function AlertDialogCancel({ className, size, variant = "outline", ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
-		className: buttonVariants({
-			className,
-			size,
-			variant
-		}),
-		"data-slot": "alert-dialog-cancel",
-		...props
+function AlertDialogCancel({ size = "default", variant = "outline", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		size,
+		variant,
+		children: /* @__PURE__ */ jsx(AlertDialog$1.Cancel, {
+			"data-slot": "alert-dialog-cancel",
+			...props
+		})
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/alert.d.mts

@@ -1,21 +1,11 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { AlertVariants } from "../variants/alert.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/alert.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const alertVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  variant: {
-    default: string;
-    destructive: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-interface AlertProps extends ComponentProps<"div">, VariantProps<typeof alertVariants> {}
+interface AlertProps extends ComponentProps<"div">, AlertVariants {}
 /**
  * @since 0.3.16-canary.0
  */
@@ -32,7 +22,6 @@ type AlertTitleProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 declare function AlertTitle({
-  children,
   className,
   ...props
 }: AlertTitleProps): JSX.Element;
@@ -47,5 +36,16 @@ declare function AlertDescription({
   className,
   ...props
 }: AlertDescriptionProps): JSX.Element;
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertActionProps = ComponentProps<"div">;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare function AlertAction({
+  className,
+  ...props
+}: AlertActionProps): JSX.Element;
 //#endregion
-export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, alertVariants };
+export { Alert, AlertAction, type AlertActionProps, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps };

package/dist/components/alert.mjs

@@ -1,30 +1,10 @@
-import { cn, tv } from "../lib/utils.mjs";
+import { cn } from "../lib/utils.mjs";
+import { alertVariants } from "../variants/alert.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/alert.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const alertVariants = tv({
-	base: [
-		"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 px-4 py-3",
-		"rounded-xl border",
-		"bg-card text-sm",
-		"has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3",
-		"[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
-	],
-	defaultVariants: { variant: "default" },
-	variants: { variant: {
-		default: "text-card-foreground",
-		destructive: [
-			"text-destructive",
-			"*:data-[slot=alert-description]:text-destructive/90",
-			"[&>svg]:text-current"
-		]
-	} }
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function Alert({ className, variant, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: alertVariants({
@@ -39,12 +19,11 @@ function Alert({ className, variant, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function AlertTitle({ children, className, ...props }) {
+function AlertTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("col-start-2 min-h-4", "line-clamp-1 font-medium tracking-tight", className),
+		className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className),
 		"data-slot": "alert-title",
-		...props,
-		children
+		...props
 	});
 }
 /**
@@ -52,10 +31,20 @@ function AlertTitle({ children, className, ...props }) {
 */
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground", "[&_p]:leading-relaxed", className),
+		className: cn("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", className),
 		"data-slot": "alert-description",
 		...props
 	});
 }
+/**
+* @since 0.3.16-canary.0
+*/
+function AlertAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute top-2.5 right-3", className),
+		"data-slot": "alert-action",
+		...props
+	});
+}
 //#endregion
-export { Alert, AlertDescription, AlertTitle, alertVariants };
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/components/aspect-ratio.d.mts

@@ -1,11 +1,11 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+import { AspectRatio as AspectRatio$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/aspect-ratio.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type AspectRatioProps = ComponentProps<typeof AspectRatioPrimitive.Root>;
+type AspectRatioProps = ComponentProps<typeof AspectRatio$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */

package/dist/components/aspect-ratio.mjs

@@ -1,12 +1,11 @@
-"use client";
+import { AspectRatio as AspectRatio$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 //#region src/components/aspect-ratio.tsx
 /**
 * @since 0.3.16-canary.0
 */
 function AspectRatio({ ...props }) {
-	return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, {
+	return /* @__PURE__ */ jsx(AspectRatio$1.Root, {
 		"data-slot": "aspect-ratio",
 		...props
 	});

package/dist/components/avatar.d.mts

@@ -1,22 +1,25 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { Avatar as Avatar$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/avatar.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root>;
+type AvatarProps = ComponentProps<typeof Avatar$1.Root> & {
+  size?: "default" | "sm" | "lg";
+};
 /**
  * @since 0.3.16-canary.0
  */
 declare function Avatar({
   className,
+  size,
   ...props
 }: AvatarProps): JSX.Element;
 /**
  * @since 0.3.16-canary.0
  */
-type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;
+type AvatarImageProps = ComponentProps<typeof Avatar$1.Image>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -27,7 +30,7 @@ declare function AvatarImage({
 /**
  * @since 0.3.16-canary.0
  */
-type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.Fallback>;
+type AvatarFallbackProps = ComponentProps<typeof Avatar$1.Fallback>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -35,5 +38,38 @@ declare function AvatarFallback({
   className,
   ...props
 }: AvatarFallbackProps): JSX.Element;
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarBadgeProps = ComponentProps<"span">;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare function AvatarBadge({
+  className,
+  ...props
+}: AvatarBadgeProps): JSX.Element;
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarGroupProps = ComponentProps<"div">;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare function AvatarGroup({
+  className,
+  ...props
+}: AvatarGroupProps): JSX.Element;
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarGroupCountProps = ComponentProps<"div">;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare function AvatarGroupCount({
+  className,
+  ...props
+}: AvatarGroupCountProps): JSX.Element;
 //#endregion
-export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };
+export { Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps };

package/dist/components/avatar.mjs

@@ -1,14 +1,14 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { Avatar as Avatar$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
 //#region src/components/avatar.tsx
 /**
 * @since 0.3.16-canary.0
 */
-function Avatar({ className, ...props }) {
-	return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
-		className: cn("relative flex size-8 shrink-0 overflow-hidden", "rounded-full", className),
+function Avatar({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		className: cn("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", className),
+		"data-size": size,
 		"data-slot": "avatar",
 		...props
 	});
@@ -17,8 +17,8 @@ function Avatar({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function AvatarImage({ className, ...props }) {
-	return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
-		className: cn("aspect-square size-full", className),
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		className: cn("aspect-square size-full rounded-full object-cover", className),
 		"data-slot": "avatar-image",
 		...props
 	});
@@ -27,11 +27,41 @@ function AvatarImage({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function AvatarFallback({ className, ...props }) {
-	return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
-		className: cn("flex size-full items-center justify-center", "rounded-full", "bg-muted", className),
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
 		"data-slot": "avatar-fallback",
 		...props
 	});
 }
+/**
+* @since 0.3.16-canary.0
+*/
+function AvatarBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("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", className),
+		"data-slot": "avatar-badge",
+		...props
+	});
+}
+/**
+* @since 0.3.16-canary.0
+*/
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
+		"data-slot": "avatar-group",
+		...props
+	});
+}
+/**
+* @since 0.3.16-canary.0
+*/
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("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", className),
+		"data-slot": "avatar-group-count",
+		...props
+	});
+}
 //#endregion
-export { Avatar, AvatarFallback, AvatarImage };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/components/badge.d.mts

@@ -1,23 +1,11 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { BadgeVariants } from "../variants/badge.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/badge.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const badgeVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  variant: {
-    default: string[];
-    destructive: string[];
-    outline: string[];
-    secondary: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends ComponentProps<"span">, BadgeVariants {
   asChild?: boolean;
 }
 /**
@@ -30,4 +18,4 @@ declare function Badge({
   ...props
 }: BadgeProps): JSX.Element;
 //#endregion
-export { Badge, type BadgeProps, badgeVariants };
+export { Badge, type BadgeProps };

package/dist/components/badge.mjs

@@ -1,62 +1,20 @@
-"use client";
-import { tv } from "../lib/utils.mjs";
-import { Slot } from "@radix-ui/react-slot";
+import { badgeVariants } from "../variants/badge.mjs";
+import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/badge.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const badgeVariants = tv({
-	base: [
-		"inline-flex w-fit shrink-0 items-center justify-center gap-2 px-1.5 py-0.5",
-		"rounded-md border outline-hidden",
-		"text-xs font-medium whitespace-nowrap",
-		"transition",
-		"focus-visible:ring-3 focus-visible:ring-ring/50",
-		"[&>svg]:size-3 [&>svg]:shrink-0"
-	],
-	defaultVariants: { variant: "default" },
-	variants: { variant: {
-		default: [
-			"border-transparent",
-			"bg-primary text-primary-foreground",
-			"focus-visible:ring-primary/20",
-			"dark:focus-visible:ring-primary/40",
-			"[a&]:hover:bg-primary/80"
-		],
-		destructive: [
-			"border-transparent",
-			"bg-destructive text-white",
-			"focus-visible:ring-destructive/20",
-			"dark:bg-destructive/60",
-			"dark:focus-visible:ring-destructive/40",
-			"[a&]:hover:bg-destructive/90"
-		],
-		outline: [
-			"border-input",
-			"bg-background",
-			"focus-visible:border-ring",
-			"[a&]:hover:border-ring/60 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-		],
-		secondary: [
-			"border-transparent",
-			"bg-secondary text-secondary-foreground",
-			"[a&]:hover:bg-secondary/80"
-		]
-	} }
-});
-/**
-* @since 0.3.16-canary.0
-*/
-function Badge({ asChild, className, variant, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+function Badge({ asChild = false, className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "span", {
 		className: badgeVariants({
 			className,
 			variant
 		}),
 		"data-slot": "badge",
+		"data-variant": variant,
 		...props
 	});
 }
 //#endregion
-export { Badge, badgeVariants };
+export { Badge };

package/dist/components/breadcrumb.d.mts

@@ -69,6 +69,7 @@ type BreadcrumbSeparatorProps = ComponentProps<"li">;
  */
 declare function BreadcrumbSeparator({
   children,
+  className,
   ...props
 }: BreadcrumbSeparatorProps): JSX.Element;
 /**

package/dist/components/breadcrumb.mjs

@@ -1,7 +1,6 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRightIcon, EllipsisIcon } from "lucide-react";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { Slot } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/breadcrumb.tsx
 /**
@@ -19,7 +18,7 @@ function Breadcrumb({ ...props }) {
 */
 function BreadcrumbList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {
-		className: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground", "sm:gap-2", className),
+		className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5", className),
 		"data-slot": "breadcrumb-list",
 		...props
 	});
@@ -38,8 +37,8 @@ function BreadcrumbItem({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function BreadcrumbLink({ asChild, className, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
-		className: cn("transition-colors", "hover:text-foreground", className),
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "a", {
+		className: cn("transition-colors hover:text-foreground", className),
 		"data-slot": "breadcrumb-link",
 		...props
 	});
@@ -53,19 +52,21 @@ function BreadcrumbPage({ className, ...props }) {
 		"aria-disabled": "true",
 		className: cn("font-normal text-foreground", className),
 		"data-slot": "breadcrumb-page",
+		role: "link",
 		...props
 	});
 }
 /**
 * @since 0.3.16-canary.0
 */
-function BreadcrumbSeparator({ children, ...props }) {
+function BreadcrumbSeparator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx("li", {
 		"aria-hidden": "true",
+		className: cn("[&>svg]:size-3.5", className),
 		"data-slot": "breadcrumb-separator",
 		role: "presentation",
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:rotate-180" })
 	});
 }
 /**
@@ -74,11 +75,11 @@ function BreadcrumbSeparator({ children, ...props }) {
 function BreadcrumbEllipsis({ className, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
 		"aria-hidden": "true",
-		className: cn("flex size-4 items-center justify-center", className),
+		className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className),
 		"data-slot": "breadcrumb-ellipsis",
 		role: "presentation",
 		...props,
-		children: [/* @__PURE__ */ jsx(EllipsisIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "More"
 		})]