barua-ui 0.2.3 → 0.3.1

package/css/components/media.css

@@ -232,6 +232,34 @@
     opacity: 0;
     transition: opacity var(--b-duration-slow) var(--b-ease-out);
   }
+  /* ---- Blur-up ------------------------------------------------------------
+   *
+   * A shimmer says "something is coming". A blurred copy of the actual picture
+   * says "this is what is coming", which is a different and better promise —
+   * the layout is right, the colours are right, and the photograph resolves
+   * rather than appearing.
+   *
+   * The placeholder is a thumbnail small enough to inline: a 32px-wide JPEG is
+   * around a kilobyte, so it costs nothing and arrives with the markup. Give
+   * it as a data URI on --b-img-placeholder and mark the host with
+   * data-placeholder, which is what tells the shimmer to stand down.
+   */
+  .b-async-img[data-placeholder]::before { display: none; }
+
+  .b-async-img[data-placeholder]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--b-img-placeholder) center / cover no-repeat;
+    /* Scaled up because a blur samples past the edges and would otherwise
+       leave a soft border all the way round. */
+    filter: blur(14px);
+    transform: scale(1.1);
+    transition: opacity var(--b-duration-slow) var(--b-ease-out);
+    pointer-events: none;
+  }
+  .b-async-img[data-placeholder].is-loaded::after { opacity: 0; }
+
   .b-async-img.is-loaded::before { display: none; }
   .b-async-img.is-loaded img { opacity: 1; }
 

package/css/utilities.css

@@ -470,12 +470,101 @@
   }
 
   /* ---- Symbol effects (SF Symbols bounce / pulse) -------------------------- */
+  /*
+   * The roster SF Symbols established, because a glyph that answers a press is
+   * the cheapest feedback an interface has. Each is one-shot unless it is
+   * describing an ongoing state — bounce acknowledges, breathe waits.
+   * prefers-reduced-motion is handled once, globally, in base.css.
+   */
   .b-icon--bounce svg, .b-icon--bounce { animation: b-icon-bounce 0.5s var(--b-ease-bounce); }
   .b-icon--pulse svg, .b-icon--pulse { animation: b-pulse 1.6s var(--b-ease-standard) infinite; }
+  .b-icon--scale svg, .b-icon--scale { animation: b-icon-scale 0.32s var(--b-ease-standard); }
+  .b-icon--wiggle svg, .b-icon--wiggle { animation: b-icon-wiggle 0.5s var(--b-ease-standard); }
+  .b-icon--rotate svg, .b-icon--rotate { animation: b-icon-rotate 1.1s linear infinite; }
+  .b-icon--breathe svg, .b-icon--breathe { animation: b-icon-breathe 3s var(--b-ease-standard) infinite; }
+  .b-icon--replace svg, .b-icon--replace { animation: b-icon-replace 0.3s var(--b-ease-standard); }
+
   @keyframes b-icon-bounce {
     30% { translate: 0 -3px; scale: 1.15; }
     60% { translate: 0 1px; scale: 0.96; }
   }
+  @keyframes b-icon-scale {
+    50% { scale: 1.18; }
+  }
+  /* Small angles: a glyph that swings far reads as broken rather than lively. */
+  @keyframes b-icon-wiggle {
+    20% { rotate: -7deg; }
+    45% { rotate: 6deg; }
+    70% { rotate: -3deg; }
+  }
+  @keyframes b-icon-rotate {
+    to { rotate: 360deg; }
+  }
+  @keyframes b-icon-breathe {
+    50% { scale: 1.06; opacity: 0.75; }
+  }
+  /* The swap SwiftUI does between two glyphs: the old one leaves, the new
+     arrives. Put the class on the icon at the moment its `name` changes. */
+  @keyframes b-icon-replace {
+    0%   { scale: 0.6; opacity: 0; }
+    100% { scale: 1; opacity: 1; }
+  }
+
+  /* ---- Scroll-driven reveal ------------------------------------------------
+   *
+   * The browser drives this from the element's own position in the scrollport,
+   * so there is no observer, no scroll listener and no main-thread work: the
+   * animation is tied to a timeline rather than to time.
+   *
+   * Everything stays visible where the timeline is unsupported. An entrance
+   * animation that fails closed hides the page. */
+  @supports (animation-timeline: view()) {
+    .b-reveal {
+      animation: b-reveal-in linear both;
+      animation-timeline: view();
+      /* Finish while the element is still coming up the screen, rather than
+         when it is centred — otherwise a reader watches it fade in. */
+      animation-range: entry 10% cover 32%;
+    }
+    .b-reveal--fade { animation-name: b-reveal-fade; }
+    .b-reveal--scale { animation-name: b-reveal-scale; }
+    .b-reveal--start { animation-name: b-reveal-start; }
+    .b-reveal--end { animation-name: b-reveal-end; }
+  }
+  @keyframes b-reveal-in {
+    from { opacity: 0; translate: 0 1.5rem; }
+    to   { opacity: 1; translate: 0 0; }
+  }
+  @keyframes b-reveal-fade {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+  @keyframes b-reveal-scale {
+    from { opacity: 0; scale: 0.94; }
+    to   { opacity: 1; scale: 1; }
+  }
+  @keyframes b-reveal-start {
+    from { opacity: 0; translate: -1.5rem 0; }
+    to   { opacity: 1; translate: 0 0; }
+  }
+  @keyframes b-reveal-end {
+    from { opacity: 0; translate: 1.5rem 0; }
+    to   { opacity: 1; translate: 0 0; }
+  }
+
+  /* ---- Text that shrinks to fit its container -----------------------------
+   *
+   * SwiftUI's minimumScaleFactor has no CSS equivalent, but a container query
+   * unit does the same job honestly: the size is a fraction of the container's
+   * width, clamped so it never becomes unreadable or absurd. Needs a container
+   * ancestor — .b-fit-text establishes its own. */
+  .b-fit-text {
+    container-type: inline-size;
+  }
+  .b-fit-text > * {
+    font-size: clamp(var(--b-fit-min, 0.85rem), var(--b-fit-scale, 9cqi), var(--b-fit-max, 3rem));
+    white-space: nowrap;
+  }
 
   /* ---- Safe area (mobile) ------------------------------------------------ */
   .b-safe-area {

package/dist/index.cjs

@@ -97,6 +97,8 @@ __export(index_exports, {
   CommandList: () => CommandList,
   CommandPalette: () => CommandPalette,
   Container: () => Container,
+  ContextMenuTarget: () => ContextMenuTarget,
+  CountUp: () => CountUp,
   Dashboard: () => Dashboard,
   DataGrid: () => DataGrid,
   DatePicker: () => DatePicker,
@@ -127,6 +129,7 @@ __export(index_exports, {
   FileTile: () => FileTile,
   FilterBar: () => FilterBar,
   FilterChip: () => FilterChip,
+  FitText: () => FitText,
   Footnote: () => Footnote,
   Footnotes: () => Footnotes,
   Form: () => Form,
@@ -211,6 +214,7 @@ __export(index_exports, {
   Resizable: () => Resizable,
   ResizeHandle: () => ResizeHandle,
   Result: () => Result,
+  Reveal: () => Reveal,
   SafeArea: () => SafeArea,
   ScatterChart: () => ScatterChart,
   ScrollArea: () => ScrollArea,
@@ -2391,7 +2395,32 @@ var OnboardingFeature = (0, import_react19.forwardRef)(
 var import_react20 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var MediaPlaceholder = block("div", "b-media-placeholder", "MediaPlaceholder");
-var AsyncImage = block("span", "b-async-img", "AsyncImage");
+var AsyncImage = (0, import_react20.forwardRef)(function AsyncImage2({ src, alt, placeholder, aspect, className, style, ...rest }, ref) {
+  const [loaded, setLoaded] = (0, import_react20.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "span",
+    {
+      className: cn("b-async-img", loaded && "is-loaded", className),
+      "data-placeholder": placeholder ? "" : void 0,
+      style: {
+        ...aspect ? { aspectRatio: aspect } : null,
+        ...placeholder ? { ["--b-img-placeholder"]: `url("${placeholder}")` } : null,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "img",
+        {
+          ref,
+          src,
+          alt,
+          onLoad: () => setLoaded(true),
+          onError: () => setLoaded(true),
+          ...rest
+        }
+      )
+    }
+  );
+});
 var Web = block("div", "b-web", "Web");
 var Video = block("video", "b-video", "Video");
 var Audio = block("div", "b-audio", "Audio");
@@ -2466,6 +2495,90 @@ var CommandCenterTile = block("div", "b-cc__tile", "CommandCenterTile");
 var CommandCenterLabel = block("div", "b-cc__label", "CommandCenterLabel");
 var CommandCenterStatus = block("div", "b-cc__status", "CommandCenterStatus");
 var ImageLens = block("div", "b-lens", "ImageLens");
+
+// src/motion.tsx
+var import_react21 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Reveal = (0, import_react21.forwardRef)(function Reveal2({ as: Tag2 = "div", variant = "up", className, children, ...rest }, ref) {
+  const Component = Tag2;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Component,
+    {
+      ref,
+      className: cn("b-reveal", variant !== "up" && `b-reveal--${variant}`, className),
+      ...rest,
+      children
+    }
+  );
+});
+var FitText = (0, import_react21.forwardRef)(function FitText2({ min, max, scale, className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("b-fit-text", className),
+      style: {
+        ...min ? { ["--b-fit-min"]: min } : null,
+        ...max ? { ["--b-fit-max"]: max } : null,
+        ...scale ? { ["--b-fit-scale"]: scale } : null,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var CountUp = (0, import_react21.forwardRef)(function CountUp2({ to, decimals = 0, duration = 700, prefix = "", suffix = "", grouped = true, className, ...rest }, ref) {
+  const node = (0, import_react21.useRef)(null);
+  const from = (0, import_react21.useRef)(0);
+  (0, import_react21.useEffect)(() => {
+    const el = node.current;
+    if (!el) return;
+    const start = from.current;
+    const target = to;
+    from.current = to;
+    const render = (value) => {
+      const text = grouped ? value.toLocaleString(void 0, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) : value.toFixed(decimals);
+      el.textContent = `${prefix}${text}${suffix}`;
+    };
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      render(target);
+      return;
+    }
+    let frame = 0;
+    const began = performance.now();
+    const step = (now) => {
+      const p = Math.min(1, (now - began) / duration);
+      render(start + (target - start) * (1 - Math.pow(1 - p, 3)));
+      if (p < 1) frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [to, decimals, duration, prefix, suffix, grouped]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "span",
+    {
+      ref: (el) => {
+        node.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      className: cn("b-tabular-nums", className),
+      ...rest,
+      children: [
+        prefix,
+        0 .toFixed(decimals),
+        suffix
+      ]
+    }
+  );
+});
+var ContextMenuTarget = (0, import_react21.forwardRef)(
+  function ContextMenuTarget2({ as: Tag2 = "div", menu, children, ...rest }, ref) {
+    const Component = Tag2;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component, { ref, "data-b-contextmenu": menu, ...rest, children });
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2544,6 +2657,8 @@ var ImageLens = block("div", "b-lens", "ImageLens");
   CommandList,
   CommandPalette,
   Container,
+  ContextMenuTarget,
+  CountUp,
   Dashboard,
   DataGrid,
   DatePicker,
@@ -2574,6 +2689,7 @@ var ImageLens = block("div", "b-lens", "ImageLens");
   FileTile,
   FilterBar,
   FilterChip,
+  FitText,
   Footnote,
   Footnotes,
   Form,
@@ -2658,6 +2774,7 @@ var ImageLens = block("div", "b-lens", "ImageLens");
   Resizable,
   ResizeHandle,
   Result,
+  Reveal,
   SafeArea,
   ScatterChart,
   ScrollArea,