@particle-academy/react-fancy 4.11.0 → 4.12.1

package/dist/styles.css

@@ -301,4 +301,66 @@
 .fancy-slide-out-right {
   animation: fancy-slide-out-right 0.2s ease-in forwards;
 }
+[data-react-fancy-marquee] {
+  overflow: hidden;
+  width: 100%;
+}
+.fancy-marquee--fade {
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      transparent,
+      black var(--fancy-marquee-fade, 48px),
+      black calc(100% - var(--fancy-marquee-fade, 48px)),
+      transparent);
+  mask-image:
+    linear-gradient(
+      to right,
+      transparent,
+      black var(--fancy-marquee-fade, 48px),
+      black calc(100% - var(--fancy-marquee-fade, 48px)),
+      transparent);
+}
+.fancy-marquee__track {
+  display: flex;
+  width: max-content;
+  animation: fancy-marquee var(--fancy-marquee-duration, 40s) linear infinite;
+  will-change: transform;
+}
+[data-react-fancy-marquee][data-direction=right] .fancy-marquee__track {
+  animation-direction: reverse;
+}
+.fancy-marquee--pause-hover:hover .fancy-marquee__track,
+[data-react-fancy-marquee][data-paused] .fancy-marquee__track {
+  animation-play-state: paused;
+}
+.fancy-marquee__group {
+  display: flex;
+  flex: none;
+}
+.fancy-marquee__unit {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--fancy-marquee-gap, 40px);
+  padding-inline-end: var(--fancy-marquee-gap, 40px);
+  white-space: nowrap;
+}
+.fancy-marquee__item,
+.fancy-marquee__separator {
+  flex: none;
+}
+@keyframes fancy-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fancy-marquee__track {
+    animation: none;
+  }
+}
 /*# sourceMappingURL=styles.css.map */

package/dist/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/react-fancy — base styles + animations */\n\n/* ─── Input & Field defaults ─────────────────────────────────────────────────\n   Better UX out of the box: spacing between stacked fields, smooth transitions,\n   and polished dark-mode defaults. All overridable via data-attribute selectors.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Field spacing — adjacent fields get vertical breathing room */\n[data-react-fancy-field] + [data-react-fancy-field] {\n  margin-top: 1rem;\n}\n\n/* Smooth transitions on all text inputs, selects, and textareas */\n[data-react-fancy-input] input,\n[data-react-fancy-textarea],\n[data-react-fancy-select],\n[data-react-fancy-date-picker],\n[data-react-fancy-autocomplete] input,\n[data-react-fancy-pillbox],\n[data-react-fancy-otp-input] input,\n[data-react-fancy-time-picker] input,\n[data-react-fancy-color-picker] input {\n  transition: border-color 0.15s ease, box-shadow 0.15s ease,\n    background-color 0.15s ease;\n}\n\n/* Dark-mode input refinements — slightly darker bg for contrast against page */\n/* ─── Inherent dark-mode defaults ────────────────────────────────────────────\n   Every rule below is wrapped in :where() so it carries ZERO specificity, which\n   buys two properties at once:\n     1. Inherent — a sensible dark appearance ships out of the box, even when the\n        consumer's Tailwind build doesn't generate react-fancy's `dark:` utility\n        classes (e.g. they didn't @source the package). This is what lets the\n        overlays (Dropdown, Menu, Popover, …) go dark on their own.\n     2. Override-friendly — because specificity is 0, ANY consumer override wins:\n        a plain `dark:bg-…` utility, a custom class, or the component's own\n        `dark:` class (when it IS generated) all take precedence — no !important,\n        no need to target the data-attribute.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Inputs / selects / textareas — darker bg for contrast against the page */\n:where(.dark [data-react-fancy-input] input),\n:where(.dark [data-react-fancy-textarea]),\n:where(.dark [data-react-fancy-select]),\n:where(.dark [data-react-fancy-date-picker]),\n:where(.dark [data-react-fancy-autocomplete] input),\n:where(.dark [data-react-fancy-pillbox]),\n:where(.dark [data-react-fancy-otp-input] input),\n:where(.dark [data-react-fancy-time-picker] input) {\n  background-color: #1e1e24;\n  border-color: #3f3f46;\n}\n\n/* Focus ring — brighter border + subtle glow */\n:where(.dark [data-react-fancy-input] input:focus),\n:where(.dark [data-react-fancy-textarea]:focus),\n:where(.dark [data-react-fancy-select]:focus),\n:where(.dark [data-react-fancy-date-picker]:focus),\n:where(.dark [data-react-fancy-autocomplete] input:focus),\n:where(.dark [data-react-fancy-otp-input] input:focus),\n:where(.dark [data-react-fancy-time-picker] input:focus) {\n  border-color: #60a5fa;\n  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);\n}\n\n/* Field labels — brighter for readability */\n:where(.dark [data-react-fancy-field] > label:first-child) {\n  color: #f4f4f5;\n}\n\n/* Checkbox & radio */\n:where(.dark [data-react-fancy-checkbox] input),\n:where(.dark [data-react-fancy-radio-group] input) {\n  background-color: #1e1e24;\n  border-color: #3f3f46;\n}\n\n/* Switch unchecked track */\n:where(.dark [data-react-fancy-switch] button[aria-checked=\"false\"]) {\n  background-color: #3f3f46;\n}\n\n/* Input wrapper affixes */\n:where(.dark [data-react-fancy-input-wrapper] > span:first-child),\n:where(.dark [data-react-fancy-input-wrapper] > span:last-child) {\n  border-color: #3f3f46;\n  background-color: #27272a;\n}\n\n/* Date picker icon (calendar, clock) */\n:where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {\n  filter: invert(0.8);\n}\n\n/* ─── Overlays — inherent dark surfaces ──────────────────────────────────────\n   Dropdown / Menu / Popover / ContextMenu / MobileMenu flyout / Modal / Toast.\n   Mirrors the components' own `dark:` utilities (zinc-900 surface, zinc-700\n   border, zinc-300 text) so overlays render correctly in dark mode WITHOUT the\n   consumer @sourcing react-fancy. When those utilities ARE generated they win\n   (specificity 0 here), so there's no drift or double-styling. */\n:where(.dark [data-react-fancy-dropdown]),\n:where(.dark [data-react-fancy-menu]),\n:where(.dark [data-react-fancy-popover]),\n:where(.dark [data-react-fancy-context-menu]),\n:where(.dark [data-react-fancy-context-menu-sub-content]),\n:where(.dark [data-react-fancy-mobile-menu-flyout]),\n:where(.dark [data-react-fancy-modal]),\n:where(.dark [data-react-fancy-toast-item]) {\n  background-color: #18181b; /* zinc-900 */\n  border-color: #3f3f46; /* zinc-700 */\n  color: #d4d4d8; /* zinc-300 */\n}\n\n/* Overlay item hover states */\n:where(.dark [data-react-fancy-dropdown-item]:hover),\n:where(.dark [data-react-fancy-menu-item]:hover),\n:where(.dark [data-react-fancy-context-menu-item]:hover) {\n  background-color: #27272a; /* zinc-800 */\n}\n\n/* Overlay separators */\n:where(.dark [data-react-fancy-dropdown-separator]),\n:where(.dark [data-react-fancy-context-menu-separator]) {\n  background-color: #3f3f46; /* zinc-700 */\n}\n\n/* ─── Media viewer — transparency checkerboard ───────────────────────────────\n   Backdrop for <ImageViewer> / <MediaViewer> so transparent images read clearly.\n   Light + dark variants; the dark rule is wrapped in :where() (zero specificity)\n   so it ships out of the box without the consumer @sourcing react-fancy. */\n.fancy-checkerboard {\n  background-color: #ffffff;\n  background-image:\n    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),\n    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),\n    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);\n  background-size: 16px 16px;\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n}\n\n:where(.dark) .fancy-checkerboard {\n  background-color: #18181b; /* zinc-900 */\n  background-image:\n    linear-gradient(45deg, #27272a 25%, transparent 25%),\n    linear-gradient(-45deg, #27272a 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #27272a 75%),\n    linear-gradient(-45deg, transparent 75%, #27272a 75%);\n}\n\n@keyframes fancy-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-left {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-slide-right {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n.fancy-fade-in {\n  animation: fancy-fade-in 0.2s ease-out;\n}\n\n.fancy-slide-left {\n  animation: fancy-slide-left 0.3s ease-out;\n}\n\n.fancy-slide-right {\n  animation: fancy-slide-right 0.3s ease-out;\n}\n\n/* Overlay / floating animations */\n\n@keyframes fancy-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fancy-slide-up {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes fancy-toast-in {\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-collapse-open {\n  from {\n    grid-template-rows: 0fr;\n  }\n  to {\n    grid-template-rows: 1fr;\n  }\n}\n\n@keyframes fancy-collapse-close {\n  from {\n    grid-template-rows: 1fr;\n  }\n  to {\n    grid-template-rows: 0fr;\n  }\n}\n\n.fancy-scale-in {\n  animation: fancy-scale-in 0.15s ease-out;\n}\n\n.fancy-slide-up {\n  animation: fancy-slide-up 0.2s ease-out;\n}\n\n.fancy-fade-out {\n  animation: fancy-fade-out 0.15s ease-in forwards;\n}\n\n.fancy-toast-in {\n  animation: fancy-toast-in 0.3s ease-out;\n}\n\n.fancy-collapse-open {\n  animation: fancy-collapse-open 0.2s ease-out forwards;\n}\n\n.fancy-collapse-close {\n  animation: fancy-collapse-close 0.15s ease-in forwards;\n}\n\n/* Mobile flyout slide animations */\n\n@keyframes fancy-slide-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-slide-out-left {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes fancy-slide-in-right {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n/* Avatar glow — a looping halo ring (box-shadow only, no reflow). Color comes\n   from the --fancy-glow custom property set on the element. */\n@keyframes fancy-avatar-glow {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 55%, transparent);\n    opacity: 0.9;\n  }\n  70% {\n    box-shadow: 0 0 0 6px color-mix(in srgb, var(--fancy-glow, #a855f7) 0%, transparent);\n    opacity: 0.5;\n  }\n  100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 0%, transparent);\n    opacity: 0.9;\n  }\n}\n\n.fancy-avatar-glow {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  pointer-events: none;\n  box-shadow:\n    0 0 0 2px color-mix(in srgb, var(--fancy-glow, #a855f7) 70%, transparent),\n    0 0 10px 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 45%, transparent);\n  animation: fancy-avatar-glow 1.6s ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fancy-avatar-glow {\n    animation: none;\n  }\n}\n\n@keyframes fancy-slide-out-right {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n\n.fancy-slide-in-left {\n  animation: fancy-slide-in-left 0.25s ease-out;\n}\n\n.fancy-slide-out-left {\n  animation: fancy-slide-out-left 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-right {\n  animation: fancy-slide-in-right 0.25s ease-out;\n}\n\n.fancy-slide-out-right {\n  animation: fancy-slide-out-right 0.2s ease-in forwards;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/react-fancy — base styles + animations */\n\n/* ─── Input & Field defaults ─────────────────────────────────────────────────\n   Better UX out of the box: spacing between stacked fields, smooth transitions,\n   and polished dark-mode defaults. All overridable via data-attribute selectors.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Field spacing — adjacent fields get vertical breathing room */\n[data-react-fancy-field] + [data-react-fancy-field] {\n  margin-top: 1rem;\n}\n\n/* Smooth transitions on all text inputs, selects, and textareas */\n[data-react-fancy-input] input,\n[data-react-fancy-textarea],\n[data-react-fancy-select],\n[data-react-fancy-date-picker],\n[data-react-fancy-autocomplete] input,\n[data-react-fancy-pillbox],\n[data-react-fancy-otp-input] input,\n[data-react-fancy-time-picker] input,\n[data-react-fancy-color-picker] input {\n  transition: border-color 0.15s ease, box-shadow 0.15s ease,\n    background-color 0.15s ease;\n}\n\n/* Dark-mode input refinements — slightly darker bg for contrast against page */\n/* ─── Inherent dark-mode defaults ────────────────────────────────────────────\n   Every rule below is wrapped in :where() so it carries ZERO specificity, which\n   buys two properties at once:\n     1. Inherent — a sensible dark appearance ships out of the box, even when the\n        consumer's Tailwind build doesn't generate react-fancy's `dark:` utility\n        classes (e.g. they didn't @source the package). This is what lets the\n        overlays (Dropdown, Menu, Popover, …) go dark on their own.\n     2. Override-friendly — because specificity is 0, ANY consumer override wins:\n        a plain `dark:bg-…` utility, a custom class, or the component's own\n        `dark:` class (when it IS generated) all take precedence — no !important,\n        no need to target the data-attribute.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Inputs / selects / textareas — darker bg for contrast against the page */\n:where(.dark [data-react-fancy-input] input),\n:where(.dark [data-react-fancy-textarea]),\n:where(.dark [data-react-fancy-select]),\n:where(.dark [data-react-fancy-date-picker]),\n:where(.dark [data-react-fancy-autocomplete] input),\n:where(.dark [data-react-fancy-pillbox]),\n:where(.dark [data-react-fancy-otp-input] input),\n:where(.dark [data-react-fancy-time-picker] input) {\n  background-color: #1e1e24;\n  border-color: #3f3f46;\n}\n\n/* Focus ring — brighter border + subtle glow */\n:where(.dark [data-react-fancy-input] input:focus),\n:where(.dark [data-react-fancy-textarea]:focus),\n:where(.dark [data-react-fancy-select]:focus),\n:where(.dark [data-react-fancy-date-picker]:focus),\n:where(.dark [data-react-fancy-autocomplete] input:focus),\n:where(.dark [data-react-fancy-otp-input] input:focus),\n:where(.dark [data-react-fancy-time-picker] input:focus) {\n  border-color: #60a5fa;\n  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);\n}\n\n/* Field labels — brighter for readability */\n:where(.dark [data-react-fancy-field] > label:first-child) {\n  color: #f4f4f5;\n}\n\n/* Checkbox & radio */\n:where(.dark [data-react-fancy-checkbox] input),\n:where(.dark [data-react-fancy-radio-group] input) {\n  background-color: #1e1e24;\n  border-color: #3f3f46;\n}\n\n/* Switch unchecked track */\n:where(.dark [data-react-fancy-switch] button[aria-checked=\"false\"]) {\n  background-color: #3f3f46;\n}\n\n/* Input wrapper affixes */\n:where(.dark [data-react-fancy-input-wrapper] > span:first-child),\n:where(.dark [data-react-fancy-input-wrapper] > span:last-child) {\n  border-color: #3f3f46;\n  background-color: #27272a;\n}\n\n/* Date picker icon (calendar, clock) */\n:where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {\n  filter: invert(0.8);\n}\n\n/* ─── Overlays — inherent dark surfaces ──────────────────────────────────────\n   Dropdown / Menu / Popover / ContextMenu / MobileMenu flyout / Modal / Toast.\n   Mirrors the components' own `dark:` utilities (zinc-900 surface, zinc-700\n   border, zinc-300 text) so overlays render correctly in dark mode WITHOUT the\n   consumer @sourcing react-fancy. When those utilities ARE generated they win\n   (specificity 0 here), so there's no drift or double-styling. */\n:where(.dark [data-react-fancy-dropdown]),\n:where(.dark [data-react-fancy-menu]),\n:where(.dark [data-react-fancy-popover]),\n:where(.dark [data-react-fancy-context-menu]),\n:where(.dark [data-react-fancy-context-menu-sub-content]),\n:where(.dark [data-react-fancy-mobile-menu-flyout]),\n:where(.dark [data-react-fancy-modal]),\n:where(.dark [data-react-fancy-toast-item]) {\n  background-color: #18181b; /* zinc-900 */\n  border-color: #3f3f46; /* zinc-700 */\n  color: #d4d4d8; /* zinc-300 */\n}\n\n/* Overlay item hover states */\n:where(.dark [data-react-fancy-dropdown-item]:hover),\n:where(.dark [data-react-fancy-menu-item]:hover),\n:where(.dark [data-react-fancy-context-menu-item]:hover) {\n  background-color: #27272a; /* zinc-800 */\n}\n\n/* Overlay separators */\n:where(.dark [data-react-fancy-dropdown-separator]),\n:where(.dark [data-react-fancy-context-menu-separator]) {\n  background-color: #3f3f46; /* zinc-700 */\n}\n\n/* ─── Media viewer — transparency checkerboard ───────────────────────────────\n   Backdrop for <ImageViewer> / <MediaViewer> so transparent images read clearly.\n   Light + dark variants; the dark rule is wrapped in :where() (zero specificity)\n   so it ships out of the box without the consumer @sourcing react-fancy. */\n.fancy-checkerboard {\n  background-color: #ffffff;\n  background-image:\n    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),\n    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),\n    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);\n  background-size: 16px 16px;\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n}\n\n:where(.dark) .fancy-checkerboard {\n  background-color: #18181b; /* zinc-900 */\n  background-image:\n    linear-gradient(45deg, #27272a 25%, transparent 25%),\n    linear-gradient(-45deg, #27272a 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #27272a 75%),\n    linear-gradient(-45deg, transparent 75%, #27272a 75%);\n}\n\n@keyframes fancy-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-left {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-slide-right {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n.fancy-fade-in {\n  animation: fancy-fade-in 0.2s ease-out;\n}\n\n.fancy-slide-left {\n  animation: fancy-slide-left 0.3s ease-out;\n}\n\n.fancy-slide-right {\n  animation: fancy-slide-right 0.3s ease-out;\n}\n\n/* Overlay / floating animations */\n\n@keyframes fancy-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fancy-slide-up {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes fancy-toast-in {\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-collapse-open {\n  from {\n    grid-template-rows: 0fr;\n  }\n  to {\n    grid-template-rows: 1fr;\n  }\n}\n\n@keyframes fancy-collapse-close {\n  from {\n    grid-template-rows: 1fr;\n  }\n  to {\n    grid-template-rows: 0fr;\n  }\n}\n\n.fancy-scale-in {\n  animation: fancy-scale-in 0.15s ease-out;\n}\n\n.fancy-slide-up {\n  animation: fancy-slide-up 0.2s ease-out;\n}\n\n.fancy-fade-out {\n  animation: fancy-fade-out 0.15s ease-in forwards;\n}\n\n.fancy-toast-in {\n  animation: fancy-toast-in 0.3s ease-out;\n}\n\n.fancy-collapse-open {\n  animation: fancy-collapse-open 0.2s ease-out forwards;\n}\n\n.fancy-collapse-close {\n  animation: fancy-collapse-close 0.15s ease-in forwards;\n}\n\n/* Mobile flyout slide animations */\n\n@keyframes fancy-slide-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-slide-out-left {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes fancy-slide-in-right {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n/* Avatar glow — a looping halo ring (box-shadow only, no reflow). Color comes\n   from the --fancy-glow custom property set on the element. */\n@keyframes fancy-avatar-glow {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 55%, transparent);\n    opacity: 0.9;\n  }\n  70% {\n    box-shadow: 0 0 0 6px color-mix(in srgb, var(--fancy-glow, #a855f7) 0%, transparent);\n    opacity: 0.5;\n  }\n  100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 0%, transparent);\n    opacity: 0.9;\n  }\n}\n\n.fancy-avatar-glow {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  pointer-events: none;\n  box-shadow:\n    0 0 0 2px color-mix(in srgb, var(--fancy-glow, #a855f7) 70%, transparent),\n    0 0 10px 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 45%, transparent);\n  animation: fancy-avatar-glow 1.6s ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fancy-avatar-glow {\n    animation: none;\n  }\n}\n\n@keyframes fancy-slide-out-right {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n\n.fancy-slide-in-left {\n  animation: fancy-slide-in-left 0.25s ease-out;\n}\n\n.fancy-slide-out-left {\n  animation: fancy-slide-out-left 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-right {\n  animation: fancy-slide-in-right 0.25s ease-out;\n}\n\n.fancy-slide-out-right {\n  animation: fancy-slide-out-right 0.2s ease-in forwards;\n}\n\n/* ─── Marquee ────────────────────────────────────────────────────────────────\n   Edge-to-edge auto-scrolling strip. The track holds two identical copies of\n   the content; translateX(-50%) over one loop shifts exactly one copy, so the\n   wrap is seamless. Duration/gap/fade arrive as custom properties set by the\n   component. No animation under prefers-reduced-motion.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n[data-react-fancy-marquee] {\n  overflow: hidden;\n  width: 100%;\n}\n\n.fancy-marquee--fade {\n  -webkit-mask-image: linear-gradient(\n    to right,\n    transparent,\n    black var(--fancy-marquee-fade, 48px),\n    black calc(100% - var(--fancy-marquee-fade, 48px)),\n    transparent\n  );\n  mask-image: linear-gradient(\n    to right,\n    transparent,\n    black var(--fancy-marquee-fade, 48px),\n    black calc(100% - var(--fancy-marquee-fade, 48px)),\n    transparent\n  );\n}\n\n.fancy-marquee__track {\n  display: flex;\n  width: max-content;\n  animation: fancy-marquee var(--fancy-marquee-duration, 40s) linear infinite;\n  will-change: transform;\n}\n\n[data-react-fancy-marquee][data-direction=\"right\"] .fancy-marquee__track {\n  animation-direction: reverse;\n}\n\n.fancy-marquee--pause-hover:hover .fancy-marquee__track,\n[data-react-fancy-marquee][data-paused] .fancy-marquee__track {\n  animation-play-state: paused;\n}\n\n.fancy-marquee__group {\n  display: flex;\n  flex: none;\n}\n\n.fancy-marquee__unit {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--fancy-marquee-gap, 40px);\n  padding-inline-end: var(--fancy-marquee-gap, 40px);\n  white-space: nowrap;\n}\n\n.fancy-marquee__item,\n.fancy-marquee__separator {\n  flex: none;\n}\n\n@keyframes fancy-marquee {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-50%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fancy-marquee__track {\n    animation: none;\n  }\n}\n"],"mappings":"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","names":[]}

package/docs/AccordionPanel.md

@@ -22,22 +22,22 @@ import { AccordionPanel } from "@particle-academy/react-fancy";
 ```tsx
 <AccordionPanel orientation="horizontal" defaultValue={["wishlist"]}>
   <AccordionPanel.Section id="home" pinned>
-    <Action icon="home" />
+    <Button icon="home" />
   </AccordionPanel.Section>
 
   <AccordionPanel.Section id="wishlist">
     <AccordionPanel.Trigger />
     <AccordionPanel.Content>
-      <Action icon="list">Wishlist</Action>
-      <Action icon="mail">Feedback</Action>
-      <Action icon="file-text">Plans</Action>
+      <Button icon="list">Wishlist</Button>
+      <Button icon="mail">Feedback</Button>
+      <Button icon="file-text">Plans</Button>
     </AccordionPanel.Content>
   </AccordionPanel.Section>
 
   <AccordionPanel.Section id="board">
     <AccordionPanel.Trigger />
     <AccordionPanel.Content>
-      <Action icon="grid">Board</Action>
+      <Button icon="grid">Board</Button>
     </AccordionPanel.Content>
   </AccordionPanel.Section>
 </AccordionPanel>
@@ -55,7 +55,7 @@ When closed, the Trigger renders as a standalone chevron button. When open, the
     {({ open }) => (open ? "Collapse" : "Expand")}
   </AccordionPanel.Trigger>
   <AccordionPanel.Content>
-    <Action>Releases</Action>
+    <Button>Releases</Button>
   </AccordionPanel.Content>
 </AccordionPanel.Section>
 ```

package/docs/Action.md

@@ -10,86 +10,7 @@
 > ```
 >
 > `ActionProps` → `ButtonProps`, `ActionColor` → `ButtonColor` (also deprecated
-> aliases). Full, current documentation lives in **[Button](./Button.md)**.
+> aliases).
 
-A versatile button component with support for icons, emojis, avatars, badges, loading states, and color variants.
-
-## Import
-
-```tsx
-import { Action } from "@particle-academy/react-fancy"; // deprecated — prefer Button
-```
-
-## Basic Usage
-
-```tsx
-<Action>Click me</Action> // identical to <Button>Click me</Button>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| variant | `"default" \| "circle" \| "ghost"` | `"default"` | Shape/fill variant. `"ghost"` is transparent with subtle hover. |
-| color | `ActionColor` | - | Standalone color (overrides state colors). One of: `"blue"`, `"emerald"`, `"amber"`, `"red"`, `"violet"`, `"indigo"`, `"sky"`, `"rose"`, `"orange"`, `"zinc"` |
-| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Button size |
-| active | `boolean` | - | Active state (blue highlight) |
-| checked | `boolean` | - | Checked state (emerald highlight) |
-| warn | `boolean` | - | Warning state (amber highlight) |
-| alert | `boolean` | - | Pulsing animation on the entire button |
-| icon | `string` | - | Leading icon slug resolved via the Icon component |
-| iconTrailing | `string` | - | Trailing icon slug |
-| iconPlace | `string` | `"left"` | Icon placement. Supports: `"left"`, `"right"`, `"top"`, `"bottom"`, and compound positions like `"top left"`, `"bottom right"` |
-| alertIcon | `string` | - | Pulsing alert icon slug |
-| alertIconTrailing | `boolean` | - | Position alert icon on trailing side |
-| emoji | `string` | - | Leading emoji slug |
-| emojiTrailing | `string` | - | Trailing emoji slug |
-| avatar | `string` | - | Avatar image URL |
-| avatarTrailing | `boolean` | - | Position avatar on trailing side |
-| badge | `string` | - | Badge text |
-| badgeTrailing | `boolean` | - | Position badge on trailing side |
-| sort | `string` | `"eiab"` | Sort order of decorative elements: `e`=emoji, `i`=icon, `a`=avatar, `b`=badge |
-| loading | `boolean` | `false` | Show loading spinner (disables the button) |
-| disabled | `boolean` | - | Disable the button |
-| href | `string` | - | Render as an anchor tag instead of a button. Sanitized to a safe-protocol allow-list (since v2.5.0) — `javascript:`, `data:`, `vbscript:` are silently dropped and the component renders a `<button>` instead of an `<a>`. |
-
-Also extends all native `<button>` HTML attributes (except `color`).
-
-## Examples
-
-### Icon button with color
-
-```tsx
-<Action icon="pencil" color="blue" size="lg">
-  Edit
-</Action>
-```
-
-### Circle icon button
-
-```tsx
-<Action variant="circle" icon="plus" color="emerald" />
-```
-
-### Loading state with badge
-
-```tsx
-<Action loading badge="3" badgeTrailing>
-  Messages
-</Action>
-```
-
-### Link button with trailing icon
-
-```tsx
-<Action href="/docs" iconTrailing="arrow-right">
-  Read docs
-</Action>
-```
-
-### Ghost variant
-
-```tsx
-<Action variant="ghost" color="red" icon="trash-2">Delete</Action>
-<Action variant="ghost" icon="download">Export</Action>
-```
+Do not use `Action` in new code, examples, or generated snippets — always use
+`Button`. Full, current documentation lives in **[Button](./Button.md)**.

package/docs/Marquee.md

@@ -0,0 +1,96 @@
+# Marquee
+
+An edge-to-edge auto-scrolling strip of items (logos, capability words, tickers). Seamless wrap via internal content doubling, masked fade edges, decorative by default (`aria-hidden`), and no animation under `prefers-reduced-motion`.
+
+## Import
+
+```tsx
+import { Marquee } from "@particle-academy/react-fancy";
+```
+
+## Basic Usage
+
+```tsx
+<Marquee items={["Motion", "Film", "Scroll", "Brand", "Web"]} />
+```
+
+Or with children — each child is one strip item:
+
+```tsx
+<Marquee speed={60} pauseOnHover separator={<span>✸</span>}>
+  {providers.map((p) => (
+    <span key={p}>{p}</span>
+  ))}
+</Marquee>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| items | `ReactNode[]` | - | Data-driven items (alternative to children) |
+| children | `ReactNode` | - | Item nodes — each child is one strip item |
+| speed | `number` | `40` | Scroll speed in px/s — perceived speed stays constant regardless of content width. Ignored when `duration` is set |
+| duration | `number` | - | Explicit seconds per loop (overrides `speed`) |
+| direction | `"left" \| "right"` | `"left"` | Scroll direction — run opposing pairs by flipping one strip |
+| pauseOnHover | `boolean` | `false` | Pause the animation while hovered |
+| paused | `boolean` | `false` | Controlled pause — `true` freezes the strip |
+| gap | `number \| string` | `40` | Gap between items (number = px) |
+| fade | `boolean \| number \| string` | `true` | Masked fade at the strip edges: `true` (48px), `false` to disable, or a custom width |
+| separator | `ReactNode` | - | Optional node rendered between items |
+| angle | `number` | `0` | Tilt the whole strip in degrees (e.g. `-1` for the torn, off-axis band look). The strip widens slightly to stay edge-to-edge |
+| decorative | `boolean` | `true` | Decorative strips are `aria-hidden`. Set `false` to expose the content to assistive tech (the duplicated loop copies stay hidden either way) |
+| className | `string` | - | Additional CSS classes |
+
+Remaining props are forwarded to the root `<div>` (e.g. `aria-label` when `decorative={false}`).
+
+## Opposing pairs
+
+The Kinetic-style stacked strips that scroll against each other:
+
+```tsx
+<Marquee items={words} direction="left" />
+<Marquee items={words} direction="right" />
+```
+
+## The Kinetic ticker, in one element
+
+The Inspiration Gallery's Kinetic clients marquee — big type, magenta separator glyphs, reverse direction, masked edges — is one `<Marquee>`; typography and color simply inherit from `className`:
+
+```tsx
+<Marquee
+  items={clients}
+  direction="right"
+  fade="8%"
+  separator={<span className="text-fuchsia-500 text-[0.7em]">✸</span>}
+  className="border-y py-6 text-3xl font-bold tracking-tight text-zinc-400"
+/>
+```
+
+## Short content
+
+Content is automatically repeated until one loop copy fills the container, so a marquee with two short words still scrolls edge-to-edge with no blank wrap — no manual `[...items, ...items, ...items]` duplication.
+
+## Constant perceived speed
+
+`speed` is px/s: the component measures the content and derives the loop duration, so a short strip and a long strip move at the same visual pace. Pass `duration` instead when you want an exact seconds-per-loop:
+
+```tsx
+<Marquee items={logos} duration={30} />
+```
+
+## Accessibility
+
+- The strip is `aria-hidden` by default — marquees are usually decorative duplication of content that exists elsewhere on the page.
+- Set `decorative={false}` (plus an `aria-label`) to expose the first copy of the content; the internal duplicate copy is always `aria-hidden`.
+- Under `prefers-reduced-motion: reduce` the strip does not animate at all — the content simply sits as a static row.
+
+## Stable handles
+
+| Selector | Element |
+|----------|---------|
+| `[data-react-fancy-marquee]` | Root (also carries `data-direction`, `data-paused`) |
+| `[data-react-fancy-marquee-track]` | The animated track |
+| `[data-react-fancy-marquee-group]` | One content copy (two per track) |
+| `[data-react-fancy-marquee-item]` | One item (carries `data-index`) |
+| `[data-react-fancy-marquee-separator]` | Separator node between items |

package/docs/utilities.md

@@ -55,12 +55,13 @@ type Color =
 type Variant = "solid" | "outline" | "ghost" | "soft";
 ```
 
-### ActionColor
+### ButtonColor
+
+Standalone color accepted by `Button` and friends — an alias of `Color` (the
+full palette above). `ActionColor` remains as a deprecated alias.
 
 ```ts
-type ActionColor =
-  | "blue" | "emerald" | "amber" | "red" | "violet"
-  | "indigo" | "sky" | "rose" | "orange" | "zinc";
+type ButtonColor = Color;
 ```
 
 ### Placement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "4.11.0",
+  "version": "4.12.1",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",
@@ -70,9 +70,9 @@
     "@types/react-dom": "^19.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.7.0",
-    "tailwindcss": "^4.0.0"
+    "typescript": "^5.7.0"
   },
   "publishConfig": {
     "access": "public"