@scattered-light/loomiere-mojave 0.21.3 → 0.22.0

package/dist/exports/AGENTS.md

@@ -152,7 +152,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ### Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 

package/dist/exports/catalog.json

@@ -158,6 +158,8 @@
         "design-system/components/Meter/preview.html",
         "design-system/components/MoneyField/README.md",
         "design-system/components/MoneyField/preview.html",
+        "design-system/components/MultiSelect/README.md",
+        "design-system/components/MultiSelect/preview.html",
         "design-system/components/NavigationMenu/README.md",
         "design-system/components/NavigationMenu/preview.html",
         "design-system/components/NumberField/README.md",

package/dist/exports/design-system/README.md

@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ## Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 

package/dist/exports/design-system/components/MultiSelect/README.md

@@ -0,0 +1,35 @@
+# MultiSelect
+
+The Base UI MultiSelect styled by the theme. A PickerButton trigger that opens a popover of checkbox rows (label, count at the end) and a footer with "Show all" and "Done". The rows reuse the Checkbox look; the counts are mono so they line up. The popup is at least as wide as its widest row and never narrower than popup.min-width.
+
+Use `Loomiere.MultiSelect` (`import { MultiSelect } from '@base-ui/react/multi-select'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/multi-select
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `MultiSelectPopup` |   |
+| `MultiSelectList` |   |
+| `MultiSelectOption` |   |
+| `MultiSelectOptionLabel` |   |
+| `MultiSelectOptionCount` |   |
+| `MultiSelectFooter` |   |
+
+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 MultiSelect stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [value, setValue] = React.useState<string[]>([]);
+    return <MultiSelect label="Status" allLabel="All statuses" options={statuses} value={value} onValueChange={setValue} />;
+  },
+};
+```
+
+The preview also shows `WithSelection`, `ManySelected`.

package/dist/exports/design-system/components/MultiSelect/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Components" height=360 subtitle="Default / WithSelection / ManySelected" -->
+<!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 x=Object.create;var i=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var d=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),V=(e,t)=>{for(var a in t)i(e,a,{get:t[a],enumerable:!0})},C=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of A(t))!M.call(e,n)&&n!==a&&i(e,n,{get:()=>t[n],enumerable:!(o=w(t,n))||o.enumerable});return e};var y=(e,t,a)=>(a=e!=null?x(h(e)):{},C(t||!e||!e.__esModule?i(a,"default",{value:e,enumerable:!0}):a,e));var f=d((W,S)=>{S.exports=window.React});var b=d(($,v)=>{v.exports=window.Loomiere});var p={};V(p,{Default:()=>j,ManySelected:()=>I,WithSelection:()=>D,default:()=>m});var u=y(f(),1),r=y(b(),1);var l=window.React;function c(e,t,a){let{children:o,...n}=t||{};return a!==void 0&&(n.key=a),o===void 0?l.createElement(e,n):Array.isArray(o)?l.createElement(e,n,...o):l.createElement(e,n,o)}var q=l.Fragment;var L={title:"Components/Lib/MultiSelect",component:r.MultiSelect,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Status",options:[],value:[],onValueChange:()=>{}}},m=L,g=[{value:"active",label:"Active",count:41},{value:"inactive",label:"Inactive",count:6},{value:"available",label:"Available from master",count:12}],j={render:function(){let[t,a]=u.useState([]);return c(r.MultiSelect,{label:"Status",allLabel:"All statuses",options:g,value:t,onValueChange:a})}},D={render:function(){let[t,a]=u.useState(["active","inactive"]);return c(r.MultiSelect,{label:"Status",allLabel:"All statuses",options:g,value:t,onValueChange:a})}},I={render:function(){let t=["Assets","Liabilities","Equity","Income","Cost of sales","Expenses"].map((n,R)=>({value:n,label:n,count:3+R})),[a,o]=u.useState(["Assets","Income","Expenses"]);return c(r.MultiSelect,{label:"Type",allLabel:"All types",options:t,value:a,onValueChange:o})}};var s=window.React,E=m||{},F=["Default","WithSelection","ManySelected"];function N({id:e}){let t=p[e],a={...E.args||{},...t.args||{}};return(t.render||(n=>s.createElement(E.component,n)))(a,{args:a,id:e,name:e})}var O=F.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(N,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,O));})();
+
+</script>
+</body>
+</html>