{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Avatar",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "rescript-base-ui"
  ],
  "files": [
    {
      "path": "registry/base/ui/Avatar.res",
      "content": "@@directive(\"'use client'\")\n\n@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\n@module(\"cn\")\nexternal cn5: (string, string, string, string, option<string>) => string = \"cn\"\n\nmodule Size = {\n  @unboxed\n  type t =\n    | @as(\"default\") Default\n    | @as(\"sm\") Sm\n    | @as(\"lg\") Lg\n}\n\ntype props = {\n  ...BaseUi.Types.BaseUIComponentProps.t,\n  size?: Size.t,\n}\n\nlet toBaseUiProps: props => BaseUi.Types.BaseUIComponentProps.t = %raw(`({size, ...props}) => props`)\n\n@react.componentWithProps(props)\nlet make = (props: props) => {\n  let size = props.size->Option.getOr(Size.Default)\n  <BaseUi.Avatar.Root\n    {...props->toBaseUiProps}\n    dataSlot={props.dataSlot->Option.getOr(\"avatar\")}\n    dataSize={props.dataSize->Option.getOr((size :> string))}\n    className={cn(\n      \"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten\",\n      props.className,\n    )}\n  />\n}\n\nmodule Image = {\n  type props = BaseUi.Avatar.Image.props\n\n  let toBaseUiProps: props => props = %raw(`({className, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <BaseUi.Avatar.Image\n      {...toBaseUiProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"avatar-image\")}\n      className={cn(\"rounded-full aspect-square size-full object-cover\", props.className)}\n    />\n}\n\nmodule Fallback = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Avatar.Fallback\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"avatar-fallback\")}\n      className={cn(\n        \"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs\",\n        props.className,\n      )}\n    />\n}\n\nmodule Group = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"avatar-group\")}\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        props.className,\n      )}\n    />\n}\n\nmodule GroupCount = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"avatar-group-count\")}\n      className={cn(\n        \"bg-muted text-muted-foreground size-8 rounded-full text-sm 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 ring-background relative flex shrink-0 items-center justify-center ring-2\",\n        props.className,\n      )}\n    />\n}\n\nmodule Badge = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <span\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"avatar-badge\")}\n      className={cn5(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        props.className,\n      )}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/Avatar.res"
    }
  ],
  "type": "registry:ui"
}