{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-stages",
  "title": "Onboarding stages",
  "description": "Onboarding stages is a production-ready cards component from BJORK UI, packaged for shadcn registries.",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "framer-motion",
    "lucide-react",
    "tailwind-merge",
    "web-haptics"
  ],
  "files": [
    {
      "path": "components/bjork-ui/cards/onboarding-stages.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { useState, useEffect } from \"react\";\nimport { Check, Share2, Package, CreditCard, Truck } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { BjorkButton } from \"@/components/bjork-ui/primitives/button\";\n\ninterface StageItem {\n  id: string;\n  text: string;\n  completed: boolean;\n  icon: React.ReactNode;\n}\n\ninterface ThemeColors {\n  // Background gradients\n  outerGradient?: {\n    from: string;\n    to: string;\n  };\n  \n  // Header colors\n  headerBackground?: string;\n  headerText?: string;\n  percentageText?: string;\n  \n  // Card colors\n  cardBackground?: string;\n  dividerColor?: string;\n  \n  // Stage colors\n  stageTitle?: string;\n  completedBadge?: {\n    background: string;\n    text: string;\n  };\n  todoBadge?: {\n    background: string;\n    text: string;\n  };\n  \n  // Item colors\n  completedIcon?: {\n    background: string;\n    text: string;\n  };\n  completedText?: string;\n  pendingIcon?: string;\n  pendingText?: string;\n  \n  // Button colors\n  button?: {\n    background: string;\n    hover: string;\n    text: string;\n  };\n}\n\ninterface OnboardingStagesProps {\n  className?: string;\n  enableAnimations?: boolean;\n  onButtonClick?: () => void;\n  \n  // Customization props\n  title?: string;\n  percentage?: number;\n  buttonText?: string;\n  \n  // Theme customization\n  theme?: 'blue' | 'purple' | 'green' | 'orange' | 'custom';\n  customColors?: ThemeColors;\n  \n  // Animation controls\n  animationDuration?: number;\n  staggerDelay?: number;\n  \n  // Layout props\n  variant?: 'default' | 'compact' | 'expanded';\n  showPercentage?: boolean;\n  rounded?: 'sm' | 'md' | 'lg' | 'xl';\n}\n\nconst brandTheme: ThemeColors = {\n  outerGradient: { from: \"from-[#f4f1e9] dark:from-[#121212]\", to: \"to-[#eee9df] dark:to-[#090909]\" },\n  headerText: \"text-[#171717]/58 dark:text-[#ededed]/42\",\n  percentageText: \"text-[#bd4514] dark:text-[#d86a2c]\",\n  cardBackground:\n    \"bg-[#f4f1e9] dark:bg-[#121212] border border-[#d8d3c7] dark:border-[#161616] shadow-[inset_0_7px_14px_rgba(255,255,255,0.62),inset_0_0.5px_0.5px_rgba(255,255,255,0.9),0_18px_34px_-16px_rgba(55,47,36,0.28)] dark:shadow-[inset_0_7px_14px_rgba(255,255,255,0.03),inset_0_0.5px_0.5px_rgba(255,255,255,0.06),0_18px_34px_-16px_rgba(0,0,0,0.9)]\",\n  dividerColor: \"bg-[#d8d3c7] dark:bg-[#232323]\",\n  stageTitle: \"text-[#171717] dark:text-[#ededed]\",\n  completedBadge: { background: \"bg-[#8a7a60]/14\", text: \"text-[#6b5f4b] dark:text-[#b8aa91]\" },\n  todoBadge: { background: \"bg-[#ec5c13]/12\", text: \"text-[#bd4514] dark:text-[#d86a2c]\" },\n  completedIcon: { background: \"bg-[#ec5c13]\", text: \"text-[#080808]\" },\n  completedText: \"text-[#171717]/76 dark:text-[#ededed]/72\",\n  pendingIcon: \"text-[#bd4514] dark:text-[#d86a2c]\",\n  pendingText: \"text-[#171717]/52 dark:text-[#ededed]/42\",\n  button: { background: \"bg-[#ec5c13]\", hover: \"hover:bg-[#f06d27]\", text: \"text-[#080808]\" },\n};\n\n// Predefined theme configurations stay for API compatibility, but use the house style.\nconst themes: Record<string, ThemeColors> = {\n  blue: brandTheme,\n  purple: brandTheme,\n  green: brandTheme,\n  orange: brandTheme,\n};\n\nexport function OnboardingStages({\n  className,\n  enableAnimations = true,\n  onButtonClick,\n  title = \"ONBOARDING\",\n  percentage = 40,\n  buttonText = \"Let's Go\",\n  theme = 'blue',\n  customColors,\n  animationDuration = 1500,\n  staggerDelay = 0.12,\n  variant = 'expanded',\n  showPercentage = true,\n  rounded = 'xl',\n}: OnboardingStagesProps) {\n  const [displayPercentage, setDisplayPercentage] = useState(0);\n  const shouldReduceMotion = useReducedMotion();\n\n  // Get theme colors\n  const themeColors = customColors || themes[theme] || themes.blue;\n\n  // Responsive padding based on variant\n  const variantStyles = {\n    compact: \"p-0.5\",\n    default: \"p-1\",\n    expanded: \"p-2\",\n  };\n\n  // Rounded styles\n  const roundedStyles = {\n    sm: \"rounded-lg\",\n    md: \"rounded-xl\",\n    lg: \"rounded-2xl\",\n    xl: \"rounded-3xl\",\n  };\n\n  // Animate percentage counter on mount\n  useEffect(() => {\n    if (!enableAnimations || shouldReduceMotion) {\n      setDisplayPercentage(percentage);\n      return;\n    }\n\n    const startTime = Date.now();\n\n    const animateCounter = () => {\n      const elapsed = Date.now() - startTime;\n      const progress = Math.min(elapsed / animationDuration, 1);\n      \n      // More sophisticated easing with overshoot\n      const easeOut = 1 - Math.pow(1 - progress, 2.5);\n      const currentValue = Math.round(easeOut * percentage);\n      \n      setDisplayPercentage(currentValue);\n\n      if (progress < 1) {\n        requestAnimationFrame(animateCounter);\n      }\n    };\n\n    const timeout = setTimeout(animateCounter, 200);\n    return () => clearTimeout(timeout);\n  }, [enableAnimations, shouldReduceMotion, percentage, animationDuration]);\n\n  const stage1Items: StageItem[] = [\n    {\n      id: \"mission\",\n      text: \"Define your brand mission\",\n      completed: true,\n      icon: <Check className=\"w-4 h-4\" />,\n    },\n    {\n      id: \"logo\",\n      text: \"Upload your brand logo\",\n      completed: true,\n      icon: <Check className=\"w-4 h-4\" />,\n    },\n    {\n      id: \"colors\",\n      text: \"Select your brand colors\",\n      completed: true,\n      icon: <Check className=\"w-4 h-4\" />,\n    },\n  ];\n\n  const stage2Items: StageItem[] = [\n    {\n      id: \"social\",\n      text: \"Connect your social media accounts\",\n      completed: false,\n      icon: <Share2 className=\"w-4 h-4\" />,\n    },\n    {\n      id: \"product\",\n      text: \"Add your first product/service\",\n      completed: false,\n      icon: <Package className=\"w-4 h-4\" />,\n    },\n    {\n      id: \"payment\",\n      text: \"Set up your payment methods\",\n      completed: false,\n      icon: <CreditCard className=\"w-4 h-4\" />,\n    },\n    {\n      id: \"shipping\",\n      text: \"Configure your shipping options\",\n      completed: false,\n      icon: <Truck className=\"w-4 h-4\" />,\n    },\n  ];\n\n  const shouldAnimate = enableAnimations && !shouldReduceMotion;\n\n  // Enhanced animation variants with more sophisticated timing\n  const containerVariants = {\n    hidden: { \n      opacity: 0, \n      y: 30, \n      scale: 0.92,\n      rotateX: 10, // Subtle 3D entrance effect\n    },\n    visible: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      rotateX: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 280,\n        damping: 32,\n        mass: 0.9,\n        staggerChildren: Math.min(staggerDelay, 0.06),\n        delayChildren: 0.05,\n      },\n    },\n  };\n\n  const headerVariants = {\n    hidden: { opacity: 0, x: -30, scale: 0.9 },\n    visible: {\n      opacity: 1,\n      x: 0,\n      scale: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 350,\n        damping: 28,\n        mass: 0.7,\n      },\n    },\n  };\n\n  const itemVariants = {\n    hidden: { \n      opacity: 0, \n      x: -25, \n      scale: 0.95,\n      filter: \"blur(4px)\",\n    },\n    visible: {\n      opacity: 1,\n      x: 0,\n      scale: 1,\n      filter: \"blur(0px)\",\n      transition: {\n        type: \"spring\",\n        stiffness: 400,\n        damping: 28,\n        mass: 0.6,\n      },\n    },\n  };\n\n  const stageContainerVariants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: Math.min(staggerDelay * 0.8, 0.05),\n        delayChildren: 0.03,\n      },\n    },\n  };\n\n  const iconVariants = {\n    hidden: { scale: 0, rotate: -180, opacity: 0 },\n    visible: {\n      scale: 1,\n      rotate: 0,\n      opacity: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 500,\n        damping: 22,\n        mass: 0.5,\n      },\n    },\n  };\n\n  const buttonVariants = {\n    hidden: { \n      opacity: 0, \n      y: 25, \n      scale: 0.95,\n      rotateX: 5,\n    },\n    visible: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      rotateX: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 300,\n        damping: 30,\n        mass: 0.8,\n        delay: 0.25,\n      },\n    },\n  };\n\n  const percentageVariants = {\n    hidden: { scale: 0, opacity: 0, rotate: -10 },\n    visible: {\n      scale: 1,\n      opacity: 1,\n      rotate: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 400,\n        damping: 20,\n        mass: 0.6,\n        delay: 0.2,\n      },\n    },\n  };\n\n  return (\n    <motion.div \n      className={cn(\"relative\", className)}\n      initial={false}\n      animate=\"visible\"\n      variants={shouldAnimate ? containerVariants : {}}\n    >\n      {/* Outer card with customizable gradient */}\n      <div className={cn(\n        variantStyles[variant],\n        `bg-gradient-to-br ${themeColors.outerGradient?.from} ${themeColors.outerGradient?.to}`,\n        roundedStyles[rounded],\n        \"shadow-none\"\n      )}>\n        {/* Header */}\n        <motion.div\n          className=\"flex items-center justify-between px-4 py-2\"\n          variants={shouldAnimate ? headerVariants : {}}\n        >\n          <h1 className={cn(\n            \"text-md font-semibold tracking-wide\",\n            themeColors.headerText\n          )}>\n            {title}\n          </h1>\n          {showPercentage && (\n            <motion.div\n              className={cn(\"text-md font-bold\", themeColors.percentageText)}\n              variants={shouldAnimate ? percentageVariants : {}}\n            >\n              {displayPercentage}%\n            </motion.div>\n          )}\n        </motion.div>\n        \n        {/* Inner card */}\n        <motion.div\n          className={cn(\n            themeColors.cardBackground,\n            variant === 'compact' ? 'rounded-lg' : 'rounded-2xl',\n            \"overflow-hidden\"\n          )}\n          variants={shouldAnimate ? itemVariants : {}}\n        >\n          <div className={cn(\n            variant === 'compact' ? 'p-4 pt-3' : variant === 'expanded' ? 'p-10 pt-8' : 'p-8 pt-6'\n          )}>\n\n            {/* Stage 1 */}\n            <motion.div\n              className=\"mb-8\"\n              variants={shouldAnimate ? stageContainerVariants : {}}\n            >\n              <motion.div \n                className=\"flex items-center justify-between mb-6\"\n                variants={shouldAnimate ? itemVariants : {}}\n              >\n                <h2 className={cn(\"text-lg font-semibold tracking-[-0.02em]\", themeColors.stageTitle)}>\n                  STAGE 1\n                </h2>\n                <span className={cn(\n                  \"rounded-lg border border-[#d8d3c7] px-3 py-1 text-sm font-medium dark:border-[#232323]\",\n                  themeColors.completedBadge?.background,\n                  themeColors.completedBadge?.text\n                )}>\n                  Completed\n                </span>\n              </motion.div>\n\n              <motion.div \n                className=\"space-y-4\"\n                variants={shouldAnimate ? stageContainerVariants : {}}\n              >\n                {stage1Items.map((item, index) => (\n                  <motion.div\n                    key={item.id}\n                    className=\"flex items-center space-x-3\"\n                    variants={shouldAnimate ? itemVariants : {}}\n                    custom={index}\n                  >\n                    <motion.div\n                      className={cn(\n                        \"flex h-6 w-6 items-center justify-center rounded-lg\",\n                        themeColors.completedIcon?.background,\n                        themeColors.completedIcon?.text\n                      )}\n                      variants={shouldAnimate ? iconVariants : {}}\n                      whileHover={\n                        shouldAnimate\n                          ? {\n                              scale: 1.15,\n                              rotate: 10,\n                              transition: {\n                                type: \"spring\",\n                                stiffness: 500,\n                                damping: 20,\n                              },\n                            }\n                          : {}\n                      }\n                    >\n                      <Check className=\"w-3 h-3\" />\n                    </motion.div>\n                    <span className={cn(\"font-medium\", themeColors.completedText)}>\n                      {item.text}\n                    </span>\n                  </motion.div>\n                ))}\n              </motion.div>\n            </motion.div>\n\n            {/* Divider */}\n            <motion.div\n              className={cn(\"h-px mb-8\", themeColors.dividerColor)}\n              variants={shouldAnimate ? itemVariants : {}}\n            />\n\n            {/* Stage 2 */}\n            <motion.div\n              className=\"mb-8\"\n              variants={shouldAnimate ? stageContainerVariants : {}}\n            >\n              <motion.div \n                className=\"flex items-center justify-between mb-6\"\n                variants={shouldAnimate ? itemVariants : {}}\n              >\n                <h2 className={cn(\"text-lg font-semibold tracking-[-0.02em]\", themeColors.stageTitle)}>\n                  STAGE 2\n                </h2>\n                <span className={cn(\n                  \"rounded-lg border border-[#ec5c13]/18 px-3 py-1 text-sm font-medium\",\n                  themeColors.todoBadge?.background,\n                  themeColors.todoBadge?.text\n                )}>\n                  To Do\n                </span>\n              </motion.div>\n\n              <motion.div \n                className=\"space-y-4\"\n                variants={shouldAnimate ? stageContainerVariants : {}}\n              >\n                {stage2Items.map((item, index) => (\n                  <motion.div\n                    key={item.id}\n                    className=\"flex items-center space-x-3\"\n                    variants={shouldAnimate ? itemVariants : {}}\n                    custom={index}\n                  >\n                    <motion.div\n                      className={cn(\"mr-2 rounded-lg border border-[#d8d3c7] bg-[#eee9df] p-1.5 dark:border-[#232323] dark:bg-[#090909]\", themeColors.pendingIcon)}\n                      variants={shouldAnimate ? iconVariants : {}}\n                      whileHover={\n                        shouldAnimate\n                          ? {\n                              scale: 1.1,\n                              x: 2,\n                              transition: {\n                                type: \"spring\",\n                                stiffness: 400,\n                                damping: 25,\n                              },\n                            }\n                          : {}\n                      }\n                    >\n                      {item.icon}\n                    </motion.div>\n                    <span className={cn(\"font-medium\", themeColors.pendingText)}>\n                      {item.text}\n                    </span>\n                  </motion.div>\n                ))}\n              </motion.div>\n            </motion.div>\n\n            {/* Button */}\n            <BjorkButton\n              variant=\"accent\"\n              size=\"lg\"\n              className=\"w-full\"\n              variants={shouldAnimate ? buttonVariants : {}}\n              whileHover={\n                shouldAnimate\n                  ? {\n                      scale: 1.02,\n                      y: -3,\n                      boxShadow: \"0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)\",\n                      transition: {\n                        type: \"spring\",\n                        stiffness: 400,\n                        damping: 20,\n                      },\n                    }\n                  : {}\n              }\n              whileTap={shouldAnimate ? { scale: 0.98, y: -1 } : {}}\n              onClick={onButtonClick}\n            >\n              {buttonText}\n            </BjorkButton>\n          </div>\n        </motion.div>\n      </div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/cards/onboarding-stages.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/button.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 { useWebHaptics } from \"web-haptics/react\";\nimport type { HapticInput, TriggerOptions } from \"web-haptics\";\nimport { cn } from \"@/lib/utils\";\n\nconst bjorkButtonVariants = cva(\n  \"inline-flex shrink-0 transform-gpu items-center justify-center gap-2 whitespace-nowrap rounded-[13px] text-sm font-medium tracking-[-0.01em] outline-none backdrop-blur-md transition-[background-color,border-color,color,box-shadow,opacity] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-[#ec5c13]/45 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bjork-ring-offset)] disabled:pointer-events-none disabled:opacity-35 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border border-transparent bg-[var(--bjork-field)] text-[color:var(--bjork-text)] shadow-[var(--bjork-shadow-surface)] hover:bg-[var(--bjork-surface-hover)]\",\n        secondary:\n          \"border border-[color:var(--bjork-border)] bg-[var(--bjork-surface-active)] text-[color:var(--bjork-text)] shadow-[var(--bjork-shadow-soft)] hover:bg-[var(--bjork-surface-hover)]\",\n        outline:\n          \"border border-[color:var(--bjork-border)] bg-[var(--bjork-field-inset)] text-[color:var(--bjork-text-strong)] shadow-[var(--bjork-shadow-soft)] hover:border-[color:var(--bjork-border-strong)] hover:bg-[var(--bjork-surface)] hover:text-[color:var(--bjork-text)]\",\n        ghost:\n          \"border border-transparent bg-transparent text-[color:var(--bjork-text-muted)] hover:bg-[var(--bjork-surface-hover)] hover:text-[color:var(--bjork-text)]\",\n        quiet:\n          \"border border-transparent bg-[var(--bjork-field-muted)] text-[color:var(--bjork-text-soft)] hover:bg-[var(--bjork-surface-hover)] hover:text-[color:var(--bjork-text-medium)]\",\n        accent:\n          \"bjork-layered-button-accent tracking-tight text-white\",\n        raised:\n          \"bjork-layered-button-raised tracking-tight\",\n      },\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-[45px] px-4\",\n        lg: \"h-12 px-5 text-[15px]\",\n        icon: \"size-[45px] p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface BjorkButtonProps\n  extends Omit<HTMLMotionProps<\"button\">, \"ref\" | \"size\">,\n    VariantProps<typeof bjorkButtonVariants> {\n  haptics?: boolean;\n  hapticPattern?: HapticInput;\n  hapticOptions?: TriggerOptions;\n}\n\nexport function BjorkButton({\n  className,\n  variant,\n  size,\n  disabled,\n  haptics = true,\n  hapticPattern = \"light\",\n  hapticOptions,\n  onPointerDown,\n  ...props\n}: BjorkButtonProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const { trigger } = useWebHaptics();\n\n  const handlePointerDown = React.useCallback(\n    (event: React.PointerEvent<HTMLButtonElement>) => {\n      if (!disabled && haptics) {\n        void trigger(hapticPattern, hapticOptions);\n      }\n\n      onPointerDown?.(event);\n    },\n    [disabled, hapticOptions, hapticPattern, haptics, onPointerDown, trigger],\n  );\n\n  return (\n    <motion.button\n      data-slot=\"bjork-button\"\n      className={cn(bjorkButtonVariants({ variant, size, className }))}\n      disabled={disabled}\n      onPointerDown={handlePointerDown}\n      whileHover={disabled || shouldReduceMotion ? undefined : { scale: 1.05 }}\n      whileTap={disabled || shouldReduceMotion ? undefined : { scale: 0.95 }}\n      transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n      {...props}\n    />\n  );\n}\n\nexport { bjorkButtonVariants };\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/primitives/button.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/onboarding-stages.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/onboarding-stages.json"
  },
  "type": "registry:component"
}