@inkra/react 0.8.0 → 0.10.0

package/dist/styles/number-ticker.css

@@ -25,7 +25,53 @@
 
 .inkra-number-ticker__native-value {
   font: inherit;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
+}
+
+.inkra-number-ticker__reels {
+  display: inline-flex;
+  align-items: baseline;
+  unicode-bidi: isolate;
+  line-height: var(--inkra-line-ui, 1.45);
+}
+
+.inkra-number-ticker__column {
+  display: inline-grid;
+  flex: none;
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.inkra-number-ticker__column-inner {
+  display: grid;
+  min-width: 0;
+  height: 1lh;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__face {
+  grid-area: 1 / 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__column[data-digit] .inkra-number-ticker__face {
+  width: 1ch;
+}
+
+.inkra-number-ticker__face > .inkra-pencil-text {
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__column { grid-template-columns: 1fr !important; }
+  .inkra-number-ticker__column[data-digit] { width: 1ch !important; }
+  .inkra-number-ticker__column[data-departing] { display: none; }
+  .inkra-number-ticker__face[data-face="from"] { display: none; }
+  .inkra-number-ticker__face[data-face="to"] { transform: none !important; opacity: 1 !important; }
 }
 
 .inkra-number-ticker__prefix,

package/dist/styles/selection.css

@@ -262,3 +262,53 @@
     outline-offset: var(--inkra-focus-offset);
   }
 }
+
+/* Circular switches retain the native checkbox while sharing the dial's pencil geometry. */
+.inkra-switch--circular {
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  align-content: start;
+  width: var(--inkra-circular-switch-diameter);
+  gap: 2px;
+}
+.inkra-switch--circular > .inkra-selection-control__input {
+  width: var(--inkra-circular-switch-diameter);
+  height: var(--inkra-circular-switch-diameter);
+  inset: 0 auto auto 0;
+  touch-action: manipulation;
+}
+.inkra-switch--circular > .inkra-selection-control__copy { width: 100%; text-align: center; }
+.inkra-switch[data-readonly="true"] { cursor: default; }
+.inkra-switch__circular { display: flex; align-items: center; justify-content: center; position: relative; width: var(--inkra-circular-switch-diameter); height: var(--inkra-circular-switch-diameter); pointer-events: none; user-select: none; }
+.inkra-switch__circular-arc { position: absolute; inset: 16px; transform: rotate(225deg); }
+.inkra-switch__circular-track, .inkra-switch__circular-range { position: absolute; inset: 0; }
+.inkra-switch__circular-track { color: var(--inkra-ink-muted); opacity: .3; }
+.inkra-switch__circular-range { color: var(--inkra-accent-strong); }
+.inkra-switch__circular .inkra-progress__ring { color: inherit; }
+.inkra-switch__circular .inkra-progress__ring,
+.inkra-switch__circular .inkra-progress__ring-rotation,
+.inkra-switch__circular .inkra-progress__ring-direction,
+.inkra-switch__circular .inkra-progress__ring-ink,
+.inkra-switch__circular .inkra-progress__ring-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-switch__circular .inkra-progress__ring-ink { visibility: hidden; }
+.inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] { visibility: visible; }
+.inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: hidden; }
+.inkra-switch__circular-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px; box-sizing: border-box; width: var(--inkra-circular-switch-center-width); max-height: var(--inkra-circular-switch-center-height); min-width: 0; overflow: hidden; pointer-events: none; text-align: center; }
+.inkra-switch__circular-icon { display: flex; align-items: center; justify-content: center; flex: none; width: min(var(--inkra-circular-switch-icon-size), 100%); height: var(--inkra-circular-switch-icon-size); }
+.inkra-switch__circular-icon > * { max-width: 100%; max-height: 100%; }
+.inkra-switch__circular-content { width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
+.inkra-switch__circular-content > * { max-width: 100%; }
+.inkra-switch__circular-value { display: block; white-space: nowrap; max-width: 100%; text-align: center; font-size: var(--inkra-circular-switch-value-size); line-height: var(--inkra-circular-switch-value-line); }
+.inkra-switch__circular-focus { --inkra-ink: var(--inkra-focus); --inkra-accent-strong: var(--inkra-focus); position: absolute !important; inset: 10px; opacity: 0; pointer-events: none; border-radius: 50%; }
+.inkra-switch--circular:has(.inkra-selection-control__input:focus-visible) .inkra-switch__circular-focus { opacity: 1; }
+@media (forced-colors: active) {
+  .inkra-switch--circular > .inkra-selection-control__input { position: absolute; opacity: 0; z-index: 2; }
+  .inkra-switch__circular-track { color: GrayText; opacity: 1; }
+  .inkra-switch__circular-range { color: Highlight; }
+  .inkra-switch--circular:has(.inkra-selection-control__input:focus-visible) .inkra-switch__circular { outline: var(--inkra-focus-width) solid Highlight; outline-offset: -10px; border-radius: 50%; }
+  .inkra-switch__circular-focus { display: none !important; }
+}
+@media (forced-colors: active), print {
+  .inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] { visibility: hidden; }
+  .inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: visible; }
+}

package/dist/styles/slider.css

@@ -98,6 +98,17 @@
   width: var(--inkra-slider-thumb-size);
 }
 
+/* Radix insets its measured hit target by half a thumb at each endpoint.
+   Translate the whole target back so its visual center follows the track;
+   percentages use the actual thumb box and preserve its 44px hit area. */
+.inkra-slider[data-thumb-alignment="edge"] .inkra-slider__thumb {
+  translate: var(--inkra-slider-thumb-offset) 0;
+}
+
+.inkra-slider[data-thumb-alignment="edge"][data-orientation="vertical"] .inkra-slider__thumb {
+  translate: 0 var(--inkra-slider-thumb-offset);
+}
+
 .inkra-slider__thumb:focus-visible {
   outline: none;
 }
@@ -143,3 +154,57 @@
     display: none !important;
   }
 }
+
+.inkra-circular-slider {
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--inkra-circular-slider-diameter);
+  height: var(--inkra-circular-slider-diameter);
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  vertical-align: middle;
+  outline: none;
+}
+.inkra-circular-slider[data-disabled] { cursor: not-allowed; opacity: .55; }
+.inkra-circular-slider[data-readonly] { cursor: default; }
+.inkra-circular-slider__arc { position: absolute; inset: 16px; pointer-events: none; }
+.inkra-circular-slider__track, .inkra-circular-slider__range { position: absolute; inset: 0; }
+.inkra-circular-slider__track { color: var(--inkra-ink-muted); opacity: .3; }
+.inkra-circular-slider__range { color: var(--inkra-accent-strong); }
+/* ProgressRing shares the stable pencil texture; these scoped rules also support slider-only styles. */
+.inkra-circular-slider .inkra-progress__ring { color: inherit; }
+.inkra-circular-slider .inkra-progress__ring,
+.inkra-circular-slider .inkra-progress__ring-rotation,
+.inkra-circular-slider .inkra-progress__ring-direction,
+.inkra-circular-slider .inkra-progress__ring-ink,
+.inkra-circular-slider .inkra-progress__ring-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-circular-slider .inkra-progress__ring-ink { visibility: hidden; }
+.inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] { visibility: visible; }
+.inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: hidden; }
+.inkra-circular-slider__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px; box-sizing: border-box; width: var(--inkra-circular-slider-center-width); max-height: var(--inkra-circular-slider-center-height); min-width: 0; overflow: hidden; pointer-events: none; text-align: center; }
+.inkra-circular-slider__center-icon { display: flex; align-items: center; justify-content: center; flex: none; width: min(var(--inkra-circular-slider-center-icon-size), 100%); height: var(--inkra-circular-slider-center-icon-size); }
+.inkra-circular-slider__center-icon > * { max-width: 100%; max-height: 100%; }
+.inkra-circular-slider__center-content { width: 100%; min-width: 0; max-width: 100%; max-height: var(--inkra-circular-slider-center-height); overflow-wrap: anywhere; }
+.inkra-circular-slider__center-content > * { max-width: 100%; }
+.inkra-circular-slider__value { display: block; white-space: nowrap; max-width: 100%; pointer-events: none; text-align: center; font-size: var(--inkra-circular-slider-center-font-size); line-height: var(--inkra-circular-slider-center-line-height); }
+.inkra-circular-slider__thumb { position: absolute; transform: translate(-50%, -50%); width: var(--inkra-touch-target); height: var(--inkra-touch-target); display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.inkra-circular-slider__thumb-surface { display: block !important; width: var(--inkra-circular-slider-thumb-size); height: var(--inkra-circular-slider-thumb-size); border-radius: 50%; }
+.inkra-circular-slider__focus-ring { --inkra-ink: var(--inkra-focus); position: absolute !important; inset: -4px; opacity: 0; pointer-events: none; }
+.inkra-circular-slider:focus-visible .inkra-circular-slider__focus-ring { opacity: 1; }
+@media (forced-colors: active) {
+  .inkra-circular-slider__track { color: GrayText; opacity: 1; }
+  .inkra-circular-slider__range { color: Highlight; }
+  .inkra-circular-slider__thumb-surface { border: 2px solid ButtonText; background: Canvas; }
+  .inkra-circular-slider:focus-visible .inkra-circular-slider__thumb-surface { outline: var(--inkra-focus-width) solid Highlight; outline-offset: var(--inkra-focus-offset); }
+  .inkra-circular-slider__focus-ring { display: none !important; }
+}
+@media (forced-colors: active), print {
+  .inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] { visibility: hidden; }
+  .inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: visible; }
+}

package/dist/styles/slot.css

@@ -64,7 +64,7 @@
 
 .inkra-slot__empty-mark {
   color: var(--inkra-ink-muted);
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-size: calc(var(--inkra-slot-size) * 0.4);
   line-height: 1;
 }