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

package/README.md

@@ -30,7 +30,7 @@ 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, DescriptionItem, DescriptionList, Dialog, Drawer, EmptyState, Field, Form, Input, ListDetail, Menu, Menubar, Meter, MoneyField, NumberField,
+  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';
@@ -166,6 +166,32 @@ Pieces for pages that read like an accountant's working paper. They use the them
 
 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-LJQ3RZDJ.js → chunk-LQWPDLLQ.js}

@@ -3547,6 +3547,21 @@ var DescriptionItem = React10.forwardRef(function DescriptionItem2({ className,
     /* @__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";
@@ -3766,6 +3781,6 @@ var EditableList = {
   Balance: EditableListBalance
 };
 
-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
+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