tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/dist/styles/payment.css

@@ -0,0 +1,179 @@
+/* ============================ Payment section ============================ */
+/* A light box for the bare card field (Stripe CardElement / Xendit inputs) — it
+   has no chrome of its own, so this gives it a form-input frame. */
+.tf-checkout-payment__cardbox {
+  margin-top: var(--tf-checkout-space-3);
+  padding: 13px;
+  border: 1px solid var(--tf-checkout-border);
+  border-radius: var(--tf-checkout-radius-control);
+  background: var(--tf-checkout-surface);
+}
+/* The card fields inside are borderless, so the BOX carries the invalid state —
+   same border-only treatment every other field in the kit uses. */
+.tf-checkout-payment__cardbox--invalid {
+  border-color: var(--tf-checkout-error);
+}
+/* The Stripe Payment Element renders its OWN framed widget — don't box it again
+   (that was the double border). Just space it. */
+.tf-checkout-payment__element {
+  margin-top: var(--tf-checkout-space-3);
+}
+.tf-checkout-payment__label {
+  margin: var(--tf-checkout-space-4) 0 var(--tf-checkout-space-2);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--tf-checkout-muted);
+}
+/* Payment-method selector */
+.tf-checkout-payment__methods {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tf-checkout-space-2);
+}
+.tf-checkout-payment__method {
+  display: block;
+  padding: 13px;
+  border: 1px solid var(--tf-checkout-border);
+  border-radius: var(--tf-checkout-radius-control);
+  cursor: pointer;
+  transition: border-color 0.12s;
+}
+.tf-checkout-payment__method--selected {
+  border-color: var(--tf-checkout-accent);
+  background: color-mix(in srgb, var(--tf-checkout-accent) 5%, transparent);
+}
+.tf-checkout-payment__method-head {
+  display: flex;
+  align-items: center;
+  gap: var(--tf-checkout-space-3);
+}
+.tf-checkout-payment__method-radio {
+  accent-color: var(--tf-checkout-accent);
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.tf-checkout-payment__method-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+  flex: none;
+}
+.tf-checkout-payment__method-label {
+  font-size: 15px;
+  font-weight: 600;
+}
+.tf-checkout-payment__method-body {
+  margin-top: var(--tf-checkout-space-3);
+}
+/* Payment-plan terms preview */
+.tf-checkout-payment__plan {
+  padding: var(--tf-checkout-space-3);
+  border-radius: var(--tf-checkout-radius-control);
+  background: var(--tf-checkout-surface-muted);
+}
+.tf-checkout-payment__plan strong {
+  font-size: 14px;
+}
+/* MSI installment picker overlay */
+.tf-checkout-installments {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: grid;
+  place-items: center;
+  padding: var(--tf-checkout-space-4);
+  background: rgba(0, 0, 0, 0.5);
+}
+.tf-checkout-installments__box {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--tf-checkout-space-3);
+  padding: var(--tf-checkout-space-5);
+  border-radius: var(--tf-checkout-radius-card);
+  background: var(--tf-checkout-surface);
+  color: var(--tf-checkout-text);
+  box-shadow: var(--tf-checkout-shadow);
+}
+.tf-checkout-installments__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tf-checkout-space-2);
+}
+.tf-checkout-installments__opt {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--tf-checkout-space-3);
+  padding: 12px 14px;
+  border: 1px solid var(--tf-checkout-border);
+  border-radius: var(--tf-checkout-radius-control);
+  background: var(--tf-checkout-surface);
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+.tf-checkout-installments__opt:hover {
+  border-color: var(--tf-checkout-accent);
+}
+.tf-checkout-installments__meta {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--tf-checkout-muted);
+}
+
+/* Centered primary CTA (old payment_button was centered, ~200px). */
+.tf-checkout-payment__cta {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+.tf-checkout-payment__cta > .tf-checkout-button {
+  min-width: 220px;
+  min-height: 48px;
+}
+/* Legacy storefront order details, deliberately kept as its own final card. */
+.tf-checkout-order-summary {
+  padding: 32px 20px;
+  border: 0;
+  border-radius: 40px;
+  background: var(--tf-checkout-surface);
+  color: var(--tf-checkout-text);
+  box-shadow: none;
+}
+.tf-checkout-order-summary__group {
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--tf-checkout-border);
+}
+.tf-checkout-order-summary__group + .tf-checkout-order-summary__group,
+.tf-checkout-order-summary__total {
+  padding-top: 20px;
+}
+.tf-checkout-order-summary__label {
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.25;
+}
+.tf-checkout-order-summary__event,
+.tf-checkout-order-summary__ticket,
+.tf-checkout-order-summary__amount {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+.tf-checkout-order-summary__item + .tf-checkout-order-summary__item {
+  margin-top: 14px;
+}
+.tf-checkout-order-summary__fees {
+  margin-top: 2px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.3;
+}

package/dist/styles/primitives.css

@@ -0,0 +1,356 @@
+/* ============================ Card ============================ */
+.tf-checkout-card {
+  background: var(--tf-checkout-surface);
+  border: 1px solid var(--tf-checkout-border);
+  border-radius: var(--tf-checkout-radius-card);
+  box-shadow: var(--tf-checkout-shadow);
+  padding: var(--tf-checkout-space-5);
+  margin-bottom: var(--tf-checkout-space-4);
+}
+.tf-checkout-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--tf-checkout-space-3);
+  margin: 0 0 var(--tf-checkout-space-4);
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.tf-checkout-card__step {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--tf-checkout-accent);
+  color: var(--tf-checkout-accent-contrast);
+  font-size: 13px;
+  font-weight: 700;
+}
+.tf-checkout-card__pill {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--tf-checkout-accent) 12%, transparent);
+  color: var(--tf-checkout-accent);
+}
+.tf-checkout-card__pill--muted {
+  background: var(--tf-checkout-surface-muted);
+  color: var(--tf-checkout-muted);
+}
+.tf-checkout-card__pills {
+  margin-left: auto;
+  display: flex;
+  gap: var(--tf-checkout-space-2);
+}
+
+/* ============================ Button ============================ */
+.tf-checkout-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tf-checkout-space-2);
+  padding: 13px 18px;
+  border: 1px solid transparent;
+  border-radius: var(--tf-checkout-radius-control);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition: filter 0.12s, background 0.12s, border-color 0.12s, opacity 0.12s;
+  user-select: none;
+}
+.tf-checkout-button--primary {
+  background: var(--tf-checkout-accent);
+  color: var(--tf-checkout-accent-contrast);
+}
+.tf-checkout-button--primary:hover:not(:disabled) {
+  background: var(--tf-checkout-accent-hover);
+}
+.tf-checkout-button--secondary {
+  background: var(--tf-checkout-surface);
+  border-color: var(--tf-checkout-border);
+  color: var(--tf-checkout-text);
+}
+.tf-checkout-button--secondary:hover:not(:disabled) {
+  border-color: var(--tf-checkout-accent);
+  color: var(--tf-checkout-accent);
+}
+.tf-checkout-button--ghost {
+  background: transparent;
+  color: var(--tf-checkout-accent);
+  padding: 6px 8px;
+}
+.tf-checkout-button--block {
+  width: 100%;
+}
+.tf-checkout-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.tf-checkout-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tf-checkout-focus-ring);
+}
+
+/* ============================ Field / Input / Select ============================ */
+.tf-checkout-field {
+  /* This wrapper is a <label>, which computes to display:inline — and vertical
+     margins are ignored on inline boxes, so a plain stacked field had NO gap
+     ("name and email connected"). Blockify it so margin-top actually renders.
+     FieldRow's `display:flex` is declared later at equal specificity, so the
+     row wrapper still wins. */
+  display: block;
+  margin-top: var(--tf-checkout-space-3);
+}
+.tf-checkout-field__label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--tf-checkout-muted);
+  margin-bottom: 6px;
+}
+.tf-checkout-field__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--tf-checkout-error);
+}
+.tf-checkout-field--row {
+  display: flex;
+  gap: var(--tf-checkout-space-3);
+}
+.tf-checkout-field--row > .tf-checkout-field {
+  flex: 1;
+  min-width: 0;
+  margin-top: 0;
+}
+
+.tf-checkout-input,
+.tf-checkout-select {
+  width: 100%;
+  padding: 12px 13px;
+  border: 1px solid var(--tf-checkout-border);
+  border-radius: var(--tf-checkout-radius-control);
+  background: var(--tf-checkout-surface);
+  color: var(--tf-checkout-text);
+  font: inherit;
+  font-size: 15px;
+  outline: none;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+.tf-checkout-select {
+  appearance: none;
+  padding-right: 40px;
+  background-image: linear-gradient(45deg, transparent 50%, var(--tf-checkout-muted) 50%),
+    linear-gradient(135deg, var(--tf-checkout-muted) 50%, transparent 50%);
+  background-position: calc(100% - 18px) calc(50% - 2px),
+    calc(100% - 13px) calc(50% - 2px);
+  background-repeat: no-repeat;
+  background-size: 5px 5px;
+}
+.tf-checkout-input:focus,
+.tf-checkout-select:focus {
+  border-color: var(--tf-checkout-accent);
+  box-shadow: 0 0 0 3px var(--tf-checkout-focus-ring);
+}
+.tf-checkout-input::placeholder {
+  color: var(--tf-checkout-muted);
+}
+.tf-checkout-input--invalid,
+.tf-checkout-select--invalid,
+.tf-checkout-field--invalid .tf-checkout-input,
+.tf-checkout-field--invalid .tf-checkout-select,
+.tf-checkout-field--invalid .react-international-phone-country-selector-button {
+  border-color: var(--tf-checkout-error);
+}
+.tf-checkout-phone {
+  display: flex;
+  width: 100%;
+  /* Drive react-international-phone from the checkout tokens so its input,
+     country selector, and dropdown follow light/dark like every other field
+     (the library's own defaults hardcode white/#222). */
+  --react-international-phone-background-color: var(--tf-checkout-surface);
+  --react-international-phone-text-color: var(--tf-checkout-text);
+  --react-international-phone-border-color: var(--tf-checkout-border);
+  --react-international-phone-border-radius: var(--tf-checkout-radius-control);
+  --react-international-phone-country-selector-background-color: var(--tf-checkout-surface);
+  --react-international-phone-country-selector-background-color-hover: var(
+    --tf-checkout-surface-muted
+  );
+  --react-international-phone-country-selector-arrow-color: var(--tf-checkout-muted);
+  --react-international-phone-dropdown-item-background-color: var(--tf-checkout-surface);
+  --react-international-phone-dropdown-item-text-color: var(--tf-checkout-text);
+  --react-international-phone-dropdown-item-dial-code-color: var(--tf-checkout-muted);
+  --react-international-phone-selected-dropdown-item-background-color: var(
+    --tf-checkout-surface-muted
+  );
+  --react-international-phone-selected-dropdown-item-text-color: var(--tf-checkout-text);
+}
+.tf-checkout-phone .react-international-phone-country-selector {
+  display: flex;
+  align-self: stretch;
+}
+.tf-checkout-phone .react-international-phone-country-selector-button {
+  height: 100%;
+  min-width: 52px;
+  border-color: var(--tf-checkout-border);
+  border-radius: var(--tf-checkout-radius-control) 0 0 var(--tf-checkout-radius-control);
+  background: var(--tf-checkout-surface);
+}
+.tf-checkout-phone .tf-checkout-phone__input {
+  flex: 1 1 auto;
+  width: 0;
+  min-width: 0;
+  height: auto;
+  padding: 12px 13px;
+  border-radius: 0 var(--tf-checkout-radius-control) var(--tf-checkout-radius-control) 0;
+  background: var(--tf-checkout-surface);
+  color: var(--tf-checkout-text);
+  font: inherit;
+  font-size: 15px;
+}
+.tf-checkout-phone .react-international-phone-country-selector-dropdown {
+  background: var(--tf-checkout-surface);
+  color: var(--tf-checkout-text);
+  border-color: var(--tf-checkout-border);
+}
+
+/* ============================ Checkbox ============================ */
+.tf-checkout-checkbox {
+  display: flex;
+  gap: var(--tf-checkout-space-3);
+  align-items: flex-start;
+  margin-top: var(--tf-checkout-space-3);
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+.tf-checkout-checkbox__box {
+  margin-top: 2px;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--tf-checkout-accent);
+  flex: none;
+}
+.tf-checkout-checkbox__label a {
+  color: var(--tf-checkout-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tf-checkout-checkbox--consent {
+  font-size: 13px;
+  line-height: 1.5;
+}
+.tf-checkout-consent--error {
+  color: var(--tf-checkout-error);
+}
+.tf-checkout-consent--error .tf-checkout-checkbox__label {
+  color: var(--tf-checkout-error);
+}
+.tf-checkout-consent--error .tf-checkout-checkbox__label a {
+  color: var(--tf-checkout-accent);
+}
+.tf-checkout-consent--error .tf-checkout-checkbox__box {
+  outline: 2px solid var(--tf-checkout-error);
+  outline-offset: 1px;
+}
+.tf-checkout-consent__error {
+  margin: 3px 0 0;
+  color: var(--tf-checkout-error);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+/* ============================ Stepper ============================ */
+.tf-checkout-stepper {
+  display: flex;
+  align-items: center;
+  gap: var(--tf-checkout-space-2);
+}
+.tf-checkout-stepper__btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  border: 1px solid var(--tf-checkout-border);
+  background: transparent;
+  color: var(--tf-checkout-text);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s;
+}
+.tf-checkout-stepper__btn:hover:not(:disabled) {
+  border-color: var(--tf-checkout-accent);
+  color: var(--tf-checkout-accent);
+}
+.tf-checkout-stepper__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.tf-checkout-stepper__value {
+  min-width: 22px;
+  text-align: center;
+  font-weight: 700;
+}
+
+/* ============================ PriceLine ============================ */
+.tf-checkout-price {
+  font-weight: 700;
+  font-size: 15px;
+}
+.tf-checkout-price__original {
+  color: var(--tf-checkout-muted);
+  font-weight: 500;
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.tf-checkout-price__fees {
+  color: var(--tf-checkout-muted);
+  font-weight: 500;
+  font-size: 12px;
+  margin-left: 6px;
+}
+
+/* ============================ Timer ============================ */
+.tf-checkout-timer {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--tf-checkout-muted);
+}
+.tf-checkout-timer--urgent {
+  color: var(--tf-checkout-error);
+}
+
+/* ============================ Loader ============================ */
+.tf-checkout-loader {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: tf-checkout-spin 0.7s linear infinite;
+}
+@keyframes tf-checkout-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================ Notes / errors ============================ */
+.tf-checkout-note {
+  margin: var(--tf-checkout-space-2) 0 0;
+  font-size: 13px;
+  color: var(--tf-checkout-muted);
+}
+.tf-checkout-error-text {
+  margin: var(--tf-checkout-space-3) 0 0;
+  font-size: 13px;
+  color: var(--tf-checkout-error);
+}

package/dist/styles/seat-map.css

@@ -0,0 +1,46 @@
+/* ============================ Seat map ============================ */
+.tf-checkout-seatmap__loading,
+.tf-checkout-seatmap__canvas {
+  display: grid;
+  place-items: center;
+  min-height: 220px;
+}
+.tf-checkout-seatmap__canvas {
+  overflow: auto;
+}
+.tf-checkout-seatmap__seats {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+}
+.tf-checkout-seatmap__seat {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--tf-checkout-border);
+  border-radius: var(--tf-checkout-radius-control);
+}
+.tf-checkout-seatmap__seat-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.tf-checkout-seatmap__seat-price {
+  font-weight: 600;
+}
+.tf-checkout-seatmap__seat-remove {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--tf-checkout-error);
+  cursor: pointer;
+  font: inherit;
+  text-decoration: underline;
+}
+.tf-checkout-seatmap__seat-remove:disabled {
+  opacity: 0.5;
+  cursor: default;
+}