@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,394 @@
+/**
+ * Autocomplete.tsx
+ *
+ * Reference Autocomplete component implementation.
+ */
+
+import { ChevronDown, X } from "lucide-react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import type {
+  AutocompleteArrowProps,
+  AutocompleteBackdropProps,
+  AutocompleteClearProps,
+  AutocompleteCollectionProps,
+  AutocompleteEmptyProps,
+  AutocompleteGroupLabelProps,
+  AutocompleteGroupProps,
+  AutocompleteIconProps,
+  AutocompleteInputGroupProps,
+  AutocompleteInputProps,
+  AutocompleteItemProps,
+  AutocompleteListProps,
+  AutocompletePopupProps,
+  AutocompletePortalProps,
+  AutocompletePositionerProps,
+  AutocompleteProps,
+  AutocompleteRowProps,
+  AutocompleteSeparatorProps,
+  AutocompleteStatusProps,
+  AutocompleteTriggerProps,
+  AutocompleteValueProps,
+} from "./Autocomplete.types"
+import {
+  autocompleteArrowVariants,
+  autocompleteBackdropVariants,
+  autocompleteClearVariants,
+  autocompleteEmptyVariants,
+  autocompleteGroupLabelVariants,
+  autocompleteGroupVariants,
+  autocompleteIconVariants,
+  autocompleteInputGroupVariants,
+  autocompleteInputVariants,
+  autocompleteItemVariants,
+  autocompleteListVariants,
+  autocompletePopupVariants,
+  autocompletePositionerVariants,
+  autocompleteRowVariants,
+  autocompleteSeparatorVariants,
+  autocompleteStatusVariants,
+  autocompleteTriggerVariants,
+} from "./Autocomplete.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const Autocomplete = (props: AutocompleteProps) => {
+  return <BaseAutocomplete.Root {...props} />
+}
+
+Autocomplete.displayName = "Autocomplete"
+
+const AutocompleteTrigger = ({
+  ref,
+  size,
+  className,
+  ...props
+}: AutocompleteTriggerProps) => {
+  return (
+    <BaseAutocomplete.Trigger
+      ref={ref}
+      className={mergeClassName(
+        autocompleteTriggerVariants({ size }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+AutocompleteTrigger.displayName = "AutocompleteTrigger"
+
+const AutocompleteInputGroup = ({
+  ref,
+  size,
+  className,
+  ...props
+}: AutocompleteInputGroupProps) => {
+  return (
+    <BaseAutocomplete.InputGroup
+      ref={ref}
+      className={mergeClassName(
+        autocompleteInputGroupVariants({ size }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+AutocompleteInputGroup.displayName = "AutocompleteInputGroup"
+
+const AutocompleteInput = ({
+  ref,
+  size,
+  className,
+  ...props
+}: AutocompleteInputProps) => {
+  return (
+    <BaseAutocomplete.Input
+      ref={ref}
+      className={mergeClassName(autocompleteInputVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteInput.displayName = "AutocompleteInput"
+
+const AutocompleteValue = (props: AutocompleteValueProps) => {
+  return <BaseAutocomplete.Value {...props} />
+}
+
+AutocompleteValue.displayName = "AutocompleteValue"
+
+const AutocompleteIcon = ({
+  ref,
+  className,
+  children,
+  ...props
+}: AutocompleteIconProps) => {
+  return (
+    <BaseAutocomplete.Icon
+      ref={ref}
+      className={mergeClassName(autocompleteIconVariants(), className)}
+      {...props}
+    >
+      {children ?? <ChevronDown aria-hidden="true" size={16} />}
+    </BaseAutocomplete.Icon>
+  )
+}
+
+AutocompleteIcon.displayName = "AutocompleteIcon"
+
+const AutocompleteClear = ({
+  ref,
+  className,
+  children,
+  ...props
+}: AutocompleteClearProps) => {
+  return (
+    <BaseAutocomplete.Clear
+      ref={ref}
+      className={mergeClassName(autocompleteClearVariants(), className)}
+      {...props}
+    >
+      {children ?? <X aria-hidden="true" size={14} />}
+    </BaseAutocomplete.Clear>
+  )
+}
+
+AutocompleteClear.displayName = "AutocompleteClear"
+
+const AutocompletePortal = (props: AutocompletePortalProps) => {
+  return <BaseAutocomplete.Portal {...props} />
+}
+
+AutocompletePortal.displayName = "AutocompletePortal"
+
+const AutocompleteBackdrop = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteBackdropProps) => {
+  return (
+    <BaseAutocomplete.Backdrop
+      ref={ref}
+      className={mergeClassName(autocompleteBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteBackdrop.displayName = "AutocompleteBackdrop"
+
+const AutocompletePositioner = ({
+  ref,
+  className,
+  sideOffset = overlayPositionerSideOffset,
+  ...props
+}: AutocompletePositionerProps) => {
+  return (
+    <BaseAutocomplete.Positioner
+      ref={ref}
+      sideOffset={sideOffset}
+      className={mergeClassName(autocompletePositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompletePositioner.displayName = "AutocompletePositioner"
+
+const AutocompletePopup = ({
+  ref,
+  className,
+  ...props
+}: AutocompletePopupProps) => {
+  return (
+    <BaseAutocomplete.Popup
+      ref={ref}
+      className={mergeClassName(autocompletePopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompletePopup.displayName = "AutocompletePopup"
+
+const AutocompleteList = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteListProps) => {
+  return (
+    <BaseAutocomplete.List
+      ref={ref}
+      className={mergeClassName(autocompleteListVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteList.displayName = "AutocompleteList"
+
+const AutocompleteItem = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteItemProps) => {
+  return (
+    <BaseAutocomplete.Item
+      ref={ref}
+      className={mergeClassName(autocompleteItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteItem.displayName = "AutocompleteItem"
+
+const AutocompleteArrow = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteArrowProps) => {
+  return (
+    <BaseAutocomplete.Arrow
+      ref={ref}
+      className={mergeClassName(autocompleteArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteArrow.displayName = "AutocompleteArrow"
+
+const AutocompleteGroup = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteGroupProps) => {
+  return (
+    <BaseAutocomplete.Group
+      ref={ref}
+      className={mergeClassName(autocompleteGroupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteGroup.displayName = "AutocompleteGroup"
+
+const AutocompleteGroupLabel = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteGroupLabelProps) => {
+  return (
+    <BaseAutocomplete.GroupLabel
+      ref={ref}
+      className={mergeClassName(autocompleteGroupLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteGroupLabel.displayName = "AutocompleteGroupLabel"
+
+const AutocompleteEmpty = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteEmptyProps) => {
+  return (
+    <BaseAutocomplete.Empty
+      ref={ref}
+      className={mergeClassName(autocompleteEmptyVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteEmpty.displayName = "AutocompleteEmpty"
+
+const AutocompleteStatus = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteStatusProps) => {
+  return (
+    <BaseAutocomplete.Status
+      ref={ref}
+      className={mergeClassName(autocompleteStatusVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteStatus.displayName = "AutocompleteStatus"
+
+const AutocompleteRow = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteRowProps) => {
+  return (
+    <BaseAutocomplete.Row
+      ref={ref}
+      className={mergeClassName(autocompleteRowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteRow.displayName = "AutocompleteRow"
+
+const AutocompleteCollection = (props: AutocompleteCollectionProps) => {
+  return <BaseAutocomplete.Collection {...props} />
+}
+
+AutocompleteCollection.displayName = "AutocompleteCollection"
+
+const AutocompleteSeparator = ({
+  ref,
+  className,
+  ...props
+}: AutocompleteSeparatorProps) => {
+  return (
+    <BaseAutocomplete.Separator
+      ref={ref}
+      className={mergeClassName(autocompleteSeparatorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AutocompleteSeparator.displayName = "AutocompleteSeparator"
+
+const useAutocompleteFilter = BaseAutocomplete.useFilter
+const useAutocompleteFilteredItems = BaseAutocomplete.useFilteredItems
+
+export {
+  Autocomplete,
+  AutocompleteTrigger,
+  AutocompleteInputGroup,
+  AutocompleteInput,
+  AutocompleteValue,
+  AutocompleteIcon,
+  AutocompleteClear,
+  AutocompletePortal,
+  AutocompleteBackdrop,
+  AutocompletePositioner,
+  AutocompletePopup,
+  AutocompleteList,
+  AutocompleteItem,
+  AutocompleteArrow,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteStatus,
+  AutocompleteRow,
+  AutocompleteCollection,
+  AutocompleteSeparator,
+  useAutocompleteFilter,
+  useAutocompleteFilteredItems,
+}

package/templates/primitives/Autocomplete/Autocomplete.types.ts

@@ -0,0 +1,82 @@
+import type { Ref } from "react"
+import type { ComponentProps } from "react"
+/**
+ * Autocomplete.types.ts
+ *
+ * Public and internal types for Autocomplete component.
+ */
+
+import type { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+
+export type AutocompleteSize = "sm" | "md" | "lg"
+
+export type AutocompleteProps = ComponentProps<typeof BaseAutocomplete.Root>
+
+export interface AutocompleteTriggerProps extends Omit<
+  BaseAutocomplete.Trigger.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLButtonElement>
+  size?: AutocompleteSize
+  className?: BaseAutocomplete.Trigger.Props["className"]
+}
+
+export interface AutocompleteInputGroupProps extends Omit<
+  BaseAutocomplete.InputGroup.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLDivElement>
+  size?: AutocompleteSize
+  className?: BaseAutocomplete.InputGroup.Props["className"]
+}
+
+export interface AutocompleteInputProps extends Omit<
+  BaseAutocomplete.Input.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLInputElement>
+  size?: AutocompleteSize
+  className?: BaseAutocomplete.Input.Props["className"]
+}
+
+export type AutocompleteValueProps = BaseAutocomplete.Value.Props
+
+export type AutocompleteIconProps = BaseAutocomplete.Icon.Props
+
+export type AutocompleteClearProps = BaseAutocomplete.Clear.Props
+
+export type AutocompletePortalProps = BaseAutocomplete.Portal.Props
+
+export type AutocompleteBackdropProps = BaseAutocomplete.Backdrop.Props
+
+export type AutocompletePositionerProps = BaseAutocomplete.Positioner.Props
+
+export type AutocompletePopupProps = BaseAutocomplete.Popup.Props
+
+export type AutocompleteListProps = BaseAutocomplete.List.Props
+
+export interface AutocompleteItemProps extends Omit<
+  BaseAutocomplete.Item.Props,
+  "className" | "ref"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseAutocomplete.Item.Props["className"]
+}
+
+export type AutocompleteArrowProps = BaseAutocomplete.Arrow.Props
+
+export type AutocompleteGroupProps = BaseAutocomplete.Group.Props
+
+export type AutocompleteGroupLabelProps = BaseAutocomplete.GroupLabel.Props
+
+export type AutocompleteEmptyProps = BaseAutocomplete.Empty.Props
+
+export type AutocompleteStatusProps = BaseAutocomplete.Status.Props
+
+export type AutocompleteRowProps = BaseAutocomplete.Row.Props
+
+export type AutocompleteCollectionProps = BaseAutocomplete.Collection.Props
+
+export type AutocompleteSeparatorProps = ComponentProps<
+  typeof BaseAutocomplete.Separator
+>

package/templates/primitives/Autocomplete/Autocomplete.variants.ts

@@ -0,0 +1,154 @@
+/**
+ * Autocomplete.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const autocompleteTriggerVariants = cva(
+  [
+    "inline-flex w-full min-w-0 items-center justify-between gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
+    "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
+    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
+    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+    "outline-none data-[focused]:border-(--lsys-select-focus-border-color) data-[focused]:ring-(length:--lsys-select-focus-ring-width) data-[focused]:ring-(--lsys-select-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-select-focus-ring-offset) data-[focused]:ring-offset-(--lsys-select-focus-ring-offset-color)",
+    "data-[invalid]:border-(--lsys-select-invalid-border-color) data-[invalid]:ring-(length:--lsys-select-invalid-ring-width) data-[invalid]:ring-(--lsys-select-invalid-ring-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
+        md: "h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
+        lg: "h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const autocompleteInputGroupVariants = cva(
+  [
+    "inline-flex w-full min-w-0 items-center gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
+    "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
+    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
+    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+    "outline-none data-[focused]:border-(--lsys-select-focus-border-color) data-[focused]:ring-(length:--lsys-select-focus-ring-width) data-[focused]:ring-(--lsys-select-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-select-focus-ring-offset) data-[focused]:ring-offset-(--lsys-select-focus-ring-offset-color)",
+    "data-[invalid]:border-(--lsys-select-invalid-border-color) data-[invalid]:ring-(length:--lsys-select-invalid-ring-width) data-[invalid]:ring-(--lsys-select-invalid-ring-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
+        md: "h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
+        lg: "h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const autocompleteInputVariants = cva(
+  [
+    "min-w-0 flex-1 border-0 bg-transparent text-(--lsys-select-foreground) outline-none",
+    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
+    "placeholder:text-(--lsys-select-placeholder-color)",
+    "disabled:cursor-not-allowed",
+    disabledStateClasses,
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "text-(length:--lsys-select-font-size-sm)",
+        md: "text-(length:--lsys-select-font-size-md)",
+        lg: "text-(length:--lsys-select-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const autocompleteValueVariants = cva(
+  "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lsys-select-placeholder-color)",
+)
+
+export const autocompleteIconVariants = cva(
+  "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center text-(--lsys-select-icon-foreground) transition-transform duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing) data-[open]:rotate-180",
+)
+
+export const autocompleteClearVariants = cva(
+  [
+    "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center rounded-(--lsys-select-item-radius) text-(--lsys-select-icon-foreground)",
+    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+    "hover:bg-(--lsys-select-item-highlight-background) hover:text-(--lsys-select-item-highlight-foreground)",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const autocompleteBackdropVariants = cva(
+  "fixed inset-0 z-(--lsys-select-backdrop-z-index) bg-(--lsys-select-backdrop-background) opacity-(--lsys-select-backdrop-opacity) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+)
+
+export const autocompletePositionerVariants = cva(
+  "z-(--lsys-select-positioner-z-index)",
+)
+
+export const autocompletePopupVariants = cva(
+  [
+    "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lsys-select-radius) border",
+    "border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background) text-(--lsys-select-popup-foreground) shadow-(--lsys-select-popup-shadow)",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+  ].join(" "),
+)
+
+export const autocompleteListVariants = cva(
+  "grid max-h-(--lsys-select-popup-max-height) gap-(--lsys-select-list-gap) overflow-y-auto p-(--lsys-select-list-padding)",
+)
+
+export const autocompleteItemVariants = cva(
+  [
+    "relative flex min-w-0 cursor-default select-none items-center gap-(--lsys-select-item-gap) rounded-(--lsys-select-item-radius) px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y)",
+    "text-(length:--lsys-select-item-font-size) font-(--lsys-select-item-font-weight) leading-(--lsys-select-item-font-line-height) text-(--lsys-select-item-foreground) outline-none",
+    "data-[highlighted]:bg-(--lsys-select-item-highlight-background) data-[highlighted]:text-(--lsys-select-item-highlight-foreground)",
+    "data-[selected]:bg-(--lsys-select-item-selected-background) data-[selected]:text-(--lsys-select-item-selected-foreground)",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const autocompleteArrowVariants = cva(
+  "size-(--lsys-select-arrow-size) rotate-45 border border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background)",
+)
+
+export const autocompleteGroupVariants = cva(
+  "grid gap-(--lsys-select-group-gap)",
+)
+
+export const autocompleteGroupLabelVariants = cva(
+  "px-(--lsys-select-item-padding-x) py-(--lsys-select-group-label-padding-y) text-(length:--lsys-select-group-label-font-size) font-(--lsys-select-group-label-font-weight) leading-(--lsys-select-group-label-font-line-height) text-(--lsys-select-group-label-foreground)",
+)
+
+export const autocompleteEmptyVariants = cva(
+  "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
+)
+
+export const autocompleteStatusVariants = cva(
+  "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
+)
+
+export const autocompleteRowVariants = cva("flex min-w-0 items-center")
+
+export const autocompleteCollectionVariants = cva("contents")
+
+export const autocompleteSeparatorVariants = cva(
+  "mx-(--lsys-select-item-padding-x) my-(--lsys-select-group-label-padding-y) h-(--lsys-separator-thickness) bg-(--lsys-separator-color)",
+)

package/templates/primitives/Avatar/Avatar.tsx

@@ -0,0 +1,56 @@
+/**
+ * Avatar.tsx
+ *
+ * Reference Avatar component implementation.
+ */
+
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar"
+import type {
+  AvatarFallbackProps,
+  AvatarImageProps,
+  AvatarProps,
+} from "./Avatar.types"
+import {
+  avatarFallbackVariants,
+  avatarImageVariants,
+  avatarVariants,
+} from "./Avatar.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Avatar = ({ ref, size, shape, className, ...props }: AvatarProps) => {
+  return (
+    <BaseAvatar.Root
+      ref={ref}
+      className={mergeClassName(avatarVariants({ size, shape }), className)}
+      {...props}
+    />
+  )
+}
+
+Avatar.displayName = "Avatar"
+
+const AvatarImage = ({ ref, className, ...props }: AvatarImageProps) => {
+  return (
+    <BaseAvatar.Image
+      ref={ref}
+      className={mergeClassName(avatarImageVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AvatarImage.displayName = "AvatarImage"
+
+const AvatarFallback = ({ ref, className, ...props }: AvatarFallbackProps) => {
+  return (
+    <BaseAvatar.Fallback
+      ref={ref}
+      className={mergeClassName(avatarFallbackVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AvatarFallback.displayName = "AvatarFallback"
+
+export { Avatar, AvatarImage, AvatarFallback }