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

package/README.md

@@ -31,7 +31,7 @@ Use Base UI as usual, with the class names the styles target, or the few wrapper
 import {
   Accordion, AlertDialog, Autocomplete, Avatar, Badge, Button, Calendar, Checkbox, CheckboxGroup, Collapsible,
   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,
+  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';
 ```
@@ -192,6 +192,21 @@ Totals in a plain table are rows: `<tr data-total="subtotal">` rules a line abov
 
 `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-LQWPDLLQ.js → chunk-PV5YOQMN.js}

@@ -3562,6 +3562,57 @@ var PickerButton = React10.forwardRef(function PickerButton2({ className, label,
     /* @__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";
@@ -3781,6 +3832,6 @@ var EditableList = {
   Balance: EditableListBalance
 };
 
-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
+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