@scattered-light/loomiere-base-ui 0.14.0 → 0.15.0

package/README.md

@@ -30,7 +30,7 @@ Use Base UI as usual, with the class names the styles target, or the few wrapper
 ```tsx
 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,
+  AppBar, AppBarSpacer, Combobox, ContextMenu, DatePicker, DatePresets, DescriptionItem, DescriptionList, Dialog, Drawer, EmptyState, Field, Form, Input, ListDetail, Menu, Menubar, Meter, MoneyField, NumberField, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger,
   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';
@@ -201,6 +201,18 @@ A tree in a DataTable (`getSubRows`) has options for a register of parents and c
 </AppBar>
 ```
 
+`PickerSplit` is the same field with two parts, for a choice that is also a link or action: `PickerSplitMain` (the label and choice, a button) and `PickerSplitTrigger` (a square chevron button that opens the list). Anchor the popup to the root with a ref.
+
+```tsx
+<PickerSplit ref={anchor}>
+  <PickerSplitMain label="Client" value={client.name} onClick={openClient} />
+  <Menu.Root>
+    <Menu.Trigger render={(props) => <PickerSplitTrigger {...props} aria-label="Choose client" />} />
+    <Menu.Portal><Menu.Positioner anchor={anchor}>…</Menu.Positioner></Menu.Portal>
+  </Menu.Root>
+</PickerSplit>
+```
+
 `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

package/dist/{chunk-2NAYVQ2U.js → chunk-RLXKWWZG.js}

@@ -3555,13 +3555,28 @@ var AppBarSpacer = React10.forwardRef(function AppBarSpacer2({ className, ...pro
 });
 var PickerButton = React10.forwardRef(function PickerButton2({ className, label, value, placeholder, type = "button", children, ...props }, ref) {
   const empty = value == null || value === "";
-  return /* @__PURE__ */ jsxs("button", { ref, type, className: cn("PickerButton", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("button", { ref, type, className: cn("PickerButton", className?.split(/\s+/).filter((name) => name !== "Button").join(" ")), ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "PickerButtonLabel", children: label }),
     /* @__PURE__ */ jsx("span", { className: "PickerButtonValue", "data-placeholder": empty ? "" : void 0, children: empty ? placeholder : value }),
     children,
     /* @__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 withoutButton = (className) => className?.split(/\s+/).filter((name) => name !== "Button").join(" ");
+var PickerSplit = React10.forwardRef(function PickerSplit2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("PickerSplit", className), ...props });
+});
+var PickerSplitMain = React10.forwardRef(function PickerSplitMain2({ className, label, value, placeholder, type = "button", children, ...props }, ref) {
+  const empty = value == null || value === "";
+  return /* @__PURE__ */ jsxs("button", { ref, type, className: cn("PickerSplitMain", withoutButton(className)), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "PickerButtonLabel", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "PickerButtonValue", "data-placeholder": empty ? "" : void 0, children: empty ? placeholder : value }),
+    children
+  ] });
+});
+var PickerSplitTrigger = React10.forwardRef(function PickerSplitTrigger2({ className, type = "button", ...props }, ref) {
+  return /* @__PURE__ */ jsx("button", { ref, type, className: cn("PickerSplitTrigger", withoutButton(className)), ...props, children: /* @__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 });
 });
@@ -3832,6 +3847,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, 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-2NAYVQ2U.js.map
-//# sourceMappingURL=chunk-2NAYVQ2U.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, PickerSplit, PickerSplitMain, PickerSplitTrigger, 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-RLXKWWZG.js.map
+//# sourceMappingURL=chunk-RLXKWWZG.js.map