{
  "name": "shimmer",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "shimmer.tsx",
      "content": "// components/core/shimmer-skeleton.tsx\n'use client';\n\nimport * as React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nexport type ShimmerVariant = 'line' | 'avatar' | 'card' | 'rect' | 'list';\n\nexport type ShimmerProps = {\n  /** Which visual variant to render. */\n  variant?: ShimmerVariant;\n\n  /** Number of repeated items (useful for lists). */\n  count?: number;\n\n  /** Width as Tailwind friendly string or number (px). Applied to top-level when relevant. */\n  width?: string | number;\n\n  /** Height as Tailwind friendly string or number (px). Applied to top-level when relevant. */\n  height?: string | number;\n\n  /** Rounded corners style. */\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n\n  /** Tailwind color for base (e.g. 'bg-zinc-200 dark:bg-zinc-700') - accepts classes. */\n  baseClassName?: string;\n\n  /** Tailwind color for shimmer highlight (applied via gradient stop). */\n  highlightClassName?: string;\n\n  /** Animation speed multiplier (1 = default). */\n  speed?: number;\n\n  /** Gap between items when count > 1 (px). */\n  gap?: number;\n\n  /** Custom className on each item. */\n  className?: string;\n\n  /** When true, makes element accessible for screen readers with label. */\n  ariaLabel?: string | null;\n\n  /** If true, use reduced-motion friendly static style. */\n  reduceMotion?: boolean;\n};\n\nconst ROUND_MAP: Record<string, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  full: 'rounded-full',\n};\n\nfunction pxOrString(v?: string | number) {\n  if (v === undefined) return undefined;\n  return typeof v === 'number' ? `${v}px` : v;\n}\n\n/**\n * Shimmer/Skeleton component\n *\n * - Presentational, repeatable, accessible\n * - Use variant + count to produce multi-line lists/cards etc\n */\nexport default function Shimmer({\n  variant = 'line',\n  count = 1,\n  width,\n  height,\n  rounded = 'md',\n  baseClassName = 'bg-zinc-200 dark:bg-zinc-700',\n  //   highlightClassName = 'bg-white/70',\n  speed = 1,\n  gap = 12,\n  className,\n  ariaLabel = null,\n  reduceMotion = false,\n}: ShimmerProps) {\n  // animation duration in seconds\n  const duration = Math.max(0.6, 1.6 / Math.max(0.25, speed));\n\n  const itemStyle: React.CSSProperties = {\n    width: pxOrString(width),\n    height: pxOrString(height),\n    marginBottom: count > 1 ? `${gap}px` : undefined,\n  };\n\n  // helper render single item depending on variant\n  const renderItem = (i: number) => {\n    const roundedCls = ROUND_MAP[rounded] ?? ROUND_MAP.md;\n    const commonInner = (\n      <div\n        className={cn(\n          'relative overflow-hidden',\n          roundedCls,\n          baseClassName,\n          'h-full w-full',\n          className\n        )}\n        style={itemStyle}\n        aria-hidden={ariaLabel ? undefined : true}\n      >\n        {/* shimmer gradient overlay */}\n        {!reduceMotion ? (\n          <motion.div\n            className={cn(\n              'pointer-events-none absolute inset-0',\n              // gradient using highlight class for center stop; we keep rest transparent\n              'bg-gradient-to-r from-transparent via-white/50 to-transparent'\n            )}\n            initial={{ x: '-120%' }}\n            animate={{ x: '120%' }}\n            transition={{\n              repeat: Infinity,\n              ease: 'linear',\n              duration,\n            }}\n            style={{ mixBlendMode: 'overlay' }}\n          />\n        ) : null}\n        {/* A subtle overlay stripe for depth */}\n        <div className='absolute inset-0 opacity-20' />\n      </div>\n    );\n\n    switch (variant) {\n      case 'avatar':\n        return (\n          <div\n            key={i}\n            className={cn('flex items-center', i > 0 ? 'mt-[12px]' : '')}\n            style={itemStyle}\n          >\n            <div\n              className={cn('flex-shrink-0', roundedCls, baseClassName)}\n              style={{ width: 56, height: 56 }}\n            />\n            <div className='ml-4 flex-1'>\n              <div\n                className={cn('mb-2 h-3', baseClassName, ROUND_MAP.sm)}\n                style={{ width: '40%' }}\n              />\n              <div\n                className={cn('h-3', baseClassName, ROUND_MAP.sm)}\n                style={{ width: '70%' }}\n              />\n            </div>\n          </div>\n        );\n      case 'card':\n        return (\n          <div\n            key={i}\n            className={cn('p-4', 'shadow-sm', roundedCls, 'bg-white/0')}\n          >\n            <div className='mb-3' style={{ height: 160, borderRadius: 8 }}>\n              {commonInner}\n            </div>\n            <div className='space-y-2'>\n              <div\n                className={cn('h-4', baseClassName, ROUND_MAP.sm)}\n                style={{ width: '50%' }}\n              />\n              <div\n                className={cn('h-3', baseClassName, ROUND_MAP.sm)}\n                style={{ width: '80%' }}\n              />\n              <div\n                className={cn('h-3', baseClassName, ROUND_MAP.sm)}\n                style={{ width: '90%' }}\n              />\n            </div>\n          </div>\n        );\n      case 'rect':\n        return (\n          <div\n            key={i}\n            className={cn('inline-block', roundedCls)}\n            style={itemStyle}\n          >\n            {commonInner}\n          </div>\n        );\n      case 'list':\n        return (\n          <div key={i} className='flex items-start space-x-4'>\n            <div\n              className={cn(\n                'h-12 w-12 flex-shrink-0',\n                baseClassName,\n                roundedCls\n              )}\n            />\n            <div className='flex-1'>\n              <div\n                className={cn('mb-2 h-3 w-1/3', baseClassName, ROUND_MAP.sm)}\n              />\n              <div\n                className={cn('mb-2 h-3 w-full', baseClassName, ROUND_MAP.sm)}\n              />\n              <div className={cn('h-3 w-3/4', baseClassName, ROUND_MAP.sm)} />\n            </div>\n          </div>\n        );\n      case 'line':\n      default:\n        return (\n          <div key={i} style={itemStyle}>\n            <div className={cn('h-3', baseClassName, roundedCls)} />\n          </div>\n        );\n    }\n  };\n\n  // container role/aria\n  const roleProps = ariaLabel\n    ? { role: 'status', 'aria-label': ariaLabel }\n    : { 'aria-hidden': true };\n\n  // render repeated items\n  const items = Array.from({ length: Math.max(1, count) }, (_, i) =>\n    renderItem(i)\n  );\n\n  return (\n    <div {...(roleProps as any)} className={cn('select-none', 'w-full')}>\n      {variant === 'list' ? (\n        <div className='space-y-4'>{items}</div>\n      ) : (\n        <div>{items}</div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}