@olwiba/ui 0.1.4 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -41,7 +41,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@olwiba/docs": "0.1.27",
+    "@olwiba/docs": "0.1.29",
     "@olwiba/dx": "0.0.18",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@content-collections/mdx": "^0.2.2",
-    "@olwiba/cn": "0.1.20",
+    "@olwiba/cn": "0.1.21",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/app/AuthSection.tsx

@@ -84,6 +84,10 @@ export interface AuthFormProps {
   renderLink?: AppShellRenderLink;
   /** Optional content rendered below the form — use for social auth buttons or other additions */
   footer?: React.ReactNode;
+  /** Pre-fill the email field (e.g. from demo credential links). Triggers a brief border highlight animation. */
+  defaultEmail?: string;
+  /** Pre-fill the password field (e.g. from demo credential links). Triggers a brief border highlight animation. */
+  defaultPassword?: string;
 }
 
 function DefaultForm({
@@ -98,11 +102,19 @@ function DefaultForm({
   loading,
   renderLink = defaultRenderLink,
   footer,
+  defaultEmail,
+  defaultPassword,
 }: AuthFormProps) {
   const isSignUp = mode === 'signup';
+  const hasPrefill = !!(defaultEmail || defaultPassword);
+  const prefillStyle = (active: boolean): React.CSSProperties | undefined =>
+    active ? { animation: 'auth-prefill 1.6s ease-out 0.35s 1 both' } : undefined;
 
   return (
     <Card className="w-full">
+      {hasPrefill && (
+        <style>{`@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)}}`}</style>
+      )}
       <CardHeader>
         {brand && <div className="mb-2">{brand}</div>}
         <CardTitle>{isSignUp ? 'Create an account' : 'Sign in'}</CardTitle>
@@ -122,7 +134,15 @@ function DefaultForm({
           )}
           <div className="space-y-2">
             <Label htmlFor="auth-email">Email address</Label>
-            <Input id="auth-email" name="email" type="email" placeholder="name@company.com" autoComplete="email" />
+            <Input
+              id="auth-email"
+              name="email"
+              type="email"
+              placeholder="name@company.com"
+              autoComplete="email"
+              defaultValue={defaultEmail}
+              style={prefillStyle(!!defaultEmail)}
+            />
           </div>
           <div className="space-y-2">
             <div className="flex items-center justify-between">
@@ -139,6 +159,8 @@ function DefaultForm({
               type="password"
               placeholder="••••••••"
               autoComplete={isSignUp ? 'new-password' : 'current-password'}
+              defaultValue={defaultPassword}
+              style={prefillStyle(!!defaultPassword)}
             />
           </div>
           {error && (

package/src/blog/ChangelogCard.tsx

@@ -2,18 +2,40 @@
 
 import * as React from 'react';
 import { Badge, cn } from '@olwiba/cn';
+import { ArrowRight } from 'lucide-react';
 import type { AppShellRenderLink } from '../app/AppShell';
 
+export type ChangelogReleaseType = 'release' | 'fix' | 'enhancement';
+
+export interface ChangelogHighlight {
+  title: string;
+  description: string;
+}
+
 export interface ChangelogCardProps {
   title: string;
   summary: string;
   date: string;
   slug: string;
   version?: string;
+  releaseType?: ChangelogReleaseType;
+  highlights?: ChangelogHighlight[];
   hrefPrefix?: string;
   renderLink?: AppShellRenderLink;
 }
 
+const releaseTypeLabel: Record<ChangelogReleaseType, string> = {
+  release: 'Major Release',
+  fix: 'Fix',
+  enhancement: 'Enhancement',
+};
+
+const releaseTypeVariant: Record<ChangelogReleaseType, 'default' | 'secondary' | 'outline'> = {
+  release: 'default',
+  fix: 'outline',
+  enhancement: 'secondary',
+};
+
 function formatDate(dateStr: string) {
   return new Date(dateStr).toLocaleDateString('en-US', {
     year: 'numeric',
@@ -28,6 +50,8 @@ export function ChangelogCard({
   date,
   slug,
   version,
+  releaseType,
+  highlights,
   hrefPrefix = '/changelog',
   renderLink,
 }: ChangelogCardProps) {
@@ -48,26 +72,60 @@ export function ChangelogCard({
       </a>
     );
 
+  const hasHighlights = highlights && highlights.length > 0;
+
   return (
-    <article className="group flex flex-col gap-3 border-b border-border/60 pb-8 last:border-0 last:pb-0">
-      <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-        <time dateTime={date}>{formatDate(date)}</time>
-        {version && (
-          <>
-            <span>·</span>
+    <article
+      className={cn(
+        'flex flex-col gap-5 rounded-2xl border border-border bg-card p-6 sm:p-8',
+        !hasHighlights && 'border-b border-border/60 rounded-none bg-transparent p-0 pb-8 last:pb-0 last:border-0',
+      )}
+    >
+      {/* Header row */}
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <time className="text-sm text-muted-foreground" dateTime={date}>
+            {formatDate(date)}
+          </time>
+          {version && (
             <Badge variant="secondary" className="font-mono text-xs">
               {version}
             </Badge>
-          </>
-        )}
+          )}
+          {releaseType && (
+            <Badge variant={releaseTypeVariant[releaseType]} className="text-xs">
+              {releaseTypeLabel[releaseType]}
+            </Badge>
+          )}
+        </div>
+        <LinkWrapper className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
+          Read update
+          <ArrowRight className="size-3.5" />
+        </LinkWrapper>
       </div>
-      <h2 className="text-lg font-semibold leading-snug tracking-tight">
-        <LinkWrapper className="transition-colors hover:text-primary">{title}</LinkWrapper>
-      </h2>
-      <p className={cn('line-clamp-3 text-sm text-muted-foreground')}>{summary}</p>
-      <LinkWrapper className="text-sm font-medium text-primary hover:underline">
-        Read release notes →
-      </LinkWrapper>
+
+      {/* Title + summary */}
+      <div>
+        <h2 className="text-lg font-semibold leading-snug tracking-tight">
+          <LinkWrapper className="transition-colors hover:text-primary">{title}</LinkWrapper>
+        </h2>
+        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{summary}</p>
+      </div>
+
+      {/* Highlights grid */}
+      {hasHighlights && (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          {highlights.map((h) => (
+            <div
+              key={h.title}
+              className="rounded-xl border border-border/70 bg-background p-4"
+            >
+              <p className="text-sm font-semibold leading-snug">{h.title}</p>
+              <p className="mt-1 text-xs leading-relaxed text-muted-foreground">{h.description}</p>
+            </div>
+          ))}
+        </div>
+      )}
     </article>
   );
 }

package/src/components/BrandColorSwitchMinimal.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import * as React from 'react';
+import { Palette } from 'lucide-react';
+import { Button, Popover, PopoverContent, PopoverTrigger } from '@olwiba/cn';
+
+interface BrandColor {
+  name: string;
+  label: string;
+  css: string;
+}
+
+const BRAND_COLORS: BrandColor[] = [
+  {
+    name: 'zinc',
+    label: 'Zinc',
+    css: `
+      :root { --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.708 0 0); }
+      .dark  { --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --ring: oklch(0.556 0 0); }
+    `,
+  },
+  {
+    name: 'blue',
+    label: 'Blue',
+    css: `
+      :root { --primary: oklch(0.546 0.245 262.881); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.546 0.245 262.881); }
+      .dark  { --primary: oklch(0.623 0.214 259.815); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.623 0.214 259.815); }
+    `,
+  },
+  {
+    name: 'emerald',
+    label: 'Emerald',
+    css: `
+      :root { --primary: oklch(0.596 0.145 163.225); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.596 0.145 163.225); }
+      .dark  { --primary: oklch(0.765 0.177 163.223); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.765 0.177 163.223); }
+    `,
+  },
+  {
+    name: 'purple',
+    label: 'Purple',
+    css: `
+      :root { --primary: oklch(0.558 0.288 302.321); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.558 0.288 302.321); }
+      .dark  { --primary: oklch(0.714 0.203 305.504); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.714 0.203 305.504); }
+    `,
+  },
+  {
+    name: 'rose',
+    label: 'Rose',
+    css: `
+      :root { --primary: oklch(0.645 0.246 16.439); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.645 0.246 16.439); }
+      .dark  { --primary: oklch(0.717 0.194 17.428); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.717 0.194 17.428); }
+    `,
+  },
+  {
+    name: 'orange',
+    label: 'Orange',
+    css: `
+      :root { --primary: oklch(0.705 0.213 47.604); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.705 0.213 47.604); }
+      .dark  { --primary: oklch(0.792 0.184 70.08); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.792 0.184 70.08); }
+    `,
+  },
+  {
+    name: 'slate',
+    label: 'Slate',
+    css: `
+      :root { --primary: oklch(0.446 0.043 257.281); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.446 0.043 257.281); }
+      .dark  { --primary: oklch(0.704 0.04 256.788); --primary-foreground: oklch(0.129 0.042 264.695); --ring: oklch(0.704 0.04 256.788); }
+    `,
+  },
+];
+
+// Preview hex values matched to each preset (used for swatch circles only)
+const PREVIEW_HEX: Record<string, string> = {
+  zinc: '#27272a',
+  blue: '#3b82f6',
+  emerald: '#10b981',
+  purple: '#a855f7',
+  rose: '#f43f5e',
+  orange: '#f97316',
+  slate: '#64748b',
+};
+
+const STORAGE_KEY = 'brand-color';
+const STYLE_ID = 'brand-color-override';
+
+function applyColor(color: BrandColor) {
+  let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+  if (!el) {
+    el = document.createElement('style');
+    el.id = STYLE_ID;
+    document.head.appendChild(el);
+  }
+  el.textContent = color.css;
+  localStorage.setItem(STORAGE_KEY, color.name);
+}
+
+function getInitialColorName(): string {
+  if (typeof localStorage === 'undefined') return 'emerald';
+  return localStorage.getItem(STORAGE_KEY) ?? 'emerald';
+}
+
+export function BrandColorSwitchMinimal() {
+  const [active, setActive] = React.useState<string>(getInitialColorName);
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY) ?? 'emerald';
+    const color = BRAND_COLORS.find((c) => c.name === saved);
+    if (color) applyColor(color);
+  }, []);
+
+  function select(color: BrandColor) {
+    applyColor(color);
+    setActive(color.name);
+    setOpen(false);
+  }
+
+  const activeHex = PREVIEW_HEX[active] ?? '#27272a';
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          aria-label="Change brand color"
+        >
+          <span className="relative inline-flex size-4 items-center justify-center">
+            <Palette className="size-4" />
+            <span
+              className="absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background"
+              style={{ background: activeHex }}
+            />
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-3" align="end">
+        <p className="mb-2.5 text-xs font-medium text-muted-foreground">Brand color</p>
+        <div className="grid grid-cols-4 gap-1.5">
+          {BRAND_COLORS.map((color) => (
+            <button
+              key={color.name}
+              type="button"
+              onClick={() => select(color)}
+              title={color.label}
+              className="group flex flex-col items-center gap-1"
+            >
+              <span
+                className="flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110"
+                style={{
+                  background: PREVIEW_HEX[color.name],
+                  boxShadow:
+                    active === color.name
+                      ? `0 0 0 2px var(--background), 0 0 0 4px ${PREVIEW_HEX[color.name]}`
+                      : undefined,
+                }}
+              >
+                {active === color.name && (
+                  <svg className="size-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                    <path d="M20 6L9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                )}
+              </span>
+              <span className="text-[10px] text-muted-foreground">{color.label}</span>
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/FlowBracket.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import * as React from 'react';
+
+export interface FlowBracketProps {
+  /**
+   * Vertical anchor for the top connection as a percentage of the wrapper height (0–100).
+   * Defaults to 8 (near the top of the first child).
+   */
+  anchorTop?: 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).
+   */
+  anchorBottom?: number;
+  /**
+   * How far outside the wrapper the bracket extends, in SVG units (viewBox width = 1000).
+   * Defaults to 22.
+   */
+  extent?: number;
+  /** Show open-chevron arrowhead at the top (destination) end. Default: true. */
+  arrow?: boolean;
+  /** CSS color for both bracket lines and animated dots. Defaults to muted slate. */
+  color?: string;
+  /** Override color for the left bracket only. */
+  colorLeft?: string;
+  /** Override color for the right bracket only. */
+  colorRight?: string;
+  /** Show left bracket. Default: true. */
+  left?: boolean;
+  /** Show right bracket. Default: true. */
+  right?: boolean;
+  /**
+   * Animate a dot traveling the L-path from the bottom anchor up to the top anchor
+   * (sync → genesis/docs direction).
+   * Dots are placed after {children} in DOM so positive-z-index card stacking contexts
+   * naturally render above them.
+   */
+  animate?: boolean;
+  /** Duration of one full dot journey. Default: '4s'. */
+  animateDur?: string;
+  /** Reverse the right bracket path direction so its arrowhead points DOWN (into sync). Default: false. */
+  reverseRight?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const MARKER_L = 'fb-ml';
+const MARKER_R = 'fb-mr';
+
+/**
+ * Wraps children in a relative container and draws square bracket lines on the
+ * 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`.
+ */
+export function FlowBracket({
+  anchorTop = 8,
+  anchorBottom = 92,
+  extent = 22,
+  arrow = true,
+  color = 'rgba(148,163,184,0.4)',
+  colorLeft,
+  colorRight,
+  left = true,
+  right = true,
+  animate = false,
+  animateDur = '4s',
+  reverseRight = false,
+  style,
+  className,
+  children,
+}: FlowBracketProps) {
+  const L = -extent;
+  const R = 1000 + extent;
+
+  const cl = colorLeft ?? color;
+  const cr = colorRight ?? color;
+
+  // Left bracket: bottom → top (arrowhead at top, pointing into genesis)
+  const leftD  = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${anchorTop} L 0,${anchorTop}`;
+  // Right bracket: reversed = top → bottom (arrowhead at bottom, pointing into sync)
+  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}`;
+
+  // CSS dot: extent as % of container width
+  const ep = `${(extent / 10).toFixed(1)}%`;
+  // Dots travel bottom → top (sync → genesis/docs direction), fade in/out at card edges
+  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}
+}
+@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}
+}` : '';
+
+  const dotBase: React.CSSProperties = {
+    position: 'absolute',
+    width: 5,
+    height: 5,
+    borderRadius: '50%',
+    transform: 'translate(-50%, -50%)',
+    pointerEvents: 'none',
+    opacity: 0,
+  };
+
+  return (
+    <div className={className} style={{ position: 'relative', ...style }}>
+      {animate && <style>{dotKeyframes}</style>}
+      <svg
+        viewBox="0 0 1000 100"
+        preserveAspectRatio="none"
+        aria-hidden
+        className="pointer-events-none absolute inset-0"
+        style={{ width: '100%', height: '100%', overflow: 'visible' }}
+      >
+        <defs>
+          <marker id={MARKER_L} markerWidth="10" markerHeight="8" refX="8" refY="4" orient="auto">
+            <polyline points="1,1 8,4 1,7" fill="none" stroke={cl} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </marker>
+          <marker id={MARKER_R} markerWidth="10" markerHeight="8" refX="8" refY="4" orient="auto">
+            <polyline points="1,1 8,4 1,7" fill="none" stroke={cr} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </marker>
+        </defs>
+        {left  && (
+          <path d={leftD}  fill="none" stroke={cl} strokeWidth={1.5} strokeDasharray="5,4"
+            vectorEffect="non-scaling-stroke" {...(arrow ? { markerEnd: `url(#${MARKER_L})` } : {})} />
+        )}
+        {right && (
+          <path d={rightD} fill="none" stroke={cr} strokeWidth={1.5} strokeDasharray="5,4"
+            vectorEffect="non-scaling-stroke" {...(arrow ? { markerEnd: `url(#${MARKER_R})` } : {})} />
+        )}
+      </svg>
+
+      {children}
+
+      {/* Dots placed after children so card stacking contexts (z-index ≥ 1) render above */}
+      {animate && left && (
+        <div
+          aria-hidden
+          style={{ ...dotBase, backgroundColor: cl, animation: `fb-dl ${animateDur} ease-in-out 0s infinite` }}
+        />
+      )}
+      {animate && right && (
+        <div
+          aria-hidden
+          style={{ ...dotBase, backgroundColor: cr, animation: `fb-dr ${animateDur} ease-in-out 1.8s infinite` }}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/FlowConnector.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface FlowConnectorProps {
+  /** Line axis. Default: 'vertical'. */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * CSS color string for the line and arrowhead.
+   * Falls back to currentColor at reduced opacity when omitted.
+   */
+  color?: string;
+  /** Show an open-chevron arrowhead at the destination end. Default: false. */
+  arrow?: boolean;
+  /** Show a traveling dot animation along the connector. Default: false. */
+  animate?: boolean;
+  /** Duration of the traveling dot animation. Default: '1.4s'. */
+  animateDur?: string;
+  /** CSS delay before the traveling dot animation starts. Default: '0s'. */
+  animateDelay?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const DASH_ON = '5px';
+const DASH_OFF = '4px';
+
+/**
+ * Dashed connecting line between diagram nodes.
+ * Control size via className (e.g. `h-10` for vertical, `w-16` for horizontal).
+ * Pass `style` for fade/entrance animations — the wrapper inherits it.
+ */
+export function FlowConnector({
+  direction = 'vertical',
+  color,
+  arrow = false,
+  animate = false,
+  animateDur = '1.4s',
+  animateDelay = '0s',
+  className,
+  style,
+}: FlowConnectorProps) {
+  const stroke = color ?? 'currentColor';
+  const opacity = color ? 0.75 : 0.4;
+
+  if (direction === 'vertical') {
+    return (
+      <div
+        className={cn('relative flex flex-col items-center', className)}
+        style={style}
+        aria-hidden
+      >
+        {animate && (
+          <style>{`@keyframes fc-dot-v{0%{top:-4px;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:calc(100% + 4px);opacity:0}}`}</style>
+        )}
+        <div
+          className="flex-1"
+          style={{
+            width: 2,
+            opacity,
+            background: `repeating-linear-gradient(to bottom, ${stroke} 0, ${stroke} ${DASH_ON}, transparent ${DASH_ON}, transparent calc(${DASH_ON} + ${DASH_OFF}))`,
+          }}
+        />
+        {animate && (
+          <div
+            style={{
+              position: 'absolute',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: 5,
+              height: 5,
+              borderRadius: '50%',
+              backgroundColor: stroke,
+              animation: `fc-dot-v ${animateDur} ease-in-out ${animateDelay} infinite both`,
+            }}
+          />
+        )}
+        {arrow && (
+          <svg
+            width="12"
+            height="7"
+            viewBox="0 0 12 7"
+            style={{ display: 'block', opacity }}
+            aria-hidden
+          >
+            <polyline
+              points="1,1 6,6 11,1"
+              fill="none"
+              stroke={stroke}
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn('flex items-center', className)}
+      style={style}
+      aria-hidden
+    >
+      <div
+        className="flex-1"
+        style={{
+          height: 2,
+          opacity,
+          background: `repeating-linear-gradient(to right, ${stroke} 0, ${stroke} ${DASH_ON}, transparent ${DASH_ON}, transparent calc(${DASH_ON} + ${DASH_OFF}))`,
+        }}
+      />
+      {arrow && (
+        <svg
+          width="7"
+          height="12"
+          viewBox="0 0 7 12"
+          style={{ display: 'block', opacity }}
+          aria-hidden
+        >
+          <polyline
+            points="1,1 6,6 1,11"
+            fill="none"
+            stroke={stroke}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </div>
+  );
+}