@scattered-light/loomiere-base-ui 0.7.1 → 0.9.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,
+  AppBar, AppBarSpacer, Combobox, ContextMenu, DatePicker, DatePresets, DescriptionItem, DescriptionList, Dialog, Drawer, EmptyState, Field, Form, Input, ListDetail, Menu, Menubar, Meter, MoneyField, NumberField, PickerButton,
+  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,57 @@ 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).
+
+### App bar: AppBar, PickerButton and a segmented ToggleGroup
+
+`AppBar` is the bar across the top of an app window: one row on a line in the rule color, so an ink-rule brand gets the working-paper rule under it. `AppBarSpacer` pushes what follows it to the end, and a vertical `Separator` is a short divider between icon actions. Icon actions are quiet `Button`s holding only an icon, with an `aria-label`.
+
+`PickerButton` names what it picks with a caps label before the choice. It opens nothing itself; render it as a trigger:
+
+```tsx
+<AppBar>
+  <strong>tullo</strong>
+  <Menu.Root>
+    <Menu.Trigger render={(props) => <PickerButton {...props} label="Entity" value={entity.name} />} />
+    {/* Menu.Portal, Positioner, Popup, RadioGroup... */}
+  </Menu.Root>
+  <AppBarSpacer />
+  <ToggleGroup data-variant="segmented" aria-label="Modules" value={[module]} onValueChange={...}>
+    <Toggle value="accounting">Accounting</Toggle>
+    <Toggle value="tax">Tax</Toggle>
+  </ToggleGroup>
+  <Button emphasis="quiet" aria-label="Documents"><DocumentIcon /></Button>
+  <Separator orientation="vertical" />
+  <Button emphasis="quiet" aria-label="More"><MoreIcon /></Button>
+</AppBar>
+```
+
+`data-variant="segmented"` on a `ToggleGroup` joins its toggles in one outline (`toggle-group.segmented-border-color`, the rule color) and fills the pressed one solid (`fill.inverse`), for switching between a few views or modules.
+
 ### 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-LQWPDLLQ.js}

@@ -3499,6 +3499,69 @@ 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 AppBar = React10.forwardRef(function AppBar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("header", { ref, className: cn("AppBar", className), ...props });
+});
+var AppBarSpacer = React10.forwardRef(function AppBarSpacer2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("AppBarSpacer", className), "aria-hidden": "true", ...props });
+});
+var PickerButton = React10.forwardRef(function PickerButton2({ className, label, value, placeholder, type = "button", children, ...props }, ref) {
+  const empty = value == null || value === "";
+  return /* @__PURE__ */ jsxs("button", { ref, type, className: cn("PickerButton", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "PickerButtonLabel", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "PickerButtonValue", "data-placeholder": empty ? "" : void 0, children: empty ? placeholder : value }),
+    children,
+    /* @__PURE__ */ jsx("svg", { className: "PickerButtonIcon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
+  ] });
+});
 var EditableListContext = React10.createContext(null);
 function slug(value) {
   return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "field";
@@ -3718,6 +3781,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 { 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, 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-LQWPDLLQ.js.map
+//# sourceMappingURL=chunk-LQWPDLLQ.js.map