{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Card",
  "dependencies": [
    "cn",
    "rescript-base-ui"
  ],
  "files": [
    {
      "path": "registry/base/ui/Card.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule Size = {\n  @unboxed\n  type t =\n    | @as(\"default\") Default\n    | @as(\"sm\") Sm\n}\n\ntype props = {\n  size?: Size.t,\n  children?: React.element,\n  ...BaseUi.Types.BaseDomProps.t,\n  ...BaseUi.Types.ExtraDomProps.t,\n}\nlet toDomProps: props => BaseUi.Types.DomProps.t = %raw(`({size, ...props}) => props`)\n\n@react.componentWithProps(props)\nlet make = (props: props) => {\n  let size = props.size->Option.getOr(Default)\n  <div\n    {...props->toDomProps}\n    dataSlot={props.dataSlot->Option.getOr(\"card\")}\n    dataSize={props.dataSize->Option.getOr((size :> string))}\n    className={cn(\n      \"ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col\",\n      props.className,\n    )}\n  />\n}\n\nmodule Header = {\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(\"card-header\")}\n      className={cn(\n        \"gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n        props.className,\n      )}\n    />\n  }\n}\n\nmodule Title = {\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(\"card-title\")}\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm font-heading\",\n        props.className,\n      )}\n    />\n  }\n}\n\nmodule Description = {\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(\"card-description\")}\n      className={cn(\"text-muted-foreground text-sm\", props.className)}\n    />\n  }\n}\n\nmodule Action = {\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(\"card-action\")}\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        props.className,\n      )}\n    />\n  }\n}\n\nmodule Content = {\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(\"card-content\")}\n      className={cn(\"px-(--card-spacing)\", props.className)}\n    />\n  }\n}\n\nmodule Footer = {\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(\"card-footer\")}\n      className={cn(\n        \"bg-muted/50 rounded-b-xl border-t p-(--card-spacing) flex items-center\",\n        props.className,\n      )}\n    />\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/Card.res"
    }
  ],
  "type": "registry:ui"
}