{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mac-icons",
  "title": "Mac Icons",
  "description": "Decorative SVG icons for desktop mockups, including folders, files with an extension badge, drives and rounded app tiles.",
  "files": [
    {
      "path": "registry/tealmac/mac-icons.tsx",
      "content": "// Adapted from Ballmac UI (https://github.com/vamsiy78/ballmac-ui), MIT License, Copyright (c) 2026 Ballmac.\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype IconTone =\n  \"blue\" | \"teal\" | \"green\" | \"amber\" | \"orange\" | \"red\" | \"purple\" | \"graphite\"\n\nconst TONES: Record<IconTone, { top: string; bottom: string }> = {\n  blue: {\n    top: \"color-mix(in oklab, var(--chart-1) 70%, white)\",\n    bottom: \"var(--chart-1)\",\n  },\n  teal: {\n    top: \"color-mix(in oklab, var(--chart-3) 65%, white)\",\n    bottom: \"var(--chart-3)\",\n  },\n  green: {\n    top: \"color-mix(in oklab, var(--chart-3) 55%, oklch(0.87 0.17 150))\",\n    bottom: \"color-mix(in oklab, var(--chart-3) 80%, oklch(0.6 0.17 150))\",\n  },\n  amber: {\n    top: \"color-mix(in oklab, var(--chart-4) 65%, white)\",\n    bottom: \"var(--chart-4)\",\n  },\n  orange: {\n    top: \"color-mix(in oklab, var(--chart-5) 65%, white)\",\n    bottom: \"var(--chart-5)\",\n  },\n  red: {\n    top: \"color-mix(in oklab, var(--destructive) 70%, white)\",\n    bottom: \"var(--destructive)\",\n  },\n  purple: {\n    top: \"color-mix(in oklab, var(--chart-2) 65%, white)\",\n    bottom: \"var(--chart-2)\",\n  },\n  graphite: { top: \"oklch(0.64 0.01 260)\", bottom: \"oklch(0.42 0.012 260)\" },\n}\n\ntype IconProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n  /** Size in pixels. */\n  size?: number\n  /** Color of the icon. */\n  tone?: IconTone\n}\n\n/** A desktop-style folder with a tab, front flap and soft highlight. Decorative: put the name in text beside it. */\nfunction FolderIcon({\n  size = 64,\n  tone = \"blue\",\n  className,\n  ...props\n}: IconProps) {\n  const id = React.useId().replace(/:/g, \"\")\n  const t = TONES[tone]\n  return (\n    <svg\n      data-slot=\"folder-icon\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 64 64\"\n      width={size}\n      height={size}\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      <defs>\n        <linearGradient id={`${id}b`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0\" stopColor={t.top} />\n          <stop offset=\"1\" stopColor={t.bottom} />\n        </linearGradient>\n        <linearGradient id={`${id}f`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0\" stopColor={t.top} />\n          <stop offset=\"1\" stopColor={t.bottom} />\n        </linearGradient>\n      </defs>\n      <path\n        d=\"M6 14.5C6 11.5 8.5 9 11.5 9h12.6c1.5 0 2.8.6 3.8 1.6l2.4 2.4H52.5C55.5 13 58 15.5 58 18.5V48c0 3-2.5 5.5-5.5 5.5h-41C8.5 53.5 6 51 6 48V14.5Z\"\n        fill={`url(#${id}b)`}\n        opacity=\"0.78\"\n      />\n      <path\n        d=\"M6 22.5C6 19.5 8.5 17 11.5 17h41c3 0 5.5 2.5 5.5 5.5V48c0 3-2.5 5.5-5.5 5.5h-41C8.5 53.5 6 51 6 48V22.5Z\"\n        fill={`url(#${id}f)`}\n      />\n      <path\n        d=\"M11.5 17.5h41c2.7 0 5 2.2 5 5v.5c-.6-2.3-2.7-4-5-4h-41c-2.3 0-4.4 1.7-5 4v-.5c0-2.8 2.3-5 5-5Z\"\n        fill=\"white\"\n        opacity=\"0.5\"\n      />\n      <path\n        d=\"M6 48c0 3 2.5 5.5 5.5 5.5h41c3 0 5.5-2.5 5.5-5.5v-1.5c0 3-2.5 5-5.5 5h-41C8.5 51.5 6 49.5 6 46.5V48Z\"\n        fill=\"black\"\n        opacity=\"0.14\"\n      />\n    </svg>\n  )\n}\n\ntype FileIconProps = IconProps & {\n  /** Extension label drawn on the page, such as \"PDF\". */\n  label?: string\n}\n\n/** A sheet of paper with a folded corner and an extension badge. */\nfunction FileIcon({\n  size = 64,\n  tone = \"graphite\",\n  label,\n  className,\n  ...props\n}: FileIconProps) {\n  const t = TONES[tone]\n  return (\n    <svg\n      data-slot=\"file-icon\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 64 64\"\n      width={size}\n      height={size}\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      <path\n        d=\"M14 6.5C14 5 15 4 16.5 4H38l12 12v41.5c0 1.5-1 2.5-2.5 2.5h-31C15 60 14 59 14 57.5V6.5Z\"\n        className=\"fill-white dark:fill-neutral-200\"\n      />\n      <path\n        d=\"M14 6.5C14 5 15 4 16.5 4H38l12 12v41.5c0 1.5-1 2.5-2.5 2.5h-31C15 60 14 59 14 57.5V6.5Z\"\n        fill=\"none\"\n        stroke=\"black\"\n        strokeOpacity=\"0.2\"\n        strokeWidth=\"1\"\n      />\n      <path\n        d=\"M38 4v9c0 1.7 1.3 3 3 3h9L38 4Z\"\n        fill=\"black\"\n        fillOpacity=\"0.12\"\n      />\n      {label ? (\n        <g>\n          <rect x=\"9\" y=\"36\" width=\"34\" height=\"14\" rx=\"3\" fill={t.bottom} />\n          <text\n            x=\"26\"\n            y=\"46.2\"\n            textAnchor=\"middle\"\n            fontSize=\"8.5\"\n            fontWeight=\"700\"\n            fill=\"white\"\n            fontFamily=\"ui-sans-serif, system-ui, sans-serif\"\n            letterSpacing=\"0.3\"\n          >\n            {label.slice(0, 4).toUpperCase()}\n          </text>\n        </g>\n      ) : (\n        <g\n          stroke=\"black\"\n          strokeOpacity=\"0.18\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        >\n          <path d=\"M21 28h22M21 35h22M21 42h14\" />\n        </g>\n      )}\n    </svg>\n  )\n}\n\n/** A drive or disk: a slim slab with an indicator light. */\nfunction DriveIcon({\n  size = 64,\n  className,\n  ...props\n}: Omit<IconProps, \"tone\">) {\n  const id = React.useId().replace(/:/g, \"\")\n  return (\n    <svg\n      data-slot=\"drive-icon\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 64 64\"\n      width={size}\n      height={size}\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      <defs>\n        <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0\" stopColor=\"oklch(0.97 0 0)\" />\n          <stop offset=\"1\" stopColor=\"oklch(0.71 0.01 286)\" />\n        </linearGradient>\n      </defs>\n      <rect x=\"5\" y=\"22\" width=\"54\" height=\"26\" rx=\"7\" fill={`url(#${id})`} />\n      <rect\n        x=\"5\"\n        y=\"22\"\n        width=\"54\"\n        height=\"26\"\n        rx=\"7\"\n        fill=\"none\"\n        stroke=\"black\"\n        strokeOpacity=\"0.22\"\n      />\n      <rect\n        x=\"11\"\n        y=\"39\"\n        width=\"26\"\n        height=\"3\"\n        rx=\"1.5\"\n        fill=\"black\"\n        fillOpacity=\"0.18\"\n      />\n      <circle cx=\"50\" cy=\"40.5\" r=\"2.5\" fill=\"var(--chart-3)\" />\n      <path d=\"M8 26h48\" stroke=\"white\" strokeOpacity=\"0.7\" />\n    </svg>\n  )\n}\n\ntype AppIconProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** Size in pixels. */\n  size?: number\n  /** Background color. */\n  tone?: IconTone\n  /** The glyph: an icon, letter or short text, drawn in white. */\n  children?: React.ReactNode\n}\n\n/** A desktop app icon: a rounded square with a gradient, inner highlight and drop shadow. */\nfunction AppIcon({\n  size = 64,\n  tone = \"blue\",\n  className,\n  style,\n  children,\n  ...props\n}: AppIconProps) {\n  const t = TONES[tone]\n  return (\n    <span\n      data-slot=\"app-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"relative flex shrink-0 items-center justify-center overflow-hidden rounded-[22.4%] text-white shadow-[0_0.06em_0.18em_rgb(0_0_0/0.35),inset_0_0.04em_0_rgb(255_255_255/0.45),inset_0_-0.04em_0_rgb(0_0_0/0.18)] [&_svg]:size-full\",\n        className\n      )}\n      style={{\n        width: size,\n        height: size,\n        fontSize: size,\n        background: `linear-gradient(to bottom, ${t.top}, ${t.bottom})`,\n        ...style,\n      }}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/30 to-transparent\" />\n      <span\n        className=\"relative flex items-center justify-center font-semibold\"\n        style={{\n          width: size * 0.5,\n          height: size * 0.5,\n          fontSize: size * 0.42,\n          lineHeight: 1,\n        }}\n      >\n        {children}\n      </span>\n    </span>\n  )\n}\n\nexport {\n  FolderIcon,\n  FileIcon,\n  DriveIcon,\n  AppIcon,\n  type IconTone,\n  type IconProps,\n  type FileIconProps,\n  type AppIconProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}