@warmio/ui 1.4.0 → 2.0.0

package/LICENSES/fluid-functionalism.txt

@@ -0,0 +1,24 @@
+Fluid Functionalism
+https://github.com/mickadesign/fluid-functionalism
+
+MIT License
+
+Copyright (c) 2026 Micka Touillaud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,21 @@
 # `@warmio/ui`
 
-Portable React components shared by Warm products. Install `@warmio/ui@1.4.0` with the exact
-`@warmio/design@1.6.0` CSS/primitive contract, import `@warmio/design/globals.css` once, and add
-the package's compiled files to Tailwind's source detection:
+The next package version is `@warmio/ui@2.0.0` with the exact
+`@warmio/design@2.0.0` CSS/primitive contract. Import `@warmio/design/globals.css` once.
+If you use the responsive Sidebar, also import `@warmio/ui/sidebar.css` once.
+Component entrypoints import their compiled CSS. Existing consumers can still import
+`@warmio/ui/text.css` for the shared Text and StackedDisplay recipes; that explicit import
+is optional when your bundler handles CSS imports from JavaScript.
+`Text` allows `size="large"` on `variant="body"` for the approved 18px body size; heading
+text may use the existing 24px display size. Other text roles use their recipe size.
+Add the package's compiled files to Tailwind's source detection:
+
+```css
+@import '@warmio/design/globals.css';
+@import '@warmio/ui/sidebar.css';
+@import '@warmio/ui/text.css';
+@source '../node_modules/@warmio/ui/dist';
+```
 
 ## Why these files are separate
 
@@ -10,22 +23,18 @@ Independently deployed Warm products cannot import runtime code from the private
 workspace, so `libraries/public-ui/` must be a standalone public package rather than another private
 workspace entry point. `tools/tasks/check-ui-package.mjs` is a dedicated package-boundary check
 because the existing application checks do not build, pack, and inspect a public npm tarball.
-`.github/workflows/publish-ui.yml` is separate from application deployment workflows so npm trusted
-publishing can bind credentials to one reviewable package-release boundary without granting an app
-deployment permission to publish packages.
 
-```css
-@import '@warmio/design/globals.css';
-@source '../node_modules/@warmio/ui/dist';
-```
-
-The `1.4.0` public UI surface contains the Warm badge, Text and `StackedDisplay`, DropdownMenu,
+The `2.0.0` public UI surface keeps the Warm badge, Text and `StackedDisplay`, DropdownMenu,
 Sheet, the complete responsive Sidebar family, and the `ProductHeader` composition. `Button`,
-`ButtonLink`, `Logo`, and `WarmLogoIcon` are directly owned by `@warmio/design@1.6.0` and are
+`ButtonLink`, `Logo`, and `WarmLogoIcon` are directly owned by `@warmio/design@2.0.0` and are
 re-exported through UI where applicable. `ProductHeader` owns the responsive frame,
 breadcrumb/title semantics, leading slot, action slot, and optional portal targets used by Warm
 product shells. Styling is sealed: use documented semantic properties and layout wrappers, never
 `className` or `style` overrides. DropdownMenu interaction feedback requires the exact public peer
-`cuelume@0.1.0`.
+`cuelume@0.1.0`. Fluid-derived menu, sidebar, and sheet interactions require `motion@^12.42.2`.
+
+The closed props and Warm styling remain unchanged. Motion respects live reduced-motion
+preferences. Adapted Fluid source is covered by `LICENSES/fluid-functionalism.txt`.
+These versions require publication before independently deployed consumers can install them.
 
 The published artifact is standalone and never imports private `warm-app` workspace packages.

package/dist/badge.js

@@ -1,7 +1,7 @@
+import "./entries/badge.css";
 import {
   Badge
-} from "./chunks/chunk-ICC7GQXS.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-A2PN77YE.js";
 export {
   Badge
 };

package/dist/button.js

@@ -1,7 +1,10 @@
+import "./entries/button.css";
+import "./chunks/chunk-U7D32UN3.js";
 import {
   Button,
   ButtonLink
-} from "./chunks/chunk-GKEYV2XW.js";
+} from "./chunks/chunk-L6L3GVGM.js";
+import "./chunks/chunk-RVVHR7RY.js";
 export {
   Button,
   ButtonLink

package/dist/chunks/chunk-A2PN77YE.js

@@ -0,0 +1,42 @@
+// ../ui/src/warmio/badge/badge.tsx
+import { jsx } from "react/jsx-runtime";
+function Badge({
+  tone,
+  size = "default",
+  textSize = "caption",
+  shape = "pill",
+  surface = "default",
+  placement = "inline",
+  emphasis = "subtle",
+  width = "auto",
+  truncate = false,
+  numeric = false,
+  children,
+  id,
+  "aria-label": ariaLabel
+}) {
+  const resolvedTone = tone ?? "default";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge",
+      "data-tone": resolvedTone,
+      "data-shape": shape,
+      "data-surface": surface,
+      "data-placement": placement,
+      "data-size": size,
+      "data-text-size": textSize,
+      "data-emphasis": emphasis,
+      "data-width": width,
+      "data-truncate": truncate ? "true" : void 0,
+      "data-numeric": numeric ? "true" : void 0,
+      id,
+      "aria-label": ariaLabel,
+      children: truncate ? /* @__PURE__ */ jsx("span", { "data-slot": "badge-label", children }) : children
+    }
+  );
+}
+
+export {
+  Badge
+};

package/dist/chunks/chunk-DHV2A22F.js

@@ -0,0 +1,240 @@
+import {
+  FLUID_SPRING,
+  useReducedMotion
+} from "./chunk-K36HD5J5.js";
+
+// ../ui/src/lib/fluid-menu-highlight.tsx
+import * as React from "react";
+import { motion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var itemSelectors = {
+  menu: '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]',
+  select: '[role="option"]',
+  sidebar: '[data-sidebar="menu-button"], [data-sidebar="menu-sub-button"]'
+};
+var SIDEBAR_HOVER_DEBOUNCE_MS = 0;
+function sameHighlights(previous, next) {
+  return previous.length === next.length && previous.every((item, index) => {
+    const other = next[index];
+    return other && item.key === other.key && item.element === other.element && item.left === other.left && item.top === other.top && item.width === other.width && item.height === other.height && item.selected === other.selected && item.destructive === other.destructive;
+  });
+}
+function ancestorScale(visualSize, layoutSize) {
+  return visualSize > 0 && layoutSize > 0 ? visualSize / layoutSize : 1;
+}
+function MenuHighlight({ target, kind }) {
+  const reduceMotion = useReducedMotion();
+  const previousElement = React.useRef(target.element);
+  const movedToItem = previousElement.current !== target.element;
+  React.useLayoutEffect(() => {
+    previousElement.current = target.element;
+  }, [target.element]);
+  const Element2 = kind === "sidebar" ? motion.li : motion.div;
+  const geometry = { x: target.left, y: target.top, width: target.width, height: target.height };
+  return /* @__PURE__ */ jsx(
+    Element2,
+    {
+      "aria-hidden": "true",
+      role: "presentation",
+      "data-slot": "fluid-menu-highlight",
+      "data-kind": kind,
+      "data-selected": target.selected ? "true" : void 0,
+      "data-destructive": target.destructive ? "true" : void 0,
+      initial: false,
+      style: reduceMotion ? {
+        left: target.left,
+        top: target.top,
+        width: target.width,
+        height: target.height
+      } : {},
+      animate: reduceMotion ? { opacity: target.selected ? 1 : kind === "sidebar" ? 0.5 : 1 } : {
+        ...geometry,
+        opacity: target.selected ? 1 : kind === "sidebar" ? 0.5 : 1
+      },
+      transition: reduceMotion || !movedToItem ? { duration: 0 } : kind === "sidebar" ? FLUID_SPRING.moderate : FLUID_SPRING.fast
+    },
+    reduceMotion ? "still" : "moving"
+  );
+}
+function FluidMenuHighlights({ kind }) {
+  const anchorRef = React.useRef(null);
+  const [highlights, setHighlights] = React.useState([]);
+  const Anchor = kind === "sidebar" ? "li" : "span";
+  React.useLayoutEffect(() => {
+    const container = anchorRef.current?.parentElement;
+    if (!container) return;
+    const selector = itemSelectors[kind];
+    let items = [];
+    let hovered = null;
+    let focused = null;
+    let hoverTimer;
+    let frame;
+    let nextId = 0;
+    const ids = /* @__PURE__ */ new WeakMap();
+    const idFor = (element) => {
+      let id = ids.get(element);
+      if (id === void 0) {
+        id = nextId++;
+        ids.set(element, id);
+      }
+      return id;
+    };
+    const enabled = (item) => !item.matches(
+      ':disabled, [disabled], [aria-disabled="true"], [data-disabled], [data-fluid-menu-disabled]'
+    ) && item.getClientRects().length > 0 && item.offsetWidth > 0 && item.offsetHeight > 0;
+    const measure = () => {
+      frame = void 0;
+      const visibleItems = items.filter(enabled);
+      const selected = visibleItems.filter(
+        (item) => item.matches(
+          '[aria-selected="true"], [aria-checked="true"], [data-active], [data-popup-open], [data-open]'
+        )
+      );
+      const active = kind === "sidebar" ? hovered && visibleItems.includes(hovered) ? hovered : focused && visibleItems.includes(focused) ? focused : null : visibleItems.find((item) => item.hasAttribute("data-highlighted"));
+      const targets = [];
+      const add = (element, key, isSelected) => {
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const scaleX = ancestorScale(containerRect.width, container.offsetWidth);
+        const scaleY = ancestorScale(containerRect.height, container.offsetHeight);
+        targets.push({
+          key,
+          element,
+          left: (elementRect.left - containerRect.left) / scaleX + container.scrollLeft,
+          top: (elementRect.top - containerRect.top) / scaleY + container.scrollTop,
+          width: elementRect.width / scaleX,
+          height: elementRect.height / scaleY,
+          selected: isSelected,
+          destructive: element.dataset["variant"] === "destructive"
+        });
+      };
+      if (kind === "sidebar") {
+        const selectedItem = selected[0];
+        const hoverItem = active ?? selectedItem;
+        if (hoverItem && hoverItem !== selectedItem) add(hoverItem, "hover", false);
+        if (selectedItem) add(selectedItem, "sidebar", true);
+      } else {
+        const occurrences = /* @__PURE__ */ new Map();
+        selected.forEach((item) => {
+          const group = item.closest('[role="group"], [data-sidebar="menu-sub"]') ?? container;
+          const occurrence = occurrences.get(group) ?? 0;
+          occurrences.set(group, occurrence + 1);
+          const key = item.getAttribute("role") === "menuitemcheckbox" || kind === "select" && selected.length > 1 ? `selection-item-${idFor(item)}` : `selection-${idFor(group)}-${occurrence}`;
+          add(item, key, true);
+        });
+        if (active) add(active, "hover", false);
+      }
+      setHighlights((previous) => sameHighlights(previous, targets) ? previous : targets);
+    };
+    const schedule = () => {
+      if (frame === void 0) frame = requestAnimationFrame(measure);
+    };
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    const register = () => {
+      resizeObserver?.disconnect();
+      items.forEach((item) => item.removeAttribute("data-fluid-menu-item"));
+      items = Array.from(container.querySelectorAll(selector)).filter(
+        (item) => item.closest("[data-fluid-menu]") === container
+      );
+      items.forEach((item) => {
+        item.setAttribute("data-fluid-menu-item", "");
+        resizeObserver?.observe(item);
+      });
+      resizeObserver?.observe(container);
+    };
+    const observer = new MutationObserver((records) => {
+      if (records.some(
+        (record) => record.type === "childList" && [...record.addedNodes, ...record.removedNodes].some(
+          (node) => node instanceof Element && !node.matches('[data-slot="fluid-menu-highlight"]')
+        )
+      ))
+        register();
+      schedule();
+    });
+    register();
+    observer.observe(container, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: [
+        "data-highlighted",
+        "aria-selected",
+        "aria-checked",
+        "data-active",
+        "data-popup-open",
+        "data-open",
+        "disabled",
+        "aria-disabled",
+        "data-disabled",
+        "data-fluid-menu-disabled",
+        "hidden",
+        "data-state"
+      ]
+    });
+    const pointerMove = (event) => {
+      if (event.pointerType === "touch") return;
+      const nextHovered = event.target instanceof Element ? event.target.closest(selector) : null;
+      clearTimeout(hoverTimer);
+      hoverTimer = window.setTimeout(() => {
+        hovered = nextHovered;
+        hoverTimer = void 0;
+        schedule();
+      }, SIDEBAR_HOVER_DEBOUNCE_MS);
+    };
+    const pointerLeave = () => {
+      clearTimeout(hoverTimer);
+      hoverTimer = void 0;
+      hovered = null;
+      schedule();
+    };
+    const focusIn = (event) => {
+      clearTimeout(hoverTimer);
+      hoverTimer = void 0;
+      const item = event.target instanceof Element ? event.target.closest(selector) : null;
+      focused = item?.matches(":focus-visible") ? item : null;
+      if (focused) hovered = null;
+      schedule();
+    };
+    const focusOut = () => {
+      focused = null;
+      schedule();
+    };
+    if (kind === "sidebar") {
+      container.addEventListener("pointermove", pointerMove);
+      container.addEventListener("pointerleave", pointerLeave);
+      container.addEventListener("focusin", focusIn);
+      container.addEventListener("focusout", focusOut);
+    }
+    container.addEventListener("scroll", schedule, true);
+    measure();
+    return () => {
+      observer.disconnect();
+      resizeObserver?.disconnect();
+      if (frame !== void 0) cancelAnimationFrame(frame);
+      clearTimeout(hoverTimer);
+      items.forEach((item) => item.removeAttribute("data-fluid-menu-item"));
+      container.removeEventListener("pointermove", pointerMove);
+      container.removeEventListener("pointerleave", pointerLeave);
+      container.removeEventListener("focusin", focusIn);
+      container.removeEventListener("focusout", focusOut);
+      container.removeEventListener("scroll", schedule, true);
+    };
+  }, [kind]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Anchor,
+      {
+        ref: (node) => {
+          anchorRef.current = node;
+        },
+        hidden: true,
+        "aria-hidden": "true"
+      }
+    ),
+    highlights.map((target) => /* @__PURE__ */ jsx(MenuHighlight, { target, kind }, target.key))
+  ] });
+}
+
+export {
+  FluidMenuHighlights
+};

package/dist/chunks/chunk-DOOSH3V6.js

@@ -0,0 +1,72 @@
+// ../ui/src/warmio/product-header/product-header.tsx
+import { Fragment, memo } from "react";
+import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function getTitleSegments(pageTitle, productName) {
+  return pageTitle?.split(">").reduce((segments, rawSegment) => {
+    const segment = rawSegment.trim();
+    if (!segment || segments.length === 0 && segment === productName) return segments;
+    segments.push(segment);
+    return segments;
+  }, []);
+}
+function ProductHeaderBreadcrumb({
+  pageTitle,
+  productName = "Warm",
+  homeHref
+}) {
+  const titleSegments = getTitleSegments(pageTitle, productName);
+  const productNameNode = homeHref ? /* @__PURE__ */ jsx("a", { "data-slot": "product-header-title", href: homeHref, children: productName }) : /* @__PURE__ */ jsx("span", { "data-slot": "product-header-title", children: productName });
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    productNameNode,
+    titleSegments?.map((segment, index) => {
+      const isLast = index === titleSegments.length - 1;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronRight, { "data-slot": "product-header-separator" }),
+        isLast ? /* @__PURE__ */ jsx("h1", { "data-slot": "product-header-title", "aria-current": "page", children: segment }) : /* @__PURE__ */ jsx("span", { "data-slot": "product-header-title", children: segment })
+      ] }, `${segment}-${index}`);
+    })
+  ] });
+}
+var ProductHeader = memo(function ProductHeader2({
+  actions,
+  actionsTargetRef,
+  desktopShell = false,
+  hideBreadcrumb = false,
+  homeHref,
+  leading,
+  pageTitle,
+  productName,
+  titleTargetRef,
+  visibility = "desktop"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-slot": "product-header",
+      "data-visibility": visibility,
+      "data-desktop-shell": desktopShell ? "" : void 0,
+      "data-tauri-drag-region": desktopShell ? "deep" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { ref: titleTargetRef, "data-slot": "product-header-titles", children: [
+          leading,
+          hideBreadcrumb ? null : /* @__PURE__ */ jsx("div", { "data-page-chrome-fallback": true, "data-slot": "product-header-fallback", children: /* @__PURE__ */ jsx(
+            ProductHeaderBreadcrumb,
+            {
+              ...pageTitle !== void 0 ? { pageTitle } : {},
+              ...productName !== void 0 ? { productName } : {},
+              ...homeHref !== void 0 ? { homeHref } : {}
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: actionsTargetRef, "data-slot": "product-header-actions", children: actions ? /* @__PURE__ */ jsx("div", { "data-page-chrome-fallback": true, "data-slot": "product-header-fallback", children: actions }) : null })
+      ]
+    }
+  );
+});
+ProductHeader.displayName = "ProductHeader";
+
+export {
+  ProductHeaderBreadcrumb,
+  ProductHeader
+};

package/dist/chunks/chunk-EIEA5RJJ.js

@@ -0,0 +1,97 @@
+import {
+  FluidOverlay
+} from "./chunk-K36HD5J5.js";
+
+// ../ui/src/components/sheet.tsx
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SheetCloseSlotContext = React.createContext(null);
+function Sheet(props) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { ...props });
+}
+function SheetTrigger({ asChild = false, children, render, ...props }) {
+  const resolvedRender = render ?? (asChild && React.isValidElement(children) ? children : void 0);
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
+}
+function SheetClose({ asChild = false, children, render, ...props }) {
+  const resolvedRender = render ?? (asChild && React.isValidElement(children) ? children : void 0);
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className,
+      ...props,
+      render: (props2, state) => /* @__PURE__ */ jsx(FluidOverlay, { props: props2, state, motion: "backdrop", tier: "moderate" })
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "responsive",
+  showCloseButton = true,
+  closeButton,
+  overlayClassName,
+  render,
+  ...props
+}) {
+  const closeSlot = showCloseButton && closeButton ? /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", render: closeButton }) : null;
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ jsx(
+      SheetPrimitive.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className,
+        ...props,
+        render: (props2, state) => /* @__PURE__ */ jsx(
+          FluidOverlay,
+          {
+            props: props2,
+            state,
+            render,
+            motion: "sheet",
+            side,
+            tier: "moderate"
+          }
+        ),
+        children: /* @__PURE__ */ jsx(SheetCloseSlotContext.Provider, { value: closeSlot, children })
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, children, ...props }) {
+  const closeButton = React.useContext(SheetCloseSlotContext);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "sheet-header", className, ...props, children: [
+    children,
+    closeButton
+  ] });
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-footer", className, ...props });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className, ...props });
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className, ...props });
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription
+};