@inkra/react 0.3.0 → 0.5.0

package/dist/styles/form.css

@@ -0,0 +1,634 @@
+.inkra-field {
+  display: grid;
+  gap: var(--inkra-space-2);
+  min-width: 0;
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-field__label {
+  display: inline-flex;
+  width: fit-content;
+  align-items: baseline;
+  gap: var(--inkra-space-1);
+  color: var(--inkra-ink);
+  cursor: pointer;
+}
+
+.inkra-field__required,
+.inkra-field__error {
+  color: var(--inkra-danger-foreground, var(--inkra-danger));
+}
+
+.inkra-field__control {
+  min-width: 0;
+}
+
+.inkra-field__description,
+.inkra-field__error {
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-field__description {
+  color: var(--inkra-ink-muted);
+}
+
+.inkra-field[data-disabled="true"] .inkra-field__label {
+  cursor: not-allowed;
+}
+
+.inkra-field-control-hit {
+  --inkra-field-control-height: var(--inkra-control-md);
+  --inkra-field-control-font-size: var(--inkra-text-md);
+  --inkra-field-control-icon-size: var(--inkra-icon-md);
+  --inkra-field-control-padding: var(--inkra-space-3);
+
+  display: flex;
+  min-width: 0;
+  min-height: var(--inkra-touch-target);
+  align-items: center;
+}
+
+.inkra-field-control-hit[data-size="sm"] {
+  --inkra-field-control-height: var(--inkra-control-sm);
+  --inkra-field-control-font-size: var(--inkra-text-sm);
+  --inkra-field-control-icon-size: var(--inkra-icon-sm);
+  --inkra-field-control-padding: var(--inkra-space-2);
+}
+
+.inkra-field-control-hit[data-size="lg"] {
+  --inkra-field-control-height: var(--inkra-control-lg);
+  --inkra-field-control-font-size: var(--inkra-text-lg);
+  --inkra-field-control-icon-size: var(--inkra-icon-lg);
+  --inkra-field-control-padding: var(--inkra-space-4);
+}
+
+.inkra-field-control {
+  position: relative;
+  isolation: isolate;
+  display: flex !important;
+  width: 100%;
+  min-width: 0;
+  height: var(--inkra-field-control-height);
+  align-items: center;
+  color: var(--inkra-ink);
+}
+
+.inkra-field-control-hit:focus-within .inkra-field-control > .inkra-pencil-surface__ink,
+.inkra-field-control-hit:focus-within .inkra-field-control > .inkra-pencil-surface__border {
+  filter: contrast(1.28) saturate(1.08);
+}
+
+.inkra-field-control__icon {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  width: var(--inkra-field-control-icon-size);
+  height: var(--inkra-field-control-icon-size);
+  flex: 0 0 var(--inkra-field-control-icon-size);
+  align-items: center;
+  justify-content: center;
+  color: var(--inkra-ink-muted);
+  pointer-events: none;
+}
+
+.inkra-field-control__icon--start {
+  margin-inline-start: var(--inkra-field-control-padding);
+}
+
+.inkra-field-control__icon--end {
+  margin-inline-end: var(--inkra-field-control-padding);
+}
+
+.inkra-field-control__icon > :is(svg, canvas) {
+  width: 100%;
+  height: 100%;
+}
+
+.inkra-input,
+.inkra-textarea {
+  --inkra-editable-text-color: var(--inkra-ink);
+  --inkra-editable-placeholder-color: var(--inkra-ink-subtle);
+
+  position: relative;
+  z-index: 2;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-field-control-font-size);
+  font-weight: var(--inkra-weight-regular);
+  letter-spacing: var(--inkra-letter-spacing);
+  line-height: var(--inkra-line-ui);
+  caret-color: var(--inkra-ink);
+}
+
+.inkra-input:focus-visible,
+.inkra-textarea:focus-visible {
+  outline: 0;
+}
+
+.inkra-input {
+  height: 100%;
+  padding-block: 0;
+  padding-inline: var(--inkra-field-control-padding);
+}
+
+.inkra-field-control__icon--start + .inkra-input {
+  padding-inline-start: var(--inkra-space-2);
+}
+
+.inkra-input:has(+ .inkra-field-control__icon--end) {
+  padding-inline-end: var(--inkra-space-2);
+}
+
+.inkra-input::placeholder,
+.inkra-textarea::placeholder {
+  color: var(--inkra-ink-subtle);
+  opacity: 1;
+}
+
+.inkra-editable-text {
+  position: absolute;
+  /* Native selection stays below the ink; pointer events still reach the editor. */
+  z-index: 3;
+  left: 0;
+  top: 0;
+  /* Inactive canvases may retain geometry from a previous size or direction. */
+  display: none;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.inkra-field-control-hit[data-pencil-editable-ready="true"] .inkra-editable-text {
+  display: block;
+  opacity: 1;
+}
+
+.inkra-field-control-hit[data-pencil-editable-ready="true"] :is(.inkra-input, .inkra-textarea) {
+  color: transparent !important;
+}
+
+.inkra-field-control-hit[data-pencil-editable-ready="true"] :is(.inkra-input, .inkra-textarea)::placeholder {
+  color: transparent !important;
+}
+
+.inkra-field-control-hit[data-pencil-editable-ready="true"] :is(.inkra-input, .inkra-textarea)::selection {
+  background: var(--inkra-selection);
+  color: transparent;
+}
+
+.inkra-field-control-hit[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.inkra-field-control-hit[data-readonly="true"] .inkra-input,
+.inkra-field-control-hit[data-readonly="true"] .inkra-textarea {
+  --inkra-editable-text-color: var(--inkra-ink-muted);
+  color: var(--inkra-ink-muted);
+}
+
+.inkra-field-control-hit[data-readonly="true"][data-pencil-editable-ready="true"] :is(.inkra-input, .inkra-textarea) {
+  color: transparent !important;
+}
+
+.inkra-field-control-hit--textarea {
+  min-height: 0;
+  align-items: stretch;
+}
+
+.inkra-field-control--textarea {
+  min-height: 96px;
+  height: auto;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.inkra-field-control-hit--textarea[data-size="sm"] .inkra-field-control--textarea {
+  min-height: 80px;
+}
+
+.inkra-field-control-hit--textarea[data-size="lg"] .inkra-field-control--textarea {
+  min-height: 112px;
+}
+
+.inkra-textarea {
+  min-height: inherit;
+  padding: var(--inkra-field-control-padding);
+  resize: none;
+}
+
+.inkra-textarea__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--inkra-space-2);
+  min-height: 44px;
+  padding-inline: var(--inkra-field-control-padding);
+  position: relative;
+  z-index: 3;
+}
+
+.inkra-field-control-hit--textarea[data-end-action="true"] .inkra-field-control--textarea {
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.inkra-textarea__end-action {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  align-self: start;
+  align-items: center;
+  min-block-size: var(--inkra-touch-target);
+}
+
+.inkra-field-control-hit--textarea[data-end-action="true"] .inkra-textarea__footer {
+  grid-column: 1 / -1;
+}
+
+.inkra-textarea__underline {
+  position: absolute !important;
+  inset-inline: 0;
+  inset-block-end: -4px;
+  inline-size: 100%;
+  pointer-events: none;
+}
+
+.inkra-field-control-hit--textarea[data-invalid="true"] .inkra-textarea__underline {
+  color: var(--inkra-danger);
+}
+
+.inkra-field-control-hit--textarea[data-variant="underline"] .inkra-input__action-wash {
+  inset: 4px;
+  border-radius: 3px;
+}
+
+.inkra-field-control-hit--textarea[data-variant="underline"] .inkra-input__action-divider {
+  inset-block-start: 8px;
+  block-size: calc(100% - 16px);
+}
+
+.inkra-textarea__count {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-2);
+  min-width: 0;
+  font-size: var(--inkra-text-sm);
+  color: var(--inkra-ink-muted);
+}
+
+.inkra-textarea__count[data-visible="false"] { visibility: hidden; }
+.inkra-textarea__count[data-limit="reached"] { color: var(--inkra-danger); }
+.inkra-textarea__count .inkra-progress { width: 72px; max-width: 100%; }
+.inkra-textarea__resize { flex: none; touch-action: none; cursor: ns-resize; }
+
+.inkra-input-root {
+  --inkra-field-control-icon-size: calc(var(--inkra-icon-md) + 2px);
+
+  display: inline-flex;
+  inline-size: 20rem;
+  max-inline-size: 100%;
+  vertical-align: middle;
+}
+
+.inkra-input-root[data-size="sm"] {
+  --inkra-field-control-icon-size: calc(var(--inkra-icon-sm) + 2px);
+}
+
+.inkra-input-root[data-size="lg"] {
+  --inkra-field-control-icon-size: calc(var(--inkra-icon-lg) + 2px);
+}
+
+.inkra-input-root[data-full-width="true"] {
+  display: flex;
+  inline-size: 100%;
+}
+
+.inkra-input-root .inkra-field-control--input {
+  box-sizing: border-box;
+  min-block-size: var(--inkra-field-control-height);
+  block-size: auto;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-2);
+  padding-inline: var(--inkra-field-control-padding);
+}
+
+.inkra-input-root .inkra-field-control--input > .inkra-pencil-surface__content {
+  min-block-size: var(--inkra-field-control-height);
+  block-size: auto;
+  flex-wrap: inherit;
+  gap: inherit;
+  clip-path: none;
+}
+
+.inkra-input-root .inkra-field-control__icon {
+  margin-inline: 0;
+}
+
+.inkra-input-root .inkra-field-control__icon > :is(svg, canvas) {
+  inline-size: 100% !important;
+  block-size: 100% !important;
+}
+
+.inkra-input-root .inkra-input {
+  flex: 1 1 4rem;
+  inline-size: 0;
+  min-inline-size: min(4rem, 100%);
+  block-size: var(--inkra-field-control-height);
+  padding-inline: 0;
+}
+
+.inkra-input-root .inkra-input__underline {
+  position: absolute;
+  z-index: 4;
+  inset-inline-start: calc(-1 * var(--inkra-field-control-padding));
+  inset-block-end: -2px;
+  inline-size: calc(100% + 2 * var(--inkra-field-control-padding));
+  block-size: 8px;
+  color: var(--inkra-border-strong);
+  pointer-events: none;
+}
+
+.inkra-input-root[data-invalid="true"] .inkra-input__underline {
+  color: var(--inkra-danger-foreground, var(--inkra-danger));
+}
+
+.inkra-field-control--input[data-pencil-fallback="true"] .inkra-input__underline {
+  inset-block-end: 0;
+  block-size: 1px;
+  background: currentColor;
+}
+
+.inkra-input__affix {
+  position: relative;
+  z-index: 1;
+  min-inline-size: 0;
+  max-inline-size: 25%;
+  overflow: hidden;
+  flex: 0 1 auto;
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-field-control-font-size);
+  line-height: var(--inkra-line-ui);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.inkra-input__actions,
+.inkra-input__end-action {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0;
+}
+
+.inkra-input__actions {
+  block-size: var(--inkra-field-control-height);
+  align-self: center;
+  margin-inline-end: calc(-1 * var(--inkra-field-control-padding));
+}
+
+.inkra-input__end-action {
+  block-size: var(--inkra-field-control-height);
+  min-block-size: 0;
+  align-self: center;
+  padding: 0;
+  isolation: isolate;
+  color: var(--inkra-selection-foreground);
+}
+
+.inkra-input__action-wash {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  overflow: hidden;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--inkra-radius-lg);
+  border-end-end-radius: var(--inkra-radius-lg);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.inkra-input-root:is([data-variant="underline"], [data-variant="ghost"]) .inkra-input__action-wash {
+  inset: 4px;
+  border-radius: 3px;
+}
+
+.inkra-input__end-action[data-active="true"] > .inkra-input__action-wash {
+  opacity: 1;
+}
+
+.inkra-input__action-wash[data-pencil-fallback="true"] {
+  background: color-mix(in srgb, var(--inkra-selection-pigment) 15%, transparent);
+}
+
+.inkra-input__end-action .inkra-button {
+  z-index: 1;
+  color: inherit;
+}
+
+.inkra-input__action-divider {
+  position: absolute;
+  z-index: 3;
+  inset-inline-start: -4px;
+  inset-block-start: 0;
+  inline-size: 8px;
+  block-size: 100%;
+  color: var(--inkra-border-strong);
+  pointer-events: none;
+}
+
+.inkra-input-root[data-variant="underline"] .inkra-input__action-divider {
+  inset-block-start: 8px;
+  block-size: calc(100% - 16px);
+}
+
+.inkra-input__end-action > .inkra-button:focus-visible {
+  outline-offset: calc(-1 * var(--inkra-focus-width));
+}
+
+.inkra-input__end-action .inkra-button__surface {
+  overflow: hidden;
+  border: 0 !important;
+  background: transparent !important;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: 7px;
+  border-end-end-radius: 7px;
+  transform: none !important;
+}
+
+.inkra-input__end-action .inkra-button__surface > .inkra-pencil-surface__border {
+  display: none;
+}
+
+.inkra-input__start-action {
+  margin-inline-start: calc(-1 * var(--inkra-field-control-padding));
+}
+
+.inkra-input__start-action .inkra-input__action-divider {
+  inset-inline-start: auto;
+  inset-inline-end: -4px;
+}
+
+.inkra-input__start-action .inkra-input__action-wash,
+.inkra-input__start-action .inkra-button__surface {
+  border-start-start-radius: var(--inkra-radius-lg);
+  border-end-start-radius: var(--inkra-radius-lg);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.inkra-input__clear {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex: 0 0 var(--inkra-touch-target);
+  inline-size: var(--inkra-touch-target);
+  block-size: var(--inkra-touch-target);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--inkra-radius-md);
+  background: transparent;
+  color: var(--inkra-ink-muted);
+  cursor: pointer;
+}
+
+.inkra-input__clear:hover {
+  color: var(--inkra-ink);
+}
+
+.inkra-input__clear:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: calc(-1 * var(--inkra-focus-width));
+}
+
+.inkra-input__clear[data-visible="false"] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.inkra-input__loading {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  inline-size: 30px;
+  block-size: 30px;
+  flex: 0 0 30px;
+  align-items: center;
+  justify-content: center;
+  color: var(--inkra-ink-muted);
+  pointer-events: none;
+}
+
+.inkra-input__loading[data-active="false"] {
+  visibility: hidden;
+}
+
+.inkra-input__loading[data-active="true"] .inkra-input__spinner {
+  animation: inkra-input-loading 900ms linear infinite;
+}
+
+.inkra-input-root[data-clearable="true"] .inkra-input::-webkit-search-cancel-button {
+  display: none;
+  -webkit-appearance: none;
+}
+
+@keyframes inkra-input-loading {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-input__loading[data-active="true"] .inkra-input__spinner {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-field-control {
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-field-control-hit[data-invalid="true"] .inkra-field-control {
+    border-color: Mark;
+  }
+
+  .inkra-editable-text {
+    display: none !important;
+  }
+
+  :is(.inkra-field-control-hit, .inkra-field-control-hit[data-readonly="true"][data-pencil-editable-ready="true"]) :is(.inkra-input, .inkra-textarea) {
+    color: FieldText !important;
+    caret-color: FieldText;
+  }
+
+  :is(.inkra-field-control-hit, .inkra-field-control-hit[data-readonly="true"][data-pencil-editable-ready="true"]) :is(.inkra-input, .inkra-textarea)::placeholder {
+    color: GrayText !important;
+    opacity: 1;
+  }
+
+  .inkra-field-control-hit[data-pencil-editable-ready="true"] :is(.inkra-input, .inkra-textarea)::selection {
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  :is(.inkra-field-control-hit, .inkra-field-control-hit[data-readonly="true"][data-pencil-editable-ready="true"]) :is(.inkra-input, .inkra-textarea):focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+
+  .inkra-input__clear {
+    color: ButtonText;
+  }
+
+  .inkra-input-root[data-variant="underline"] .inkra-field-control,
+  .inkra-field-control-hit--textarea[data-variant="underline"] .inkra-field-control {
+    border: 0;
+  }
+
+  .inkra-input__action-wash {
+    display: none;
+  }
+
+  .inkra-input__clear canvas,
+  .inkra-input__spinner {
+    forced-color-adjust: none;
+  }
+}
+
+@media print {
+  .inkra-editable-text {
+    display: none !important;
+  }
+
+  :is(.inkra-field-control-hit, .inkra-field-control-hit[data-readonly="true"][data-pencil-editable-ready="true"]) :is(.inkra-input, .inkra-textarea) {
+    color: var(--inkra-ink) !important;
+  }
+
+  :is(.inkra-field-control-hit, .inkra-field-control-hit[data-readonly="true"][data-pencil-editable-ready="true"]) :is(.inkra-input, .inkra-textarea)::placeholder {
+    color: var(--inkra-ink-subtle) !important;
+    opacity: 1;
+  }
+
+  .inkra-field-control-hit[data-pencil-editable-ready="true"] :is(.inkra-input, .inkra-textarea)::selection {
+    background: var(--inkra-selection);
+    color: var(--inkra-ink);
+  }
+}