@inkra/react 0.3.0 → 0.5.0

package/dist/styles/heatmap.css

@@ -0,0 +1,256 @@
+.inkra-heatmap {
+  color: var(--inkra-ink);
+  display: grid;
+  gap: var(--inkra-space-4);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.inkra-heatmap__heading {
+  display: grid;
+  gap: var(--inkra-space-1);
+}
+
+.inkra-heatmap__label {
+  font-size: var(--inkra-text-lg);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-heatmap__description,
+.inkra-heatmap__details,
+.inkra-heatmap__empty {
+  color: var(--inkra-ink-muted);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-body);
+}
+
+.inkra-heatmap__viewport {
+  max-inline-size: 100%;
+  overflow: auto;
+  padding: var(--inkra-space-1);
+}
+
+.inkra-heatmap__grid {
+  display: grid;
+  inline-size: max-content;
+  min-inline-size: 100%;
+}
+
+.inkra-heatmap__row {
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: minmax(5rem, var(--inkra-heatmap-row-label-width)) repeat(var(--inkra-heatmap-column-count), var(--inkra-heatmap-cell-size));
+}
+
+.inkra-heatmap__row--header {
+  align-items: end;
+}
+
+.inkra-heatmap__corner,
+.inkra-heatmap__column-label,
+.inkra-heatmap__row-label {
+  box-sizing: border-box;
+  color: var(--inkra-ink-muted);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  padding: var(--inkra-space-2);
+}
+
+.inkra-heatmap__column-label {
+  text-align: center;
+}
+
+.inkra-heatmap__row-label {
+  align-items: center;
+  display: flex;
+  min-block-size: var(--inkra-heatmap-cell-size);
+  padding-inline-start: 0;
+}
+
+.inkra-heatmap__cell {
+  align-items: center;
+  appearance: none;
+  background: none;
+  block-size: var(--inkra-heatmap-cell-size);
+  border: 0;
+  border-radius: var(--inkra-radius-md);
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  inline-size: var(--inkra-heatmap-cell-size);
+  justify-content: center;
+  margin: 0;
+  min-block-size: 44px;
+  min-inline-size: 44px;
+  padding: var(--inkra-space-1);
+  position: relative;
+}
+
+.inkra-heatmap__cell-paint,
+.inkra-heatmap__cell-selection {
+  border-radius: var(--inkra-radius-md);
+  inset: var(--inkra-space-1);
+  pointer-events: none;
+  position: absolute;
+}
+
+.inkra-heatmap__cell-paint {
+  z-index: 0;
+}
+
+.inkra-heatmap__cell-selection {
+  inset: 1px;
+  opacity: .58;
+  z-index: 1;
+}
+
+.inkra-heatmap__cell-content {
+  align-items: center;
+  display: flex;
+  font-size: var(--inkra-text-sm);
+  font-variant-numeric: tabular-nums;
+  justify-content: center;
+  line-height: var(--inkra-line-tight);
+  max-block-size: 100%;
+  max-inline-size: 100%;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  position: relative;
+  text-align: center;
+  z-index: 2;
+}
+
+.inkra-heatmap__value-mark {
+  background: currentColor;
+  block-size: 4px;
+  border-radius: var(--inkra-radius-sm);
+  inline-size: 18px;
+}
+
+.inkra-heatmap__cell[data-missing="true"] .inkra-heatmap__cell-content {
+  color: var(--inkra-ink-subtle);
+}
+
+.inkra-heatmap__cell[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
+.inkra-heatmap__cell[data-active="true"] .inkra-heatmap__cell-paint {
+  filter: saturate(1.08);
+}
+
+.inkra-heatmap__cell:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: 0;
+  z-index: 3;
+}
+
+.inkra-heatmap__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-3) var(--inkra-space-4);
+  min-inline-size: 0;
+}
+
+.inkra-heatmap__legend-label {
+  flex-basis: 100%;
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-heatmap__legend-continuous {
+  display: grid;
+  gap: var(--inkra-space-1);
+  inline-size: min(100%, 22rem);
+}
+
+.inkra-heatmap__legend-strip {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(20px, 1fr));
+}
+
+.inkra-heatmap__legend-swatch {
+  block-size: 22px;
+  display: inline-block;
+  inline-size: 32px;
+  min-inline-size: 20px;
+  pointer-events: none;
+}
+
+.inkra-heatmap__legend-strip .inkra-heatmap__legend-swatch {
+  inline-size: auto;
+}
+
+.inkra-heatmap__legend-values {
+  color: var(--inkra-ink-muted);
+  display: flex;
+  font-size: var(--inkra-text-xs);
+  font-variant-numeric: tabular-nums;
+  justify-content: space-between;
+}
+
+.inkra-heatmap__legend-bins {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-2) var(--inkra-space-3);
+}
+
+.inkra-heatmap__legend-bin,
+.inkra-heatmap__legend-missing {
+  align-items: center;
+  color: var(--inkra-ink-muted);
+  display: inline-flex;
+  font-size: var(--inkra-text-xs);
+  gap: var(--inkra-space-1);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-heatmap__details {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-1) var(--inkra-space-2);
+  min-block-size: 24px;
+}
+
+.inkra-heatmap__details strong {
+  color: var(--inkra-ink);
+  font-weight: 400;
+}
+
+@media (max-width: 640px) {
+  .inkra-heatmap {
+    gap: var(--inkra-space-3);
+  }
+
+  .inkra-heatmap__viewport {
+    margin-inline: calc(var(--inkra-space-1) * -1);
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-heatmap__cell {
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-heatmap__cell[data-selected="true"] {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+    outline-offset: -3px;
+  }
+
+  .inkra-heatmap__cell[data-missing="true"] {
+    border-style: double;
+  }
+
+  .inkra-heatmap__cell-paint,
+  .inkra-heatmap__cell-selection,
+  .inkra-heatmap__legend-swatch canvas {
+    display: none;
+  }
+}

package/dist/styles/hotkey.css

@@ -0,0 +1,189 @@
+.inkra-hotkey {
+  display: inline-flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: var(--inkra-space-1);
+  color: var(--inkra-ink);
+  font: inherit;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.inkra-hotkey__part {
+  display: inline-flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: var(--inkra-space-1);
+}
+
+.inkra-hotkey__key {
+  display: inline-flex;
+  box-sizing: border-box;
+  min-inline-size: 1.75rem;
+  block-size: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--inkra-space-2);
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-sm);
+}
+
+.inkra-hotkey[data-size="sm"] .inkra-hotkey__key {
+  min-inline-size: 1.5rem;
+  block-size: 1.5rem;
+  padding-inline: var(--inkra-space-1);
+  font-size: var(--inkra-text-xs);
+}
+
+.inkra-hotkey[data-size="lg"] .inkra-hotkey__key {
+  min-inline-size: 2rem;
+  block-size: 2rem;
+  font-size: var(--inkra-text-md);
+}
+
+.inkra-hotkey__separator {
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-sm);
+}
+
+.inkra-hotkey-input {
+  --inkra-hotkey-input-height: var(--inkra-control-md);
+
+  position: relative;
+  display: grid;
+  inline-size: 20rem;
+  max-inline-size: 100%;
+  gap: var(--inkra-space-2);
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-hotkey-input[data-size="sm"] { --inkra-hotkey-input-height: var(--inkra-control-sm); }
+.inkra-hotkey-input[data-size="lg"] { --inkra-hotkey-input-height: var(--inkra-control-lg); }
+
+.inkra-hotkey-input__control {
+  position: relative;
+  display: flex !important;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  block-size: var(--inkra-hotkey-input-height);
+  min-block-size: var(--inkra-hotkey-input-height);
+  align-items: center;
+  margin-block: max(0px, calc((var(--inkra-touch-target) - var(--inkra-hotkey-input-height)) / 2));
+}
+
+.inkra-hotkey-input__control > .inkra-pencil-surface__content {
+  overflow: visible;
+  clip-path: none;
+}
+
+.inkra-hotkey-input__native {
+  position: absolute;
+  z-index: 2;
+  inset-inline: 0;
+  inset-block: min(0px, calc((var(--inkra-hotkey-input-height) - var(--inkra-touch-target)) / 2));
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: auto;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font: inherit;
+  cursor: text;
+}
+
+.inkra-hotkey-input__native::selection { background: transparent; color: transparent; }
+
+.inkra-hotkey-input__value {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-inline-size: 0;
+  flex: 1;
+  align-items: center;
+  padding: var(--inkra-space-2) var(--inkra-space-3);
+  pointer-events: none;
+}
+
+.inkra-hotkey-input:has(.inkra-hotkey-input__clear) .inkra-hotkey-input__value {
+  padding-inline-end: calc(max(var(--inkra-touch-target), var(--inkra-hotkey-input-height)) + var(--inkra-space-2));
+}
+
+.inkra-hotkey-input__placeholder { color: var(--inkra-ink-subtle); }
+
+.inkra-hotkey-input__recording {
+  color: var(--inkra-accent-strong);
+}
+
+.inkra-hotkey-input__focus-ring {
+  position: absolute !important;
+  z-index: 4;
+  inset: 2px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+}
+
+.inkra-hotkey-input[data-recording="true"] .inkra-hotkey-input__focus-ring { opacity: 1; }
+
+.inkra-hotkey-input__status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.inkra-hotkey-input__clear {
+  position: absolute;
+  z-index: 3;
+  inset-block: min(0px, calc((var(--inkra-hotkey-input-height) - var(--inkra-touch-target)) / 2));
+  inset-inline-end: 0;
+  display: inline-flex;
+  inline-size: max(var(--inkra-touch-target), var(--inkra-hotkey-input-height));
+  block-size: auto;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: var(--inkra-ink-muted);
+  cursor: pointer;
+}
+
+.inkra-hotkey-input__clear:disabled { cursor: not-allowed; }
+
+.inkra-hotkey-input[data-focus-within="true"] .inkra-hotkey-input__control > .inkra-pencil-surface__ink,
+.inkra-hotkey-input[data-focus-within="true"] .inkra-hotkey-input__control > .inkra-pencil-surface__border {
+  filter: contrast(1.28) saturate(1.08);
+}
+
+.inkra-hotkey-input[data-disabled="true"] { cursor: not-allowed; opacity: .55; }
+.inkra-hotkey-input[data-readonly="true"] .inkra-hotkey-input__value { color: var(--inkra-ink-muted); }
+.inkra-hotkey-input__message { color: var(--inkra-danger-foreground, var(--inkra-danger)); font-size: var(--inkra-text-sm); }
+
+@media (forced-colors: active) {
+  .inkra-hotkey__key,
+  .inkra-hotkey-input__control { border: 1px solid CanvasText; }
+  .inkra-hotkey-input[data-focus-within="true"] .inkra-hotkey-input__control { outline: 2px solid Highlight; outline-offset: 2px; }
+  .inkra-hotkey-input[data-invalid="true"] .inkra-hotkey-input__control { border-color: Mark; }
+  .inkra-hotkey-input__message { color: Mark; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-hotkey-input__focus-ring { transition: none; }
+}
+
+@media print {
+  .inkra-hotkey__key,
+  .inkra-hotkey-input__control { border: 1px solid currentColor; }
+}

package/dist/styles/hover-card.css

@@ -0,0 +1,27 @@
+.inkra-hover-card__content {
+  max-height: min(70vh, var(--radix-popover-content-available-height, 70vh));
+  max-width: min(22rem, calc(100vw - var(--inkra-space-4)));
+  width: max-content;
+}
+
+.inkra-hover-card__content > .inkra-popover__surface {
+  min-width: min(18rem, calc(100vw - var(--inkra-space-4)));
+}
+
+.inkra-hover-card__content .inkra-popover__content-body {
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 30rem) {
+  .inkra-hover-card__content,
+  .inkra-hover-card__content > .inkra-popover__surface {
+    min-width: 0;
+    width: min(22rem, calc(100vw - var(--inkra-space-4)));
+  }
+}
+
+@media print {
+  .inkra-hover-card__content {
+    display: none;
+  }
+}

package/dist/styles/image-cropper.css

@@ -0,0 +1,205 @@
+.inkra-image-cropper {
+  display: grid;
+  gap: var(--inkra-space-4);
+  min-inline-size: 0;
+  width: 100%;
+}
+
+.inkra-image-cropper__stage {
+  position: relative;
+  min-block-size: 18rem;
+  block-size: clamp(18rem, 52vw, 30rem);
+  min-inline-size: 0;
+  overflow: hidden;
+  border-radius: var(--inkra-radius-lg);
+  background: color-mix(in srgb, var(--inkra-ink) 8%, var(--inkra-paper));
+  contain: layout paint;
+}
+
+.inkra-image-cropper__stage-surface {
+  position: absolute !important;
+  z-index: 5;
+  inset: 0;
+  pointer-events: none;
+}
+
+.inkra-image-cropper__engine {
+  position: absolute !important;
+  inset: var(--inkra-space-1) !important;
+  overflow: hidden;
+  border-radius: var(--inkra-radius-md);
+  background: transparent !important;
+}
+
+.inkra-image-cropper__media {
+  user-select: none;
+}
+
+.inkra-image-cropper__area {
+  color: var(--inkra-paper);
+  border: 2px solid currentColor !important;
+  box-shadow: 0 0 0 9999em color-mix(in srgb, var(--inkra-ink) 58%, transparent) !important;
+}
+
+.inkra-image-cropper__area::before,
+.inkra-image-cropper__area::after {
+  border-color: color-mix(in srgb, var(--inkra-paper) 72%, transparent) !important;
+}
+
+.inkra-image-cropper[data-disabled] .inkra-image-cropper__engine,
+.inkra-image-cropper[data-read-only] .inkra-image-cropper__engine {
+  pointer-events: none;
+}
+
+.inkra-image-cropper[data-disabled] {
+  opacity: 0.58;
+}
+
+.inkra-image-cropper__state {
+  position: absolute;
+  z-index: 4;
+  inset: var(--inkra-space-1);
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--inkra-space-3);
+  padding: var(--inkra-space-5);
+  overflow-wrap: anywhere;
+  text-align: center;
+  background: var(--inkra-paper);
+}
+
+.inkra-image-cropper__state h3,
+.inkra-image-cropper__state p {
+  margin: 0;
+}
+
+.inkra-image-cropper__state p {
+  max-inline-size: 34rem;
+  color: var(--inkra-ink-muted);
+}
+
+.inkra-image-cropper__spinner {
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  color: var(--inkra-ink-muted);
+  animation: inkra-image-cropper-spin var(--inkra-motion-slow) linear infinite;
+}
+
+@keyframes inkra-image-cropper-spin {
+  to { transform: rotate(360deg); }
+}
+
+.inkra-image-cropper__load-probe,
+.inkra-image-cropper__instructions {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.inkra-image-cropper__controls {
+  display: grid;
+  grid-template-columns: minmax(12rem, 1fr) auto;
+  gap: var(--inkra-space-4);
+  align-items: end;
+  min-inline-size: 0;
+}
+
+.inkra-image-cropper__control,
+.inkra-image-cropper__free-controls {
+  display: grid;
+  gap: var(--inkra-space-2);
+  min-inline-size: 0;
+}
+
+.inkra-image-cropper__free-controls {
+  grid-column: 1 / -1;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--inkra-space-4);
+}
+
+.inkra-image-cropper__control-label {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--inkra-space-3);
+  color: var(--inkra-ink-muted);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-image-cropper__control-label output {
+  min-inline-size: 4rem;
+  color: var(--inkra-ink);
+  text-align: end;
+}
+
+.inkra-image-cropper__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-2);
+  justify-content: flex-end;
+  align-items: center;
+}
+
+@media (max-width: 36rem) {
+  .inkra-image-cropper {
+    gap: var(--inkra-space-3);
+  }
+
+  .inkra-image-cropper__stage {
+    min-block-size: 15rem;
+    block-size: min(72vw, 24rem);
+  }
+
+  .inkra-image-cropper__controls,
+  .inkra-image-cropper__free-controls {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .inkra-image-cropper__actions {
+    justify-content: stretch;
+  }
+
+  .inkra-image-cropper__actions .inkra-button:not([data-size^="icon"]) {
+    flex: 1 1 auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-image-cropper__spinner {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-image-cropper__stage {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
+
+  .inkra-image-cropper__area {
+    color: HighlightText;
+    border-color: Highlight !important;
+    box-shadow: 0 0 0 9999em Canvas !important;
+  }
+
+  .inkra-image-cropper__state {
+    background: Canvas;
+  }
+
+  .inkra-image-cropper__spinner {
+    forced-color-adjust: none;
+  }
+}
+
+@media print {
+  .inkra-image-cropper__controls,
+  .inkra-image-cropper__state[role="status"] {
+    display: none;
+  }
+}