bits-lab 0.0.0-stage → 0.1.2

package/dist/ToggleGroup.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-toggle-group";
+const CSS = `
+.bl-tg { position: relative; display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: var(--bl-pad); gap: var(--bl-gap); border-radius: var(--bl-radius); background: var(--bl-track); box-shadow: inset 0 0 0 1px var(--bl-line); font-family: var(--bl-font); isolation: isolate; }
+.bl-tg[data-full] { display: flex; width: 100%; }
+.bl-tg[data-full] .bl-tg__item { flex: 1 0 auto; }
+.bl-tg__thumb { position: absolute; z-index: 0; top: var(--bl-pad); bottom: var(--bl-pad); left: 0; border-radius: var(--bl-inner-radius); background: var(--bl-thumb); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px -6px rgba(0,0,0,0.5); transition: transform var(--bl-dur) cubic-bezier(.3,1.25,.5,1), width var(--bl-dur) cubic-bezier(.3,1.25,.5,1); }
+.bl-tg__thumb[data-instant] { transition: none; }
+.bl-tg__item { position: relative; z-index: 1; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: var(--bl-h); padding: 0 var(--bl-item-pad); border: 0; border-radius: var(--bl-inner-radius); background: transparent; color: var(--bl-muted); font: inherit; font-size: var(--bl-size); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 180ms, background-color 180ms, border-radius 180ms; }
+.bl-tg__item:hover:not(:disabled) { color: var(--bl-ink); }
+.bl-tg__item:disabled { opacity: 0.4; cursor: not-allowed; }
+.bl-tg__item:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; z-index: 2; }
+.bl-tg[data-type="single"] .bl-tg__item[aria-checked="true"] { color: var(--bl-thumb-ink); }
+.bl-tg[data-type="multiple"] .bl-tg__item[aria-pressed="true"] { background: var(--bl-thumb); color: var(--bl-thumb-ink); animation: bl-tg-pop 260ms cubic-bezier(.3,1.4,.5,1); }
+.bl-tg[data-type="multiple"] .bl-tg__item[data-join-left] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.bl-tg[data-type="multiple"] .bl-tg__item[data-join-right] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.bl-tg[data-type="multiple"] .bl-tg__item[data-join-right]::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--bl-gap) * -1); width: var(--bl-gap); background: var(--bl-thumb); }
+@keyframes bl-tg-pop { 40% { transform: scale(0.94); } }
+@media (prefers-reduced-motion: reduce) { .bl-tg__thumb, .bl-tg__item { transition: none; animation: 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 ToggleGroup({
+  items = [],
+  type = "single",
+  value,
+  defaultValue,
+  onChange,
+  label = "Options",
+  fullWidth = false,
+  size = "md",
+  duration = 340,
+  radius = 12,
+  gap = 2,
+  padding = 4,
+  trackColor = "rgba(255,255,255,0.06)",
+  lineColor = "rgba(255,255,255,0.1)",
+  thumbColor = "#f4f4f4",
+  thumbTextColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const multiple = type === "multiple";
+  const [inner, setInner] = useState(() => defaultValue ?? (multiple ? [] : items.find((item) => !item.disabled)?.value));
+  const selected = value !== void 0 ? value : inner;
+  const selectedSet = new Set(multiple ? selected ?? [] : [selected]);
+  const [focusIndex, setFocusIndex] = useState(null);
+  const refs = useRef([]);
+  const thumbRef = useRef(null);
+  const placed = useRef(false);
+  const commit = (next) => {
+    if (value === void 0) setInner(next);
+    onChange?.(next);
+  };
+  const toggle = (item) => {
+    if (item.disabled) return;
+    if (!multiple) {
+      if (item.value !== selected) commit(item.value);
+      return;
+    }
+    const current = selected ?? [];
+    commit(current.includes(item.value) ? current.filter((v) => v !== item.value) : items.filter((i) => i.value === item.value || current.includes(i.value)).map((i) => i.value));
+  };
+  const selectedIndex = multiple ? -1 : items.findIndex((item) => item.value === selected);
+  useLayoutEffect(() => {
+    const thumb = thumbRef.current;
+    const target = refs.current[selectedIndex];
+    if (!thumb) return void 0;
+    const place = () => {
+      const node = refs.current[selectedIndex];
+      if (!node) {
+        thumb.style.opacity = "0";
+        return;
+      }
+      thumb.style.opacity = "1";
+      thumb.style.width = `${node.offsetWidth}px`;
+      thumb.style.transform = `translateX(${node.offsetLeft}px)`;
+    };
+    if (!placed.current) thumb.setAttribute("data-instant", "");
+    place();
+    if (!placed.current) {
+      placed.current = true;
+      requestAnimationFrame(() => thumb.removeAttribute("data-instant"));
+    }
+    const observer = new ResizeObserver(() => {
+      thumb.setAttribute("data-instant", "");
+      place();
+      requestAnimationFrame(() => thumb.removeAttribute("data-instant"));
+    });
+    if (target) observer.observe(target);
+    if (thumb.parentElement) observer.observe(thumb.parentElement);
+    return () => observer.disconnect();
+  }, [selectedIndex, items.length, size]);
+  const enabled = items.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0);
+  const tabStop = focusIndex ?? (multiple ? enabled[0] : selectedIndex >= 0 ? selectedIndex : enabled[0]);
+  const onKeyDown = (event, index) => {
+    const position = enabled.indexOf(index);
+    const keys = { ArrowRight: position + 1, ArrowDown: position + 1, ArrowLeft: position - 1, ArrowUp: position - 1, Home: 0, End: enabled.length - 1 };
+    if (!(event.key in keys)) return;
+    event.preventDefault();
+    const next = enabled[(keys[event.key] + enabled.length) % enabled.length];
+    setFocusIndex(next);
+    refs.current[next]?.focus();
+    if (!multiple) toggle(items[next]);
+  };
+  const heights = { sm: 30, md: 38, lg: 46 };
+  const fontSizes = { sm: 13, md: 14, lg: 15 };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-tg ${className}`,
+      role: multiple ? "group" : "radiogroup",
+      "aria-label": label,
+      "data-type": type,
+      "data-full": fullWidth || void 0,
+      style: {
+        "--bl-h": `${heights[size] ?? heights.md}px`,
+        "--bl-size": `${fontSizes[size] ?? fontSizes.md}px`,
+        "--bl-item-pad": size === "sm" ? "10px" : "14px",
+        "--bl-pad": `${padding}px`,
+        "--bl-gap": `${gap}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-inner-radius": `${Math.max(0, radius - padding)}px`,
+        "--bl-dur": `${duration}ms`,
+        "--bl-track": trackColor,
+        "--bl-line": lineColor,
+        "--bl-thumb": thumbColor,
+        "--bl-thumb-ink": thumbTextColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        !multiple && /* @__PURE__ */ jsx("span", { ref: thumbRef, className: "bl-tg__thumb", "aria-hidden": "true" }),
+        items.map((item, index) => {
+          const on = selectedSet.has(item.value);
+          const joinLeft = multiple && on && index > 0 && selectedSet.has(items[index - 1].value);
+          const joinRight = multiple && on && index < items.length - 1 && selectedSet.has(items[index + 1].value);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (node) => {
+                refs.current[index] = node;
+              },
+              type: "button",
+              className: "bl-tg__item",
+              role: multiple ? void 0 : "radio",
+              "aria-checked": multiple ? void 0 : on,
+              "aria-pressed": multiple ? on : void 0,
+              "aria-label": item.ariaLabel,
+              disabled: item.disabled,
+              tabIndex: index === tabStop ? 0 : -1,
+              "data-join-left": joinLeft || void 0,
+              "data-join-right": joinRight || void 0,
+              onClick: () => {
+                setFocusIndex(index);
+                toggle(item);
+              },
+              onKeyDown: (event) => onKeyDown(event, index),
+              onBlur: (event) => !event.currentTarget.parentElement?.contains(event.relatedTarget) && setFocusIndex(null),
+              children: [
+                item.icon,
+                item.label
+              ]
+            },
+            item.value
+          );
+        })
+      ]
+    }
+  );
+}
+export {
+  ToggleGroup as default
+};

package/dist/ToggleKit.d.ts

@@ -0,0 +1,70 @@
+import { type CSSProperties, type ReactNode, type InputHTMLAttributes, type ChangeEvent, type ButtonHTMLAttributes } from 'react';
+export type ToggleSize = 'sm' | 'md' | 'lg';
+type InputRest = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'color' | 'checked' | 'defaultChecked' | 'onChange' | 'value' | 'name' | 'disabled' | 'className' | 'style'>;
+interface ToggleBase {
+    label?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    size?: ToggleSize;
+    /** Accent color for this control (sets --bl-tk-accent). */
+    color?: string;
+    /** Submitted with the form, like a plain input. */
+    name?: string;
+    value?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface SwitchProps extends ToggleBase, InputRest {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export interface CheckboxProps extends SwitchProps {
+    /** Shows a dash; set for "some selected" parents. */
+    indeterminate?: boolean;
+}
+export interface RadioProps extends ToggleBase, InputRest {
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export interface RadioOption {
+    value: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    options?: RadioOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+    /** Rendered as the fieldset legend. */
+    label?: ReactNode;
+    name?: string;
+    orientation?: 'vertical' | 'horizontal';
+    size?: ToggleSize;
+    color?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Switch({ checked, defaultChecked, onCheckedChange, label, description, disabled, size, color, name, value, className, style, ...rest }: SwitchProps): import("react").JSX.Element;
+export declare function Checkbox({ checked, defaultChecked, onCheckedChange, indeterminate, label, description, disabled, size, color, name, value, className, style, ...rest }: CheckboxProps): import("react").JSX.Element;
+export declare function Radio({ checked, onChange, label, description, disabled, size, color, name, value, className, style, ...rest }: RadioProps): import("react").JSX.Element;
+export declare function RadioGroup({ options, value, defaultValue, onValueChange, label, name, orientation, size, color, disabled, className, style }: RadioGroupProps): import("react").JSX.Element;
+export interface NotifyBellProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type' | 'style' | 'color'> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** The button's name; shown beside the bell unless showLabel is false. */
+    label?: string;
+    showLabel?: boolean;
+    disabled?: boolean;
+    size?: ToggleSize;
+    /** Accent colour when on. */
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function NotifyBell({ pressed, defaultPressed, onPressedChange, label, showLabel, disabled, size, color, className, style, ...rest }: NotifyBellProps): import("react").JSX.Element;
+export default Switch;

package/dist/ToggleKit.js

@@ -0,0 +1,229 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-toggle-kit";
+const CSS = `
+.bl-tk { --tk-accent: var(--bl-tk-accent, #73eff7); --tk-ink: var(--bl-tk-ink, #f4f4f4); --tk-muted: var(--bl-tk-muted, #94b0c2); --tk-track: var(--bl-tk-track, #333c57); --tk-on-ink: var(--bl-tk-on-ink, #1a1c2c); --tk-size: 22px; position: relative; display: inline-flex; align-items: flex-start; gap: 10px; color: var(--tk-ink); font-family: var(--bl-tk-font, ui-sans-serif, system-ui, sans-serif); font-size: 14px; line-height: 1.4; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.bl-tk[data-size="sm"] { --tk-size: 18px; font-size: 13px; }
+.bl-tk[data-size="lg"] { --tk-size: 26px; font-size: 15px; }
+.bl-tk[data-disabled] { opacity: 0.45; cursor: not-allowed; }
+.bl-tk__input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
+.bl-tk__text { display: grid; gap: 2px; padding-top: calc((var(--tk-size) - 1.4em) / 2); }
+.bl-tk__desc { color: var(--tk-muted); font-size: 0.92em; }
+.bl-tk__input:focus-visible + .bl-tk__control { outline: 2px solid var(--tk-accent); outline-offset: 3px; }
+
+/* Switch */
+.bl-tk__switch { position: relative; flex: 0 0 auto; width: calc(var(--tk-size) * 1.8); height: var(--tk-size); border-radius: 999px; background: var(--tk-track); transition: background-color 220ms cubic-bezier(.2,.9,.25,1); }
+.bl-tk__thumb { position: absolute; top: 3px; left: 3px; width: calc(var(--tk-size) - 6px); height: calc(var(--tk-size) - 6px); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: left 320ms cubic-bezier(.3,1.35,.5,1), width 160ms cubic-bezier(.2,.9,.25,1); }
+.bl-tk__input:checked + .bl-tk__switch { background: var(--tk-accent); }
+.bl-tk__input:checked + .bl-tk__switch .bl-tk__thumb { left: calc(100% - var(--tk-size) + 3px); }
+.bl-tk:active .bl-tk__input:not(:disabled) + .bl-tk__switch .bl-tk__thumb { width: calc(var(--tk-size) * 1.12); }
+.bl-tk:active .bl-tk__input:checked:not(:disabled) + .bl-tk__switch .bl-tk__thumb { left: calc(100% - var(--tk-size) * 1.12 - 3px); }
+
+/* Checkbox */
+.bl-tk__box { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: var(--tk-size); height: var(--tk-size); border-radius: calc(var(--tk-size) * 0.28); background: transparent; box-shadow: inset 0 0 0 2px var(--tk-track); color: var(--tk-on-ink); transition: background-color 160ms, box-shadow 160ms; animation: bl-tk-pop-off 260ms cubic-bezier(.3,1.35,.5,1); }
+.bl-tk__box svg { width: 70%; height: 70%; overflow: visible; }
+.bl-tk__check, .bl-tk__dash { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 220ms cubic-bezier(.2,.9,.25,1); }
+.bl-tk__input:checked + .bl-tk__box, .bl-tk__input:indeterminate + .bl-tk__box { background: var(--tk-accent); box-shadow: inset 0 0 0 2px var(--tk-accent); animation: bl-tk-pop-on 320ms cubic-bezier(.3,1.35,.5,1); }
+.bl-tk__input:checked:not(:indeterminate) + .bl-tk__box .bl-tk__check { stroke-dashoffset: 0; transition-delay: 60ms; }
+.bl-tk__input:indeterminate + .bl-tk__box .bl-tk__dash { stroke-dashoffset: 0; }
+
+/* Radio */
+.bl-tk__radio { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: var(--tk-size); height: var(--tk-size); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tk-track); transition: box-shadow 160ms; }
+.bl-tk__dot { width: 45%; height: 45%; border-radius: 50%; background: var(--tk-accent); transform: scale(0); transition: transform 320ms cubic-bezier(.3,1.5,.5,1); }
+.bl-tk__input:checked + .bl-tk__radio { box-shadow: inset 0 0 0 2px var(--tk-accent); }
+.bl-tk__input:checked + .bl-tk__radio .bl-tk__dot { transform: scale(1); }
+.bl-tk:active .bl-tk__input:not(:disabled) + .bl-tk__radio { transform: scale(0.9); }
+
+.bl-tk-group { margin: 0; padding: 0; border: 0; font-family: var(--bl-tk-font, ui-sans-serif, system-ui, sans-serif); }
+.bl-tk-group legend { margin-bottom: 10px; padding: 0; color: var(--bl-tk-muted, #94b0c2); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
+.bl-tk-group__list { display: flex; flex-direction: column; gap: 12px; }
+.bl-tk-group[data-orientation="horizontal"] .bl-tk-group__list { flex-direction: row; flex-wrap: wrap; gap: 18px; }
+
+/* Bell */
+.bl-tk__bell { margin: 0; padding: 4px 10px 4px 4px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
+.bl-tk__bell:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
+.bl-tk__bell-icon { display: grid; place-items: center; flex: 0 0 auto; width: var(--tk-size); height: var(--tk-size); color: var(--tk-muted); transition: color 160ms; }
+.bl-tk__bell[aria-pressed="true"] .bl-tk__bell-icon { color: var(--tk-accent); }
+.bl-tk__bell-icon svg { width: 100%; height: 100%; overflow: visible; fill: currentColor; shape-rendering: crispEdges; transform-origin: 50% 8%; }
+.bl-tk__bell[aria-pressed="true"] .bl-tk__bell-icon svg { animation: bl-tk-ring 720ms steps(8); }
+.bl-tk__bell-waves { opacity: 0; }
+.bl-tk__bell[aria-pressed="true"] .bl-tk__bell-waves { animation: bl-tk-waves 720ms steps(4); }
+.bl-tk__bell[aria-pressed="true"] .bl-tk__bell-slash { display: none; }
+
+@keyframes bl-tk-pop-on { 40% { transform: scale(0.82); } }
+@keyframes bl-tk-pop-off { 40% { transform: scale(0.88); } }
+@keyframes bl-tk-ring { 12% { transform: rotate(18deg); } 25% { transform: rotate(-16deg); } 38% { transform: rotate(12deg); } 50% { transform: rotate(-8deg); } 62% { transform: rotate(4deg); } 75% { transform: none; } }
+@keyframes bl-tk-waves { 15%, 60% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-tk__switch, .bl-tk__thumb, .bl-tk__check, .bl-tk__dash, .bl-tk__dot, .bl-tk__box, .bl-tk__radio, .bl-tk__bell-icon, .bl-tk__bell-icon svg, .bl-tk__bell-waves { transition: none; animation: 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 useChecked(checked, defaultChecked, onCheckedChange) {
+  const [inner, setInner] = useState(defaultChecked ?? false);
+  const value = checked ?? inner;
+  const set = (next) => {
+    if (checked === void 0) setInner(next);
+    onCheckedChange?.(next);
+  };
+  return [value, set];
+}
+const accentVars = (color) => color ? { "--bl-tk-accent": color } : null;
+function Label({ label, description, id }) {
+  if (!label && !description) return null;
+  return /* @__PURE__ */ jsxs("span", { className: "bl-tk__text", children: [
+    label && /* @__PURE__ */ jsx("span", { children: label }),
+    description && /* @__PURE__ */ jsx("span", { id, className: "bl-tk__desc", children: description })
+  ] });
+}
+function Switch({ checked, defaultChecked, onCheckedChange, label, description, disabled = false, size = "md", color, name, value, className = "", style, ...rest }) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [on, setOn] = useChecked(checked, defaultChecked, onCheckedChange);
+  return /* @__PURE__ */ jsxs("label", { className: `bl-tk ${className}`, "data-size": size, "data-disabled": disabled || void 0, style: { ...accentVars(color), ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        type: "checkbox",
+        role: "switch",
+        className: "bl-tk__input",
+        checked: on,
+        disabled,
+        name,
+        value,
+        "aria-describedby": description ? `${uid}-desc` : void 0,
+        onChange: (event) => setOn(event.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "bl-tk__switch bl-tk__control", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "bl-tk__thumb" }) }),
+    /* @__PURE__ */ jsx(Label, { label, description, id: `${uid}-desc` })
+  ] });
+}
+function Checkbox({ checked, defaultChecked, onCheckedChange, indeterminate = false, label, description, disabled = false, size = "md", color, name, value, className = "", style, ...rest }) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const ref = useRef(null);
+  const [on, setOn] = useChecked(checked, defaultChecked, onCheckedChange);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("label", { className: `bl-tk ${className}`, "data-size": size, "data-disabled": disabled || void 0, style: { ...accentVars(color), ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        ref,
+        type: "checkbox",
+        className: "bl-tk__input",
+        checked: on,
+        disabled,
+        name,
+        value,
+        "aria-describedby": description ? `${uid}-desc` : void 0,
+        onChange: (event) => setOn(event.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "bl-tk__box bl-tk__control", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
+      /* @__PURE__ */ jsx("path", { className: "bl-tk__check", pathLength: "1", d: "M3 8.5 6.5 12 13 4.5" }),
+      /* @__PURE__ */ jsx("path", { className: "bl-tk__dash", pathLength: "1", d: "M4 8h8" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Label, { label, description, id: `${uid}-desc` })
+  ] });
+}
+function Radio({ checked, onChange, label, description, disabled = false, size = "md", color, name, value, className = "", style, ...rest }) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  return /* @__PURE__ */ jsxs("label", { className: `bl-tk ${className}`, "data-size": size, "data-disabled": disabled || void 0, style: { ...accentVars(color), ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        type: "radio",
+        className: "bl-tk__input",
+        checked,
+        disabled,
+        name,
+        value,
+        "aria-describedby": description ? `${uid}-desc` : void 0,
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "bl-tk__radio bl-tk__control", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "bl-tk__dot" }) }),
+    /* @__PURE__ */ jsx(Label, { label, description, id: `${uid}-desc` })
+  ] });
+}
+function RadioGroup({ options = [], value, defaultValue, onValueChange, label, name, orientation = "vertical", size = "md", color, disabled = false, className = "", style }) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultValue ?? null);
+  const selected = value !== void 0 ? value : inner;
+  return /* @__PURE__ */ jsxs("fieldset", { className: `bl-tk-group ${className}`, "data-orientation": orientation, disabled, style: { ...accentVars(color), ...style }, children: [
+    label && /* @__PURE__ */ jsx("legend", { children: label }),
+    /* @__PURE__ */ jsx("div", { className: "bl-tk-group__list", children: options.map((option) => /* @__PURE__ */ jsx(
+      Radio,
+      {
+        name: name ?? `${uid}-radio`,
+        value: option.value,
+        label: option.label,
+        description: option.description,
+        disabled: option.disabled,
+        size,
+        checked: selected === option.value,
+        onChange: () => {
+          if (value === void 0) setInner(option.value);
+          onValueChange?.(option.value);
+        }
+      },
+      option.value
+    )) })
+  ] });
+}
+const SLASH = Array.from({ length: 10 }, (_, i) => i + 1);
+function NotifyBell({ pressed, defaultPressed, onPressedChange, label = "Notifications", showLabel = true, disabled = false, size = "md", color, className = "", style, ...rest }) {
+  useStyles();
+  const [on, setOn] = useChecked(pressed, defaultPressed, onPressedChange);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      type: "button",
+      className: `bl-tk bl-tk__bell ${className}`,
+      "aria-pressed": on,
+      "aria-label": showLabel ? void 0 : label,
+      disabled,
+      "data-size": size,
+      "data-disabled": disabled || void 0,
+      onClick: () => setOn(!on),
+      style: { ...accentVars(color), ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-tk__bell-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 12 12", children: [
+          /* @__PURE__ */ jsx("path", { d: "M5 1h2v1h1v1h1v4h1v1h1v1H1V8h1V7h1V3h1V2h1zM5 10h2v1H5z" }),
+          /* @__PURE__ */ jsxs("g", { className: "bl-tk__bell-waves", children: [
+            /* @__PURE__ */ jsx("rect", { x: "0", y: "3", width: "1", height: "2" }),
+            /* @__PURE__ */ jsx("rect", { x: "11", y: "3", width: "1", height: "2" })
+          ] }),
+          /* @__PURE__ */ jsx("g", { className: "bl-tk__bell-slash", children: SLASH.map((i) => /* @__PURE__ */ jsx("rect", { x: i, y: i, width: "1", height: "1" }, i)) })
+        ] }) }),
+        showLabel && /* @__PURE__ */ jsx("span", { className: "bl-tk__text", children: /* @__PURE__ */ jsx("span", { children: label }) })
+      ]
+    }
+  );
+}
+var stdin_default = Switch;
+export {
+  Checkbox,
+  NotifyBell,
+  Radio,
+  RadioGroup,
+  Switch,
+  stdin_default as default
+};

package/dist/TracingLine.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface TracingLineProps {
+    /** Entries. Each direct child gets a marker. */
+    children?: ReactNode;
+    /** Width of the left gutter holding the line, in px. */
+    gutter?: number;
+    lineWidth?: number;
+    markerSize?: number;
+    /** Marker position below each child's top, in px. */
+    markerOffset?: number;
+    /** Square markers and head, for a pixel look. */
+    square?: boolean;
+    /** Viewport position (0 top, 1 bottom) the line draws down to. */
+    activeLine?: number;
+    fromColor?: string;
+    toColor?: string;
+    glowColor?: string;
+    trackColor?: string;
+    /** Fill of markers the line hasn't reached yet. */
+    backgroundColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function TracingLine({ children, gutter, lineWidth, markerSize, markerOffset, square, activeLine, fromColor, toColor, glowColor, trackColor, backgroundColor, className, style }: TracingLineProps): import("react").JSX.Element;

package/dist/TracingLine.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-tracing-line";
+const CSS = `
+.bl-trace { position: relative; padding-left: var(--bl-gutter); }
+.bl-trace__track, .bl-trace__fill { position: absolute; left: calc(var(--bl-gutter) / 2 - var(--bl-w) / 2); top: var(--bl-start); width: var(--bl-w); border-radius: var(--bl-w); }
+.bl-trace__track { bottom: var(--bl-end); background: var(--bl-track); }
+.bl-trace__fill { height: var(--bl-fill); background: linear-gradient(to bottom, var(--bl-from), var(--bl-to)); box-shadow: 0 0 12px var(--bl-glow); }
+.bl-trace__head { position: absolute; left: calc(var(--bl-gutter) / 2); top: calc(var(--bl-start) + var(--bl-fill)); width: calc(var(--bl-w) * 4); height: calc(var(--bl-w) * 4); border-radius: var(--bl-dot-radius); background: var(--bl-to); box-shadow: 0 0 0 4px var(--bl-glow), 0 0 22px 4px var(--bl-glow); transform: translate(-50%, -50%); opacity: var(--bl-head-o); }
+.bl-trace__marker { position: absolute; left: calc(var(--bl-gutter) / 2); width: var(--bl-marker); height: var(--bl-marker); border-radius: var(--bl-dot-radius); background: var(--bl-bg); box-shadow: inset 0 0 0 2px var(--bl-track); transform: translate(-50%, -50%) scale(0.85); transition: box-shadow 250ms, background-color 250ms, transform 250ms; }
+.bl-trace__marker[data-passed] { background: var(--bl-to); box-shadow: inset 0 0 0 2px var(--bl-to), 0 0 0 4px var(--bl-glow); transform: translate(-50%, -50%) scale(1); }
+.bl-trace__content > * { scroll-margin-top: 24px; }
+@media (prefers-reduced-motion: reduce) { .bl-trace__marker { 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 scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+function TracingLine({
+  children,
+  gutter = 56,
+  lineWidth = 3,
+  markerSize = 14,
+  markerOffset = 14,
+  square = false,
+  activeLine = 0.55,
+  fromColor = "#41a6f6",
+  toColor = "#73eff7",
+  glowColor = "rgba(115,239,247,0.35)",
+  trackColor = "rgba(148,176,194,0.22)",
+  backgroundColor = "#1a1c2c",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const contentRef = useRef(null);
+  const [markers, setMarkers] = useState([]);
+  const [passed, setPassed] = useState(-1);
+  useEffect(() => {
+    const root = rootRef.current;
+    const content = contentRef.current;
+    const scroller = scrollParent(root);
+    let frame = 0;
+    let positions = [];
+    let lastPassed = -2;
+    const measure = () => {
+      positions = [...content.children].map((child) => child.offsetTop + markerOffset);
+      setMarkers((prev) => prev.length === positions.length && prev.every((y, i) => y === positions[i]) ? prev : positions);
+      const first = positions[0] ?? 0;
+      const last = positions[positions.length - 1] ?? root.offsetHeight;
+      root.style.setProperty("--bl-start", `${first}px`);
+      root.style.setProperty("--bl-end", `${root.offsetHeight - last}px`);
+    };
+    const update = () => {
+      frame = 0;
+      const rect = root.getBoundingClientRect();
+      const viewTop = scroller === window ? 0 : scroller.getBoundingClientRect().top;
+      const viewHeight = scroller === window ? window.innerHeight : scroller.clientHeight;
+      const line = viewTop + viewHeight * activeLine - rect.top;
+      const first = positions[0] ?? 0;
+      const last = positions[positions.length - 1] ?? rect.height;
+      const fill = Math.min(last - first, Math.max(0, line - first));
+      root.style.setProperty("--bl-fill", `${fill}px`);
+      root.style.setProperty("--bl-head-o", fill > 0 && fill < last - first ? "1" : "0");
+      let count = -1;
+      positions.forEach((y, i) => {
+        if (y <= first + fill + 0.5) count = i;
+      });
+      if (count !== lastPassed) {
+        lastPassed = count;
+        setPassed(count);
+      }
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    const observer = new ResizeObserver(() => {
+      measure();
+      schedule();
+    });
+    observer.observe(content);
+    [...content.children].forEach((child) => observer.observe(child));
+    measure();
+    update();
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [activeLine, markerOffset, children]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-trace ${className}`,
+      style: {
+        "--bl-gutter": `${gutter}px`,
+        "--bl-w": `${lineWidth}px`,
+        "--bl-marker": `${markerSize}px`,
+        "--bl-dot-radius": square ? "0" : "50%",
+        "--bl-from": fromColor,
+        "--bl-to": toColor,
+        "--bl-glow": glowColor,
+        "--bl-track": trackColor,
+        "--bl-bg": backgroundColor,
+        "--bl-start": "0px",
+        "--bl-end": "0px",
+        "--bl-fill": "0px",
+        "--bl-head-o": 0,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-trace__track", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { className: "bl-trace__fill", "aria-hidden": "true" }),
+        markers.map((y, index) => /* @__PURE__ */ jsx("span", { className: "bl-trace__marker", style: { top: y }, "data-passed": index <= passed ? "" : void 0, "aria-hidden": "true" }, index)),
+        /* @__PURE__ */ jsx("div", { className: "bl-trace__head", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { ref: contentRef, className: "bl-trace__content", children })
+      ]
+    }
+  );
+}
+export {
+  TracingLine as default
+};