@warmio/ui 1.5.2 → 2.0.0

package/README.md

@@ -1,8 +1,21 @@
 # `@warmio/ui`
 
-Portable React components shared by Warm products. The next package version is `@warmio/ui@1.5.2`
-with the exact `@warmio/design@1.10.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,18 +23,10 @@ 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.5.2` public UI surface keeps 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.10.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

package/dist/badge.js

@@ -1,7 +1,7 @@
+import "./entries/badge.css";
 import {
   Badge
-} from "./chunks/chunk-3AVFUXCV.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-GY4XJ6EX.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-F74Y4WRX.js → chunk-DHV2A22F.js}

@@ -1,10 +1,7 @@
 import {
   FLUID_SPRING,
   useReducedMotion
-} from "./chunk-JXSJTIX7.js";
-import {
-  cn
-} from "./chunk-VIB7OX7D.js";
+} from "./chunk-K36HD5J5.js";
 
 // ../ui/src/lib/fluid-menu-highlight.tsx
 import * as React from "react";
@@ -22,6 +19,9 @@ function sameHighlights(previous, next) {
     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);
@@ -37,10 +37,9 @@ function MenuHighlight({ target, kind }) {
       "aria-hidden": "true",
       role: "presentation",
       "data-slot": "fluid-menu-highlight",
-      className: cn(
-        "pointer-events-none absolute top-0 left-0 -z-10 list-none rounded-lg",
-        target.destructive ? "bg-destructive/10 dark:bg-destructive/20" : kind === "select" ? "bg-accent" : "bg-sidebar-accent"
-      ),
+      "data-kind": kind,
+      "data-selected": target.selected ? "true" : void 0,
+      "data-destructive": target.destructive ? "true" : void 0,
       initial: false,
       style: reduceMotion ? {
         left: target.left,
@@ -96,13 +95,15 @@ function FluidMenuHighlights({ kind }) {
       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 + container.scrollLeft,
-          top: elementRect.top - containerRect.top + container.scrollTop,
-          width: elementRect.width,
-          height: elementRect.height,
+          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"
         });
@@ -110,7 +111,7 @@ function FluidMenuHighlights({ kind }) {
       if (kind === "sidebar") {
         const selectedItem = selected[0];
         const hoverItem = active ?? selectedItem;
-        if (hoverItem) add(hoverItem, "hover", false);
+        if (hoverItem && hoverItem !== selectedItem) add(hoverItem, "hover", false);
         if (selectedItem) add(selectedItem, "sidebar", true);
       } else {
         const occurrences = /* @__PURE__ */ new Map();

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
+};