{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon-stack",
  "title": "Icon Stack",
  "author": "@fma-ui/ui",
  "description": "A layered icon illustration for empty states: three receding cards drawn from `currentColor`, with an optional glyph (`children`) laid flat on the front card. Pairs with `EmptyMedia`. Decorative: the SVG is hidden from assistive tech, so give the glyph `aria-hidden` too.",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "files": [
    {
      "path": "src/core/icon-stack/icon-stack.tsx",
      "content": "import { cn } from \"cn\";\nimport type * as React from \"react\";\n\ntype IconStackProps = React.ComponentProps<\"div\">;\n\nfunction IconStack({ className, children, style, ...props }: IconStackProps) {\n  return (\n    <div\n      data-slot=\"icon-stack\"\n      className={cn(\n        \"relative h-20 w-18 text-foreground **:data-[slot=icon-stack-layer]:fill-background\",\n        className,\n      )}\n      style={\n        {\n          \"--icon-stack-content-x\": \"71%\",\n          \"--icon-stack-content-y\": \"58%\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 72 81\"\n        fill=\"none\"\n        className=\"size-full overflow-visible\"\n      >\n        <ellipse\n          cx=\"36\"\n          cy=\"76\"\n          rx=\"30\"\n          ry=\"7\"\n          fill=\"currentColor\"\n          fillOpacity=\"0.055\"\n          className=\"blur-[4px]\"\n        />\n        <IconStackLayer opacity=\"0.4\" />\n        <IconStackLayer opacity=\"0.6\" x={13.65} y={6.04} />\n        <IconStackLayer opacity=\"0.8\" x={27.32} y={12.08} active />\n      </svg>\n\n      {children ? (\n        // Skewed to sit flat on the front card's face.\n        <div\n          data-slot=\"icon-stack-content\"\n          className=\"pointer-events-none absolute top-(--icon-stack-content-y) left-(--icon-stack-content-x) flex -translate-x-1/2 -translate-y-1/2 scale-x-90 -skew-y-26 items-center justify-center text-muted-foreground\"\n        >\n          {children}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction IconStackLayer({\n  active = false,\n  opacity,\n  x = 0,\n  y = 0,\n}: {\n  active?: boolean;\n  opacity: string;\n  x?: number;\n  y?: number;\n}) {\n  const strokeOpacity = active ? \"0.3\" : \"0.2\";\n  return (\n    <g opacity={opacity} transform={`translate(${x} ${y})`}>\n      <path\n        data-slot=\"icon-stack-layer\"\n        d=\"M42.2538 2.046C41.4408 1.6325 40.3965 1.6677 39.2612 2.2424L7.9616 18.1934C5.3895 19.5039 3.301 23.1064 3.301 26.2322V64.3226C3.301 66.0677 3.9458 67.2943 4.962 67.8199L1.8363 66.229C0.8201 65.7104 0.1753 64.4771 0.1753 62.732V24.6412C0.1753 21.5085 2.2638 17.913 4.8359 16.6024L36.1355 0.6515C37.2778 0.0698 38.322 0.0416 39.128 0.4551L42.2538 2.046Z\"\n        stroke=\"currentColor\"\n        strokeOpacity={strokeOpacity}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        data-slot=\"icon-stack-layer\"\n        d=\"M42.2545 2.0456C43.2707 2.5643 43.9155 3.7979 43.9155 5.543V43.6337C43.9155 46.7665 41.827 50.3616 39.2549 51.6722L7.9554 67.6235C6.813 68.2052 5.7687 68.2331 4.9628 67.8196C3.9465 67.301 3.3018 66.0673 3.3018 64.3222V26.2318C3.3018 23.0991 5.3903 19.5036 7.9624 18.193L39.2619 2.2421C40.4043 1.6604 41.4486 1.6321 42.2545 2.0456Z\"\n        stroke=\"currentColor\"\n        strokeOpacity={strokeOpacity}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </g>\n  );\n}\n\nexport type { IconStackProps };\nexport { IconStack };\n",
      "type": "registry:component",
      "target": "components/fma-ui/icon-stack.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "third-party",
    "origin": "reui.io (https://reui.io/docs/components/base/icon-stack, MIT), via EMITTE",
    "tags": [
      "feedback",
      "empty-state",
      "illustration",
      "icon"
    ]
  },
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}