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

package/src/components/accordion.tsx

@@ -0,0 +1,114 @@
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Accordion
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Accordion({ className, ...props }: AccordionProps): JSX.Element {
+  return <AccordionPrimitive.Root className={cn("flex w-full flex-col", className)} data-slot="accordion" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AccordionItem({ className, ...props }: AccordionItemProps): JSX.Element {
+  return (
+    <AccordionPrimitive.Item className={cn("not-last:border-b", className)} data-slot="accordion-item" {...props} />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps): JSX.Element {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className,
+        )}
+        data-slot="accordion-trigger"
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+          data-slot="accordion-trigger-icon"
+        />
+        <ChevronUpIcon
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+          data-slot="accordion-trigger-icon"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AccordionContent({ children, className, ...props }: AccordionContentProps): JSX.Element {
+  return (
+    <AccordionPrimitive.Content
+      className="overflow-hidden text-sm ease-snappy data-open:animate-accordion-down data-open:animation-duration-expand-in data-closed:animate-accordion-up data-closed:ease-exit data-closed:animation-duration-expand-out"
+      data-slot="accordion-content"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps };

package/src/components/alert-dialog.tsx

@@ -0,0 +1,298 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { Button } from "#/components/button";
+import type { ButtonProps } from "#/components/button";
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialog
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialog({ ...props }: AlertDialogProps): JSX.Element {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogTriggerProps = ComponentProps<typeof AlertDialogPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): JSX.Element {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AlertDialogContentProps extends ComponentProps<typeof AlertDialogPrimitive.Content> {
+  size?: "default" | "sm";
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogContent({ className, size = "default", ...props }: AlertDialogContentProps): JSX.Element {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal">
+      <AlertDialogPrimitive.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"
+      />
+      <AlertDialogPrimitive.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"
+        {...props}
+      />
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogHeaderProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): JSX.Element {
+  return (
+    <div
+      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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogMedia
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogMediaProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps): JSX.Element {
+  return (
+    <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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogBody
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Optional scrollable region for long content. When used, the Header and Footer
+ * stay pinned (shrink-0) and only this body scrolls; without it, the whole
+ * Content scrolls via its own max-height. A codefast enhancement over radix-vega.
+ *
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogBodyProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogBody({ className, ...props }: AlertDialogBodyProps): JSX.Element {
+  return (
+    <div
+      className={cn("-mx-6 min-h-0 flex-1 overflow-y-auto px-6", className)}
+      data-slot="alert-dialog-body"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogFooter
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogFooterProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): JSX.Element {
+  return (
+    <div
+      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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogTitleProps = ComponentProps<typeof AlertDialogPrimitive.Title>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): JSX.Element {
+  return (
+    <AlertDialogPrimitive.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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogDescriptionProps = ComponentProps<typeof AlertDialogPrimitive.Description>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): JSX.Element {
+  return (
+    <AlertDialogPrimitive.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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogAction
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AlertDialogActionProps
+  extends ComponentProps<typeof AlertDialogPrimitive.Action>, Pick<ButtonProps, "size" | "variant"> {}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogAction({ size = "default", variant = "default", ...props }: AlertDialogActionProps): JSX.Element {
+  return (
+    <Button asChild size={size} variant={variant}>
+      <AlertDialogPrimitive.Action data-slot="alert-dialog-action" {...props} />
+    </Button>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogCancel
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AlertDialogCancelProps
+  extends ComponentProps<typeof AlertDialogPrimitive.Cancel>, Pick<ButtonProps, "size" | "variant"> {}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogCancel({ size = "default", variant = "outline", ...props }: AlertDialogCancelProps): JSX.Element {
+  return (
+    <Button asChild size={size} variant={variant}>
+      <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" {...props} />
+    </Button>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
+export type {
+  AlertDialogActionProps,
+  AlertDialogBodyProps,
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogMediaProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+};

package/src/components/alert.tsx

@@ -0,0 +1,94 @@
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import type { AlertVariants } from "#/variants/alert";
+import { alertVariants } from "#/variants/alert";
+
+/* -----------------------------------------------------------------------------
+ * Component: Alert
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AlertProps extends ComponentProps<"div">, AlertVariants {}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Alert({ className, variant, ...props }: AlertProps): JSX.Element {
+  return <div className={alertVariants({ className, variant })} data-slot="alert" role="alert" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertTitleProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertTitle({ className, ...props }: AlertTitleProps): JSX.Element {
+  return (
+    <div
+      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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDescriptionProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDescription({ className, ...props }: AlertDescriptionProps): JSX.Element {
+  return (
+    <div
+      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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertAction
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertActionProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertAction({ className, ...props }: AlertActionProps): JSX.Element {
+  return <div className={cn("absolute top-2.5 right-3", className)} data-slot="alert-action" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Alert, AlertAction, AlertDescription, AlertTitle };
+export type { AlertActionProps, AlertDescriptionProps, AlertProps, AlertTitleProps };

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,25 @@
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+/* -----------------------------------------------------------------------------
+ * Component: AspectRatio
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AspectRatioProps = ComponentProps<typeof AspectRatioPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AspectRatio({ ...props }: AspectRatioProps): JSX.Element {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { AspectRatio };
+export type { AspectRatioProps };

package/src/components/avatar.tsx

@@ -0,0 +1,171 @@
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Avatar
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg";
+};
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Avatar({ className, size = "default", ...props }: AvatarProps): JSX.Element {
+  return (
+    <AvatarPrimitive.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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarImage
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarImage({ className, ...props }: AvatarImageProps): JSX.Element {
+  return (
+    <AvatarPrimitive.Image
+      className={cn("aspect-square size-full rounded-full object-cover", className)}
+      data-slot="avatar-image"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarFallback
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.Fallback>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarFallback({ className, ...props }: AvatarFallbackProps): JSX.Element {
+  return (
+    <AvatarPrimitive.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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarBadge
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarBadgeProps = ComponentProps<"span">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarBadge({ className, ...props }: AvatarBadgeProps): JSX.Element {
+  return (
+    <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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarGroupProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarGroup({ className, ...props }: AvatarGroupProps): JSX.Element {
+  return (
+    <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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarGroupCount
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarGroupCountProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps): JSX.Element {
+  return (
+    <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}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
+export type {
+  AvatarBadgeProps,
+  AvatarFallbackProps,
+  AvatarGroupCountProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  AvatarProps,
+};