@olwiba/ui 0.2.11 → 0.2.13

package/dist/index.d.ts

@@ -681,6 +681,58 @@ interface CtaSectionProps {
 }
 declare function CtaSection(props: CtaSectionProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * A transition is pure data: two layers, each with a start and an end style.
+ * Adding an effect means adding an entry to {@link EFFECTS} — the component
+ * itself never learns what "roll" means. Consumers can pass a spec object
+ * directly for anything not in the set.
+ */
+interface AnimatedSwapSpec {
+    /** Hide overflow on the container. Required by effects that travel further than they fade. */
+    clip: boolean;
+    duration: number;
+    easing: string;
+    /** The incoming layer: where it starts, where it lands. */
+    enter: {
+        from: React.CSSProperties;
+        to: React.CSSProperties;
+    };
+    /** The outgoing layer: where it starts, where it leaves. */
+    exit: {
+        from: React.CSSProperties;
+        to: React.CSSProperties;
+    };
+}
+type AnimatedSwapEffect = 'roll' | 'fade' | 'slide' | 'none';
+interface AnimatedSwapProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Changing this is the swap. Nothing else triggers one — the component
+     * can't see inside `children`, so re-rendering with different content under
+     * the same key updates in place with no animation.
+     */
+    swapKey: React.Key;
+    /** Named effect, or a spec of your own. Defaults from the current UI mode. */
+    effect?: AnimatedSwapEffect | AnimatedSwapSpec;
+    /** Override the effect's duration, in ms. */
+    duration?: number;
+    children: React.ReactNode;
+}
+/**
+ * Animates the replacement of arbitrary content when `swapKey` changes: a
+ * price when the billing cadence toggles, a chart when the range changes, a
+ * status pill when a job finishes.
+ *
+ * Both versions are mounted for the length of the transition. The incoming
+ * one stays in normal flow so the container sizes to it immediately; the
+ * outgoing one is lifted out of flow and overlaid, so content below settles
+ * once, at the start, under cover of the animation — rather than snapping
+ * when the old copy unmounts.
+ *
+ * CSS transitions only: no keyframes to register in a consumer's Tailwind
+ * config, and no motion library.
+ */
+declare function AnimatedSwap({ swapKey, effect, duration, children, className, style, ...props }: AnimatedSwapProps): react_jsx_runtime.JSX.Element;
+
 interface PricingFeature {
     label: string;
     included: boolean;
@@ -699,9 +751,18 @@ interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
     badge?: React.ReactNode;
     /** Rendered directly below the CTA button (e.g. a "Get notified" link). */
     footer?: React.ReactNode;
+    /**
+     * How the price transitions when a cadence toggle swaps it. Omit and the
+     * current UI mode decides — `fade` in default, `roll` in playful, `slide` in
+     * smooth — which is the right answer for a product that has picked a mode
+     * and wants every swap on the page to agree with it. Set it when the price
+     * specifically should read as a mechanism (`'roll'`) without moving the
+     * whole app to playful.
+     */
+    priceEffect?: AnimatedSwapEffect | AnimatedSwapSpec;
     onSelect?: () => void;
 }
-declare function PricingCard({ name, price, period, description, features, cta, highlighted, disabled, ctaDisabled, badge, footer, onSelect, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
+declare function PricingCard({ name, price, period, description, features, cta, highlighted, disabled, ctaDisabled, badge, footer, priceEffect, onSelect, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
 
 /**
  * One billing period a plan can be bought at.
@@ -779,8 +840,15 @@ interface PricingSectionProps {
     onSelectPlan?: (plan: PricingPlan, cadence?: string) => void;
     /** Marks one plan as busy (e.g. its checkout is being created). */
     pendingPlanName?: string;
+    /**
+     * How each card's price transitions when the cadence toggle changes it.
+     * Omit and the current UI mode decides (see `PricingCard.priceEffect`) —
+     * pass `'roll'` for an odometer on a product that is otherwise in default
+     * mode.
+     */
+    priceEffect?: PricingCardProps['priceEffect'];
 }
-declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, currency, highlightedBadgeLabel, renderPlanFooter, cadences, defaultCadence, onSelectPlan, pendingPlanName, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
+declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, currency, highlightedBadgeLabel, renderPlanFooter, cadences, defaultCadence, onSelectPlan, pendingPlanName, priceEffect, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
 
 interface TestimonialsSectionProps {
     title?: string;
@@ -1039,58 +1107,6 @@ interface CountUpProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare function CountUp({ from, to, duration, decimals, prefix, suffix, once, className, ...props }: CountUpProps): react_jsx_runtime.JSX.Element;
 
-/**
- * A transition is pure data: two layers, each with a start and an end style.
- * Adding an effect means adding an entry to {@link EFFECTS} — the component
- * itself never learns what "roll" means. Consumers can pass a spec object
- * directly for anything not in the set.
- */
-interface AnimatedSwapSpec {
-    /** Hide overflow on the container. Required by effects that travel further than they fade. */
-    clip: boolean;
-    duration: number;
-    easing: string;
-    /** The incoming layer: where it starts, where it lands. */
-    enter: {
-        from: React.CSSProperties;
-        to: React.CSSProperties;
-    };
-    /** The outgoing layer: where it starts, where it leaves. */
-    exit: {
-        from: React.CSSProperties;
-        to: React.CSSProperties;
-    };
-}
-type AnimatedSwapEffect = 'roll' | 'fade' | 'slide' | 'none';
-interface AnimatedSwapProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Changing this is the swap. Nothing else triggers one — the component
-     * can't see inside `children`, so re-rendering with different content under
-     * the same key updates in place with no animation.
-     */
-    swapKey: React.Key;
-    /** Named effect, or a spec of your own. Defaults from the current UI mode. */
-    effect?: AnimatedSwapEffect | AnimatedSwapSpec;
-    /** Override the effect's duration, in ms. */
-    duration?: number;
-    children: React.ReactNode;
-}
-/**
- * Animates the replacement of arbitrary content when `swapKey` changes: a
- * price when the billing cadence toggles, a chart when the range changes, a
- * status pill when a job finishes.
- *
- * Both versions are mounted for the length of the transition. The incoming
- * one stays in normal flow so the container sizes to it immediately; the
- * outgoing one is lifted out of flow and overlaid, so content below settles
- * once, at the start, under cover of the animation — rather than snapping
- * when the old copy unmounts.
- *
- * CSS transitions only: no keyframes to register in a consumer's Tailwind
- * config, and no motion library.
- */
-declare function AnimatedSwap({ swapKey, effect, duration, children, className, style, ...props }: AnimatedSwapProps): react_jsx_runtime.JSX.Element;
-
 interface CountdownTimerProps {
     deadline: string;
     label?: string;

package/dist/index.js

@@ -473,10 +473,16 @@ function AppShell({
 }
 var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function CenteredAuth({ children, brand, className }) {
-  return /* @__PURE__ */ jsxs("section", { className: cn$1("flex min-h-screen flex-col justify-center bg-background py-12 px-4 sm:px-6 lg:px-8", className), children: [
-    brand && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-md text-center mb-8", children: brand }),
-    /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-md", children })
-  ] });
+  return (
+    // `min-h-dvh`, not `min-h-screen`: on mobile `100vh` is the viewport with
+    // the browser chrome *retracted*, so a screen-height box is always taller
+    // than what you can actually see, and it resizes under you as the URL bar
+    // hides and shows.
+    /* @__PURE__ */ jsx("section", { className: cn$1("flex min-h-dvh flex-col bg-background px-4 py-10 sm:px-6 sm:py-12 lg:px-8", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-md sm:my-auto", children: [
+      brand && /* @__PURE__ */ jsx("div", { className: "mb-8 text-center", children: brand }),
+      children
+    ] }) })
+  );
 }
 function SplitAuth({ children, panel }) {
   const defaultPanel = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
@@ -2285,6 +2291,7 @@ function PricingCard({
   ctaDisabled = false,
   badge,
   footer,
+  priceEffect,
   onSelect,
   className,
   ...props
@@ -2306,7 +2313,15 @@ function PricingCard({
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: name }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
-            /* @__PURE__ */ jsx(AnimatedSwap, { swapKey: price, className: "text-4xl font-bold tracking-tight", children: price }),
+            /* @__PURE__ */ jsx(
+              AnimatedSwap,
+              {
+                swapKey: price,
+                effect: priceEffect,
+                className: "text-4xl font-bold tracking-tight",
+                children: price
+              }
+            ),
             /* @__PURE__ */ jsx("span", { className: "mb-1 text-sm text-muted-foreground", children: period })
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
@@ -2446,7 +2461,8 @@ function PricingSection({
   cadences,
   defaultCadence,
   onSelectPlan,
-  pendingPlanName
+  pendingPlanName,
+  priceEffect
 }) {
   const [annual, setAnnual] = React20.useState(false);
   const isOneTime = mode === "one-time";
@@ -2543,6 +2559,7 @@ function PricingSection({
           ctaDisabled: plan.ctaDisabled || pendingPlanName === plan.name,
           badge: badge2,
           footer: renderPlanFooter?.(plan),
+          priceEffect,
           onSelect: onSelectPlan ? () => onSelectPlan(plan, useCadences ? activeCadence : void 0) : void 0
         },
         plan.name