@olwiba/ui 0.1.9 → 0.1.11

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;
@@ -1066,7 +1074,7 @@ interface FlowBracketProps {
      * Defaults to 22.
      */
     extent?: number;
-    /** Show open-chevron arrowhead at the top (destination) end. Default: true. */
+    /** Show open-chevron arrowhead at the destination end. Default: true. */
     arrow?: boolean;
     /** CSS color for both bracket lines and animated dots. Defaults to muted slate. */
     color?: string;
@@ -1098,8 +1106,9 @@ interface FlowBracketProps {
  * left and/or right outside edges — connecting the top of the first child down
  * to the bottom of the last child (e.g. docs → SYNC direction).
  *
- * Bracket lines use `overflow: visible` on the SVG to draw into the parent's padding.
- * Ensure the parent section/container has enough horizontal padding for `extent`.
+ * Arrowheads are rendered as absolutely-positioned SVGs (not SVG markers) so
+ * 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;
 

package/dist/index.js

@@ -1455,7 +1455,9 @@ function PricingCard({
   cta,
   highlighted = false,
   disabled = false,
+  ctaDisabled = false,
   badge,
+  footer,
   onSelect,
   className,
   ...props
@@ -1488,10 +1490,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 +1586,8 @@ function PricingSection({
   renderLink = defaultRenderLink7,
   footnote,
   mode = "subscription",
-  foundingDeadline
+  foundingDeadline,
+  renderPlanFooter
 }) {
   const [annual, setAnnual] = React29.useState(false);
   const isOneTime = mode === "one-time";
@@ -1647,7 +1651,9 @@ function PricingSection({
           cta: plan.cta,
           highlighted: plan.highlighted,
           disabled: plan.disabled,
-          badge: badge2
+          ctaDisabled: plan.ctaDisabled,
+          badge: badge2,
+          footer: renderPlanFooter?.(plan)
         },
         plan.name
       );
@@ -3092,8 +3098,6 @@ function FlowConnector({
     }
   );
 }
-var MARKER_L = "fb-ml";
-var MARKER_R = "fb-mr";
 function FlowBracket({
   anchorTop = 8,
   anchorBottom = 92,
@@ -3152,6 +3156,20 @@ function FlowBracket({
     pointerEvents: "none",
     opacity: 0
   };
+  const chevronProps = {
+    fill: "none",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  const arrowBase = {
+    position: "absolute",
+    width: 10,
+    height: 8,
+    overflow: "visible",
+    pointerEvents: "none",
+    transform: "translate(-50%, -50%)"
+  };
   return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", ...style }, children: [
     animate && /* @__PURE__ */ jsx("style", { children: dotKeyframes }),
     /* @__PURE__ */ jsxs(
@@ -3163,20 +3181,15 @@ function FlowBracket({
         className: "pointer-events-none absolute inset-0",
         style: { width: "100%", height: "100%", overflow: "visible" },
         children: [
-          /* @__PURE__ */ jsxs("defs", { children: [
-            /* @__PURE__ */ jsx("marker", { id: MARKER_L, markerWidth: "10", markerHeight: "8", refX: "8", refY: "4", orient: "auto", children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", fill: "none", stroke: cl, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-            /* @__PURE__ */ jsx("marker", { id: MARKER_R, markerWidth: "10", markerHeight: "8", refX: "8", refY: "4", orient: "auto", children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", fill: "none", stroke: cr, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-          ] }),
           left && /* @__PURE__ */ jsx(
             "path",
             {
               d: leftD,
               fill: "none",
-              stroke: cl,
+              style: { stroke: cl },
               strokeWidth: 1.5,
               strokeDasharray: "5,4",
-              vectorEffect: "non-scaling-stroke",
-              ...arrow ? { markerEnd: `url(#${MARKER_L})` } : {}
+              vectorEffect: "non-scaling-stroke"
             }
           ),
           right && /* @__PURE__ */ jsx(
@@ -3184,16 +3197,37 @@ function FlowBracket({
             {
               d: rightD,
               fill: "none",
-              stroke: cr,
+              style: { stroke: cr },
               strokeWidth: 1.5,
               strokeDasharray: "5,4",
-              vectorEffect: "non-scaling-stroke",
-              ...arrow ? { markerEnd: `url(#${MARKER_R})` } : {}
+              vectorEffect: "non-scaling-stroke"
             }
           )
         ]
       }
     ),
+    arrow && left && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": true,
+        viewBox: "0 0 10 8",
+        style: { ...arrowBase, top: `${anchorTop}%`, left: 0 },
+        children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", style: { stroke: cl }, ...chevronProps })
+      }
+    ),
+    arrow && right && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": true,
+        viewBox: "0 0 10 8",
+        style: {
+          ...arrowBase,
+          top: reverseRight ? `${anchorBottom}%` : `${anchorTop}%`,
+          left: "100%"
+        },
+        children: /* @__PURE__ */ jsx("polyline", { points: "9,1 2,4 9,7", style: { stroke: cr }, ...chevronProps })
+      }
+    ),
     children,
     animate && left && /* @__PURE__ */ jsx(
       "div",