@inkra/react 0.9.0 → 0.10.0

package/dist/styles.css

@@ -1,5 +1,7 @@
 @import "./tokens.css";
 
+@import "./assets/xiaolai.css";
+
 @font-face {
   font-family: "Trip Map Hand";
   font-style: normal;
@@ -129,13 +131,13 @@
 .inkra-pencil-text__source {
   color: inherit;
   font: inherit;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
   font-kerning: none;
   font-variant-ligatures: none;
   letter-spacing: 0;
 }
 
 .inkra-pencil-text {
+  font-family: var(--inkra-font-hand);
   display: inline-block;
   max-width: 100%;
   min-width: 0;
@@ -216,7 +218,7 @@
   color: var(--inkra-on-accent, var(--inkra-accent-strong));
   cursor: pointer;
   display: inline-flex;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-weight: var(--inkra-weight-regular);
   justify-content: center;
   letter-spacing: var(--inkra-letter-spacing);
@@ -1412,6 +1414,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;
 }
@@ -1458,6 +1471,60 @@
   }
 }
 
+.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; }
+}
+
 .inkra-selection-control {
   align-items: center;
   color: var(--inkra-ink);
@@ -1723,6 +1790,56 @@
   }
 }
 
+/* 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; }
+}
+
 .inkra-portal-theme-bridge {
   display: contents;
   font-family: var(--inkra-font-body);
@@ -4269,7 +4386,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;
 }
@@ -4734,7 +4851,7 @@
 
 .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 {
@@ -8835,7 +8952,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 .inkra-markdown__code-surface {
   background: transparent;
   color: var(--inkra-ink);
-  font-family: "Trip Map Hand", var(--inkra-font-hand);
+  font-family: var(--inkra-font-hand);
   font-size: var(--inkra-text-md);
   font-weight: var(--inkra-weight-regular);
   line-height: 1.8;
@@ -9700,7 +9817,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   align-items: center;
   box-sizing: border-box;
   display: inline-flex;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-size: var(--inkra-breadcrumb-item-font-size);
   gap: var(--inkra-breadcrumb-item-gap);
   justify-content: center;

package/dist/tokens.css

@@ -1,3 +1,16 @@
+:root {
+  /* Color scopes inherit the selected typeface and lettering material. */
+  --inkra-font-hand: "Inkra Xiaolai", "Trip Map Hand", "Kaiti SC", "STKaiti", cursive;
+  --inkra-font-body: var(--inkra-font-hand);
+  --inkra-font-display: var(--inkra-font-hand);
+  --inkra-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --inkra-letter-variation: 0.1;
+  --inkra-letter-breaks: 0.31;
+  --inkra-letter-outline: 0.44;
+  --inkra-letter-fill: 0.85;
+  --inkra-letter-grain: 0.4;
+}
+
 :root,
 [data-theme="light"],
 [data-inkra-theme="light"],
@@ -98,11 +111,6 @@
   --inkra-overlay: rgb(24 35 28 / 20%);
   --inkra-shadow-overlay: 0 3px 12px rgb(24 35 28 / 20%);
 
-  --inkra-font-hand: "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti",
-    "Trip Map Hand", cursive;
-  --inkra-font-body: var(--inkra-font-hand);
-  --inkra-font-display: var(--inkra-font-hand);
-  --inkra-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
   --inkra-text-xs: 12px;
   --inkra-text-sm: 13px;
   --inkra-text-md: 15px;
@@ -194,11 +202,6 @@
   --inkra-quiet-wash-strength: 0.18;
   --inkra-badge-wash-strength: 0.25;
 
-  --inkra-letter-variation: 0.2;
-  --inkra-letter-breaks: 0.5;
-  --inkra-letter-outline: 0.9;
-  --inkra-letter-fill: 0.9;
-  --inkra-letter-grain: 0.6;
   --inkra-paper-tile-size: 384px;
   --inkra-render-dpr-cap: 2;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkra/react",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
   "type": "module",
   "license": "MIT",
@@ -496,7 +496,8 @@
     "README.md",
     "LICENSE",
     "THIRD_PARTY_NOTICES.md",
-    "Yozai-OFL.txt"
+    "Yozai-OFL.txt",
+    "Xiaolai-OFL.txt"
   ],
   "sideEffects": [
     "**/*.css"