@particle-academy/react-fancy 5.8.0 → 5.9.0

package/dist/styles.css

@@ -1,141 +1,143 @@
 /* src/styles.css */
 @theme { --color-brand: var(--color-violet-600); --color-primary-50: var(--color-violet-50); --color-primary-100: var(--color-violet-100); --color-primary-200: var(--color-violet-200); --color-primary-300: var(--color-violet-300); --color-primary-400: var(--color-violet-400); --color-primary-500: var(--color-violet-500); --color-primary-600: var(--color-violet-600); --color-primary-700: var(--color-violet-700); --color-primary-800: var(--color-violet-800); --color-primary-900: var(--color-violet-900); --color-primary-950: var(--color-violet-950); --color-secondary-50: var(--color-zinc-50); --color-secondary-100: var(--color-zinc-100); --color-secondary-200: var(--color-zinc-200); --color-secondary-300: var(--color-zinc-300); --color-secondary-400: var(--color-zinc-400); --color-secondary-500: var(--color-zinc-500); --color-secondary-600: var(--color-zinc-600); --color-secondary-700: var(--color-zinc-700); --color-secondary-800: var(--color-zinc-800); --color-secondary-900: var(--color-zinc-900); --color-secondary-950: var(--color-zinc-950); }
-:where(.dark) {
-  --color-secondary-50: var(--color-zinc-950);
-  --color-secondary-100: var(--color-zinc-900);
-  --color-secondary-200: var(--color-zinc-800);
-  --color-secondary-300: var(--color-zinc-700);
-  --color-secondary-400: var(--color-zinc-600);
-  --color-secondary-500: var(--color-zinc-500);
-  --color-secondary-600: var(--color-zinc-400);
-  --color-secondary-700: var(--color-zinc-300);
-  --color-secondary-800: var(--color-zinc-200);
-  --color-secondary-900: var(--color-zinc-100);
-  --color-secondary-950: var(--color-zinc-50);
-}
-[data-react-fancy-field] + [data-react-fancy-field] {
-  margin-top: 1rem;
-}
-[data-react-fancy-input] input,
-[data-react-fancy-textarea],
-[data-react-fancy-select],
-[data-react-fancy-date-picker],
-[data-react-fancy-autocomplete] input,
-[data-react-fancy-pillbox],
-[data-react-fancy-otp-input] input,
-[data-react-fancy-time-picker] input,
-[data-react-fancy-color-picker] input {
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease,
-    background-color 0.15s ease;
-}
-:where(.dark [data-react-fancy-input] input),
-:where(.dark [data-react-fancy-textarea]),
-:where(.dark [data-react-fancy-select]),
-:where(.dark [data-react-fancy-date-picker]),
-:where(.dark [data-react-fancy-autocomplete] input),
-:where(.dark [data-react-fancy-pillbox]),
-:where(.dark [data-react-fancy-otp-input] input),
-:where(.dark [data-react-fancy-time-picker] input) {
-  background-color: #1e1e24;
-  border-color: #3f3f46;
-}
-:where(.dark [data-react-fancy-input] input:focus),
-:where(.dark [data-react-fancy-textarea]:focus),
-:where(.dark [data-react-fancy-select]:focus),
-:where(.dark [data-react-fancy-date-picker]:focus),
-:where(.dark [data-react-fancy-autocomplete] input:focus),
-:where(.dark [data-react-fancy-otp-input] input:focus),
-:where(.dark [data-react-fancy-time-picker] input:focus) {
-  border-color: #60a5fa;
-  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
-}
-:where(.dark [data-react-fancy-field] > label:first-child) {
-  color: #f4f4f5;
-}
-:where(.dark [data-react-fancy-checkbox] input),
-:where(.dark [data-react-fancy-radio-group] input) {
-  background-color: #1e1e24;
-  border-color: #3f3f46;
-}
-:where(.dark [data-react-fancy-switch] button[aria-checked=false]) {
-  background-color: #3f3f46;
-}
-:where(.dark [data-react-fancy-input-wrapper] > span:first-child),
-:where(.dark [data-react-fancy-input-wrapper] > span:last-child) {
-  border-color: #3f3f46;
-  background-color: #27272a;
-}
-:where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {
-  filter: invert(0.8);
-}
-:where(.dark [data-react-fancy-dropdown]),
-:where(.dark [data-react-fancy-menu]),
-:where(.dark [data-react-fancy-popover]),
-:where(.dark [data-react-fancy-context-menu]),
-:where(.dark [data-react-fancy-context-menu-sub-content]),
-:where(.dark [data-react-fancy-mobile-menu-flyout]),
-:where(.dark [data-react-fancy-modal]),
-:where(.dark [data-react-fancy-toast-item]) {
-  background-color: #18181b;
-  border-color: #3f3f46;
-  color: #d4d4d8;
-}
-:where(.dark [data-react-fancy-dropdown-item]:hover),
-:where(.dark [data-react-fancy-menu-item]:hover),
-:where(.dark [data-react-fancy-context-menu-item]:hover) {
-  background-color: #27272a;
-}
-:where(.dark [data-react-fancy-dropdown-separator]),
-:where(.dark [data-react-fancy-context-menu-separator]) {
-  background-color: #3f3f46;
-}
-.fancy-checkerboard {
-  background-color: #ffffff;
-  background-image:
-    linear-gradient(
-      45deg,
-      #e5e7eb 25%,
-      transparent 25%),
-    linear-gradient(
-      -45deg,
-      #e5e7eb 25%,
-      transparent 25%),
-    linear-gradient(
-      45deg,
-      transparent 75%,
-      #e5e7eb 75%),
-    linear-gradient(
-      -45deg,
-      transparent 75%,
-      #e5e7eb 75%);
-  background-size: 16px 16px;
-  background-position:
-    0 0,
-    0 8px,
-    8px -8px,
-    -8px 0;
-}
-:where(.dark) .fancy-checkerboard {
-  background-color: #18181b;
-  background-image:
-    linear-gradient(
-      45deg,
-      #27272a 25%,
-      transparent 25%),
-    linear-gradient(
-      -45deg,
-      #27272a 25%,
-      transparent 25%),
-    linear-gradient(
-      45deg,
-      transparent 75%,
-      #27272a 75%),
-    linear-gradient(
-      -45deg,
-      transparent 75%,
-      #27272a 75%);
+@layer base {
+  :where(.dark) {
+    --color-secondary-50: var(--color-zinc-950);
+    --color-secondary-100: var(--color-zinc-900);
+    --color-secondary-200: var(--color-zinc-800);
+    --color-secondary-300: var(--color-zinc-700);
+    --color-secondary-400: var(--color-zinc-600);
+    --color-secondary-500: var(--color-zinc-500);
+    --color-secondary-600: var(--color-zinc-400);
+    --color-secondary-700: var(--color-zinc-300);
+    --color-secondary-800: var(--color-zinc-200);
+    --color-secondary-900: var(--color-zinc-100);
+    --color-secondary-950: var(--color-zinc-50);
+  }
+  [data-react-fancy-field] + [data-react-fancy-field] {
+    margin-top: 1rem;
+  }
+  [data-react-fancy-input] input,
+  [data-react-fancy-textarea],
+  [data-react-fancy-select],
+  [data-react-fancy-date-picker],
+  [data-react-fancy-autocomplete] input,
+  [data-react-fancy-pillbox],
+  [data-react-fancy-otp-input] input,
+  [data-react-fancy-time-picker] input,
+  [data-react-fancy-color-picker] input {
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease,
+      background-color 0.15s ease;
+  }
+  :where(.dark [data-react-fancy-input] input),
+  :where(.dark [data-react-fancy-textarea]),
+  :where(.dark [data-react-fancy-select]),
+  :where(.dark [data-react-fancy-date-picker]),
+  :where(.dark [data-react-fancy-autocomplete] input),
+  :where(.dark [data-react-fancy-pillbox]),
+  :where(.dark [data-react-fancy-otp-input] input),
+  :where(.dark [data-react-fancy-time-picker] input) {
+    background-color: #1e1e24;
+    border-color: #3f3f46;
+  }
+  :where(.dark [data-react-fancy-input] input:focus),
+  :where(.dark [data-react-fancy-textarea]:focus),
+  :where(.dark [data-react-fancy-select]:focus),
+  :where(.dark [data-react-fancy-date-picker]:focus),
+  :where(.dark [data-react-fancy-autocomplete] input:focus),
+  :where(.dark [data-react-fancy-otp-input] input:focus),
+  :where(.dark [data-react-fancy-time-picker] input:focus) {
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
+  }
+  :where(.dark [data-react-fancy-field] > label:first-child) {
+    color: #f4f4f5;
+  }
+  :where(.dark [data-react-fancy-checkbox] input),
+  :where(.dark [data-react-fancy-radio-group] input) {
+    background-color: #1e1e24;
+    border-color: #3f3f46;
+  }
+  :where(.dark [data-react-fancy-switch] button[aria-checked=false]) {
+    background-color: #3f3f46;
+  }
+  :where(.dark [data-react-fancy-input-wrapper] > span:first-child),
+  :where(.dark [data-react-fancy-input-wrapper] > span:last-child) {
+    border-color: #3f3f46;
+    background-color: #27272a;
+  }
+  :where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {
+    filter: invert(0.8);
+  }
+  :where(.dark [data-react-fancy-dropdown]),
+  :where(.dark [data-react-fancy-menu]),
+  :where(.dark [data-react-fancy-popover]),
+  :where(.dark [data-react-fancy-context-menu]),
+  :where(.dark [data-react-fancy-context-menu-sub-content]),
+  :where(.dark [data-react-fancy-mobile-menu-flyout]),
+  :where(.dark [data-react-fancy-modal]),
+  :where(.dark [data-react-fancy-toast-item]) {
+    background-color: #18181b;
+    border-color: #3f3f46;
+    color: #d4d4d8;
+  }
+  :where(.dark [data-react-fancy-dropdown-item]:hover),
+  :where(.dark [data-react-fancy-menu-item]:hover),
+  :where(.dark [data-react-fancy-context-menu-item]:hover) {
+    background-color: #27272a;
+  }
+  :where(.dark [data-react-fancy-dropdown-separator]),
+  :where(.dark [data-react-fancy-context-menu-separator]) {
+    background-color: #3f3f46;
+  }
+  .fancy-checkerboard {
+    background-color: #ffffff;
+    background-image:
+      linear-gradient(
+        45deg,
+        #e5e7eb 25%,
+        transparent 25%),
+      linear-gradient(
+        -45deg,
+        #e5e7eb 25%,
+        transparent 25%),
+      linear-gradient(
+        45deg,
+        transparent 75%,
+        #e5e7eb 75%),
+      linear-gradient(
+        -45deg,
+        transparent 75%,
+        #e5e7eb 75%);
+    background-size: 16px 16px;
+    background-position:
+      0 0,
+      0 8px,
+      8px -8px,
+      -8px 0;
+  }
+  :where(.dark) .fancy-checkerboard {
+    background-color: #18181b;
+    background-image:
+      linear-gradient(
+        45deg,
+        #27272a 25%,
+        transparent 25%),
+      linear-gradient(
+        -45deg,
+        #27272a 25%,
+        transparent 25%),
+      linear-gradient(
+        45deg,
+        transparent 75%,
+        #27272a 75%),
+      linear-gradient(
+        -45deg,
+        transparent 75%,
+        #27272a 75%);
+  }
 }
 @keyframes fancy-fade-in {
   from {
@@ -163,14 +165,16 @@
     transform: translateX(0);
   }
 }
-.fancy-fade-in {
-  animation: fancy-fade-in 0.2s ease-out;
-}
-.fancy-slide-left {
-  animation: fancy-slide-left 0.3s ease-out;
-}
-.fancy-slide-right {
-  animation: fancy-slide-right 0.3s ease-out;
+@layer base {
+  .fancy-fade-in {
+    animation: fancy-fade-in 0.2s ease-out;
+  }
+  .fancy-slide-left {
+    animation: fancy-slide-left 0.3s ease-out;
+  }
+  .fancy-slide-right {
+    animation: fancy-slide-right 0.3s ease-out;
+  }
 }
 @keyframes fancy-scale-in {
   from {
@@ -226,23 +230,25 @@
     grid-template-rows: 0fr;
   }
 }
-.fancy-scale-in {
-  animation: fancy-scale-in 0.15s ease-out;
-}
-.fancy-slide-up {
-  animation: fancy-slide-up 0.2s ease-out;
-}
-.fancy-fade-out {
-  animation: fancy-fade-out 0.15s ease-in forwards;
-}
-.fancy-toast-in {
-  animation: fancy-toast-in 0.3s ease-out;
-}
-.fancy-collapse-open {
-  animation: fancy-collapse-open 0.2s ease-out forwards;
-}
-.fancy-collapse-close {
-  animation: fancy-collapse-close 0.15s ease-in forwards;
+@layer base {
+  .fancy-scale-in {
+    animation: fancy-scale-in 0.15s ease-out;
+  }
+  .fancy-slide-up {
+    animation: fancy-slide-up 0.2s ease-out;
+  }
+  .fancy-fade-out {
+    animation: fancy-fade-out 0.15s ease-in forwards;
+  }
+  .fancy-toast-in {
+    animation: fancy-toast-in 0.3s ease-out;
+  }
+  .fancy-collapse-open {
+    animation: fancy-collapse-open 0.2s ease-out forwards;
+  }
+  .fancy-collapse-close {
+    animation: fancy-collapse-close 0.15s ease-in forwards;
+  }
 }
 @keyframes fancy-slide-in-left {
   from {
@@ -282,17 +288,19 @@
     opacity: 0.9;
   }
 }
-.fancy-avatar-glow {
-  position: absolute;
-  inset: 0;
-  border-radius: 9999px;
-  pointer-events: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fancy-glow, #a855f7) 70%, transparent), 0 0 10px 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 45%, transparent);
-  animation: fancy-avatar-glow 1.6s ease-out infinite;
-}
-@media (prefers-reduced-motion: reduce) {
+@layer base {
   .fancy-avatar-glow {
-    animation: none;
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+    pointer-events: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fancy-glow, #a855f7) 70%, transparent), 0 0 10px 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 45%, transparent);
+    animation: fancy-avatar-glow 1.6s ease-out infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fancy-avatar-glow {
+      animation: none;
+    }
   }
 }
 @keyframes fancy-slide-out-right {
@@ -303,17 +311,19 @@
     transform: translateX(100%);
   }
 }
-.fancy-slide-in-left {
-  animation: fancy-slide-in-left 0.25s ease-out;
-}
-.fancy-slide-out-left {
-  animation: fancy-slide-out-left 0.2s ease-in forwards;
-}
-.fancy-slide-in-right {
-  animation: fancy-slide-in-right 0.25s ease-out;
-}
-.fancy-slide-out-right {
-  animation: fancy-slide-out-right 0.2s ease-in forwards;
+@layer base {
+  .fancy-slide-in-left {
+    animation: fancy-slide-in-left 0.25s ease-out;
+  }
+  .fancy-slide-out-left {
+    animation: fancy-slide-out-left 0.2s ease-in forwards;
+  }
+  .fancy-slide-in-right {
+    animation: fancy-slide-in-right 0.25s ease-out;
+  }
+  .fancy-slide-out-right {
+    animation: fancy-slide-out-right 0.2s ease-in forwards;
+  }
 }
 @keyframes fancy-slide-in-top {
   from {
@@ -347,78 +357,80 @@
     transform: translateY(100%);
   }
 }
-.fancy-slide-in-top {
-  animation: fancy-slide-in-top 0.25s ease-out;
-}
-.fancy-slide-out-top {
-  animation: fancy-slide-out-top 0.2s ease-in forwards;
-}
-.fancy-slide-in-bottom {
-  animation: fancy-slide-in-bottom 0.25s ease-out;
-}
-.fancy-slide-out-bottom {
-  animation: fancy-slide-out-bottom 0.2s ease-in forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .fancy-slide-in-left,
-  .fancy-slide-out-left,
-  .fancy-slide-in-right,
-  .fancy-slide-out-right,
-  .fancy-slide-in-top,
-  .fancy-slide-out-top,
-  .fancy-slide-in-bottom,
+@layer base {
+  .fancy-slide-in-top {
+    animation: fancy-slide-in-top 0.25s ease-out;
+  }
+  .fancy-slide-out-top {
+    animation: fancy-slide-out-top 0.2s ease-in forwards;
+  }
+  .fancy-slide-in-bottom {
+    animation: fancy-slide-in-bottom 0.25s ease-out;
+  }
   .fancy-slide-out-bottom {
-    animation-duration: 0.01ms;
+    animation: fancy-slide-out-bottom 0.2s ease-in forwards;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fancy-slide-in-left,
+    .fancy-slide-out-left,
+    .fancy-slide-in-right,
+    .fancy-slide-out-right,
+    .fancy-slide-in-top,
+    .fancy-slide-out-top,
+    .fancy-slide-in-bottom,
+    .fancy-slide-out-bottom {
+      animation-duration: 0.01ms;
+    }
+  }
+  [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;
   }
-}
-[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 {
@@ -428,9 +440,11 @@
     transform: translateX(-50%);
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  .fancy-marquee__track {
-    animation: none;
+@layer base {
+  @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/* ─── Brand colour scheme ────────────────────────────────────────────────────\n   Three token families every Fancy package can rely on, so a component never\n   has to invent a palette or hardcode a literal:\n\n     brand         one accent — the thing a consumer rebrands first\n     primary-*     the accent as a full 50→950 scale\n     secondary-*   the NEUTRAL scale for surfaces, borders and body text\n\n   Why this exists: packages were already writing `bg-brand`, `text-primary-600`\n   and `border-secondary-200` against tokens nothing defined. Tailwind generated\n   no such utility, the class silently resolved to nothing, and the component\n   rendered unstyled — correct markup, no colour, no error. Defining them here\n   turns those classes into a contract instead of a hope.\n\n   SECONDARY INVERTS WITH THE THEME. `text-secondary-900` means \"strongest\n   foreground\", not \"nearly black\" — so it stays readable on a dark surface.\n   That distinction is the whole point: mixing a literal background (`bg-white`)\n   with a semantic foreground (`text-secondary-900`) is what produced\n   white-on-white in a dark host.\n\n   OVERRIDE IT. Redefine any of these in your own `@theme` (or on `:root`) and\n   yours wins — nothing here is `!important`, and the utilities read the variable\n   rather than baking a value in:\n\n     @theme { --color-brand: var(--color-emerald-600); }\n   ──────────────────────────────────────────────────────────────────────────── */\n@theme {\n  --color-brand: var(--color-violet-600);\n\n  --color-primary-50: var(--color-violet-50);\n  --color-primary-100: var(--color-violet-100);\n  --color-primary-200: var(--color-violet-200);\n  --color-primary-300: var(--color-violet-300);\n  --color-primary-400: var(--color-violet-400);\n  --color-primary-500: var(--color-violet-500);\n  --color-primary-600: var(--color-violet-600);\n  --color-primary-700: var(--color-violet-700);\n  --color-primary-800: var(--color-violet-800);\n  --color-primary-900: var(--color-violet-900);\n  --color-primary-950: var(--color-violet-950);\n\n  /* Light-theme defaults: 50 = faintest surface, 900/950 = strongest text. */\n  --color-secondary-50: var(--color-zinc-50);\n  --color-secondary-100: var(--color-zinc-100);\n  --color-secondary-200: var(--color-zinc-200);\n  --color-secondary-300: var(--color-zinc-300);\n  --color-secondary-400: var(--color-zinc-400);\n  --color-secondary-500: var(--color-zinc-500);\n  --color-secondary-600: var(--color-zinc-600);\n  --color-secondary-700: var(--color-zinc-700);\n  --color-secondary-800: var(--color-zinc-800);\n  --color-secondary-900: var(--color-zinc-900);\n  --color-secondary-950: var(--color-zinc-950);\n}\n\n/* Dark: the neutral scale flips, so \"900\" still means strongest foreground and\n   \"50\" still means faintest surface. Wrapped in :where() for zero specificity,\n   matching the rest of this file — any consumer override beats it. */\n:where(.dark) {\n  --color-secondary-50: var(--color-zinc-950);\n  --color-secondary-100: var(--color-zinc-900);\n  --color-secondary-200: var(--color-zinc-800);\n  --color-secondary-300: var(--color-zinc-700);\n  --color-secondary-400: var(--color-zinc-600);\n  --color-secondary-500: var(--color-zinc-500);\n  --color-secondary-600: var(--color-zinc-400);\n  --color-secondary-700: var(--color-zinc-300);\n  --color-secondary-800: var(--color-zinc-200);\n  --color-secondary-900: var(--color-zinc-100);\n  --color-secondary-950: var(--color-zinc-50);\n}\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/* Vertical drawer edges. The horizontal pair above predates Drawer (it was\n   built for MobileMenu.Flyout, which only ever opened left/right); these\n   complete the set so `side=\"top\"`/`side=\"bottom\"` animate rather than pop. */\n\n@keyframes fancy-slide-in-top {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-out-top {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes fancy-slide-in-bottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-out-bottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n\n.fancy-slide-in-top {\n  animation: fancy-slide-in-top 0.25s ease-out;\n}\n\n.fancy-slide-out-top {\n  animation: fancy-slide-out-top 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-bottom {\n  animation: fancy-slide-in-bottom 0.25s ease-out;\n}\n\n.fancy-slide-out-bottom {\n  animation: fancy-slide-out-bottom 0.2s ease-in forwards;\n}\n\n/* Reduced motion collapses the travel — but must NOT use `animation: none`.\n   `useAnimation` unmounts on `animationend`, so removing the animation removes\n   the event, and a closed drawer would stay in the DOM forever. A ~0 duration\n   still fires it. */\n@media (prefers-reduced-motion: reduce) {\n  .fancy-slide-in-left,\n  .fancy-slide-out-left,\n  .fancy-slide-in-right,\n  .fancy-slide-out-right,\n  .fancy-slide-in-top,\n  .fancy-slide-out-top,\n  .fancy-slide-in-bottom,\n  .fancy-slide-out-bottom {\n    animation-duration: 0.01ms;\n  }\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":[]}
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/react-fancy — base styles + animations */\n\n/* ─── Brand colour scheme ────────────────────────────────────────────────────\n   Three token families every Fancy package can rely on, so a component never\n   has to invent a palette or hardcode a literal:\n\n     brand         one accent — the thing a consumer rebrands first\n     primary-*     the accent as a full 50→950 scale\n     secondary-*   the NEUTRAL scale for surfaces, borders and body text\n\n   Why this exists: packages were already writing `bg-brand`, `text-primary-600`\n   and `border-secondary-200` against tokens nothing defined. Tailwind generated\n   no such utility, the class silently resolved to nothing, and the component\n   rendered unstyled — correct markup, no colour, no error. Defining them here\n   turns those classes into a contract instead of a hope.\n\n   SECONDARY INVERTS WITH THE THEME. `text-secondary-900` means \"strongest\n   foreground\", not \"nearly black\" — so it stays readable on a dark surface.\n   That distinction is the whole point: mixing a literal background (`bg-white`)\n   with a semantic foreground (`text-secondary-900`) is what produced\n   white-on-white in a dark host.\n\n   OVERRIDE IT. Redefine any of these in your own `@theme` (or on `:root`) and\n   yours wins — nothing here is `!important`, and the utilities read the variable\n   rather than baking a value in:\n\n     @theme { --color-brand: var(--color-emerald-600); }\n   ──────────────────────────────────────────────────────────────────────────── */\n@theme {\n  --color-brand: var(--color-violet-600);\n\n  --color-primary-50: var(--color-violet-50);\n  --color-primary-100: var(--color-violet-100);\n  --color-primary-200: var(--color-violet-200);\n  --color-primary-300: var(--color-violet-300);\n  --color-primary-400: var(--color-violet-400);\n  --color-primary-500: var(--color-violet-500);\n  --color-primary-600: var(--color-violet-600);\n  --color-primary-700: var(--color-violet-700);\n  --color-primary-800: var(--color-violet-800);\n  --color-primary-900: var(--color-violet-900);\n  --color-primary-950: var(--color-violet-950);\n\n  /* Light-theme defaults: 50 = faintest surface, 900/950 = strongest text. */\n  --color-secondary-50: var(--color-zinc-50);\n  --color-secondary-100: var(--color-zinc-100);\n  --color-secondary-200: var(--color-zinc-200);\n  --color-secondary-300: var(--color-zinc-300);\n  --color-secondary-400: var(--color-zinc-400);\n  --color-secondary-500: var(--color-zinc-500);\n  --color-secondary-600: var(--color-zinc-600);\n  --color-secondary-700: var(--color-zinc-700);\n  --color-secondary-800: var(--color-zinc-800);\n  --color-secondary-900: var(--color-zinc-900);\n  --color-secondary-950: var(--color-zinc-950);\n}@layer base {\n\n\n/* Dark: the neutral scale flips, so \"900\" still means strongest foreground and\n   \"50\" still means faintest surface. Wrapped in :where() for zero specificity,\n   matching the rest of this file — any consumer override beats it. */\n:where(.dark) {\n  --color-secondary-50: var(--color-zinc-950);\n  --color-secondary-100: var(--color-zinc-900);\n  --color-secondary-200: var(--color-zinc-800);\n  --color-secondary-300: var(--color-zinc-700);\n  --color-secondary-400: var(--color-zinc-600);\n  --color-secondary-500: var(--color-zinc-500);\n  --color-secondary-600: var(--color-zinc-400);\n  --color-secondary-700: var(--color-zinc-300);\n  --color-secondary-800: var(--color-zinc-200);\n  --color-secondary-900: var(--color-zinc-100);\n  --color-secondary-950: var(--color-zinc-50);\n}\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\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}@layer base {\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\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}@layer base {\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\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}@layer base {\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\n\n@keyframes fancy-slide-out-right {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}@layer base {\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\n\n/* Vertical drawer edges. The horizontal pair above predates Drawer (it was\n   built for MobileMenu.Flyout, which only ever opened left/right); these\n   complete the set so `side=\"top\"`/`side=\"bottom\"` animate rather than pop. */\n\n@keyframes fancy-slide-in-top {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-out-top {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes fancy-slide-in-bottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-out-bottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}@layer base {\n\n\n.fancy-slide-in-top {\n  animation: fancy-slide-in-top 0.25s ease-out;\n}\n\n.fancy-slide-out-top {\n  animation: fancy-slide-out-top 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-bottom {\n  animation: fancy-slide-in-bottom 0.25s ease-out;\n}\n\n.fancy-slide-out-bottom {\n  animation: fancy-slide-out-bottom 0.2s ease-in forwards;\n}\n\n/* Reduced motion collapses the travel — but must NOT use `animation: none`.\n   `useAnimation` unmounts on `animationend`, so removing the animation removes\n   the event, and a closed drawer would stay in the DOM forever. A ~0 duration\n   still fires it. */\n@media (prefers-reduced-motion: reduce) {\n  .fancy-slide-in-left,\n  .fancy-slide-out-left,\n  .fancy-slide-in-right,\n  .fancy-slide-out-right,\n  .fancy-slide-in-top,\n  .fancy-slide-out-top,\n  .fancy-slide-in-bottom,\n  .fancy-slide-out-bottom {\n    animation-duration: 0.01ms;\n  }\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\n\n@keyframes fancy-marquee {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-50%);\n  }\n}@layer base {\n\n\n@media (prefers-reduced-motion: reduce) {\n  .fancy-marquee__track {\n    animation: none;\n  }\n}\n}\n\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "description": "React UI component library for Human+ UX \u2014 controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",