@scattered-light/loomiere-base-ui 0.14.1 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -1
- package/dist/{chunk-HPUI5FIO.js → chunk-RLXKWWZG.js} +18 -3
- package/dist/chunk-RLXKWWZG.js.map +1 -0
- package/dist/custom/index.d.ts +1 -1
- package/dist/custom/index.js +1 -1
- package/dist/design-system/components/PickerButton/preview.html +1 -1
- package/dist/design-system/components/PickerSplit/README.md +18 -0
- package/dist/design-system/components/bundle.js +7 -7
- package/dist/design-system/components/index.d.ts +1 -1
- package/dist/design-system/components/styles.css +173 -60
- package/dist/{index-kV9TCCxP.d.ts → index-BlPgd6jW.d.ts} +26 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/components/Accordion.css +1 -1
- package/dist/styles/components/AlertDialog.css +1 -1
- package/dist/styles/components/Autocomplete.css +1 -1
- package/dist/styles/components/Avatar.css +1 -1
- package/dist/styles/components/Button.css +1 -1
- package/dist/styles/components/Checkbox.css +1 -1
- package/dist/styles/components/CheckboxGroup.css +1 -1
- package/dist/styles/components/Collapsible.css +1 -1
- package/dist/styles/components/Combobox.css +1 -1
- package/dist/styles/components/ContextMenu.css +1 -1
- package/dist/styles/components/Dialog.css +1 -1
- package/dist/styles/components/Drawer.css +1 -1
- package/dist/styles/components/Field.css +1 -1
- package/dist/styles/components/Fieldset.css +1 -1
- package/dist/styles/components/Form.css +1 -1
- package/dist/styles/components/Input.css +1 -1
- package/dist/styles/components/Menu.css +1 -1
- package/dist/styles/components/Menubar.css +1 -1
- package/dist/styles/components/Meter.css +1 -1
- package/dist/styles/components/NavigationMenu.css +1 -1
- package/dist/styles/components/NumberField.css +1 -1
- package/dist/styles/components/OTPField.css +1 -1
- package/dist/styles/components/Popover.css +1 -1
- package/dist/styles/components/PreviewCard.css +1 -1
- package/dist/styles/components/Progress.css +1 -1
- package/dist/styles/components/Radio.css +1 -1
- package/dist/styles/components/ScrollArea.css +1 -1
- package/dist/styles/components/Select.css +1 -1
- package/dist/styles/components/Separator.css +1 -1
- package/dist/styles/components/Slider.css +1 -1
- package/dist/styles/components/Switch.css +1 -1
- package/dist/styles/components/Tabs.css +1 -1
- package/dist/styles/components/Toast.css +1 -1
- package/dist/styles/components/Toggle.css +1 -1
- package/dist/styles/components/ToggleGroup.css +1 -1
- package/dist/styles/components/Toolbar.css +1 -1
- package/dist/styles/components/Tooltip.css +1 -1
- package/dist/styles/custom/AppBar.css +1 -1
- package/dist/styles/custom/Badge.css +1 -1
- package/dist/styles/custom/Collection.css +1 -1
- package/dist/styles/custom/CollectionPagination.css +1 -1
- package/dist/styles/custom/CollectionToolbar.css +1 -1
- package/dist/styles/custom/DataList.css +1 -1
- package/dist/styles/custom/DataTable.css +1 -1
- package/dist/styles/custom/DatePicker.css +1 -1
- package/dist/styles/custom/DescriptionList.css +1 -1
- package/dist/styles/custom/EditableList.css +1 -1
- package/dist/styles/custom/EmptyState.css +1 -1
- package/dist/styles/custom/ListDetail.css +1 -1
- package/dist/styles/custom/MoneyField.css +1 -1
- package/dist/styles/custom/PickerButton.css +1 -1
- package/dist/styles/custom/PickerSplit.css +97 -0
- package/dist/styles/custom/Sheet.css +7 -1
- package/dist/styles/custom/SideNav.css +1 -1
- package/dist/styles/custom/Splitter.css +1 -1
- package/dist/styles/custom/StatFigure.css +1 -1
- package/dist/styles/custom/Table.css +10 -1
- package/dist/styles/index.css +2 -1
- package/dist/styles/reset/accessibility.css +1 -1
- package/dist/styles/reset/reset-accessibility.css +1 -1
- package/dist/styles/reset/reset-tailwind.css +1 -1
- package/dist/styles/reset/reset.css +1 -1
- package/dist/styles/tailwind.css +2 -1
- package/package.json +2 -2
- package/dist/chunk-HPUI5FIO.js.map +0 -1
package/dist/custom/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps,
|
|
1
|
+
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';
|
|
2
2
|
import 'react';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import '@base-ui/react';
|
package/dist/custom/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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-
|
|
1
|
+
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';
|
|
2
2
|
export { EmptyState } from '../chunk-M7KJASGK.js';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{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));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# PickerSplit
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
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`).
|
|
6
|
+
|
|
7
|
+
Not a Base UI part, so there is no base-ui.com page for it.
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `PickerSplit` | |
|
|
14
|
+
| `PickerSplitMain` | |
|
|
15
|
+
| `PickerSplitTrigger` | `data-popup-open` |
|
|
16
|
+
| `PickerButtonIcon` | |
|
|
17
|
+
|
|
18
|
+
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.
|