@dreamtree-org/twreact-ui 2.0.9 → 2.1.0

package/dist/components/blocks/ProductCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ProductCard.jsx"],"names":[],"mappings":";AAgBA,qFA8FG;kBA9GsC,OAAO"}

package/dist/components/blocks/ProductCardParts.d.ts

@@ -0,0 +1,19 @@
+export function defaultPriceFormatter(value: any): any;
+export function formatPrice(value: any, formatter?: (value: any) => any): any;
+export function computeDiscount(price: any, compareAtPrice: any): string | null;
+export function normalizeImages(image: any, images: any, fallbackAlt?: string): any[];
+export function ProductMedia({ images, ratio, hover, placeholder, row, children }: {
+    images: any;
+    ratio?: string | undefined;
+    hover?: string | undefined;
+    placeholder: any;
+    row: any;
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+export function ProductPrice({ price, compareAtPrice, discountLabel, priceFormatter }: {
+    price: any;
+    compareAtPrice: any;
+    discountLabel: any;
+    priceFormatter: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ProductCardParts.d.ts.map

package/dist/components/blocks/ProductCardParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardParts.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ProductCardParts.jsx"],"names":[],"mappings":"AASO,uDAGN;AAGM,8EACyE;AAGzE,gFAKN;AAGM,sFAGN;AAIM;;;;;;;4CAgDN;AAEM;;;;;mDAuBN"}

package/dist/components/blocks/StatCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/StatCard.jsx"],"names":[],"mappings":";AAiBA,kFAyCG;kBA1De,OAAO"}
+{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/StatCard.jsx"],"names":[],"mappings":";AA2BA,kFA6CG;kBAxEe,OAAO"}

package/dist/components/core/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/core/Button.jsx"],"names":[],"mappings":";AAYA,gFAgGG;kBA5G+B,OAAO"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/core/Button.jsx"],"names":[],"mappings":";AAsBA,gFAwGG;kBA9H+B,OAAO"}

package/dist/components/core/OptionCard.d.ts

@@ -0,0 +1,14 @@
+/**
+ * OptionCardGroup: lays out `OptionCard`s in a responsive grid and gives them
+ * radiogroup semantics (or checkbox-group semantics with `multiple`).
+ */
+export const OptionCardGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export default OptionCard;
+import React from "react";
+/**
+ * OptionCard: a selectable choice tile (title, description, optional media and
+ * badge). Inside an `OptionCardGroup` it is a radio (or a checkbox with
+ * `multiple`); on its own it is a toggle button with `aria-pressed`.
+ */
+declare const OptionCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+//# sourceMappingURL=OptionCard.d.ts.map

package/dist/components/core/OptionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCard.d.ts","sourceRoot":"","sources":["../../../src/components/core/OptionCard.jsx"],"names":[],"mappings":"AA4CA;;;GAGG;AACH,wFAsIG;;kBA3KI,OAAO;AA+Kd;;;;GAIG;AACH,oFAsJG"}

package/dist/components/core/OptionCardGroup.d.ts

@@ -0,0 +1,2 @@
+export { OptionCardGroup as default } from "./OptionCard.jsx";
+//# sourceMappingURL=OptionCardGroup.d.ts.map

package/dist/components/core/OptionCardGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCardGroup.d.ts","sourceRoot":"","sources":["../../../src/components/core/OptionCardGroup.jsx"],"names":[],"mappings":""}

package/dist/components/core/QuantityStepper.d.ts

@@ -0,0 +1,8 @@
+export default QuantityStepper;
+/**
+ * QuantityStepper: a − / value / + control for cart lines and buy boxes.
+ * The value is a `role="spinbutton"`; the buttons step it and disable at the bounds.
+ */
+declare const QuantityStepper: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=QuantityStepper.d.ts.map

package/dist/components/core/QuantityStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityStepper.d.ts","sourceRoot":"","sources":["../../../src/components/core/QuantityStepper.jsx"],"names":[],"mappings":";AA2BA;;;GAGG;AACH,yFA2JG;kBA1LsC,OAAO"}

package/dist/components/utility/ImageGallery.d.ts

@@ -0,0 +1,4 @@
+export const ImageGallery: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export default ImageGallery;
+import React from "react";
+//# sourceMappingURL=ImageGallery.d.ts.map

package/dist/components/utility/ImageGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.d.ts","sourceRoot":"","sources":["../../../src/components/utility/ImageGallery.jsx"],"names":[],"mappings":"AAQA,qFAuHE;;kBA/HgB,OAAO"}

package/dist/components/utility/imageGalleryParts.d.ts

@@ -0,0 +1,55 @@
+export function PlaceholderBox({ children, className }: {
+    children: any;
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;
+export function GalleryImg({ src, alt, placeholder, className, style }: {
+    src: any;
+    alt: any;
+    placeholder: any;
+    className: any;
+    style: any;
+}): import("react/jsx-runtime").JSX.Element;
+export function useSwipe({ onPrev, onNext, disabled }: {
+    onPrev: any;
+    onNext: any;
+    disabled: any;
+}): {
+    handlers: {
+        onPointerDown: (e: any) => void;
+        onPointerUp: (e: any) => void;
+        onPointerCancel: () => void;
+    };
+    consumeSwipe: () => boolean;
+};
+export function handleRovingKeyDown(e: any): void;
+export function Thumbnails({ images, index, onSelect, side, placeholder }: {
+    images: any;
+    index: any;
+    onSelect: any;
+    side: any;
+    placeholder: any;
+}): import("react/jsx-runtime").JSX.Element;
+export function Mosaic({ images, index, onActivate, ratio, placeholder }: {
+    images: any;
+    index: any;
+    onActivate: any;
+    ratio: any;
+    placeholder: any;
+}): import("react/jsx-runtime").JSX.Element;
+export function Viewer({ images, index, onSelect, ratio, zoom, showCounter, placeholder, label, onExpand, fit }: {
+    images: any;
+    index: any;
+    onSelect: any;
+    ratio: any;
+    zoom: any;
+    showCounter: any;
+    placeholder: any;
+    label: any;
+    onExpand: any;
+    fit?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export function ratioClass(ratio: any): any;
+export const SWIPE_THRESHOLD: 40;
+export const MOSAIC_MAX_TILES: 5;
+export function slideLabel(images: any, i: any): any;
+//# sourceMappingURL=imageGalleryParts.d.ts.map

package/dist/components/utility/imageGalleryParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageGalleryParts.d.ts","sourceRoot":"","sources":["../../../src/components/utility/imageGalleryParts.jsx"],"names":[],"mappings":"AAsCA;;;4CASC;AAGD;;;;;;4CAcC;AAID;;;;;;;;;;;EA2BC;AAID,kDAYC;AAED;;;;;;4CAoCC;AAED;;;;;;4CAgDC;AAiBD;;;;;;;;;;;4CAkGC;AApSM,4CAA0E;AAIjF,8BAA+B,EAAE,CAAA;AAEjC,+BAAgC,CAAC,CAAA;AAG1B,qDAA+F"}

package/dist/esm/components/blocks/AppShell.js

@@ -1,14 +1,14 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, createForOfIteratorHelper as _createForOfIteratorHelper } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Menu, X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
 import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import Sheet from '../feedback/Sheet.js';
 import FootNav from '../navigation/FootNav.js';
 
-var _excluded = ["brand", "nav", "sidebarFooter", "topbar", "pageTitle", "bottomNav", "linkAs", "children", "className"];
+var _excluded = ["brand", "nav", "sidebarFooter", "topbar", "pageTitle", "bottomNav", "linkAs", "navOpen", "onNavOpenChange", "topbarFrom", "children", "className"];
 // Extracted from procurementpro/components/app-shell.tsx (12 of 13 products hand-roll a shell).
 // Sidebar on lg+, top bar + drawer below, optional bottom nav on phones. Colours come from the
 // shell / role tokens, so a brand file restyles it and dark mode needs no extra classes. Nav items
@@ -102,17 +102,28 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     bottomNav = _ref2.bottomNav,
     _ref2$linkAs = _ref2.linkAs,
     Link = _ref2$linkAs === void 0 ? 'a' : _ref2$linkAs,
+    navOpen = _ref2.navOpen,
+    onNavOpenChange = _ref2.onNavOpenChange,
+    _ref2$topbarFrom = _ref2.topbarFrom,
+    topbarFrom = _ref2$topbarFrom === void 0 ? 'always' : _ref2$topbarFrom,
     children = _ref2.children,
     className = _ref2.className,
     props = _objectWithoutProperties(_ref2, _excluded);
+  // The drawer is controlled when `navOpen` is set (#187), e.g. so a FootNav "More" tab can open it.
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
+    openState = _useState2[0],
+    setOpenState = _useState2[1];
+  var controlled = navOpen !== undefined;
+  var open = controlled ? navOpen : openState;
+  var setOpen = useCallback(function (next) {
+    if (!controlled) setOpenState(next);
+    onNavOpenChange === null || onNavOpenChange === void 0 || onNavOpenChange(next);
+  }, [controlled, onNavOpenChange]);
   var menuButton = useRef(null);
   var close = useCallback(function () {
     return setOpen(false);
-  }, []);
+  }, [setOpen]);
   // The mobile drawer is a left Sheet: a modal dialog that moves focus in, traps
   // Tab, closes on Escape / backdrop / drag, locks the page behind and returns
   // focus to the menu button.
@@ -171,7 +182,7 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }), jsxs("div", {
       className: "flex min-w-0 flex-col",
       children: [jsx("header", {
-        className: "sticky top-0 z-sticky border-b border-line bg-surface pt-safe px-safe",
+        className: cn('sticky top-0 z-sticky border-b border-line bg-surface pt-safe px-safe', topbarFrom === 'below-lg' && 'lg:hidden'),
         children: jsxs("div", {
           className: "flex h-14 items-center gap-3 px-4 lg:px-6",
           children: [jsx("button", {

package/dist/esm/components/blocks/ProductCard.js

@@ -0,0 +1,122 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useId } from 'react';
+import { cn } from '../../utils/cn.js';
+import Card from '../utility/Card.js';
+import Checkbox from '../core/Checkbox.js';
+import { normalizeImages, ProductMedia, ProductPrice } from './ProductCardParts.js';
+
+var _excluded = ["image", "images", "imageAlt", "imageRatio", "hover", "title", "eyebrow", "meta", "badges", "price", "compareAtPrice", "discountLabel", "priceFormatter", "layout", "href", "to", "as", "actions", "selectable", "selected", "onSelectedChange", "placeholder", "className"];
+// One link target per card: the title link's ::after stretches over the whole card, so the image
+// and blank space are clickable without nesting interactive elements. Actions and the compare
+// checkbox sit above it: the actions by DOM order, the compare checkbox (before the link) with a card-local
+// stacking index inside the card's `isolate` context. The ring is inset because the card clips its overflow.
+var STRETCHED_LINK = cn("after:absolute after:inset-0 after:rounded-card after:content-['']", 'focus:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-primary-500', 'hover:text-primary-700 dark:hover:text-primary-300');
+var ProductCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var image = _ref.image,
+    images = _ref.images,
+    imageAlt = _ref.imageAlt,
+    _ref$imageRatio = _ref.imageRatio,
+    imageRatio = _ref$imageRatio === void 0 ? '4:3' : _ref$imageRatio,
+    _ref$hover = _ref.hover,
+    hover = _ref$hover === void 0 ? 'none' : _ref$hover,
+    title = _ref.title,
+    eyebrow = _ref.eyebrow,
+    meta = _ref.meta,
+    badges = _ref.badges,
+    price = _ref.price,
+    compareAtPrice = _ref.compareAtPrice,
+    discountLabel = _ref.discountLabel,
+    priceFormatter = _ref.priceFormatter,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'stack' : _ref$layout,
+    href = _ref.href,
+    to = _ref.to,
+    as = _ref.as,
+    actions = _ref.actions,
+    _ref$selectable = _ref.selectable,
+    selectable = _ref$selectable === void 0 ? false : _ref$selectable,
+    selected = _ref.selected,
+    onSelectedChange = _ref.onSelectedChange,
+    placeholder = _ref.placeholder,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var titleId = useId();
+  var row = layout === 'row';
+  var altFallback = imageAlt !== null && imageAlt !== void 0 ? imageAlt : typeof title === 'string' ? title : '';
+  var media = normalizeImages(image, images, altFallback);
+  // Mirrors Button (#145): `as` renders any link component (e.g. a router Link, which gets `to`);
+  // a bare `href` or `to` implies an <a>. No target at all leaves the title as plain text.
+  var linked = Boolean(as) || href !== undefined || to !== undefined;
+  var LinkComponent = as || 'a';
+  // Only defined keys, so an `href: undefined` can't clobber what a router Link derives from `to`.
+  var linkProps = as ? _objectSpread2(_objectSpread2({}, href !== undefined && {
+    href: href
+  }), to !== undefined && {
+    to: to
+  }) : {
+    href: href !== null && href !== void 0 ? href : to
+  };
+  return jsxs(Card, _objectSpread2(_objectSpread2({
+    ref: ref,
+    hover: linked,
+    "data-layout": row ? 'row' : 'stack',
+    className: cn('group relative isolate flex h-full overflow-hidden', row ? 'flex-row sm:flex-col' : 'flex-col', className)
+  }, props), {}, {
+    children: [jsxs(ProductMedia, {
+      images: media,
+      ratio: imageRatio,
+      hover: hover,
+      placeholder: placeholder,
+      row: row,
+      children: [badges && badges.length > 0 && jsx("div", {
+        className: "pointer-events-none absolute left-2 top-2 flex flex-wrap gap-1",
+        "data-slot": "badges",
+        children: React.Children.toArray(badges)
+      }), selectable && jsx("div", {
+        className: "absolute right-2 top-2 z-10 rounded-md bg-surface/90 px-2 py-1 shadow-sm",
+        children: jsx(Checkbox, _objectSpread2(_objectSpread2({
+          size: "sm",
+          label: "Compare",
+          ariaLabel: typeof title === 'string' ? "Compare ".concat(title) : undefined,
+          "aria-describedby": typeof title === 'string' ? undefined : titleId
+        }, selected !== undefined ? {
+          checked: Boolean(selected)
+        } : {}), {}, {
+          onChange: function onChange(e) {
+            return onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(e.target.checked, e);
+          }
+        }))
+      })]
+    }), jsxs("div", {
+      className: "flex min-w-0 flex-1 flex-col p-3 sm:p-4",
+      children: [eyebrow && jsx("p", {
+        className: "text-xs font-medium uppercase tracking-wide text-muted",
+        children: eyebrow
+      }), jsx("h3", {
+        id: titleId,
+        className: "mt-0.5 line-clamp-2 text-sm font-semibold text-foreground sm:text-base",
+        children: linked ? jsx(LinkComponent, _objectSpread2(_objectSpread2({}, linkProps), {}, {
+          className: STRETCHED_LINK,
+          children: title
+        })) : title
+      }), meta && jsx("p", {
+        className: "mt-1 line-clamp-1 text-xs text-muted sm:text-sm",
+        children: meta
+      }), jsx(ProductPrice, {
+        price: price,
+        compareAtPrice: compareAtPrice,
+        discountLabel: discountLabel,
+        priceFormatter: priceFormatter
+      }), actions && jsx("div", {
+        className: "relative mt-auto flex flex-wrap gap-2 pt-3",
+        "data-slot": "actions",
+        children: actions
+      })]
+    })]
+  }));
+});
+ProductCard.displayName = 'ProductCard';
+
+export { ProductCard as default };

package/dist/esm/components/blocks/ProductCardParts.js

@@ -0,0 +1,128 @@
+'use client';
+import { toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { ImageOff } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+// Class names are written out in full so Tailwind keeps them.
+var RATIOS = {
+  '4:3': 'aspect-[4/3]',
+  '1:1': 'aspect-square',
+  '3:4': 'aspect-[3/4]'
+};
+// Created lazily: Intl.NumberFormat is costly to build and most grids render dozens of cards.
+var inrFormatter;
+var defaultPriceFormatter = function defaultPriceFormatter(value) {
+  if (!inrFormatter) inrFormatter = new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: 'INR',
+    maximumFractionDigits: 0
+  });
+  return inrFormatter.format(value);
+};
+/** Numbers go through the formatter; strings (e.g. "From ₹999") pass through untouched. */
+var formatPrice = function formatPrice(value) {
+  var formatter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPriceFormatter;
+  return typeof value === 'number' && Number.isFinite(value) ? formatter(value) : value;
+};
+/** "26% off" when both prices are numbers and the compare-at price is higher; otherwise null. */
+var computeDiscount = function computeDiscount(price, compareAtPrice) {
+  if (typeof price !== 'number' || typeof compareAtPrice !== 'number') return null;
+  if (!(compareAtPrice > price) || price < 0) return null;
+  var pct = Math.round((1 - price / compareAtPrice) * 100);
+  return pct > 0 ? "".concat(pct, "% off") : null;
+};
+/** `image` / `images` (strings or `{ src, alt }`) → `[{ src, alt }]`, cover first. */
+var normalizeImages = function normalizeImages(image, images) {
+  var fallbackAlt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var list = [image].concat(_toConsumableArray(images || [])).filter(Boolean);
+  return list.map(function (img) {
+    return typeof img === 'string' ? {
+      src: img,
+      alt: fallbackAlt
+    } : _objectSpread2({
+      alt: fallbackAlt
+    }, img);
+  });
+};
+var HOVER_SWAP = 'motion-safe:transition-opacity motion-safe:duration-base motion-safe:ease-standard';
+var ProductMedia = function ProductMedia(_ref) {
+  var images = _ref.images,
+    _ref$ratio = _ref.ratio,
+    ratio = _ref$ratio === void 0 ? '4:3' : _ref$ratio,
+    _ref$hover = _ref.hover,
+    hover = _ref$hover === void 0 ? 'none' : _ref$hover,
+    placeholder = _ref.placeholder,
+    row = _ref.row,
+    children = _ref.children;
+  var cover = images[0];
+  var second = hover === 'second-image' ? images[1] : undefined;
+  // Remember which src failed, so a new cover gets a fresh chance to load.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    failedSrc = _useState2[0],
+    setFailedSrc = _useState2[1];
+  var showImage = cover && failedSrc !== cover.src;
+  return jsxs("div", {
+    className: cn('relative shrink-0 overflow-hidden bg-secondary-100 dark:bg-secondary-800', RATIOS[ratio] || RATIOS['4:3'], row ? 'w-28 sm:w-full' : 'w-full'),
+    "data-slot": "media",
+    children: [showImage ? jsxs(Fragment, {
+      children: [jsx("img", {
+        src: cover.src,
+        alt: cover.alt,
+        loading: "lazy",
+        onError: function onError() {
+          return setFailedSrc(cover.src);
+        },
+        className: cn('h-full w-full object-cover', hover === 'zoom' && 'motion-safe:transition-transform motion-safe:duration-slow motion-safe:ease-standard motion-safe:group-hover:scale-105', second && cn(HOVER_SWAP, 'group-hover:opacity-0'))
+      }), second &&
+      // Same product from another angle: decorative, the cover's alt already names it.
+      jsx("img", {
+        src: second.src,
+        alt: "",
+        "aria-hidden": "true",
+        loading: "lazy",
+        className: cn('absolute inset-0 h-full w-full object-cover opacity-0 group-hover:opacity-100', HOVER_SWAP)
+      })]
+    }) : jsx("div", {
+      className: "grid h-full w-full place-items-center text-muted",
+      "data-slot": "placeholder",
+      children: placeholder !== null && placeholder !== void 0 ? placeholder : jsx(ImageOff, {
+        className: "h-8 w-8",
+        "aria-hidden": "true"
+      })
+    }), children]
+  });
+};
+var ProductPrice = function ProductPrice(_ref2) {
+  var price = _ref2.price,
+    compareAtPrice = _ref2.compareAtPrice,
+    discountLabel = _ref2.discountLabel,
+    priceFormatter = _ref2.priceFormatter;
+  if (price == null && compareAtPrice == null) return null;
+  var discount = discountLabel !== null && discountLabel !== void 0 ? discountLabel : computeDiscount(price, compareAtPrice);
+  var hasCompare = compareAtPrice != null;
+  return jsxs("p", {
+    className: "mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5",
+    "data-slot": "price",
+    children: [price != null && jsxs("span", {
+      className: "text-lg font-semibold tracking-tight text-foreground tabular-nums",
+      children: [hasCompare && jsx("span", {
+        className: "sr-only",
+        children: "Sale price: "
+      }), formatPrice(price, priceFormatter)]
+    }), hasCompare && jsxs("s", {
+      className: "text-sm text-muted tabular-nums",
+      children: [jsx("span", {
+        className: "sr-only",
+        children: "Original price: "
+      }), formatPrice(compareAtPrice, priceFormatter)]
+    }), discount && jsx("span", {
+      className: "text-sm font-semibold text-success-700 dark:text-success-400",
+      children: discount
+    })]
+  });
+};
+
+export { ProductMedia, ProductPrice, computeDiscount, defaultPriceFormatter, formatPrice, normalizeImages };

package/dist/esm/components/blocks/StatCard.js

@@ -7,7 +7,7 @@ import { cn } from '../../utils/cn.js';
 import Card from '../utility/Card.js';
 import { Bone } from './LoadingState.js';
 
-var _excluded = ["label", "value", "icon", "tone", "change", "loading", "className"];
+var _excluded = ["label", "value", "icon", "tone", "change", "loading", "tinted", "children", "className"];
 // Extracted from PracticePro/components/ui/StatCard.tsx (28 imports), with tones mapped to the
 // semantic scales instead of product colours. Class names are written out in full so Tailwind keeps them.
 var TONES = {
@@ -18,6 +18,15 @@ var TONES = {
   error: 'bg-error-50 text-error-600 dark:bg-error-900/40 dark:text-error-300',
   info: 'bg-info-50 text-info-600 dark:bg-info-900/40 dark:text-info-300'
 };
+// `tinted` (#188): the whole card in the tone, e.g. an overdue card in error-50 / error-200 / error-800.
+var TINTS = {
+  primary: 'border-primary-200 bg-primary-50 text-primary-800 dark:border-primary-800 dark:bg-primary-900/30 dark:text-primary-200',
+  secondary: 'border-secondary-200 bg-secondary-50 text-secondary-800 dark:border-secondary-700 dark:bg-secondary-800/40 dark:text-secondary-200',
+  success: 'border-success-200 bg-success-50 text-success-800 dark:border-success-800 dark:bg-success-900/30 dark:text-success-200',
+  warning: 'border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/30 dark:text-warning-200',
+  error: 'border-error-200 bg-error-50 text-error-800 dark:border-error-800 dark:bg-error-900/30 dark:text-error-200',
+  info: 'border-info-200 bg-info-50 text-info-800 dark:border-info-800 dark:bg-info-900/30 dark:text-info-200'
+};
 var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _change$goodWhenUp, _change$unit;
   var label = _ref.label,
@@ -28,13 +37,16 @@ var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     change = _ref.change,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$tinted = _ref.tinted,
+    tinted = _ref$tinted === void 0 ? false : _ref$tinted,
+    children = _ref.children,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var up = change ? change.value >= 0 : false;
   var good = change ? ((_change$goodWhenUp = change.goodWhenUp) !== null && _change$goodWhenUp !== void 0 ? _change$goodWhenUp : true) === up : false;
   return jsx(Card, _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('h-full', className)
+    className: cn('h-full', tinted && (TINTS[tone] || TINTS.primary), className)
   }, props), {}, {
     children: jsxs("div", {
       className: "flex items-start gap-4 p-5",
@@ -43,16 +55,16 @@ var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "aria-hidden": "true",
         children: icon
       }), jsxs("div", {
-        className: "min-w-0",
+        className: "min-w-0 flex-1",
         children: [jsx("p", {
-          className: "text-sm text-muted",
+          className: cn('text-sm', tinted ? 'text-current opacity-80' : 'text-muted'),
           children: label
         }), loading ? jsx(Bone, {
           height: 32,
           width: 72,
           className: "mt-1"
         }) : jsx("p", {
-          className: "mt-0.5 text-2xl font-semibold tracking-tight text-foreground tabular-nums sm:text-3xl",
+          className: cn('mt-0.5 text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl', tinted ? 'text-current' : 'text-foreground'),
           children: value
         }), change && !loading && jsxs("p", {
           className: "mt-1 flex items-center gap-1 text-xs text-muted",
@@ -69,6 +81,9 @@ var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               children: [up ? 'Up' : 'Down', " "]
             }), Math.abs(change.value), (_change$unit = change.unit) !== null && _change$unit !== void 0 ? _change$unit : '%']
           }), change.period]
+        }), children != null && children !== false && jsx("div", {
+          className: "mt-3 space-y-2 text-sm",
+          children: children
         })]
       })]
     })

package/dist/esm/components/core/Button.js

@@ -6,19 +6,30 @@ import { cn } from '../../utils/cn.js';
 import { TOUCH_TARGET, PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 import { Loader2 } from 'lucide-react';
 
-var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth", "as", "onClick"];
+var _excluded = ["className", "variant", "size", "tone", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth", "as", "onClick"];
 // Square, icon-only sizes. Pair with an `aria-label` (there is no visible text).
 var ICON_SIZES = {
   'icon-sm': 'h-8 w-8 p-0',
   icon: 'h-10 w-10 p-0',
   'icon-lg': 'h-12 w-12 p-0'
 };
+// Text colour of `variant="link"`, picked with `tone`. Written out in full so Tailwind keeps them.
+var LINK_TONES = {
+  primary: 'text-primary-700 focus-visible:ring-primary-500 dark:text-primary-300',
+  secondary: 'text-secondary-700 focus-visible:ring-secondary-500 dark:text-secondary-300',
+  success: 'text-success-700 focus-visible:ring-success-500 dark:text-success-400',
+  warning: 'text-warning-800 focus-visible:ring-warning-500 dark:text-warning-400',
+  error: 'text-error-700 focus-visible:ring-error-500 dark:text-error-400',
+  info: 'text-info-700 focus-visible:ring-info-500 dark:text-info-300'
+};
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
     disabled = _ref.disabled,
     loading = _ref.loading,
     children = _ref.children,
@@ -34,6 +45,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isNativeButton = Component === 'button';
   var isDisabled = disabled || loading;
   var isIconSize = Boolean(ICON_SIZES[size]);
+  var isLink = variant === 'link';
   var baseClasses = cn('relative inline-flex items-center justify-center rounded-md font-medium',
   // Press shrink + an explicit transition for colours and the shrink;
   // both are off under prefers-reduced-motion.
@@ -53,7 +65,10 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     'h-12 px-6 text-base': size === 'lg',
     'h-14 px-8 text-lg': size === 'xl',
     'h-16 px-10 text-xl': size === '2xl'
-  }, TOUCH_TARGET, size === 'xs' || size === 'sm' || size === 'icon-sm' || size === 'icon'), 'w-full', fullWidth), ICON_SIZES[size], className);
+  }, TOUCH_TARGET, isLink || size === 'xs' || size === 'sm' || size === 'icon-sm' || size === 'icon'), 'w-full', fullWidth), ICON_SIZES[size],
+  // A text link: no background, border or padding (it keeps the size's text
+  // scale), underlined on hover, coloured by `tone`.
+  isLink && cn('h-auto bg-transparent p-0 underline-offset-4 hover:underline focus-visible:underline', LINK_TONES[tone] || LINK_TONES.primary), className);
   var content = jsxs(Fragment, {
     children: [leftIcon && jsx("span", {
       className: isIconSize ? undefined : 'mr-2',