{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-skeleton-layout",
  "title": "Skeleton Layout",
  "description": "Esqueletos pré-compostos para dashboard, tabela, perfil, formulário e lista.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@lema-ds/skeleton",
    "@lema-ds/card",
    "@lema-ds/ui-i18n",
    "@lema-ds/ds-locale-provider"
  ],
  "files": [
    {
      "path": "components/ds/ds-skeleton-layout.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { UI_I18N, type UILocale } from \"@/lib/ui-i18n\"\nimport { useUILocale } from \"@/components/ui/ds-locale-provider\"\n\n// ── Variants ──\n\nexport const skeletonLayoutVariants = cva(\"flex w-full flex-col gap-6\", {\n  variants: {\n    pattern: {\n      dashboard: \"\",\n      table: \"\",\n      profile: \"\",\n      form: \"\",\n      list: \"\",\n    },\n  },\n  defaultVariants: {\n    pattern: \"dashboard\",\n  },\n})\n\n// ── Types ──\n\nexport interface SkeletonLayoutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonLayoutVariants> {\n  /**\n   * Layout pattern to render.\n   */\n  pattern?: \"dashboard\" | \"table\" | \"profile\" | \"form\" | \"list\"\n  /**\n   * Number of rows for table and list patterns.\n   */\n  rows?: number\n  /**\n   * Number of columns for table pattern.\n   */\n  columns?: number\n  /**\n   * Locale for accessibility label.\n   */\n  locale?: UILocale\n}\n\n// ── Component ──\n\nexport const SkeletonLayout = React.forwardRef<\n  HTMLDivElement,\n  SkeletonLayoutProps\n>(\n  (\n    {\n      pattern = \"dashboard\",\n      rows = 4,\n      columns = 4,\n      locale: localeProp,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const locale = useUILocale(localeProp)\n    const t = UI_I18N[locale].skeletonLayout\n\n    const renderDashboard = () => (\n      <div className=\"flex w-full flex-col gap-6\">\n        {/* Header Skeleton */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex flex-col gap-2\">\n            <Skeleton className=\"h-7 w-48\" />\n            <Skeleton className=\"h-4 w-72\" />\n          </div>\n          <Skeleton className=\"h-9 w-32\" />\n        </div>\n\n        {/* 3 Metric Cards */}\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n          {[1, 2, 3].map((i) => (\n            <Card key={i} className=\"flex flex-col gap-3 p-4\">\n              <div className=\"flex items-center justify-between\">\n                <Skeleton className=\"h-4 w-24\" />\n                <Skeleton className=\"size-5 rounded-md\" />\n              </div>\n              <Skeleton className=\"h-7 w-32\" />\n              <Skeleton className=\"h-3 w-40\" />\n            </Card>\n          ))}\n        </div>\n\n        {/* Chart + Table Section */}\n        <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n          <Card className=\"flex flex-col gap-4 p-6 lg:col-span-2\">\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className=\"h-5 w-40\" />\n              <Skeleton className=\"h-8 w-28\" />\n            </div>\n            <Skeleton className=\"h-64 w-full rounded-lg\" />\n          </Card>\n          <Card className=\"flex flex-col gap-4 p-6\">\n            <Skeleton className=\"h-5 w-32\" />\n            <div className=\"flex flex-col gap-3\">\n              {[1, 2, 3, 4].map((j) => (\n                <div key={j} className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <Skeleton className=\"size-8 rounded-full\" />\n                    <Skeleton className=\"h-4 w-20\" />\n                  </div>\n                  <Skeleton className=\"h-4 w-12\" />\n                </div>\n              ))}\n            </div>\n          </Card>\n        </div>\n      </div>\n    )\n\n    const renderTable = () => (\n      <Card className=\"flex w-full flex-col gap-4 p-4\">\n        <div className=\"flex items-center justify-between gap-4\">\n          <Skeleton className=\"h-9 w-64\" />\n          <div className=\"flex gap-2\">\n            <Skeleton className=\"h-9 w-20\" />\n            <Skeleton className=\"h-9 w-24\" />\n          </div>\n        </div>\n\n        <div className=\"flex flex-col overflow-hidden rounded-lg border border-border\">\n          {/* Table Header */}\n          <div className=\"flex items-center gap-4 border-b border-border bg-muted/40 p-3\">\n            {Array.from({ length: columns }).map((_, c) => (\n              <Skeleton key={c} className=\"h-4 flex-1\" />\n            ))}\n          </div>\n          {/* Table Rows */}\n          {Array.from({ length: rows }).map((_, r) => (\n            <div\n              key={r}\n              className=\"flex items-center gap-4 border-b border-border p-3 last:border-0\"\n            >\n              {Array.from({ length: columns }).map((_, c) => (\n                <Skeleton\n                  key={c}\n                  className={cn(\"h-4 flex-1\", c === 0 && \"max-w-40\")}\n                />\n              ))}\n            </div>\n          ))}\n        </div>\n      </Card>\n    )\n\n    const renderProfile = () => (\n      <Card className=\"flex w-full max-w-2xl flex-col gap-6 p-6\">\n        <div className=\"flex items-start gap-4\">\n          <Skeleton className=\"size-16 shrink-0 rounded-full\" />\n          <div className=\"flex flex-1 flex-col gap-2 pt-1\">\n            <Skeleton className=\"h-6 w-48\" />\n            <Skeleton className=\"h-4 w-32\" />\n            <Skeleton className=\"h-4 w-full max-w-md pt-1\" />\n          </div>\n        </div>\n        <div className=\"grid grid-cols-1 gap-4 border-t border-border pt-2 sm:grid-cols-2\">\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"flex flex-col gap-1.5\">\n              <Skeleton className=\"h-3 w-20\" />\n              <Skeleton className=\"h-5 w-40\" />\n            </div>\n          ))}\n        </div>\n      </Card>\n    )\n\n    const renderForm = () => (\n      <Card className=\"flex w-full max-w-xl flex-col gap-6 p-6\">\n        <CardHeader className=\"flex flex-col gap-1 p-0\">\n          <Skeleton className=\"h-6 w-40\" />\n          <Skeleton className=\"h-4 w-64\" />\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4 p-0\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"flex flex-col gap-1.5\">\n              <Skeleton className=\"h-3.5 w-24\" />\n              <Skeleton className=\"h-9 w-full rounded-md\" />\n            </div>\n          ))}\n          <div className=\"flex justify-end gap-2 pt-2\">\n            <Skeleton className=\"h-9 w-20\" />\n            <Skeleton className=\"h-9 w-28\" />\n          </div>\n        </CardContent>\n      </Card>\n    )\n\n    const renderList = () => (\n      <div className=\"flex w-full flex-col gap-3\">\n        {Array.from({ length: rows }).map((_, i) => (\n          <div\n            key={i}\n            className=\"flex items-center gap-3 rounded-lg border border-border bg-card p-3\"\n          >\n            <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n            <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n              <Skeleton className=\"h-4 w-40\" />\n              <Skeleton className=\"h-3 w-64\" />\n            </div>\n            <Skeleton className=\"h-6 w-16 shrink-0 rounded-full\" />\n          </div>\n        ))}\n      </div>\n    )\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label={t.loading}\n        className={cn(skeletonLayoutVariants({ pattern }), className)}\n        {...props}\n      >\n        {pattern === \"dashboard\" && renderDashboard()}\n        {pattern === \"table\" && renderTable()}\n        {pattern === \"profile\" && renderProfile()}\n        {pattern === \"form\" && renderForm()}\n        {pattern === \"list\" && renderList()}\n      </div>\n    )\n  }\n)\n\nSkeletonLayout.displayName = \"SkeletonLayout\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}