@olwiba/ui 0.1.10 → 0.1.12

package/dist/index.d.ts

@@ -521,10 +521,14 @@ interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
     cta: string;
     highlighted?: boolean;
     disabled?: boolean;
+    /** Disables only the CTA button, leaving the rest of the card interactive. */
+    ctaDisabled?: boolean;
     badge?: React.ReactNode;
+    /** Rendered directly below the CTA button (e.g. a "Get notified" link). */
+    footer?: React.ReactNode;
     onSelect?: () => void;
 }
-declare function PricingCard({ name, price, period, description, features, cta, highlighted, disabled, badge, onSelect, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
+declare function PricingCard({ name, price, period, description, features, cta, highlighted, disabled, ctaDisabled, badge, footer, onSelect, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
 
 interface PricingPlan {
     name: string;
@@ -534,6 +538,8 @@ interface PricingPlan {
     cta: string;
     highlighted?: boolean;
     disabled?: boolean;
+    /** Disables only the CTA button, leaving the rest of the card interactive. */
+    ctaDisabled?: boolean;
     features: PricingFeature[];
     /** Overrides computed price display (e.g. "$?" for community/reach-out tiers). */
     priceDisplay?: string;
@@ -551,8 +557,10 @@ interface PricingSectionProps {
     footnote?: string;
     mode?: 'subscription' | 'one-time';
     foundingDeadline?: string;
+    /** Rendered below each plan's CTA button (e.g. a "Get notified" link). */
+    renderPlanFooter?: (plan: PricingPlan) => React.ReactNode;
 }
-declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
+declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, renderPlanFooter, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
 
 interface TestimonialsSectionProps {
     title?: string;
@@ -1056,6 +1064,10 @@ interface FlowBracketProps {
      * Defaults to 8 (near the top of the first child).
      */
     anchorTop?: number;
+    /** Per-side override for the top anchor of the left bracket. Falls back to anchorTop. */
+    anchorTopLeft?: number;
+    /** Per-side override for the top anchor of the right bracket. Falls back to anchorTop. */
+    anchorTopRight?: number;
     /**
      * Vertical anchor for the bottom connection as a percentage of the wrapper height (0–100).
      * Defaults to 92 (near the bottom of the last child).
@@ -1102,7 +1114,7 @@ interface FlowBracketProps {
  * they render at a consistent pixel size regardless of the bracket SVG's aspect
  * ratio (which spans the full section height with preserveAspectRatio="none").
  */
-declare function FlowBracket({ anchorTop, anchorBottom, extent, arrow, color, colorLeft, colorRight, left, right, animate, animateDur, reverseRight, style, className, children, }: FlowBracketProps): react_jsx_runtime.JSX.Element;
+declare function FlowBracket({ anchorTop, anchorTopLeft, anchorTopRight, anchorBottom, extent, arrow, color, colorLeft, colorRight, left, right, animate, animateDur, reverseRight, style, className, children, }: FlowBracketProps): react_jsx_runtime.JSX.Element;
 
 interface FullPageSpinnerProps {
     message?: string;

package/dist/index.js

@@ -498,7 +498,8 @@ function DefaultForm({
   const hasPrefill = !!(defaultEmail || defaultPassword);
   const prefillStyle = (active) => active ? { animation: "auth-prefill 1.6s ease-out 0.35s 1 both" } : void 0;
   return /* @__PURE__ */ jsxs(Card, { className: "w-full", children: [
-    hasPrefill && /* @__PURE__ */ jsx("style", { children: `@keyframes auth-prefill{0%{box-shadow:0 0 0 0 hsl(var(--primary)/0)}40%{box-shadow:0 0 0 3px hsl(var(--primary)/0.4)}100%{box-shadow:0 0 0 0 hsl(var(--primary)/0)}}` }),
+    hasPrefill && // Theme tokens hold full color values (oklch), so opacity must come from color-mix, not hsl(var()/a)
+    /* @__PURE__ */ jsx("style", { children: `@keyframes auth-prefill{0%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 45%,transparent),0 0 16px 2px color-mix(in oklab,var(--primary) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}` }),
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       brand && /* @__PURE__ */ jsx("div", { className: "mb-2", children: brand }),
       /* @__PURE__ */ jsx(CardTitle, { children: isSignUp ? "Create an account" : "Sign in" }),
@@ -1455,7 +1456,9 @@ function PricingCard({
   cta,
   highlighted = false,
   disabled = false,
+  ctaDisabled = false,
   badge,
+  footer,
   onSelect,
   className,
   ...props
@@ -1488,10 +1491,11 @@ function PricingCard({
             variant: highlighted ? "default" : "outline",
             className: "mt-6 w-full",
             onClick: onSelect,
-            disabled,
+            disabled: disabled || ctaDisabled,
             children: cta
           }
         ),
+        footer && /* @__PURE__ */ jsx("div", { className: "mt-3 text-center text-sm", children: footer }),
         /* @__PURE__ */ jsx(Separator, { className: "my-6" }),
         /* @__PURE__ */ jsx("ul", { className: "space-y-3 text-sm", children: features.map((feat) => /* @__PURE__ */ jsx("li", { className: "flex items-center gap-2", children: feat.included ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-primary" }),
@@ -1583,7 +1587,8 @@ function PricingSection({
   renderLink = defaultRenderLink7,
   footnote,
   mode = "subscription",
-  foundingDeadline
+  foundingDeadline,
+  renderPlanFooter
 }) {
   const [annual, setAnnual] = React29.useState(false);
   const isOneTime = mode === "one-time";
@@ -1647,7 +1652,9 @@ function PricingSection({
           cta: plan.cta,
           highlighted: plan.highlighted,
           disabled: plan.disabled,
-          badge: badge2
+          ctaDisabled: plan.ctaDisabled,
+          badge: badge2,
+          footer: renderPlanFooter?.(plan)
         },
         plan.name
       );
@@ -2346,27 +2353,19 @@ function Navbar({
       })
     ] }),
     /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", className: "justify-self-end md:hidden", children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", className: "col-start-3 justify-self-end md:hidden", children: [
         /* @__PURE__ */ jsx(Menu, { className: "size-5" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
       ] }) }),
-      /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-72", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-4", children: [
-          /* @__PURE__ */ jsx("span", { onClick: () => setOpen(false), className: "cursor-pointer", children: renderLink({
-            href: brandHref,
-            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
-              brand.logo,
-              /* @__PURE__ */ jsx("span", { children: brand.name })
-            ] })
-          }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            controls?.map((control, i) => /* @__PURE__ */ jsx(React29.Fragment, { children: control }, i)),
-            /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", onClick: () => setOpen(false), children: [
-              /* @__PURE__ */ jsx(X, { className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close menu" })
-            ] })
+      /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-72", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center pb-4", children: /* @__PURE__ */ jsx("span", { onClick: () => setOpen(false), className: "cursor-pointer", children: renderLink({
+          href: brandHref,
+          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
+            brand.logo,
+            /* @__PURE__ */ jsx("span", { children: brand.name })
           ] })
-        ] }),
+        }) }) }),
+        controls?.length ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex w-full items-center justify-between gap-1", children: controls.map((control, i) => /* @__PURE__ */ jsx(React29.Fragment, { children: control }, i)) }) : null,
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsx("nav", { className: "mt-4 flex flex-col gap-1", children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { onClick: () => setOpen(false), children: renderLink({
           href: link.href,
@@ -3094,6 +3093,8 @@ function FlowConnector({
 }
 function FlowBracket({
   anchorTop = 8,
+  anchorTopLeft,
+  anchorTopRight,
   anchorBottom = 92,
   extent = 22,
   arrow = true,
@@ -3113,30 +3114,32 @@ function FlowBracket({
   const R = 1e3 + extent;
   const cl = colorLeft ?? color;
   const cr = colorRight ?? color;
-  const leftD = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${anchorTop} L 0,${anchorTop}`;
-  const rightD = reverseRight ? `M 1000,${anchorTop} L ${R},${anchorTop} L ${R},${anchorBottom} L 1000,${anchorBottom}` : `M 1000,${anchorBottom} L ${R},${anchorBottom} L ${R},${anchorTop} L 1000,${anchorTop}`;
+  const aTL = anchorTopLeft ?? anchorTop;
+  const aTR = anchorTopRight ?? anchorTop;
+  const leftD = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${aTL} L 0,${aTL}`;
+  const rightD = reverseRight ? `M 1000,${aTR} L ${R},${aTR} L ${R},${anchorBottom} L 1000,${anchorBottom}` : `M 1000,${anchorBottom} L ${R},${anchorBottom} L ${R},${aTR} L 1000,${aTR}`;
   const ep = `${(extent / 10).toFixed(1)}%`;
   const dotKeyframes = animate ? `
 @keyframes fb-dl{
   0%{top:${anchorBottom}%;left:0;opacity:0}
   6%{opacity:1}
   20%{top:${anchorBottom}%;left:-${ep}}
-  80%{top:${anchorTop}%;left:-${ep};opacity:1}
-  94%{top:${anchorTop}%;left:0;opacity:0}
-  100%{top:${anchorTop}%;left:0;opacity:0}
+  80%{top:${aTL}%;left:-${ep};opacity:1}
+  94%{top:${aTL}%;left:0;opacity:0}
+  100%{top:${aTL}%;left:0;opacity:0}
 }
 @keyframes fb-dr{
   0%{top:${anchorBottom}%;left:100%;opacity:0}
   6%{opacity:1}
   20%{top:${anchorBottom}%;left:calc(100% + ${ep})}
-  80%{top:${anchorTop}%;left:calc(100% + ${ep});opacity:1}
-  94%{top:${anchorTop}%;left:100%;opacity:0}
-  100%{top:${anchorTop}%;left:100%;opacity:0}
+  80%{top:${aTR}%;left:calc(100% + ${ep});opacity:1}
+  94%{top:${aTR}%;left:100%;opacity:0}
+  100%{top:${aTR}%;left:100%;opacity:0}
 }
 @keyframes fb-drr{
-  0%{top:${anchorTop}%;left:100%;opacity:0}
+  0%{top:${aTR}%;left:100%;opacity:0}
   6%{opacity:1}
-  20%{top:${anchorTop}%;left:calc(100% + ${ep})}
+  20%{top:${aTR}%;left:calc(100% + ${ep})}
   80%{top:${anchorBottom}%;left:calc(100% + ${ep});opacity:1}
   94%{top:${anchorBottom}%;left:100%;opacity:0}
   100%{top:${anchorBottom}%;left:100%;opacity:0}
@@ -3205,7 +3208,7 @@ function FlowBracket({
       {
         "aria-hidden": true,
         viewBox: "0 0 10 8",
-        style: { ...arrowBase, top: `${anchorTop}%`, left: 0 },
+        style: { ...arrowBase, top: `${aTL}%`, left: 0 },
         children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", style: { stroke: cl }, ...chevronProps })
       }
     ),
@@ -3216,7 +3219,7 @@ function FlowBracket({
         viewBox: "0 0 10 8",
         style: {
           ...arrowBase,
-          top: reverseRight ? `${anchorBottom}%` : `${anchorTop}%`,
+          top: reverseRight ? `${anchorBottom}%` : `${aTR}%`,
           left: "100%"
         },
         children: /* @__PURE__ */ jsx("polyline", { points: "9,1 2,4 9,7", style: { stroke: cr }, ...chevronProps })
@@ -3454,7 +3457,7 @@ function BrandColorSwitchMinimal() {
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: "absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background",
+              className: `absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background${active === "zinc" ? " dark:ring-white/25" : ""}`,
               style: { background: activeHex }
             }
           )
@@ -3474,7 +3477,7 @@ function BrandColorSwitchMinimal() {
             /* @__PURE__ */ jsx(
               "span",
               {
-                className: "flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110",
+                className: `flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110${color.name === "zinc" ? " border border-transparent dark:border-white/25" : ""}`,
                 style: {
                   background: PREVIEW_HEX[color.name],
                   boxShadow: active === color.name ? `0 0 0 2px var(--background), 0 0 0 4px ${PREVIEW_HEX[color.name]}` : void 0