bits-lab 0.0.0-stage → 0.1.2

package/dist/CommandPalette.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+export interface CommandItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Muted text on the right. */
+    hint?: ReactNode;
+    /** Keys shown as kbd chips, e.g. ["⌘", "S"]. */
+    shortcut?: string[];
+    /** Extra words the search matches (not highlighted). */
+    keywords?: string[];
+    onSelect?: (item: CommandItem) => void;
+    /** Keep the palette open after running this item. */
+    keepOpen?: boolean;
+    /** Turns the item into a nested page. */
+    items?: CommandGroup[];
+    /** Search placeholder while this item's page is open. */
+    placeholder?: string;
+}
+export interface CommandGroup {
+    heading?: string;
+    items: CommandItem[];
+}
+export interface FuzzyResult {
+    score: number;
+    /** Indices of matched characters in the text. */
+    indices: number[];
+}
+export interface CommandPaletteProps {
+    groups?: CommandGroup[];
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** ⌘/Ctrl + this key toggles the palette; null disables it. */
+    hotkey?: string | null;
+    placeholder?: string;
+    emptyText?: ReactNode;
+    /** localStorage key for recently used items; null disables recents. */
+    recentKey?: string | null;
+    maxRecent?: number;
+    /** Width, in px. */
+    width?: number;
+    /** Max list height before it scrolls, in px. */
+    maxListHeight?: number;
+    radius?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    activeColor?: string;
+    accentColor?: string;
+    chipColor?: string;
+    backdropColor?: string;
+    fontFamily?: string;
+    /** Key hints footer. */
+    showFooter?: boolean;
+}
+export declare function fuzzyMatch(query: string, text: string): FuzzyResult | null;
+export default function CommandPalette({ groups, open: controlledOpen, onOpenChange, hotkey, placeholder, emptyText, recentKey, maxRecent, width, maxListHeight, radius, backgroundColor, textColor, mutedColor, lineColor, activeColor, accentColor, chipColor, backdropColor, fontFamily, showFooter }: CommandPaletteProps): import("react").ReactPortal | null;

package/dist/CommandPalette.js

@@ -0,0 +1,349 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const STYLE_ID = "bl-command-palette";
+const CSS = `
+.bl-cmdk__backdrop { position: fixed; inset: 0; z-index: 1300; background: var(--bl-backdrop); animation: bl-cmdk-fade 160ms ease; }
+.bl-cmdk { position: fixed; z-index: 1301; top: 14vh; left: 50%; width: min(var(--bl-w), calc(100vw - 24px)); transform: translateX(-50%); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 1px var(--bl-line), 0 30px 80px -20px rgba(0,0,0,0.7); animation: bl-cmdk-in 200ms cubic-bezier(.2,.9,.25,1.1); }
+@keyframes bl-cmdk-in { from { opacity: 0; transform: translateX(-50%) scale(0.96); } }
+@keyframes bl-cmdk-fade { from { opacity: 0; } }
+.bl-cmdk__top { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--bl-line); }
+.bl-cmdk__crumb { flex: 0 0 auto; padding: 4px 8px; border-radius: 6px; background: var(--bl-chip); color: var(--bl-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
+.bl-cmdk__input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; outline: none; }
+.bl-cmdk__input::placeholder { color: var(--bl-muted); }
+.bl-cmdk__list { height: var(--bl-list-h); max-height: var(--bl-max-h); overflow-y: auto; overscroll-behavior: contain; transition: height 180ms cubic-bezier(.2,.8,.2,1); scroll-padding: 8px; }
+.bl-cmdk__inner { padding: 6px; }
+.bl-cmdk__heading { padding: 10px 10px 6px; color: var(--bl-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
+.bl-cmdk__item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 10px; border-radius: calc(var(--bl-radius) * 0.6); cursor: pointer; user-select: none; }
+.bl-cmdk__item[aria-selected="true"] { background: var(--bl-active); }
+.bl-cmdk__item[aria-selected="true"] .bl-cmdk__icon { color: var(--bl-accent); }
+.bl-cmdk__icon { flex: 0 0 auto; display: grid; place-items: center; width: 24px; color: var(--bl-muted); }
+.bl-cmdk__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bl-cmdk__label mark { background: none; color: var(--bl-accent); font-weight: 700; }
+.bl-cmdk__hint { color: var(--bl-muted); font-size: 13px; white-space: nowrap; }
+.bl-cmdk__keys { display: flex; gap: 4px; }
+.bl-cmdk__keys kbd { min-width: 20px; padding: 2px 5px; border-radius: 5px; background: var(--bl-chip); color: var(--bl-muted); font: 600 11px/16px var(--bl-font); text-align: center; }
+.bl-cmdk__empty { padding: 28px 16px; color: var(--bl-muted); text-align: center; }
+.bl-cmdk__foot { display: flex; gap: 14px; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--bl-line); color: var(--bl-muted); font-size: 12px; }
+.bl-cmdk__foot kbd { margin-right: 4px; padding: 1px 5px; border-radius: 4px; background: var(--bl-chip); font: inherit; }
+@media (prefers-reduced-motion: reduce) { .bl-cmdk, .bl-cmdk__backdrop { animation: none; } .bl-cmdk__list { 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);
+  }, []);
+}
+function fuzzyMatch(query, text) {
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+  if (!q) return { score: 0, indices: [] };
+  let score = 0;
+  let from = 0;
+  let previous = -2;
+  const indices = [];
+  for (const char of q) {
+    if (char === " ") continue;
+    const at = t.indexOf(char, from);
+    if (at < 0) return null;
+    const wordStart = at === 0 || /[\s\-_/.]/.test(t[at - 1]);
+    score += 1 + (at === previous + 1 ? 3 : 0) + (wordStart ? 2 : 0) - at * 0.01;
+    indices.push(at);
+    previous = at;
+    from = at + 1;
+  }
+  if (t.startsWith(q)) score += 4;
+  return { score, indices };
+}
+function Highlight({ text, indices }) {
+  if (!indices?.length) return text;
+  const set = new Set(indices);
+  const parts = [];
+  let run = "";
+  let marked = false;
+  [...text].forEach((char, i) => {
+    const hit = set.has(i);
+    if (hit !== marked && run) {
+      parts.push(marked ? /* @__PURE__ */ jsx("mark", { children: run }, i) : run);
+      run = "";
+    }
+    marked = hit;
+    run += char;
+  });
+  if (run) parts.push(marked ? /* @__PURE__ */ jsx("mark", { children: run }, "end") : run);
+  return parts;
+}
+const readRecent = (key) => {
+  try {
+    return JSON.parse(localStorage.getItem(key)) ?? [];
+  } catch {
+    return [];
+  }
+};
+const writeRecent = (key, ids) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(ids));
+  } catch {
+  }
+};
+function collect(groups, map = /* @__PURE__ */ new Map()) {
+  for (const group of groups) {
+    for (const item of group.items) {
+      map.set(item.id, item);
+      if (item.items) collect(item.items, map);
+    }
+  }
+  return map;
+}
+function CommandPalette({
+  groups = [],
+  open: controlledOpen,
+  onOpenChange,
+  hotkey = "k",
+  placeholder = "Type a command or search\u2026",
+  emptyText = "No results found.",
+  recentKey = "bl-command-palette-recent",
+  maxRecent = 4,
+  width = 620,
+  maxListHeight = 360,
+  radius = 14,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.1)",
+  activeColor = "rgba(115,239,247,0.12)",
+  accentColor = "#73eff7",
+  chipColor = "rgba(255,255,255,0.08)",
+  backdropColor = "rgba(8,8,16,0.55)",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  showFooter = true
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [innerOpen, setInnerOpen] = useState(false);
+  const open = controlledOpen ?? innerOpen;
+  const [query, setQuery] = useState("");
+  const [pages, setPages] = useState([]);
+  const [active, setActive] = useState(0);
+  const [recent, setRecent] = useState([]);
+  const [listHeight, setListHeight] = useState(0);
+  const inputRef = useRef(null);
+  const innerRef = useRef(null);
+  const listRef = useRef(null);
+  const restoreRef = useRef(null);
+  const setOpen = (next) => {
+    if (controlledOpen === void 0) setInnerOpen(next);
+    onOpenChange?.(next);
+  };
+  const openRef = useRef(open);
+  openRef.current = open;
+  useEffect(() => {
+    if (!hotkey) return;
+    const onKey = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === hotkey) {
+        event.preventDefault();
+        setOpen(!openRef.current);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [hotkey]);
+  useEffect(() => {
+    if (!open) return;
+    restoreRef.current = document.activeElement;
+    setQuery("");
+    setPages([]);
+    setActive(0);
+    if (recentKey) setRecent(readRecent(recentKey));
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    inputRef.current?.focus({ preventScroll: true });
+    return () => {
+      document.body.style.overflow = previous;
+      restoreRef.current?.focus?.({ preventScroll: true });
+    };
+  }, [open, recentKey]);
+  const allItems = useMemo(() => collect(groups), [groups]);
+  const page = pages[pages.length - 1];
+  const pageGroups = page ? page.items : groups;
+  const results = useMemo(() => {
+    const q = query.trim();
+    const out = [];
+    if (!q) {
+      if (!page && recent.length) {
+        const items = recent.map((id) => allItems.get(id)).filter(Boolean);
+        if (items.length) out.push({ heading: "Recent", items: items.map((item) => ({ item, indices: [] })) });
+      }
+      pageGroups.forEach((group) => out.push({ heading: group.heading, items: group.items.map((item) => ({ item, indices: [] })) }));
+      return out;
+    }
+    pageGroups.forEach((group) => {
+      const matches = group.items.map((item) => {
+        const label = fuzzyMatch(q, item.label);
+        const keyword = (item.keywords ?? []).map((k) => fuzzyMatch(q, k)).filter(Boolean).sort((a, b) => b.score - a.score)[0];
+        if (!label && !keyword) return null;
+        return { item, indices: label?.indices ?? [], score: Math.max(label?.score ?? -Infinity, (keyword?.score ?? -Infinity) * 0.8) };
+      }).filter(Boolean).sort((a, b) => b.score - a.score);
+      if (matches.length) out.push({ heading: group.heading, items: matches, best: matches[0].score });
+    });
+    return out.sort((a, b) => b.best - a.best);
+  }, [query, pageGroups, page, recent, allItems]);
+  const flat = results.flatMap((group) => group.items);
+  const activeIndex = Math.min(active, Math.max(0, flat.length - 1));
+  useEffect(() => setActive(0), [query, pages.length]);
+  useLayoutEffect(() => {
+    if (!open || !innerRef.current) return;
+    const observer = new ResizeObserver(() => setListHeight(innerRef.current?.offsetHeight ?? 0));
+    observer.observe(innerRef.current);
+    setListHeight(innerRef.current.offsetHeight);
+    return () => observer.disconnect();
+  }, [open]);
+  useEffect(() => {
+    listRef.current?.querySelector(`#${uid}-opt-${activeIndex}`)?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, uid]);
+  const run = (entry) => {
+    if (!entry) return;
+    const { item } = entry;
+    if (item.items) {
+      setPages((prev) => [...prev, item]);
+      setQuery("");
+      return;
+    }
+    if (recentKey) {
+      const next = [item.id, ...recent.filter((id) => id !== item.id)].slice(0, maxRecent);
+      setRecent(next);
+      writeRecent(recentKey, next);
+    }
+    item.onSelect?.(item);
+    if (!item.keepOpen) setOpen(false);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!flat.length) return;
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      setActive((activeIndex + step + flat.length) % flat.length);
+    } else if (event.key === "Home" && !query) {
+      event.preventDefault();
+      setActive(0);
+    } else if (event.key === "End" && !query) {
+      event.preventDefault();
+      setActive(flat.length - 1);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      run(flat[activeIndex]);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (pages.length) setPages((prev) => prev.slice(0, -1));
+      else setOpen(false);
+    } else if (event.key === "Backspace" && !query && pages.length) {
+      event.preventDefault();
+      setPages((prev) => prev.slice(0, -1));
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+    }
+  };
+  if (!open || typeof document === "undefined") return null;
+  let optionIndex = -1;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          "--bl-w": `${width}px`,
+          "--bl-radius": `${radius}px`,
+          "--bl-bg": backgroundColor,
+          "--bl-ink": textColor,
+          "--bl-muted": mutedColor,
+          "--bl-line": lineColor,
+          "--bl-active": activeColor,
+          "--bl-accent": accentColor,
+          "--bl-chip": chipColor,
+          "--bl-backdrop": backdropColor,
+          "--bl-font": fontFamily,
+          "--bl-max-h": `${maxListHeight}px`,
+          "--bl-list-h": `${listHeight}px`
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bl-cmdk__backdrop", onClick: () => setOpen(false) }),
+          /* @__PURE__ */ jsxs("div", { className: "bl-cmdk", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bl-cmdk__top", children: [
+              pages.map((p) => /* @__PURE__ */ jsx("span", { className: "bl-cmdk__crumb", children: p.label }, p.id)),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  className: "bl-cmdk__input",
+                  role: "combobox",
+                  "aria-expanded": "true",
+                  "aria-controls": `${uid}-list`,
+                  "aria-activedescendant": flat.length ? `${uid}-opt-${activeIndex}` : void 0,
+                  "aria-autocomplete": "list",
+                  autoComplete: "off",
+                  spellCheck: false,
+                  placeholder: page?.placeholder ?? placeholder,
+                  value: query,
+                  onChange: (event) => setQuery(event.target.value),
+                  onKeyDown
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { ref: listRef, className: "bl-cmdk__list", id: `${uid}-list`, role: "listbox", "aria-label": "Results", children: /* @__PURE__ */ jsxs("div", { ref: innerRef, className: "bl-cmdk__inner", children: [
+              !flat.length && /* @__PURE__ */ jsx("div", { className: "bl-cmdk__empty", children: emptyText }),
+              results.map((group) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": group.heading, children: [
+                group.heading && /* @__PURE__ */ jsx("div", { className: "bl-cmdk__heading", "aria-hidden": "true", children: group.heading }),
+                group.items.map((entry) => {
+                  optionIndex += 1;
+                  const index = optionIndex;
+                  const { item } = entry;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      id: `${uid}-opt-${index}`,
+                      className: "bl-cmdk__item",
+                      role: "option",
+                      "aria-selected": index === activeIndex,
+                      onPointerMove: () => index !== activeIndex && setActive(index),
+                      onClick: () => run(entry),
+                      children: [
+                        item.icon && /* @__PURE__ */ jsx("span", { className: "bl-cmdk__icon", children: item.icon }),
+                        /* @__PURE__ */ jsx("span", { className: "bl-cmdk__label", children: /* @__PURE__ */ jsx(Highlight, { text: item.label, indices: entry.indices }) }),
+                        item.hint && /* @__PURE__ */ jsx("span", { className: "bl-cmdk__hint", children: item.hint }),
+                        item.items && /* @__PURE__ */ jsx("span", { className: "bl-cmdk__hint", "aria-hidden": "true", children: "\u203A" }),
+                        item.shortcut && /* @__PURE__ */ jsx("span", { className: "bl-cmdk__keys", "aria-label": `Shortcut ${item.shortcut.join(" ")}`, children: item.shortcut.map((key) => /* @__PURE__ */ jsx("kbd", { children: key }, key)) })
+                      ]
+                    },
+                    `${group.heading}-${item.id}`
+                  );
+                })
+              ] }, group.heading ?? "group"))
+            ] }) }),
+            showFooter && /* @__PURE__ */ jsxs("div", { className: "bl-cmdk__foot", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("kbd", { children: "\u2191\u2193" }),
+                "navigate"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("kbd", { children: "\u21B5" }),
+                "select"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("kbd", { children: "esc" }),
+                pages.length ? "back" : "close"
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  CommandPalette as default,
+  fuzzyMatch
+};

package/dist/CompareSlider.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface CompareSliderProps {
+    /** Layer shown on the "before" side: an image, video or live UI. */
+    before?: ReactNode;
+    /** Layer revealed on the "after" side. */
+    after?: ReactNode;
+    /** Corner labels; they hide when their side is almost covered. Empty to hide. */
+    beforeLabel?: string;
+    afterLabel?: string;
+    /** Uncontrolled starting position, in percent. */
+    defaultPosition?: number;
+    /** Controlled position, in percent. */
+    position?: number;
+    onPositionChange?: (position: number) => void;
+    /** Split top/bottom instead of left/right. */
+    vertical?: boolean;
+    /** Follow the mouse without dragging (touch still drags). */
+    hover?: boolean;
+    aspectRatio?: string;
+    radius?: number;
+    lineColor?: string;
+    lineWidth?: number;
+    handleInk?: string;
+    focusColor?: string;
+    /** Arrow-key step, in percent. */
+    step?: number;
+    fontFamily?: string;
+    /** Accessible name of the slider. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CompareSlider({ before, after, beforeLabel, afterLabel, defaultPosition, position: controlled, onPositionChange, vertical, hover, aspectRatio, radius, lineColor, lineWidth, handleInk, focusColor, step, fontFamily, label, className, style }: CompareSliderProps): import("react").JSX.Element;

package/dist/CompareSlider.js

@@ -0,0 +1,152 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-compare";
+const CSS = `
+.bl-cmp { position: relative; width: 100%; aspect-ratio: var(--bl-ratio); overflow: hidden; border-radius: var(--bl-radius); user-select: none; -webkit-user-select: none; touch-action: var(--bl-touch); cursor: var(--bl-cursor); background: #000; }
+.bl-cmp__layer { position: absolute; inset: 0; }
+.bl-cmp__layer > img, .bl-cmp__layer > video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
+.bl-cmp__after { clip-path: inset(0 0 0 var(--bl-pos)); }
+.bl-cmp[data-vertical] .bl-cmp__after { clip-path: inset(var(--bl-pos) 0 0 0); }
+.bl-cmp__label { position: absolute; top: 12px; padding: 5px 9px; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; font: 600 11px/1 var(--bl-font); letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; transition: opacity 200ms; }
+.bl-cmp__label[data-side="before"] { left: 12px; opacity: var(--bl-before-o); }
+.bl-cmp__label[data-side="after"] { right: 12px; opacity: var(--bl-after-o); }
+.bl-cmp[data-vertical] .bl-cmp__label[data-side="after"] { top: auto; bottom: 12px; right: auto; left: 12px; }
+.bl-cmp__divider { position: absolute; top: 0; bottom: 0; left: var(--bl-pos); width: var(--bl-line-w); background: var(--bl-line); transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,0.4); }
+.bl-cmp[data-vertical] .bl-cmp__divider { top: var(--bl-pos); bottom: auto; left: 0; right: 0; width: auto; height: var(--bl-line-w); transform: translateY(-50%); }
+.bl-cmp__handle { position: absolute; top: 50%; left: var(--bl-pos); display: grid; place-items: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--bl-line); color: var(--bl-handle-ink); box-shadow: 0 4px 16px rgba(0,0,0,0.35); cursor: grab; outline: none; transition: transform 150ms; }
+.bl-cmp[data-vertical] .bl-cmp__handle { top: var(--bl-pos); left: 50%; }
+.bl-cmp[data-vertical] .bl-cmp__handle svg { transform: rotate(90deg); }
+.bl-cmp__handle:focus-visible { box-shadow: 0 0 0 3px var(--bl-focus), 0 4px 16px rgba(0,0,0,0.35); }
+.bl-cmp[data-dragging] .bl-cmp__handle { transform: scale(1.1); cursor: grabbing; }
+@media (prefers-reduced-motion: reduce) { .bl-cmp__handle, .bl-cmp__label { 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 clamp = (value) => Math.min(100, Math.max(0, value));
+function CompareSlider({
+  before,
+  after,
+  beforeLabel = "Before",
+  afterLabel = "After",
+  defaultPosition = 50,
+  position: controlled,
+  onPositionChange,
+  vertical = false,
+  hover = false,
+  aspectRatio = "16 / 10",
+  radius = 14,
+  lineColor = "#f4f4f4",
+  lineWidth = 3,
+  handleInk = "#1a1c2c",
+  focusColor = "#73eff7",
+  step = 2,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label = "Comparison slider",
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const [inner, setInner] = useState(defaultPosition);
+  const [dragging, setDragging] = useState(false);
+  const position = controlled ?? inner;
+  const latest = useRef(position);
+  latest.current = position;
+  const set = (value) => {
+    const next = clamp(value);
+    latest.current = next;
+    if (controlled === void 0) setInner(next);
+    onPositionChange?.(next);
+  };
+  const fromPointer = (event) => {
+    const rect = ref.current.getBoundingClientRect();
+    return vertical ? (event.clientY - rect.top) / rect.height * 100 : (event.clientX - rect.left) / rect.width * 100;
+  };
+  const onPointerDown = (event) => {
+    if (hover || event.pointerType === "mouse" && event.button !== 0) return;
+    ref.current.setPointerCapture(event.pointerId);
+    setDragging(true);
+    set(fromPointer(event));
+  };
+  const onPointerMove = (event) => {
+    if (dragging || hover && event.pointerType === "mouse") set(fromPointer(event));
+  };
+  const onPointerUp = () => setDragging(false);
+  const onKeyDown = (event) => {
+    const position2 = latest.current;
+    const keys = {
+      ArrowLeft: position2 - step,
+      ArrowDown: vertical ? position2 + step : position2 - step,
+      ArrowRight: position2 + step,
+      ArrowUp: vertical ? position2 - step : position2 + step,
+      PageDown: position2 - 10,
+      PageUp: position2 + 10,
+      Home: 0,
+      End: 100
+    };
+    if (!(event.key in keys)) return;
+    event.preventDefault();
+    set(keys[event.key]);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `bl-cmp ${className}`,
+      "data-vertical": vertical || void 0,
+      "data-dragging": dragging || void 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      style: {
+        "--bl-pos": `${position}%`,
+        "--bl-ratio": aspectRatio,
+        "--bl-radius": `${radius}px`,
+        "--bl-line": lineColor,
+        "--bl-line-w": `${lineWidth}px`,
+        "--bl-handle-ink": handleInk,
+        "--bl-focus": focusColor,
+        "--bl-font": fontFamily,
+        "--bl-touch": vertical ? "pan-x" : "pan-y",
+        "--bl-cursor": vertical ? "row-resize" : "col-resize",
+        "--bl-before-o": position > 12 ? 1 : 0,
+        "--bl-after-o": position < 88 ? 1 : 0,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-cmp__layer", children: before }),
+        /* @__PURE__ */ jsx("div", { className: "bl-cmp__layer bl-cmp__after", children: after }),
+        beforeLabel && /* @__PURE__ */ jsx("span", { className: "bl-cmp__label", "data-side": "before", "aria-hidden": "true", children: beforeLabel }),
+        afterLabel && /* @__PURE__ */ jsx("span", { className: "bl-cmp__label", "data-side": "after", "aria-hidden": "true", children: afterLabel }),
+        /* @__PURE__ */ jsx("div", { className: "bl-cmp__divider", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bl-cmp__handle",
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-orientation": vertical ? "vertical" : "horizontal",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(position),
+            "aria-valuetext": `${Math.round(position)}% ${beforeLabel || "before"}, ${100 - Math.round(position)}% ${afterLabel || "after"}`,
+            onKeyDown,
+            children: /* @__PURE__ */ jsx("svg", { width: "20", height: "14", viewBox: "0 0 20 14", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 1 0 7l6 6zM14 1l6 6-6 6z" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CompareSlider as default
+};

package/dist/Confetti.d.ts

@@ -0,0 +1,61 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type ConfettiPreset = 'burst' | 'cannon' | 'fireworks' | 'fountain' | 'rain';
+interface PresetValues {
+    /** Number of particles. */
+    count: number;
+    /** Cone width, in degrees. */
+    spread: number;
+    /** Launch direction, in degrees from the right (90 = up). */
+    angle: number;
+    /** Launch speed. */
+    velocity: number;
+    /** Fall speed multiplier. */
+    gravity: number;
+    /** Air drag per frame (0–1; lower slows faster). */
+    decay: number;
+    /** Lifetime, in frames. */
+    ticks: number;
+    /** Spawn across the top of the window instead of at the origin. */
+    fromTop?: boolean;
+}
+/** "square", "circle" or "strip" for paper; any other string draws as text (emoji); an image URL or element draws a sprite. */
+export type ConfettiShape = 'square' | 'circle' | 'strip' | (string & {}) | HTMLImageElement;
+export interface ConfettiOptions extends Partial<PresetValues> {
+    /** Element to burst from, or a point (0–1 fractions of the window, or px). Defaults to center. */
+    origin?: Element | {
+        x: number;
+        y: number;
+    } | null;
+    /** Starting values for the physics options. */
+    preset?: ConfettiPreset;
+    /** Paper colors. */
+    colors?: string[];
+    shapes?: ConfettiShape[];
+    /** Base particle size, in px. */
+    size?: number;
+    /** Overall scale for size, speed and gravity. */
+    scalar?: number;
+    /** Sideways drift per frame. */
+    drift?: number;
+    /** Canvas z-index. */
+    zIndex?: number;
+    /** Draw image sprites without smoothing. */
+    pixelated?: boolean;
+    /** Fire even under reduced motion (skipped by default). */
+    force?: boolean;
+}
+export declare function confetti(options?: ConfettiOptions): void;
+export declare namespace confetti {
+    var reset: () => void;
+}
+export interface ConfettiProps extends ConfettiOptions {
+    /** The element bursts come from. */
+    children?: ReactNode;
+    /** When to fire. */
+    trigger?: 'click' | 'hover' | 'mount';
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Confetti({ children, trigger, disabled, className, style, ...options }: ConfettiProps): import("react").JSX.Element;
+export {};