@scattered-light/loomiere-mojave 0.5.3 → 0.7.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 (102) hide show
  1. package/dist/exports/AGENTS.md +24 -8
  2. package/dist/exports/catalog.json +21 -0
  3. package/dist/exports/chakra.js +333 -0
  4. package/dist/exports/design-system/README.md +23 -7
  5. package/dist/exports/design-system/components/Accordion/README.md +20 -20
  6. package/dist/exports/design-system/components/Accordion/preview.html +1 -1
  7. package/dist/exports/design-system/components/AlertDialog/README.md +8 -8
  8. package/dist/exports/design-system/components/AlertDialog/preview.html +1 -1
  9. package/dist/exports/design-system/components/Autocomplete/README.md +9 -9
  10. package/dist/exports/design-system/components/Autocomplete/preview.html +1 -1
  11. package/dist/exports/design-system/components/Avatar/README.md +3 -4
  12. package/dist/exports/design-system/components/Avatar/preview.html +1 -1
  13. package/dist/exports/design-system/components/Badge/README.md +35 -0
  14. package/dist/exports/design-system/components/Badge/preview.html +19 -0
  15. package/dist/exports/design-system/components/Checkbox/README.md +5 -5
  16. package/dist/exports/design-system/components/Checkbox/preview.html +1 -1
  17. package/dist/exports/design-system/components/CheckboxGroup/README.md +14 -14
  18. package/dist/exports/design-system/components/CheckboxGroup/preview.html +1 -1
  19. package/dist/exports/design-system/components/Collapsible/README.md +6 -6
  20. package/dist/exports/design-system/components/Collapsible/preview.html +1 -1
  21. package/dist/exports/design-system/components/Collection/README.md +14 -0
  22. package/dist/exports/design-system/components/CollectionPagination/README.md +15 -0
  23. package/dist/exports/design-system/components/CollectionToolbar/README.md +24 -0
  24. package/dist/exports/design-system/components/Combobox/README.md +11 -11
  25. package/dist/exports/design-system/components/Combobox/preview.html +1 -1
  26. package/dist/exports/design-system/components/ContextMenu/README.md +9 -9
  27. package/dist/exports/design-system/components/ContextMenu/preview.html +1 -1
  28. package/dist/exports/design-system/components/DataList/README.md +39 -0
  29. package/dist/exports/design-system/components/DataList/preview.html +475 -0
  30. package/dist/exports/design-system/components/DataTable/README.md +41 -0
  31. package/dist/exports/design-system/components/DataTable/preview.html +475 -0
  32. package/dist/exports/design-system/components/DatePicker/README.md +55 -0
  33. package/dist/exports/design-system/components/DatePicker/preview.html +475 -0
  34. package/dist/exports/design-system/components/Dialog/README.md +6 -6
  35. package/dist/exports/design-system/components/Dialog/preview.html +1 -1
  36. package/dist/exports/design-system/components/Drawer/README.md +1 -1
  37. package/dist/exports/design-system/components/Drawer/preview.html +1 -1
  38. package/dist/exports/design-system/components/EditableList/README.md +33 -0
  39. package/dist/exports/design-system/components/EditableList/preview.html +475 -0
  40. package/dist/exports/design-system/components/EmptyState/README.md +60 -0
  41. package/dist/exports/design-system/components/EmptyState/preview.html +475 -0
  42. package/dist/exports/design-system/components/ListDetail/README.md +43 -0
  43. package/dist/exports/design-system/components/ListDetail/preview.html +475 -0
  44. package/dist/exports/design-system/components/Menu/README.md +11 -11
  45. package/dist/exports/design-system/components/Menu/preview.html +1 -1
  46. package/dist/exports/design-system/components/Menubar/README.md +32 -32
  47. package/dist/exports/design-system/components/Menubar/preview.html +1 -1
  48. package/dist/exports/design-system/components/Meter/README.md +9 -8
  49. package/dist/exports/design-system/components/Meter/preview.html +1 -1
  50. package/dist/exports/design-system/components/MoneyField/README.md +52 -0
  51. package/dist/exports/design-system/components/MoneyField/preview.html +475 -0
  52. package/dist/exports/design-system/components/NumberField/README.md +10 -10
  53. package/dist/exports/design-system/components/NumberField/preview.html +1 -1
  54. package/dist/exports/design-system/components/OTPField/README.md +5 -5
  55. package/dist/exports/design-system/components/OTPField/preview.html +1 -1
  56. package/dist/exports/design-system/components/Popover/README.md +7 -7
  57. package/dist/exports/design-system/components/Popover/preview.html +1 -1
  58. package/dist/exports/design-system/components/PreviewCard/README.md +9 -11
  59. package/dist/exports/design-system/components/PreviewCard/preview.html +1 -1
  60. package/dist/exports/design-system/components/Progress/README.md +8 -8
  61. package/dist/exports/design-system/components/Progress/preview.html +1 -1
  62. package/dist/exports/design-system/components/Radio/README.md +16 -23
  63. package/dist/exports/design-system/components/Radio/preview.html +1 -1
  64. package/dist/exports/design-system/components/ScrollArea/README.md +6 -6
  65. package/dist/exports/design-system/components/ScrollArea/preview.html +2 -2
  66. package/dist/exports/design-system/components/Select/README.md +13 -12
  67. package/dist/exports/design-system/components/Select/preview.html +1 -1
  68. package/dist/exports/design-system/components/Separator/README.md +2 -2
  69. package/dist/exports/design-system/components/Separator/preview.html +1 -1
  70. package/dist/exports/design-system/components/Slider/README.md +6 -6
  71. package/dist/exports/design-system/components/Slider/preview.html +1 -1
  72. package/dist/exports/design-system/components/Splitter/README.md +42 -0
  73. package/dist/exports/design-system/components/Splitter/preview.html +475 -0
  74. package/dist/exports/design-system/components/Switch/README.md +3 -3
  75. package/dist/exports/design-system/components/Switch/preview.html +1 -1
  76. package/dist/exports/design-system/components/Table/README.md +2 -1
  77. package/dist/exports/design-system/components/Table/preview.html +1 -1
  78. package/dist/exports/design-system/components/Tabs/README.md +9 -9
  79. package/dist/exports/design-system/components/Tabs/preview.html +1 -1
  80. package/dist/exports/design-system/components/Toast/README.md +7 -7
  81. package/dist/exports/design-system/components/Toast/preview.html +1 -1
  82. package/dist/exports/design-system/components/Toggle/README.md +2 -2
  83. package/dist/exports/design-system/components/Toggle/preview.html +1 -1
  84. package/dist/exports/design-system/components/ToggleGroup/README.md +5 -5
  85. package/dist/exports/design-system/components/ToggleGroup/preview.html +1 -1
  86. package/dist/exports/design-system/components/Toolbar/README.md +11 -11
  87. package/dist/exports/design-system/components/Toolbar/preview.html +1 -1
  88. package/dist/exports/design-system/components/Tooltip/README.md +4 -4
  89. package/dist/exports/design-system/components/Tooltip/preview.html +1 -1
  90. package/dist/exports/design-system/components/bundle.css +2394 -193
  91. package/dist/exports/design-system/components/bundle.js +7 -5
  92. package/dist/exports/design-system/components/index.d.ts +627 -29
  93. package/dist/exports/design-system/tokens.json +15 -0
  94. package/dist/exports/figma.json +1 -1
  95. package/dist/exports/mui.js +727 -0
  96. package/dist/exports/tailwind.css +36 -0
  97. package/dist/exports/tokens.dtcg.json +316 -2
  98. package/dist/tokens.css +111 -4
  99. package/dist/tokens.d.ts +93 -0
  100. package/dist/tokens.js +94 -1
  101. package/dist/tokens.json +572 -2
  102. package/package.json +2 -2
package/dist/exports/design-system/components/Dialog/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Dialog styled by the theme. Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the title-amplify heading and base description. Alert dialog shares every rule here; AlertDialog.css adds nothing of its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
4
4
 
5
- Use `Loomiere.Dialog` (`import { Dialog } from '@base-ui/react/dialog'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Dialog`, this package's wrapper: it puts the class names on for you (`import { Dialog } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Dialog`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/dialog
8
8
 
@@ -34,14 +34,14 @@ From the Dialog stories (`Default`):
34
34
  export const Default: Story = {
35
35
  render: () => (
36
36
  <Dialog.Root>
37
- <Dialog.Trigger className="Button">
37
+ <Dialog.Trigger>
38
38
  Open Dialog
39
39
  </Dialog.Trigger>
40
40
  <Dialog.Portal>
41
- <Dialog.Backdrop className="DialogBackdrop" />
42
- <Dialog.Popup className="DialogPopup">
43
- <Dialog.Title className="DialogTitle">Dialog Title</Dialog.Title>
44
- <Dialog.Description className="DialogDescription">
41
+ <Dialog.Backdrop />
42
+ <Dialog.Popup>
43
+ <Dialog.Title>Dialog Title</Dialog.Title>
44
+ <Dialog.Description>
45
45
  This is a description of the dialog. It provides context about what the dialog is for.
46
46
  </Dialog.Description>
47
47
  <div className="DialogActions">
package/dist/exports/design-system/components/Dialog/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var C=Object.create;var c=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var d=(a,t)=>()=>(t||a((t={exports:{}}).exports,t),t.exports),R=(a,t)=>{for(var i in t)c(a,i,{get:t[i],enumerable:!0})},b=(a,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of h(t))!B.call(a,l)&&l!==i&&c(a,l,{get:()=>t[l],enumerable:!(s=P(t,l))||s.enumerable});return a};var u=(a,t,i)=>(i=a!=null?C(y(a)):{},b(t||!a||!a.__esModule?c(i,"default",{value:a,enumerable:!0}):i,a));var N=d((I,D)=>{D.exports=window.React});var f=d((L,v)=>{v.exports=window.Loomiere.Base});var g={};R(g,{Default:()=>F,LongContent:()=>E,Nested:()=>q,WithForm:()=>S,default:()=>p});var m=u(N(),1),e=u(f(),1);var n=window.React;function o(a,t,i){let{children:s,...l}=t||{};return i!==void 0&&(l.key=i),s===void 0?n.createElement(a,l):Array.isArray(s)?n.createElement(a,l,...s):n.createElement(a,l,s)}var j=n.Fragment;var x={title:"Components/Dialog",component:e.Dialog.Root,parameters:{layout:"centered"},tags:["autodocs"]},p=x,F={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button",children:"Open Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"Dialog Title"}),o(e.Dialog.Description,{className:"DialogDescription",children:"This is a description of the dialog. It provides context about what the dialog is for."}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),o(e.Dialog.Close,{className:"Button",children:"Confirm"})]})]})]})]})},S={render:()=>{let a=m.useId(),t=m.useId(),i=s=>{s.preventDefault(),console.log("Form submitted")};return o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button",children:"Open Form Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"Contact Information"}),o(e.Dialog.Description,{className:"DialogDescription",children:"Please provide your contact details."}),o("form",{className:"Form",onSubmit:i,children:[o("div",{className:"FieldRoot",children:[o("label",{htmlFor:a,className:"FieldLabel",children:"Name"}),o("input",{id:a,type:"text",className:"FieldControl",placeholder:"John Doe"})]}),o("div",{className:"FieldRoot",children:[o("label",{htmlFor:t,className:"FieldLabel",children:"Email"}),o("input",{id:t,type:"email",className:"FieldControl",placeholder:"you@example.com"})]})]}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),o(e.Dialog.Close,{className:"Button",children:"Submit"})]})]})]})]})}},q={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button",children:"Open First Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"First Dialog"}),o(e.Dialog.Description,{className:"DialogDescription",children:"This is the first dialog. You can open another dialog from here."}),o("div",{className:"DialogActions",children:[o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button","data-variant":"outline",children:"Open Second Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"Second Dialog"}),o(e.Dialog.Description,{className:"DialogDescription",children:"This is a nested dialog opened from the first one."}),o("div",{className:"DialogActions",children:o(e.Dialog.Close,{className:"Button",children:"Close"})})]})]})]}),o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Close"})]})]})]})]})},E={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button",children:"Open Long Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"Terms and Conditions"}),o(e.Dialog.Description,{className:"DialogDescription",children:"Please read and accept our terms and conditions."}),o("div",{className:"DialogContent",children:[o("p",{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."}),o("p",{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."}),o("p",{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."}),o("p",{children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Decline"}),o(e.Dialog.Close,{className:"Button",children:"Accept"})]})]})]})]})};var r=window.React,T=p||{},k=["Default","WithForm","Nested","LongContent"];function w({id:a}){let t=g[a],i={...T.args||{},...t.args||{}};return(t.render||(l=>r.createElement(T.component,l)))(i,{args:i,id:a,name:a})}var A=k.map(a=>r.createElement("section",{key:a,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(w,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,A));})();
15
+ (()=>{var h=Object.create;var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var u=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),P=(t,a)=>{for(var i in a)c(t,i,{get:a[i],enumerable:!0})},x=(t,a,i,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of R(a))!b.call(t,l)&&l!==i&&c(t,l,{get:()=>a[l],enumerable:!(s=y(a,l))||s.enumerable});return t};var g=(t,a,i)=>(i=t!=null?h(T(t)):{},x(a||!t||!t.__esModule?c(i,"default",{value:t,enumerable:!0}):i,t));var v=u((k,D)=>{D.exports=window.React});var C=u((I,f)=>{f.exports=window.Loomiere});var p={};P(p,{Default:()=>S,LongContent:()=>E,Nested:()=>B,WithForm:()=>q,default:()=>m});var d=g(v(),1),e=g(C(),1);var n=window.React;function o(t,a,i){let{children:s,...l}=a||{};return i!==void 0&&(l.key=i),s===void 0?n.createElement(t,l):Array.isArray(s)?n.createElement(t,l,...s):n.createElement(t,l,s)}var j=n.Fragment;var F={title:"Components/Lib/Dialog",component:e.Dialog.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=F,S={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{children:"Open Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"Dialog Title"}),o(e.Dialog.Description,{children:"This is a description of the dialog. It provides context about what the dialog is for."}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),o(e.Dialog.Close,{className:"Button",children:"Confirm"})]})]})]})]})},q={render:()=>{let t=d.useId(),a=d.useId(),i=s=>{s.preventDefault(),console.log("Form submitted")};return o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{children:"Open Form Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"Contact Information"}),o(e.Dialog.Description,{children:"Please provide your contact details."}),o("form",{className:"Form",onSubmit:i,children:[o("div",{className:"FieldRoot",children:[o("label",{htmlFor:t,className:"FieldLabel",children:"Name"}),o("input",{id:t,type:"text",className:"FieldControl",placeholder:"John Doe"})]}),o("div",{className:"FieldRoot",children:[o("label",{htmlFor:a,className:"FieldLabel",children:"Email"}),o("input",{id:a,type:"email",className:"FieldControl",placeholder:"you@example.com"})]})]}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),o(e.Dialog.Close,{className:"Button",children:"Submit"})]})]})]})]})}},B={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{children:"Open First Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"First Dialog"}),o(e.Dialog.Description,{children:"This is the first dialog. You can open another dialog from here."}),o("div",{className:"DialogActions",children:[o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{"data-variant":"outline",children:"Open Second Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"Second Dialog"}),o(e.Dialog.Description,{children:"This is a nested dialog opened from the first one."}),o("div",{className:"DialogActions",children:o(e.Dialog.Close,{className:"Button",children:"Close"})})]})]})]}),o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Close"})]})]})]})]})},E={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{children:"Open Long Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"Terms and Conditions"}),o(e.Dialog.Description,{children:"Please read and accept our terms and conditions."}),o("div",{className:"DialogContent",children:[o("p",{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."}),o("p",{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."}),o("p",{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."}),o("p",{children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Decline"}),o(e.Dialog.Close,{className:"Button",children:"Accept"})]})]})]})]})};var r=window.React,N=m||{},w=["Default","WithForm","Nested","LongContent"];function A({id:t}){let a=p[t],i={...N.args||{},...a.args||{}};return(a.render||(l=>r.createElement(N.component,l)))(i,{args:i,id:t,name:t})}var L=w.map(t=>r.createElement("section",{key:t,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(A,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,L));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/Drawer/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
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.
4
4
 
5
- Use `Loomiere.Drawer` (`import { Drawer } from '@base-ui/react/drawer'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
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
 
7
7
  Base UI docs: https://base-ui.com/react/components/drawer
8
8
 
package/dist/exports/design-system/components/Drawer/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var y=Object.create;var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var N=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),R=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},S=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!h.call(e,a)&&a!==o&&p(e,a,{get:()=>t[a],enumerable:!(n=f(t,a))||n.enumerable});return e};var x=(e,t,o)=>(o=e!=null?y(E(e)):{},S(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e));var w=N((j,d)=>{d.exports=window.Loomiere.Base});var m={};R(m,{Default:()=>B,Sides:()=>b,default:()=>i});var s=x(w(),1);var l=window.React;function r(e,t,o){let{children:n,...a}=t||{};return o!==void 0&&(a.key=o),n===void 0?l.createElement(e,a):Array.isArray(n)?l.createElement(e,a,...n):l.createElement(e,a,n)}var V=l.Fragment;var T={title:"Components/Drawer",component:s.Drawer.Root,parameters:{layout:"centered"},tags:["autodocs"]},i=T,D=({side:e})=>r(s.Drawer.Root,{swipeDirection:e,children:[r(s.Drawer.Trigger,{className:"Button","data-emphasis":"standard",children:[e==="down"?"Bottom":e==="up"?"Top":e==="left"?"Left":"Right"," drawer"]}),r(s.Drawer.Portal,{children:[r(s.Drawer.Backdrop,{className:"DrawerBackdrop"}),r(s.Drawer.Viewport,{className:"DrawerViewport",children:r(s.Drawer.Popup,{className:"DrawerPopup",children:[r(s.Drawer.Title,{className:"DrawerTitle",children:"Trail notes"}),r(s.Drawer.Description,{className:"DrawerDescription",children:"Swipe it away, press Escape, or use the button."}),r(s.Drawer.Content,{className:"DrawerContent",children:r("p",{children:"Three sites logged at dusk. Wind from the southwest, sand moving east."})}),r(s.Drawer.Close,{className:"Button","data-emphasis":"bold",children:"Done"})]})})]})]}),B={render:()=>r(D,{side:"down"})},b={render:()=>r("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["down","right","left","up"].map(e=>r(D,{side:e},e))})};var c=window.React,u=i||{},k=["Default","Sides"];function C({id:e}){let t=m[e],o={...u.args||{},...t.args||{}};return(t.render||(a=>c.createElement(u.component,a)))(o,{args:o,id:e,name:e})}var P=k.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(C,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,P));})();
15
+ (()=>{var f=Object.create;var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var R=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),S=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},x=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of D(t))!h.call(e,a)&&a!==o&&p(e,a,{get:()=>t[a],enumerable:!(s=g(t,a))||s.enumerable});return e};var b=(e,t,o)=>(o=e!=null?f(E(e)):{},x(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e));var w=R((B,m)=>{m.exports=window.Loomiere});var l={};S(l,{Default:()=>k,Sides:()=>v,default:()=>d});var n=b(w(),1);var i=window.React;function r(e,t,o){let{children:s,...a}=t||{};return o!==void 0&&(a.key=o),s===void 0?i.createElement(e,a):Array.isArray(s)?i.createElement(e,a,...s):i.createElement(e,a,s)}var F=i.Fragment;var T={title:"Components/Lib/Drawer",component:n.Drawer.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=T,y=({side:e})=>r(n.Drawer.Root,{swipeDirection:e,children:[r(n.Drawer.Trigger,{"data-emphasis":"standard",children:[e==="down"?"Bottom":e==="up"?"Top":e==="left"?"Left":"Right"," drawer"]}),r(n.Drawer.Portal,{children:[r(n.Drawer.Backdrop,{}),r(n.Drawer.Viewport,{children:r(n.Drawer.Popup,{children:[r(n.Drawer.Title,{children:"Trail notes"}),r(n.Drawer.Description,{children:"Swipe it away, press Escape, or use the button."}),r(n.Drawer.Content,{children:r("p",{children:"Three sites logged at dusk. Wind from the southwest, sand moving east."})}),r(n.Drawer.Close,{"data-emphasis":"bold",children:"Done"})]})})]})]}),k={render:()=>r(y,{side:"down"})},v={render:()=>r("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["down","right","left","up"].map(e=>r(y,{side:e},e))})};var c=window.React,u=d||{},C=["Default","Sides"];function P({id:e}){let t=l[e],o={...u.args||{},...t.args||{}};return(t.render||(a=>c.createElement(u.component,a)))(o,{args:o,id:e,name:e})}var j=C.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(P,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,j));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/EditableList/README.md ADDED
@@ -0,0 +1,33 @@
1
+ # EditableList
2
+
3
+ Loomiere component, not part of Base UI. One table at every width, so a field is not submitted twice. Under the stack width each field shows its own label, so the lost header association does not matter: the input's name comes from that label, not from the column header. Move up / Move down would be quiet buttons in the last cell, ahead of any future drag handle.
4
+
5
+ Use `Loomiere.EditableList`, this package's component: it puts the class names on for you (`import { EditableList } 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
+ | `EditableList` | `data-stacked` |
14
+ | `EditableListAdd` | |
15
+ | `EditableListError` | |
16
+ | `EditableListBalance` | `data-color` |
17
+ | `EditableListFieldLabel` | |
18
+ | `EditableListStackedTitle` | |
19
+ | `EditableListRowLead` | |
20
+ | `Input` | |
21
+ | `EditableListTable` | |
22
+
23
+ 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.
24
+
25
+ ## Example
26
+
27
+ From the EditableList stories (`Balanced`):
28
+
29
+ ```tsx
30
+ export const Balanced: Story = { render: () => <Allocations control="100.00" /> };
31
+ ```
32
+
33
+ The preview also shows `Under`, `Over`, `SourceFields`.