bits-lab 0.0.0-stage → 0.1.0

package/dist/SkeletonShimmer.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-skeleton-shimmer";
+const CSS = `
+.bl-skel { position: relative; }
+.bl-skel__content { transition: opacity var(--bl-fade) ease; }
+.bl-skel[data-loading] .bl-skel__content { opacity: 0; visibility: hidden; }
+.bl-skel__bones { position: absolute; inset: 0; pointer-events: none; transition: opacity var(--bl-fade) ease; }
+.bl-skel__bones[data-leaving] { opacity: 0; }
+.bl-skel__bone { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: var(--r); background: linear-gradient(100deg, var(--bl-base) 0 40%, var(--bl-shine) 50%, var(--bl-base) 60% 100%); background-size: 300% 100%; animation: bl-skel-shine var(--bl-speed) linear infinite; animation-delay: calc(var(--x01) * var(--bl-speed) * -0.5); }
+.bl-skel__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-skel-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-skel__bone { animation: none; } .bl-skel__content, .bl-skel__bones { transition: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const BLOCKS = 'img, svg, video, canvas, picture, iframe, input, textarea, select, button, [role="img"], [data-skeleton]';
+function trace(root, lineScale) {
+  const origin = root.getBoundingClientRect();
+  const bones = [];
+  const add = (rect, radius) => {
+    if (rect.width < 2 || rect.height < 2) return;
+    bones.push({ x: rect.left - origin.left, y: rect.top - origin.top, w: rect.width, h: rect.height, r: radius });
+  };
+  for (const node of root.querySelectorAll(BLOCKS)) {
+    if (node.parentElement?.closest(BLOCKS) && !node.matches("[data-skeleton]")) continue;
+    if (node.closest('[data-skeleton="skip"]')) continue;
+    const radius = getComputedStyle(node).borderRadius;
+    add(node.getBoundingClientRect(), radius && radius !== "0px" ? radius : "6px");
+  }
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+    acceptNode: (text) => text.textContent.trim() && !text.parentElement?.closest(`${BLOCKS}, [data-skeleton="skip"]`) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+  });
+  const range = document.createRange();
+  const lines = [];
+  for (let text = walker.nextNode(); text; text = walker.nextNode()) {
+    range.selectNodeContents(text);
+    for (const rect of range.getClientRects()) {
+      if (rect.width < 2) continue;
+      const line = lines.find((l) => Math.abs(l.top - rect.top) < rect.height / 2 && rect.left <= l.right + 12 && rect.right >= l.left - 12);
+      if (line) {
+        line.left = Math.min(line.left, rect.left);
+        line.right = Math.max(line.right, rect.right);
+      } else {
+        lines.push({ top: rect.top, left: rect.left, right: rect.right, height: rect.height });
+      }
+    }
+  }
+  for (const line of lines) {
+    const h = line.height * lineScale;
+    add({ left: line.left, top: line.top + (line.height - h) / 2, width: line.right - line.left, height: h }, `${Math.min(6, h / 2)}px`);
+  }
+  return { bones, width: origin.width };
+}
+function SkeletonShimmer({
+  loading = false,
+  children,
+  lineScale = 0.62,
+  fade = 320,
+  speed = 1400,
+  baseColor = "#262b44",
+  shineColor = "#3a4266",
+  loadingLabel = "Loading\u2026",
+  className = "",
+  style
+}) {
+  useStyles();
+  const contentRef = useRef(null);
+  const [skeleton, setSkeleton] = useState({ bones: [], width: 1 });
+  const [showBones, setShowBones] = useState(loading);
+  const [leaving, setLeaving] = useState(false);
+  useLayoutEffect(() => {
+    if (!loading) return void 0;
+    setShowBones(true);
+    setLeaving(false);
+    const node = contentRef.current;
+    const measure = () => setSkeleton(trace(node, lineScale));
+    measure();
+    const resize = new ResizeObserver(measure);
+    resize.observe(node);
+    return () => resize.disconnect();
+  }, [loading, lineScale]);
+  useEffect(() => {
+    if (loading || !showBones) return void 0;
+    setLeaving(true);
+    const timer = setTimeout(() => setShowBones(false), fade);
+    return () => clearTimeout(timer);
+  }, [loading, showBones, fade]);
+  return /* @__PURE__ */ jsxs("div", { className: `bl-skel ${className}`, "data-loading": loading || void 0, "aria-busy": loading, style: { "--bl-fade": `${fade}ms`, "--bl-speed": `${speed}ms`, "--bl-base": baseColor, "--bl-shine": shineColor, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, className: "bl-skel__content", inert: loading || void 0, children }),
+    showBones && /* @__PURE__ */ jsx("div", { className: "bl-skel__bones", "data-leaving": leaving || void 0, "aria-hidden": "true", children: skeleton.bones.map((bone, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "bl-skel__bone",
+        style: { "--x": `${bone.x}px`, "--y": `${bone.y}px`, "--w": `${bone.w}px`, "--h": `${bone.h}px`, "--r": bone.r, "--x01": (bone.x / skeleton.width).toFixed(3) }
+      },
+      i
+    )) }),
+    loading && /* @__PURE__ */ jsx("span", { className: "bl-skel__sr", role: "status", children: loadingLabel })
+  ] });
+}
+export {
+  SkeletonShimmer as default
+};

package/dist/SketchHighlight.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode, type CSSProperties } from 'react';
+export type SketchType = 'underline' | 'highlight' | 'strike' | 'box' | 'circle' | 'bracket' | 'cross';
+export interface SketchHighlightProps {
+    /** The inline text being annotated. */
+    children?: ReactNode;
+    type?: SketchType;
+    color?: string;
+    strokeWidth?: number;
+    /** Gap around the text, in px. */
+    padding?: number;
+    /** Pen passes. */
+    iterations?: number;
+    /** How shaky the pen is. */
+    roughness?: number;
+    /** Draw time, in ms. */
+    duration?: number;
+    /** Delay before drawing, in ms (chain them to annotate in sequence). */
+    delay?: number;
+    /** false hides the annotation. */
+    show?: boolean;
+    /** Draw when scrolled into view, or at once. */
+    trigger?: 'view' | 'mount';
+    highlightOpacity?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SketchHighlight({ children, type, color, strokeWidth, padding, iterations, roughness, duration, delay, show, trigger, highlightOpacity, className, style }: SketchHighlightProps): import("react").JSX.Element;

package/dist/SketchHighlight.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-sketch";
+const CSS = `
+.bl-sketch { position: relative; }
+.bl-sketch__svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 0; }
+.bl-sketch[data-type="highlight"] .bl-sketch__svg { z-index: -1; }
+.bl-sketch[data-type="highlight"] { isolation: isolate; }
+.bl-sketch__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function seeded(seed) {
+  let s = seed >>> 0 || 1;
+  return () => {
+    s = s * 1664525 + 1013904223 >>> 0;
+    return s / 4294967296;
+  };
+}
+const hash = (text) => [...text].reduce((h, c) => h * 31 + c.charCodeAt(0) >>> 0, 7);
+function roughLine(x1, y1, x2, y2, rand, roughness) {
+  const j = () => (rand() - 0.5) * roughness;
+  const mx = (x1 + x2) / 2 + j() * 2;
+  const my = (y1 + y2) / 2 + j() * 2;
+  return `M${(x1 + j()).toFixed(1)},${(y1 + j()).toFixed(1)} Q${mx.toFixed(1)},${my.toFixed(1)} ${(x2 + j()).toFixed(1)},${(y2 + j()).toFixed(1)}`;
+}
+function roughEllipse(cx, cy, rx, ry, rand, roughness) {
+  const points = [];
+  const start = rand() * Math.PI * 2;
+  const sweep = Math.PI * 2 * (1.08 + rand() * 0.1);
+  const steps = 28;
+  for (let i = 0; i <= steps; i++) {
+    const a = start + i / steps * sweep;
+    const wobble = 1 + (rand() - 0.5) * (roughness / Math.max(rx, ry));
+    points.push([cx + Math.cos(a) * rx * wobble, cy + Math.sin(a) * ry * wobble]);
+  }
+  let d = `M${points[0][0].toFixed(1)},${points[0][1].toFixed(1)}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const [x, y] = points[i];
+    const [nx, ny] = points[i + 1];
+    d += ` Q${x.toFixed(1)},${y.toFixed(1)} ${((x + nx) / 2).toFixed(1)},${((y + ny) / 2).toFixed(1)}`;
+  }
+  return d;
+}
+function buildPaths(type, lines, box, { padding, iterations, roughness, seed }) {
+  const rand = seeded(seed);
+  const paths = [];
+  const pass = (n) => Array.from({ length: n }, (_, i) => i);
+  if (type === "underline" || type === "strike" || type === "highlight") {
+    for (const r of lines) {
+      const y = type === "underline" ? r.y + r.h + 2 : type === "strike" ? r.y + r.h * 0.55 : r.y + r.h / 2;
+      for (const i of pass(type === "highlight" ? 1 : iterations)) paths.push(roughLine(r.x - padding, y + i * 1.5, r.x + r.w + padding, y - i, rand, roughness));
+    }
+  } else if (type === "box") {
+    const x1 = box.x - padding;
+    const y1 = box.y - padding;
+    const x2 = box.x + box.w + padding;
+    const y2 = box.y + box.h + padding;
+    for (let i = 0; i < iterations; i++) paths.push(roughLine(x1, y1, x2, y1, rand, roughness), roughLine(x2, y1, x2, y2, rand, roughness), roughLine(x2, y2, x1, y2, rand, roughness), roughLine(x1, y2, x1, y1, rand, roughness));
+  } else if (type === "circle") {
+    for (let i = 0; i < iterations; i++) paths.push(roughEllipse(box.x + box.w / 2, box.y + box.h / 2, box.w / 2 + padding * 1.6, box.h / 2 + padding * 1.2, rand, roughness * 2));
+  } else if (type === "bracket") {
+    const x1 = box.x - padding;
+    const x2 = box.x + box.w + padding;
+    const y1 = box.y - padding / 2;
+    const y2 = box.y + box.h + padding / 2;
+    const arm = Math.min(10, box.w / 6);
+    paths.push(`${roughLine(x1 + arm, y1, x1, y1, rand, roughness)} ${roughLine(x1, y1, x1, y2, rand, roughness).replace("M", "L")} ${roughLine(x1, y2, x1 + arm, y2, rand, roughness).replace("M", "L")}`);
+    paths.push(`${roughLine(x2 - arm, y1, x2, y1, rand, roughness)} ${roughLine(x2, y1, x2, y2, rand, roughness).replace("M", "L")} ${roughLine(x2, y2, x2 - arm, y2, rand, roughness).replace("M", "L")}`);
+  } else if (type === "cross") {
+    paths.push(roughLine(box.x - padding, box.y, box.x + box.w + padding, box.y + box.h, rand, roughness), roughLine(box.x - padding, box.y + box.h, box.x + box.w + padding, box.y, rand, roughness));
+  }
+  return paths;
+}
+function SketchHighlight({
+  children,
+  type = "underline",
+  color = "#ef7d57",
+  strokeWidth = 2.5,
+  padding = 4,
+  iterations = 2,
+  roughness = 2.5,
+  duration = 700,
+  delay = 0,
+  show = true,
+  trigger = "view",
+  highlightOpacity = 0.55,
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const svgRef = useRef(null);
+  const [paths, setPaths] = useState([]);
+  const [visible, setVisible] = useState(trigger !== "view");
+  const drawn = useRef(false);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    const svg = svgRef.current;
+    if (!node || !svg) return void 0;
+    const measure = () => {
+      const origin = svg.getBoundingClientRect();
+      const lines = [...node.getClientRects()].map((r) => ({ x: r.left - origin.left, y: r.top - origin.top, w: r.width, h: r.height }));
+      if (!lines.length) return;
+      const x = Math.min(...lines.map((l) => l.x));
+      const y = Math.min(...lines.map((l) => l.y));
+      const box = { x, y, w: Math.max(...lines.map((l) => l.x + l.w)) - x, h: Math.max(...lines.map((l) => l.y + l.h)) - y };
+      setPaths(buildPaths(type, lines, box, { padding, iterations, roughness, seed: hash(`${type}:${node.textContent}`) }));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [type, padding, iterations, roughness]);
+  useEffect(() => {
+    if (trigger !== "view" || visible) return void 0;
+    const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setVisible(true), { threshold: 0.6 });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [trigger, visible]);
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg || !paths.length) return void 0;
+    const elements = [...svg.querySelectorAll("path")];
+    const active = show && visible;
+    if (!active) {
+      elements.forEach((el) => el.style.opacity = "0");
+      drawn.current = false;
+      return void 0;
+    }
+    if (drawn.current || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      elements.forEach((el) => {
+        el.style.opacity = "1";
+        el.style.strokeDasharray = "";
+        el.style.strokeDashoffset = "";
+      });
+      drawn.current = true;
+      return void 0;
+    }
+    drawn.current = true;
+    const each = duration / elements.length;
+    const animations = elements.map((el, i) => {
+      const length = el.getTotalLength();
+      el.style.opacity = "1";
+      el.style.strokeDasharray = `${length}`;
+      el.style.strokeDashoffset = `${length}`;
+      return el.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], { duration: each, delay: delay + i * each, easing: "cubic-bezier(.45,0,.3,1)", fill: "forwards" });
+    });
+    return () => animations.forEach((a) => a.finish());
+  }, [paths, show, visible, duration, delay]);
+  const highlight = type === "highlight";
+  return /* @__PURE__ */ jsxs("span", { ref, className: `bl-sketch ${className}`, "data-type": type, style, children: [
+    /* @__PURE__ */ jsx("svg", { ref: svgRef, className: "bl-sketch__svg", "aria-hidden": "true", focusable: "false", children: paths.map((d, i) => /* @__PURE__ */ jsx(
+      "path",
+      {
+        d,
+        stroke: color,
+        strokeWidth: highlight ? "1.05em" : strokeWidth,
+        strokeOpacity: highlight ? highlightOpacity : 1,
+        style: { opacity: 0, strokeLinecap: highlight ? "butt" : "round" }
+      },
+      i
+    )) }),
+    children
+  ] });
+}
+export {
+  SketchHighlight as default
+};

package/dist/SlideTabs.d.ts

@@ -0,0 +1,40 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface TabItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Panel content; give items content to render a linked tab panel. */
+    content?: ReactNode;
+}
+export interface SlideTabsProps {
+    items?: TabItem[];
+    /** Controlled selected id. */
+    value?: string;
+    /** Uncontrolled starting id (defaults to the first item). */
+    defaultValue?: string;
+    onChange?: (id: string, item: TabItem) => void;
+    variant?: 'pill' | 'underline';
+    /** Leading edge moves first and the trailing edge follows. */
+    stretch?: boolean;
+    /** Arrow keys select immediately, or only move focus until Enter/Space. */
+    activation?: 'automatic' | 'manual';
+    /** Slide length, in ms. */
+    duration?: number;
+    /** Accessible name of the tab list. */
+    label?: string;
+    fontSize?: number;
+    gap?: number;
+    padding?: number;
+    radius?: number;
+    textColor?: string;
+    mutedColor?: string;
+    trackColor?: string;
+    lineColor?: string;
+    activeColor?: string;
+    activeTextColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SlideTabs({ items, value, defaultValue, onChange, variant, stretch, activation, duration, label, fontSize, gap, padding, radius, textColor, mutedColor, trackColor, lineColor, activeColor, activeTextColor, accentColor, fontFamily, className, style }: SlideTabsProps): import("react").JSX.Element;

package/dist/SlideTabs.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-slide-tabs";
+const CSS = `
+.bl-stabs { min-width: 0; max-width: 100%; font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-stabs__scroller { position: relative; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--bl-fade-l), #000 calc(100% - var(--bl-fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--bl-fade-l), #000 calc(100% - var(--bl-fade-r)), transparent 100%); }
+.bl-stabs__scroller::-webkit-scrollbar { display: none; }
+.bl-stabs__list { position: relative; display: inline-flex; gap: var(--bl-gap); min-width: 100%; padding: var(--bl-pad); border-radius: var(--bl-radius); background: var(--bl-track); box-sizing: border-box; }
+.bl-stabs[data-variant="underline"] .bl-stabs__list { background: transparent; padding: 0; box-shadow: inset 0 -1px 0 var(--bl-line); border-radius: 0; }
+.bl-stabs__indicator { position: absolute; top: var(--bl-pad); bottom: var(--bl-pad); border-radius: calc(var(--bl-radius) - var(--bl-pad) / 2); background: var(--bl-active-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.3); pointer-events: none; }
+.bl-stabs[data-variant="underline"] .bl-stabs__indicator { top: auto; bottom: 0; height: 3px; border-radius: 3px; background: var(--bl-accent); box-shadow: none; }
+.bl-stabs__tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 16px; border: 0; border-radius: calc(var(--bl-radius) - var(--bl-pad) / 2); background: transparent; color: var(--bl-muted); font: inherit; font-size: var(--bl-size); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 200ms; }
+.bl-stabs[data-variant="underline"] .bl-stabs__tab { padding: 12px 14px; }
+.bl-stabs__tab:hover { color: var(--bl-ink); }
+.bl-stabs__tab[aria-selected="true"] { color: var(--bl-active-ink); }
+.bl-stabs[data-variant="underline"] .bl-stabs__tab[aria-selected="true"] { color: var(--bl-ink); }
+.bl-stabs__tab:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
+.bl-stabs__panel { padding-top: 18px; outline: none; }
+.bl-stabs__panel:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 4px; }
+@media (prefers-reduced-motion: reduce) { .bl-stabs__indicator { transition: none !important; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function SlideTabs({
+  items = [],
+  value,
+  defaultValue,
+  onChange,
+  variant = "pill",
+  stretch = true,
+  activation = "automatic",
+  duration = 380,
+  label = "Tabs",
+  fontSize = 14,
+  gap = 2,
+  padding = 4,
+  radius = 12,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  trackColor = "rgba(255,255,255,0.06)",
+  lineColor = "rgba(255,255,255,0.12)",
+  activeColor = "#f4f4f4",
+  activeTextColor = "#1a1c2c",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultValue ?? items[0]?.id);
+  const selected = value ?? inner;
+  const [focusIndex, setFocusIndex] = useState(null);
+  const scrollerRef = useRef(null);
+  const tabRefs = useRef([]);
+  const indicatorRef = useRef(null);
+  const last = useRef(null);
+  const [fades, setFades] = useState([0, 0]);
+  const selectedIndex = Math.max(0, items.findIndex((item) => item.id === selected));
+  const select = (index) => {
+    const id = items[index].id;
+    if (value === void 0) setInner(id);
+    onChange?.(id, items[index]);
+  };
+  const place = (animate = true) => {
+    const tab = tabRefs.current[selectedIndex];
+    const indicator = indicatorRef.current;
+    if (!tab || !indicator) return;
+    const left = tab.offsetLeft;
+    const right = tab.offsetParent.clientWidth - (tab.offsetLeft + tab.offsetWidth);
+    const prev = last.current;
+    if (!animate || !prev) indicator.style.transition = "none";
+    else {
+      const movingRight = left > prev.left;
+      const lead = `${duration * 0.6}ms cubic-bezier(.3,.8,.3,1)`;
+      const follow = `${duration}ms cubic-bezier(.5,0,.2,1) ${stretch ? duration * 0.18 : 0}ms`;
+      indicator.style.transition = movingRight ? `right ${lead}, left ${follow}` : `left ${lead}, right ${follow}`;
+    }
+    indicator.style.left = `${left}px`;
+    indicator.style.right = `${right}px`;
+    last.current = { left, right };
+  };
+  const updateFades = () => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const next = [el.scrollLeft > 2 ? 28 : 0, el.scrollLeft + el.clientWidth < el.scrollWidth - 2 ? 28 : 0];
+    setFades((prev) => prev[0] === next[0] && prev[1] === next[1] ? prev : next);
+  };
+  useLayoutEffect(() => {
+    place(true);
+    const tab = tabRefs.current[selectedIndex];
+    const scroller = scrollerRef.current;
+    if (tab && scroller && scroller.scrollWidth > scroller.clientWidth) {
+      const target = tab.offsetLeft - (scroller.clientWidth - tab.offsetWidth) / 2;
+      scroller.scrollTo({ left: target, behavior: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+    }
+  }, [selectedIndex, variant]);
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver(() => {
+      place(false);
+      updateFades();
+    });
+    observer.observe(scrollerRef.current);
+    tabRefs.current.forEach((tab) => tab && observer.observe(tab));
+    updateFades();
+    return () => observer.disconnect();
+  }, [items.length, selectedIndex]);
+  const onKeyDown = (event) => {
+    const current = focusIndex ?? selectedIndex;
+    const keys = { ArrowRight: current + 1, ArrowLeft: current - 1, Home: 0, End: items.length - 1 };
+    if (!(event.key in keys)) {
+      if ((event.key === "Enter" || event.key === " ") && activation === "manual" && focusIndex != null) {
+        event.preventDefault();
+        select(focusIndex);
+      }
+      return;
+    }
+    event.preventDefault();
+    const next = (keys[event.key] + items.length) % items.length;
+    setFocusIndex(next);
+    tabRefs.current[next]?.focus();
+    if (activation === "automatic") select(next);
+  };
+  const panel = items[selectedIndex]?.content;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-stabs ${className}`,
+      "data-variant": variant,
+      style: {
+        "--bl-gap": `${gap}px`,
+        "--bl-pad": variant === "pill" ? `${padding}px` : "0px",
+        "--bl-radius": `${radius}px`,
+        "--bl-size": `${fontSize}px`,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-track": trackColor,
+        "--bl-line": lineColor,
+        "--bl-active-bg": activeColor,
+        "--bl-active-ink": activeTextColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        "--bl-fade-l": `${fades[0]}px`,
+        "--bl-fade-r": `${fades[1]}px`,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: scrollerRef, className: "bl-stabs__scroller", onScroll: updateFades, children: /* @__PURE__ */ jsxs("div", { className: "bl-stabs__list", role: "tablist", "aria-label": label, onKeyDown, children: [
+          /* @__PURE__ */ jsx("span", { ref: indicatorRef, className: "bl-stabs__indicator", "aria-hidden": "true" }),
+          items.map((item, index) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (node) => {
+                tabRefs.current[index] = node;
+              },
+              id: `${uid}-tab-${index}`,
+              className: "bl-stabs__tab",
+              role: "tab",
+              type: "button",
+              "aria-selected": index === selectedIndex,
+              "aria-controls": item.content !== void 0 ? `${uid}-panel` : void 0,
+              tabIndex: index === (focusIndex ?? selectedIndex) ? 0 : -1,
+              onClick: () => {
+                setFocusIndex(index);
+                select(index);
+              },
+              onBlur: (event) => !event.currentTarget.parentElement.contains(event.relatedTarget) && setFocusIndex(null),
+              children: [
+                item.icon,
+                item.label
+              ]
+            },
+            item.id
+          ))
+        ] }) }),
+        panel !== void 0 && /* @__PURE__ */ jsx("div", { id: `${uid}-panel`, className: "bl-stabs__panel", role: "tabpanel", "aria-labelledby": `${uid}-tab-${selectedIndex}`, tabIndex: 0, children: panel })
+      ]
+    }
+  );
+}
+export {
+  SlideTabs as default
+};

package/dist/SmartNavbar.d.ts

@@ -0,0 +1,48 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface NavLink {
+    href: string;
+    label: ReactNode;
+}
+export interface SmartNavbarProps {
+    /** Logo area. */
+    brand?: ReactNode;
+    brandHref?: string;
+    links?: NavLink[];
+    /** Buttons on the right (also shown in the mobile menu). */
+    actions?: ReactNode;
+    /** href of the current page; marked with aria-current. */
+    current?: string;
+    /** Turns links into client-side navigation (default navigation is prevented). */
+    onNavigate?: (href: string, link?: NavLink) => void;
+    /** Scroll distance after which the bar becomes a pill, in px. */
+    shrinkAt?: number;
+    /** Hide while scrolling down; scrolling up or focusing a link shows it. */
+    hideOnScroll?: boolean;
+    /** Never hide above this scroll position, in px. */
+    hideAfter?: number;
+    height?: number;
+    pillHeight?: number;
+    pillWidth?: number;
+    /** Gap above the pill, in px. */
+    pillTop?: number;
+    padding?: number;
+    radius?: number;
+    /** Pill backdrop blur, in px. */
+    blur?: number;
+    duration?: number;
+    textColor?: string;
+    mutedColor?: string;
+    /** Bar background while at the top. */
+    topColor?: string;
+    topLineColor?: string;
+    pillColor?: string;
+    lineColor?: string;
+    hoverColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    /** Accessible name of the nav landmark. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SmartNavbar({ brand, brandHref, links, actions, current, onNavigate, shrinkAt, hideOnScroll, hideAfter, height, pillHeight, pillWidth, pillTop, padding, radius, blur, duration, textColor, mutedColor, topColor, topLineColor, pillColor, lineColor, hoverColor, accentColor, fontFamily, label, className, style }: SmartNavbarProps): import("react").JSX.Element;