@scattered-light/loomiere-base-ui 0.8.0 → 0.10.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, 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,
+  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, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Slider, Splitter, StatFigure, Switch,
   Tabs, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, useListDetail,
 } from '@scattered-light/loomiere-base-ui';
 ```
@@ -166,6 +166,47 @@ 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.
+
+### Side navigation: SideNav
+
+`SideNav` is the column of links down the side of a workspace, named by `aria-label`. `SideNavItem` is a row (a link): `current` marks the page you are on, `count` shows a figure at the end, and a `disabled` row takes a `hint`. `SideNavGroup` adds a caps heading over a set of rows. `SideNavToggle` sits inside the `SideNav` on its edge and collapses it; the parent sets the column's width and must not clip it (`overflow: visible`).
+
+```tsx
+<SideNav aria-label="Entity navigation" collapsed={collapsed}>
+  <SideNavItem current href="/entity">Entity Dashboard</SideNavItem>
+  <SideNavItem count={5} href="/open">Open Items</SideNavItem>
+  <SideNavGroup label="Books">
+    <SideNavItem href="/accounts">Financial Accounts</SideNavItem>
+  </SideNavGroup>
+  <SideNavToggle collapsed={collapsed} onCollapsedChange={setCollapsed} />
+</SideNav>
+```
+
 ### 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-PV5YOQMN.js}

@@ -3547,6 +3547,72 @@ 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 SideNav = React10.forwardRef(function SideNav2({ className, collapsed, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx("nav", { ref, className: cn("SideNav", className), "data-collapsed": collapsed ? "" : void 0, ...props, children });
+});
+var SideNavItem = React10.forwardRef(function SideNavItem2({ className, current, count, countTone, disabled, hint, children, href, onClick, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ref,
+      className: cn("SideNavItem", className),
+      href: disabled ? void 0 : href ?? "#",
+      "aria-current": current ? "page" : void 0,
+      "aria-disabled": disabled ? true : void 0,
+      "data-current": current ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      onClick: disabled ? (event) => event.preventDefault() : onClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "SideNavItemText", children: [
+          /* @__PURE__ */ jsx("span", { className: "SideNavItemLabel", children }),
+          hint != null ? /* @__PURE__ */ jsx("span", { className: "SideNavItemHint", children: hint }) : null
+        ] }),
+        count != null ? /* @__PURE__ */ jsx("span", { className: "SideNavItemCount", "data-tone": countTone === "quiet" ? "quiet" : void 0, children: count }) : null
+      ]
+    }
+  );
+});
+var SideNavGroup = React10.forwardRef(function SideNavGroup2({ className, label, children, ...props }, ref) {
+  const labelId = React10.useId();
+  return /* @__PURE__ */ jsxs("div", { ref, role: "group", "aria-labelledby": labelId, className: cn("SideNavGroup", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "SideNavGroupLabel", id: labelId, children: label }),
+    children
+  ] });
+});
+var SideNavToggle = React10.forwardRef(function SideNavToggle2({ className, collapsed, onCollapsedChange, label, onClick, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn("SideNavToggle", className),
+      "aria-expanded": !collapsed,
+      "aria-label": label ?? (collapsed ? "Expand navigation" : "Collapse navigation"),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onCollapsedChange(!collapsed);
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx("svg", { className: "SideNavToggleIcon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 3.5 5.5 8l4.5 4.5" }) })
+    }
+  );
+});
 var EditableListContext = React10.createContext(null);
 function slug(value) {
   return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "field";
@@ -3766,6 +3832,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, 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-PV5YOQMN.js.map
+//# sourceMappingURL=chunk-PV5YOQMN.js.map