astro-component-kit 0.0.1 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (353) hide show
  1. package/README.md +218 -119
  2. package/package.json +28 -55
  3. package/src/components/index.ts +207 -0
  4. package/src/components/lib/AnimatedGalaxy.astro +185 -0
  5. package/src/components/lib/Galaxy3D.astro +308 -0
  6. package/src/components/lib/GlassNavbar.astro +13 -11
  7. package/src/components/lib/LogoWithGalaxy.astro +63 -0
  8. package/src/components/lib/buttons/3dPushButton.astro +9 -0
  9. package/src/components/lib/buttons/AnimatedIconButton.astro +10 -0
  10. package/src/components/lib/buttons/BorderDrawButton.astro +9 -0
  11. package/src/components/lib/buttons/CyberpunkButton.astro +10 -0
  12. package/src/components/lib/buttons/DoubleBorderButton.astro +9 -0
  13. package/src/components/lib/buttons/GhostOutlineButton.astro +10 -0
  14. package/src/components/lib/buttons/GlassButton.astro +13 -32
  15. package/src/components/lib/buttons/GlowButton.astro +9 -0
  16. package/src/components/lib/buttons/LiquidButton.astro +9 -0
  17. package/src/components/lib/buttons/LoadingButton.astro +10 -0
  18. package/src/components/lib/buttons/MagneticButton.astro +10 -0
  19. package/src/components/lib/buttons/MinimalPillButton.astro +9 -0
  20. package/src/components/lib/buttons/NeumorphicButton.astro +10 -0
  21. package/src/components/lib/buttons/PulseButton.astro +10 -0
  22. package/src/components/lib/buttons/RetroArcadeButton.astro +9 -0
  23. package/src/components/lib/buttons/RetroShadowButton.astro +9 -0
  24. package/src/components/lib/buttons/ShimmerButton.astro +9 -0
  25. package/src/components/lib/buttons/ShinyButton.astro +9 -0
  26. package/src/components/lib/buttons/TiltGlowButton.astro +10 -0
  27. package/src/components/lib/cards/BlogHorizontalCard.astro +46 -13
  28. package/src/components/lib/cards/CyberFeatureCard.astro +50 -6
  29. package/src/components/lib/cards/EcommerceProductCard.astro +69 -16
  30. package/src/components/lib/cards/GlassCard.astro +8 -0
  31. package/src/components/lib/cards/GlassEventCard.astro +53 -12
  32. package/src/components/lib/cards/GlowPortfolioCard.astro +46 -9
  33. package/src/components/lib/cards/InteractiveTiltCard.astro +47 -7
  34. package/src/components/lib/cards/KanbanItemCard.astro +40 -9
  35. package/src/components/lib/cards/MinimalLinkCard.astro +37 -7
  36. package/src/components/lib/cards/MusicPlayerMini.astro +54 -14
  37. package/src/components/lib/cards/NeumorphicCard.astro +32 -2
  38. package/src/components/lib/cards/NotificationCard.astro +44 -9
  39. package/src/components/lib/cards/PricingCard.astro +47 -9
  40. package/src/components/lib/cards/ProfileCard.astro +50 -11
  41. package/src/components/lib/cards/RetroGameCard.astro +37 -9
  42. package/src/components/lib/cards/StatCard.astro +43 -8
  43. package/src/components/lib/cards/TaskKanbanCard.astro +50 -11
  44. package/src/components/lib/cards/TestimonialCardClean.astro +43 -12
  45. package/src/components/lib/cards/WeatherWidgetCard.astro +36 -10
  46. package/src/components/lib/feedback/AnimatedCheckmark.astro +58 -9
  47. package/src/components/lib/feedback/Badge.astro +47 -12
  48. package/src/components/lib/feedback/CircleProgress.astro +56 -13
  49. package/src/components/lib/feedback/ConfettiFeedback.astro +74 -11
  50. package/src/components/lib/feedback/CyberGlitchAlert.astro +69 -6
  51. package/src/components/lib/feedback/EmptyStateCard.astro +55 -7
  52. package/src/components/lib/feedback/GlassAlert.astro +59 -13
  53. package/src/components/lib/feedback/GlassModal.astro +99 -14
  54. package/src/components/lib/feedback/GlassProgress.astro +39 -5
  55. package/src/components/lib/feedback/IndicatorBadgeMinimal.astro +56 -3
  56. package/src/components/lib/feedback/NeonSpinner.astro +40 -3
  57. package/src/components/lib/feedback/PulseDot.astro +51 -7
  58. package/src/components/lib/feedback/RatingPill.astro +38 -8
  59. package/src/components/lib/feedback/ShakeErrorGroup.astro +44 -3
  60. package/src/components/lib/feedback/SimpleTooltip.astro +53 -4
  61. package/src/components/lib/feedback/SkeletonList.astro +59 -13
  62. package/src/components/lib/feedback/Spotlight.astro +49 -4
  63. package/src/components/lib/feedback/StepProgress.astro +96 -9
  64. package/src/components/lib/feedback/ToastNotif.astro +60 -6
  65. package/src/components/lib/feedback/TypingIndicator.astro +52 -7
  66. package/src/components/lib/forms/AnimatedInput.astro +47 -5
  67. package/src/components/lib/forms/ChipInput.astro +116 -8
  68. package/src/components/lib/forms/ColorPickerInput.astro +53 -6
  69. package/src/components/lib/forms/CurrencyInput.astro +59 -6
  70. package/src/components/lib/forms/CustomRadioGroup.astro +61 -9
  71. package/src/components/lib/forms/CyberpunkCheckbox.astro +64 -8
  72. package/src/components/lib/forms/DragDropUpload.astro +87 -7
  73. package/src/components/lib/forms/ErrorInput.astro +31 -4
  74. package/src/components/lib/forms/FloatingPassword.astro +48 -10
  75. package/src/components/lib/forms/FormGroupVertical.astro +63 -9
  76. package/src/components/lib/forms/GlassSlider.astro +84 -3
  77. package/src/components/lib/forms/GlassTextarea.astro +39 -6
  78. package/src/components/lib/forms/ModernSelect.astro +66 -10
  79. package/src/components/lib/forms/NeumorphicSwitch.astro +54 -26
  80. package/src/components/lib/forms/OTPInput.astro +84 -12
  81. package/src/components/lib/forms/RatingStars.astro +66 -10
  82. package/src/components/lib/forms/SearchReveal.astro +44 -6
  83. package/src/components/lib/forms/SegmentedControl.astro +61 -7
  84. package/src/components/lib/forms/SimpleFileInput.astro +57 -6
  85. package/src/components/lib/forms/StepperInput.astro +101 -9
  86. package/src/components/lib/layout/FeatureHero.astro +70 -6
  87. package/src/components/lib/layout/FooterCenteredMinimal.astro +5 -2
  88. package/src/components/lib/navigation/GlassNavbar.astro +10 -5
  89. package/src/components/lib/navigation/MinimalSidebar.astro +6 -3
  90. package/src/components/lib/navigation/SimpleFooterGlass.astro +6 -2
  91. package/src/components/lib/overlays/SplashIntroOverlay.astro +6 -3
  92. package/src/components/lib/sections/ButtonsShowcase.astro +182 -0
  93. package/src/components/lib/sections/CardsShowcase.astro +376 -0
  94. package/src/components/lib/sections/DataShowcase.astro +329 -0
  95. package/src/components/lib/sections/FeedbackShowcase.astro +320 -0
  96. package/src/components/lib/sections/FormsShowcase.astro +347 -0
  97. package/src/components/lib/sections/HeroGlass.astro +202 -0
  98. package/src/components/lib/sections/HeroGradient.astro +143 -0
  99. package/src/components/lib/sections/HeroSplit.astro +210 -0
  100. package/src/components/lib/sections/LayoutShowcase.astro +317 -0
  101. package/src/components/lib/sections/NavigationShowcase.astro +285 -0
  102. package/src/components/lib/sections/OverlaysShowcase.astro +373 -0
  103. package/src/components/lib/sections/TypographyShowcase.astro +239 -0
  104. package/src/components/lib/sections/index.ts +6 -0
  105. package/src/components/types.d.ts +6 -0
  106. package/{dist → src}/styles/global.css +5 -5
  107. package/dist/AnimatedInput.astro +0 -82
  108. package/dist/Badge.astro +0 -52
  109. package/dist/GlassButton.astro +0 -87
  110. package/dist/GlassCard.astro +0 -72
  111. package/dist/GlassNavbar.astro +0 -65
  112. package/dist/GlowButton.astro +0 -60
  113. package/dist/buttons/3dPushButton.astro +0 -136
  114. package/dist/buttons/AnimatedIconButton.astro +0 -146
  115. package/dist/buttons/BorderDrawButton.astro +0 -112
  116. package/dist/buttons/CyberpunkButton.astro +0 -148
  117. package/dist/buttons/DoubleBorderButton.astro +0 -131
  118. package/dist/buttons/GhostOutlineButton.astro +0 -109
  119. package/dist/buttons/GlassButton.astro +0 -165
  120. package/dist/buttons/GlowButton.astro +0 -119
  121. package/dist/buttons/LiquidButton.astro +0 -167
  122. package/dist/buttons/LoadingButton.astro +0 -148
  123. package/dist/buttons/MagneticButton.astro +0 -134
  124. package/dist/buttons/MinimalPillButton.astro +0 -102
  125. package/dist/buttons/NeumorphicButton.astro +0 -158
  126. package/dist/buttons/PulseButton.astro +0 -111
  127. package/dist/buttons/RetroArcadeButton.astro +0 -105
  128. package/dist/buttons/RetroShadowButton.astro +0 -82
  129. package/dist/buttons/ShimmerButton.astro +0 -113
  130. package/dist/buttons/ShinyButton.astro +0 -121
  131. package/dist/buttons/TiltGlowButton.astro +0 -145
  132. package/dist/buttons/index.mjs +0 -19
  133. package/dist/buttons/index.ts +0 -19
  134. package/dist/cards/BlogHorizontalCard.astro +0 -18
  135. package/dist/cards/CyberFeatureCard.astro +0 -12
  136. package/dist/cards/EcommerceProductCard.astro +0 -24
  137. package/dist/cards/GlassCard.astro +0 -17
  138. package/dist/cards/GlassEventCard.astro +0 -19
  139. package/dist/cards/GlowPortfolioCard.astro +0 -16
  140. package/dist/cards/InteractiveTiltCard.astro +0 -25
  141. package/dist/cards/KanbanItemCard.astro +0 -15
  142. package/dist/cards/MinimalLinkCard.astro +0 -12
  143. package/dist/cards/MusicPlayerMini.astro +0 -21
  144. package/dist/cards/NeumorphicCard.astro +0 -6
  145. package/dist/cards/NotificationCard.astro +0 -15
  146. package/dist/cards/PricingCard.astro +0 -17
  147. package/dist/cards/ProfileCard.astro +0 -17
  148. package/dist/cards/RetroGameCard.astro +0 -15
  149. package/dist/cards/StatCard.astro +0 -15
  150. package/dist/cards/TaskKanbanCard.astro +0 -18
  151. package/dist/cards/TestimonialCardClean.astro +0 -20
  152. package/dist/cards/WeatherWidgetCard.astro +0 -17
  153. package/dist/cards/index.mjs +0 -19
  154. package/dist/cards/index.ts +0 -19
  155. package/dist/data/AccordionGroupGlass.astro +0 -21
  156. package/dist/data/AvatarGroupStack.astro +0 -15
  157. package/dist/data/CalendarGridView.astro +0 -18
  158. package/dist/data/DataChipsGroup.astro +0 -16
  159. package/dist/data/DescriptionListHoriz.astro +0 -14
  160. package/dist/data/FileTreeView.astro +0 -22
  161. package/dist/data/GanttChartMinimal.astro +0 -12
  162. package/dist/data/GlassTable.astro +0 -23
  163. package/dist/data/KeyValuePillGroup.astro +0 -12
  164. package/dist/data/PriceCompareTable.astro +0 -22
  165. package/dist/data/ProgressListSmall.astro +0 -17
  166. package/dist/data/RatingBreakdownBar.astro +0 -13
  167. package/dist/data/SparklineStatCard.astro +0 -16
  168. package/dist/data/StatsGridDashboard.astro +0 -16
  169. package/dist/data/StepperDataVertical.astro +0 -15
  170. package/dist/data/TagCloudData.astro +0 -14
  171. package/dist/data/TimelineHorizSteps.astro +0 -18
  172. package/dist/data/TreeItemInteractive.astro +0 -18
  173. package/dist/data/UserDirectoryItem.astro +0 -15
  174. package/dist/data/VerticalTimeline.astro +0 -21
  175. package/dist/data/index.mjs +0 -20
  176. package/dist/data/index.ts +0 -20
  177. package/dist/feedback/AnimatedCheckmark.astro +0 -13
  178. package/dist/feedback/Badge.astro +0 -19
  179. package/dist/feedback/CircleProgress.astro +0 -22
  180. package/dist/feedback/ConfettiFeedback.astro +0 -18
  181. package/dist/feedback/CyberGlitchAlert.astro +0 -11
  182. package/dist/feedback/EmptyStateCard.astro +0 -13
  183. package/dist/feedback/GlassAlert.astro +0 -20
  184. package/dist/feedback/GlassModal.astro +0 -19
  185. package/dist/feedback/GlassProgress.astro +0 -10
  186. package/dist/feedback/IndicatorBadgeMinimal.astro +0 -10
  187. package/dist/feedback/NeonSpinner.astro +0 -7
  188. package/dist/feedback/PulseDot.astro +0 -12
  189. package/dist/feedback/RatingPill.astro +0 -13
  190. package/dist/feedback/ShakeErrorGroup.astro +0 -7
  191. package/dist/feedback/SimpleTooltip.astro +0 -10
  192. package/dist/feedback/SkeletonList.astro +0 -20
  193. package/dist/feedback/Spotlight.astro +0 -9
  194. package/dist/feedback/StepProgress.astro +0 -14
  195. package/dist/feedback/ToastNotif.astro +0 -11
  196. package/dist/feedback/TypingIndicator.astro +0 -12
  197. package/dist/feedback/index.mjs +0 -20
  198. package/dist/feedback/index.ts +0 -20
  199. package/dist/forms/AnimatedInput.astro +0 -16
  200. package/dist/forms/ChipInput.astro +0 -13
  201. package/dist/forms/ColorPickerInput.astro +0 -13
  202. package/dist/forms/CurrencyInput.astro +0 -11
  203. package/dist/forms/CustomRadioGroup.astro +0 -13
  204. package/dist/forms/CyberpunkCheckbox.astro +0 -15
  205. package/dist/forms/DragDropUpload.astro +0 -12
  206. package/dist/forms/ErrorInput.astro +0 -11
  207. package/dist/forms/FloatingPassword.astro +0 -20
  208. package/dist/forms/FormGroupVertical.astro +0 -14
  209. package/dist/forms/GlassSlider.astro +0 -7
  210. package/dist/forms/GlassTextarea.astro +0 -14
  211. package/dist/forms/ModernSelect.astro +0 -16
  212. package/dist/forms/NeumorphicSwitch.astro +0 -55
  213. package/dist/forms/OTPInput.astro +0 -22
  214. package/dist/forms/RatingStars.astro +0 -15
  215. package/dist/forms/SearchReveal.astro +0 -13
  216. package/dist/forms/SegmentedControl.astro +0 -13
  217. package/dist/forms/SimpleFileInput.astro +0 -11
  218. package/dist/forms/StepperInput.astro +0 -14
  219. package/dist/forms/index.mjs +0 -20
  220. package/dist/forms/index.ts +0 -20
  221. package/dist/index.js +0 -1
  222. package/dist/index.mjs +0 -1
  223. package/dist/layout/BentoGrid3.astro +0 -14
  224. package/dist/layout/CenterFixedBox.astro +0 -6
  225. package/dist/layout/CenteredContainer.astro +0 -8
  226. package/dist/layout/ClusterHorizontal.astro +0 -6
  227. package/dist/layout/FeatureHero.astro +0 -17
  228. package/dist/layout/FooterCenteredMinimal.astro +0 -11
  229. package/dist/layout/FullBleedSection.astro +0 -6
  230. package/dist/layout/GalleryGrid4.astro +0 -7
  231. package/dist/layout/GlassCardGrid.astro +0 -6
  232. package/dist/layout/GlassSectionHeader.astro +0 -15
  233. package/dist/layout/LandingSectionSplit.astro +0 -13
  234. package/dist/layout/MasonryGrid.astro +0 -7
  235. package/dist/layout/MinimalFooterGrid.astro +0 -20
  236. package/dist/layout/ScrollSnapSection.astro +0 -7
  237. package/dist/layout/SectionDividerText.astro +0 -7
  238. package/dist/layout/SidebarLayoutWrapper.astro +0 -11
  239. package/dist/layout/SplitScreenLayout.astro +0 -11
  240. package/dist/layout/StepLayoutVertical.astro +0 -21
  241. package/dist/layout/StickySidebarWrapper.astro +0 -10
  242. package/dist/layout/VerticalStack.astro +0 -8
  243. package/dist/layout/index.mjs +0 -20
  244. package/dist/layout/index.ts +0 -20
  245. package/dist/navigation/AnchorSideNav.astro +0 -13
  246. package/dist/navigation/BottomNavMobile.astro +0 -13
  247. package/dist/navigation/BreadcrumbsMinimal.astro +0 -16
  248. package/dist/navigation/BurgerMorphIcon.astro +0 -12
  249. package/dist/navigation/CommandPaletteUI.astro +0 -17
  250. package/dist/navigation/DotNavigationSlider.astro +0 -13
  251. package/dist/navigation/FloatingTabBar.astro +0 -12
  252. package/dist/navigation/GlassNavbar.astro +0 -19
  253. package/dist/navigation/LangSwitcherPill.astro +0 -17
  254. package/dist/navigation/MegaMenuGlass.astro +0 -25
  255. package/dist/navigation/MinimalSidebar.astro +0 -18
  256. package/dist/navigation/PaginationGlass.astro +0 -20
  257. package/dist/navigation/PaginationInfiniteUI.astro +0 -11
  258. package/dist/navigation/RadialIconMenu.astro +0 -15
  259. package/dist/navigation/RetroArcadeMenu.astro +0 -12
  260. package/dist/navigation/ScrollProgressTop.astro +0 -15
  261. package/dist/navigation/SimpleFooterGlass.astro +0 -21
  262. package/dist/navigation/TabUnderline.astro +0 -14
  263. package/dist/navigation/UserProfileNav.astro +0 -21
  264. package/dist/navigation/VerticalTabs.astro +0 -14
  265. package/dist/navigation/index.mjs +0 -20
  266. package/dist/navigation/index.ts +0 -20
  267. package/dist/overlays/AgeVerificationOverlay.astro +0 -20
  268. package/dist/overlays/BackdropBlurMask.astro +0 -6
  269. package/dist/overlays/BottomSheetMobile.astro +0 -16
  270. package/dist/overlays/CommandDialog.astro +0 -19
  271. package/dist/overlays/ContextMenuOverlay.astro +0 -17
  272. package/dist/overlays/CookieBannerGlass.astro +0 -14
  273. package/dist/overlays/ExitIntentOverlay.astro +0 -19
  274. package/dist/overlays/FloatingTrayActions.astro +0 -13
  275. package/dist/overlays/HelpBubbleOverlay.astro +0 -11
  276. package/dist/overlays/LightboxOverlay.astro +0 -13
  277. package/dist/overlays/LoadingOverlayFull.astro +0 -10
  278. package/dist/overlays/MobileNavOverlay.astro +0 -18
  279. package/dist/overlays/OverlayModal.astro +0 -24
  280. package/dist/overlays/PopoverMenuGlass.astro +0 -17
  281. package/dist/overlays/SearchOverlayFullscreen.astro +0 -15
  282. package/dist/overlays/SideDrawerRight.astro +0 -16
  283. package/dist/overlays/SplashIntroOverlay.astro +0 -11
  284. package/dist/overlays/SpotlightIndicator.astro +0 -6
  285. package/dist/overlays/ToastStackOverlay.astro +0 -12
  286. package/dist/overlays/TooltipActionTray.astro +0 -14
  287. package/dist/overlays/index.mjs +0 -20
  288. package/dist/overlays/index.ts +0 -20
  289. package/dist/typography/AnimatedUnderlineLink.astro +0 -10
  290. package/dist/typography/BackgroundClipMask.astro +0 -7
  291. package/dist/typography/CodeInlineGlass.astro +0 -6
  292. package/dist/typography/CyberpunkGlitchText.astro +0 -20
  293. package/dist/typography/DropCapParagraph.astro +0 -7
  294. package/dist/typography/FadedVerticalText.astro +0 -6
  295. package/dist/typography/FloatingTextLabel.astro +0 -10
  296. package/dist/typography/GlassBlockQuote.astro +0 -13
  297. package/dist/typography/GlassTextReveal.astro +0 -7
  298. package/dist/typography/GradientHeading.astro +0 -9
  299. package/dist/typography/GradientUnderlineLink.astro +0 -7
  300. package/dist/typography/KbdIndicator.astro +0 -6
  301. package/dist/typography/LetterSpacingWide.astro +0 -6
  302. package/dist/typography/MinimalListMarkers.astro +0 -10
  303. package/dist/typography/MonospaceStatLine.astro +0 -6
  304. package/dist/typography/NeonTextHighlight.astro +0 -6
  305. package/dist/typography/ShadowRevealText.astro +0 -7
  306. package/dist/typography/StrokeHeadingOutline.astro +0 -8
  307. package/dist/typography/Text3DLayer.astro +0 -7
  308. package/dist/typography/TypewriterText.astro +0 -15
  309. package/dist/typography/index.mjs +0 -20
  310. package/dist/typography/index.ts +0 -20
  311. package/dist/utilities/AspectRatioBox.astro +0 -11
  312. package/dist/utilities/BackgroundDotPattern.astro +0 -6
  313. package/dist/utilities/CircularMask.astro +0 -7
  314. package/dist/utilities/ClickRippleWrapper.astro +0 -7
  315. package/dist/utilities/FadeInWrapper.astro +0 -11
  316. package/dist/utilities/FixedRatioImage.astro +0 -7
  317. package/dist/utilities/GlassBlurLayer.astro +0 -6
  318. package/dist/utilities/GradientBorderMask.astro +0 -7
  319. package/dist/utilities/HoverLift.astro +0 -7
  320. package/dist/utilities/ResponsiveSpacer.astro +0 -15
  321. package/dist/utilities/ResponsiveVisToggle.astro +0 -11
  322. package/dist/utilities/ScrollLockParent.astro +0 -11
  323. package/dist/utilities/ScrollMarginTarget.astro +0 -10
  324. package/dist/utilities/SlideUpReveal.astro +0 -7
  325. package/dist/utilities/SmoothAnchorLink.astro +0 -22
  326. package/dist/utilities/StackLayering.astro +0 -12
  327. package/dist/utilities/StickyObserver.astro +0 -8
  328. package/dist/utilities/TextTruncate.astro +0 -10
  329. package/dist/utilities/TruncateSingleLine.astro +0 -6
  330. package/dist/utilities/VisuallyHidden.astro +0 -6
  331. package/dist/utilities/index.mjs +0 -20
  332. package/dist/utilities/index.ts +0 -20
  333. package/src/components/lib/utilities/AspectRatioBox.astro +0 -11
  334. package/src/components/lib/utilities/BackgroundDotPattern.astro +0 -6
  335. package/src/components/lib/utilities/CircularMask.astro +0 -7
  336. package/src/components/lib/utilities/ClickRippleWrapper.astro +0 -7
  337. package/src/components/lib/utilities/FadeInWrapper.astro +0 -11
  338. package/src/components/lib/utilities/FixedRatioImage.astro +0 -7
  339. package/src/components/lib/utilities/GlassBlurLayer.astro +0 -6
  340. package/src/components/lib/utilities/GradientBorderMask.astro +0 -7
  341. package/src/components/lib/utilities/HoverLift.astro +0 -7
  342. package/src/components/lib/utilities/ResponsiveSpacer.astro +0 -15
  343. package/src/components/lib/utilities/ResponsiveVisToggle.astro +0 -11
  344. package/src/components/lib/utilities/ScrollLockParent.astro +0 -11
  345. package/src/components/lib/utilities/ScrollMarginTarget.astro +0 -10
  346. package/src/components/lib/utilities/SlideUpReveal.astro +0 -7
  347. package/src/components/lib/utilities/SmoothAnchorLink.astro +0 -22
  348. package/src/components/lib/utilities/StackLayering.astro +0 -12
  349. package/src/components/lib/utilities/StickyObserver.astro +0 -8
  350. package/src/components/lib/utilities/TextTruncate.astro +0 -10
  351. package/src/components/lib/utilities/TruncateSingleLine.astro +0 -6
  352. package/src/components/lib/utilities/VisuallyHidden.astro +0 -6
  353. package/src/components/lib/utilities/index.ts +0 -20
@@ -1,17 +0,0 @@
1
- ---
2
- ---
3
- <div class="ctx-menu">
4
- <div class="ctx-group">
5
- <div class="ctx-item">Copy Link</div>
6
- <div class="ctx-item">Duplicate</div>
7
- </div>
8
- <hr />
9
- <div class="ctx-item danger">Delete Item</div>
10
- </div>
11
- <style>
12
- .ctx-menu { width: 200px; background: #111; border: 1px solid #333; border-radius: 10px; padding: 4px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); position: fixed; top: 100px; left: 100px; z-index: 5000; }
13
- .ctx-item { padding: 8px 12px; font-size: 0.85rem; color: #e2e8f0; border-radius: 6px; cursor: pointer; transition: 0.2s; }
14
- .ctx-item:hover { background: #6366f1; color: #fff; }
15
- .danger:hover { background: #ef4444 !important; }
16
- hr { border: none; border-top: 1px solid #222; margin: 4px 0; }
17
- </style>
@@ -1,14 +0,0 @@
1
- ---
2
- ---
3
- <div class="cookie-bar">
4
- <div class="text">We use cookies to improve your experience. <a href="#">Learn more</a></div>
5
- <div class="acts"><button class="opt">Options</button><button class="acc">Accept All</button></div>
6
- </div>
7
- <style>
8
- .cookie-bar { position: fixed; bottom: 2rem; left: 2rem; right: 2rem; max-width: 600px; margin: 0 auto; background: rgba(15,23,42,0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
9
- .text { color: #e2e8f0; font-size: 0.85rem; }
10
- .acts { display: flex; gap: 0.75rem; }
11
- button { padding: 0.5rem 1rem; border-radius: 8px; border: none; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
12
- .opt { background: transparent; color: #fff; border: 1px solid #334155; }
13
- .acc { background: #6366f1; color: #fff; }
14
- </style>
@@ -1,19 +0,0 @@
1
- ---
2
- ---
3
- <div class="exit-modal">
4
- <div class="exit-card">
5
- <h2>Wait! Before you go...</h2>
6
- <p>Get 20% off your first order when you join our mailing list.</p>
7
- <input type="email" placeholder="Your email" />
8
- <button>Get My Code</button>
9
- </div>
10
- </div>
11
- <style>
12
- .exit-modal { position: fixed; inset: 0; background: rgba(99,102,241,0.1); backdrop-filter: blur(15px); z-index: 6000; display: grid; place-items: center; }
13
- .exit-card { background: #fff; color: #000; padding: 3rem; border-radius: 30px; text-align: center; max-width: 450px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
14
- h2 { font-weight: 900; font-size: 1.8rem; margin-bottom: 1rem; }
15
- p { color: #64748b; margin-bottom: 2rem; line-height: 1.5; }
16
- input { width: 100%; padding: 1rem; border: 1px solid #eee; border-radius: 12px; margin-bottom: 1rem; outline: none; font-size: 1rem; }
17
- button { width: 100%; padding: 1rem; background: #6366f1; color: #fff; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
18
- button:hover { background: #4f46e5; }
19
- </style>
@@ -1,13 +0,0 @@
1
- ---
2
- ---
3
- <div class="tray">
4
- <button class="tray-btn">✏️ Edit</button>
5
- <div class="sep"></div>
6
- <button class="tray-btn">↗️ Share</button>
7
- </div>
8
- <style>
9
- .tray { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 100px; display: flex; align-items: center; padding: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 1000; border: 1px solid rgba(0,0,0,0.1); }
10
- .tray-btn { background: none; border: none; padding: 0.6rem 1.25rem; font-weight: 700; color: #000; cursor: pointer; font-size: 0.85rem; transition: 0.2s; }
11
- .tray-btn:hover { opacity: 0.6; }
12
- .sep { width: 1px; height: 20px; background: #eee; }
13
- </style>
@@ -1,11 +0,0 @@
1
- ---
2
- ---
3
- <div class="help-bubble">
4
- <div class="tip">We are online!</div>
5
- <div class="icon">💬</div>
6
- </div>
7
- <style>
8
- .help-bubble { position: fixed; bottom: 2rem; right: 2rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; z-index: 1000; }
9
- .icon { width: 55px; height: 55px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; box-shadow: 0 10px 30px rgba(99,102,241,0.4); }
10
- .tip { background: #fff; color: #000; padding: 6px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 800; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
11
- </style>
@@ -1,13 +0,0 @@
1
- ---
2
- ---
3
- <div class="lightbox">
4
- <div class="close">×</div>
5
- <div class="img-preview"></div>
6
- <div class="caption">Nature Landscape / 2024</div>
7
- </div>
8
- <style>
9
- .lightbox { position: fixed; inset: 0; background: #000; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
10
- .close { position: absolute; top: 2rem; right: 2rem; color: #fff; font-size: 2.2rem; cursor: pointer; }
11
- .img-preview { width: 80%; height: 70%; background: #1e293b; border-radius: 12px; }
12
- .caption { margin-top: 2rem; color: #94a3b8; font-family: monospace; }
13
- </style>
@@ -1,10 +0,0 @@
1
- ---
2
- ---
3
- <div class="load-overlay">
4
- <div class="spinner"></div>
5
- </div>
6
- <style>
7
- .load-overlay { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; }
8
- .spinner { width: 50px; height: 50px; border: 4px solid rgba(99,102,241,0.1); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s infinite linear; }
9
- @keyframes spin { to { transform: rotate(360deg); } }
10
- </style>
@@ -1,18 +0,0 @@
1
- ---
2
- ---
3
- <div class="mob-nav">
4
- <div class="mob-close">×</div>
5
- <nav class="mob-links">
6
- <a href="#">Home</a>
7
- <a href="#">Features</a>
8
- <a href="#">Pricing</a>
9
- <a href="#">Team</a>
10
- </nav>
11
- </div>
12
- <style>
13
- .mob-nav { position: fixed; inset: 0; background: #080b14; z-index: 4000; padding: 4rem 2rem; display: flex; flex-direction: column; }
14
- .mob-close { font-size: 3rem; color: #fff; align-self: flex-end; cursor: pointer; margin-bottom: 2rem; }
15
- .mob-links { display: flex; flex-direction: column; gap: 1.5rem; }
16
- .mob-links a { font-size: 2.2rem; font-weight: 800; color: #fff; text-decoration: none; transition: 0.2s; }
17
- .mob-links a:hover { color: #6366f1; padding-left: 10px; }
18
- </style>
@@ -1,24 +0,0 @@
1
- ---
2
- ---
3
- <div class="modal-overlay">
4
- <div class="modal-card anim-scale-up">
5
- <div class="modal-close">×</div>
6
- <h3>Confirm Action</h3>
7
- <p>Are you sure you want to proceed with this sensitive operation?</p>
8
- <div class="modal-actions">
9
- <button class="cancel">Cancel</button>
10
- <button class="confirm">Continue</button>
11
- </div>
12
- </div>
13
- </div>
14
- <style>
15
- .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 1000; }
16
- .modal-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2rem; width: 90%; max-width: 400px; box-shadow: 0 40px 100px rgba(0,0,0,0.5); position: relative; }
17
- .modal-close { position: absolute; top: 1rem; right: 1rem; cursor: pointer; color: #94a3b8; font-size: 1.5rem; }
18
- h3 { margin: 0 0 1rem; color: #fff; }
19
- p { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
20
- .modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
21
- button { padding: 0.6rem 1.25rem; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; }
22
- .cancel { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
23
- .confirm { background: #6366f1; color: #fff; }
24
- </style>
@@ -1,17 +0,0 @@
1
- ---
2
- ---
3
- <div class="popover">
4
- <div class="pop-inner">
5
- <div class="pop-item">Edit Account</div>
6
- <div class="pop-item">Billing</div>
7
- <hr />
8
- <div class="pop-item logout">Logout</div>
9
- </div>
10
- </div>
11
- <style>
12
- .popover { width: 180px; background: rgba(10, 10, 20, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
13
- .pop-item { padding: 8px 12px; border-radius: 8px; color: #94a3b8; font-size: 0.85rem; cursor: pointer; }
14
- .pop-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
15
- .logout { color: #f87171 !important; }
16
- hr { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 6px 0; }
17
- </style>
@@ -1,15 +0,0 @@
1
- ---
2
- ---
3
- <div class="search-hero">
4
- <div class="close">Esc</div>
5
- <input type="text" placeholder="Start searching..." autofocus />
6
- <div class="hints">Search for <span>components</span>, <span>guides</span>, or <span>authors</span></div>
7
- </div>
8
- <style>
9
- .search-hero { position: fixed; inset: 0; background: #080b14; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
10
- .close { position: absolute; top: 3rem; right: 3rem; color: #64748b; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
11
- input { width: 100%; max-width: 800px; background: transparent; border: none; color: #fff; font-size: 3rem; font-weight: 800; text-align: center; outline: none; }
12
- .hints { margin-top: 2rem; color: #64748b; font-size: 1rem; }
13
- span { color: #818cf8; text-decoration: underline; cursor: pointer; }
14
- @media (max-width: 768px) { input { font-size: 1.5rem; } }
15
- </style>
@@ -1,16 +0,0 @@
1
- ---
2
- ---
3
- <div class="drawer-wrap">
4
- <div class="drawer-overlay"></div>
5
- <div class="drawer-panel right">
6
- <div class="drawer-header"><h3>Filters</h3><span>×</span></div>
7
- <div class="drawer-body"><slot /></div>
8
- </div>
9
- </div>
10
- <style>
11
- .drawer-wrap { position: fixed; inset: 0; z-index: 2000; }
12
- .drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
13
- .drawer-panel { position: absolute; top: 0; bottom: 0; width: 350px; background: #080b14; border-left: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
14
- .drawer-panel.right { right: 0; transform: translateX(0); }
15
- .drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; color: #fff; }
16
- </style>
@@ -1,11 +0,0 @@
1
- ---
2
- ---
3
- <div class="splash">
4
- <div class="logo-anim">Astro Components</div>
5
- </div>
6
- <style>
7
- .splash { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; animation: fade-out 1s forwards 2s; }
8
- .logo-anim { font-size: 3rem; font-weight: 900; color: #fff; animation: scale-pulse 1.5s infinite linear; background: linear-gradient(135deg, #6366f1, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
9
- @keyframes fade-out { to { opacity: 0; pointer-events: none; } }
10
- @keyframes scale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
11
- </style>
@@ -1,6 +0,0 @@
1
- ---
2
- ---
3
- <div class="spot-mask"></div>
4
- <style>
5
- .spot-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; clip-path: circle(60px at 50% 50%); pointer-events: none; }
6
- </style>
@@ -1,12 +0,0 @@
1
- ---
2
- ---
3
- <div class="toast-stack">
4
- <div class="toast-mini success">Profile updated!</div>
5
- <div class="toast-mini error">Failed to sync changes.</div>
6
- </div>
7
- <style>
8
- .toast-stack { position: fixed; top: 2rem; right: 2rem; z-index: 5000; display: flex; flex-direction: column; gap: 0.75rem; }
9
- .toast-mini { background: #111; color: #fff; padding: 0.75rem 1.5rem; border-radius: 10px; border-left: 4px solid #333; font-size: 0.85rem; box-shadow: 0 10px 30px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); }
10
- .success { border-left-color: #10b981; }
11
- .error { border-left-color: #ef4444; }
12
- </style>
@@ -1,14 +0,0 @@
1
- ---
2
- ---
3
- <div class="act-tip">
4
- <div class="tip-body">Action required</div>
5
- <div class="tip-btns"><button class="fix">Fix</button><button class="ign">Ignore</button></div>
6
- </div>
7
- <style>
8
- .act-tip { position: relative; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: fit-content; }
9
- .tip-body { color: #fff; font-weight: 700; font-size: 0.8rem; margin-bottom: 8px; }
10
- .tip-btns { display: flex; gap: 8px; }
11
- button { padding: 4px 10px; font-size: 0.75rem; border-radius: 4px; border: none; cursor: pointer; font-weight: 600; }
12
- .fix { background: #6366f1; color: #fff; }
13
- .ign { background: #334155; color: #94a3b8; }
14
- </style>
@@ -1,20 +0,0 @@
1
- export { default as AgeVerificationOverlay } from './AgeVerificationOverlay.astro';
2
- export { default as BackdropBlurMask } from './BackdropBlurMask.astro';
3
- export { default as BottomSheetMobile } from './BottomSheetMobile.astro';
4
- export { default as CommandDialog } from './CommandDialog.astro';
5
- export { default as ContextMenuOverlay } from './ContextMenuOverlay.astro';
6
- export { default as CookieBannerGlass } from './CookieBannerGlass.astro';
7
- export { default as ExitIntentOverlay } from './ExitIntentOverlay.astro';
8
- export { default as FloatingTrayActions } from './FloatingTrayActions.astro';
9
- export { default as HelpBubbleOverlay } from './HelpBubbleOverlay.astro';
10
- export { default as LightboxOverlay } from './LightboxOverlay.astro';
11
- export { default as LoadingOverlayFull } from './LoadingOverlayFull.astro';
12
- export { default as MobileNavOverlay } from './MobileNavOverlay.astro';
13
- export { default as OverlayModal } from './OverlayModal.astro';
14
- export { default as PopoverMenuGlass } from './PopoverMenuGlass.astro';
15
- export { default as SearchOverlayFullscreen } from './SearchOverlayFullscreen.astro';
16
- export { default as SideDrawerRight } from './SideDrawerRight.astro';
17
- export { default as SplashIntroOverlay } from './SplashIntroOverlay.astro';
18
- export { default as SpotlightIndicator } from './SpotlightIndicator.astro';
19
- export { default as ToastStackOverlay } from './ToastStackOverlay.astro';
20
- export { default as TooltipActionTray } from './TooltipActionTray.astro';
@@ -1,20 +0,0 @@
1
- export { default as AgeVerificationOverlay } from './AgeVerificationOverlay.astro';
2
- export { default as BackdropBlurMask } from './BackdropBlurMask.astro';
3
- export { default as BottomSheetMobile } from './BottomSheetMobile.astro';
4
- export { default as CommandDialog } from './CommandDialog.astro';
5
- export { default as ContextMenuOverlay } from './ContextMenuOverlay.astro';
6
- export { default as CookieBannerGlass } from './CookieBannerGlass.astro';
7
- export { default as ExitIntentOverlay } from './ExitIntentOverlay.astro';
8
- export { default as FloatingTrayActions } from './FloatingTrayActions.astro';
9
- export { default as HelpBubbleOverlay } from './HelpBubbleOverlay.astro';
10
- export { default as LightboxOverlay } from './LightboxOverlay.astro';
11
- export { default as LoadingOverlayFull } from './LoadingOverlayFull.astro';
12
- export { default as MobileNavOverlay } from './MobileNavOverlay.astro';
13
- export { default as OverlayModal } from './OverlayModal.astro';
14
- export { default as PopoverMenuGlass } from './PopoverMenuGlass.astro';
15
- export { default as SearchOverlayFullscreen } from './SearchOverlayFullscreen.astro';
16
- export { default as SideDrawerRight } from './SideDrawerRight.astro';
17
- export { default as SplashIntroOverlay } from './SplashIntroOverlay.astro';
18
- export { default as SpotlightIndicator } from './SpotlightIndicator.astro';
19
- export { default as ToastStackOverlay } from './ToastStackOverlay.astro';
20
- export { default as TooltipActionTray } from './TooltipActionTray.astro';
@@ -1,10 +0,0 @@
1
- ---
2
- interface Props { href: string; }
3
- const { href } = Astro.props;
4
- ---
5
- <a href={href} class="smart-link"><slot /></a>
6
- <style>
7
- .smart-link { color: #818cf8; text-decoration: none; position: relative; font-weight: 600; padding: 2px 0; }
8
- .smart-link::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #6366f1; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
9
- .smart-link:hover::after { width: 100%; left: 0; }
10
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <h1 class="mask-txt"><slot /></h1>
4
- <style>
5
- .mask-txt { font-size: 8rem; font-weight: 900; background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1000&q=80'); background-size: cover; background-position: center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; line-height: 1; text-align: center; }
6
- @media (max-width: 768px) { .mask-txt { font-size: 4rem; } }
7
- </style>
@@ -1,6 +0,0 @@
1
- ---
2
- ---
3
- <code class="glass-code"><slot /></code>
4
- <style>
5
- .glass-code { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 0.2rem 0.4rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #e2e8f0; font-size: 0.9em; }
6
- </style>
@@ -1,20 +0,0 @@
1
- ---
2
- interface Props { text: string; }
3
- const { text } = Astro.props;
4
- ---
5
- <div class="glitch-text" data-text={text}>{text}</div>
6
- <style>
7
- .glitch-text { position: relative; font-size: 3rem; font-weight: 900; color: #fff; text-transform: uppercase; }
8
- .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
9
- .glitch-text::before { left: 2px; text-shadow: -2px 0 #ff003c; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }
10
- .glitch-text::after { left: -2px; text-shadow: -2px 0 #00e0ff; clip: rect(12px, 450px, 80px, 0); animation: glitch-anim 2s infinite linear alternate-reverse; }
11
- @keyframes glitch-anim {
12
- 0% { clip: rect(10px, 9999px, 20px, 0); transform: skew(0.5deg); }
13
- 20% { clip: rect(40px, 9999px, 50px, 0); }
14
- 40% { clip: rect(80px, 9999px, 90px, 0); }
15
- 60% { clip: rect(20px, 9999px, 30px, 0); }
16
- 80% { clip: rect(60px, 9999px, 70px, 0); }
17
- 100% { clip: rect(0, 9999px, 10px, 0); transform: skew(-0.5deg); }
18
- }
19
- @media (max-width: 768px) { .glitch-text { font-size: 2rem; } }
20
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <p class="drop-p"><slot /></p>
4
- <style>
5
- .drop-p { color: #94a3b8; line-height: 1.8; font-size: 1.1rem; }
6
- .drop-p::first-letter { float: left; font-size: 4rem; font-weight: 900; line-height: 0.8; margin-right: 0.5rem; margin-top: 0.5rem; color: #fff; background: linear-gradient(135deg, #6366f1, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
7
- </style>
@@ -1,6 +0,0 @@
1
- ---
2
- ---
3
- <div class="v-txt"><slot /></div>
4
- <style>
5
- .v-txt { writing-mode: vertical-rl; transform: rotate(180deg); color: #334155; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; white-space: nowrap; }
6
- </style>
@@ -1,10 +0,0 @@
1
- ---
2
- ---
3
- <div class="f-label-wrap">
4
- <span class="f-label">PREMIUM</span>
5
- <slot />
6
- </div>
7
- <style>
8
- .f-label-wrap { position: relative; padding-top: 1.5rem; }
9
- .f-label { position: absolute; top: 0; left: 0; font-size: 0.7rem; font-weight: 800; color: #6366f1; letter-spacing: 0.2em; text-transform: uppercase; }
10
- </style>
@@ -1,13 +0,0 @@
1
- ---
2
- ---
3
- <blockquote class="glass-quote">
4
- <div class="q-ico">“</div>
5
- <p><slot /></p>
6
- <footer>— Astro Components Team</footer>
7
- </blockquote>
8
- <style>
9
- .glass-quote { position: relative; padding: 2.5rem; background: rgba(255,255,255,0.03); border-left: 4px solid #6366f1; border-radius: 0 20px 20px 0; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.05); }
10
- .q-ico { position: absolute; top: 0px; left: 1rem; font-size: 5rem; color: rgba(99,102,241,0.1); font-family: serif; line-height: 1; }
11
- p { font-size: 1.2rem; color: #e2e8f0; font-style: italic; line-height: 1.6; margin: 0 0 1rem; position: relative; z-index: 1; }
12
- footer { color: #64748b; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
13
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <h3 class="shimmer-txt"><slot /></h3>
4
- <style>
5
- .shimmer-txt { font-size: 2rem; color: rgba(255,255,255,0.2); background: linear-gradient(90deg, transparent, #fff, transparent); background-size: 200% 100%; -webkit-background-clip: text; animation: shimmer-anim 3s infinite linear; margin: 0; font-weight: 800; }
6
- @keyframes shimmer-anim { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } }
7
- </style>
@@ -1,9 +0,0 @@
1
- ---
2
- interface Props { level?: 1 | 2 | 3 | 4 | 5 | 6; from?: string; to?: string; }
3
- const { level = 1, from = '#6366f1', to = '#c084fc' } = Astro.props;
4
- const Tag = `h${level}` as any;
5
- ---
6
- <Tag class="grad-txt" style={`--from: ${from}; --to: ${to}`}><slot /></Tag>
7
- <style>
8
- .grad-txt { display: inline-block; font-weight: 900; background: linear-gradient(135deg, var(--from), var(--to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; margin: 0; }
9
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <a href="#" class="grad-link"><slot /></a>
4
- <style>
5
- .grad-link { text-decoration: none; color: #fff; border-bottom: 3px solid transparent; border-image: linear-gradient(135deg, #6366f1, #c084fc); border-image-slice: 1; padding-bottom: 2px; font-weight: 700; transition: 0.3s; }
6
- .grad-link:hover { opacity: 0.8; padding-bottom: 5px; }
7
- </style>
@@ -1,6 +0,0 @@
1
- ---
2
- ---
3
- <kbd class="tau-kbd"><slot /></kbd>
4
- <style>
5
- .tau-kbd { background: #1e293b; border: 1px solid #334155; border-bottom-width: 3px; border-radius: 6px; padding: 2px 8px; color: #f1f5f9; font-family: sans-serif; font-weight: 700; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.4); vertical-align: middle; }
6
- </style>
@@ -1,6 +0,0 @@
1
- ---
2
- ---
3
- <div class="cinema-txt"><slot /></div>
4
- <style>
5
- .cinema-txt { color: #fff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.8em; text-transform: uppercase; text-align: center; line-height: 1.5; }
6
- </style>
@@ -1,10 +0,0 @@
1
- ---
2
- ---
3
- <ul class="custom-list">
4
- <slot />
5
- </ul>
6
- <style>
7
- .custom-list { list-style: none; padding: 0; }
8
- .custom-list :global(li) { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; color: #94a3b8; font-size: 1rem; line-height: 1.5; }
9
- .custom-list :global(li::before) { content: "→"; position: absolute; left: 0; color: #6366f1; font-weight: 900; }
10
- </style>
@@ -1,6 +0,0 @@
1
- ---
2
- ---
3
- <div class="mono-stat"><slot /></div>
4
- <style>
5
- .mono-stat { background: #000; color: #00ff00; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding: 0.75rem 1.25rem; border-left: 3px solid #00ff00; font-size: 0.8rem; border-radius: 4px; border: 1px solid rgba(0, 255, 0, 0.1); }
6
- </style>
@@ -1,6 +0,0 @@
1
- ---
2
- ---
3
- <span class="neon-hi"><slot /></span>
4
- <style>
5
- .neon-hi { color: #fff; background: rgba(99,102,241,0.2); padding: 0.1em 0.3em; border-radius: 4px; box-shadow: 0 0 10px rgba(99,102,241,0.3); border: 1px solid rgba(99,102,241,0.4); }
6
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <h2 class="rev-text"><slot /></h2>
4
- <style>
5
- .rev-text { font-size: 3.5rem; font-weight: 900; color: #fff; text-shadow: 4px 4px 0px rgba(99,102,241,0.3), 8px 8px 0px rgba(0,0,0,0.5); margin: 0; line-height: 1.1; }
6
- @media (max-width: 768px) { .rev-text { font-size: 2rem; } }
7
- </style>
@@ -1,8 +0,0 @@
1
- ---
2
- ---
3
- <h2 class="stroke-h"><slot /></h2>
4
- <style>
5
- .stroke-h { font-size: 4rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.05em; transition: 0.3s; margin: 0; }
6
- .stroke-h:hover { -webkit-text-stroke-color: #6366f1; }
7
- @media (max-width: 768px) { .stroke-h { font-size: 2.5rem; } }
8
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <div class="stack-3d"><slot /></div>
4
- <style>
5
- .stack-3d { font-size: 4rem; font-weight: 900; color: #fff; position: relative; text-shadow: 1px 1px #6366f1, 2px 2px #6366f1, 3px 3px #6366f1, 4px 4px #6366f1; line-height: 1.1; }
6
- @media (max-width: 768px) { .stack-3d { font-size: 2.5rem; } }
7
- </style>
@@ -1,15 +0,0 @@
1
- ---
2
- interface Props { text: string; speed?: string; }
3
- const { text, speed = '3s' } = Astro.props;
4
- ---
5
- <div class="tw-wrap">
6
- <span class="tw-text" style={`--len: ${text.length}; --speed: ${speed}`}>
7
- {text}
8
- </span>
9
- </div>
10
- <style>
11
- .tw-wrap { display: inline-block; }
12
- .tw-text { display: block; overflow: hidden; white-space: nowrap; border-right: 3px solid #6366f1; color: #fff; font-family: monospace; font-size: 1.5rem; font-weight: 700; width: 0; animation: typing var(--speed) steps(var(--len)) forwards, blink 0.75s step-end infinite; }
13
- @keyframes typing { from { width: 0 } to { width: 100% } }
14
- @keyframes blink { from, to { border-color: transparent } 50% { border-color: #6366f1 } }
15
- </style>
@@ -1,20 +0,0 @@
1
- export { default as AnimatedUnderlineLink } from './AnimatedUnderlineLink.astro';
2
- export { default as BackgroundClipMask } from './BackgroundClipMask.astro';
3
- export { default as CodeInlineGlass } from './CodeInlineGlass.astro';
4
- export { default as CyberpunkGlitchText } from './CyberpunkGlitchText.astro';
5
- export { default as DropCapParagraph } from './DropCapParagraph.astro';
6
- export { default as FadedVerticalText } from './FadedVerticalText.astro';
7
- export { default as FloatingTextLabel } from './FloatingTextLabel.astro';
8
- export { default as GlassBlockQuote } from './GlassBlockQuote.astro';
9
- export { default as GlassTextReveal } from './GlassTextReveal.astro';
10
- export { default as GradientHeading } from './GradientHeading.astro';
11
- export { default as GradientUnderlineLink } from './GradientUnderlineLink.astro';
12
- export { default as KbdIndicator } from './KbdIndicator.astro';
13
- export { default as LetterSpacingWide } from './LetterSpacingWide.astro';
14
- export { default as MinimalListMarkers } from './MinimalListMarkers.astro';
15
- export { default as MonospaceStatLine } from './MonospaceStatLine.astro';
16
- export { default as NeonTextHighlight } from './NeonTextHighlight.astro';
17
- export { default as ShadowRevealText } from './ShadowRevealText.astro';
18
- export { default as StrokeHeadingOutline } from './StrokeHeadingOutline.astro';
19
- export { default as Text3DLayer } from './Text3DLayer.astro';
20
- export { default as TypewriterText } from './TypewriterText.astro';
@@ -1,20 +0,0 @@
1
- export { default as AnimatedUnderlineLink } from './AnimatedUnderlineLink.astro';
2
- export { default as BackgroundClipMask } from './BackgroundClipMask.astro';
3
- export { default as CodeInlineGlass } from './CodeInlineGlass.astro';
4
- export { default as CyberpunkGlitchText } from './CyberpunkGlitchText.astro';
5
- export { default as DropCapParagraph } from './DropCapParagraph.astro';
6
- export { default as FadedVerticalText } from './FadedVerticalText.astro';
7
- export { default as FloatingTextLabel } from './FloatingTextLabel.astro';
8
- export { default as GlassBlockQuote } from './GlassBlockQuote.astro';
9
- export { default as GlassTextReveal } from './GlassTextReveal.astro';
10
- export { default as GradientHeading } from './GradientHeading.astro';
11
- export { default as GradientUnderlineLink } from './GradientUnderlineLink.astro';
12
- export { default as KbdIndicator } from './KbdIndicator.astro';
13
- export { default as LetterSpacingWide } from './LetterSpacingWide.astro';
14
- export { default as MinimalListMarkers } from './MinimalListMarkers.astro';
15
- export { default as MonospaceStatLine } from './MonospaceStatLine.astro';
16
- export { default as NeonTextHighlight } from './NeonTextHighlight.astro';
17
- export { default as ShadowRevealText } from './ShadowRevealText.astro';
18
- export { default as StrokeHeadingOutline } from './StrokeHeadingOutline.astro';
19
- export { default as Text3DLayer } from './Text3DLayer.astro';
20
- export { default as TypewriterText } from './TypewriterText.astro';
@@ -1,11 +0,0 @@
1
- ---
2
- interface Props { ratio?: string; }
3
- const { ratio = '16 / 9' } = Astro.props;
4
- ---
5
- <div class="aspect-box" style={`aspect-ratio: ${ratio}`}>
6
- <slot />
7
- </div>
8
- <style>
9
- .aspect-box { width: 100%; background: rgba(30, 41, 59, 0.5); overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); }
10
- .aspect-box :global(img, video, iframe) { width: 100%; height: 100%; object-fit: cover; }
11
- </style>
@@ -1,6 +0,0 @@
1
- ---
2
- ---
3
- <div class="mesh-bg"></div>
4
- <style>
5
- .mesh-bg { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
6
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <div class="c-mask"><slot /></div>
4
- <style>
5
- .c-mask { width: 100px; height: 100px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
6
- .c-mask :global(*) { width: 100%; height: 100%; object-fit: cover; }
7
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <button class="ripple-bt"><slot /></button>
4
- <style>
5
- .ripple-bt { background: none; border: none; padding: 0; outline: none; transition: transform 0.1s; cursor: pointer; border-radius: inherit; }
6
- .ripple-bt:active { transform: scale(0.95); }
7
- </style>
@@ -1,11 +0,0 @@
1
- ---
2
- interface Props { duration?: string; delay?: string; }
3
- const { duration = '0.6s', delay = '0s' } = Astro.props;
4
- ---
5
- <div class="fade-in" style={`--d: ${duration}; --l: ${delay}`}>
6
- <slot />
7
- </div>
8
- <style>
9
- .fade-in { opacity: 0; animation: fade-in-anim var(--d) cubic-bezier(0.16, 1, 0.3, 1) var(--l) forwards; }
10
- @keyframes fade-in-anim { to { opacity: 1; } }
11
- </style>
@@ -1,7 +0,0 @@
1
- ---
2
- ---
3
- <div class="ratio-3-2"><slot /></div>
4
- <style>
5
- .ratio-3-2 { width: 100%; aspect-ratio: 3 / 2; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); }
6
- .ratio-3-2 :global(*) { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
7
- </style>