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

package/dist/custom/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, au as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, av as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aw as KeyOptions, L as ListDetail, u as ListDetailCloseReason, ax as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, ay as ListDetailList, az as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aA as MAX_MINOR_UNITS, aB as MoneyChangeDetails, aC as MoneyDisplay, M as MoneyField, aD as MoneyFieldAffix, aE as MoneyFieldGroup, aF as MoneyFieldInput, z as MoneyFieldProps, aG as MoneyFieldRoot, F as MoneyFieldRootProps, aH as MoneyFieldSteps, aI as NormalizedPaste, aJ as PanelSpec, P as PickerButton, H as PickerButtonProps, I as Preset, J as PresetValue, aK as RuntimePanel, S as Sheet, K as SheetProps, aL as Size, aM as SizeInput, O as Splitter, aN as SplitterHandle, Q as SplitterHandleProps, aO as SplitterKey, aP as SplitterPanel, R as SplitterPanelProps, aQ as SplitterRoot, T as SplitterRootProps, U as StatFigure, V as StatFigureProps, aR as StoredLayout, aS as StoredPanel, W as addDays, X as addMonths, aT as affixSide, aU as applyKey, aV as applyStored, aW as ariaPercents, Y as builtinPresets, Z as clampDate, aX as createPanels, aY as cssSize, aZ as currencyName, a_ as currencySymbol, _ as daysInMonth, $ as defaultPresets, a0 as defaultWeekStartsOn, a1 as endOfWeek, a$ as formatDay, b0 as formatFull, a2 as formatMoney, a3 as fromMinorUnits, a4 as getCurrencyDigits, b1 as handleTarget, a5 as inclusiveDays, a6 as isValidCurrency, a7 as isoWeek, a8 as last30Days, a9 as last7Days, aa as lastMonth, ab as lastWeek, b2 as layoutOf, ac as lengthBlockReason, b3 as measure, b4 as monthCells, b5 as moveFocusDate, ad as nextMonth, ae as nextWeek, b6 as normalizePaste, af as orderRange, b7 as parseDate, ag as parseDecimalString, b8 as parseSize, b9 as presetInBounds, ba as resetToDefault, bb as resizeByDelta, ah as resolvePreset, bc as roundHalfExpand, bd as roundingChangesValue, be as sameSelection, bf as serializeSize, bg as settle, bh as sizeText, ai as startOfWeek, bi as syncPanels, aj as thisMonth, ak as thisQuarter, al as thisWeek, am as toDecimalString, an as toMinorUnits, ao as today, ap as todayDate, bj as toggleCollapsed, aq as tomorrow, ar as useListDetail, bk as valueText, as as yearToDate, at as yesterday } from '../index-DdHpYalU.js';
+export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, aC as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aD as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aE as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aF as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aG as ListDetailList, aH as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aI as MAX_MINOR_UNITS, aJ as MoneyChangeDetails, aK as MoneyDisplay, M as MoneyField, aL as MoneyFieldAffix, aM as MoneyFieldGroup, aN as MoneyFieldInput, z as MoneyFieldProps, aO as MoneyFieldRoot, F as MoneyFieldRootProps, aP as MoneyFieldSteps, aQ as NormalizedPaste, aR as PanelSpec, P as PickerButton, H as PickerButtonProps, I as Preset, J as PresetValue, aS as RuntimePanel, S as Sheet, K as SheetProps, O as SideNav, Q as SideNavGroup, R as SideNavGroupProps, T as SideNavItem, U as SideNavItemProps, V as SideNavProps, W as SideNavToggle, X as SideNavToggleProps, aT as Size, aU as SizeInput, Y as Splitter, aV as SplitterHandle, Z as SplitterHandleProps, aW as SplitterKey, aX as SplitterPanel, _ as SplitterPanelProps, aY as SplitterRoot, $ as SplitterRootProps, a0 as StatFigure, a1 as StatFigureProps, aZ as StoredLayout, a_ as StoredPanel, a2 as addDays, a3 as addMonths, a$ as affixSide, b0 as applyKey, b1 as applyStored, b2 as ariaPercents, a4 as builtinPresets, a5 as clampDate, b3 as createPanels, b4 as cssSize, b5 as currencyName, b6 as currencySymbol, a6 as daysInMonth, a7 as defaultPresets, a8 as defaultWeekStartsOn, a9 as endOfWeek, b7 as formatDay, b8 as formatFull, aa as formatMoney, ab as fromMinorUnits, ac as getCurrencyDigits, b9 as handleTarget, ad as inclusiveDays, ae as isValidCurrency, af as isoWeek, ag as last30Days, ah as last7Days, ai as lastMonth, aj as lastWeek, ba as layoutOf, ak as lengthBlockReason, bb as measure, bc as monthCells, bd as moveFocusDate, al as nextMonth, am as nextWeek, be as normalizePaste, an as orderRange, bf as parseDate, ao as parseDecimalString, bg as parseSize, bh as presetInBounds, bi as resetToDefault, bj as resizeByDelta, ap as resolvePreset, bk as roundHalfExpand, bl as roundingChangesValue, bm as sameSelection, bn as serializeSize, bo as settle, bp as sizeText, aq as startOfWeek, bq as syncPanels, ar as thisMonth, as as thisQuarter, at as thisWeek, au as toDecimalString, av as toMinorUnits, aw as today, ax as todayDate, br as toggleCollapsed, ay as tomorrow, az as useListDetail, bs as valueText, aA as yearToDate, aB as yesterday } from '../index-D4DT1VE-.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@base-ui/react';

package/dist/custom/index.js

@@ -1,4 +1,4 @@
-export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, Sheet, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, 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 } from '../chunk-LQWPDLLQ.js';
+export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, 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, 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 } from '../chunk-2NAYVQ2U.js';
 export { EmptyState } from '../chunk-M7KJASGK.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/design-system/components/SideNav/README.md

@@ -0,0 +1,73 @@
+# SideNav
+
+Loomiere component, not part of Base UI. The column of links down the side of a workspace. Rows are ruled apart with a hairline; the current row (aria-current="page") sits on the raised surface with a rule under it in the working-paper ink; counts are figures; group headings are caps labels. SideNavToggle is a small tab-shaped handle on the column's edge, whose chevron turns with the state. The parent sets the width and must not clip the toggle (overflow: visible), since it hangs over the edge. Tokens: side-nav.* (tokens/component/side-nav.json).
+
+Use `Loomiere.SideNav`, this package's component: it puts the class names on for you (`import { SideNav } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `SideNav` | `data-collapsed` |
+| `SideNavToggle` |   |
+| `SideNavItem` | `data-current`; `data-disabled` |
+| `SideNavItemText` |   |
+| `SideNavItemLabel` |   |
+| `SideNavItemHint` |   |
+| `SideNavItemCount` | `data-tone`: `quiet` |
+| `SideNavGroupLabel` |   |
+| `SideNavToggleIcon` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the SideNav stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [collapsed, setCollapsed] = React.useState(false);
+    const [current, setCurrent] = React.useState('dashboard');
+    const go = (id: string) => (event: React.MouseEvent) => {
+      event.preventDefault();
+      setCurrent(id);
+    };
+    return (
+      <div style={{ display: 'flex', height: 520, width: collapsed ? 44 : 240, transition: 'width 150ms' }}>
+        <SideNav aria-label="Entity navigation" collapsed={collapsed} style={{ width: '100%' }}>
+          <SideNavItem current={current === 'dashboard'} onClick={go('dashboard')}>
+            Entity Dashboard
+          </SideNavItem>
+          <SideNavItem current={current === 'open'} count={5} onClick={go('open')}>
+            Open Items
+          </SideNavItem>
+          <SideNavItem current={current === 'review'} count={2} onClick={go('review')}>
+            For Review
+          </SideNavItem>
+          <SideNavGroup label="Books">
+            <SideNavItem current={current === 'accounts'} onClick={go('accounts')}>
+              Financial Accounts
+            </SideNavItem>
+            <SideNavItem current={current === 'chart'} onClick={go('chart')}>
+              Chart of Accounts
+            </SideNavItem>
+          </SideNavGroup>
+          <SideNavGroup label="Coming later">
+            <SideNavItem disabled hint="Not yet available">
+              Invoicing
+            </SideNavItem>
+          </SideNavGroup>
+          <SideNavToggle collapsed={collapsed} onCollapsedChange={setCollapsed} />
+        </SideNav>
+      </div>
+    );
+  },
+};
+
+/** countTone="quiet" for a count that is only information, such as a total. */
+```
+
+The preview also shows `QuietCount`.

package/dist/design-system/components/SideNav/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Navigation" height=240 subtitle="Default / QuietCount" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var C=Object.create;var l=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),k=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},D=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of I(t))!x.call(e,s)&&s!==n&&l(e,s,{get:()=>t[s],enumerable:!(r=E(t,s))||r.enumerable});return e};var S=(e,t,n)=>(n=e!=null?C(R(e)):{},D(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var N=v((L,y)=>{y.exports=window.React});var g=v((Q,f)=>{f.exports=window.Loomiere});var p={};k(p,{Default:()=>F,QuietCount:()=>O,default:()=>u});var m=S(N(),1),a=S(g(),1);var d=window.React;function o(e,t,n){let{children:r,...s}=t||{};return n!==void 0&&(s.key=n),r===void 0?d.createElement(e,s):Array.isArray(r)?d.createElement(e,s,...r):d.createElement(e,s,r)}var T=d.Fragment;var A={title:"Components/Lib/SideNav",component:a.SideNav,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"]},u=A,F={render:function(){let[t,n]=m.useState(!1),[r,s]=m.useState("dashboard"),c=w=>b=>{b.preventDefault(),s(w)};return o("div",{style:{display:"flex",height:520,width:t?44:240,transition:"width 150ms"},children:o(a.SideNav,{"aria-label":"Entity navigation",collapsed:t,style:{width:"100%"},children:[o(a.SideNavItem,{current:r==="dashboard",onClick:c("dashboard"),children:"Entity Dashboard"}),o(a.SideNavItem,{current:r==="open",count:5,onClick:c("open"),children:"Open Items"}),o(a.SideNavItem,{current:r==="review",count:2,onClick:c("review"),children:"For Review"}),o(a.SideNavGroup,{label:"Books",children:[o(a.SideNavItem,{current:r==="accounts",onClick:c("accounts"),children:"Financial Accounts"}),o(a.SideNavItem,{current:r==="chart",onClick:c("chart"),children:"Chart of Accounts"})]}),o(a.SideNavGroup,{label:"Coming later",children:o(a.SideNavItem,{disabled:!0,hint:"Not yet available",children:"Invoicing"})}),o(a.SideNavToggle,{collapsed:t,onCollapsedChange:n})]})})}},O={render:()=>o("div",{style:{width:240},children:o(a.SideNav,{"aria-label":"Client navigation",children:[o(a.SideNavItem,{current:!0,children:"Client Dashboard"}),o(a.SideNavItem,{count:6,children:"Open Items"}),o(a.SideNavItem,{count:2,countTone:"quiet",children:"All Entities"})]})})};var i=window.React,h=u||{},j=["Default","QuietCount"];function M({id:e}){let t=p[e],n={...h.args||{},...t.args||{}};return(t.render||(s=>i.createElement(h.component,s)))(n,{args:n,id:e,name:e})}var G=j.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(M,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
+
+</script>
+</body>
+</html>