@scattered-light/loomiere-mojave 0.6.0 → 0.7.1

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Display" height=480 subtitle="Default / Emphasis / Statuses / Sizes" -->
+<!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 B=Object.create;var l=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,s)=>()=>(s||t((s={exports:{}}).exports,s),s.exports),b=(t,s)=>{for(var r in s)l(t,r,{get:s[r],enumerable:!0})},h=(t,s,r,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of S(s))!x.call(t,o)&&o!==r&&l(t,o,{get:()=>s[o],enumerable:!(d=v(s,o))||d.enumerable});return t};var E=(t,s,r)=>(r=t!=null?B(f(t)):{},h(s||!t||!t.__esModule?l(r,"default",{value:t,enumerable:!0}):r,t));var p=w((q,u)=>{u.exports=window.Loomiere});var m={};b(m,{Count:()=>j,Default:()=>C,Dot:()=>F,Emphasis:()=>D,Icon:()=>M,InColor:()=>A,InStatus:()=>N,Sizes:()=>k,Statuses:()=>R,default:()=>g});var a=E(p(),1);var c=window.React;function e(t,s,r){let{children:d,...o}=s||{};return r!==void 0&&(o.key=r),d===void 0?c.createElement(t,o):Array.isArray(d)?c.createElement(t,o,...d):c.createElement(t,o,d)}var P=c.Fragment;var z={title:"Components/Lib/Badge",component:a.Badge,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Badge label"}}},g=z,n={display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},I=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",children:e("path",{d:"M10 2a8 8 0 100 16 8 8 0 000-16z"})}),C={render:()=>e("div",{style:n,children:[e(a.Badge,{status:"info",children:"Info"}),e(a.Badge,{status:"success",children:"Success"}),e(a.Badge,{status:"warning",children:"Warning"}),e(a.Badge,{status:"error",children:"Error"}),e(a.Badge,{children:"3"})]})},D={render:()=>e("div",{style:n,children:[e(a.Badge,{emphasis:"bold",children:"Bold"}),e(a.Badge,{emphasis:"standard",children:"Standard"}),e(a.Badge,{emphasis:"subtle",children:"Subtle"}),e(a.Badge,{children:"Default"}),e(a.Badge,{emphasis:"quiet",children:"Quiet"})]})},R={render:()=>e("div",{style:n,children:[e(a.Badge,{status:"info",children:"Info"}),e(a.Badge,{status:"success",children:"Success"}),e(a.Badge,{status:"warning",children:"Warning"}),e(a.Badge,{status:"error",children:"Error"})]})},k={render:()=>e("div",{style:n,children:[e(a.Badge,{size:"minimize",children:"Minimize"}),e(a.Badge,{children:"Condense"}),e(a.Badge,{size:"base",children:"Base"})]})},F={render:()=>e("div",{style:n,children:[e(a.Badge,{dot:!0,status:"info",children:"Live"}),e(a.Badge,{dot:!0,status:"success",children:"Saved"}),e(a.Badge,{dot:!0,status:"warning",children:"Pending"}),e(a.Badge,{dot:!0,status:"error",children:"Failed"})]})},M={render:()=>e("div",{style:n,children:[e(a.Badge,{status:"success",children:[e("span",{className:"material-symbols-outlined",children:"check"}),"Saved"]}),e(a.Badge,{status:"error",children:[e(I,{}),"Failed"]})]})},j={render:()=>e("div",{style:n,children:[e(a.Badge,{size:"minimize","aria-label":"3 unread",children:"3"}),e(a.Badge,{"aria-label":"3 unread",children:"3"}),e(a.Badge,{size:"base","aria-label":"3 unread",children:"3"}),e(a.Badge,{"aria-label":"12 unread",children:"12"})]})},N={render:()=>e("div",{style:n,children:["info","success","warning","error"].map(t=>e("div",{"data-status":t,children:e(a.Badge,{children:["In ",t]})},t))})},A={render:()=>e("div",{style:n,children:["primary","secondary","error"].map(t=>e("div",{"data-color":t,children:e(a.Badge,{emphasis:"bold",children:t})},t))})};var i=window.React,y=g||{},L=["Default","Emphasis","Statuses","Sizes"];function O({id:t}){let s=m[t],r={...y.args||{},...s.args||{}};return(s.render||(o=>i.createElement(y.component,o)))(r,{args:r,id:t,name:t})}var W=L.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(O,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,W));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,14 @@
+# Collection
+
+The Base UI Collection styled by the theme. DataTable, DataList, the toolbar and the pagination, in one place so the two views share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes. Each section is its own file so the design system can name the part. This file brings them in. The selection bar replaces the trailing controls (filters, sort, actions) and leaves the tabs and the search where they are, so selecting rows does not grow the toolbar.
+
+Use `Loomiere.Collection` (`import { Collection } from '@base-ui/react/collection'` 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/collection
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+
+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.

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

@@ -0,0 +1,15 @@
+# CollectionPagination
+
+Loomiere component, not part of Base UI. Not tied to a collection. Anything with a page, a page count and a total can use it. Previous and Next are quiet buttons. The count reads "1–25 of 312".
+
+Use `Loomiere.CollectionPagination` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `CollectionPagination` |   |
+
+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.

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

@@ -0,0 +1,29 @@
+# CollectionToolbar
+
+Loomiere component, not part of Base UI. The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps even when the page is wide. Search grows to fill the row beside the trailing controls, and wraps to its own line before it shrinks under collection.search-min-width. Under the narrow width it takes the full row and filters wrap under it. A container query cannot read the width token, so the component also sets data-narrow. The search icon and the clear button sit inside the field. The browser's own search cancel is hidden by the reset, so the clear button is the only one, in every browser.
+
+Use `Loomiere.CollectionToolbar` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `CollectionToolbar` | `data-narrow` |
+| `CollectionToolbarMain` |   |
+| `CollectionSelectionBar` |   |
+| `CollectionSort` |   |
+| `CollectionSearch` |   |
+| `CollectionSearchField` | `data-filled` |
+| `Input` |   |
+| `CollectionSearchIcon` |   |
+| `CollectionSearchClear` |   |
+| `CollectionToolbarTrailing` |   |
+| `SelectTrigger` |   |
+| `ComboboxInputWrapper` |   |
+| `CollectionToolbarActions` |   |
+| `CollectionView` | `data-narrow` |
+| `CollectionCount` |   |
+
+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.

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

@@ -0,0 +1,39 @@
+# DataList
+
+Loomiere component, not part of Base UI. The same rows as the table, in one container with the table's borders, hover, selected and current states. Not a stack of floating cards: the two views should read as one family. variant=cards adds the surface radius and a gap when a queue should read as separate items.
+
+Use `Loomiere.DataList` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `DataList` | `data-size`: `md`; `data-variant`: `cards`; `data-loading` |
+| `DataListPrimary` |   |
+| `DataListSecondary` |   |
+| `DataListMeta` |   |
+| `DataListSummary` |   |
+| `DataListBody` |   |
+| `DataListAmount` |   |
+| `DataListGroup` |   |
+
+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 DataList stories (`BesideTheTable`):
+
+```tsx
+export const BesideTheTable: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
+      <FeeTable pageSize={5} />
+      <FeeList rows={fees.slice(0, 8)} />
+    </div>
+  ),
+};
+```
+
+The preview also shows `ReviewQueue`, `ExtraDoesNotActivate`, `Sort`.