@inkra/react 0.3.0 → 0.5.0

package/dist/styles/pan-zoom.css

@@ -0,0 +1,136 @@
+.inkra-pan-zoom {
+  --inkra-pan-zoom-min-block-size: 18rem;
+  position: relative;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  block-size: 100%;
+  min-block-size: var(--inkra-pan-zoom-min-block-size);
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  isolation: isolate;
+}
+
+.inkra-pan-zoom__surface {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.inkra-pan-zoom__clip {
+  position: relative;
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  block-size: 100%;
+  min-block-size: var(--inkra-pan-zoom-min-block-size);
+  overflow: hidden;
+  border-radius: var(--inkra-radius-lg);
+}
+
+.inkra-pan-zoom__clip > .react-transform-wrapper,
+.inkra-pan-zoom__viewport {
+  box-sizing: border-box;
+  inline-size: 100% !important;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  block-size: 100% !important;
+  max-block-size: 100%;
+  min-block-size: 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  color: inherit;
+  outline: none;
+  touch-action: none;
+}
+
+.inkra-pan-zoom__clip > .react-transform-wrapper:focus-visible,
+.inkra-pan-zoom__viewport:focus-visible {
+  outline: 0;
+}
+
+.inkra-pan-zoom__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+  position: absolute;
+  inset: var(--inkra-space-1);
+  z-index: 3;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.inkra-pan-zoom:has(.react-transform-wrapper:focus-visible) > .inkra-pan-zoom__focus-ring {
+  opacity: 1;
+}
+
+.inkra-pan-zoom__content {
+  box-sizing: border-box;
+  align-items: flex-start;
+  justify-content: flex-start;
+  max-inline-size: none;
+  color: inherit;
+}
+
+.inkra-pan-zoom__content :where(button, a, input, select, textarea, [contenteditable="true"], [data-pan-zoom-no-drag]) {
+  touch-action: manipulation;
+}
+
+.inkra-pan-zoom__instructions {
+  position: absolute;
+  overflow: hidden;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.inkra-pan-zoom[data-read-only],
+.inkra-pan-zoom[data-disabled] {
+  cursor: default;
+}
+
+.inkra-pan-zoom:not([data-gestures]) .inkra-pan-zoom__clip > .react-transform-wrapper,
+.inkra-pan-zoom:not([data-gestures]) .inkra-pan-zoom__viewport {
+  touch-action: auto;
+}
+
+.inkra-pan-zoom[data-disabled] {
+  color: var(--inkra-ink-subtle);
+  opacity: 0.62;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-pan-zoom *,
+  .inkra-pan-zoom *::before,
+  .inkra-pan-zoom *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media print, (forced-colors: active) {
+  .inkra-pan-zoom__surface,
+  .inkra-pan-zoom__focus-ring {
+    display: none;
+  }
+
+  .inkra-pan-zoom__viewport {
+    background: Canvas;
+    border: 1px solid CanvasText;
+    color: CanvasText;
+    forced-color-adjust: auto;
+  }
+
+  .inkra-pan-zoom__clip > .react-transform-wrapper:focus-visible,
+  .inkra-pan-zoom__viewport:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}

package/dist/styles/radar.css

@@ -0,0 +1 @@
+.inkra-radar{color:var(--inkra-ink);display:grid;gap:var(--inkra-space-4);inline-size:100%;min-inline-size:0}.inkra-radar__heading{display:grid;gap:var(--inkra-space-1)}.inkra-radar__label{font-size:var(--inkra-text-lg);line-height:var(--inkra-line-ui)}.inkra-radar__description,.inkra-radar__empty{color:var(--inkra-ink-muted);font-size:var(--inkra-text-sm);line-height:var(--inkra-line-body)}.inkra-radar__viewport{aspect-ratio:1;inline-size:var(--inkra-radar-size);max-inline-size:100%;min-block-size:220px;position:relative}.inkra-radar__ink{block-size:100%;inline-size:100%;display:block;opacity:0}.inkra-radar__ink[data-ready=true]{opacity:1}.inkra-radar__svg-fallback{block-size:100%;inline-size:100%;inset:0;opacity:1;overflow:visible;pointer-events:none;position:absolute}.inkra-radar__ink[data-ready=true] + .inkra-radar__svg-fallback{opacity:0}.inkra-radar__svg-fallback path{fill:none;stroke:currentColor;stroke-width:2}.inkra-radar__labels{inset:0;pointer-events:none;position:absolute}.inkra-radar__axis-label{box-sizing:border-box;color:var(--inkra-ink-muted);font-size:var(--inkra-text-sm);line-height:var(--inkra-line-ui);max-inline-size:min(9rem, 30%);min-inline-size:4rem;overflow-wrap:break-word;position:absolute;transform:translate(-50%,-50%);text-align:center;white-space:normal;word-break:normal}.inkra-radar__axis-label > .inkra-pencil-text{display:inline-block;max-inline-size:100%;min-inline-size:0;white-space:normal;word-break:normal}.inkra-radar__summary{display:grid;gap:var(--inkra-space-3)}.inkra-radar__series-summary{display:grid;gap:var(--inkra-space-1);min-inline-size:0}.inkra-radar__legend,.inkra-radar__legend-button{align-items:center;display:flex;flex-wrap:wrap;gap:var(--inkra-space-2)}.inkra-radar__legend{gap:var(--inkra-space-3) var(--inkra-space-4)}.inkra-radar__legend-title{flex-basis:100%;font-size:var(--inkra-text-sm)}.inkra-radar__legend-button{min-block-size:44px;padding-inline:var(--inkra-space-2);text-align:start}.inkra-radar__legend-mark{block-size:28px;display:inline-block;inline-size:44px;pointer-events:none}.inkra-radar__values{display:flex;flex-wrap:wrap;gap:var(--inkra-space-1) var(--inkra-space-3);padding-inline-start:52px}.inkra-radar__value{font-size:var(--inkra-text-sm);line-height:var(--inkra-line-ui)}.inkra-radar__value strong{color:var(--inkra-ink-muted);font-weight:400}.inkra-radar__value[data-missing=true]{color:var(--inkra-ink-subtle);font-style:italic}.inkra-radar__table{inline-size:100%;min-inline-size:34rem}.inkra-radar__table caption{text-align:start}.inkra-radar__table td[data-missing=true]{color:var(--inkra-ink-subtle);font-style:italic}@media(max-width:640px){.inkra-radar{gap:var(--inkra-space-3)}.inkra-radar__axis-label{font-size:var(--inkra-text-xs);max-inline-size:7rem;min-inline-size:3.5rem}.inkra-radar__values{padding-inline-start:0}.inkra-radar__table{min-inline-size:28rem}}@media(forced-colors:active){.inkra-radar__ink{display:none}.inkra-radar__ink[data-ready=true] + .inkra-radar__svg-fallback,.inkra-radar__svg-fallback{opacity:1}.inkra-radar__legend-mark canvas{display:none}.inkra-radar__legend-button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:2px}}@media print{.inkra-radar__ink{display:none}.inkra-radar__ink[data-ready=true] + .inkra-radar__svg-fallback{opacity:1}}

package/dist/styles/rating.css

@@ -0,0 +1,121 @@
+.inkra-rating {
+  align-items: center;
+  color: var(--inkra-ink-muted);
+  display: inline-flex;
+  max-inline-size: 100%;
+  outline: none;
+  position: relative;
+  touch-action: manipulation;
+}
+
+.inkra-rating__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+  inset: 1px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute !important;
+  z-index: 2;
+}
+
+.inkra-rating__symbols {
+  display: inline-flex;
+  flex: 0 0 auto;
+  max-inline-size: 100%;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+}
+
+.inkra-rating__symbols::-webkit-scrollbar { display: none; }
+
+.inkra-rating__symbol-target {
+  block-size: var(--inkra-touch-target);
+  cursor: pointer;
+  flex: 0 0 var(--inkra-touch-target);
+  inline-size: var(--inkra-touch-target);
+  position: relative;
+}
+
+.inkra-rating__symbol,
+.inkra-rating__fill {
+  inset-block: 0;
+  inset-inline-start: 0;
+  position: absolute;
+}
+
+.inkra-rating__symbol {
+  align-items: center;
+  block-size: var(--inkra-touch-target);
+  display: flex;
+  inline-size: var(--inkra-touch-target);
+  justify-content: center;
+}
+
+.inkra-rating__symbol--empty {
+  opacity: 0.38;
+}
+
+.inkra-rating__fill {
+  block-size: var(--inkra-touch-target);
+  color: var(--inkra-selection-foreground);
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.inkra-rating__symbol--filled {
+  color: var(--inkra-selection-foreground);
+}
+
+.inkra-rating:focus-visible {
+  outline: none;
+}
+
+.inkra-rating:focus-visible > .inkra-rating__focus-ring {
+  opacity: 1;
+}
+
+.inkra-rating[data-readonly] .inkra-rating__symbol-target,
+.inkra-rating[data-disabled] .inkra-rating__symbol-target {
+  cursor: default;
+}
+
+.inkra-rating[data-disabled] {
+  opacity: 0.5;
+}
+
+@media (forced-colors: active) {
+  .inkra-rating {
+    color: GrayText;
+  }
+
+  .inkra-rating__fill,
+  .inkra-rating__symbol--filled {
+    color: Highlight;
+  }
+
+  .inkra-rating:focus-visible {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-offset: calc(-1 * var(--inkra-focus-width));
+  }
+
+  .inkra-rating__focus-ring {
+    display: none !important;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .inkra-rating__focus-ring {
+    transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+  }
+}
+
+@media print {
+  .inkra-rating {
+    color: CanvasText;
+    overflow: visible;
+  }
+
+  .inkra-rating__focus-ring {
+    display: none !important;
+  }
+}

package/dist/styles/resizable.css

@@ -0,0 +1,108 @@
+.inkra-resizable {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+}
+
+.inkra-resizable__panel {
+  box-sizing: border-box;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.inkra-resizable__handle {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-basis: 12px;
+  justify-content: center;
+  outline: none;
+  position: relative;
+  touch-action: none;
+  z-index: 1;
+}
+
+.inkra-resizable[data-orientation="horizontal"] > .inkra-resizable__handle {
+  block-size: 100%;
+  cursor: col-resize;
+  inline-size: 12px;
+}
+
+.inkra-resizable[data-orientation="vertical"] > .inkra-resizable__handle {
+  block-size: 12px;
+  cursor: row-resize;
+  inline-size: 100%;
+}
+
+.inkra-resizable__handle-mark {
+  align-items: center;
+  color: var(--inkra-ink-muted);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+}
+
+.inkra-resizable__handle-line {
+  color: currentColor;
+  display: none;
+}
+
+.inkra-resizable[data-orientation="horizontal"] > .inkra-resizable__handle .inkra-resizable__handle-line--vertical {
+  block-size: 100%;
+  display: block;
+  inline-size: 8px;
+}
+
+.inkra-resizable[data-orientation="vertical"] > .inkra-resizable__handle .inkra-resizable__handle-line--horizontal {
+  block-size: 8px;
+  display: block;
+  inline-size: 100%;
+}
+
+.inkra-resizable__handle-focus {
+  inset: 2px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+}
+
+.inkra-resizable__handle:is(:hover, [data-separator="active"]) .inkra-resizable__handle-mark {
+  color: var(--inkra-accent-strong);
+}
+
+.inkra-resizable__handle:focus-visible .inkra-resizable__handle-focus {
+  opacity: 1;
+}
+
+.inkra-resizable__handle[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.48;
+  touch-action: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-resizable__handle-focus { transition: none; }
+}
+
+@media print, (forced-colors: active) {
+  .inkra-resizable__handle-line {
+    display: none !important;
+  }
+
+  .inkra-resizable__handle-focus { display: none; }
+
+  .inkra-resizable[data-orientation="horizontal"] > .inkra-resizable__handle {
+    border-inline-start: 1px solid CanvasText;
+  }
+
+  .inkra-resizable[data-orientation="vertical"] > .inkra-resizable__handle {
+    border-block-start: 1px solid CanvasText;
+  }
+
+  .inkra-resizable__handle:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
+}

package/dist/styles/scroll-area.css

@@ -0,0 +1,122 @@
+.inkra-scroll-area {
+  --inkra-scroll-area-size: 14px;
+  --inkra-scroll-area-gap: 2px;
+  color: var(--inkra-ink);
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.inkra-scroll-area__viewport {
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.inkra-scroll-area__viewport::-webkit-scrollbar { display: none; }
+.inkra-scroll-area__content { min-block-size: 100%; min-inline-size: 100%; }
+
+.inkra-scroll-area__scrollbar {
+  align-items: stretch;
+  box-sizing: border-box;
+  display: flex;
+  opacity: 0;
+  padding: var(--inkra-scroll-area-gap);
+  pointer-events: none;
+  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+  z-index: 2;
+}
+
+.inkra-scroll-area[data-type="always"] .inkra-scroll-area__scrollbar { opacity: .76; pointer-events: auto; }
+.inkra-scroll-area:hover .inkra-scroll-area__scrollbar,
+.inkra-scroll-area:focus-within .inkra-scroll-area__scrollbar,
+.inkra-scroll-area__scrollbar[data-hovering],
+.inkra-scroll-area__scrollbar[data-scrolling] { opacity: 1; pointer-events: auto; }
+.inkra-scroll-area__scrollbar[data-scrolling] { transition-duration: 0ms; }
+
+.inkra-scroll-area__scrollbar[data-orientation="vertical"] {
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: var(--inkra-scroll-area-size);
+}
+
+.inkra-scroll-area__scrollbar[data-orientation="horizontal"] {
+  block-size: var(--inkra-scroll-area-size);
+  inset-block-end: 0;
+  inset-inline: 0;
+}
+
+.inkra-scroll-area__track,
+.inkra-scroll-area__thumb,
+.inkra-scroll-area__thumb-surface {
+  display: block !important;
+  position: absolute !important;
+}
+
+.inkra-scroll-area__track,
+.inkra-scroll-area__thumb-surface {
+  pointer-events: none;
+  transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
+}
+.inkra-scroll-area__track { opacity: .34; }
+.inkra-scroll-area__thumb { cursor: grab; pointer-events: auto; }
+.inkra-scroll-area__thumb:active { cursor: grabbing; }
+.inkra-scroll-area__thumb-surface { opacity: .82; }
+
+.inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__track {
+  inset-block: var(--inkra-scroll-area-gap);
+  inset-inline: 4px;
+}
+.inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__thumb {
+  inset-inline: var(--inkra-scroll-area-gap);
+  min-block-size: 28px;
+}
+.inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__thumb-surface {
+  inset-block: 2px;
+  inset-inline: 1px;
+}
+.inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__track {
+  inset-block: 4px;
+  inset-inline: var(--inkra-scroll-area-gap);
+}
+.inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__thumb {
+  inset-block: var(--inkra-scroll-area-gap);
+  min-inline-size: 32px;
+}
+.inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__thumb-surface {
+  inset-block: 1px;
+  inset-inline: 2px;
+}
+
+.inkra-scroll-area:hover .inkra-scroll-area__track,
+.inkra-scroll-area:focus-within .inkra-scroll-area__track,
+.inkra-scroll-area__scrollbar[data-hovering] .inkra-scroll-area__track,
+.inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__track { opacity: .5; }
+.inkra-scroll-area:hover .inkra-scroll-area__thumb-surface,
+.inkra-scroll-area:focus-within .inkra-scroll-area__thumb-surface,
+.inkra-scroll-area__scrollbar[data-hovering] .inkra-scroll-area__thumb-surface,
+.inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__thumb-surface { opacity: 1; }
+.inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__track { opacity: .62; }
+.inkra-scroll-area__corner { background: transparent; }
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-scroll-area__scrollbar,
+  .inkra-scroll-area__track,
+  .inkra-scroll-area__thumb-surface { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .inkra-scroll-area__scrollbar { opacity: 1; }
+  .inkra-scroll-area__track { background: Canvas; border: 1px solid CanvasText; opacity: 1; }
+  .inkra-scroll-area__thumb-surface { background: ButtonText; border: 1px solid ButtonText; opacity: 1; }
+  .inkra-scroll-area__viewport:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
+}
+
+@media print {
+  .inkra-scroll-area__scrollbar { display: none; }
+  .inkra-scroll-area__viewport { overflow: visible !important; }
+}