@scattered-light/loomiere-base-ui 0.18.0 → 0.19.0

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.
Files changed (74) hide show
  1. package/README.md +9 -1
  2. package/dist/custom/collection/index.d.ts +19 -1
  3. package/dist/custom/collection/index.js +20 -1
  4. package/dist/custom/collection/index.js.map +1 -1
  5. package/dist/design-system/components/CollectionCards/README.md +26 -0
  6. package/dist/design-system/components/CollectionCards/preview.html +19 -0
  7. package/dist/design-system/components/bundle.js +6 -6
  8. package/dist/design-system/components/styles.css +87 -62
  9. package/dist/styles/components/Accordion.css +1 -1
  10. package/dist/styles/components/AlertDialog.css +1 -1
  11. package/dist/styles/components/Autocomplete.css +1 -1
  12. package/dist/styles/components/Avatar.css +1 -1
  13. package/dist/styles/components/Button.css +1 -1
  14. package/dist/styles/components/Checkbox.css +1 -1
  15. package/dist/styles/components/CheckboxGroup.css +1 -1
  16. package/dist/styles/components/Collapsible.css +1 -1
  17. package/dist/styles/components/Combobox.css +1 -1
  18. package/dist/styles/components/ContextMenu.css +1 -1
  19. package/dist/styles/components/Dialog.css +1 -1
  20. package/dist/styles/components/Drawer.css +1 -1
  21. package/dist/styles/components/Field.css +1 -1
  22. package/dist/styles/components/Fieldset.css +1 -1
  23. package/dist/styles/components/Form.css +1 -1
  24. package/dist/styles/components/Input.css +1 -1
  25. package/dist/styles/components/Menu.css +1 -1
  26. package/dist/styles/components/Menubar.css +1 -1
  27. package/dist/styles/components/Meter.css +1 -1
  28. package/dist/styles/components/NavigationMenu.css +1 -1
  29. package/dist/styles/components/NumberField.css +1 -1
  30. package/dist/styles/components/OTPField.css +1 -1
  31. package/dist/styles/components/Popover.css +1 -1
  32. package/dist/styles/components/PreviewCard.css +1 -1
  33. package/dist/styles/components/Progress.css +1 -1
  34. package/dist/styles/components/Radio.css +1 -1
  35. package/dist/styles/components/ScrollArea.css +1 -1
  36. package/dist/styles/components/Select.css +1 -1
  37. package/dist/styles/components/Separator.css +1 -1
  38. package/dist/styles/components/Slider.css +1 -1
  39. package/dist/styles/components/Switch.css +1 -1
  40. package/dist/styles/components/Tabs.css +1 -1
  41. package/dist/styles/components/Toast.css +1 -1
  42. package/dist/styles/components/Toggle.css +1 -1
  43. package/dist/styles/components/ToggleGroup.css +1 -1
  44. package/dist/styles/components/Toolbar.css +1 -1
  45. package/dist/styles/components/Tooltip.css +1 -1
  46. package/dist/styles/custom/AppBar.css +1 -1
  47. package/dist/styles/custom/Badge.css +1 -1
  48. package/dist/styles/custom/Collection.css +2 -1
  49. package/dist/styles/custom/CollectionCards.css +24 -0
  50. package/dist/styles/custom/CollectionPagination.css +1 -1
  51. package/dist/styles/custom/CollectionToolbar.css +1 -1
  52. package/dist/styles/custom/DataList.css +1 -1
  53. package/dist/styles/custom/DataTable.css +1 -1
  54. package/dist/styles/custom/DatePicker.css +1 -1
  55. package/dist/styles/custom/DescriptionList.css +1 -1
  56. package/dist/styles/custom/EditableList.css +1 -1
  57. package/dist/styles/custom/EmptyState.css +1 -1
  58. package/dist/styles/custom/ListDetail.css +1 -1
  59. package/dist/styles/custom/MoneyField.css +1 -1
  60. package/dist/styles/custom/PickerButton.css +1 -1
  61. package/dist/styles/custom/PickerSplit.css +1 -1
  62. package/dist/styles/custom/Sheet.css +1 -1
  63. package/dist/styles/custom/SideNav.css +1 -1
  64. package/dist/styles/custom/Splitter.css +1 -1
  65. package/dist/styles/custom/StatCard.css +1 -1
  66. package/dist/styles/custom/StatFigure.css +1 -1
  67. package/dist/styles/custom/Table.css +1 -1
  68. package/dist/styles/index.css +1 -1
  69. package/dist/styles/reset/accessibility.css +1 -1
  70. package/dist/styles/reset/reset-accessibility.css +1 -1
  71. package/dist/styles/reset/reset-tailwind.css +1 -1
  72. package/dist/styles/reset/reset.css +1 -1
  73. package/dist/styles/tailwind.css +1 -1
  74. package/package.json +2 -2
package/dist/design-system/components/CollectionCards/README.md ADDED
@@ -0,0 +1,26 @@
1
+ # CollectionCards
2
+
3
+ Loomiere component, not part of Base UI. The page of a collection as a grid. Columns fill the width, none narrower than --sl-collection-cards-min-width. Each card stretches to the row's height.
4
+
5
+ Use `Loomiere.CollectionCards` 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.
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
+ | `CollectionCards` | |
14
+
15
+ 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.
16
+
17
+ ## Example
18
+
19
+ From the CollectionCards stories (`Default`):
20
+
21
+ ```tsx
22
+ export const Default: Story = {
23
+ args: { collection: undefined as never, label: 'Entities', renderCard: () => null },
24
+ render: () => <Demo />,
25
+ };
26
+ ```
package/dist/design-system/components/CollectionCards/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Data" height=160 subtitle="Default" -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <style>
7
+ body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
8
+ #root { display: grid; gap: var(--sl-space-5, 20px); }
9
+ .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; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>
15
+ (()=>{var h=Object.create;var c=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},F=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of w(e))!v.call(t,o)&&o!==n&&c(t,o,{get:()=>e[o],enumerable:!(r=S(e,o))||r.enumerable});return t};var u=(t,e,n)=>(n=t!=null?h(x(t)):{},F(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t));var y=p((P,g)=>{g.exports=window.Loomiere});var E=p((k,f)=>{f.exports=window.Loomiere});var m={};D(m,{Default:()=>A,default:()=>d});var C=u(y(),1),a=u(E(),1);var i=window.React;function s(t,e,n){let{children:r,...o}=e||{};return n!==void 0&&(o.key=n),r===void 0?i.createElement(t,o):Array.isArray(r)?i.createElement(t,o,...r):i.createElement(t,o,r)}var $=i.Fragment;var R=Array.from({length:14},(t,e)=>({id:String(e+1),name:["North","Boreal","Cedar","Delta","Elm","Fjord","Grove"][e%7]+(e>6?" Holdings":" Company"),open:e*3%5})),j={title:"Components/Lib/CollectionCards",component:a.CollectionCards,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},d=j;function z(){let t=(0,a.useCollection)({rows:R,getRowId:e=>e.id,pageSize:6,columns:[{id:"name",header:"Entity",value:e=>e.name,searchable:!0,sortable:!0,rowHeader:!0},{id:"open",header:"Most open",value:e=>e.open,kind:"number",sortable:!0,hidden:!0}]});return s("div",{style:{display:"grid",gap:"16px"},children:[s(a.CollectionToolbar,{collection:t,searchLabel:"Find an Entity",searchPlaceholder:"Find an Entity",showSort:!0}),s(a.CollectionCards,{collection:t,label:"Entities",renderCard:e=>s(C.StatCard,{title:e.name,caption:"USD",href:`#${e.id}`,facts:[{label:"Open",value:e.open||"\u2013",tone:e.open?"accent":"default"}]})}),s(a.CollectionPagination,{page:t.page,pageCount:t.pageCount,pageSize:t.pageSize,total:t.pageTotal,filtered:t.isFiltered,onPageChange:t.setPage,label:"Entities"})]})}var A={args:{collection:void 0,label:"Entities",renderCard:()=>null},render:()=>s(z,{})};var l=window.React,b=d||{},L=["Default"];function M({id:t}){let e=m[t],n={...b.args||{},...e.args||{}};return(e.render||(o=>l.createElement(b.component,o)))(n,{args:n,id:t,name:t})}var N=L.map(t=>l.createElement("section",{key:t,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(M,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,N));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>