@scattered-light/loomiere-base-ui 0.15.6 → 0.17.0

package/README.md

@@ -31,7 +31,7 @@ Use Base UI as usual, with the class names the styles target, or the few wrapper
 import {
   Accordion, AlertDialog, Autocomplete, Avatar, Badge, Button, Calendar, Checkbox, CheckboxGroup, Collapsible,
   AppBar, AppBarSpacer, Combobox, ContextMenu, DatePicker, DatePresets, DescriptionItem, DescriptionList, Dialog, Drawer, EmptyState, Field, Form, Input, ListDetail, Menu, Menubar, Meter, MoneyField, NumberField, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger,
-  OTPField, Popover, PreviewCard, Progress, Radio, ScrollArea, Select, Separator, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Slider, Splitter, StatFigure, Switch,
+  OTPField, Popover, PreviewCard, Progress, Radio, ScrollArea, Select, Separator, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Slider, Splitter, StatCard, StatFigure, Switch,
   Tabs, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, useListDetail,
 } from '@scattered-light/loomiere-base-ui';
 ```
@@ -162,6 +162,21 @@ Pieces for pages that read like an accountant's working paper. They use the them
 <StatFigure label="Book balance" value="75.00" caption="DR · Oct 29" underline="double" />
 ```
 
+`StatCard` is a card for one thing a page lists (an Entity, an account): a heading, a caption, and a row of figures ruled off under them. Give it `href` or `onOpen` and the whole card opens through its title, with one tab stop named by the title. `headingLevel` fits it to the page's outline. `footer` adds a line under the figures, and `tag` puts a small mark (a count of what is new, a status) at the top right.
+
+```tsx
+<StatCard
+  title="North Company"
+  caption="USD · 1 account"
+  onOpen={() => open('north')}
+  facts={[
+    { label: 'Questions', value: '1', tone: 'accent' },
+    { label: 'Docs', value: '–' },
+    { label: 'Review', value: '2', tone: 'accent' },
+  ]}
+/>
+```
+
 `DescriptionList` holds `DescriptionItem` pairs (a `dt` and a `dd`). The default sets labels in a column beside their values; `variant="leader"` runs a dotted leader from each label to its value at the end of the row.
 
 Totals in a plain table are rows: `<tr data-total="subtotal">` rules a line above, `<tr data-total="grand">` adds a double rule under. Put `data-rule="none"` on label and blank cells so the rules only run under the figures. In a DataTable, `totalStyle="subtotal"` or `"grand"` does the same to the footer (the default, `"band"`, keeps the header tray).

package/dist/{chunk-RLXKWWZG.js → chunk-DBNGJCTF.js}

@@ -3538,6 +3538,30 @@ var StatFigure = React10.forwardRef(function StatFigure2({ className, label, val
     }
   );
 });
+var StatCard = React10.forwardRef(function StatCard2({ className, title, caption, facts, href, onOpen, headingLevel = 3, footer, tag, ...props }, ref) {
+  const Heading = `h${headingLevel}`;
+  const interactive = href != null || onOpen != null;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      ref,
+      className: cn("StatCard", className),
+      "data-interactive": interactive ? "" : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "StatCardHeader", children: [
+          /* @__PURE__ */ jsxs("div", { className: "StatCardHeading", children: [
+            /* @__PURE__ */ jsx(Heading, { className: "StatCardTitle", children: href != null ? /* @__PURE__ */ jsx("a", { className: "StatCardLink", href, children: title }) : onOpen != null ? /* @__PURE__ */ jsx("button", { className: "StatCardLink", type: "button", onClick: onOpen, children: title }) : title }),
+            caption != null ? /* @__PURE__ */ jsx("p", { className: "StatCardCaption", children: caption }) : null
+          ] }),
+          tag != null ? /* @__PURE__ */ jsx("span", { className: "StatCardTag", children: tag }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "StatCardFacts", style: { gridTemplateColumns: `repeat(${Math.max(facts.length, 1)}, minmax(0, 1fr))` }, children: facts.map((fact, index) => /* @__PURE__ */ jsx(StatFigure, { size: "sm", ...fact }, index)) }),
+        footer != null ? /* @__PURE__ */ jsx("div", { className: "StatCardFooter", children: footer }) : null
+      ]
+    }
+  );
+});
 var DescriptionList = React10.forwardRef(function DescriptionList2({ className, variant, ...props }, ref) {
   return /* @__PURE__ */ jsx("dl", { ref, className: cn("DescriptionList", className), "data-variant": variant === "leader" ? "leader" : void 0, ...props });
 });
@@ -3847,6 +3871,6 @@ var EditableList = {
   Balance: EditableListBalance
 };
 
-export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, Drawer, EditableList, Field, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, NumberField, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Popover, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney2 as formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday };
-//# sourceMappingURL=chunk-RLXKWWZG.js.map
-//# sourceMappingURL=chunk-RLXKWWZG.js.map
+export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, Drawer, EditableList, Field, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, NumberField, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Popover, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatCard, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney2 as formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday };
+//# sourceMappingURL=chunk-DBNGJCTF.js.map
+//# sourceMappingURL=chunk-DBNGJCTF.js.map