opus-react 0.4.6 → 0.5.0

package/dist/index.css

@@ -4657,10 +4657,65 @@
   padding: 6px;
   display: grid;
   position: absolute;
-  overflow: hidden;
+  overflow: visible;
+}
+
+.opus_UUVDVQ_pointer {
+  z-index: 2;
+  pointer-events: none;
+  width: 18px;
+  height: 10px;
+  display: block;
+  position: absolute;
+  overflow: visible;
+}
+
+.opus_UUVDVQ_menu[data-show-pointer="true"] {
+  --opus-pointed-menu-surface: color-mix(in srgb,
+    var(--opus-accent) 5%,
+    #070b18);
+  background: radial-gradient(circle at 10% 0%,
+      color-mix(in srgb, var(--opus-accent) 14%, transparent),
+      transparent 34%),
+    var(--opus-pointed-menu-surface);
+  backdrop-filter: none;
+}
+
+.opus_UUVDVQ_menu[data-show-pointer="true"][data-theme="light"] {
+  --opus-pointed-menu-surface: color-mix(in srgb,
+    var(--opus-accent) 4%,
+    #f8fafc);
+}
+
+.opus_UUVDVQ_menu[data-placement="bottom-start"] > .opus_UUVDVQ_pointer {
+  top: -9.5px;
+  left: 14px;
+}
+
+.opus_UUVDVQ_menu[data-placement="bottom-start"] > .opus_UUVDVQ_pointer path:first-child {
+  fill: color-mix(in srgb,
+    var(--opus-accent) 14%,
+    var(--opus-pointed-menu-surface));
+}
+
+.opus_UUVDVQ_menu[data-placement="bottom-end"] > .opus_UUVDVQ_pointer {
+  top: -9px;
+  right: 14px;
+}
+
+.opus_UUVDVQ_menu[data-placement="top-start"] > .opus_UUVDVQ_pointer {
+  bottom: -9px;
+  left: 14px;
+  transform: rotate(180deg);
 }
 
-.opus_UUVDVQ_menu > * {
+.opus_UUVDVQ_menu[data-placement="top-end"] > .opus_UUVDVQ_pointer {
+  bottom: -9px;
+  right: 14px;
+  transform: rotate(180deg);
+}
+
+.opus_UUVDVQ_menu > :not(.opus_UUVDVQ_pointer) {
   z-index: 1;
   position: relative;
 }
@@ -4717,6 +4772,15 @@
   right: 0;
 }
 
+.opus_UUVDVQ_menu[data-portaled="true"][data-placement="top-start"] {
+  bottom: auto;
+}
+
+.opus_UUVDVQ_menu[data-portaled="true"][data-placement="top-end"] {
+  bottom: auto;
+  right: auto;
+}
+
 .opus_UUVDVQ_item {
   border-radius: var(--opus-input-radius);
   width: 100%;
@@ -19973,17 +20037,20 @@ button.opus_Fxxd7-_card:focus-visible {
   --clock-number-radius: 92px;
   --clock-text: #f8fafc;
   --clock-muted: #94a3b8;
-  --clock-face-border: #ffffff21;
-  --clock-face-bg: radial-gradient(circle at 40% 32%, #26364d 0%, #111c2e 45%, #08111f 100%);
+  --clock-face-border: color-mix(in srgb, var(--opus-accent) 32%, #ffffff21);
+  --clock-face-bg: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--opus-accent) 28%, #26364d) 0%, color-mix(in srgb, var(--opus-accent) 14%, #111c2e) 45%, #08111f 100%);
   --clock-face-shadow: 0 24px 60px #0006,
+    0 0 40px color-mix(in srgb, var(--opus-accent) 18%, transparent),
     inset 0 0 35px #00000073,
     inset 0 1px 1px #ffffff1a;
-  --clock-tick: #cbd5e1;
-  --clock-tick-opacity: .35;
-  --clock-number: #e2e8f0;
-  --clock-hour-hand-color: #f8fafc;
-  --clock-minute-hand-color: #cbd5e1;
+  --clock-tick: color-mix(in srgb, var(--opus-accent) 35%, #cbd5e1);
+  --clock-tick-opacity: .4;
+  --clock-hour-tick: var(--opus-accent);
+  --clock-number: color-mix(in srgb, var(--opus-accent) 22%, #e2e8f0);
+  --clock-hour-hand-color: color-mix(in srgb, var(--opus-accent) 18%, #f8fafc);
+  --clock-minute-hand-color: color-mix(in srgb, var(--opus-accent) 28%, #cbd5e1);
   --clock-hand-shadow: 0 2px 8px #0000004d;
+  --clock-digital: color-mix(in srgb, var(--opus-accent) 28%, var(--clock-text));
   color: var(--clock-text);
   font: inherit;
   flex-direction: column;
@@ -19994,17 +20061,20 @@ button.opus_Fxxd7-_card:focus-visible {
 [data-preview-root][data-theme="light"] .opus_Lj91mC_root, [data-theme="light"] .opus_Lj91mC_root {
   --clock-text: var(--opus-text);
   --clock-muted: var(--opus-muted);
-  --clock-face-border: color-mix(in srgb, var(--opus-border) 85%, transparent);
-  --clock-face-bg: radial-gradient(circle at 40% 32%, #fff 0%, #f4f7fb 42%, #e6ebf3 100%);
+  --clock-face-border: color-mix(in srgb, var(--opus-accent) 28%, var(--opus-border));
+  --clock-face-bg: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--opus-accent) 12%, #fff) 0%, color-mix(in srgb, var(--opus-accent) 8%, #f4f7fb) 42%, color-mix(in srgb, var(--opus-accent) 6%, #e6ebf3) 100%);
   --clock-face-shadow: 0 20px 48px color-mix(in srgb, var(--opus-text) 10%, transparent),
+    0 0 36px color-mix(in srgb, var(--opus-accent) 14%, transparent),
     inset 0 0 28px color-mix(in srgb, var(--opus-text) 6%, transparent),
     inset 0 1px 1px #fffffff2;
-  --clock-tick: color-mix(in srgb, var(--opus-text) 42%, transparent);
-  --clock-tick-opacity: .45;
-  --clock-number: var(--opus-text);
-  --clock-hour-hand-color: var(--opus-text);
-  --clock-minute-hand-color: color-mix(in srgb, var(--opus-text) 62%, var(--opus-muted));
+  --clock-tick: color-mix(in srgb, var(--opus-accent) 40%, var(--opus-text));
+  --clock-tick-opacity: .35;
+  --clock-hour-tick: var(--opus-accent);
+  --clock-number: color-mix(in srgb, var(--opus-accent) 35%, var(--opus-text));
+  --clock-hour-hand-color: color-mix(in srgb, var(--opus-accent) 22%, var(--opus-text));
+  --clock-minute-hand-color: color-mix(in srgb, var(--opus-accent) 40%, var(--opus-muted));
   --clock-hand-shadow: 0 2px 8px color-mix(in srgb, var(--opus-text) 14%, transparent);
+  --clock-digital: color-mix(in srgb, var(--opus-accent) 45%, var(--opus-text));
 }
 
 .opus_Lj91mC_root[data-size="sm"] {
@@ -20054,8 +20124,10 @@ button.opus_Fxxd7-_card:focus-visible {
 
 .opus_Lj91mC_tick[data-hour-mark="true"] {
   opacity: 1;
+  background: var(--clock-hour-tick);
   width: 3px;
   height: 12px;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--opus-accent) 45%, transparent);
 }
 
 .opus_Lj91mC_number {
@@ -20120,6 +20192,7 @@ button.opus_Fxxd7-_card:focus-visible {
 }
 
 .opus_Lj91mC_digitalTime {
+  color: var(--clock-digital);
   font-variant-numeric: tabular-nums;
   letter-spacing: -.04em;
   margin-top: 30px;
@@ -20139,6 +20212,312 @@ button.opus_Fxxd7-_card:focus-visible {
   font-size: 14px;
 }
 
+/* components/FlipClock/FlipClock.module.css */
+.opus_U6YEpK_root {
+  --flip-w: 74px;
+  --flip-h: 100px;
+  --flip-font: calc(var(--flip-h) * .78);
+  --flip-ink-x: 0px;
+  --flip-ink-y: 0px;
+  --flip-gap: 12px;
+  --flip-pair-gap: 6px;
+  --flip-radius: 12px;
+  --flip-duration: .65s;
+  --flip-text: #f8fafc;
+  --flip-muted: #94a3b8;
+  --flip-face: linear-gradient(180deg,
+    color-mix(in srgb, var(--opus-accent) 14%, #070b12) 0%,
+    color-mix(in srgb, var(--opus-accent) 18%, #0e1520) 18%,
+    color-mix(in srgb, var(--opus-accent) 34%, #2a3548) 50%,
+    color-mix(in srgb, var(--opus-accent) 18%, #0e1520) 82%,
+    color-mix(in srgb, var(--opus-accent) 14%, #070b12) 100%);
+  --flip-border: color-mix(in srgb, var(--opus-accent) 40%, #ffffff24);
+  --flip-shadow: 0 22px 48px #0000006b,
+    0 0 30px color-mix(in srgb, var(--opus-accent) 20%, transparent);
+  --flip-hinge: color-mix(in srgb, var(--opus-accent) 50%, #000000a6);
+  --flip-digit: color-mix(in srgb, var(--opus-accent) 24%, var(--flip-text));
+  --flip-separator: var(--opus-accent);
+  color: var(--flip-text);
+  font-family: inherit;
+  font-size: var(--flip-font);
+  flex-direction: column;
+  align-items: center;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1;
+  display: flex;
+  position: relative;
+}
+
+[data-preview-root][data-theme="light"] .opus_U6YEpK_root, [data-theme="light"] .opus_U6YEpK_root {
+  --flip-text: var(--opus-text);
+  --flip-muted: var(--opus-muted);
+  --flip-face: linear-gradient(180deg,
+    color-mix(in srgb, var(--opus-accent) 6%, #d5dbe6) 0%,
+    color-mix(in srgb, var(--opus-accent) 8%, #e4e9f1) 18%,
+    color-mix(in srgb, var(--opus-accent) 12%, #fff) 50%,
+    color-mix(in srgb, var(--opus-accent) 8%, #e4e9f1) 82%,
+    color-mix(in srgb, var(--opus-accent) 6%, #d5dbe6) 100%);
+  --flip-border: color-mix(in srgb, var(--opus-accent) 30%, var(--opus-border));
+  --flip-shadow: 0 18px 40px color-mix(in srgb, var(--opus-text) 12%, transparent),
+    0 0 24px color-mix(in srgb, var(--opus-accent) 14%, transparent);
+  --flip-hinge: color-mix(in srgb, var(--opus-accent) 38%, var(--opus-border));
+  --flip-digit: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-text));
+}
+
+.opus_U6YEpK_root[data-size="sm"] {
+  --flip-w: 50px;
+  --flip-h: 68px;
+  --flip-gap: 8px;
+  --flip-pair-gap: 4px;
+  --flip-radius: 10px;
+}
+
+.opus_U6YEpK_root[data-size="lg"] {
+  --flip-w: 100px;
+  --flip-h: 136px;
+  --flip-gap: 16px;
+  --flip-pair-gap: 8px;
+  --flip-radius: 16px;
+}
+
+.opus_U6YEpK_root[data-frames="true"] {
+  --flip-duration: .12s;
+}
+
+.opus_U6YEpK_loading {
+  color: var(--flip-muted);
+  font-size: 14px;
+}
+
+.opus_U6YEpK_board {
+  align-items: center;
+  gap: var(--flip-gap);
+  perspective: 1200px;
+  perspective-origin: 50% 42%;
+  display: flex;
+}
+
+.opus_U6YEpK_pair {
+  gap: var(--flip-pair-gap);
+  display: flex;
+}
+
+.opus_U6YEpK_rotor {
+  width: var(--flip-w);
+  height: var(--flip-h);
+  border: 1px solid var(--flip-border);
+  border-radius: var(--flip-radius);
+  background: var(--flip-face);
+  box-shadow: var(--flip-shadow);
+  color: var(--flip-digit);
+  font-family: inherit;
+  font-size: var(--flip-font);
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings: "tnum" 1, "lnum" 1;
+  text-align: center;
+  transform-style: preserve-3d;
+  user-select: none;
+  font-weight: 700;
+  line-height: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.opus_U6YEpK_rotor:after {
+  content: "";
+  z-index: 10;
+  background: var(--flip-hinge);
+  pointer-events: none;
+  height: 1px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.opus_U6YEpK_panel {
+  height: 50%;
+  box-shadow: none;
+  background-image: var(--flip-face);
+  background-size: 100% var(--flip-h);
+  background-repeat: no-repeat;
+  border: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.opus_U6YEpK_panelTop {
+  z-index: 1;
+  background-position: top;
+  top: 0;
+}
+
+.opus_U6YEpK_panelBottom {
+  z-index: 1;
+  background-position: bottom;
+  bottom: 0;
+}
+
+.opus_U6YEpK_figure {
+  width: 100%;
+  height: var(--flip-h);
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.opus_U6YEpK_glyph {
+  text-align: center;
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings: "tnum" 1, "lnum" 1;
+  width: 1em;
+  transform: translate(var(--flip-ink-x), var(--flip-ink-y));
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  display: block;
+}
+
+.opus_U6YEpK_probe {
+  width: var(--flip-w);
+  height: var(--flip-h);
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.opus_U6YEpK_probe .opus_U6YEpK_figure {
+  position: relative;
+}
+
+.opus_U6YEpK_probe .opus_U6YEpK_glyph {
+  transform: none;
+}
+
+.opus_U6YEpK_panelBottom .opus_U6YEpK_figure, .opus_U6YEpK_leafRear .opus_U6YEpK_figure {
+  top: calc(var(--flip-h) / -2);
+}
+
+.opus_U6YEpK_leaf {
+  z-index: 4;
+  transform-origin: 50%;
+  transform-style: preserve-3d;
+  animation: opus_U6YEpK_leafFlip var(--flip-duration) cubic-bezier(.33, .1, .15, 1) forwards;
+  pointer-events: none;
+  will-change: transform;
+  position: absolute;
+  inset: 0;
+}
+
+@keyframes opus_U6YEpK_leafFlip {
+  from {
+    transform: rotateX(0);
+  }
+
+  to {
+    transform: rotateX(-180deg);
+  }
+}
+
+.opus_U6YEpK_leafFace {
+  height: 50%;
+  box-shadow: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background-image: var(--flip-face);
+  background-size: 100% var(--flip-h);
+  background-repeat: no-repeat;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.opus_U6YEpK_leafFront {
+  background-position: top;
+}
+
+.opus_U6YEpK_leafRear {
+  background-position: bottom;
+  transform: rotateX(180deg);
+}
+
+.opus_U6YEpK_separator {
+  gap: calc(var(--flip-h) * .18);
+  place-items: center;
+  padding-inline: 2px;
+  display: grid;
+}
+
+.opus_U6YEpK_separator span {
+  width: calc(var(--flip-w) * .15);
+  height: calc(var(--flip-w) * .15);
+  background: var(--flip-separator);
+  box-shadow: 0 0 14px color-mix(in srgb, var(--opus-accent) 75%, transparent);
+  border-radius: 50%;
+  animation: 1s step-end infinite opus_U6YEpK_colonPulse;
+}
+
+@keyframes opus_U6YEpK_colonPulse {
+  0%, 49% {
+    opacity: 1;
+  }
+
+  50%, 100% {
+    opacity: .3;
+  }
+}
+
+.opus_U6YEpK_date {
+  color: var(--flip-muted);
+  text-align: center;
+  margin-top: 18px;
+  font-size: 14px;
+}
+
+.opus_U6YEpK_srOnly {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .opus_U6YEpK_leaf {
+    animation: none;
+    display: none;
+  }
+
+  .opus_U6YEpK_separator span {
+    animation: none;
+  }
+}
+
 /* components/VisuallyHidden/VisuallyHidden.module.css */
 .opus_DIv7wy_hidden {
   clip: rect(0, 0, 0, 0);