@olwiba/ui 0.2.11 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/app/AuthSection.tsx

@@ -27,13 +27,28 @@ const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) =>
 
 function CenteredAuth({ children, brand, className }: { children: React.ReactNode; brand?: React.ReactNode; className?: string }) {
   return (
-    <section className={cn('flex min-h-screen flex-col justify-center bg-background py-12 px-4 sm:px-6 lg:px-8', className)}>
-      {brand && (
-        <div className="mx-auto w-full max-w-md text-center mb-8">
-          {brand}
-        </div>
-      )}
-      <div className="mx-auto w-full max-w-md">
+    // `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.
+    <section className={cn('flex min-h-dvh flex-col bg-background px-4 py-10 sm:px-6 sm:py-12 lg:px-8', className)}>
+      {/*
+        Auto margins rather than `justify-center`, and only from `sm` up.
+
+        A flex item centred with `justify-center` that's taller than its
+        container overflows in *both* directions, and the overflow above the
+        top edge is unreachable — no scrolling gets you back to it. That's the
+        sign-up form on a phone: name, email, password and social buttons
+        already run long, and focusing a field drops the keyboard over half
+        the viewport. The top of the card, title included, becomes
+        unscrollable.
+
+        Auto margins collapse to zero when there's no free space, so the card
+        stays reachable. Below `sm` there's no vertical centring at all — the
+        form flows from the top like the contact page.
+      */}
+      <div className="mx-auto w-full max-w-md sm:my-auto">
+        {brand && <div className="mb-8 text-center">{brand}</div>}
         {children}
       </div>
     </section>

package/src/components/PricingCard.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Check, Minus } from 'lucide-react';
 import { Badge, Button, cn, Separator, useUIVariant } from '@olwiba/cn';
-import { AnimatedSwap } from '../motion/AnimatedSwap';
+import { AnimatedSwap, type AnimatedSwapEffect, type AnimatedSwapSpec } from '../motion/AnimatedSwap';
 
 export interface PricingFeature {
   label: string;
@@ -24,6 +24,15 @@ export 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;
 }
 
@@ -39,6 +48,7 @@ export function PricingCard({
   ctaDisabled = false,
   badge,
   footer,
+  priceEffect,
   onSelect,
   className,
   ...props
@@ -71,8 +81,13 @@ export function PricingCard({
         <div className="flex items-end gap-1">
           {/* Animates when a billing-cadence toggle swaps the price out. The
               price is its own swap key: a card whose price never changes never
-              animates. */}
-          <AnimatedSwap swapKey={price} className="text-4xl font-bold tracking-tight">
+              animates. `effect` undefined leaves AnimatedSwap on the mode
+              default. */}
+          <AnimatedSwap
+            swapKey={price}
+            effect={priceEffect}
+            className="text-4xl font-bold tracking-tight"
+          >
             {price}
           </AnimatedSwap>
           <span className="mb-1 text-sm text-muted-foreground">{period}</span>

package/src/marketing/PricingSection.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Badge, Button, cn, useUIVariant } from '@olwiba/cn';
-import { PricingCard, type PricingFeature } from '../components/PricingCard';
+import { PricingCard, type PricingCardProps, type PricingFeature } from '../components/PricingCard';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { CountdownTimer } from '../motion/CountdownTimer';
 import type { AppShellRenderLink } from '../app/AppShell';
@@ -140,6 +140,13 @@ export 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'];
 }
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
@@ -164,6 +171,7 @@ export function PricingSection({
   defaultCadence,
   onSelectPlan,
   pendingPlanName,
+  priceEffect,
 }: PricingSectionProps) {
   const [annual, setAnnual] = React.useState(false);
   const isOneTime = mode === 'one-time';
@@ -314,6 +322,7 @@ export function PricingSection({
                   ctaDisabled={plan.ctaDisabled || pendingPlanName === plan.name}
                   badge={badge}
                   footer={renderPlanFooter?.(plan)}
+                  priceEffect={priceEffect}
                   onSelect={
                     onSelectPlan
                       ? () => onSelectPlan(plan, useCadences ? activeCadence : undefined)