@olwiba/ui 0.1.11 → 0.1.12

package/dist/index.d.ts

@@ -1064,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).
@@ -1110,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" }),
@@ -2352,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,
@@ -3100,6 +3093,8 @@ function FlowConnector({
 }
 function FlowBracket({
   anchorTop = 8,
+  anchorTopLeft,
+  anchorTopRight,
   anchorBottom = 92,
   extent = 22,
   arrow = true,
@@ -3119,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}
@@ -3211,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 })
       }
     ),
@@ -3222,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 })
@@ -3460,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 }
             }
           )
@@ -3480,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