@inkra/react 0.3.0 → 0.5.0

package/dist/styles/selection.css

@@ -0,0 +1,264 @@
+.inkra-selection-control {
+  align-items: center;
+  color: var(--inkra-ink);
+  cursor: pointer;
+  display: grid;
+  gap: var(--inkra-space-2);
+  grid-template-columns: auto minmax(0, 1fr);
+  min-height: var(--inkra-touch-target);
+  min-width: 0;
+  position: relative;
+}
+
+.inkra-selection-control__input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+
+.inkra-selection-control__mark {
+  align-items: center;
+  color: var(--inkra-ink);
+  display: inline-flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.inkra-selection-control__glyph {
+  color: var(--inkra-ink);
+  display: block;
+}
+
+.inkra-selection-control__copy {
+  display: grid;
+  gap: var(--inkra-space-1);
+  min-width: 0;
+  padding-block: var(--inkra-space-1);
+}
+
+.inkra-selection-control__label {
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-selection-control__description,
+.inkra-radio-group__description {
+  color: var(--inkra-ink-muted);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-selection-control__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+
+  inset: calc(-1 * var(--inkra-focus-offset));
+  opacity: 0;
+  pointer-events: none;
+  position: absolute !important;
+  z-index: 3;
+}
+
+.inkra-selection-control__focus-ring--inset {
+  inset: var(--inkra-focus-width);
+}
+
+.inkra-selection-control:has(.inkra-selection-control__input:focus-visible)
+  .inkra-selection-control__focus-ring {
+  opacity: 1;
+}
+
+.inkra-selection-control[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.inkra-radio-group {
+  border: 0;
+  color: var(--inkra-ink);
+  margin: 0;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0;
+}
+
+.inkra-radio-group__label {
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-ui);
+  margin: 0;
+  padding: 0;
+}
+
+.inkra-radio-group__description {
+  display: block;
+  margin-block-start: var(--inkra-space-1);
+}
+
+.inkra-radio-group__items {
+  display: grid;
+  gap: var(--inkra-space-2);
+  margin-block-start: var(--inkra-space-2);
+}
+
+.inkra-radio-group__items[data-orientation="horizontal"] {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: thin;
+}
+
+.inkra-radio-group__mark {
+  color: var(--inkra-ink);
+  position: relative;
+}
+
+.inkra-radio-group__icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+}
+
+.inkra-radio-group__item:has(.inkra-radio-group__icon):not(:has(.inkra-radio-group__segment)) {
+  grid-template-columns: auto auto minmax(0, 1fr);
+}
+
+.inkra-radio-group[data-variant="segmented"] .inkra-radio-group__item {
+  display: block;
+  flex: 0 0 auto;
+  min-height: var(--inkra-touch-target);
+  min-width: max-content;
+}
+
+.inkra-radio-group__frame {
+  box-sizing: border-box;
+  margin-block-start: var(--inkra-space-2);
+  max-width: 100%;
+  padding: var(--inkra-space-1);
+  width: fit-content;
+}
+
+.inkra-radio-group__frame > .inkra-radio-group__items {
+  gap: 0;
+  margin: 0;
+}
+
+.inkra-radio-group__segment {
+  align-items: center;
+  color: var(--inkra-ink);
+  display: flex;
+  justify-content: center;
+  min-height: var(--inkra-touch-target);
+  min-width: max-content;
+  padding: var(--inkra-space-2) var(--inkra-space-3);
+  position: relative;
+  white-space: nowrap;
+}
+
+.inkra-radio-group__item[data-checked="true"] .inkra-radio-group__segment {
+  color: var(--inkra-selection-foreground);
+}
+
+.inkra-radio-segment__surface {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: none;
+}
+
+.inkra-radio-segment__surface--selection {
+  opacity: 0;
+}
+
+.inkra-radio-group__item[data-checked="true"] .inkra-radio-segment__surface--selection {
+  opacity: 1;
+  transition: none;
+}
+
+.inkra-radio-segment__content {
+  align-items: center;
+  display: flex;
+  gap: var(--inkra-space-2);
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.inkra-radio-group__segment .inkra-selection-control__copy {
+  padding-block: 0;
+}
+
+.inkra-pencil-surface.inkra-switch__track {
+  align-items: center;
+  display: inline-flex;
+  height: 32px;
+  justify-content: flex-start;
+  overflow: visible;
+  padding-inline: 4px;
+  width: 52px;
+}
+
+.inkra-switch__thumb {
+  --inkra-switch-thumb-shift: 0px;
+
+  color: var(--inkra-ink-muted);
+  display: block;
+  transform: translateX(var(--inkra-switch-thumb-shift));
+  transition: transform var(--inkra-motion-fast) var(--inkra-ease);
+}
+
+.inkra-switch__track > .inkra-pencil-surface__ink {
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+.inkra-switch[data-checked="true"] .inkra-switch__thumb {
+  --inkra-switch-thumb-shift: 20px;
+
+  color: var(--inkra-on-accent);
+}
+
+.inkra-switch:dir(rtl)[data-checked="true"] .inkra-switch__thumb {
+  --inkra-switch-thumb-shift: -20px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-selection-control__focus-ring,
+  .inkra-radio-segment__surface,
+  .inkra-switch__thumb {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-selection-control__input {
+    appearance: auto;
+    forced-color-adjust: auto;
+    height: 24px;
+    opacity: 1;
+    position: static;
+    width: 24px;
+    z-index: auto;
+  }
+
+  .inkra-selection-control .inkra-selection-control__mark,
+  .inkra-selection-control .inkra-switch__track,
+  .inkra-selection-control .inkra-radio-segment__surface,
+  .inkra-selection-control .inkra-selection-control__focus-ring {
+    display: none;
+  }
+
+  .inkra-selection-control__input:focus-visible {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-offset: var(--inkra-focus-offset);
+  }
+}

package/dist/styles/slider.css

@@ -0,0 +1,145 @@
+.inkra-slider {
+  --inkra-slider-track-size: 8px;
+  --inkra-slider-thumb-size: 24px;
+
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  cursor: pointer;
+  display: flex;
+  min-height: var(--inkra-touch-target);
+  min-width: var(--inkra-touch-target);
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  width: 100%;
+}
+
+.inkra-slider[data-size="sm"] {
+  --inkra-slider-track-size: 6px;
+  --inkra-slider-thumb-size: 20px;
+}
+
+.inkra-slider[data-size="lg"] {
+  --inkra-slider-track-size: 12px;
+  --inkra-slider-thumb-size: 28px;
+}
+
+.inkra-slider[data-variant="inset"] {
+  --inkra-slider-track-size: 32px;
+  --inkra-slider-thumb-size: 24px;
+}
+
+.inkra-slider[data-variant="inset"][data-size="sm"] {
+  --inkra-slider-track-size: 24px;
+  --inkra-slider-thumb-size: 16px;
+}
+
+.inkra-slider[data-variant="inset"][data-size="lg"] {
+  --inkra-slider-track-size: 40px;
+  --inkra-slider-thumb-size: 32px;
+}
+
+.inkra-slider[data-orientation="vertical"] {
+  flex-direction: column;
+  height: 200px;
+  width: var(--inkra-touch-target);
+}
+
+.inkra-slider[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.inkra-slider__track {
+  display: block;
+  flex: 1;
+  height: var(--inkra-slider-track-size);
+  position: relative;
+}
+
+.inkra-slider[data-orientation="vertical"] .inkra-slider__track {
+  height: auto;
+  width: var(--inkra-slider-track-size);
+}
+
+.inkra-slider__range {
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+}
+
+.inkra-slider__track-surface,
+.inkra-slider__range-surface {
+  height: 100%;
+  inset: 0;
+  pointer-events: none;
+  position: absolute !important;
+  width: 100%;
+}
+
+.inkra-slider__thumb {
+  align-items: center;
+  box-sizing: border-box;
+  cursor: inherit;
+  display: flex;
+  height: var(--inkra-touch-target);
+  justify-content: center;
+  outline: none;
+  width: var(--inkra-touch-target);
+}
+
+.inkra-slider__thumb-surface {
+  border-radius: 8px;
+  display: block !important;
+  height: var(--inkra-slider-thumb-size);
+  pointer-events: none;
+  width: var(--inkra-slider-thumb-size);
+}
+
+.inkra-slider__thumb:focus-visible {
+  outline: none;
+}
+
+.inkra-slider__focus-ring {
+  --inkra-ink: var(--inkra-focus);
+
+  inset: -4px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute !important;
+  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+}
+
+.inkra-slider__thumb:focus-visible .inkra-slider__focus-ring {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-slider__focus-ring {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-slider__track-surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+  .inkra-slider__range-surface {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+  .inkra-slider__thumb-surface {
+    background: Canvas;
+    border: 2px solid ButtonText;
+  }
+  .inkra-slider__thumb:focus-visible .inkra-slider__thumb-surface {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-offset: var(--inkra-focus-offset);
+  }
+  .inkra-slider__focus-ring {
+    display: none !important;
+  }
+}

package/dist/styles/slot.css

@@ -0,0 +1,109 @@
+.inkra-slot {
+  --inkra-slot-size: 64px;
+
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  block-size: var(--inkra-slot-size);
+  border: 0;
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  display: inline-grid;
+  flex: 0 0 auto;
+  inline-size: var(--inkra-slot-size);
+  justify-items: center;
+  min-block-size: var(--inkra-slot-size);
+  min-inline-size: var(--inkra-slot-size);
+  padding: var(--inkra-space-2);
+  position: relative;
+  vertical-align: middle;
+}
+
+.inkra-slot[data-size="sm"] { --inkra-slot-size: 48px; }
+.inkra-slot[data-size="lg"] { --inkra-slot-size: 80px; }
+
+.inkra-slot[data-interactive="true"] {
+  cursor: pointer;
+  font: inherit;
+}
+
+.inkra-slot[data-interactive="true"]:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: var(--inkra-focus-offset);
+}
+
+.inkra-slot[data-interactive="true"]:not(:disabled):hover {
+  transform: translateY(-0.5px);
+}
+
+.inkra-slot[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.inkra-slot__content {
+  align-items: center;
+  block-size: 100%;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.inkra-slot__content > :where(img, svg, canvas) {
+  block-size: 100%;
+  inline-size: 100%;
+  max-block-size: 100%;
+  max-inline-size: 100%;
+  object-fit: contain;
+}
+
+.inkra-slot__empty-mark {
+  color: var(--inkra-ink-muted);
+  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-size: calc(var(--inkra-slot-size) * 0.4);
+  line-height: 1;
+}
+
+.inkra-slot__selected-wash,
+.inkra-slot__selected-outline {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.inkra-slot__selected-wash { z-index: 0; }
+.inkra-slot__selected-outline { z-index: 2; }
+
+.inkra-slot__count {
+  inset-block-start: -8px;
+  inset-inline-end: -8px;
+  line-height: 1;
+  max-inline-size: calc(var(--inkra-slot-size) * 0.85);
+  pointer-events: none;
+  position: absolute;
+  z-index: 3;
+}
+
+.inkra-slot__count > .inkra-badge {
+  max-inline-size: 100%;
+  min-block-size: 24px;
+  min-inline-size: 24px;
+  overflow: hidden;
+  padding-inline: var(--inkra-space-1);
+  text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-slot { transition: none; }
+  .inkra-slot[data-interactive="true"]:not(:disabled):hover { transform: none; }
+}
+
+@media (forced-colors: active) {
+  .inkra-slot[data-selected="true"] { outline: 2px solid Highlight; }
+  .inkra-slot__empty-mark { color: GrayText; }
+}

package/dist/styles/sortable.css

@@ -0,0 +1,159 @@
+.inkra-sortable {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--inkra-space-4);
+  min-width: 0;
+  color: var(--inkra-ink);
+}
+
+.inkra-sortable__container {
+  position: relative;
+  flex: 1 1 240px;
+  min-width: min(100%, 220px);
+  padding: var(--inkra-space-3);
+  border-radius: var(--inkra-radius-md);
+}
+
+.inkra-sortable__container-target {
+  position: absolute;
+  inset: 3px;
+  z-index: 0;
+  border-radius: var(--inkra-radius-md);
+  pointer-events: none;
+}
+
+.inkra-sortable__container-header {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  padding: var(--inkra-space-1) var(--inkra-space-1) var(--inkra-space-2);
+}
+
+.inkra-sortable__container-title { min-width: 0; padding-inline: var(--inkra-space-1); }
+.inkra-sortable__container-divider { display: block; width: 100%; height: 8px; margin-top: var(--inkra-space-2); }
+
+.inkra-sortable__items {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: var(--inkra-space-2);
+  min-height: var(--inkra-touch-target);
+}
+
+.inkra-sortable__container[data-layout="grid"] .inkra-sortable__items {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
+}
+
+.inkra-sortable__item,
+.inkra-sortable__overlay {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  min-height: var(--inkra-touch-target);
+  border-radius: var(--inkra-radius-md);
+  color: var(--inkra-ink);
+  touch-action: manipulation;
+}
+
+.inkra-sortable__item:not([data-disabled]) { cursor: grab; }
+.inkra-sortable__item[data-handle] { cursor: auto; }
+.inkra-sortable__item:not([data-disabled]):not([data-handle]) { touch-action: none; }
+.inkra-sortable__item[data-dragging] { cursor: grabbing; z-index: 1; }
+.inkra-sortable__item:focus { outline: none; }
+
+.inkra-sortable__item-surface,
+.inkra-sortable__overlay-surface,
+.inkra-sortable__placeholder,
+.inkra-sortable__focus {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.inkra-sortable__placeholder { z-index: 0; }
+.inkra-sortable__focus { z-index: 2; inset: -2px; opacity: 0; }
+.inkra-sortable__item:focus-visible > .inkra-sortable__focus,
+.inkra-sortable__item:has(.inkra-sortable__handle:focus-visible) > .inkra-sortable__focus { opacity: 1; }
+.inkra-sortable__item[data-dragging] > .inkra-sortable__item-surface,
+.inkra-sortable__item[data-dragging] > .inkra-sortable__item-content,
+.inkra-sortable__item[data-dragging] > .inkra-sortable__handle-slot { opacity: 0; }
+
+.inkra-sortable__item-content {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: var(--inkra-space-3);
+}
+
+.inkra-sortable__handle-slot {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 var(--inkra-touch-target);
+  display: grid;
+  place-items: center;
+}
+
+.inkra-sortable__handle {
+  appearance: none;
+  display: inline-grid;
+  place-items: center;
+  width: var(--inkra-touch-target);
+  height: var(--inkra-touch-target);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--inkra-ink-muted);
+  cursor: grab;
+  touch-action: none;
+}
+
+.inkra-sortable__handle:focus { outline: none; }
+
+.inkra-sortable__overlay {
+  width: var(--inkra-sortable-overlay-width, auto);
+  min-width: 180px;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--inkra-ink) 18%, transparent);
+  cursor: grabbing;
+}
+
+.inkra-sortable__empty {
+  min-height: var(--inkra-touch-target);
+}
+
+.inkra-sortable__item[data-disabled],
+.inkra-sortable__container[data-disabled] {
+  opacity: .55;
+}
+
+.inkra-sortable__container[data-disabled] .inkra-sortable__item { cursor: not-allowed; }
+
+@media (max-width: 640px) {
+  .inkra-sortable { flex-direction: column; }
+  .inkra-sortable__container { flex-basis: auto; width: 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-sortable__item { transition: none !important; }
+}
+
+@media (forced-colors: active) {
+  .inkra-sortable__container,
+  .inkra-sortable__item,
+  .inkra-sortable__overlay { border: 1px solid CanvasText; }
+  .inkra-sortable__container[data-over] { outline: 2px solid Highlight; outline-offset: -3px; }
+  .inkra-sortable__handle:focus-visible,
+  .inkra-sortable__item:focus-visible { outline-color: Highlight; }
+  .inkra-sortable__item:focus-visible,
+  .inkra-sortable__item:has(.inkra-sortable__handle:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
+}
+
+@media print {
+  .inkra-sortable__container,
+  .inkra-sortable__item { border: 1px solid currentColor; }
+  .inkra-sortable__handle { display: none; }
+}

package/dist/styles/sparkline.css

@@ -0,0 +1,24 @@
+.inkra-sparkline { position: relative; display: inline-grid; gap: var(--inkra-space-1, 4px); max-inline-size: 100%; color: var(--inkra-ink); font-size: var(--inkra-text-sm); }
+.inkra-sparkline__svg { display: block; inline-size: min(100%, 100%); block-size: auto; overflow: visible; outline: none; position: relative; z-index: 1; }
+.inkra-sparkline__pencil { position: absolute; inset: 0 auto auto 0; inline-size: 100%; block-size: auto; aspect-ratio: 180 / 56; pointer-events: none; z-index: 2; opacity: 0; }
+.inkra-sparkline__pencil--interaction { z-index: 3; }
+.inkra-sparkline__pencil--interaction + .inkra-sparkline__tooltip { z-index: 4; }
+.inkra-sparkline--pencil-ready .inkra-sparkline__pencil { opacity: .9; }
+.inkra-sparkline--pencil-ready .inkra-sparkline__svg { opacity: 1; }
+.inkra-sparkline--pencil-ready .inkra-sparkline__area,
+.inkra-sparkline--pencil-ready .inkra-sparkline__line,
+.inkra-sparkline--pencil-ready .inkra-sparkline__bar { opacity: 0; }
+.inkra-sparkline--interaction-ready .inkra-sparkline__guide { opacity: 0; }
+.inkra-sparkline--interaction-ready[data-show-points] .inkra-sparkline__point { opacity: 0; }
+.inkra-sparkline__svg:focus-visible { outline: 2px solid var(--inkra-focus); outline-offset: 4px; }
+.inkra-sparkline__line { fill: none; stroke: var(--inkra-accent-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+.inkra-sparkline__area { fill: color-mix(in srgb, var(--inkra-accent) 18%, transparent); }
+.inkra-sparkline__bar { fill: var(--inkra-accent); opacity: .78; }
+.inkra-sparkline__point { fill: var(--inkra-paper); stroke: var(--inkra-accent-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+.inkra-sparkline__point[data-active] { fill: var(--inkra-selection-pigment); stroke-width: 2; }
+.inkra-sparkline__guide { stroke: var(--inkra-ink-muted); stroke-dasharray: 2 3; stroke-width: 1; opacity: .65; vector-effect: non-scaling-stroke; }
+.inkra-sparkline__tooltip { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: 2px 6px; color: var(--inkra-ink); background: color-mix(in srgb, var(--inkra-paper) 86%, transparent); pointer-events: none; }
+.inkra-sparkline__summary { margin: 0; color: var(--inkra-ink-muted); line-height: var(--inkra-line-ui, 1.45); }
+.inkra-sparkline__data { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
+@media (prefers-reduced-motion: reduce) { .inkra-sparkline * { transition: none !important; animation: none !important; } }
+@media (forced-colors: active), print { .inkra-sparkline__pencil { display: none; } .inkra-sparkline--pencil-ready .inkra-sparkline__svg, .inkra-sparkline--pencil-ready .inkra-sparkline__area, .inkra-sparkline--pencil-ready .inkra-sparkline__line, .inkra-sparkline--pencil-ready .inkra-sparkline__bar, .inkra-sparkline--interaction-ready[data-show-points] .inkra-sparkline__point, .inkra-sparkline--interaction-ready .inkra-sparkline__guide { opacity: 1; } .inkra-sparkline__line, .inkra-sparkline__bar, .inkra-sparkline__point, .inkra-sparkline__guide { stroke: CanvasText; fill: Canvas; opacity: 1; } .inkra-sparkline__line { fill: none; } }