@scattered-light/loomiere-base-ui 0.14.0 → 0.15.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, 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';
+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';
 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, 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 { 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 { EmptyState } from '../chunk-M7KJASGK.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1,6 +1,6 @@
 # PickerButton
 
-Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Label and choice share a baseline, so caps beside lowercase read as one line; picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
 
 Use `Loomiere.PickerButton`, this package's component: it puts the class names on for you (`import { PickerButton } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
 

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

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var S=Object.create;var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),M=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},C=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of w(t))!h.call(e,s)&&s!==o&&c(e,s,{get:()=>t[s],enumerable:!(r=v(t,s))||r.enumerable});return e};var p=(e,t,o)=>(o=e!=null?S(P(e)):{},C(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e));var f=m((N,y)=>{y.exports=window.React});var b=m((V,g)=>{g.exports=window.Loomiere});var u={};M(u,{Default:()=>k,Disabled:()=>L,LongValue:()=>A,Placeholder:()=>D,default:()=>d});var R=p(f(),1),n=p(b(),1);var i=window.React;function a(e,t,o){let{children:r,...s}=t||{};return o!==void 0&&(s.key=o),r===void 0?i.createElement(e,s):Array.isArray(r)?i.createElement(e,s,...r):i.createElement(e,s,r)}var H=i.Fragment;var I={title:"Components/Lib/PickerButton",component:n.PickerButton,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Client",value:"Alpha Services"}},d=I,E=["North Company","South Company","Harbor Holdings LLC"],k={render:function(){let[t,o]=R.useState(E[0]);return a("div",{style:{display:"flex",gap:"10px",alignItems:"center"},children:[a(n.PickerButton,{label:"Client",value:"Alpha Services"}),a(n.Menu.Root,{children:[a(n.Menu.Trigger,{render:r=>a(n.PickerButton,{...r,label:"Entity",value:t})}),a(n.Menu.Portal,{children:a(n.Menu.Positioner,{align:"start",sideOffset:6,children:a(n.Menu.Popup,{"aria-label":"Entity",children:a(n.Menu.RadioGroup,{value:t,onValueChange:r=>o(r),children:E.map(r=>a(n.Menu.RadioItem,{value:r,children:[a(n.Menu.RadioItemIndicator,{}),r]},r))})})})})]})]})}},A={args:{label:"Entity",value:"Harbor Family Office Irrevocable Trust of 2009"}},D={args:{label:"Entity",value:void 0,placeholder:"All Entities"}},L={args:{disabled:!0}};var l=window.React,x=d||{},O=["Default","LongValue","Placeholder","Disabled"];function j({id:e}){let t=u[e],o={...x.args||{},...t.args||{}};return(t.render||(s=>l.createElement(x.component,s)))(o,{args:o,id:e,name:e})}var B=O.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,B));})();
+(()=>{var v=Object.create;var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),C=(e,t)=>{for(var a in t)u(e,a,{get:t[a],enumerable:!0})},k=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of M(t))!x.call(e,n)&&n!==a&&u(e,n,{get:()=>t[n],enumerable:!(i=E(t,n))||i.enumerable});return e};var y=(e,t,a)=>(a=e!=null?v(h(e)):{},k(t||!e||!e.__esModule?u(a,"default",{value:e,enumerable:!0}):a,e));var f=m((j,g)=>{g.exports=window.React});var S=m((F,R)=>{R.exports=window.Loomiere});var p={};C(p,{Default:()=>I,Disabled:()=>L,LongValue:()=>A,Placeholder:()=>D,Split:()=>O,default:()=>d});var s=y(f(),1),o=y(S(),1);var c=window.React;function r(e,t,a){let{children:i,...n}=t||{};return a!==void 0&&(n.key=a),i===void 0?c.createElement(e,n):Array.isArray(i)?c.createElement(e,n,...i):c.createElement(e,n,i)}var G=c.Fragment;var w={title:"Components/Lib/PickerButton",component:o.PickerButton,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Client",value:"Alpha Services"}},d=w,P=["North Company","South Company","Harbor Holdings LLC"],I={render:function(){let[t,a]=s.useState(P[0]);return r("div",{style:{display:"flex",gap:"10px",alignItems:"center"},children:[r(o.PickerButton,{label:"Client",value:"Alpha Services"}),r(o.Menu.Root,{children:[r(o.Menu.Trigger,{render:i=>r(o.PickerButton,{...i,label:"Entity",value:t})}),r(o.Menu.Portal,{children:r(o.Menu.Positioner,{align:"start",sideOffset:6,children:r(o.Menu.Popup,{"aria-label":"Entity",children:r(o.Menu.RadioGroup,{value:t,onValueChange:i=>a(i),children:P.map(i=>r(o.Menu.RadioItem,{value:i,children:[r(o.Menu.RadioItemIndicator,{}),i]},i))})})})})]})]})}},A={args:{label:"Entity",value:"Harbor Family Office Irrevocable Trust of 2009"}},D={args:{label:"Entity",value:void 0,placeholder:"All Entities"}},L={args:{disabled:!0}},O={render:function(){let t=s.useRef(null),[a,i]=s.useState("Alpha Services");return r(o.PickerSplit,{ref:t,children:[r(o.PickerSplitMain,{label:"Client",value:a,onClick:()=>{}}),r(o.Menu.Root,{children:[r(o.Menu.Trigger,{render:n=>r(o.PickerSplitTrigger,{...n,"aria-label":"Choose client"})}),r(o.Menu.Portal,{children:r(o.Menu.Positioner,{anchor:t,align:"start",sideOffset:6,children:r(o.Menu.Popup,{"aria-label":"Client",children:r(o.Menu.RadioGroup,{value:a,onValueChange:n=>i(n),children:["Alpha Services","Beacon Partners","Cedar Holdings"].map(n=>r(o.Menu.RadioItem,{value:n,children:[r(o.Menu.RadioItemIndicator,{}),n]},n))})})})})]})]})}};var l=window.React,b=d||{},B=["Default","LongValue","Placeholder","Disabled"];function H({id:e}){let t=p[e],a={...b.args||{},...t.args||{}};return(t.render||(n=>l.createElement(b.component,n)))(a,{args:a,id:e,name:e})}var T=B.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(H,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,T));})();
 
 </script>
 </body>

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

@@ -0,0 +1,18 @@
+# PickerSplit
+
+Loomiere component, not part of Base UI. A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts, and a square trigger beside it, divided by a hairline, opens the list. The root carries the field look so a popup anchors to the whole control; each part fills on hover and the border darkens for the control as a whole. Label, choice and chevron reuse the PickerButton parts and tokens (picker-button.*), so the two read as one family.
+
+Use `Loomiere.PickerSplit`, this package's component: it puts the class names on for you (`import { PickerSplit } 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 |
+|---|---|
+| `PickerSplit` |   |
+| `PickerSplitMain` |   |
+| `PickerSplitTrigger` | `data-popup-open` |
+| `PickerButtonIcon` |   |
+
+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.