@scattered-light/loomiere-base-ui 0.7.1 → 0.8.0

package/README.md

@@ -30,8 +30,8 @@ Use Base UI as usual, with the class names the styles target, or the few wrapper
 ```tsx
 import {
   Accordion, AlertDialog, Autocomplete, Avatar, Badge, Button, Calendar, Checkbox, CheckboxGroup, Collapsible,
-  Combobox, ContextMenu, DatePicker, DatePresets, Dialog, Drawer, EmptyState, Field, Form, Input, ListDetail, Menu, Menubar, Meter, MoneyField, NumberField,
-  OTPField, Popover, PreviewCard, Progress, Radio, ScrollArea, Select, Separator, Slider, Splitter, Switch,
+  Combobox, ContextMenu, DatePicker, DatePresets, DescriptionItem, DescriptionList, Dialog, Drawer, EmptyState, Field, Form, Input, ListDetail, Menu, Menubar, Meter, MoneyField, NumberField,
+  OTPField, Popover, PreviewCard, Progress, Radio, ScrollArea, Select, Separator, Sheet, Slider, Splitter, StatFigure, Switch,
   Tabs, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, useListDetail,
 } from '@scattered-light/loomiere-base-ui';
 ```
@@ -141,6 +141,31 @@ A filtered table keeps its header. The empty row does not hover:
 </Combobox.Empty>
 ```
 
+### Working papers: Sheet, StatFigure, DescriptionList and ruled totals
+
+Pieces for pages that read like an accountant's working paper. They use the theme's rule color (`rule.color`) and the `caps-condense` and `figures-*` text styles, so they follow the brand.
+
+`Sheet` is a section with a heavier rule across its top and an optional tab label sitting on the rule. The label names the section; without one, give it an `aria-label`. `action` sits at the end of the header row. Content runs edge to edge, and a Table, DataTable or DataList directly inside drops its own frame; `inset` pads free content instead.
+
+```tsx
+<Sheet label="Profile" action={<a href="/entity/edit">Edit</a>}>
+  <DescriptionList variant="leader">
+    <DescriptionItem label="Legal name">North Company LLC</DescriptionItem>
+    <DescriptionItem label="Fiscal year">Starts January</DescriptionItem>
+  </DescriptionList>
+</Sheet>
+```
+
+`StatFigure` is one large figure with a caps label and an optional caption. `underline="double"` is the double rule under a final total, `tone="accent"` colors a figure that asks for action, and `size="sm"` fits a row of figures in a card. Pass the figure already formatted (`"(40.00)"`).
+
+```tsx
+<StatFigure label="Book balance" value="75.00" caption="DR · Oct 29" underline="double" />
+```
+
+`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).
+
 ### Collection
 
 Install the peer, then import the views from their own entry. `EditableList` does not need it, and comes from `./custom` like Badge.

package/dist/{chunk-JUUPOOQQ.js → chunk-LJQ3RZDJ.js}

@@ -3499,6 +3499,54 @@ var ListDetail = {
   List: ListDetailList,
   Detail: ListDetailDetail
 };
+var Sheet = React10.forwardRef(function Sheet2({ className, label, action, inset, children, ...props }, ref) {
+  const labelId = React10.useId();
+  const named = label != null && props["aria-label"] == null && props["aria-labelledby"] == null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn("Sheet", className),
+      "data-tab": label != null ? "" : void 0,
+      "aria-labelledby": named ? labelId : void 0,
+      ...props,
+      children: [
+        label != null || action != null ? /* @__PURE__ */ jsxs("div", { className: "SheetHeader", children: [
+          label != null ? /* @__PURE__ */ jsx("span", { className: "SheetTab", id: labelId, children: label }) : null,
+          action != null ? /* @__PURE__ */ jsx("span", { className: "SheetAction", children: action }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "SheetBody", "data-inset": inset ? "" : void 0, children })
+      ]
+    }
+  );
+});
+var StatFigure = React10.forwardRef(function StatFigure2({ className, label, value, caption, underline, tone, size, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("StatFigure", className),
+      "data-underline": underline === "double" ? "double" : void 0,
+      "data-tone": tone === "accent" ? "accent" : void 0,
+      "data-size": size === "sm" ? "sm" : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "StatFigureLabel", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "StatFigureValue", children: value }),
+        caption != null ? /* @__PURE__ */ jsx("span", { className: "StatFigureCaption", children: caption }) : 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 });
+});
+var DescriptionItem = React10.forwardRef(function DescriptionItem2({ className, label, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("DescriptionItem", className), ...props, children: [
+    /* @__PURE__ */ jsx("dt", { className: "DescriptionTerm", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "DescriptionDetails", children })
+  ] });
+});
 var EditableListContext = React10.createContext(null);
 function slug(value) {
   return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "field";
@@ -3718,6 +3766,6 @@ var EditableList = {
   Balance: EditableListBalance
 };
 
-export { Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, Drawer, EditableList, Field, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, NumberField, Popover, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, 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-JUUPOOQQ.js.map
-//# sourceMappingURL=chunk-JUUPOOQQ.js.map
+export { 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, Popover, Sheet, 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-LJQ3RZDJ.js.map
+//# sourceMappingURL=chunk-LJQ3RZDJ.js.map