@scattered-light/loomiere-base-ui 0.15.5 → 0.16.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, aI as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aJ 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, aK as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aL as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aM as ListDetailList, aN as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aO as MAX_MINOR_UNITS, aP as MoneyChangeDetails, aQ as MoneyDisplay, M as MoneyField, aR as MoneyFieldAffix, aS as MoneyFieldGroup, aT as MoneyFieldInput, z as MoneyFieldProps, aU as MoneyFieldRoot, F as MoneyFieldRootProps, aV as MoneyFieldSteps, aW as NormalizedPaste, aX as PanelSpec, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, aY as RuntimePanel, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, aZ as Size, a_ as SizeInput, a2 as Splitter, a$ as SplitterHandle, a3 as SplitterHandleProps, b0 as SplitterKey, b1 as SplitterPanel, a4 as SplitterPanelProps, b2 as SplitterRoot, a5 as SplitterRootProps, a6 as StatFigure, a7 as StatFigureProps, b3 as StoredLayout, b4 as StoredPanel, a8 as addDays, a9 as addMonths, b5 as affixSide, b6 as applyKey, b7 as applyStored, b8 as ariaPercents, aa as builtinPresets, ab as clampDate, b9 as createPanels, ba as cssSize, bb as currencyName, bc as currencySymbol, ac as daysInMonth, ad as defaultPresets, ae as defaultWeekStartsOn, af as endOfWeek, bd as formatDay, be as formatFull, ag as formatMoney, ah as fromMinorUnits, ai as getCurrencyDigits, bf as handleTarget, aj as inclusiveDays, ak as isValidCurrency, al as isoWeek, am as last30Days, an as last7Days, ao as lastMonth, ap as lastWeek, bg as layoutOf, aq as lengthBlockReason, bh as measure, bi as monthCells, bj as moveFocusDate, ar as nextMonth, as as nextWeek, bk as normalizePaste, at as orderRange, bl as parseDate, au as parseDecimalString, bm as parseSize, bn as presetInBounds, bo as resetToDefault, bp as resizeByDelta, av as resolvePreset, bq as roundHalfExpand, br as roundingChangesValue, bs as sameSelection, bt as serializeSize, bu as settle, bv as sizeText, aw as startOfWeek, bw as syncPanels, ax as thisMonth, ay as thisQuarter, az as thisWeek, aA as toDecimalString, aB as toMinorUnits, aC as today, aD as todayDate, bx as toggleCollapsed, aE as tomorrow, aF as useListDetail, by as valueText, aG as yearToDate, aH as yesterday } from '../index-BlPgd6jW.js';
+export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, aL as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aM 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, aN as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aO as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aP as ListDetailList, aQ as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aR as MAX_MINOR_UNITS, aS as MoneyChangeDetails, aT as MoneyDisplay, M as MoneyField, aU as MoneyFieldAffix, aV as MoneyFieldGroup, aW as MoneyFieldInput, z as MoneyFieldProps, aX as MoneyFieldRoot, F as MoneyFieldRootProps, aY as MoneyFieldSteps, aZ as NormalizedPaste, a_ as PanelSpec, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, a$ as RuntimePanel, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, b0 as Size, b1 as SizeInput, a2 as Splitter, b2 as SplitterHandle, a3 as SplitterHandleProps, b3 as SplitterKey, b4 as SplitterPanel, a4 as SplitterPanelProps, b5 as SplitterRoot, a5 as SplitterRootProps, a6 as StatCard, a7 as StatCardFact, a8 as StatCardProps, a9 as StatFigure, aa as StatFigureProps, b6 as StoredLayout, b7 as StoredPanel, ab as addDays, ac as addMonths, b8 as affixSide, b9 as applyKey, ba as applyStored, bb as ariaPercents, ad as builtinPresets, ae as clampDate, bc as createPanels, bd as cssSize, be as currencyName, bf as currencySymbol, af as daysInMonth, ag as defaultPresets, ah as defaultWeekStartsOn, ai as endOfWeek, bg as formatDay, bh as formatFull, aj as formatMoney, ak as fromMinorUnits, al as getCurrencyDigits, bi as handleTarget, am as inclusiveDays, an as isValidCurrency, ao as isoWeek, ap as last30Days, aq as last7Days, ar as lastMonth, as as lastWeek, bj as layoutOf, at as lengthBlockReason, bk as measure, bl as monthCells, bm as moveFocusDate, au as nextMonth, av as nextWeek, bn as normalizePaste, aw as orderRange, bo as parseDate, ax as parseDecimalString, bp as parseSize, bq as presetInBounds, br as resetToDefault, bs as resizeByDelta, ay as resolvePreset, bt as roundHalfExpand, bu as roundingChangesValue, bv as sameSelection, bw as serializeSize, bx as settle, by as sizeText, az as startOfWeek, bz as syncPanels, aA as thisMonth, aB as thisQuarter, aC as thisWeek, aD as toDecimalString, aE as toMinorUnits, aF as today, aG as todayDate, bA as toggleCollapsed, aH as tomorrow, aI as useListDetail, bB as valueText, aJ as yearToDate, aK as yesterday } from '../index-CoS-HLC1.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, PickerSplit, PickerSplitMain, PickerSplitTrigger, 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-RLXKWWZG.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, PickerSplit, PickerSplitMain, PickerSplitTrigger, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatCard, 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-TVZOM4US.js';
 export { EmptyState } from '../chunk-M7KJASGK.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,50 @@
+# StatCard
+
+Loomiere component, not part of Base UI. A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures ruled off under them. With data-interactive the title is a link or a button and its ::after covers the card, so the whole card is the target and the title names it. The hover fill and the focus ring follow the card, not just the title. Tokens: stat-card.* (tokens/component/stat-card.json).
+
+Use `Loomiere.StatCard`, this package's component: it puts the class names on for you (`import { StatCard } 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 |
+|---|---|
+| `StatCard` | `data-interactive` |
+| `StatCardHeader` |   |
+| `StatCardTitle` |   |
+| `StatCardCaption` |   |
+| `StatCardLink` |   |
+| `StatCardFacts` |   |
+| `StatCardFooter` |   |
+
+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 StatCard stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: (args) => (
+    <div style={grid}>
+      <StatCard {...args} href="#north" />
+      <StatCard
+        {...args}
+        title="Boreal Company"
+        caption="USD · 3 accounts"
+        facts={[
+          { label: 'Questions', value: '–' },
+          { label: 'Docs', value: '4', tone: 'accent' },
+          { label: 'Review', value: '12', tone: 'accent' },
+        ]}
+        href="#boreal"
+      />
+    </div>
+  ),
+};
+
+/** onOpen makes the title a button, for an app that navigates without links. */
+```
+
+The preview also shows `AsButton`, `Static`, `WithFooter`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Display" height=480 subtitle="Default / AsButton / Static / WithFooter" -->
+<!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 f=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!x.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(r=S(t,a))||r.enumerable});return e};var D=(e,t,o)=>(o=e!=null?f(b(e)):{},E(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e));var u=v((M,p)=>{p.exports=window.Loomiere});var d={};w(d,{AsButton:()=>F,Default:()=>C,Static:()=>A,TwoFigures:()=>O,WithFooter:()=>B,default:()=>m});var l=D(u(),1);var c=window.React;function s(e,t,o){let{children:r,...a}=t||{};return o!==void 0&&(a.key=o),r===void 0?c.createElement(e,a):Array.isArray(r)?c.createElement(e,a,...r):c.createElement(e,a,r)}var U=c.Fragment;var R={title:"Components/Lib/StatCard",component:l.StatCard,parameters:{layout:"padded"},tags:["autodocs","ds:lib"],args:{title:"North Company",caption:"USD \xB7 1 account",facts:[{label:"Questions",value:"1",tone:"accent"},{label:"Docs",value:"\u2013"},{label:"Review",value:"2",tone:"accent"}]}},m=R,h={display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(18rem, 1fr))",gap:"16px"},C={render:e=>s("div",{style:h,children:[s(l.StatCard,{...e,href:"#north"}),s(l.StatCard,{...e,title:"Boreal Company",caption:"USD \xB7 3 accounts",facts:[{label:"Questions",value:"\u2013"},{label:"Docs",value:"4",tone:"accent"},{label:"Review",value:"12",tone:"accent"}],href:"#boreal"})]})},F={args:{onOpen:()=>{}}},A={},B={args:{footer:"Last reconciled Oct 29"}},O={args:{facts:[{label:"Book balance",value:"75.00",caption:"DR"},{label:"Unposted",value:"2",tone:"accent"}]}};var n=window.React,y=m||{},j=["Default","AsButton","Static","WithFooter"];function N({id:e}){let t=d[e],o={...y.args||{},...t.args||{}};return(t.render||(a=>n.createElement(y.component,a)))(o,{args:o,id:e,name:e})}var k=j.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(N,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,k));})();
+
+</script>
+</body>
+</html>