{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "summary-card",
  "type": "registry:component",
  "title": "Summary Card",
  "description": "A simple summary card component for displaying summary information.",
  "registryDependencies": [
    "@aevr/button",
    "@aevr/number-formatter"
  ],
  "files": [
    {
      "path": "registry/lagos/ui/summary-card.tsx",
      "content": "// ./registry/lagos/ui/summary-card.tsx\n\nimport React, { ReactNode } from \"react\";\nimport {\n  formatCurrency,\n  formatNumber,\n} from \"@/registry/utils/number-formatter\";\n\nexport interface SummaryItem {\n  label: string;\n  value: ReactNode;\n  price?: {\n    amount: Maybe<number>;\n    currency: Maybe<string>;\n  };\n  content?: ReactNode;\n}\n\ntype Maybe<T> = T | null | undefined;\n\nconst SummaryCard: React.FC<{\n  items: SummaryItem[];\n  summary?: Maybe<SummaryItem>;\n  layout?: \"vertical\" | \"horizontal\";\n}> = ({ items, summary, layout = \"vertical\" }) => {\n  const isHorizontal = layout === \"horizontal\";\n\n  return (\n    <div\n      className={`flex ${\n        isHorizontal ? \"flex-col\" : \"flex-col\"\n      } gap-0 bg-white dark:bg-tw-modernblack-900 ${\n        summary\n          ? \"rounded-b-2xl rounded-t-2xl !bg-tw-modernblack-100 dark:!bg-tw-modernblack-900\"\n          : \"rounded-2xl\"\n      }`}\n    >\n      {/* Items Container */}\n      <div className={`flex ${isHorizontal ? \"flex-row\" : \"flex-col\"} gap-0`}>\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={`flex flex-wrap items-end justify-between border border-tw-modernblack-100 bg-white px-3 py-3 dark:border-tw-modernblack-600 dark:bg-tw-modernblack-800 ${\n              isHorizontal\n                ? // Horizontal layout classes\n                  `flex-1 ${\n                    index === 0\n                      ? \"rounded-l-xl border-r-0\"\n                      : index === items.length - 1\n                      ? \"rounded-r-xl border-l-0\"\n                      : \"border-l-0 border-r-0\"\n                  } ${\n                    !summary && index === items.length - 1\n                      ? \"rounded-br-2xl\"\n                      : \"\"\n                  } ${!summary && index === 0 ? \"rounded-bl-2xl\" : \"\"}`\n                : // Vertical layout classes (original)\n                  `border-b-0 ${index === 0 && \"rounded-t-xl\"} ${\n                    index === items.length - 1 ? \"rounded-b-2xl !border-b\" : \"\"\n                  } ${\n                    summary\n                      ? index === items.length - 1\n                        ? \"rounded-b-2xl !border-b\"\n                        : \"\"\n                      : \"\"\n                  }`\n            }`}\n          >\n            <div className=\"flex flex-col gap-1\">\n              <span className=\"text-sm text-tw-modernblack-500 dark:text-tw-modernblack-400\">\n                {item.label}\n              </span>\n              {typeof item.value === \"string\" && item.value.length > 0 ? (\n                <span className=\"font-medium text-tw-modernblack-900 dark:text-tw-modernblack-100\">\n                  {item.value}\n                </span>\n              ) : (\n                item.value\n              )}\n            </div>\n            {item?.content ? (\n              <>{item?.content}</>\n            ) : item?.price ? (\n              <div className=\"flex text-lg font-bold\">\n                {item?.price?.currency\n                  ? formatCurrency(item?.price?.amount || 0, {\n                      currency: item.price.currency,\n                      locale: \"en-US\",\n                    })\n                  : formatNumber(item?.price?.amount || 0)}\n              </div>\n            ) : null}\n          </div>\n        ))}\n      </div>\n\n      {/* Summary Section - Always at bottom */}\n      {summary && (\n        <div className=\"flex items-end justify-between rounded-b-2xl border-t-0 bg-tw-modernblack-100 p-3 dark:border-tw-modernblack-600 dark:bg-tw-modernblack-900\">\n          <div className=\"flex flex-col gap-1\">\n            <span className=\"text-sm text-tw-modernblack-500 dark:text-tw-modernblack-400\">\n              {summary.label}\n            </span>\n            <span className=\"font-medium text-tw-modernblack-900 dark:text-tw-modernblack-100\">\n              {summary.value || \"Not provided\"}\n            </span>\n          </div>\n          {summary?.content ? (\n            <>{summary?.content}</>\n          ) : summary.price ? (\n            <div className=\"flex text-lg font-bold\">\n              {summary?.price?.currency\n                ? formatCurrency(summary?.price?.amount || 0, {\n                    currency: summary.price.currency,\n                    locale: \"en-US\",\n                  })\n                : formatNumber(summary?.price?.amount || 0)}\n            </div>\n          ) : null}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default SummaryCard;\n",
      "type": "registry:component",
      "target": "components/ui/aevr/summary-card.tsx"
    }
  ]
}