@olwiba/ui 0.2.12 → 0.2.14

package/dist/index.d.ts

@@ -335,9 +335,21 @@ interface AuthSectionProps extends AuthFormProps {
     children?: React.ReactNode;
     /** (split layout only) Custom content for the left decorative panel */
     panel?: React.ReactNode;
+    /**
+     * Render inside an existing page frame — one already providing the
+     * background, the horizontal padding, and a navbar and footer.
+     *
+     * Standalone (the default) the section owns the whole viewport, which is
+     * right for an auth screen that is the only thing on the page. It is wrong
+     * the moment there is chrome around it: the padding lands on top of the
+     * frame's own, and `min-h-dvh` guarantees the footer starts below the fold.
+     *
+     * (centered layout only)
+     */
+    framed?: boolean;
     className?: string;
 }
-declare function AuthSection({ layout, children, panel, className, ...formProps }: AuthSectionProps): react_jsx_runtime.JSX.Element;
+declare function AuthSection({ layout, children, panel, framed, className, ...formProps }: AuthSectionProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSectionProps {
     title: string;
@@ -681,6 +693,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 +763,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 +852,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 +1119,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

@@ -472,7 +472,24 @@ function AppShell({
   return inner;
 }
 var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
-function CenteredAuth({ children, brand, className }) {
+function CenteredAuth({ children, brand, framed, className }) {
+  if (framed) {
+    return (
+      // Framed: a page frame is already supplying the background, the page
+      // padding, and — with a navbar and footer around it — the height. All
+      // three have to come off here or they are applied twice: padding inside
+      // padding, and a full-viewport section that pushes the footer below the
+      // fold on every auth screen.
+      //
+      // The card fills the content column on a phone, matching the contact
+      // form, and only takes its reading width once there is room for the
+      // page to centre it.
+      /* @__PURE__ */ jsx("section", { className: cn$1("flex flex-col py-6 sm:py-10", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-none sm:my-auto sm:max-w-md", children: [
+        brand && /* @__PURE__ */ jsx("div", { className: "mb-8 text-center", children: brand }),
+        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
@@ -650,6 +667,7 @@ function AuthSection({
   layout = "centered",
   children,
   panel,
+  framed,
   className,
   ...formProps
 }) {
@@ -659,7 +677,7 @@ function AuthSection({
   }
   const { brand, ...restFormProps } = formProps;
   const form = children ?? /* @__PURE__ */ jsx(DefaultForm, { ...restFormProps });
-  return /* @__PURE__ */ jsx(CenteredAuth, { brand, className, children: form });
+  return /* @__PURE__ */ jsx(CenteredAuth, { brand, framed, className, children: form });
 }
 function SettingsSection({ title, description, children, danger = false, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn$1("grid grid-cols-1 gap-x-8 gap-y-6 py-10 sm:grid-cols-3", className), children: [
@@ -2291,6 +2309,7 @@ function PricingCard({
   ctaDisabled = false,
   badge,
   footer,
+  priceEffect,
   onSelect,
   className,
   ...props
@@ -2312,7 +2331,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 })
@@ -2452,7 +2479,8 @@ function PricingSection({
   cadences,
   defaultCadence,
   onSelectPlan,
-  pendingPlanName
+  pendingPlanName,
+  priceEffect
 }) {
   const [annual, setAnnual] = React20.useState(false);
   const isOneTime = mode === "one-time";
@@ -2549,6 +2577,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