{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "StarBorder-TS-TW",
	"title": "StarBorder",
	"description": "Animated star / sparkle border orbiting content with twinkle pulses.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "StarBorder/StarBorder.tsx",
			"content": "import React from 'react';\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={`relative inline-block overflow-hidden rounded-[20px] ${className}`}\n      {...(rest as any)}\n      style={{\n        padding: `${thickness}px 0`,\n        ...(rest as any).style\n      }}\n    >\n      <div\n        className=\"absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0\"\n        style={{\n          background: `radial-gradient(circle, ${color}, transparent 10%)`,\n          animationDuration: speed\n        }}\n      ></div>\n      <div\n        className=\"absolute w-[300%] h-[50%] opacity-70 top-[-10px] left-[-250%] rounded-full animate-star-movement-top z-0\"\n        style={{\n          background: `radial-gradient(circle, ${color}, transparent 10%)`,\n          animationDuration: speed\n        }}\n      ></div>\n      <div\n        className=\"relative z-1 border text-center text-[16px] py-[16px] px-[26px] rounded-[20px]\"\n        style={{ background: backgroundColor, color: textColor, borderColor }}\n      >\n        {children}\n      </div>\n    </Component>\n  );\n};\n\nexport default StarBorder;\n\n// tailwind.config.js\n// module.exports = {\n//   theme: {\n//     extend: {\n//       animation: {\n//         'star-movement-bottom': 'star-movement-bottom linear infinite alternate',\n//         'star-movement-top': 'star-movement-top linear infinite alternate',\n//       },\n//       keyframes: {\n//         'star-movement-bottom': {\n//           '0%': { transform: 'translate(0%, 0%)', opacity: '1' },\n//           '100%': { transform: 'translate(-100%, 0%)', opacity: '0' },\n//         },\n//         'star-movement-top': {\n//           '0%': { transform: 'translate(0%, 0%)', opacity: '1' },\n//           '100%': { transform: 'translate(100%, 0%)', opacity: '0' },\n//         },\n//       },\n//     },\n//   }\n// }\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}