@fab1o978/react-ui 0.1.7 → 0.2.0

package/dist/components/ColorWheel/index.css

@@ -0,0 +1,494 @@
+/* src/components/ColorWheel/ColorWheel.module.scss */
+.ColorWheel_module_root2 {
+  --bg: #ECEAE3;
+  --surface: #FFFFFF;
+  --surface-2: #E3E0D8;
+  --border: #D2CDC0;
+  --text: #1A1913;
+  --text-dim: #726F64;
+  --text-faint: #A8A398;
+  --shadow-soft: 0 1px 2px rgba(30, 25, 15, 0.08);
+  --check-a: #d8d4c8;
+  --check-b: #f4f2ec;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  .ColorWheel_module_root2:not([data-theme=light]):not([data-theme=dark]) {
+    --bg: #131217;
+    --surface: #1C1B22;
+    --surface-2: #26252E;
+    --border: #34333D;
+    --text: #ECEAF0;
+    --text-dim: #8E8C99;
+    --text-faint: #605E6B;
+    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
+    --check-a: #37353f;
+    --check-b: #201f26;
+    color-scheme: dark;
+  }
+}
+[data-theme=light] .ColorWheel_module_root2:not([data-theme=light]):not([data-theme=dark]) {
+  --bg: #ECEAE3;
+  --surface: #FFFFFF;
+  --surface-2: #E3E0D8;
+  --border: #D2CDC0;
+  --text: #1A1913;
+  --text-dim: #726F64;
+  --text-faint: #A8A398;
+  --shadow-soft: 0 1px 2px rgba(30, 25, 15, 0.08);
+  --check-a: #d8d4c8;
+  --check-b: #f4f2ec;
+  color-scheme: light;
+}
+[data-theme=dark] .ColorWheel_module_root2:not([data-theme=light]):not([data-theme=dark]) {
+  --bg: #131217;
+  --surface: #1C1B22;
+  --surface-2: #26252E;
+  --border: #34333D;
+  --text: #ECEAF0;
+  --text-dim: #8E8C99;
+  --text-faint: #605E6B;
+  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --check-a: #37353f;
+  --check-b: #201f26;
+  color-scheme: dark;
+}
+.ColorWheel_module_root2[data-theme=dark] {
+  --bg: #131217;
+  --surface: #1C1B22;
+  --surface-2: #26252E;
+  --border: #34333D;
+  --text: #ECEAF0;
+  --text-dim: #8E8C99;
+  --text-faint: #605E6B;
+  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --check-a: #37353f;
+  --check-b: #201f26;
+  color-scheme: dark;
+}
+.ColorWheel_module_root2[data-theme=light] {
+  --bg: #ECEAE3;
+  --surface: #FFFFFF;
+  --surface-2: #E3E0D8;
+  --border: #D2CDC0;
+  --text: #1A1913;
+  --text-dim: #726F64;
+  --text-faint: #A8A398;
+  --shadow-soft: 0 1px 2px rgba(30, 25, 15, 0.08);
+  --check-a: #d8d4c8;
+  --check-b: #f4f2ec;
+  color-scheme: light;
+}
+.ColorWheel_module_root2 {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  font-family:
+    -apple-system,
+    "Segoe UI",
+    Inter,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  color: var(--text);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ColorWheel_module_root2,
+  .ColorWheel_module_root2 *,
+  .ColorWheel_module_root2 *::before,
+  .ColorWheel_module_root2 *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+.ColorWheel_module_recents2 {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 30px;
+  background: var(--surface-2);
+  border-radius: 999px;
+  padding: 5px 8px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), var(--shadow-soft);
+}
+.ColorWheel_module_chipWrap2 {
+  position: relative;
+  flex: none;
+  animation: ColorWheel_module_chipIn2 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+.ColorWheel_module_chip2 {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: block;
+  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.22), var(--shadow-soft);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.ColorWheel_module_chip2:hover {
+  transform: scale(1.14) translateY(-1px);
+  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.3), 0 4px 10px -3px rgba(0, 0, 0, 0.3);
+}
+.ColorWheel_module_chip2:active {
+  transform: scale(1.02);
+}
+.ColorWheel_module_chipRemove2 {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  background: var(--surface);
+  color: var(--text-dim);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(128, 128, 128, 0.25);
+  cursor: pointer;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.6);
+  transition:
+    opacity 0.12s ease,
+    transform 0.12s ease,
+    color 0.12s ease;
+}
+.ColorWheel_module_chipRemove2 svg {
+  width: 8px;
+  height: 8px;
+}
+.ColorWheel_module_chipRemove2:hover {
+  color: var(--text);
+}
+.ColorWheel_module_chipWrap2:hover .ColorWheel_module_chipRemove2 {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+@keyframes ColorWheel_module_chipIn2 {
+  0% {
+    transform: scale(0) rotate(-25deg);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+}
+.ColorWheel_module_picker2 {
+  position: relative;
+  margin-top: 82px;
+  height: 265px;
+  width: 272px;
+}
+.ColorWheel_module_glow2 {
+  position: absolute;
+  width: 340px;
+  height: 340px;
+  left: 50%;
+  top: 88px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  opacity: 0.55;
+  pointer-events: none;
+  z-index: 0;
+}
+.ColorWheel_module_modeToggle2 {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  transform: translate(-50%, calc(-50% - 156px));
+  z-index: 3;
+  display: grid;
+  background: var(--surface-2);
+  border-radius: 999px;
+  padding: 3px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), var(--shadow-soft);
+}
+.ColorWheel_module_modePill2 {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 3px;
+  border-radius: 999px;
+  background: var(--surface);
+  box-shadow: var(--shadow-soft);
+  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ColorWheel_module_modeButton2 {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 22px;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 10.5px;
+  font-weight: 700;
+  line-height: 22px;
+  letter-spacing: 0.02em;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.ColorWheel_module_modeButton2.ColorWheel_module_active2 {
+  color: var(--text);
+}
+.ColorWheel_module_modeButton2:hover:not(.ColorWheel_module_active2) {
+  color: var(--text);
+}
+.ColorWheel_module_stage2 {
+  position: absolute;
+  top: -48px;
+  left: 50%;
+  width: 272px;
+  height: 272px;
+  transform: translateX(-50%);
+  touch-action: none;
+}
+.ColorWheel_module_stageShadow2 {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 10px 18px rgba(0, 0, 0, 0.22);
+  pointer-events: none;
+}
+.ColorWheel_module_ring2 {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 2;
+  -webkit-mask:
+    radial-gradient(
+      circle closest-side,
+      transparent 0 92px,
+      black 93px 100%);
+  mask:
+    radial-gradient(
+      circle closest-side,
+      transparent 0 92px,
+      black 93px 100%);
+}
+.ColorWheel_module_hueHandlePivot2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  z-index: 3;
+  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ColorWheel_module_root2[data-dragging=true] .ColorWheel_module_hueHandlePivot2 {
+  transition: none;
+}
+.ColorWheel_module_hueHandle2 {
+  position: absolute;
+  top: -114px;
+  left: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.15);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  z-index: 3;
+}
+.ColorWheel_module_alphaArcShadowWrap2 {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  width: 380px;
+  height: 380px;
+  transform: translate(calc(-50% + 1px), calc(-50% + 5px));
+  z-index: 1;
+  pointer-events: none;
+  filter: blur(7px);
+}
+.ColorWheel_module_alphaArcShadow2 {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.22);
+  clip-path: path("M 328.56,270 A 160 160 0 0 1 51.44,270 L 65.29,262 A 144 144 0 0 0 314.71,262 Z");
+}
+.ColorWheel_module_alphaArc2 {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  width: 380px;
+  height: 380px;
+  transform: translate(-50%, -50%);
+  touch-action: none;
+  cursor: grab;
+  z-index: 2;
+  background: var(--surface-2);
+  clip-path: path("M 328.56,270 A 160 160 0 0 1 51.44,270 L 65.29,262 A 144 144 0 0 0 314.71,262 Z");
+}
+.ColorWheel_module_alphaArcFill2 {
+  position: absolute;
+  inset: 0;
+}
+.ColorWheel_module_alphaArcCap2 {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  z-index: 2;
+  pointer-events: none;
+  background: var(--surface-2);
+}
+.ColorWheel_module_alphaArcCapStart2 {
+  transform: translate(calc(-50% + 131.6px), calc(-50% + 76px));
+}
+.ColorWheel_module_alphaArcCapEnd2 {
+  transform: translate(calc(-50% - 131.6px), calc(-50% + 76px));
+}
+.ColorWheel_module_alphaArcHandle2 {
+  position: absolute;
+  top: 88px;
+  left: 50%;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
+  z-index: 3;
+  pointer-events: none;
+  transition: transform 0.12s ease;
+}
+.ColorWheel_module_root2[data-dragging=true] .ColorWheel_module_alphaArcHandle2 {
+  transition: none;
+}
+.ColorWheel_module_currentDisc2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 156px;
+  height: 156px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 2;
+  box-shadow: 0 10px 24px -8px rgba(20, 16, 10, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  background-image:
+    linear-gradient(
+      45deg,
+      var(--check-a) 25%,
+      transparent 25%,
+      transparent 75%,
+      var(--check-a) 75%),
+    linear-gradient(
+      45deg,
+      var(--check-a) 25%,
+      transparent 25%,
+      transparent 75%,
+      var(--check-a) 75%);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  background-color: var(--check-b);
+}
+.ColorWheel_module_discFill2 {
+  position: absolute;
+  inset: 0;
+}
+.ColorWheel_module_currentHex2,
+.ColorWheel_module_currentHexInput2 {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  font-family:
+    "SF Mono",
+    "IBM Plex Mono",
+    "JetBrains Mono",
+    Consolas,
+    "Liberation Mono",
+    monospace;
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.ColorWheel_module_currentHex2 {
+  display: grid;
+  place-items: center;
+  cursor: text;
+  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.ColorWheel_module_currentHex2.ColorWheel_module_copied2 {
+  transform: scale(1.06);
+}
+.ColorWheel_module_currentHexInput2 {
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+}
+.ColorWheel_module_currentHexInput2::selection {
+  background: rgba(255, 255, 255, 0.35);
+}
+.ColorWheel_module_discBadge2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: none;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  z-index: 3;
+  transition: transform 0.15s ease, filter 0.15s ease;
+}
+.ColorWheel_module_discBadge2:hover {
+  filter: brightness(1.15);
+}
+.ColorWheel_module_discBadge2 svg {
+  width: 15px;
+  height: 15px;
+}
+.ColorWheel_module_discBadgeTop2 {
+  transform: translate(-50%, calc(-50% - 46px));
+}
+.ColorWheel_module_discBadgeTop2:active {
+  transform: translate(-50%, calc(-50% - 46px)) scale(0.92);
+}
+.ColorWheel_module_discBadgeTop2.ColorWheel_module_pulse2 {
+  animation: ColorWheel_module_badgePulseTop2 0.4s ease;
+}
+.ColorWheel_module_discBadgeBottom2 {
+  transform: translate(-50%, calc(-50% + 46px));
+}
+.ColorWheel_module_discBadgeBottom2:active {
+  transform: translate(-50%, calc(-50% + 46px)) scale(0.92);
+}
+@keyframes ColorWheel_module_badgePulseTop2 {
+  0% {
+    transform: translate(-50%, calc(-50% - 46px)) scale(1);
+  }
+  40% {
+    transform: translate(-50%, calc(-50% - 46px)) scale(1.28);
+  }
+  100% {
+    transform: translate(-50%, calc(-50% - 46px)) scale(1);
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/ColorWheel/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ColorWheel/ColorWheel.module.scss"],"sourcesContent":["// Theme tokens are scoped to .root (component-local), not :root -- this\n// component must be safe to drop into an app with its own global theme\n// without colliding. All *computed* colors (the color you're picking, badge\n// tints, gradients) are passed in as inline styles from ColorWheel.tsx, not\n// CSS custom properties here -- only structural/theme tokens live in SCSS.\n\n// light/dark palettes -- identical values shared by every trigger below (OS\n// preference, host app's ambient theme, and this instance's own `theme` prop)\n@mixin light-palette {\n  --bg: #ECEAE3;\n  --surface: #FFFFFF;\n  --surface-2: #E3E0D8;\n  --border: #D2CDC0;\n  --text: #1A1913;\n  --text-dim: #726F64;\n  --text-faint: #A8A398;\n  --shadow-soft: 0 1px 2px rgba(30, 25, 15, 0.08);\n  --check-a: #d8d4c8;\n  --check-b: #f4f2ec;\n  color-scheme: light;\n}\n@mixin dark-palette {\n  --bg: #131217;\n  --surface: #1C1B22;\n  --surface-2: #26252E;\n  --border: #34333D;\n  --text: #ECEAF0;\n  --text-dim: #8E8C99;\n  --text-faint: #605E6B;\n  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);\n  --check-a: #37353f;\n  --check-b: #201f26;\n  color-scheme: dark;\n}\n\n.root {\n  @include light-palette;\n\n  // theme=\"system\" (no data-theme of its own): fall back to the OS preference\n  @media (prefers-color-scheme: dark) {\n    &:not([data-theme='light']):not([data-theme='dark']) {\n      @include dark-palette;\n    }\n  }\n\n  // theme=\"system\": the host app's ambient theme (data-theme set on an\n  // ancestor, e.g. <html> -- the same convention ColorPicker/Timeline read\n  // from) takes precedence over the bare OS preference above when the app\n  // declares one -- including explicitly overriding it back to light, since\n  // the OS-preference rule above has no way to know the app disagrees\n  :global([data-theme='light']) &:not([data-theme='light']):not([data-theme='dark']) {\n    @include light-palette;\n  }\n  :global([data-theme='dark']) &:not([data-theme='light']):not([data-theme='dark']) {\n    @include dark-palette;\n  }\n\n  // theme=\"dark\" / theme=\"light\": pinned explicitly on this instance, regardless of the OS or the app\n  &[data-theme='dark'] {\n    @include dark-palette;\n  }\n  &[data-theme='light'] {\n    @include light-palette;\n  }\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  font-family: -apple-system, 'Segoe UI', Inter, 'Helvetica Neue', Arial, sans-serif;\n  color: var(--text);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .root, .root *, .root *::before, .root *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n// ============ Recents (favorites) ============\n.recents {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  min-height: 30px;\n  background: var(--surface-2);\n  border-radius: 999px;\n  padding: 5px 8px;\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), var(--shadow-soft);\n}\n\n.chipWrap {\n  position: relative;\n  flex: none;\n  animation: chipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n}\n\n.chip {\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.22), var(--shadow-soft);\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n\n  &:hover {\n    transform: scale(1.14) translateY(-1px);\n    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.3), 0 4px 10px -3px rgba(0, 0, 0, 0.3);\n  }\n  &:active {\n    transform: scale(1.02);\n  }\n}\n\n// notification-badge style: sits off-center on the chip's rim, revealed only\n// on hover so it never competes with the chip's own click-to-select area\n.chipRemove {\n  position: absolute;\n  top: -3px;\n  right: -3px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: none;\n  padding: 0;\n  display: grid;\n  place-items: center;\n  background: var(--surface);\n  color: var(--text-dim);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(128, 128, 128, 0.25);\n  cursor: pointer;\n  z-index: 2;\n  opacity: 0;\n  pointer-events: none;\n  transform: scale(0.6);\n  transition: opacity 0.12s ease, transform 0.12s ease, color 0.12s ease;\n\n  svg {\n    width: 8px;\n    height: 8px;\n  }\n  &:hover {\n    color: var(--text);\n  }\n  .chipWrap:hover & {\n    opacity: 1;\n    pointer-events: auto;\n    transform: scale(1);\n  }\n}\n\n@keyframes chipIn {\n  0% { transform: scale(0) rotate(-25deg); opacity: 0; }\n  100% { transform: scale(1) rotate(0); opacity: 1; }\n}\n\n// ============ Picker: positioning context for the ring's bleed ============\n// Every direct child below is position:absolute (there's no backing card to\n// hold the box open), so .picker needs an explicit size or it measures as\n// 0x0 to the layout engine -- margin-top reserves room for what renders\n// above the shared center anchor (mostly the mode toggle), height reserves\n// what extends below it (the alpha arc).\n.picker {\n  position: relative;\n  margin-top: 82px;\n  height: 265px;\n  width: 272px;\n}\n\n.glow {\n  position: absolute;\n  width: 340px;\n  height: 340px;\n  left: 50%;\n  top: 88px;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  opacity: 0.55;\n  pointer-events: none;\n  z-index: 0;\n}\n\n// ============ Mode toggle: switches what the ring adjusts (H/S/V) ============\n.modeToggle {\n  position: absolute;\n  top: 88px;\n  left: 50%;\n  transform: translate(-50%, calc(-50% - 156px));\n  z-index: 3;\n  display: grid;\n  // grid-template-columns and width are set inline (mode count is dynamic:\n  // 3-way H/S/V or 4-way H/S/V/A depending on showAlphaControl)\n  background: var(--surface-2);\n  border-radius: 999px;\n  padding: 3px;\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), var(--shadow-soft);\n}\n\n.modePill {\n  position: absolute;\n  top: 3px;\n  bottom: 3px;\n  left: 3px;\n  // width is set inline (see .modeToggle)\n  border-radius: 999px;\n  background: var(--surface);\n  box-shadow: var(--shadow-soft);\n  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.modeButton {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 22px;\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 10.5px;\n  font-weight: 700;\n  line-height: 22px;\n  letter-spacing: 0.02em;\n  color: var(--text-dim);\n  cursor: pointer;\n  transition: color 0.2s ease;\n\n  &.active {\n    color: var(--text);\n  }\n  &:hover:not(.active) {\n    color: var(--text);\n  }\n}\n\n// ============ Stage: a true ring (annulus via mask) ============\n.stage {\n  position: absolute;\n  top: -48px;\n  left: 50%;\n  width: 272px;\n  height: 272px;\n  transform: translateX(-50%);\n  touch-action: none;\n}\n\n// shadow caster: a plain, unmasked circle behind the ring. box-shadow draws\n// outside its border-box regardless of the hole in the shape drawn on top of\n// it, so this reliably casts a shadow around the ring's outer edge --\n// filter:drop-shadow on the masked .ring itself is unreliable across engines.\n.stageShadow {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 10px 18px rgba(0, 0, 0, 0.22);\n  pointer-events: none;\n}\n\n.ring {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  pointer-events: none;\n  z-index: 2;\n  // background is set per-mode inline: hue spectrum / grey-to-color / black-to-color\n  -webkit-mask: radial-gradient(circle closest-side, transparent 0 92px, black 93px 100%);\n  mask: radial-gradient(circle closest-side, transparent 0 92px, black 93px 100%);\n}\n\n// rotated, not repositioned via top/left -- see the comment on\n// ringAngleFromTopDeg in ColorWheel.tsx for why\n.hueHandlePivot {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  // `transform` creates a new stacking context, so this needs its own\n  // z-index -- the child .hueHandle's z-index only ranks it within this\n  // context, not against the ring/disc/badges sitting outside it\n  z-index: 3;\n  // strong ease-out -- fast start, long deceleration into the final angle,\n  // like braking into position. Reads as a real sweep on a big mode-switch\n  // jump, stays snappy on small wheel-tick nudges.\n  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.root[data-dragging='true'] .hueHandlePivot {\n  transition: none;\n}\n.hueHandle {\n  position: absolute;\n  top: -114px; // mid-band radius (0.4191 * 272px stage), fixed distance from the pivot\n  left: 0;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: 3px solid #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.15);\n  transform: translate(-50%, -50%);\n  cursor: grab;\n  z-index: 3;\n}\n\n// ============ Alpha arc: a curved alpha slider outside the ring ============\n// a pure 1D control, position along the 120deg band (bottom-centered) fades\n// a checkerboard (alpha 0) into the current solid color (alpha 1). clip-path\n// also gates hit-testing, so clicks outside the visible crescent fall through.\n$arcPath: path('M 328.56,270 A 160 160 0 0 1 51.44,270 L 65.29,262 A 144 144 0 0 0 314.71,262 Z');\n\n// shadow caster: clip-path + filter:blur on the SAME element clips away the\n// blur's own soft edge (no room outside the path for it to fade into),\n// leaving a hard-edged smudge. Fix: blur a wrapper that ISN'T itself clipped\n// -- it composites its clipped child first, then blurs that whole result\n// freely, since nothing clips the wrapper afterward.\n.alphaArcShadowWrap {\n  position: absolute;\n  top: 88px;\n  left: 50%;\n  width: 380px;\n  height: 380px;\n  transform: translate(calc(-50% + 1px), calc(-50% + 5px));\n  z-index: 1;\n  pointer-events: none;\n  filter: blur(7px);\n}\n.alphaArcShadow {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.22);\n  clip-path: $arcPath;\n}\n\n.alphaArc {\n  position: absolute;\n  top: 88px;\n  left: 50%;\n  width: 380px;\n  height: 380px;\n  transform: translate(-50%, -50%);\n  touch-action: none;\n  cursor: grab;\n  z-index: 2;\n  background: var(--surface-2);\n  clip-path: $arcPath;\n}\n\n.alphaArcFill {\n  position: absolute;\n  inset: 0;\n  // conic-gradient set inline (needs the live accent color)\n}\n\n// clip-path can't take a border-radius, so the band's two flat-cut ends are\n// \"rounded\" by capping them with plain circles sized to the band's own\n// thickness -- a pill cap, same trick as a rounded-end stroke. These sit\n// OUTSIDE .alphaArc (its clip-path would slice them too), positioned from\n// the shared center point like the mode toggle is.\n.alphaArcCap {\n  position: absolute;\n  top: 88px;\n  left: 50%;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  z-index: 2;\n  pointer-events: none;\n  background: var(--surface-2);\n}\n.alphaArcCapStart {\n  transform: translate(calc(-50% + 131.6px), calc(-50% + 76px));\n  // background set inline (accent-solid, the \"full\" end)\n}\n.alphaArcCapEnd {\n  transform: translate(calc(-50% - 131.6px), calc(-50% + 76px));\n}\n\n// sits OUTSIDE .alphaArc too, same reason as the caps -- clip-path would\n// slice it into a crescent whenever it nears the band's flat-cut ends\n.alphaArcHandle {\n  position: absolute;\n  top: 88px;\n  left: 50%;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 2px solid #fff;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);\n  z-index: 3;\n  pointer-events: none;\n  transition: transform 0.12s ease;\n}\n.root[data-dragging='true'] .alphaArcHandle {\n  transition: none;\n}\n\n// ============ Current-color disc ============\n.currentDisc {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 156px;\n  height: 156px;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  overflow: hidden;\n  cursor: pointer;\n  z-index: 2;\n  box-shadow: 0 10px 24px -8px rgba(20, 16, 10, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n  background-image:\n    linear-gradient(45deg, var(--check-a) 25%, transparent 25%, transparent 75%, var(--check-a) 75%),\n    linear-gradient(45deg, var(--check-a) 25%, transparent 25%, transparent 75%, var(--check-a) 75%);\n  background-size: 12px 12px;\n  background-position: 0 0, 6px 6px;\n  background-color: var(--check-b);\n}\n\n.discFill {\n  position: absolute;\n  inset: 0;\n  // background (rgba of current color, so the checkerboard reads through\n  // when alpha < 1) set inline\n}\n\n.currentHex,\n.currentHexInput {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  font-family: 'SF Mono', 'IBM Plex Mono', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace;\n  font-size: 17px;\n  font-weight: 700;\n  letter-spacing: 0.01em;\n  font-variant-numeric: tabular-nums;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n  // color set inline (computed for contrast against the current color)\n}\n.currentHex {\n  display: grid;\n  place-items: center;\n  cursor: text;\n  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);\n\n  &.copied {\n    transform: scale(1.06);\n  }\n}\n.currentHexInput {\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n\n  &::selection {\n    background: rgba(255, 255, 255, 0.35);\n  }\n}\n\n// badges resting inland on the disc, top (eyedropper) and bottom (save to\n// favorites) -- discreet: near-invisible fill, and instead of a drawn-on\n// border, an engraved groove (dark inset lip on top, faint highlight on the\n// bottom edge) so they read as carved into the disc rather than stuck on it\n.discBadge {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  border: none;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  z-index: 3;\n  transition: transform 0.15s ease, filter 0.15s ease;\n\n  &:hover {\n    filter: brightness(1.15);\n  }\n  svg {\n    width: 15px;\n    height: 15px;\n  }\n}\n.discBadgeTop {\n  transform: translate(-50%, calc(-50% - 46px));\n  &:active {\n    transform: translate(-50%, calc(-50% - 46px)) scale(0.92);\n  }\n  &.pulse {\n    animation: badgePulseTop 0.4s ease;\n  }\n}\n.discBadgeBottom {\n  transform: translate(-50%, calc(-50% + 46px));\n  &:active {\n    transform: translate(-50%, calc(-50% + 46px)) scale(0.92);\n  }\n}\n@keyframes badgePulseTop {\n  0% { transform: translate(-50%, calc(-50% - 46px)) scale(1); }\n  40% { transform: translate(-50%, calc(-50% - 46px)) scale(1.28); }\n  100% { transform: translate(-50%, calc(-50% - 46px)) scale(1); }\n}\n"],"mappings":"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","names":["root","recents","chipWrap","chip","chipRemove","chipIn","picker","glow","modeToggle","modePill","modeButton","active","stage","stageShadow","ring","hueHandlePivot","hueHandle","alphaArcShadowWrap","alphaArcShadow","alphaArc","alphaArcFill","alphaArcCap","alphaArcCapStart","alphaArcCapEnd","alphaArcHandle","currentDisc","discFill","currentHex","currentHexInput","copied","discBadge","discBadgeTop","pulse","discBadgeBottom","badgePulseTop"]}

package/dist/components/ColorWheel/index.d.cts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+type ColorWheelMode = "h" | "s" | "v" | "a";
+type ColorWheelAlphaMode = "arc" | "ring";
+type ColorWheelTheme = "light" | "dark" | "system";
+interface ColorWheelProps {
+    /** current color, as "#RRGGBB" or "#RRGGBBAA" */
+    value: string;
+    /** called with the next hex value on every interaction (drag, wheel, paste, eyedropper, picking a favorite) */
+    onChange: (hex: string) => void;
+    /** favorite hex swatches, rendered above the ring. Omit to hide the row entirely. */
+    favorites?: string[];
+    /** called with the full next list when the user saves the current color (the "+" badge) -- this component holds no favorites state of its own */
+    onFavoritesChange?: (favorites: string[]) => void;
+    /** caps how many favorites the "+" badge will keep (oldest dropped first). Only enforced on the list this component hands back -- a longer list you pass in is rendered as-is. */
+    maxFavorites?: number;
+    /**
+     * Master switch: is alpha adjustable in the UI at all? true (default):
+     * yes, via whichever scheme `alphaMode` picks. false: no alpha UI
+     * whatsoever -- no arc, no "A" in the ring toggle -- though a translucent
+     * `value` passed in is still honored, just not editable.
+     */
+    showAlphaControl?: boolean;
+    /**
+     * Only matters when `showAlphaControl` is true. 'arc' (default): a 3-way
+     * H/S/V ring, alpha adjusted via the curved arc outside it. 'ring': a
+     * 4-way H/S/V/A ring handles alpha itself, and the (now redundant) arc is
+     * hidden. Mutually exclusive schemes, not two controls active at once.
+     */
+    alphaMode?: ColorWheelAlphaMode;
+    /** 'system' (default) follows prefers-color-scheme; 'light'/'dark' pins it */
+    theme?: ColorWheelTheme;
+    /**
+     * Uniform scale factor, 1 (default) = the design size (272px ring). Applied
+     * as a CSS transform, so all the drag/wheel hit-testing (already measured
+     * live via getBoundingClientRect, not hardcoded pixels) keeps working
+     * unchanged at any size. Note this does NOT shrink the component's actual
+     * DOM footprint to match -- it already visually bleeds past its own box at
+     * scale 1 (the ring/arc extend beyond it), so a container you size and
+     * position yourself is still expected, same as today.
+     */
+    size?: number;
+    /** custom accent color (hex) -- overrides the global theme's primary color for this instance */
+    accent?: string;
+    className?: string;
+}
+declare function ColorWheel({ value, onChange, favorites, onFavoritesChange, maxFavorites, showAlphaControl, alphaMode, theme, size, accent, className, }: ColorWheelProps): React.JSX.Element;
+
+export { ColorWheel, type ColorWheelAlphaMode, type ColorWheelMode, type ColorWheelProps, type ColorWheelTheme };

package/dist/components/ColorWheel/index.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+type ColorWheelMode = "h" | "s" | "v" | "a";
+type ColorWheelAlphaMode = "arc" | "ring";
+type ColorWheelTheme = "light" | "dark" | "system";
+interface ColorWheelProps {
+    /** current color, as "#RRGGBB" or "#RRGGBBAA" */
+    value: string;
+    /** called with the next hex value on every interaction (drag, wheel, paste, eyedropper, picking a favorite) */
+    onChange: (hex: string) => void;
+    /** favorite hex swatches, rendered above the ring. Omit to hide the row entirely. */
+    favorites?: string[];
+    /** called with the full next list when the user saves the current color (the "+" badge) -- this component holds no favorites state of its own */
+    onFavoritesChange?: (favorites: string[]) => void;
+    /** caps how many favorites the "+" badge will keep (oldest dropped first). Only enforced on the list this component hands back -- a longer list you pass in is rendered as-is. */
+    maxFavorites?: number;
+    /**
+     * Master switch: is alpha adjustable in the UI at all? true (default):
+     * yes, via whichever scheme `alphaMode` picks. false: no alpha UI
+     * whatsoever -- no arc, no "A" in the ring toggle -- though a translucent
+     * `value` passed in is still honored, just not editable.
+     */
+    showAlphaControl?: boolean;
+    /**
+     * Only matters when `showAlphaControl` is true. 'arc' (default): a 3-way
+     * H/S/V ring, alpha adjusted via the curved arc outside it. 'ring': a
+     * 4-way H/S/V/A ring handles alpha itself, and the (now redundant) arc is
+     * hidden. Mutually exclusive schemes, not two controls active at once.
+     */
+    alphaMode?: ColorWheelAlphaMode;
+    /** 'system' (default) follows prefers-color-scheme; 'light'/'dark' pins it */
+    theme?: ColorWheelTheme;
+    /**
+     * Uniform scale factor, 1 (default) = the design size (272px ring). Applied
+     * as a CSS transform, so all the drag/wheel hit-testing (already measured
+     * live via getBoundingClientRect, not hardcoded pixels) keeps working
+     * unchanged at any size. Note this does NOT shrink the component's actual
+     * DOM footprint to match -- it already visually bleeds past its own box at
+     * scale 1 (the ring/arc extend beyond it), so a container you size and
+     * position yourself is still expected, same as today.
+     */
+    size?: number;
+    /** custom accent color (hex) -- overrides the global theme's primary color for this instance */
+    accent?: string;
+    className?: string;
+}
+declare function ColorWheel({ value, onChange, favorites, onFavoritesChange, maxFavorites, showAlphaControl, alphaMode, theme, size, accent, className, }: ColorWheelProps): React.JSX.Element;
+
+export { ColorWheel, type ColorWheelAlphaMode, type ColorWheelMode, type ColorWheelProps, type ColorWheelTheme };