{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-card-status-list",
  "title": "Animated card status list",
  "description": "Animated card status list is a production-ready cards component from BJORK UI, packaged for shadcn registries.",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "framer-motion",
    "lucide-react",
    "next-themes",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/bjork-ui/cards/animated-card-status-list.tsx",
      "content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence, useReducedMotion } from \"framer-motion\";\nimport { ChevronLeft, Plus } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { cn } from \"@/lib/utils\";\nimport { BjorkCard } from \"@/components/bjork-ui/primitives/card\";\n\nexport interface Card {\n  id: string;\n  title: string;\n  status: \"completed\" | \"updates-found\" | \"syncing\";\n}\n\ninterface AnimatedCardStatusListProps {\n  title?: string;\n  cards?: Card[];\n  onSynchronize?: (cardId: string) => void;\n  onAddCard?: () => void;\n  onBack?: () => void;\n  className?: string;\n}\n\nconst defaultCards: Card[] = [\n  { id: \"1\", title: \"Import products from your store\", status: \"completed\" },\n  { id: \"2\", title: \"Unique selling points\", status: \"completed\" },\n  { id: \"3\", title: \"Primary customers\", status: \"completed\" },\n  { id: \"4\", title: \"Common words & phrases\", status: \"updates-found\" },\n  { id: \"5\", title: \"Company overview and offer details\", status: \"syncing\" },\n];\n\nconst statusListPalettes = {\n  dark: {\n    card: \"border-[#161616] bg-[#121212] text-[#ededed]\",\n    title: \"text-[#ededed]\",\n    iconButton:\n      \"border-[#232323] bg-[#090909] text-[#ededed]/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#141414] hover:text-[#ededed]\",\n    row: \"border-[#161616] bg-[#121212] text-[#ededed] shadow-[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)] hover:border-[#232323] hover:bg-[#161616]\",\n    rowTitle: \"text-[#ededed]\",\n    statusText: \"text-[#ededed]/42\",\n    syncButton:\n      \"border-[#2a2a2a] bg-[#090909] text-[#ededed] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#151515]\",\n    updatesGradient: \"from-[#ec5c13]/14 to-transparent\",\n    syncingGradient: \"from-[#22c55e]/12 to-transparent\",\n    spinnerActive: \"#ffffff\",\n    spinnerInactive: \"#6b7280\",\n  },\n  light: {\n    card:\n      \"border-[#d8d3c7] bg-[#f4f1e9] text-[#171717] shadow-[inset_0_7px_14px_rgba(255,255,255,0.62),inset_0_0.5px_0.5px_rgba(255,255,255,0.9),0_14px_24px_-10px_rgba(55,47,36,0.2)]\",\n    title: \"text-[#171717]\",\n    iconButton:\n      \"border-[#d8d3c7] bg-[#eee9df] text-[#171717]/68 shadow-[inset_0_1px_0_rgba(255,255,255,0.72)] hover:bg-[#e7e1d5] hover:text-[#171717]\",\n    row: \"border-[#d8d3c7] bg-[#f4f1e9] text-[#171717] shadow-[inset_0_7px_14px_rgba(255,255,255,0.58),inset_0_0.5px_0.5px_rgba(255,255,255,0.82),0_12px_20px_-14px_rgba(55,47,36,0.34)] hover:border-[#cbc3b5] hover:bg-[#eee9df]\",\n    rowTitle: \"text-[#171717]\",\n    statusText: \"text-[#171717]/44\",\n    syncButton:\n      \"border-[#d2c8b9] bg-[#eee9df] text-[#171717] shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] hover:bg-[#e7e1d5]\",\n    updatesGradient: \"from-[#ec5c13]/12 to-transparent\",\n    syncingGradient: \"from-[#22c55e]/10 to-transparent\",\n    spinnerActive: \"#171717\",\n    spinnerInactive: \"#9a9286\",\n  },\n};\n\ntype StatusListPalette = (typeof statusListPalettes)[\"dark\"];\n\nexport function AnimatedCardStatusList({\n  title = \"Fundamentals\",\n  cards: initialCards = defaultCards,\n  onSynchronize,\n  onAddCard,\n  onBack,\n  className = \"\"\n}: AnimatedCardStatusListProps = {}) {\n  const { resolvedTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n  const [cards, setCards] = useState<Card[]>(initialCards);\n  const [hoveredCard, setHoveredCard] = useState<string | null>(null);\n  const [activeDashIndex, setActiveDashIndex] = useState(0);\n  const shouldReduceMotion = useReducedMotion();\n  const palette: StatusListPalette =\n    mounted && resolvedTheme === \"light\"\n      ? statusListPalettes.light\n      : statusListPalettes.dark;\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Cycle through dash indices every 100ms\n  useEffect(() => {\n    if (shouldReduceMotion) return;\n    \n    const interval = setInterval(() => {\n      setActiveDashIndex(prev => (prev + 1) % 8);\n    }, 100);\n    \n    return () => clearInterval(interval);\n  }, [shouldReduceMotion]);\n\n  const handleSynchronize = (cardId: string) => {\n    // Call external handler if provided\n    if (onSynchronize) {\n      onSynchronize(cardId);\n    }\n\n    // Update internal state\n    setCards(prev => prev.map(card => \n      card.id === cardId ? { ...card, status: \"syncing\" as const } : card\n    ));\n\n    // Simulate sync completion after 2.5 seconds\n    setTimeout(() => {\n      setCards(prev => prev.map(card => \n        card.id === cardId ? { ...card, status: \"completed\" as const } : card\n      ));\n    }, 2500);\n  };\n\n  const handleAddCard = () => {\n    if (onAddCard) {\n      onAddCard();\n    }\n  };\n\n  const handleBack = () => {\n    if (onBack) {\n      onBack();\n    }\n  };\n\n  const getStatusIcon = (status: Card[\"status\"]) => {\n    switch (status) {\n      case \"completed\":\n        return (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" className=\"drop-shadow-sm\">\n            <circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#22c55e\" />\n            <path \n              d=\"M5 8l2.5 2.5 3.5-4\" \n              stroke=\"white\" \n              strokeWidth=\"1.5\" \n              fill=\"none\" \n              strokeLinecap=\"round\" \n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        );\n      case \"updates-found\":\n        return (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path \n              d=\"M8 1.5L14.5 13H1.5L8 1.5Z\" \n              fill=\"#eab308\" \n              stroke=\"#eab308\" \n              strokeWidth=\"1\"\n              strokeLinejoin=\"round\"\n            />\n            <path \n              d=\"M8 6v3M8 11h0\" \n              stroke=\"white\" \n              strokeWidth=\"1.5\" \n              strokeLinecap=\"round\"\n            />\n          </svg>\n        );\n      case \"syncing\":\n        return (\n          <svg \n            width=\"16\" \n            height=\"16\" \n            viewBox=\"0 0 16 16\"\n          >\n            {/* Create 8 dashes around the circle */}\n            {Array.from({ length: 8 }).map((_, index) => {\n              const angle = (index * 45) - 90; // Start from top, -90 to offset\n              const radian = (angle * Math.PI) / 180;\n              const radius = 6;\n              const dashLength = 1.8;\n              \n              // Calculate start and end points for each dash\n              const startX = 8 + (radius - dashLength/2) * Math.cos(radian);\n              const startY = 8 + (radius - dashLength/2) * Math.sin(radian);\n              const endX = 8 + (radius + dashLength/2) * Math.cos(radian);\n              const endY = 8 + (radius + dashLength/2) * Math.sin(radian);\n              \n              // Use the activeDashIndex to determine which dash is white\n              const isActive = index === activeDashIndex;\n              \n              return (\n                <line\n                  key={index}\n                  x1={startX}\n                  y1={startY}\n                  x2={endX}\n                  y2={endY}\n                  stroke={isActive ? palette.spinnerActive : palette.spinnerInactive}\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                />\n              );\n            })}\n          </svg>\n        );\n    }\n  };\n\n  const getStatusText = (status: Card[\"status\"]) => {\n    switch (status) {\n      case \"updates-found\":\n        return \"UPDATES FOUND\";\n      case \"syncing\":\n        return \"SYNCING\";\n      default:\n        return null;\n    }\n  };\n\n  const getGradientClass = (status: Card[\"status\"]) => {\n    switch (status) {\n      case \"updates-found\":\n        return palette.updatesGradient;\n      case \"syncing\":\n        return palette.syncingGradient;\n      default:\n        return \"\";\n    }\n  };\n\n  // Sort cards: completed first, then others\n  const sortedCards = [...cards].sort((a, b) => {\n    if (a.status === \"completed\" && b.status !== \"completed\") return -1;\n    if (a.status !== \"completed\" && b.status === \"completed\") return 1;\n    return 0;\n  });\n\n  return (\n    <div className={cn(\"mx-auto w-full max-w-2xl p-6\", className)}>\n      <BjorkCard variant=\"elevated\" padding=\"lg\" className={cn(\"rounded-2xl\", palette.card)}>\n        {/* Header */}\n        <div className=\"flex items-center justify-between mb-6\">\n          <motion.button\n            onClick={handleBack}\n            className={cn(\n              \"cursor-pointer rounded-lg border p-2 transition-colors\",\n              palette.iconButton\n            )}\n            whileHover={shouldReduceMotion ? undefined : { scale: 1.05 }}\n            whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}\n            aria-label=\"Go back\"\n          >\n            <ChevronLeft className=\"w-4 h-4\" />\n          </motion.button>\n          \n          <h1 className={cn(\"text-xl font-medium tracking-[-0.02em]\", palette.title)}>{title}</h1>\n          \n          <motion.button\n            onClick={handleAddCard}\n            className={cn(\n              \"cursor-pointer rounded-lg border p-2 transition-colors\",\n              palette.iconButton\n            )}\n            whileHover={shouldReduceMotion ? undefined : { scale: 1.05 }}\n            whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}\n            aria-label=\"Add card\"\n          >\n            <Plus className=\"w-4 h-4\" />\n          </motion.button>\n        </div>\n\n        {/* Cards */}\n        <motion.div \n          className=\"space-y-3\"\n          variants={{\n            visible: {\n              transition: {\n                staggerChildren: 0.08,\n                delayChildren: 0.1,\n              }\n            }\n          }}\n          initial=\"hidden\"\n          animate=\"visible\"\n        >\n          <AnimatePresence>\n            {sortedCards.map((card) => (\n              <motion.div\n                key={card.id}\n                layout\n                layoutId={card.id}\n                variants={{\n                  hidden: { opacity: 0, y: 20, scale: 0.98 },\n                  visible: { \n                    opacity: 1, \n                    y: 0, \n                    scale: 1,\n                    transition: { \n                      type: \"spring\", \n                      stiffness: 300, \n                      damping: 30,\n                      duration: shouldReduceMotion ? 0.2 : undefined\n                    }\n                  }\n                }}\n                exit={{ \n                  opacity: 0, \n                  y: -20, \n                  scale: 0.98,\n                  transition: { \n                    duration: shouldReduceMotion ? 0.15 : 0.2,\n                    ease: \"easeInOut\"\n                  }\n                }}\n                transition={{\n                  layout: { \n                    type: \"spring\", \n                    stiffness: 400, \n                    damping: 30,\n                    duration: shouldReduceMotion ? 0.2 : 0.5\n                  }\n                }}\n                className=\"relative cursor-pointer\"\n                onMouseEnter={() => setHoveredCard(card.id)}\n                onMouseLeave={() => setHoveredCard(null)}\n              >\n                <BjorkCard\n                  variant=\"interactive\"\n                  padding=\"none\"\n                  className={cn(\"relative rounded-xl p-4\", palette.row)}\n                  whileHover={{\n                    y: -1,\n                    transition: { type: \"spring\", stiffness: 400, damping: 25 }\n                  }}\n                  animate={\n                    card.status === \"completed\" ? {\n                      scale: [1, 1.02, 1],\n                      transition: {\n                        duration: shouldReduceMotion ? 0 : 0.6,\n                        ease: [0.04, 0.62, 0.23, 0.98],\n                        times: [0, 0.3, 1],\n                      }\n                    } : {}\n                  }\n                >\n                  {/* Gradient overlay for status */}\n                  {(card.status === \"updates-found\" || card.status === \"syncing\") && (\n                    <div className={`absolute inset-0 bg-gradient-to-l ${getGradientClass(card.status)} pointer-events-none`} \n                         style={{ \n                           backgroundSize: \"40% 100%\", \n                           backgroundPosition: \"right\",\n                           backgroundRepeat: \"no-repeat\"\n                         }} \n                    />\n                  )}\n                  \n                  <div className=\"relative flex items-center justify-between\">\n                    <div className=\"flex items-center gap-3\">\n                      {/* Status Icon */}\n                      <div className=\"w-5 h-5 flex items-center justify-center overflow-hidden\">\n                        <AnimatePresence mode=\"wait\">\n                          <motion.div\n                            key={card.status}\n                            initial={{ \n                              x: card.status === \"completed\" ? 24 : 0,\n                              scale: 0.8, \n                              opacity: 0 \n                            }}\n                            animate={{ \n                              x: 0,\n                              scale: 1, \n                              opacity: 1 \n                            }}\n                            exit={{ \n                              x: card.status === \"syncing\" ? -24 : 0,\n                              scale: 0.8, \n                              opacity: 0 \n                            }}\n                            transition={{ \n                              type: \"spring\", \n                              stiffness: 400, \n                              damping: 25,\n                              duration: shouldReduceMotion ? 0.15 : undefined\n                            }}\n                          >\n                            {getStatusIcon(card.status)}\n                          </motion.div>\n                        </AnimatePresence>\n                      </div>\n                      \n                      {/* Title */}\n                      <span className={cn(\"truncate\", palette.rowTitle)}>{card.title}</span>\n                    </div>\n\n                    {/* Status Text or Synchronize Button */}\n                    <div className=\"flex items-center min-w-0 h-8\">\n                      <AnimatePresence mode=\"wait\">\n                        {card.status === \"updates-found\" && hoveredCard === card.id ? (\n                          <motion.button\n                            key=\"sync-button\"\n                            initial={{ scale: 0, opacity: 0 }}\n                            animate={{ scale: 1, opacity: 1 }}\n                            exit={{ scale: 0, opacity: 0 }}\n                            whileHover={{ \n                              scale: 1.02,\n                              transition: { type: \"spring\", stiffness: 400, damping: 25 }\n                            }}\n                            whileTap={{ scale: 0.98 }}\n                            transition={{ \n                              type: \"spring\", \n                              stiffness: 400, \n                              damping: 25,\n                              duration: shouldReduceMotion ? 0.15 : undefined\n                            }}\n                            onClick={() => handleSynchronize(card.id)}\n                            className={cn(\n                              \"cursor-pointer whitespace-nowrap rounded-md border px-2.5 py-1 text-xs font-medium transition-colors\",\n                              palette.syncButton\n                            )}\n                          >\n                            Synchronize\n                          </motion.button>\n                        ) : getStatusText(card.status) ? (\n                          <motion.span\n                            key=\"status-text\"\n                            initial={{ opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0 }}\n                            className={cn(\n                              \"whitespace-nowrap font-mono text-xs font-medium tracking-wider\",\n                              palette.statusText\n                            )}\n                          >\n                            {getStatusText(card.status)}\n                          </motion.span>\n                        ) : null}\n                      </AnimatePresence>\n                    </div>\n                  </div>\n                </BjorkCard>\n              </motion.div>\n            ))}\n          </AnimatePresence>\n        </motion.div>\n      </BjorkCard>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/cards/animated-card-status-list.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"
    },
    {
      "path": "components/bjork-ui/primitives/card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, useReducedMotion, type HTMLMotionProps } from \"framer-motion\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst bjorkCardVariants = cva(\n  \"relative flex flex-col overflow-hidden rounded-[20px] border text-[color:var(--bjork-text)] outline-none transition-[background-color,border-color,box-shadow,opacity,transform] duration-300 focus-visible:ring-2 focus-visible:ring-[#ec5c13]/45 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bjork-ring-offset)]\",\n  {\n    variants: {\n      variant: {\n        surface:\n          \"border-[color:var(--bjork-border-muted)] bg-[var(--bjork-surface)] shadow-[var(--bjork-shadow-surface)]\",\n        elevated:\n          \"border-[color:var(--bjork-border-muted)] bg-[var(--bjork-surface)] shadow-[var(--bjork-shadow-surface)]\",\n        quiet:\n          \"border-[color:var(--bjork-border-muted)] bg-[var(--bjork-panel)] shadow-[var(--bjork-shadow-soft)]\",\n        interactive:\n          \"cursor-pointer border-[color:var(--bjork-border-muted)] bg-[var(--bjork-surface)] shadow-[var(--bjork-shadow-surface)] hover:border-[color:var(--bjork-border)] hover:bg-[var(--bjork-surface-hover)]\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-3\",\n        md: \"p-4\",\n        lg: \"p-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"surface\",\n      padding: \"md\",\n    },\n  },\n);\n\nexport interface BjorkCardProps\n  extends Omit<HTMLMotionProps<\"div\">, \"ref\">,\n    VariantProps<typeof bjorkCardVariants> {}\n\nexport function BjorkCard({\n  className,\n  variant,\n  padding,\n  ...props\n}: BjorkCardProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const isInteractive = variant === \"interactive\" || props.role === \"button\";\n\n  return (\n    <motion.div\n      data-slot=\"bjork-card\"\n      className={cn(bjorkCardVariants({ variant, padding, className }))}\n      whileHover={isInteractive && !shouldReduceMotion ? { y: -2, scale: 1.005 } : undefined}\n      whileTap={isInteractive && !shouldReduceMotion ? { scale: 0.995 } : undefined}\n      transition={{ type: \"spring\", stiffness: 260, damping: 28, mass: 0.8 }}\n      {...props}\n    />\n  );\n}\n\nexport function BjorkCardHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"bjork-card-header\"\n      className={cn(\"flex items-start justify-between gap-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function BjorkCardTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"bjork-card-title\"\n      className={cn(\"text-base font-semibold leading-none tracking-[-0.02em] text-[color:var(--bjork-text)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function BjorkCardDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"bjork-card-description\"\n      className={cn(\"text-sm leading-6 text-[color:var(--bjork-text-soft)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function BjorkCardContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"bjork-card-content\"\n      className={cn(\"mt-5 text-[color:var(--bjork-text-medium)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function BjorkCardFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"bjork-card-footer\"\n      className={cn(\"mt-5 flex items-center gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { bjorkCardVariants };\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/primitives/card.tsx"
    }
  ],
  "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": "Cards",
    "registryUrl": "https://ui.isaiahbjork.com/animated-card-status-list.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/animated-card-status-list.json"
  },
  "type": "registry:component"
}