@churnkey/react 0.1.0

package/dist/styles.css

@@ -0,0 +1,760 @@
+/* Churnkey Cancel Flow.
+   All rules are scoped under .ck-cancel-flow so consumer-app bare-element
+   styles (e.g. `h2 { ... }` in a Vite/CRA template's index.css) can't bleed
+   into the modal. We don't use @layer — layered rules lose to unlayered
+   ones regardless of specificity, which would let those same bare-element
+   rules win. */
+
+@keyframes ck-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* --- Design tokens (CSS custom properties) ---
+   Consumers override via the `appearance` prop or by setting these vars
+   on a wrapping element. The values below are the SDK's defaults — a
+   warm-neutral palette with a single indigo accent. */
+.ck-cancel-flow {
+  /* Surfaces */
+  --ck-color-bg: #fafaf9;
+  --ck-color-surface: #ffffff;
+  --ck-color-surface-muted: #f5f5f4;
+
+  /* Borders */
+  --ck-color-border: #e7e5e4;
+  --ck-color-border-strong: #d6d3d1;
+
+  /* Text */
+  --ck-color-text: #0c0a09;
+  --ck-color-text-secondary: #57534e;
+  --ck-color-text-muted: #a8a29e;
+
+  /* Accent — single restrained hue. */
+  --ck-color-primary: #4f46e5;
+  --ck-color-primary-hover: #4338ca;
+  --ck-color-primary-soft: #eef2ff;
+
+  /* Semantics — used sparingly. */
+  --ck-color-success: #059669;
+  --ck-color-success-soft: #ecfdf5;
+  --ck-color-danger: #dc2626;
+  --ck-color-danger-hover: #b91c1c;
+  --ck-color-danger-soft: #fef2f2;
+
+  /* Typography */
+  --ck-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+  --ck-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  --ck-font-size: 14px;
+
+  /* Geometry */
+  --ck-radius-sm: 6px;
+  --ck-radius-md: 8px;
+  --ck-radius-lg: 12px;
+  --ck-radius-xl: 16px;
+  --ck-border-radius: var(--ck-radius-lg);
+
+  /* Motion */
+  --ck-motion-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --ck-motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  font-family: var(--ck-font-family);
+  font-size: var(--ck-font-size);
+  color: var(--ck-color-text);
+  line-height: 1.5;
+}
+
+/* --- Dark scheme ---
+   Applied when CancelFlow resolves `colorScheme: 'dark' | 'auto'` to
+   dark. Inverts surfaces and lifts the accent so it reads against the
+   darker backgrounds. `appearance.variables` overrides apply on top of
+   these via inline style — same brand color in both schemes by default. */
+.ck-cancel-flow[data-color-scheme="dark"] {
+  --ck-color-bg: #0c0a09;
+  --ck-color-surface: #1c1917;
+  --ck-color-surface-muted: #292524;
+
+  --ck-color-border: #44403c;
+  --ck-color-border-strong: #57534e;
+
+  --ck-color-text: #fafaf9;
+  --ck-color-text-secondary: #a8a29e;
+  --ck-color-text-muted: #78716c;
+
+  --ck-color-primary: #818cf8;
+  --ck-color-primary-hover: #a5b4fc;
+  --ck-color-primary-soft: rgba(129, 140, 248, 0.18);
+
+  --ck-color-success: #34d399;
+  --ck-color-success-soft: rgba(52, 211, 153, 0.16);
+  --ck-color-danger: #f87171;
+  --ck-color-danger-hover: #fca5a5;
+  --ck-color-danger-soft: rgba(248, 113, 113, 0.16);
+}
+
+/* --- Scoped reset ---
+   Specificity (0,1,0). The class rules below all sit at (0,2,0) so they
+   override this for the properties they care about. The reset only kicks
+   in for properties a class rule doesn't set, which is where consumer
+   bare-element styles (e.g. `h2 { font-family: ... }`) would otherwise
+   leak through. `font: inherit` covers font-family / size / weight / line-
+   height in one go — they all inherit from `.ck-cancel-flow`'s defaults
+   and any explicit override on a class rule still wins. */
+.ck-cancel-flow *,
+.ck-cancel-flow *::before,
+.ck-cancel-flow *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  text-align: inherit;
+}
+
+/* --- Overlay --- */
+.ck-cancel-flow .ck-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(12, 10, 9, 0.5);
+  z-index: 9999;
+}
+
+/* --- Focus --- */
+.ck-cancel-flow .ck-overlay :focus-visible {
+  outline: 2px solid var(--ck-color-primary);
+  outline-offset: 2px;
+}
+
+.ck-cancel-flow .ck-modal:focus {
+  outline: none;
+}
+
+/* --- Modal --- */
+.ck-cancel-flow .ck-modal {
+  background: var(--ck-color-surface);
+  border-radius: var(--ck-radius-xl);
+  box-shadow:
+    0 20px 25px -5px rgba(12, 10, 9, 0.1),
+    0 8px 10px -6px rgba(12, 10, 9, 0.06);
+  width: 100%;
+  max-width: 440px;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+}
+
+/* The default modal shadow is built for white surfaces; deepen it on */
+/* dark so it reads as elevation rather than a black bar. */
+.ck-cancel-flow[data-color-scheme="dark"] .ck-modal {
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.5),
+    0 8px 10px -6px rgba(0, 0, 0, 0.4);
+}
+
+/* --- Close button (sole chrome element) --- */
+.ck-cancel-flow .ck-close-button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: none;
+  color: var(--ck-color-text-muted);
+  cursor: pointer;
+  border-radius: var(--ck-radius-sm);
+  transition:
+    background var(--ck-motion-fast),
+    color var(--ck-motion-fast);
+  z-index: 1;
+}
+
+.ck-cancel-flow .ck-close-button:hover {
+  background: var(--ck-color-surface-muted);
+  color: var(--ck-color-text);
+}
+
+/* --- Back link (inline above the step title) --- */
+.ck-cancel-flow .ck-back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px 4px 6px;
+  margin: 0 0 12px -6px;
+  border: none;
+  background: none;
+  color: var(--ck-color-text-muted);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: var(--ck-radius-sm);
+  transition: color var(--ck-motion-fast);
+}
+
+.ck-cancel-flow .ck-back-button:hover {
+  color: var(--ck-color-text);
+}
+
+/* --- Content --- */
+.ck-cancel-flow .ck-content {
+  /* Top padding leaves room for the absolute-positioned close button. */
+  padding: 32px 24px 24px;
+}
+
+/* --- Error banner --- */
+.ck-cancel-flow .ck-error {
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  background: var(--ck-color-danger-soft);
+  border-radius: var(--ck-radius-md);
+}
+
+.ck-cancel-flow .ck-error-message {
+  font-size: 13px;
+  color: var(--ck-color-danger);
+  font-weight: 500;
+}
+
+/* --- Steps (shared) --- */
+/* Plain block: an earlier flex-column rule broke text-align centering on */
+/* the success step (inline-flex children stuck to the cross-axis start). */
+.ck-cancel-flow .ck-step {
+  display: block;
+}
+
+.ck-cancel-flow .ck-step-title {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  color: var(--ck-color-text);
+  margin: 0 0 8px;
+}
+
+.ck-cancel-flow .ck-step-description {
+  font-size: 14px;
+  color: var(--ck-color-text-secondary);
+  line-height: 1.55;
+  margin: 0 0 20px;
+}
+
+/* --- Buttons --- */
+.ck-cancel-flow .ck-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  border: none;
+  border-radius: var(--ck-radius-md);
+  cursor: pointer;
+  transition: background var(--ck-motion-fast);
+}
+
+.ck-cancel-flow .ck-button:disabled {
+  cursor: not-allowed;
+}
+
+.ck-cancel-flow .ck-button-primary {
+  background: var(--ck-color-primary);
+  color: #ffffff;
+}
+
+.ck-cancel-flow .ck-button-primary:hover:not(:disabled) {
+  background: var(--ck-color-primary-hover);
+}
+
+.ck-cancel-flow .ck-button-primary:disabled {
+  background: var(--ck-color-surface-muted);
+  color: var(--ck-color-text-muted);
+}
+
+.ck-cancel-flow .ck-button-danger {
+  background: var(--ck-color-surface);
+  color: var(--ck-color-danger);
+  border: 1px solid var(--ck-color-danger);
+}
+
+.ck-cancel-flow .ck-button-danger:hover:not(:disabled) {
+  background: var(--ck-color-danger-soft);
+}
+
+.ck-cancel-flow .ck-button-link {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--ck-color-text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  margin-top: 4px;
+  transition: color var(--ck-motion-fast);
+}
+
+.ck-cancel-flow .ck-button-link:hover {
+  color: var(--ck-color-text);
+}
+
+/* --- Survey: numbered cards --- */
+.ck-cancel-flow .ck-reason-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.ck-cancel-flow .ck-reason-button {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  text-align: left;
+  padding: 12px 14px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  border: 1px solid var(--ck-color-border);
+  border-radius: var(--ck-radius-md);
+  background: var(--ck-color-surface);
+  color: var(--ck-color-text);
+  cursor: pointer;
+  transition:
+    border-color var(--ck-motion-fast),
+    box-shadow var(--ck-motion-fast);
+}
+
+.ck-cancel-flow .ck-reason-button:hover {
+  border-color: var(--ck-color-border-strong);
+}
+
+.ck-cancel-flow .ck-reason-button--selected {
+  border-color: var(--ck-color-primary);
+  box-shadow:
+    0 1px 2px rgba(12, 10, 9, 0.04),
+    0 1px 3px rgba(12, 10, 9, 0.06);
+}
+
+.ck-cancel-flow .ck-reason-badge {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ck-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ck-color-surface-muted);
+  color: var(--ck-color-text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--ck-font-mono);
+  transition: background var(--ck-motion-fast);
+}
+
+.ck-cancel-flow .ck-reason-button--selected .ck-reason-badge {
+  background: var(--ck-color-primary);
+  color: #ffffff;
+}
+
+.ck-cancel-flow .ck-reason-label {
+  font-weight: 500;
+  color: var(--ck-color-text);
+}
+
+/* --- Offer step --- */
+.ck-cancel-flow .ck-offer-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.ck-cancel-flow .ck-offer-details {
+  margin-bottom: 20px;
+}
+
+/* Discount: centered phrase in a soft tinted panel. */
+.ck-cancel-flow .ck-offer-discount {
+  background: var(--ck-color-primary-soft);
+  border-radius: var(--ck-radius-lg);
+  padding: 24px 20px;
+  text-align: center;
+}
+
+.ck-cancel-flow .ck-offer-discount-eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ck-color-primary);
+  margin-bottom: 12px;
+}
+
+.ck-cancel-flow .ck-offer-discount-phrase {
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+  color: var(--ck-color-text);
+}
+
+/* Pause: segmented duration + resume-date callout. */
+.ck-cancel-flow .ck-pause-segments {
+  display: grid;
+  gap: 6px;
+  background: var(--ck-color-surface-muted);
+  padding: 4px;
+  border-radius: var(--ck-radius-md);
+  margin-bottom: 12px;
+}
+
+.ck-cancel-flow .ck-pause-segment {
+  appearance: none;
+  padding: 10px 8px;
+  border: none;
+  border-radius: var(--ck-radius-sm);
+  background: transparent;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  color: var(--ck-color-text-secondary);
+  cursor: pointer;
+  transition: all var(--ck-motion-fast);
+}
+
+.ck-cancel-flow .ck-pause-segment--selected {
+  background: var(--ck-color-surface);
+  color: var(--ck-color-text);
+  box-shadow:
+    0 1px 2px rgba(12, 10, 9, 0.04),
+    0 1px 3px rgba(12, 10, 9, 0.06);
+}
+
+.ck-cancel-flow .ck-pause-resume {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--ck-color-primary-soft);
+  border-radius: var(--ck-radius-md);
+}
+
+.ck-cancel-flow .ck-pause-resume-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ck-color-primary);
+}
+
+.ck-cancel-flow .ck-pause-resume-date {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-color-text);
+  font-variant-numeric: tabular-nums;
+  margin-top: 2px;
+}
+
+.ck-cancel-flow .ck-pause-resume-icon {
+  color: var(--ck-color-primary);
+}
+
+/* Trial extension: day count badge + new end date in accent-soft container. */
+.ck-cancel-flow .ck-trial-block {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: var(--ck-color-primary-soft);
+  border-radius: var(--ck-radius-lg);
+}
+
+.ck-cancel-flow .ck-trial-badge {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  border-radius: var(--ck-radius-lg);
+  background: var(--ck-color-primary);
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.ck-cancel-flow .ck-trial-days {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.ck-cancel-flow .ck-trial-unit {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-top: 2px;
+}
+
+.ck-cancel-flow .ck-trial-end-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ck-color-text-muted);
+}
+
+.ck-cancel-flow .ck-trial-end-date {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ck-color-text);
+  margin-top: 2px;
+}
+
+/* Redirect: featured link. */
+.ck-cancel-flow .ck-redirect-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border: 1px solid var(--ck-color-border);
+  border-radius: var(--ck-radius-md);
+  background: var(--ck-color-surface);
+  color: var(--ck-color-text);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 600;
+  transition: border-color var(--ck-motion-fast);
+}
+
+.ck-cancel-flow .ck-redirect-link:hover {
+  border-color: var(--ck-color-border-strong);
+}
+
+.ck-cancel-flow .ck-redirect-icon {
+  color: var(--ck-color-text-muted);
+}
+
+/* --- Plan change: side-by-side cards --- */
+.ck-cancel-flow .ck-plan-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.ck-cancel-flow .ck-plan-card {
+  appearance: none;
+  width: 100%;
+  padding: 20px;
+  border: 1.5px solid var(--ck-color-border);
+  border-radius: var(--ck-radius-lg);
+  background: var(--ck-color-surface);
+  color: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    border-color var(--ck-motion-fast),
+    box-shadow var(--ck-motion-fast);
+  text-align: left;
+}
+
+.ck-cancel-flow .ck-plan-card:hover {
+  border-color: var(--ck-color-border-strong);
+}
+
+.ck-cancel-flow .ck-plan-card--selected {
+  border-color: var(--ck-color-primary);
+  box-shadow:
+    0 4px 6px -1px rgba(12, 10, 9, 0.06),
+    0 2px 4px -2px rgba(12, 10, 9, 0.06);
+}
+
+.ck-cancel-flow .ck-plan-name {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ck-color-text);
+  margin-bottom: 4px;
+}
+
+.ck-cancel-flow .ck-plan-tagline {
+  font-size: 12px;
+  color: var(--ck-color-text-secondary);
+  min-height: 16px;
+  margin-bottom: 16px;
+}
+
+.ck-cancel-flow .ck-plan-price-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 20px;
+}
+
+.ck-cancel-flow .ck-plan-amount {
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--ck-color-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.ck-cancel-flow .ck-plan-period {
+  font-size: 13px;
+  color: var(--ck-color-text-muted);
+}
+
+.ck-cancel-flow .ck-plan-msrp {
+  font-size: 13px;
+  color: var(--ck-color-text-muted);
+  text-decoration: line-through;
+  margin-left: 4px;
+}
+
+.ck-cancel-flow .ck-plan-features {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ck-cancel-flow .ck-plan-feature {
+  font-size: 13px;
+  color: var(--ck-color-text);
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  line-height: 1.4;
+}
+
+.ck-cancel-flow .ck-plan-feature-check {
+  color: var(--ck-color-text-muted);
+  margin-top: 3px;
+  flex-shrink: 0;
+}
+
+/* --- Feedback: bordered + counter --- */
+.ck-cancel-flow .ck-feedback-field {
+  border: 1.5px solid var(--ck-color-border);
+  border-radius: var(--ck-radius-md);
+  padding: 12px;
+  background: var(--ck-color-surface);
+  margin-bottom: 20px;
+  transition: border-color var(--ck-motion-fast);
+}
+
+.ck-cancel-flow .ck-feedback-field--focused {
+  border-color: var(--ck-color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-primary) 20%, transparent);
+}
+
+.ck-cancel-flow .ck-feedback-field--invalid {
+  border-color: var(--ck-color-danger);
+}
+
+.ck-cancel-flow .ck-textarea {
+  display: block;
+  width: 100%;
+  min-height: 64px;
+  padding: 0;
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.55;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ck-color-text);
+  resize: vertical;
+}
+
+/* The .ck-feedback-field wrapper handles the focus ring; suppress the */
+/* global :focus-visible outline on the textarea so they don't stack. */
+.ck-cancel-flow .ck-textarea:focus,
+.ck-cancel-flow .ck-textarea:focus-visible {
+  outline: none;
+}
+
+.ck-cancel-flow .ck-textarea::placeholder {
+  color: var(--ck-color-text-muted);
+}
+
+.ck-cancel-flow .ck-character-count {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 12px;
+  color: var(--ck-color-text-muted);
+  font-variant-numeric: tabular-nums;
+  margin-top: 6px;
+}
+
+.ck-cancel-flow .ck-character-count--invalid {
+  color: var(--ck-color-danger);
+  font-weight: 500;
+}
+
+/* --- Confirm step --- */
+.ck-cancel-flow .ck-period-end {
+  font-size: 13px;
+  color: var(--ck-color-text-secondary);
+  line-height: 1.55;
+  margin-bottom: 20px;
+}
+
+.ck-cancel-flow .ck-period-end strong {
+  color: var(--ck-color-text);
+  font-weight: 600;
+}
+
+/* --- Success step --- */
+/* No box-padding here — .ck-content already supplies the surrounding */
+/* inset. The 8px top compensates for the missing title row above the */
+/* icon so the icon sits at the same optical y-position as titles do */
+/* on other steps. */
+.ck-cancel-flow .ck-step-success {
+  text-align: center;
+  padding-top: 8px;
+}
+
+.ck-cancel-flow .ck-success-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 999px;
+  background: var(--ck-color-success-soft);
+  color: var(--ck-color-success);
+  margin-bottom: 20px;
+}
+
+.ck-cancel-flow .ck-step-success .ck-step-title {
+  font-size: 22px;
+}
+
+.ck-cancel-flow .ck-step-success .ck-step-description {
+  max-width: 320px;
+  /* Spacing below comes from .ck-success-actions margin-top — collapsing */
+  /* the shared 20px bottom margin avoids double-stacking. */
+  margin: 0 auto;
+}
+
+.ck-cancel-flow .ck-success-actions {
+  margin-top: 32px;
+  padding-inline: 16px;
+}