@tappify/extension-sdk 2.0.0 → 2.1.0-beta.2

package/dist/ui/styles.css

@@ -0,0 +1,740 @@
+.tap-root {
+  --tappify-bg-paper: var(--bg-paper, #fdfdfd);
+  --tappify-bg-canvas: var(--bg-canvas, #f2f3ee);
+  --tappify-bg-light-gray: var(--bg-light-gray, #edf1f5);
+  --tappify-fg-primary: var(--fg-primary, #121212);
+  --tappify-fg-sub: var(--fg-sub, rgb(18 18 18 / 70%));
+  --tappify-divider: var(--divider, #d5d7da);
+  --tappify-lime: var(--lime, #b4d773);
+  --tappify-deep-green: var(--deep-green, #234e20);
+  --tappify-inverse: var(--inverse, #181920);
+  --tappify-fg-disabled: var(--fg-disabled, #6f757d);
+  --tappify-danger: var(--danger, #b42318);
+  --tappify-on-accent: var(--on-accent, #ffffff);
+  --tappify-space-4: 4px;
+  --tappify-space-8: 8px;
+  --tappify-space-12: 12px;
+  --tappify-space-16: 16px;
+  --tappify-space-24: 24px;
+  --tappify-space-32: 32px;
+  --tappify-space-40: 40px;
+  --tappify-radius-control: 8px;
+  --tappify-radius-card: 14px;
+  --tappify-radius-panel: 18px;
+  --tappify-control-height: 36px;
+
+  color: var(--tappify-fg-primary);
+  font-family: var(
+    --font-one-ui,
+    'Inter Variable',
+    'Inter',
+    system-ui,
+    sans-serif
+  );
+  font-size: 14px;
+  line-height: 1.45;
+  container-name: tap-mount;
+  container-type: inline-size;
+}
+
+.tap-root *,
+.tap-root *::before,
+.tap-root *::after {
+  box-sizing: border-box;
+}
+
+.tap-stack,
+.tap-inline {
+  display: flex;
+  min-width: 0;
+}
+
+.tap-stack {
+  flex-direction: column;
+}
+
+.tap-inline {
+  flex-direction: row;
+}
+
+[data-gap='4'] {
+  gap: var(--tappify-space-4);
+}
+
+[data-gap='8'] {
+  gap: var(--tappify-space-8);
+}
+
+[data-gap='12'] {
+  gap: var(--tappify-space-12);
+}
+
+[data-gap='16'] {
+  gap: var(--tappify-space-16);
+}
+
+[data-gap='24'] {
+  gap: var(--tappify-space-24);
+}
+
+[data-gap='32'] {
+  gap: var(--tappify-space-32);
+}
+
+[data-gap='40'] {
+  gap: var(--tappify-space-40);
+}
+
+[data-align='start'] {
+  align-items: flex-start;
+}
+
+[data-align='center'] {
+  align-items: center;
+}
+
+[data-align='end'] {
+  align-items: flex-end;
+}
+
+[data-align='stretch'] {
+  align-items: stretch;
+}
+
+[data-justify='start'] {
+  justify-content: flex-start;
+}
+
+[data-justify='center'] {
+  justify-content: center;
+}
+
+[data-justify='end'] {
+  justify-content: flex-end;
+}
+
+[data-justify='between'] {
+  justify-content: space-between;
+}
+
+.tap-button {
+  min-height: var(--tappify-control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: var(--tappify-radius-control);
+  padding: 0 var(--tappify-space-12);
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    opacity 120ms ease;
+}
+
+.tap-button:focus-visible {
+  outline: 2px solid var(--tappify-deep-green);
+  outline-offset: 2px;
+}
+
+.tap-button:hover:not(:disabled) {
+  opacity: 0.88;
+}
+
+.tap-button:active:not(:disabled) {
+  opacity: 0.74;
+}
+
+.tap-button[data-variant='primary'] {
+  color: var(--tappify-deep-green);
+  background: var(--tappify-lime);
+}
+
+.tap-button[data-variant='secondary'] {
+  color: var(--tappify-fg-primary);
+  background: var(--tappify-bg-paper);
+  border-color: var(--tappify-divider);
+}
+
+.tap-button[data-variant='tertiary'] {
+  color: var(--tappify-deep-green);
+  background: transparent;
+}
+
+.tap-button[data-variant='inverse'] {
+  color: var(--tappify-bg-paper);
+  background: var(--tappify-inverse);
+}
+
+.tap-button[data-variant='destructive'] {
+  color: var(--tappify-on-accent);
+  background: var(--tappify-danger);
+}
+
+.tap-button:disabled {
+  color: var(--tappify-fg-disabled);
+  cursor: not-allowed;
+  opacity: 0.8;
+}
+
+.tap-button[data-variant='primary']:disabled,
+.tap-button[data-variant='secondary']:disabled,
+.tap-button[data-variant='inverse']:disabled,
+.tap-button[data-variant='destructive']:disabled {
+  background: var(--tappify-bg-light-gray);
+}
+
+.tap-button[data-variant='tertiary']:disabled {
+  background: transparent;
+}
+
+.tap-button[data-size='compact'],
+.tap-button[data-size='sm'] {
+  min-height: 32px;
+  padding-inline: var(--tappify-space-12);
+  font-size: 13px;
+}
+
+.tap-button[data-size='xs'] {
+  min-height: 28px;
+  padding-inline: var(--tappify-space-8);
+  font-size: 12px;
+}
+
+.tap-button[data-size='lg'] {
+  min-height: 44px;
+  padding-inline: var(--tappify-space-24);
+}
+
+.tap-button[data-size^='icon'] {
+  width: var(--tappify-control-height);
+  padding: 0;
+}
+
+.tap-button[data-size='icon-xs'] {
+  width: 28px;
+  min-height: 28px;
+}
+
+.tap-button[data-size='icon-sm'] {
+  width: 32px;
+  min-height: 32px;
+}
+
+.tap-button[data-size='icon-lg'] {
+  width: 44px;
+  min-height: 44px;
+}
+
+.tap-button__spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentcolor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: tappify-spin 700ms linear infinite;
+}
+
+@keyframes tappify-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.tap-ui-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tappify-space-16);
+  min-width: 0;
+  padding: var(--tappify-space-24);
+  background: var(--tappify-bg-paper);
+  border-radius: var(--tappify-radius-card);
+}
+
+.tap-ui-card[data-size='sm'] {
+  gap: var(--tappify-space-12);
+  padding: var(--tappify-space-16);
+}
+
+.tap-card__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--tappify-space-4) var(--tappify-space-16);
+  align-items: start;
+}
+
+.tap-card__title {
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 1.3;
+}
+
+.tap-card__description {
+  color: var(--tappify-fg-sub);
+  grid-column: 1;
+}
+
+.tap-card__action {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+}
+
+.tap-card__content,
+.tap-card__footer {
+  min-width: 0;
+}
+
+.tap-card__footer {
+  color: var(--tappify-fg-sub);
+}
+
+.tap-ui-page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--tappify-space-24);
+}
+
+.tap-page-header__copy {
+  min-width: 0;
+}
+
+.tap-page-header__title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.tap-page-header__description {
+  margin-top: var(--tappify-space-8);
+  color: var(--tappify-fg-sub);
+}
+
+.tap-page-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--tappify-space-8);
+  flex: 0 0 auto;
+}
+
+@container tap-mount (max-width: 520px) {
+  .tap-ui-page-header {
+    flex-direction: column;
+  }
+
+  .tap-page-header__actions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tap-button,
+  .tap-button__spinner {
+    transition: none;
+    animation: none;
+  }
+}
+
+.tap-ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tappify-space-8);
+  min-width: 0;
+}
+
+.tap-field__label {
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.tap-field__description,
+.tap-field__error {
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.tap-field__description {
+  color: var(--tappify-fg-sub);
+}
+
+.tap-field__error {
+  color: var(--tappify-danger);
+}
+
+.tap-ui-control {
+  width: 100%;
+  min-width: 0;
+  min-height: 49px;
+  padding: 0 var(--tappify-space-12);
+  color: var(--tappify-fg-primary);
+  background: var(--tappify-bg-paper);
+  border: 1px solid var(--tappify-divider);
+  border-radius: var(--tappify-radius-control);
+  font: inherit;
+  outline: none;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.tap-textarea {
+  min-height: 112px;
+  padding-block: var(--tappify-space-12);
+  resize: vertical;
+}
+
+.tap-ui-control:focus-visible,
+.tap-checkbox:focus-visible {
+  border-color: var(--tappify-deep-green);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tappify-lime) 55%, transparent);
+}
+
+.tap-ui-control:disabled,
+.tap-checkbox:disabled {
+  color: var(--tappify-fg-sub);
+  background: var(--tappify-bg-light-gray);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.tap-ui-control[aria-invalid='true'],
+.tap-checkbox[aria-invalid='true'] {
+  border-color: var(--tappify-danger);
+}
+
+.tap-checkbox {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  display: inline-grid;
+  place-content: center;
+  flex: 0 0 auto;
+  background: var(--tappify-bg-paper);
+  border: 1px solid var(--tappify-divider);
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.tap-checkbox::before {
+  width: 9px;
+  height: 5px;
+  content: '';
+  border: solid var(--tappify-on-accent);
+  border-width: 0 0 2px 2px;
+  transform: rotate(-45deg) scale(0);
+}
+
+.tap-checkbox[data-state='checked'],
+.tap-checkbox[data-state='indeterminate'] {
+  background: var(--tappify-deep-green);
+  border-color: var(--tappify-deep-green);
+}
+
+.tap-checkbox[data-state='checked']::before {
+  transform: rotate(-45deg) scale(1);
+}
+
+.tap-checkbox[data-state='indeterminate']::before {
+  height: 0;
+  border-width: 0 0 2px;
+  transform: rotate(0) scale(1);
+}
+
+.tap-schema-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tappify-space-24);
+}
+
+.tap-checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: var(--tappify-space-8);
+  cursor: pointer;
+}
+
+.tap-ui-field--checkbox > .tap-field__description,
+.tap-ui-field--checkbox > .tap-field__error {
+  margin-inline-start: 26px;
+}
+
+.tap-schema-form__actions {
+  flex-wrap: wrap;
+}
+
+@container tap-mount (max-width: 420px) {
+  .tap-schema-form__actions {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+}
+
+.tap-ui-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: var(--tappify-space-24);
+  background: rgb(18 18 18 / 58%);
+  backdrop-filter: blur(2px);
+  animation: tappify-fade-in 140ms ease-out;
+}
+
+.tap-ui-dialog {
+  width: min(100%, 520px);
+  max-height: min(88vh, 860px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--tappify-fg-primary);
+  background: var(--tappify-bg-paper);
+  border: 1px solid var(--tappify-divider);
+  border-radius: var(--tappify-radius-panel);
+  box-shadow: 0 24px 80px rgb(18 18 18 / 24%);
+  animation: tappify-dialog-in 160ms ease-out;
+}
+
+.tap-ui-dialog[data-surface='canvas'] {
+  background: var(--tappify-bg-canvas);
+}
+
+.tap-ui-dialog[data-size='compact'] {
+  width: min(100%, 360px);
+}
+
+.tap-ui-dialog[data-size='medium'],
+.tap-ui-dialog[data-size='confirmation'] {
+  width: min(100%, 440px);
+}
+
+.tap-ui-dialog[data-size='large'] {
+  width: min(100%, 680px);
+}
+
+.tap-ui-dialog[data-size='wide'] {
+  width: min(100%, 880px);
+}
+
+.tap-dialog__header,
+.tap-dialog__body,
+.tap-dialog__footer {
+  padding-inline: var(--tappify-space-24);
+}
+
+.tap-dialog__header {
+  position: relative;
+  padding-block: var(--tappify-space-24) var(--tappify-space-16);
+}
+
+.tap-dialog__title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.tap-dialog__description {
+  margin-top: var(--tappify-space-8);
+  color: var(--tappify-fg-sub);
+}
+
+.tap-dialog__body {
+  min-height: 0;
+  padding-block: var(--tappify-space-16) var(--tappify-space-24);
+  overflow: auto;
+}
+
+.tap-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--tappify-space-8);
+  padding-block: var(--tappify-space-16) var(--tappify-space-24);
+  border-top: 1px solid var(--tappify-divider);
+}
+
+@keyframes tappify-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes tappify-dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tap-ui-dialog-overlay,
+  .tap-ui-dialog {
+    animation: none;
+  }
+}
+
+@media (max-width: 560px) {
+  .tap-ui-dialog-overlay {
+    padding: var(--tappify-space-12);
+  }
+
+  .tap-ui-dialog {
+    max-height: calc(100vh - 24px);
+  }
+
+  .tap-dialog__footer {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+}
+
+.tap-ui-table-container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.tap-ui-table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.tap-table__row {
+  border-bottom: 1px solid var(--tappify-divider);
+}
+
+.tap-table__row[data-variant='header'] {
+  height: 44px;
+}
+
+.tap-table__row[data-variant='body'] {
+  height: 48px;
+}
+
+.tap-table__head,
+.tap-table__cell {
+  padding: var(--tappify-space-8) var(--tappify-space-12);
+  text-align: start;
+  white-space: nowrap;
+}
+
+.tap-table__head {
+  color: var(--tappify-fg-sub);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.tap-table__cell {
+  font-size: 14px;
+}
+
+.tap-metric {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--tappify-space-4) var(--tappify-space-12);
+}
+
+.tap-metric__label,
+.tap-metric__description {
+  color: var(--tappify-fg-sub);
+}
+
+.tap-metric__label {
+  grid-column: 1 / -1;
+  font-size: 14px;
+}
+
+.tap-metric__value {
+  font-size: 28px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+}
+
+.tap-metric__delta {
+  align-self: end;
+  padding-bottom: 2px;
+  color: var(--tappify-fg-sub);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.tap-metric__delta[data-direction='up'] {
+  color: var(--tappify-deep-green);
+}
+
+.tap-metric__delta[data-direction='down'] {
+  color: var(--tappify-danger);
+}
+
+.tap-metric__description {
+  grid-column: 1 / -1;
+  font-size: 13px;
+}
+
+.tap-ui-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tappify-space-8);
+}
+
+.tap-skeleton__line {
+  display: block;
+  width: 100%;
+  height: 12px;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    var(--tappify-bg-light-gray) 25%,
+    var(--tappify-bg-paper) 50%,
+    var(--tappify-bg-light-gray) 75%
+  );
+  background-size: 200% 100%;
+  animation: tappify-skeleton 1.4s ease-in-out infinite;
+}
+
+@keyframes tappify-skeleton {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.tap-ui-state {
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  padding: var(--tappify-space-32) var(--tappify-space-24);
+  text-align: center;
+  color: var(--tappify-fg-sub);
+}
+
+.tap-state__title {
+  color: var(--tappify-fg-primary);
+  font-size: 18px;
+  font-weight: 650;
+}
+
+.tap-ui-state--error .tap-state__title,
+.tap-state__code {
+  color: var(--tappify-danger);
+}
+
+.tap-state__code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tap-skeleton__line {
+    animation: none;
+  }
+}