@churnkey/react 0.1.2 → 0.3.0

package/dist/{step-graph-ChdI-VXV.d.ts → step-graph-ChlSCUGk.d.cts}

@@ -129,12 +129,10 @@ interface PauseOffer {
     type: 'pause';
     months: number;
     interval?: 'month' | 'week';
-    datePicker?: boolean;
 }
 interface PlanChangeOffer {
     type: 'plan_change';
     plans: PlanOption[];
-    currentPlanId?: string;
 }
 /**
  * Plan option in a `plan_change` offer — `DirectPrice` plus optional
@@ -181,13 +179,22 @@ interface OfferCopy {
     declineCta: string;
 }
 type AcceptedOffer = OfferConfig & {
-    reasonId: string;
-    decisionId?: string;
+    /** Survey reason that routed to this offer. Absent when the offer was
+     *  declared as a standalone `OfferStep`. */
+    reasonId?: string;
+    /** Payload from custom offers — whatever your component passed to
+     *  `onAccept(result)`. Built-in offer types do not populate this. */
     result?: Record<string, unknown>;
 };
 interface ReasonConfig {
     id: string;
     label: string;
+    /**
+     * When true, picking this reason reveals a text input below the reason list.
+     * The typed text lands on the session as `followupResponse`. `surveyChoiceId`
+     * still carries the reason's `id` and `surveyChoiceValue` still carries the
+     * static `label`, so analytics groupings stay stable.
+     */
     freeform?: boolean;
     offer?: OfferConfig;
 }
@@ -205,11 +212,12 @@ interface OfferStep {
     title?: string;
     description?: string;
     /**
-     * Offer attached to this step. Set this for proactive save offers shown
-     * outside a survey; the SDK also populates it automatically on synthetic
-     * offer steps spawned from survey choices.
+     * Offer attached to this step. Set this to declare a standalone offer
+     * step (one that isn't routed from a survey reason). `copy` is optional —
+     * the SDK synthesizes default copy from the offer config when none is
+     * provided, the same way it does for survey-attached offers.
      */
-    offer?: OfferDecision;
+    offer?: OfferConfig | OfferDecision;
     classNames?: OfferClassNames;
 }
 interface FeedbackStep {
@@ -227,6 +235,10 @@ interface ConfirmStep {
     guid?: string;
     title?: string;
     description?: string;
+    /** Optional bullet list of what the customer is giving up. Rendered between the description and the period-end notice. */
+    losses?: string[];
+    /** Heading above the loss list. Defaults to "You'll lose access to:". */
+    lossesLabel?: string;
     confirmLabel?: string;
     goBackLabel?: string;
     classNames?: ConfirmClassNames;
@@ -258,7 +270,7 @@ interface SurveyClassNames {
     reasonButton?: string;
     reasonButtonSelected?: string;
     reasonLabel?: string;
-    freeformInput?: string;
+    followupInput?: string;
     continueButton?: string;
 }
 interface OfferClassNames {
@@ -289,6 +301,10 @@ interface ConfirmClassNames {
     root?: string;
     title?: string;
     description?: string;
+    lossList?: string;
+    lossLabel?: string;
+    lossItem?: string;
+    lossBullet?: string;
     confirmButton?: string;
     goBackButton?: string;
     periodEndNotice?: string;
@@ -306,18 +322,55 @@ interface StructuralClassNames {
     closeButton?: string;
     backButton?: string;
 }
+/**
+ * Typed surface for `appearance.variables`. Every key maps to a `--ck-*`
+ * CSS custom property. Consumers who need a token not in this list can
+ * still set the underlying CSS variable directly — these are the ones
+ * exposed through the typed JS API.
+ */
 interface AppearanceVariables {
-    colorPrimary: string;
-    colorPrimaryHover: string;
     colorBackground: string;
+    colorSurface: string;
+    colorSurfaceMuted: string;
+    colorBorder: string;
+    colorBorderStrong: string;
     colorText: string;
     colorTextSecondary: string;
-    colorBorder: string;
-    colorDanger: string;
+    colorTextMuted: string;
+    colorPrimary: string;
+    colorPrimaryHover: string;
+    colorPrimarySoft: string;
     colorSuccess: string;
+    colorSuccessSoft: string;
+    colorDanger: string;
+    colorDangerHover: string;
+    colorDangerSoft: string;
     fontFamily: string;
+    fontFamilyMono: string;
+    /**
+     * Display face used by step titles and other visual headlines. Defaults
+     * to `fontFamily`. Set this when your brand uses a separate display face
+     * (Tiempos, Canela, etc.) for headings.
+     */
+    fontFamilyDisplay: string;
     fontSize: string;
+    /** Weight applied to the step title. Default `'600'`. */
+    fontWeightDisplay: string;
+    /** Letter spacing applied to the step title. Default `'-0.015em'`. */
+    letterSpacingDisplay: string;
     borderRadius: string;
+    radiusSm: string;
+    radiusMd: string;
+    radiusLg: string;
+    radiusXl: string;
+    shadowModal: string;
+    shadowCard: string;
+    /**
+     * Color of the dim behind the modal. Defaults to a neutral translucent
+     * ink. Set to `color-mix(in srgb, var(--ck-color-primary) 40%, transparent)`
+     * to derive the overlay from your primary color, or any CSS color value.
+     */
+    overlayColor: string;
 }
 interface Appearance {
     /**
@@ -330,12 +383,14 @@ interface Appearance {
 interface CustomStepProps {
     step: CustomStepConfig;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onNext: (result?: Record<string, unknown>) => void;
     onBack: () => void;
 }
 interface CustomOfferProps {
     offer: OfferDecision;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onAccept: (result?: Record<string, unknown>) => Promise<void>;
     onDecline: () => void;
     isProcessing: boolean;
@@ -363,6 +418,7 @@ interface ModalProps {
     onClose: () => void;
     children: ReactNode;
     className?: string;
+    overlayClassName?: string;
 }
 interface CloseButtonProps {
     onClose: () => void;
@@ -375,9 +431,15 @@ interface BackButtonProps {
 interface SurveyStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     reasons: ReasonConfig[];
     selectedReason: string | null;
     onSelectReason: (id: string) => void;
+    /** Free-text value when the selected reason has `freeform: true`. Lands on the session as `followupResponse`. */
+    followupResponse: string;
+    /** Set the follow-up response. The SDK forwards the value to the session. */
+    onFollowupResponseChange: (text: string) => void;
     onNext: () => void;
     classNames?: SurveyClassNames;
     components?: Partial<ComponentOverrides>;
@@ -385,6 +447,8 @@ interface SurveyStepProps {
 interface OfferStepProps {
     title?: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     offer: OfferDecision;
     /**
      * Accept the offer. The optional `result` is included on the resulting
@@ -405,6 +469,8 @@ interface OfferStepProps {
 interface FeedbackStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     placeholder?: string;
     required: boolean;
     minLength: number;
@@ -416,9 +482,12 @@ interface FeedbackStepProps {
 interface ConfirmStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
+    losses?: string[];
+    lossesLabel?: string;
     confirmLabel: string;
     goBackLabel: string;
-    periodEnd?: string;
     onConfirm: () => Promise<void>;
     onGoBack: () => void;
     isProcessing: boolean;
@@ -429,6 +498,8 @@ interface SuccessStepProps {
     offer?: OfferDecision;
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onClose: () => void;
     classNames?: SuccessClassNames;
 }
@@ -442,11 +513,13 @@ interface FlowState {
     step: string;
     currentStepId: string;
     selectedReason: string | null;
+    followupResponse: string;
     feedback: string;
     outcome: 'saved' | 'cancelled' | null;
     isProcessing: boolean;
     error: Error | null;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
 }
 interface FlowConfig extends FlowCallbacks {
     appId?: string;
@@ -505,12 +578,6 @@ interface CancelFlowProps extends FlowCallbacks {
     classNames?: StructuralClassNames;
     components?: Partial<ComponentOverrides>;
     customComponents?: CustomComponents;
-    layout?: {
-        desktop?: 'modal' | 'inline' | 'drawer';
-        mobile?: 'sheet' | 'fullscreen' | 'inline';
-        breakpoint?: number;
-    };
-    animation?: 'css' | 'framer' | 'none';
 }
 
 interface ResolvedStep {
@@ -529,6 +596,8 @@ interface ResolvedStep {
     placeholder?: string;
     required?: boolean;
     minLength?: number;
+    losses?: string[];
+    lossesLabel?: string;
     savedTitle?: string;
     savedDescription?: string;
     cancelledTitle?: string;

package/dist/{step-graph-ChdI-VXV.d.cts → step-graph-ChlSCUGk.d.ts}

@@ -129,12 +129,10 @@ interface PauseOffer {
     type: 'pause';
     months: number;
     interval?: 'month' | 'week';
-    datePicker?: boolean;
 }
 interface PlanChangeOffer {
     type: 'plan_change';
     plans: PlanOption[];
-    currentPlanId?: string;
 }
 /**
  * Plan option in a `plan_change` offer — `DirectPrice` plus optional
@@ -181,13 +179,22 @@ interface OfferCopy {
     declineCta: string;
 }
 type AcceptedOffer = OfferConfig & {
-    reasonId: string;
-    decisionId?: string;
+    /** Survey reason that routed to this offer. Absent when the offer was
+     *  declared as a standalone `OfferStep`. */
+    reasonId?: string;
+    /** Payload from custom offers — whatever your component passed to
+     *  `onAccept(result)`. Built-in offer types do not populate this. */
     result?: Record<string, unknown>;
 };
 interface ReasonConfig {
     id: string;
     label: string;
+    /**
+     * When true, picking this reason reveals a text input below the reason list.
+     * The typed text lands on the session as `followupResponse`. `surveyChoiceId`
+     * still carries the reason's `id` and `surveyChoiceValue` still carries the
+     * static `label`, so analytics groupings stay stable.
+     */
     freeform?: boolean;
     offer?: OfferConfig;
 }
@@ -205,11 +212,12 @@ interface OfferStep {
     title?: string;
     description?: string;
     /**
-     * Offer attached to this step. Set this for proactive save offers shown
-     * outside a survey; the SDK also populates it automatically on synthetic
-     * offer steps spawned from survey choices.
+     * Offer attached to this step. Set this to declare a standalone offer
+     * step (one that isn't routed from a survey reason). `copy` is optional —
+     * the SDK synthesizes default copy from the offer config when none is
+     * provided, the same way it does for survey-attached offers.
      */
-    offer?: OfferDecision;
+    offer?: OfferConfig | OfferDecision;
     classNames?: OfferClassNames;
 }
 interface FeedbackStep {
@@ -227,6 +235,10 @@ interface ConfirmStep {
     guid?: string;
     title?: string;
     description?: string;
+    /** Optional bullet list of what the customer is giving up. Rendered between the description and the period-end notice. */
+    losses?: string[];
+    /** Heading above the loss list. Defaults to "You'll lose access to:". */
+    lossesLabel?: string;
     confirmLabel?: string;
     goBackLabel?: string;
     classNames?: ConfirmClassNames;
@@ -258,7 +270,7 @@ interface SurveyClassNames {
     reasonButton?: string;
     reasonButtonSelected?: string;
     reasonLabel?: string;
-    freeformInput?: string;
+    followupInput?: string;
     continueButton?: string;
 }
 interface OfferClassNames {
@@ -289,6 +301,10 @@ interface ConfirmClassNames {
     root?: string;
     title?: string;
     description?: string;
+    lossList?: string;
+    lossLabel?: string;
+    lossItem?: string;
+    lossBullet?: string;
     confirmButton?: string;
     goBackButton?: string;
     periodEndNotice?: string;
@@ -306,18 +322,55 @@ interface StructuralClassNames {
     closeButton?: string;
     backButton?: string;
 }
+/**
+ * Typed surface for `appearance.variables`. Every key maps to a `--ck-*`
+ * CSS custom property. Consumers who need a token not in this list can
+ * still set the underlying CSS variable directly — these are the ones
+ * exposed through the typed JS API.
+ */
 interface AppearanceVariables {
-    colorPrimary: string;
-    colorPrimaryHover: string;
     colorBackground: string;
+    colorSurface: string;
+    colorSurfaceMuted: string;
+    colorBorder: string;
+    colorBorderStrong: string;
     colorText: string;
     colorTextSecondary: string;
-    colorBorder: string;
-    colorDanger: string;
+    colorTextMuted: string;
+    colorPrimary: string;
+    colorPrimaryHover: string;
+    colorPrimarySoft: string;
     colorSuccess: string;
+    colorSuccessSoft: string;
+    colorDanger: string;
+    colorDangerHover: string;
+    colorDangerSoft: string;
     fontFamily: string;
+    fontFamilyMono: string;
+    /**
+     * Display face used by step titles and other visual headlines. Defaults
+     * to `fontFamily`. Set this when your brand uses a separate display face
+     * (Tiempos, Canela, etc.) for headings.
+     */
+    fontFamilyDisplay: string;
     fontSize: string;
+    /** Weight applied to the step title. Default `'600'`. */
+    fontWeightDisplay: string;
+    /** Letter spacing applied to the step title. Default `'-0.015em'`. */
+    letterSpacingDisplay: string;
     borderRadius: string;
+    radiusSm: string;
+    radiusMd: string;
+    radiusLg: string;
+    radiusXl: string;
+    shadowModal: string;
+    shadowCard: string;
+    /**
+     * Color of the dim behind the modal. Defaults to a neutral translucent
+     * ink. Set to `color-mix(in srgb, var(--ck-color-primary) 40%, transparent)`
+     * to derive the overlay from your primary color, or any CSS color value.
+     */
+    overlayColor: string;
 }
 interface Appearance {
     /**
@@ -330,12 +383,14 @@ interface Appearance {
 interface CustomStepProps {
     step: CustomStepConfig;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onNext: (result?: Record<string, unknown>) => void;
     onBack: () => void;
 }
 interface CustomOfferProps {
     offer: OfferDecision;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onAccept: (result?: Record<string, unknown>) => Promise<void>;
     onDecline: () => void;
     isProcessing: boolean;
@@ -363,6 +418,7 @@ interface ModalProps {
     onClose: () => void;
     children: ReactNode;
     className?: string;
+    overlayClassName?: string;
 }
 interface CloseButtonProps {
     onClose: () => void;
@@ -375,9 +431,15 @@ interface BackButtonProps {
 interface SurveyStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     reasons: ReasonConfig[];
     selectedReason: string | null;
     onSelectReason: (id: string) => void;
+    /** Free-text value when the selected reason has `freeform: true`. Lands on the session as `followupResponse`. */
+    followupResponse: string;
+    /** Set the follow-up response. The SDK forwards the value to the session. */
+    onFollowupResponseChange: (text: string) => void;
     onNext: () => void;
     classNames?: SurveyClassNames;
     components?: Partial<ComponentOverrides>;
@@ -385,6 +447,8 @@ interface SurveyStepProps {
 interface OfferStepProps {
     title?: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     offer: OfferDecision;
     /**
      * Accept the offer. The optional `result` is included on the resulting
@@ -405,6 +469,8 @@ interface OfferStepProps {
 interface FeedbackStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     placeholder?: string;
     required: boolean;
     minLength: number;
@@ -416,9 +482,12 @@ interface FeedbackStepProps {
 interface ConfirmStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
+    losses?: string[];
+    lossesLabel?: string;
     confirmLabel: string;
     goBackLabel: string;
-    periodEnd?: string;
     onConfirm: () => Promise<void>;
     onGoBack: () => void;
     isProcessing: boolean;
@@ -429,6 +498,8 @@ interface SuccessStepProps {
     offer?: OfferDecision;
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onClose: () => void;
     classNames?: SuccessClassNames;
 }
@@ -442,11 +513,13 @@ interface FlowState {
     step: string;
     currentStepId: string;
     selectedReason: string | null;
+    followupResponse: string;
     feedback: string;
     outcome: 'saved' | 'cancelled' | null;
     isProcessing: boolean;
     error: Error | null;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
 }
 interface FlowConfig extends FlowCallbacks {
     appId?: string;
@@ -505,12 +578,6 @@ interface CancelFlowProps extends FlowCallbacks {
     classNames?: StructuralClassNames;
     components?: Partial<ComponentOverrides>;
     customComponents?: CustomComponents;
-    layout?: {
-        desktop?: 'modal' | 'inline' | 'drawer';
-        mobile?: 'sheet' | 'fullscreen' | 'inline';
-        breakpoint?: number;
-    };
-    animation?: 'css' | 'framer' | 'none';
 }
 
 interface ResolvedStep {
@@ -529,6 +596,8 @@ interface ResolvedStep {
     placeholder?: string;
     required?: boolean;
     minLength?: number;
+    losses?: string[];
+    lossesLabel?: string;
     savedTitle?: string;
     savedDescription?: string;
     cancelledTitle?: string;