{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "StarBorder-TS-CSS",
	"title": "StarBorder",
	"description": "Animated star / sparkle border orbiting content with twinkle pulses.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "StarBorder.css",
			"target": "@components/StarBorder.css",
			"content": ".star-border-container {\n  display: inline-block;\n  position: relative;\n  border-radius: 20px;\n  overflow: hidden;\n}\n\n.border-gradient-bottom {\n  position: absolute;\n  width: 300%;\n  height: 50%;\n  opacity: 0.7;\n  bottom: -12px;\n  right: -250%;\n  border-radius: 50%;\n  animation: star-movement-bottom linear infinite alternate;\n  z-index: 0;\n}\n\n.border-gradient-top {\n  position: absolute;\n  opacity: 0.7;\n  width: 300%;\n  height: 50%;\n  top: -12px;\n  left: -250%;\n  border-radius: 50%;\n  animation: star-movement-top linear infinite alternate;\n  z-index: 0;\n}\n\n.inner-content {\n  position: relative;\n  border: 1px solid #222;\n  background: #000;\n  color: white;\n  font-size: 16px;\n  text-align: center;\n  padding: 16px 26px;\n  border-radius: 20px;\n  z-index: 1;\n}\n\n@keyframes star-movement-bottom {\n  0% {\n    transform: translate(0%, 0%);\n    opacity: 1;\n  }\n  100% {\n    transform: translate(-100%, 0%);\n    opacity: 0;\n  }\n}\n\n@keyframes star-movement-top {\n  0% {\n    transform: translate(0%, 0%);\n    opacity: 1;\n  }\n  100% {\n    transform: translate(100%, 0%);\n    opacity: 0;\n  }\n}\n"
		},
		{
			"type": "registry:component",
			"path": "StarBorder.tsx",
			"content": "import React from 'react';\nimport './StarBorder.css';\n\ntype StarBorderProps<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & {\n  as?: T;\n  className?: string;\n  children?: React.ReactNode;\n  color?: string;\n  speed?: React.CSSProperties['animationDuration'];\n  thickness?: number;\n  backgroundColor?: string;\n  textColor?: string;\n  borderColor?: string;\n};\n\nconst StarBorder = <T extends React.ElementType = 'button'>({\n  as,\n  className = '',\n  color = 'white',\n  speed = '6s',\n  thickness = 1,\n  backgroundColor = '#000000',\n  textColor = '#ffffff',\n  borderColor = '#222222',\n  children,\n  ...rest\n}: StarBorderProps<T>) => {\n  const Component = as || 'button';\n\n  return (\n    <Component\n      className={`star-border-container ${className}`}\n      {...(rest as any)}\n      style={{\n        padding: `${thickness}px 0`,\n        ...(rest as any).style\n      }}\n    >\n      <div\n        className=\"border-gradient-bottom\"\n        style={{\n          background: `radial-gradient(circle, ${color}, transparent 10%)`,\n          animationDuration: speed\n        }}\n      ></div>\n      <div\n        className=\"border-gradient-top\"\n        style={{\n          background: `radial-gradient(circle, ${color}, transparent 10%)`,\n          animationDuration: speed\n        }}\n      ></div>\n      <div className=\"inner-content\" style={{ background: backgroundColor, color: textColor, borderColor }}>\n        {children}\n      </div>\n    </Component>\n  );\n};\n\nexport default StarBorder;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}