{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "warning-graphic",
  "title": "Warning graphic",
  "description": "Warning graphic is a production-ready hud component from BJORK UI, packaged for shadcn registries.",
  "dependencies": [
    "clsx",
    "framer-motion",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/bjork-ui/hud/warning.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\ninterface WarningGraphicProps {\n  /** Width of the graphic */\n  width?: number;\n  /** Height of the graphic */  \n  height?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Control animation enable/disable */\n  enableAnimations?: boolean;\n  /** Animation speed multiplier */\n  animationSpeed?: number;\n  /** Color override for all elements */\n  color?: string;\n}\n\nexport function WarningGraphic({\n  width = 354, // Default 2x size of original 176.958\n  height = 115, // Default 2x size of original 57.531\n  className,\n  enableAnimations = true,\n  animationSpeed = 1,\n  color = \"#FDC221\",\n}: WarningGraphicProps = {}) {\n  const shouldReduceMotion = useReducedMotion();\n  const shouldAnimate = enableAnimations && !shouldReduceMotion;\n  const speedMultiplier = 1 / animationSpeed;\n\n  const containerVariants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: shouldAnimate ? 0.15 * speedMultiplier : 0,\n        delayChildren: shouldAnimate ? 0.1 * speedMultiplier : 0,\n      },\n    },\n  };\n\n  // First: Path lines (corner/background elements) draw from inside out\n  const pathLineVariants = {\n    hidden: {\n      pathLength: 0,\n      opacity: 0.3, // Keep opacity constant for visibility\n    },\n    visible: {\n      pathLength: 1,\n      opacity: 0.3,\n      transition: {\n        pathLength: { duration: 1.2 * speedMultiplier, ease: \"easeOut\" },\n        delay: shouldAnimate ? 0.0 : 0,\n      },\n    },\n  };\n\n  // Second: Triangle outline draws\n  const triangleVariants = {\n    hidden: {\n      opacity: 0,\n      pathLength: 0,\n    },\n    visible: {\n      opacity: 1,\n      pathLength: 1,\n      transition: {\n        pathLength: { duration: 0.8 * speedMultiplier, ease: \"easeOut\" },\n        opacity: { duration: 0.3 * speedMultiplier },\n        delay: shouldAnimate ? 0.6 * speedMultiplier : 0,\n      },\n    },\n  };\n\n  // Corner rectangles - fade in last\n  const elementVariants = {\n    hidden: {\n      opacity: 0,\n      scale: 0.5,\n      y: 10,\n    },\n    visible: {\n      opacity: 1,\n      scale: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 400,\n        damping: 25,\n        delay: shouldAnimate ? 2.5 * speedMultiplier : 0, // Fade in last\n      },\n    },\n  };\n\n  // Third: Interior stripes animate from center outward\n  const leftStripeVariants = {\n    hidden: {\n      opacity: 0,\n      scaleX: 0,\n      transformOrigin: \"right center\", // Scale from right (center) going left\n    },\n    visible: {\n      opacity: 1,\n      scaleX: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 400,\n        damping: 30,\n        delay: shouldAnimate ? 1.4 * speedMultiplier : 0,\n      },\n    },\n  };\n\n  const rightStripeVariants = {\n    hidden: {\n      opacity: 0,\n      scaleX: 0,\n      transformOrigin: \"left center\", // Scale from left (center) going right\n    },\n    visible: {\n      opacity: 1,\n      scaleX: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 400,\n        damping: 30,\n        delay: shouldAnimate ? 1.4 * speedMultiplier : 0,\n      },\n    },\n  };\n\n  const stripesContainerVariants = {\n    hidden: {},\n    visible: {\n      transition: {\n        staggerChildren: shouldAnimate ? 0.08 * speedMultiplier : 0,\n        delayChildren: shouldAnimate ? 1.4 * speedMultiplier : 0,\n      },\n    },\n  };\n\n  // Fourth: Exclamation with overshoot\n  const exclamationVariants = {\n    hidden: {\n      opacity: 0,\n      scale: 0,\n    },\n    visible: {\n      opacity: 1,\n      scale: [0, 1.3, 1], // Overshoot: 0 -> 1.3 -> 1\n      transition: {\n        type: \"spring\",\n        stiffness: 500,\n        damping: 20,\n        scale: {\n          times: [0, 0.6, 1],\n          duration: 0.6 * speedMultiplier,\n        },\n        delay: shouldAnimate ? 2.0 * speedMultiplier : 0,\n      },\n    },\n  };\n\n    return (\n    <motion.svg \n      xmlns=\"http://www.w3.org/2000/svg\" \n      width={width}\n      height={height}\n      viewBox=\"0 0 176.958 57.531\"\n      className={cn(\"\", className)}\n      variants={shouldAnimate ? containerVariants : {}}\n      initial={shouldAnimate ? \"hidden\" : \"visible\"}\n      animate=\"visible\"\n      transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n    >\n      <motion.g>\n        {/* Corner rectangles */}\n        <motion.rect\n          y=\"25.128\"\n          width=\"0.538\"\n          height=\"0.538\"\n          transform=\"translate(-25.128 25.666) rotate(-90)\"\n          fill={color}\n          variants={elementVariants}\n        />\n        <motion.rect\n          y=\"22.449\"\n          width=\"0.538\"\n          height=\"0.538\"\n          transform=\"translate(-22.449 22.987) rotate(-90)\"\n          fill={color}\n          variants={elementVariants}\n        />\n        <motion.rect\n          x=\"176.42\"\n          y=\"25.128\"\n          width=\"0.538\"\n          height=\"0.538\"\n          transform=\"translate(151.292 202.086) rotate(-90)\"\n          fill={color}\n          variants={elementVariants}\n        />\n        <motion.rect\n          x=\"176.42\"\n          y=\"22.449\"\n          width=\"0.538\"\n          height=\"0.538\"\n          transform=\"translate(153.971 199.408) rotate(-90)\"\n          fill={color}\n          variants={elementVariants}\n        />\n\n        {/* First: Background/corner path lines draw from inside out */}\n        <motion.g variants={containerVariants}>\n          <motion.path\n            d=\"M25.949,24.432H5.565a.375.375,0,0,1,0-.75H25.52l8.068-13.7H59.015a.375.375,0,0,1,0,.75h-25Z\"\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"0.5\"\n            strokeLinecap=\"round\"\n            variants={pathLineVariants}\n          />\n          <motion.path\n            d=\"M171.393,24.432H151.009l-8.068-13.7h-25a.375.375,0,0,1,0-.75H143.37l8.068,13.7h19.955a.375.375,0,0,1,0,.75Z\"\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"0.5\"\n            strokeLinecap=\"round\"\n            variants={pathLineVariants}\n          />\n          <motion.path\n            d=\"M57.3,57.531a.375.375,0,0,1-.321-.182L47.147,41.043H18.507l-7.71-7.71H7.66a.375.375,0,1,1,0-.75h3.448l7.709,7.71H47.571L57.623,56.962a.376.376,0,0,1-.127.515A.382.382,0,0,1,57.3,57.531Z\"\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"0.5\"\n            strokeLinecap=\"round\"\n            variants={pathLineVariants}\n          />\n          <motion.path\n            d=\"M119.656,57.531a.376.376,0,0,1-.321-.569l10.052-16.669h28.754l7.709-7.71H169.3a.375.375,0,0,1,0,.75h-3.137l-7.71,7.71h-28.64l-9.833,16.306A.377.377,0,0,1,119.656,57.531Z\"\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"0.5\"\n            strokeLinecap=\"round\"\n            variants={pathLineVariants}\n          />\n        </motion.g>\n\n        {/* Second: Main warning triangle outline draws */}\n        <motion.path\n          d=\"M93.582,1l26.746,46.327-5.1,8.828H61.737L56.63,47.326,83.377,1h10.2m.577-1H82.8L55.475,47.327l5.685,9.828h54.648l5.675-9.828L94.159,0Z\"\n          fill={color}\n          variants={triangleVariants}\n        />\n\n        {/* Third: Interior stripes animate from center outward */}\n        <motion.g variants={stripesContainerVariants}>\n          {/* Left side stripes (animate from center going left) */}\n          <motion.polygon\n            points=\"51.838 37.309 61.852 37.309 75.448 13.85 65.434 13.85 51.838 37.309\"\n            fill={color}\n            variants={leftStripeVariants}\n          />\n          <motion.polygon\n            points=\"37.422 37.309 47.436 37.309 61.033 13.85 51.019 13.85 37.422 37.309\"\n            fill={color}\n            variants={leftStripeVariants}\n          />\n          <motion.polygon\n            points=\"23.007 37.309 33.021 37.309 46.617 13.85 36.603 13.85 23.007 37.309\"\n            fill={color}\n            variants={leftStripeVariants}\n          />\n\n          {/* Right side stripes (animate from center going right) */}\n          <motion.polygon\n            points=\"125.121 37.309 115.107 37.309 101.51 13.85 111.524 13.85 125.121 37.309\"\n            fill={color}\n            variants={rightStripeVariants}\n          />\n          <motion.polygon\n            points=\"139.536 37.309 129.522 37.309 115.926 13.85 125.94 13.85 139.536 37.309\"\n            fill={color}\n            variants={rightStripeVariants}\n          />\n          <motion.polygon\n            points=\"153.951 37.309 143.937 37.309 130.341 13.85 140.355 13.85 153.951 37.309\"\n            fill={color}\n            variants={rightStripeVariants}\n          />\n        </motion.g>\n\n        {/* Fourth: Exclamation mark with overshoot */}\n        <motion.path\n          d=\"M88.469,38.939a3.158,3.158,0,0,1,2.29.838,3.058,3.058,0,0,1,0,4.269,3.521,3.521,0,0,1-4.56,0,2.827,2.827,0,0,1-.868-2.125,2.858,2.858,0,0,1,.868-2.134A3.11,3.11,0,0,1,88.469,38.939Zm2.339-3.079H86.13l-.662-19.666h6Z\"\n          fill={color}\n          variants={exclamationVariants}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/hud/warning.tsx"
    },
    {
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": "@lib/utils.ts"
    }
  ],
  "cssVars": {
    "light": {
      "bjork-bg": "#f7f3ea",
      "bjork-surface": "#fffcf6",
      "bjork-surface-muted": "rgba(250, 246, 237, 0.94)",
      "bjork-surface-hover": "#f5efe3",
      "bjork-surface-active": "#efe7d8",
      "bjork-panel": "#f8f2e7",
      "bjork-menu": "rgba(255, 252, 246, 0.98)",
      "bjork-field": "rgba(255, 252, 246, 0.96)",
      "bjork-field-muted": "rgba(248, 242, 231, 0.82)",
      "bjork-field-inset": "rgba(239, 231, 216, 0.72)",
      "bjork-error-bg": "#fff0e8",
      "bjork-text": "#171717",
      "bjork-text-strong": "rgba(23, 23, 23, 0.9)",
      "bjork-text-medium": "rgba(23, 23, 23, 0.72)",
      "bjork-text-muted": "rgba(23, 23, 23, 0.52)",
      "bjork-text-soft": "rgba(23, 23, 23, 0.36)",
      "bjork-text-faint": "rgba(23, 23, 23, 0.22)",
      "bjork-inverted-text": "#fff8f0",
      "bjork-border": "#eee6db",
      "bjork-border-muted": "#f5ede2",
      "bjork-border-strong": "#e1d7c8",
      "bjork-thumb": "#a49b8e",
      "bjork-track": "#ded6ca",
      "bjork-accent": "#ec7d43",
      "bjork-accent-hover": "#f0935f",
      "bjork-accent-soft": "rgba(236, 125, 67, 0.1)",
      "bjork-accent-muted": "rgba(236, 125, 67, 0.2)",
      "bjork-accent-badge": "rgba(236, 125, 67, 0.16)",
      "bjork-accent-badge-foreground": "#8d421d",
      "bjork-accent-foreground": "#3f2112",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)",
      "bjork-ring-offset": "#f7f3ea"
    },
    "dark": {
      "bjork-bg": "#111111",
      "bjork-surface": "#121212",
      "bjork-surface-muted": "rgba(22, 22, 22, 0.92)",
      "bjork-surface-hover": "#161616",
      "bjork-surface-active": "#202020",
      "bjork-panel": "#0d0d0d",
      "bjork-menu": "rgba(18, 18, 18, 0.98)",
      "bjork-field": "rgba(18, 18, 18, 0.95)",
      "bjork-field-muted": "rgba(18, 18, 18, 0.55)",
      "bjork-field-inset": "rgba(9, 9, 9, 0.75)",
      "bjork-error-bg": "#130d0a",
      "bjork-text": "#ededed",
      "bjork-text-strong": "rgba(237, 237, 237, 0.9)",
      "bjork-text-medium": "rgba(237, 237, 237, 0.72)",
      "bjork-text-muted": "rgba(237, 237, 237, 0.52)",
      "bjork-text-soft": "rgba(237, 237, 237, 0.36)",
      "bjork-text-faint": "rgba(237, 237, 237, 0.22)",
      "bjork-inverted-text": "#080808",
      "bjork-border": "#232323",
      "bjork-border-muted": "#1c1c1c",
      "bjork-border-strong": "#343434",
      "bjork-thumb": "#626262",
      "bjork-track": "#090909",
      "bjork-accent": "#ec5c13",
      "bjork-accent-hover": "#f07832",
      "bjork-accent-soft": "rgba(236, 92, 19, 0.12)",
      "bjork-accent-muted": "rgba(236, 92, 19, 0.24)",
      "bjork-accent-badge": "#ec5c13",
      "bjork-accent-badge-foreground": "#fff2ea",
      "bjork-accent-foreground": "#fff2ea",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)",
      "bjork-ring-offset": "#080808"
    }
  },
  "css": {
    ".bjork-range": {
      "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)"
    },
    ".bjork-range::-webkit-slider-thumb": {
      "appearance": "none",
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-range::-moz-range-thumb": {
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-layered-button-accent, .bjork-layered-button-raised": {
      "position": "relative",
      "isolation": "isolate",
      "appearance": "none",
      "overflow": "hidden",
      "border": "0",
      "border-radius": "13px",
      "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
      "transition": "filter 150ms ease-out, box-shadow 150ms ease-out"
    },
    ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": {
      "position": "absolute",
      "inset": "0",
      "pointer-events": "none",
      "content": "\"\"",
      "border": "1.5px solid transparent",
      "border-radius": "inherit",
      "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box",
      "mix-blend-mode": "overlay",
      "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "-webkit-mask-clip": "padding-box, border-box",
      "mask-clip": "padding-box, border-box",
      "-webkit-mask-origin": "padding-box, border-box",
      "mask-origin": "padding-box, border-box",
      "-webkit-mask-composite": "xor",
      "mask-composite": "exclude"
    },
    ".bjork-layered-button-accent": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000040",
      "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)"
    },
    ".bjork-layered-button-raised": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))"
    },
    ".dark .bjork-layered-button-raised": {
      "color": "oklch(0.2574 0.0056 265)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))"
    },
    "@media (hover: hover)": {
      ".bjork-layered-button-accent:hover": {
        "filter": "brightness(1.08) saturate(1.04)"
      },
      ".bjork-layered-button-raised:hover": {
        "filter": "brightness(1.08) contrast(0.9)"
      }
    }
  },
  "meta": {
    "collection": "HUD",
    "registryUrl": "https://ui.isaiahbjork.com/warning-graphic.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/warning-graphic.json"
  },
  "type": "registry:component"
}