@scattered-light/loomiere-base-ui 0.7.1 → 0.8.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.
- package/README.md +27 -2
- package/dist/{chunk-JUUPOOQQ.js → chunk-LJQ3RZDJ.js} +51 -3
- package/dist/chunk-LJQ3RZDJ.js.map +1 -0
- package/dist/custom/collection/index.d.ts +6 -1
- package/dist/custom/collection/index.js +18 -12
- package/dist/custom/collection/index.js.map +1 -1
- package/dist/custom/index.d.ts +1 -1
- package/dist/custom/index.js +1 -1
- package/dist/design-system/components/ContextMenu/README.md +1 -1
- package/dist/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/design-system/components/DataList/README.md +1 -1
- package/dist/design-system/components/DataList/preview.html +1 -1
- package/dist/design-system/components/DataTable/README.md +1 -1
- package/dist/design-system/components/DataTable/preview.html +38 -38
- package/dist/design-system/components/DescriptionList/README.md +41 -0
- package/dist/design-system/components/DescriptionList/preview.html +19 -0
- package/dist/design-system/components/Drawer/README.md +1 -1
- package/dist/design-system/components/ScrollArea/preview.html +2 -2
- package/dist/design-system/components/Sheet/README.md +46 -0
- package/dist/design-system/components/Sheet/preview.html +19 -0
- package/dist/design-system/components/StatFigure/README.md +38 -0
- package/dist/design-system/components/StatFigure/preview.html +19 -0
- package/dist/design-system/components/Table/README.md +2 -2
- package/dist/design-system/components/Table/preview.html +2 -2
- 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 +370 -56
- package/dist/{index-ChJXlxzq.d.ts → index-CBAo353T.d.ts} +55 -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 +8 -2
- 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/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 +19 -1
- package/dist/styles/custom/DataTable.css +1 -1
- package/dist/styles/custom/DatePicker.css +1 -1
- package/dist/styles/custom/DescriptionList.css +75 -0
- 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/Sheet.css +90 -0
- package/dist/styles/custom/Splitter.css +1 -1
- package/dist/styles/custom/StatFigure.css +60 -0
- package/dist/styles/custom/Table.css +63 -1
- package/dist/styles/index.css +4 -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 +2 -2
- package/dist/styles/reset/reset.css +2 -2
- package/dist/styles/tailwind.css +4 -1
- package/package.json +2 -2
- package/dist/chunk-JUUPOOQQ.js.map +0 -1
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# DescriptionList
|
|
2
|
+
|
|
3
|
+
Loomiere component, not part of Base UI. Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd) per pair, with a hairline between pairs. The default variant sets labels in a column beside their values. data-variant="leader" runs a dotted leader from each label to its value, which sits at the end of the row, as on a working paper. Labels are body text in the secondary color, values primary text with tabular numbers. Tokens: description-list.* (tokens/component/description-list.json).
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.DescriptionList`, this package's component: it puts the class names on for you (`import { DescriptionList } 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
|
+
| `DescriptionList` | `data-variant`: `leader` |
|
|
14
|
+
| `DescriptionItem` | |
|
|
15
|
+
| `DescriptionTerm` | |
|
|
16
|
+
| `DescriptionDetails` | |
|
|
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.
|
|
19
|
+
|
|
20
|
+
## Example
|
|
21
|
+
|
|
22
|
+
From the DescriptionList stories (`Default`):
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
export const Default: Story = {
|
|
26
|
+
render: () => (
|
|
27
|
+
<div style={box}>
|
|
28
|
+
<DescriptionList>
|
|
29
|
+
<DescriptionItem label="Legal name">North Company LLC</DescriptionItem>
|
|
30
|
+
<DescriptionItem label="Legal class">Limited liability company</DescriptionItem>
|
|
31
|
+
<DescriptionItem label="Fiscal year">Starts January</DescriptionItem>
|
|
32
|
+
<DescriptionItem label="Address">1200 Desert View Rd, Twentynine Palms, CA 92277</DescriptionItem>
|
|
33
|
+
</DescriptionList>
|
|
34
|
+
</div>
|
|
35
|
+
),
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/** variant="leader": dotted leaders run from each label to its value, as on a working paper. */
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
The preview also shows `Leader`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Display" height=240 subtitle="Default / Leader" -->
|
|
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 f=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),I=(e,t)=>{for(var r in t)l(e,r,{get:t[r],enumerable:!0})},x=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of E(t))!w.call(e,s)&&s!==r&&l(e,s,{get:()=>t[s],enumerable:!(a=u(t,s))||a.enumerable});return e};var S=(e,t,r)=>(r=e!=null?f(L(e)):{},x(t||!e||!e.__esModule?l(r,"default",{value:e,enumerable:!0}):r,e));var y=g((h,p)=>{p.exports=window.Loomiere});var d={};I(d,{Default:()=>R,Leader:()=>N,default:()=>m});var o=S(y(),1);var c=window.React;function n(e,t,r){let{children:a,...s}=t||{};return r!==void 0&&(s.key=r),a===void 0?c.createElement(e,s):Array.isArray(a)?c.createElement(e,s,...a):c.createElement(e,s,a)}var j=c.Fragment;var A={title:"Components/Lib/DescriptionList",component:o.DescriptionList,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},m=A,D={maxWidth:480},R={render:()=>n("div",{style:D,children:n(o.DescriptionList,{children:[n(o.DescriptionItem,{label:"Legal name",children:"North Company LLC"}),n(o.DescriptionItem,{label:"Legal class",children:"Limited liability company"}),n(o.DescriptionItem,{label:"Fiscal year",children:"Starts January"}),n(o.DescriptionItem,{label:"Address",children:"1200 Desert View Rd, Twentynine Palms, CA 92277"})]})})},N={render:()=>n("div",{style:D,children:n(o.DescriptionList,{variant:"leader",children:[n(o.DescriptionItem,{label:"October 2026",children:"OPEN"}),n(o.DescriptionItem,{label:"September 2026",children:"AWAITING STATEMENT"}),n(o.DescriptionItem,{label:"Opening balance",children:"1,250.00"}),n(o.DescriptionItem,{label:"Address",children:"1200 Desert View Rd, Twentynine Palms, CA 92277"})]})})};var i=window.React,b=m||{},v=["Default","Leader"];function O({id:e}){let t=d[e],r={...b.args||{},...t.args||{}};return(t.render||(s=>i.createElement(b.component,s)))(r,{args:r,id:e,name:e})}var T=v.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(O,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,T));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Drawer
|
|
2
2
|
|
|
3
|
-
The Base UI Drawer styled by the theme. The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a drawer reads as a dialog's sibling; only its size and grab bar are its own (--sl-drawer-*). Base UI supplies the swipe through --drawer-swipe-movement-x/y and data-swipe-direction on the popup.
|
|
3
|
+
The Base UI Drawer styled by the theme. The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a drawer reads as a dialog's sibling; only its size and grab bar are its own (--sl-drawer-*). Base UI supplies the swipe through --drawer-swipe-movement-x/y and data-swipe-direction on the popup. The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier line in rule.color. It is an inset shadow, so it stays put while the drawer scrolls.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Drawer`, this package's wrapper: it puts the class names on for you (`import { Drawer } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Drawer`.
|
|
6
6
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var g=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var v=(r,o)=>()=>(o||r((o={exports:{}}).exports,o),o.exports),f=(r,o)=>{for(var i in o)c(r,i,{get:o[i],enumerable:!0})},w=(r,o,i,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of y(o))!S.call(r,a)&&a!==i&&c(r,a,{get:()=>o[a],enumerable:!(l=h(o,a))||l.enumerable});return r};var A=(r,o,i)=>(i=r!=null?g(b(r)):{},w(o||!r||!r.__esModule?c(i,"default",{value:r,enumerable:!0}):i,r));var m=v((L,p)=>{p.exports=window.Loomiere});var d={};f(d,{BothDirections:()=>E,ChatMessages:()=>k,CodeBlock:()=>V,Default:()=>R,HorizontalScroll:()=>C,ListExample:()=>T,WithBorder:()=>M,default:()=>u});var t=A(m(),1);var s=window.React;function e(r,o,i){let{children:l,...a}=o||{};return i!==void 0&&(a.key=i),l===void 0?s.createElement(r,a):Array.isArray(l)?s.createElement(r,a,...l):s.createElement(r,a,l)}var F=s.Fragment;var q={title:"Components/Lib/ScrollArea",component:t.ScrollArea.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},u=q,R={render:()=>e(t.ScrollArea.Root,{style:{width:"300px",height:"200px"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"16px"},children:[e("h3",{style:{margin:"0 0 12px 0"},children:"Scrollable Content"}),e("p",{style:{margin:"0 0 12px 0"},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}),e("p",{style:{margin:"0 0 12px 0"},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0 0 12px 0"},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."}),e("p",{style:{margin:"0"},children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},C={render:()=>e(t.ScrollArea.Root,{style:{width:"300px",height:"100px"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"16px",width:"600px"},children:[e("h3",{style:{margin:"0 0 12px 0",whiteSpace:"nowrap"},children:"This content is wider than the container"}),e("p",{style:{margin:"0",whiteSpace:"nowrap"},children:"Scroll horizontally to see all the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})]})}),e(t.ScrollArea.Scrollbar,{orientation:"horizontal",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},E={render:()=>e(t.ScrollArea.Root,{style:{width:"300px",height:"200px"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"16px",width:"500px"},children:[e("h3",{style:{margin:"0 0 12px 0",whiteSpace:"nowrap"},children:"Scrollable in Both Directions"}),e("p",{style:{margin:"0 0 12px 0"},children:"This content is both wider and taller than the container, so you can scroll both vertically and horizontally."}),e("p",{style:{margin:"0 0 12px 0"},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}),e("p",{style:{margin:"0 0 12px 0"},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."}),e("p",{style:{margin:"0 0 12px 0"},children:"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0"},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam."})]})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Scrollbar,{orientation:"horizontal",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},M={render:()=>e(t.ScrollArea.Root,{style:{width:"400px",height:"250px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-surface)",overflow:"hidden"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"20px"},children:[e("h3",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Article Title"}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."}),e("p",{style:{margin:"0",lineHeight:1.6},children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},T={render:()=>{let r=Array.from({length:50},(o,i)=>`Item ${i+1}`);return e(t.ScrollArea.Root,{style:{width:"250px",height:"300px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-surface)"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"8px"},children:r.map(o=>e("div",{style:{padding:"12px",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",transition:"background-color 0.15s ease"},onMouseEnter:i=>{i.currentTarget.style.backgroundColor="var(--sl-surface-overlay)"},onMouseLeave:i=>{i.currentTarget.style.backgroundColor="transparent"},children:o},o))})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})}},V={render:()=>e(t.ScrollArea.Root,{style:{width:"500px",height:"250px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-surface)",backgroundColor:"var(--sl-surface-raised)"},children:[e(t.ScrollArea.Viewport,{children:e("pre",{style:{margin:0,padding:"16px",fontFamily:"monospace",fontSize:"14px",lineHeight:1.5,whiteSpace:"pre"},children:`function exampleFunction() {
|
|
16
16
|
const message = "Hello, World!";
|
|
17
17
|
console.log(message);
|
|
18
18
|
|
|
@@ -33,7 +33,7 @@ console.log(result);
|
|
|
33
33
|
// More code to demonstrate scrolling
|
|
34
34
|
const anotherFunction = () => {
|
|
35
35
|
return "This is a longer code example";
|
|
36
|
-
};`})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Scrollbar,{orientation:"horizontal",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},k={render:()=>{let r=[{id:1,user:"Alice",text:"Hey, how are you?",time:"10:30 AM"},{id:2,user:"Bob",text:"I'm good! How about you?",time:"10:31 AM"},{id:3,user:"Alice",text:"Doing great! Working on the new project.",time:"10:32 AM"},{id:4,user:"Bob",text:"Nice! How's it going?",time:"10:33 AM"},{id:5,user:"Alice",text:"Pretty well. Just implementing the scroll area component.",time:"10:34 AM"},{id:6,user:"Bob",text:"Cool! Let me know if you need any help.",time:"10:35 AM"},{id:7,user:"Alice",text:"Will do, thanks!",time:"10:36 AM"},{id:8,user:"Bob",text:"No problem \u{1F44D}",time:"10:37 AM"}];return e(t.ScrollArea.Root,{style:{width:"350px",height:"400px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-
|
|
36
|
+
};`})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Scrollbar,{orientation:"horizontal",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},k={render:()=>{let r=[{id:1,user:"Alice",text:"Hey, how are you?",time:"10:30 AM"},{id:2,user:"Bob",text:"I'm good! How about you?",time:"10:31 AM"},{id:3,user:"Alice",text:"Doing great! Working on the new project.",time:"10:32 AM"},{id:4,user:"Bob",text:"Nice! How's it going?",time:"10:33 AM"},{id:5,user:"Alice",text:"Pretty well. Just implementing the scroll area component.",time:"10:34 AM"},{id:6,user:"Bob",text:"Cool! Let me know if you need any help.",time:"10:35 AM"},{id:7,user:"Alice",text:"Will do, thanks!",time:"10:36 AM"},{id:8,user:"Bob",text:"No problem \u{1F44D}",time:"10:37 AM"}];return e(t.ScrollArea.Root,{style:{width:"350px",height:"400px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-surface)",backgroundColor:"var(--sl-surface-canvas)"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:r.map(o=>e("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:[e("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"baseline"},children:[e("span",{style:{fontWeight:600,fontSize:"14px"},children:o.user}),e("span",{style:{fontSize:"12px",color:"var(--sl-text-tertiary)"},children:o.time})]}),e("div",{style:{padding:"8px 12px",backgroundColor:o.user==="Alice"?"var(--sl-color-primary-100)":"var(--sl-surface-overlay)",borderRadius:"var(--sl-radius-md)",fontSize:"14px",lineHeight:1.5},children:o.text})]},o.id))})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})}};var n=window.React,x=u||{},D=["Default","HorizontalScroll","BothDirections","WithBorder"];function z({id:r}){let o=d[r],i={...x.args||{},...o.args||{}};return(o.render||(a=>n.createElement(x.component,a)))(i,{args:i,id:r,name:r})}var H=D.map(r=>n.createElement("section",{key:r,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(z,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,H));})();
|
|
37
37
|
|
|
38
38
|
</script>
|
|
39
39
|
</body>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# Sheet
|
|
2
|
+
|
|
3
|
+
Loomiere component, not part of Base UI. A working-paper surface: the raised surface with a heavier rule across its top (sheet.rule-width in sheet.rule-color) instead of its top border, and an optional tab label that sits on the rule like the tab of a ledger page. The tab is caps-condense on the inverse surface. An action (an Edit link, a count) sits at the end of the header row. Tokens: sheet.* (tokens/component/sheet.json). Content runs edge to edge, so a Table, DataList or leader DescriptionList inside lines up with the sheet's sides; data-inset on SheetBody pads it by sheet.padding instead. A Table inside drops its own outer border and corners, since the sheet is its frame.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Sheet`, this package's component: it puts the class names on for you (`import { Sheet } 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
|
+
| `Sheet` | `data-tab` |
|
|
14
|
+
| `SheetHeader` | |
|
|
15
|
+
| `SheetTab` | |
|
|
16
|
+
| `SheetAction` | |
|
|
17
|
+
| `SheetBody` | `data-inset` |
|
|
18
|
+
| `Table` | |
|
|
19
|
+
| `CollectionView` | |
|
|
20
|
+
| `DataList` | |
|
|
21
|
+
|
|
22
|
+
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.
|
|
23
|
+
|
|
24
|
+
## Example
|
|
25
|
+
|
|
26
|
+
From the Sheet stories (`Default`):
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
export const Default: Story = {
|
|
30
|
+
render: () => (
|
|
31
|
+
<div style={column}>
|
|
32
|
+
<Sheet label="Profile" action={<a href="#edit">Edit</a>}>
|
|
33
|
+
<DescriptionList variant="leader">
|
|
34
|
+
<DescriptionItem label="Legal name">North Company LLC</DescriptionItem>
|
|
35
|
+
<DescriptionItem label="Fiscal year">Starts January</DescriptionItem>
|
|
36
|
+
<DescriptionItem label="Firm reference">—</DescriptionItem>
|
|
37
|
+
</DescriptionList>
|
|
38
|
+
</Sheet>
|
|
39
|
+
</div>
|
|
40
|
+
),
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
/** A table inside runs edge to edge and drops its own frame: the sheet is the frame. */
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
The preview also shows `WithTable`, `InsetWithoutLabel`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Layout" height=360 subtitle="Default / WithTable / InsetWithoutLabel" -->
|
|
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 f=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),D=(t,a)=>{for(var o in a)i(t,o,{get:a[o],enumerable:!0})},E=(t,a,o,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of g(a))!x.call(t,n)&&n!==o&&i(t,n,{get:()=>a[n],enumerable:!(s=h(a,n))||s.enumerable});return t};var w=(t,a,o)=>(o=t!=null?f(S(t)):{},E(a||!t||!t.__esModule?i(o,"default",{value:t,enumerable:!0}):o,t));var b=v((A,y)=>{y.exports=window.Loomiere});var p={};D(p,{Default:()=>I,InsetWithoutLabel:()=>R,WithTable:()=>F,default:()=>c});var r=w(b(),1);var d=window.React;function e(t,a,o){let{children:s,...n}=a||{};return o!==void 0&&(n.key=o),s===void 0?d.createElement(t,n):Array.isArray(s)?d.createElement(t,n,...s):d.createElement(t,n,s)}var T=d.Fragment;var L={title:"Components/Lib/Sheet",component:r.Sheet,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},c=L,m={display:"flex",flexDirection:"column",gap:"40px",maxWidth:560},I={render:()=>e("div",{style:m,children:e(r.Sheet,{label:"Profile",action:e("a",{href:"#edit",children:"Edit"}),children:e(r.DescriptionList,{variant:"leader",children:[e(r.DescriptionItem,{label:"Legal name",children:"North Company LLC"}),e(r.DescriptionItem,{label:"Fiscal year",children:"Starts January"}),e(r.DescriptionItem,{label:"Firm reference",children:"\u2014"})]})})})},F={render:()=>e("div",{style:m,children:e(r.Sheet,{label:"Open items",children:e("table",{className:"Table",children:[e("thead",{children:e("tr",{children:[e("th",{scope:"col",children:"Item"}),e("th",{scope:"col","data-align":"end",children:"Amount"})]})}),e("tbody",{children:[e("tr",{children:[e("td",{children:"Unassigned party"}),e("td",{"data-align":"end",children:"(40.00)"})]}),e("tr",{children:[e("td",{children:"Split vendor"}),e("td",{"data-align":"end",children:"(50.00)"})]})]}),e("tfoot",{children:e("tr",{"data-total":"grand",children:[e("td",{"data-rule":"none",children:"Total"}),e("td",{"data-align":"end",children:"(90.00)"})]})})]})})})},R={render:()=>e("div",{style:m,children:e(r.Sheet,{inset:!0,"aria-label":"Balances",children:e("div",{style:{display:"flex",gap:"32px",flexWrap:"wrap"},children:[e(r.StatFigure,{label:"Book balance",value:"75.00",caption:"DR \xB7 Oct 29",underline:"double"}),e(r.StatFigure,{label:"For review",value:"2",caption:"(90.00)",tone:"accent"})]})})})};var l=window.React,u=c||{},W=["Default","WithTable","InsetWithoutLabel"];function N({id:t}){let a=p[t],o={...u.args||{},...a.args||{}};return(a.render||(n=>l.createElement(u.component,n)))(o,{args:o,id:t,name:t})}var O=W.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(N,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,O));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# StatFigure
|
|
2
|
+
|
|
3
|
+
Loomiere component, not part of Base UI. One large figure with a caps label above and a caption under it. The label is caps-condense, the figure uses the figures text family (mono, tabular numbers) at stat-figure.figure-font-size, the caption is body-condense. data-underline="double" draws a double rule under the figure only, the accountant's mark for a final total; data-tone="accent" colors the figure; data-size="sm" makes it smaller for a row of figures. Tokens: stat-figure.* (tokens/component/stat-figure.json).
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.StatFigure`, this package's component: it puts the class names on for you (`import { StatFigure } 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
|
+
| `StatFigure` | `data-size`: `sm`; `data-tone`: `accent`; `data-underline`: `double` |
|
|
14
|
+
| `StatFigureLabel` | |
|
|
15
|
+
| `StatFigureValue` | |
|
|
16
|
+
| `StatFigureCaption` | |
|
|
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.
|
|
19
|
+
|
|
20
|
+
## Example
|
|
21
|
+
|
|
22
|
+
From the StatFigure stories (`Default`):
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
export const Default: Story = {
|
|
26
|
+
render: () => (
|
|
27
|
+
<div style={row}>
|
|
28
|
+
<StatFigure label="Questions" value="1" caption="on client" tone="accent" />
|
|
29
|
+
<StatFigure label="Missing docs" value="2" caption="1 statement · 1 tax" tone="accent" />
|
|
30
|
+
<StatFigure label="Book balance" value="75.00" caption="DR · Oct 29" underline="double" />
|
|
31
|
+
</div>
|
|
32
|
+
),
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/** underline="double": the accountant's mark under a final total. */
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
The preview also shows `DoubleUnderline`, `Small`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Display" height=360 subtitle="Default / DoubleUnderline / Small" -->
|
|
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 f=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),E=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},D=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!v.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(r=g(t,a))||r.enumerable});return e};var R=(e,t,o)=>(o=e!=null?f(S(e)):{},D(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e));var p=w((B,u)=>{u.exports=window.Loomiere});var d={};E(d,{Default:()=>O,DoubleUnderline:()=>j,Small:()=>k,default:()=>m});var s=R(p(),1);var c=window.React;function n(e,t,o){let{children:r,...a}=t||{};return o!==void 0&&(a.key=o),r===void 0?c.createElement(e,a):Array.isArray(r)?c.createElement(e,a,...r):c.createElement(e,a,r)}var C=c.Fragment;var F={title:"Components/Lib/StatFigure",component:s.StatFigure,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Book balance",value:"1,318.22",caption:"CR \xB7 Oct 29"}},m=F,y={display:"flex",gap:"32px",alignItems:"flex-start",flexWrap:"wrap"},O={render:()=>n("div",{style:y,children:[n(s.StatFigure,{label:"Questions",value:"1",caption:"on client",tone:"accent"}),n(s.StatFigure,{label:"Missing docs",value:"2",caption:"1 statement \xB7 1 tax",tone:"accent"}),n(s.StatFigure,{label:"Book balance",value:"75.00",caption:"DR \xB7 Oct 29",underline:"double"})]})},j={args:{underline:"double"}},k={render:()=>n("div",{style:y,children:[n(s.StatFigure,{size:"sm",label:"Debits",value:"12,584.12"}),n(s.StatFigure,{size:"sm",label:"Credits",value:"(2,908.22)"}),n(s.StatFigure,{size:"sm",label:"Net",value:"9,675.90",underline:"double"})]})};var l=window.React,b=m||{},z=["Default","DoubleUnderline","Small"];function M({id:e}){let t=d[e],o={...b.args||{},...t.args||{}};return(t.render||(a=>l.createElement(b.component,a)))(o,{args:o,id:e,name:e})}var N=z.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(M,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,N));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Table
|
|
2
2
|
|
|
3
|
-
Loomiere component, not part of Base UI. Base UI has no table, so this styles the native <table class="Table"> elements with the table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small hand-built table and a full grid look alike. Rows answer to aria-selected="true", aria-current="true" (the row whose detail is open) or data-selected; cells take data-align="end" for numbers. An empty body keeps the header and the column widths: one cell spanning the columns, `<tr><td data-empty colSpan={n}><EmptyState size="compact" … /></td></tr>`. A cell with only text still uses this rule's padding. A cell whose child is an EmptyState lets the empty state pad itself. The empty row does not take the row hover.
|
|
3
|
+
Loomiere component, not part of Base UI. Base UI has no table, so this styles the native <table class="Table"> elements with the table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small hand-built table and a full grid look alike. Rows answer to aria-selected="true", aria-current="true" (the row whose detail is open) or data-selected; cells take data-align="end" for numbers. An empty body keeps the header and the column widths: one cell spanning the columns, `<tr><td data-empty colSpan={n}><EmptyState size="compact" … /></td></tr>`. A cell with only text still uses this rule's padding. A cell whose child is an EmptyState lets the empty state pad itself. The empty row does not take the row hover. Totals: tr data-total="subtotal" draws a single rule above the row, and data-total="grand" a rule above and a double rule under, as on a working paper (table.total-*). They work in tbody or tfoot. A tfoot row without data-total keeps the header tray band. The working-paper rule (rule.width, 0 by default) replaces the table's top border with a heavier line in rule.color, drawn on the first row's cells so it stays with a sticky header.
|
|
4
4
|
|
|
5
5
|
Base UI has no Table: use the native element with the class below (`<table className="Table">`).
|
|
6
6
|
|
|
@@ -48,4 +48,4 @@ export const Default: Story = {
|
|
|
48
48
|
};
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
The preview also shows `SortableAndSelected`, `
|
|
51
|
+
The preview also shows `SortableAndSelected`, `Totals`, `TopRule`.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Data" height=
|
|
1
|
+
<!-- @dsCard group="Data" height=480 subtitle="Default / SortableAndSelected / Totals / TopRule" -->
|
|
2
2
|
<!doctype html>
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var y=Object.defineProperty;var g=(e,o)=>{for(var a in o)y(e,a,{get:o[a],enumerable:!0})};var h={};g(h,{Default:()=>S,Empty:()=>T,SortableAndSelected:()=>f,TopRule:()=>x,Totals:()=>k,default:()=>u});var c=window.React;function t(e,o,a){let{children:r,...s}=o||{};return a!==void 0&&(s.key=a),r===void 0?c.createElement(e,s):Array.isArray(r)?c.createElement(e,s,...r):c.createElement(e,s,r)}var v=c.Fragment;var b={title:"Components/Table",parameters:{layout:"padded"},tags:["autodocs"]},u=b,l=[{site:"Jumbo Rocks 42",park:"Joshua Tree",nights:3,status:"Booked"},{site:"Hole-in-the-Wall 7",park:"Mojave Preserve",nights:2,status:"Waitlist"},{site:"Furnace Creek 118",park:"Death Valley",nights:4,status:"Booked"},{site:"Cottonwood 15",park:"Joshua Tree",nights:1,status:"Cancelled"}],S={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:l.map(e=>t("tr",{children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))})]})},f={render:()=>t("table",{className:"Table",children:[t("caption",{children:"Sorted by nights. Hover a header to sort by it."}),t("thead",{children:t("tr",{children:[t("th",{scope:"col","aria-sort":"none",children:"Site"}),t("th",{scope:"col","aria-sort":"none",children:"Park"}),t("th",{scope:"col","aria-sort":"descending","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:[...l].sort((e,o)=>o.nights-e.nights).map((e,o)=>t("tr",{"aria-selected":o===1?"true":void 0,children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))}),t("tfoot",{children:t("tr",{children:[t("td",{colSpan:2,children:"Total"}),t("td",{"data-align":"end",children:l.reduce((e,o)=>e+o.nights,0)}),t("td",{})]})})]})},i=[{account:"4000 Fees earned",amount:12500},{account:"4100 Interest income",amount:84.12},{account:"5000 Rent",amount:-2400},{account:"5100 Supplies",amount:-318.22},{account:"5200 Utilities",amount:-190}],d=e=>e<0?`(${Math.abs(e).toLocaleString("en-US",{minimumFractionDigits:2})})`:e.toLocaleString("en-US",{minimumFractionDigits:2}),m=e=>e.reduce((o,a)=>o+a.amount,0),k={render:()=>{let e=i.filter(a=>a.amount>0),o=i.filter(a=>a.amount<0);return t("table",{className:"Table",style:{maxWidth:520},children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Account"}),t("th",{scope:"col","data-align":"end",children:"Amount"})]})}),t("tbody",{children:[e.map(a=>t("tr",{children:[t("td",{children:a.account}),t("td",{"data-align":"end",children:d(a.amount)})]},a.account)),t("tr",{"data-total":"subtotal",children:[t("td",{"data-rule":"none",children:"Total income"}),t("td",{"data-align":"end",children:d(m(e))})]}),o.map(a=>t("tr",{children:[t("td",{children:a.account}),t("td",{"data-align":"end",children:d(a.amount)})]},a.account)),t("tr",{"data-total":"subtotal",children:[t("td",{"data-rule":"none",children:"Total expenses"}),t("td",{"data-align":"end",children:d(m(o))})]})]}),t("tfoot",{children:t("tr",{"data-total":"grand",children:[t("td",{"data-rule":"none",children:"Net income"}),t("td",{"data-align":"end",children:d(m(i))})]})})]})}},x={render:()=>t("div",{style:{"--sl-rule-width":"var(--sl-stroke-medium)"},children:t("table",{className:"Table",style:{maxWidth:520},children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col","data-align":"end",children:"Nights"})]})}),t("tbody",{children:l.map(e=>t("tr",{children:[t("td",{children:e.site}),t("td",{"data-align":"end",children:e.nights})]},e.site))})]})})},T={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"})]})}),t("tbody",{children:t("tr",{children:t("td",{colSpan:3,"data-empty":"",children:"No trips yet"})})})]})};var n=window.React,p=u||{},N=["Default","SortableAndSelected","Totals","TopRule"];function E({id:e}){let o=h[e],a={...p.args||{},...o.args||{}};return(o.render||(s=>n.createElement(p.component,s)))(a,{args:a,id:e,name:e})}var R=N.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(E,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,R));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|