@scattered-light/loomiere-base-ui 0.7.0 → 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.
@@ -158,9 +183,9 @@ import { EditableList } from '@scattered-light/loomiere-base-ui/custom';
 
 Columns decide how a value sorts, searches, filters and totals. `rowHeader` names the row. One column may use a tabs filter. Money totals add in minor units. Search is deferred, not debounced.
 
-The toolbar keeps the tabs and the search while rows are selected, and swaps the trailing controls for the selection bar, so the bar does not push the search down. A list sorts from the toolbar. A table sorts from its headers. Sort cycles ascending, descending, then back to the system's default.
+The toolbar keeps the tabs and the search while rows are selected, and swaps the trailing controls for the selection bar, so the bar does not push the search down. The search grows to fill the row beside the filters and actions, and wraps to its own line before it gets narrower than `collection.search-min-width`. Its icon and its clear button sit inside the field, and that clear button is the only one: the toolbar has no Clear filters button. When nothing matches, the no-results state in the table or list offers Clear filters. A list sorts from the toolbar. A table sorts from its headers. Sort cycles ascending, descending, then back to the system's default.
 
-Keyboard, on a table or a list, when a row can be activated: the row-header buttons are one tab stop. Up and Down move between rows. Home and End go to the first and last row on the page. Space toggles that row's checkbox. Enter activates the row. Escape clears the search when it has text. Arrow keys do nothing while focus is in a field inside a cell. This is a data table, not a grid.
+Keyboard, on a table or a list, when a row can be activated: the row-header buttons are one tab stop. Up and Down move between rows. Home and End go to the first and last row on the page. Space toggles that row's checkbox. Enter activates the row. Escape clears the search when it has text, and so does the clear button inside the field. Arrow keys do nothing while focus is in a field inside a cell. This is a data table, not a grid.
 
 State attributes on the view: `data-sorted`, `data-filtered`, `data-selecting`, `data-loading`, `data-grouped`, `data-view` (`table` or `list`), `data-size` (`sm` or `md`).
 

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