{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-values-card",
  "title": "Values Card",
  "description": "Cartão atômico de princípio ou valor institucional com ícone, índice ordinal e variantes.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ds/ds-values-card.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@/lib/utils\"\n\n// ── Types ──\n\nexport interface ValuesCardProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof valuesCardVariants> {\n  title: string\n  description: string\n  icon?: React.ComponentType<{ className?: string }>\n  index?: string | number\n}\n\n// ── Variants ──\n\nexport const valuesCardVariants = cva(\n  \"group relative flex flex-col rounded-2xl p-6 transition-all duration-200\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border border-border bg-card text-card-foreground shadow-xs hover:border-primary/40 hover:shadow-sm\",\n        outline:\n          \"border-2 border-border/80 bg-transparent hover:border-foreground/50\",\n        accent: \"border border-primary/20 bg-primary/5 hover:bg-primary/10\",\n        muted: \"border border-transparent bg-muted/50 hover:bg-muted\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n// ── Component ──\n\nexport function ValuesCard({\n  title,\n  description,\n  icon: Icon,\n  index,\n  variant,\n  className,\n  ...props\n}: ValuesCardProps) {\n  const formattedIndex =\n    typeof index === \"number\" ? String(index).padStart(2, \"0\") : index\n\n  return (\n    <div className={cn(valuesCardVariants({ variant }), className)} {...props}>\n      <div className=\"flex items-center justify-between\">\n        {Icon ? (\n          <div className=\"flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground\">\n            <Icon className=\"size-5\" />\n          </div>\n        ) : (\n          <div className=\"size-10\" />\n        )}\n        {formattedIndex && (\n          <span className=\"text-xs font-semibold text-muted-foreground tabular-nums\">\n            {formattedIndex}\n          </span>\n        )}\n      </div>\n\n      <h3 className=\"mt-4 text-base font-semibold text-foreground\">{title}</h3>\n      <p className=\"mt-2 text-sm leading-relaxed text-muted-foreground\">\n        {description}\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "about",
    "marketing"
  ],
  "type": "registry:ui"
}