@scattered-light/loomiere-base-ui 0.5.3 → 0.6.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 (114) hide show
  1. package/README.md +6 -1
  2. package/dist/design-system/components/Accordion/README.md +20 -20
  3. package/dist/design-system/components/Accordion/preview.html +1 -1
  4. package/dist/design-system/components/AlertDialog/README.md +8 -8
  5. package/dist/design-system/components/AlertDialog/preview.html +1 -1
  6. package/dist/design-system/components/Autocomplete/README.md +9 -9
  7. package/dist/design-system/components/Autocomplete/preview.html +1 -1
  8. package/dist/design-system/components/Avatar/README.md +3 -4
  9. package/dist/design-system/components/Avatar/preview.html +1 -1
  10. package/dist/design-system/components/Checkbox/README.md +5 -5
  11. package/dist/design-system/components/Checkbox/preview.html +1 -1
  12. package/dist/design-system/components/CheckboxGroup/README.md +14 -14
  13. package/dist/design-system/components/CheckboxGroup/preview.html +1 -1
  14. package/dist/design-system/components/Collapsible/README.md +6 -6
  15. package/dist/design-system/components/Collapsible/preview.html +1 -1
  16. package/dist/design-system/components/Combobox/README.md +11 -11
  17. package/dist/design-system/components/Combobox/preview.html +1 -1
  18. package/dist/design-system/components/ContextMenu/README.md +9 -9
  19. package/dist/design-system/components/ContextMenu/preview.html +1 -1
  20. package/dist/design-system/components/Dialog/README.md +6 -6
  21. package/dist/design-system/components/Dialog/preview.html +1 -1
  22. package/dist/design-system/components/Drawer/README.md +1 -1
  23. package/dist/design-system/components/Drawer/preview.html +1 -1
  24. package/dist/design-system/components/Menu/README.md +11 -11
  25. package/dist/design-system/components/Menu/preview.html +1 -1
  26. package/dist/design-system/components/Menubar/README.md +32 -32
  27. package/dist/design-system/components/Menubar/preview.html +1 -1
  28. package/dist/design-system/components/Meter/README.md +9 -8
  29. package/dist/design-system/components/Meter/preview.html +1 -1
  30. package/dist/design-system/components/NumberField/README.md +10 -10
  31. package/dist/design-system/components/NumberField/preview.html +1 -1
  32. package/dist/design-system/components/OTPField/README.md +5 -5
  33. package/dist/design-system/components/OTPField/preview.html +1 -1
  34. package/dist/design-system/components/Popover/README.md +7 -7
  35. package/dist/design-system/components/Popover/preview.html +1 -1
  36. package/dist/design-system/components/PreviewCard/README.md +9 -11
  37. package/dist/design-system/components/PreviewCard/preview.html +1 -1
  38. package/dist/design-system/components/Progress/README.md +8 -8
  39. package/dist/design-system/components/Progress/preview.html +1 -1
  40. package/dist/design-system/components/Radio/README.md +16 -23
  41. package/dist/design-system/components/Radio/preview.html +1 -1
  42. package/dist/design-system/components/ScrollArea/README.md +6 -6
  43. package/dist/design-system/components/ScrollArea/preview.html +2 -2
  44. package/dist/design-system/components/Select/README.md +13 -12
  45. package/dist/design-system/components/Select/preview.html +1 -1
  46. package/dist/design-system/components/Separator/README.md +2 -2
  47. package/dist/design-system/components/Separator/preview.html +1 -1
  48. package/dist/design-system/components/Slider/README.md +6 -6
  49. package/dist/design-system/components/Slider/preview.html +1 -1
  50. package/dist/design-system/components/Switch/README.md +3 -3
  51. package/dist/design-system/components/Switch/preview.html +1 -1
  52. package/dist/design-system/components/Tabs/README.md +9 -9
  53. package/dist/design-system/components/Tabs/preview.html +1 -1
  54. package/dist/design-system/components/Toast/README.md +7 -7
  55. package/dist/design-system/components/Toast/preview.html +1 -1
  56. package/dist/design-system/components/Toggle/README.md +2 -2
  57. package/dist/design-system/components/Toggle/preview.html +1 -1
  58. package/dist/design-system/components/ToggleGroup/README.md +5 -5
  59. package/dist/design-system/components/ToggleGroup/preview.html +1 -1
  60. package/dist/design-system/components/Toolbar/README.md +11 -11
  61. package/dist/design-system/components/Toolbar/preview.html +1 -1
  62. package/dist/design-system/components/Tooltip/README.md +4 -4
  63. package/dist/design-system/components/Tooltip/preview.html +1 -1
  64. package/dist/design-system/components/bundle.js +4 -4
  65. package/dist/design-system/components/index.d.ts +645 -29
  66. package/dist/design-system/components/styles.css +59 -45
  67. package/dist/index.d.ts +645 -29
  68. package/dist/index.js +1404 -27
  69. package/dist/index.js.map +1 -1
  70. package/dist/styles/components/Accordion.css +1 -1
  71. package/dist/styles/components/AlertDialog.css +1 -1
  72. package/dist/styles/components/Autocomplete.css +1 -1
  73. package/dist/styles/components/Avatar.css +1 -1
  74. package/dist/styles/components/Button.css +1 -1
  75. package/dist/styles/components/Checkbox.css +1 -1
  76. package/dist/styles/components/CheckboxGroup.css +1 -1
  77. package/dist/styles/components/Collapsible.css +1 -1
  78. package/dist/styles/components/Combobox.css +1 -1
  79. package/dist/styles/components/ContextMenu.css +1 -1
  80. package/dist/styles/components/Dialog.css +1 -1
  81. package/dist/styles/components/Drawer.css +1 -1
  82. package/dist/styles/components/Field.css +1 -1
  83. package/dist/styles/components/Fieldset.css +1 -1
  84. package/dist/styles/components/Form.css +1 -1
  85. package/dist/styles/components/Input.css +1 -1
  86. package/dist/styles/components/Menu.css +1 -1
  87. package/dist/styles/components/Menubar.css +1 -1
  88. package/dist/styles/components/Meter.css +7 -4
  89. package/dist/styles/components/NavigationMenu.css +1 -1
  90. package/dist/styles/components/NumberField.css +1 -1
  91. package/dist/styles/components/OTPField.css +1 -1
  92. package/dist/styles/components/Popover.css +1 -1
  93. package/dist/styles/components/PreviewCard.css +1 -1
  94. package/dist/styles/components/Progress.css +1 -1
  95. package/dist/styles/components/Radio.css +1 -1
  96. package/dist/styles/components/ScrollArea.css +1 -1
  97. package/dist/styles/components/Select.css +12 -1
  98. package/dist/styles/components/Separator.css +1 -1
  99. package/dist/styles/components/Slider.css +1 -1
  100. package/dist/styles/components/Switch.css +1 -1
  101. package/dist/styles/components/Table.css +1 -1
  102. package/dist/styles/components/Tabs.css +1 -1
  103. package/dist/styles/components/Toast.css +1 -1
  104. package/dist/styles/components/Toggle.css +1 -1
  105. package/dist/styles/components/ToggleGroup.css +1 -1
  106. package/dist/styles/components/Toolbar.css +1 -1
  107. package/dist/styles/components/Tooltip.css +1 -1
  108. package/dist/styles/index.css +1 -1
  109. package/dist/styles/reset/accessibility.css +1 -1
  110. package/dist/styles/reset/reset-accessibility.css +1 -1
  111. package/dist/styles/reset/reset-tailwind.css +1 -1
  112. package/dist/styles/reset/reset.css +1 -1
  113. package/dist/styles/tailwind.css +1 -1
  114. package/package.json +2 -2
package/dist/design-system/components/PreviewCard/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 l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var N=(i,a)=>()=>(a||i((a={exports:{}}).exports,a),a.exports),y=(i,a)=>{for(var t in a)l(i,t,{get:a[t],enumerable:!0})},T=(i,a,t,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of h(a))!f.call(i,o)&&o!==t&&l(i,o,{get:()=>a[o],enumerable:!(s=g(a,o))||s.enumerable});return i};var x=(i,a,t)=>(t=i!=null?C(u(i)):{},T(a||!i||!i.__esModule?l(t,"default",{value:i,enumerable:!0}):t,i));var c=N((E,v)=>{v.exports=window.Loomiere.Base});var w={};y(w,{Default:()=>S,DifferentPlacements:()=>b,MultipleLinks:()=>L,TextOnly:()=>k,WithTitle:()=>R,default:()=>P});var r=x(c(),1);var p=window.React;function e(i,a,t){let{children:s,...o}=a||{};return t!==void 0&&(o.key=t),s===void 0?p.createElement(i,o):Array.isArray(s)?p.createElement(i,o,...s):p.createElement(i,o,s)}var W=p.Fragment;var A={title:"Components/PreviewCard",component:r.PreviewCard.Root,parameters:{layout:"centered"},tags:["autodocs"]},P=A;function d(i){return e("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...i,children:[e("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PreviewCardArrowFill"}),e("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PreviewCardArrowOuterStroke"}),e("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PreviewCardArrowInnerStroke"})]})}var S={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["The principles of good"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/Typography",children:"typography"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("img",{width:"448",height:"300",className:"PreviewCardImage",src:"https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300",alt:"Station Hofplein signage in Rotterdam, Netherlands"}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:[e("strong",{children:"Typography"})," is the art and science of arranging type to make written language clear, visually appealing, and effective in communication."]})})]})})})]})," ","remain into the digital age."]})})},R={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Learn more about"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/Design",children:"design principles"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("img",{width:"448",height:"300",className:"PreviewCardImage",src:"https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=448&h=300",alt:"Design workspace"}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"Design Principles"}),e("p",{className:"PreviewCardDescription",children:"Fundamental guidelines that help designers create effective, aesthetically pleasing, and functional designs across various mediums."})]})]})})})]})," ","in modern web development."]})})},k={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Check out our"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com/documentation",children:"documentation"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"Documentation"}),e("p",{className:"PreviewCardDescription",children:"Comprehensive guides and API references to help you build with our platform. Includes tutorials, examples, and best practices."})]})]})})})]})," ","for more information."]})})},L={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Modern web development involves understanding"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/HTML",children:"HTML"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"HTML"}),e("p",{className:"PreviewCardDescription",children:"HyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser."})]})]})})})]}),","," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/CSS",children:"CSS"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"CSS"}),e("p",{className:"PreviewCardDescription",children:"Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML."})]})]})})})]}),", and"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/JavaScript",children:"JavaScript"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"JavaScript"}),e("p",{className:"PreviewCardDescription",children:"A high-level, interpreted programming language that conforms to the ECMAScript specification. It's a core technology of the World Wide Web."})]})]})})})]}),"."]})})},b={render:()=>e("div",{style:{padding:"100px",display:"flex",flexDirection:"column",gap:"40px"},children:[e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on top:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",side:"top",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:"This preview appears above the link."})})]})})})]})]}),e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on bottom:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",side:"bottom",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:"This preview appears below the link."})})]})})})]})]})]})};var n=window.React,m=P||{},H=["Default","WithTitle","TextOnly","MultipleLinks"];function D({id:i}){let a=w[i],t={...m.args||{},...a.args||{}};return(a.render||(o=>n.createElement(m.component,o)))(t,{args:t,id:i,name:i})}var M=H.map(i=>n.createElement("section",{key:i,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},i.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(D,{id:i}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,M));})();
15
+ (()=>{var g=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(t,i)=>()=>(i||t((i={exports:{}}).exports,i),i.exports),x=(t,i)=>{for(var o in i)l(t,o,{get:i[o],enumerable:!0})},T=(t,i,o,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of h(i))!u.call(t,a)&&a!==o&&l(t,a,{get:()=>i[a],enumerable:!(n=m(i,a))||n.enumerable});return t};var S=(t,i,o)=>(o=t!=null?g(f(t)):{},T(i||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t));var c=y((W,C)=>{C.exports=window.Loomiere});var P={};x(P,{Default:()=>A,DifferentPlacements:()=>b,MultipleLinks:()=>L,TextOnly:()=>k,WithTitle:()=>D,default:()=>w});var r=S(c(),1);var p=window.React;function e(t,i,o){let{children:n,...a}=i||{};return o!==void 0&&(a.key=o),n===void 0?p.createElement(t,a):Array.isArray(n)?p.createElement(t,a,...n):p.createElement(t,a,n)}var z=p.Fragment;var R={title:"Components/Lib/PreviewCard",component:r.PreviewCard.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},w=R;function s(t){return e("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...t,children:[e("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PreviewCardArrowFill"}),e("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PreviewCardArrowOuterStroke"}),e("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PreviewCardArrowInnerStroke"})]})}var A={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["The principles of good"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/Typography",children:"typography"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Image,{width:"448",height:"300",src:"https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300",alt:"Station Hofplein signage in Rotterdam, Netherlands"}),e(r.PreviewCard.Content,{children:e(r.PreviewCard.Description,{children:[e("strong",{children:"Typography"})," is the art and science of arranging type to make written language clear, visually appealing, and effective in communication."]})})]})})})]})," ","remain into the digital age."]})})},D={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Learn more about"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/Design",children:"design principles"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Image,{width:"448",height:"300",src:"https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=448&h=300",alt:"Design workspace"}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"Design Principles"}),e(r.PreviewCard.Description,{children:"Fundamental guidelines that help designers create effective, aesthetically pleasing, and functional designs across various mediums."})]})]})})})]})," ","in modern web development."]})})},k={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Check out our"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://example.com/documentation",children:"documentation"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"Documentation"}),e(r.PreviewCard.Description,{children:"Comprehensive guides and API references to help you build with our platform. Includes tutorials, examples, and best practices."})]})]})})})]})," ","for more information."]})})},L={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Modern web development involves understanding"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/HTML",children:"HTML"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"HTML"}),e(r.PreviewCard.Description,{children:"HyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser."})]})]})})})]}),","," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/CSS",children:"CSS"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"CSS"}),e(r.PreviewCard.Description,{children:"Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML."})]})]})})})]}),", and"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/JavaScript",children:"JavaScript"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"JavaScript"}),e(r.PreviewCard.Description,{children:"A high-level, interpreted programming language that conforms to the ECMAScript specification. It's a core technology of the World Wide Web."})]})]})})})]}),"."]})})},b={render:()=>e("div",{style:{padding:"100px",display:"flex",flexDirection:"column",gap:"40px"},children:[e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on top:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{side:"top",sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:e(r.PreviewCard.Description,{children:"This preview appears above the link."})})]})})})]})]}),e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on bottom:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{side:"bottom",sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:e(r.PreviewCard.Description,{children:"This preview appears below the link."})})]})})})]})]})]})};var d=window.React,v=w||{},H=["Default","WithTitle","TextOnly","MultipleLinks"];function M({id:t}){let i=P[t],o={...v.args||{},...i.args||{}};return(i.render||(a=>d.createElement(v.component,a)))(o,{args:o,id:t,name:t})}var O=H.map(t=>d.createElement("section",{key:t,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(M,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,O));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/Progress/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Progress styled by the theme. A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of the scope around it: the accent by default, or set data-color on the root (success, warning, error, any palette).
4
4
 
5
- Use `Loomiere.Progress` (`import { Progress } from '@base-ui/react/progress'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Progress`, this package's wrapper: it puts the class names on for you (`import { Progress } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Progress`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/progress
8
8
 
@@ -40,13 +40,13 @@ export const Default: Story = {
40
40
 
41
41
  return (
42
42
  <div style={{ width: '400px' }}>
43
- <Progress.Root className="ProgressRoot" value={value}>
44
- <div className="ProgressHeader">
45
- <Progress.Label className="ProgressLabel">Export data</Progress.Label>
46
- <Progress.Value className="ProgressValue" />
47
- </div>
48
- <Progress.Track className="ProgressTrack">
49
- <Progress.Indicator className="ProgressIndicator" />
43
+ <Progress.Root value={value}>
44
+ <Progress.Header>
45
+ <Progress.Label>Export data</Progress.Label>
46
+ <Progress.Value />
47
+ </Progress.Header>
48
+ <Progress.Track>
49
+ <Progress.Indicator />
50
50
  </Progress.Track>
51
51
  </Progress.Root>
52
52
  </div>
package/dist/design-system/components/Progress/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var b=Object.create;var g=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var P=(r,a)=>()=>(a||r((a={exports:{}}).exports,a),a.exports),I=(r,a)=>{for(var o in a)g(r,o,{get:a[o],enumerable:!0})},S=(r,a,o,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of L(a))!T.call(r,t)&&t!==o&&g(r,t,{get:()=>a[t],enumerable:!(c=k(a,t))||c.enumerable});return r};var u=(r,a,o)=>(o=r!=null?b(x(r)):{},S(a||!r||!r.__esModule?g(o,"default",{value:r,enumerable:!0}):o,r));var p=P(($,N)=>{N.exports=window.React});var R=P((U,v)=>{v.exports=window.Loomiere.Base});var m={};I(m,{Default:()=>V,ErrorVariant:()=>W,Indeterminate:()=>h,LargeSize:()=>D,MultipleProgress:()=>A,SmallSize:()=>M,Static:()=>w,SuccessVariant:()=>j,WarningVariant:()=>z,WithoutLabel:()=>E,WithoutValue:()=>H,default:()=>i});var n=u(p(),1),s=u(R(),1);var d=window.React;function e(r,a,o){let{children:c,...t}=a||{};return o!==void 0&&(t.key=o),c===void 0?d.createElement(r,t):Array.isArray(c)?d.createElement(r,t,...c):d.createElement(r,t,c)}var Z=d.Fragment;var f={title:"Components/Progress",parameters:{layout:"centered"},tags:["autodocs"]},i=f,V={render:()=>{let[r,a]=n.useState(20);return n.useEffect(()=>{let o=setInterval(()=>{a(c=>{let t=c+Math.random()*25;return t>=100?100:Math.round(t)})},1e3);return()=>clearInterval(o)},[]),e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:r,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Export data"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})}},w={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:65,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Upload progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},h={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:null,children:[e("div",{className:"ProgressHeader",children:e(s.Progress.Label,{className:"ProgressLabel",children:"Loading..."})}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},E={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:45,children:e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})})})},H={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:75,children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Installation progress"}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},M={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:60,"data-size":"sm",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Small progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},D={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:80,"data-size":"lg",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Large progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},j={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:100,"data-color":"success",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Complete!"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},z={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:85,"data-color":"warning",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Storage almost full"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},W={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:95,"data-color":"error",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Storage critical"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},A={render:()=>{let[r,a]=n.useState([{id:1,name:"Document.pdf",progress:45},{id:2,name:"Image.jpg",progress:78},{id:3,name:"Video.mp4",progress:12}]);return n.useEffect(()=>{let o=setInterval(()=>{a(c=>c.map(t=>({...t,progress:Math.min(100,t.progress+Math.random()*15)})))},800);return()=>clearInterval(o)},[]),e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"16px"},children:r.map(o=>e(s.Progress.Root,{className:"ProgressRoot",value:o.progress,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:o.name}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]},o.id))})}};var l=window.React,y=i||{},F=["Default","Static","Indeterminate","WithoutLabel"];function O({id:r}){let a=m[r],o={...y.args||{},...a.args||{}};return(a.render||(t=>l.createElement(y.component,t)))(o,{args:o,id:r,name:r})}var B=F.map(r=>l.createElement("section",{key:r,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(O,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,B));})();
15
+ (()=>{var b=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),w=(t,o)=>{for(var a in o)i(t,a,{get:o[a],enumerable:!0})},T=(t,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of L(o))!f.call(t,s)&&s!==a&&i(t,s,{get:()=>o[s],enumerable:!(n=S(o,s))||n.enumerable});return t};var m=(t,o,a)=>(a=t!=null?b(k(t)):{},T(o||!t||!t.__esModule?i(a,"default",{value:t,enumerable:!0}):a,t));var v=u((B,P)=>{P.exports=window.React});var x=u((U,y)=>{y.exports=window.Loomiere});var p={};w(p,{Default:()=>I,ErrorVariant:()=>A,Indeterminate:()=>E,LargeSize:()=>j,MultipleProgress:()=>F,SmallSize:()=>D,Static:()=>H,SuccessVariant:()=>z,WarningVariant:()=>W,WithoutLabel:()=>V,WithoutValue:()=>M,default:()=>g});var c=m(v(),1),r=m(x(),1);var l=window.React;function e(t,o,a){let{children:n,...s}=o||{};return a!==void 0&&(s.key=a),n===void 0?l.createElement(t,s):Array.isArray(n)?l.createElement(t,s,...n):l.createElement(t,s,n)}var Z=l.Fragment;var h={title:"Components/Lib/Progress",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},g=h,I={render:()=>{let[t,o]=c.useState(20);return c.useEffect(()=>{let a=setInterval(()=>{o(n=>{let s=n+Math.random()*25;return s>=100?100:Math.round(s)})},1e3);return()=>clearInterval(a)},[]),e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:t,children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Export data"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})}},H={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:65,children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Upload progress"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},E={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:null,children:[e(r.Progress.Header,{children:e(r.Progress.Label,{children:"Loading..."})}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},V={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:45,children:e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})})})},M={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:75,children:[e(r.Progress.Label,{children:"Installation progress"}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},D={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:60,"data-size":"sm",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Small progress"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},j={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:80,"data-size":"lg",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Large progress"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},z={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:100,"data-color":"success",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Complete!"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},W={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:85,"data-color":"warning",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Storage almost full"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},A={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:95,"data-color":"error",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Storage critical"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},F={render:()=>{let[t,o]=c.useState([{id:1,name:"Document.pdf",progress:45},{id:2,name:"Image.jpg",progress:78},{id:3,name:"Video.mp4",progress:12}]);return c.useEffect(()=>{let a=setInterval(()=>{o(n=>n.map(s=>({...s,progress:Math.min(100,s.progress+Math.random()*15)})))},800);return()=>clearInterval(a)},[]),e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"16px"},children:t.map(a=>e(r.Progress.Root,{value:a.progress,children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:a.name}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]},a.id))})}};var d=window.React,R=g||{},N=["Default","Static","Indeterminate","WithoutLabel"];function O({id:t}){let o=p[t],a={...R.args||{},...o.args||{}};return(o.render||(s=>d.createElement(R.component,s)))(a,{args:a,id:t,name:t})}var C=N.map(t=>d.createElement("section",{key:t,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(O,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,C));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/Radio/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Radio styled by the theme. Same box as Checkbox, always round. Sizes follow the label the same way, and the dot is a share of the circle (check.dot-scale).
4
4
 
5
- Use `Loomiere.Radio` (`import { Radio } from '@base-ui/react/radio'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Radio`, this package's wrapper: it puts the class names on for you (`import { Radio } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Radio`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/radio
8
8
 
@@ -30,7 +30,6 @@ export const Default: Story = {
30
30
 
31
31
  return (
32
32
  <RadioGroup
33
- className="RadioGroup"
34
33
  value={value}
35
34
  onValueChange={setValue}
36
35
  aria-labelledby={id}
@@ -39,32 +38,26 @@ export const Default: Story = {
39
38
  Choose a fruit
40
39
  </div>
41
40
 
42
- <label className="RadioRoot">
43
- <Radio.Root value="apple" className="RadioButton">
44
- <Radio.Indicator className="RadioIndicator">
45
- <span className="RadioIcon" />
46
- </Radio.Indicator>
41
+ <Radio.Row>
42
+ <Radio.Root value="apple">
43
+ <Radio.Indicator />
47
44
  </Radio.Root>
48
- <span className="RadioLabel">Apple</span>
49
- </label>
45
+ <Radio.Label>Apple</Radio.Label>
46
+ </Radio.Row>
50
47
 
51
- <label className="RadioRoot">
52
- <Radio.Root value="banana" className="RadioButton">
53
- <Radio.Indicator className="RadioIndicator">
54
- <span className="RadioIcon" />
55
- </Radio.Indicator>
48
+ <Radio.Row>
49
+ <Radio.Root value="banana">
50
+ <Radio.Indicator />
56
51
  </Radio.Root>
57
- <span className="RadioLabel">Banana</span>
58
- </label>
52
+ <Radio.Label>Banana</Radio.Label>
53
+ </Radio.Row>
59
54
 
60
- <label className="RadioRoot">
61
- <Radio.Root value="cherry" className="RadioButton">
62
- <Radio.Indicator className="RadioIndicator">
63
- <span className="RadioIcon" />
64
- </Radio.Indicator>
55
+ <Radio.Row>
56
+ <Radio.Root value="cherry">
57
+ <Radio.Indicator />
65
58
  </Radio.Root>
66
- <span className="RadioLabel">Cherry</span>
67
- </label>
59
+ <Radio.Label>Cherry</Radio.Label>
60
+ </Radio.Row>
68
61
  </RadioGroup>
69
62
  );
70
63
  },
package/dist/design-system/components/Radio/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var B=Object.create;var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var p=(e,s)=>()=>(s||e((s={exports:{}}).exports,s),s.exports),V=(e,s)=>{for(var t in s)m(e,t,{get:s[t],enumerable:!0})},C=(e,s,t,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of L(s))!G.call(e,d)&&d!==t&&m(e,d,{get:()=>s[d],enumerable:!(l=h(s,d))||l.enumerable});return e};var u=(e,s,t)=>(t=e!=null?B(z(e)):{},C(s||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e));var v=p((Y,I)=>{I.exports=window.React});var g=p((Z,y)=>{y.exports=window.Loomiere.Base});var f=p((q,x)=>{x.exports=window.Loomiere.Base});var b={};V(b,{Default:()=>D,FormExample:()=>j,HorizontalLayout:()=>A,LargeSize:()=>O,SmallSize:()=>F,Uncontrolled:()=>E,WithDescriptions:()=>M,WithDisabled:()=>W,WithoutLabels:()=>P,default:()=>N});var i=u(v(),1),o=u(g(),1),n=u(f(),1);var r=window.React;function a(e,s,t){let{children:l,...d}=s||{};return t!==void 0&&(d.key=t),l===void 0?r.createElement(e,d):Array.isArray(l)?r.createElement(e,d,...l):r.createElement(e,d,l)}var J=r.Fragment;var w={title:"Components/Radio",parameters:{layout:"centered"},tags:["autodocs"]},N=w,D={render:()=>{let e=i.useId(),[s,t]=i.useState("apple");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose a fruit"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"apple",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Apple"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"banana",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Banana"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"cherry",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Cherry"})]})]})}},E={render:()=>{let e=i.useId();return a(n.RadioGroup,{className:"RadioGroup",defaultValue:"medium","aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Select size"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"small",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Small"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"medium",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Medium"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"large",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Large"})]})]})}},W={render:()=>{let e=i.useId(),[s,t]=i.useState("option1");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose an option"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"option1",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Available option"})]}),a("label",{className:"RadioRoot","data-disabled":!0,children:[a(o.Radio.Root,{value:"option2",className:"RadioButton",disabled:!0,children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Disabled option"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"option3",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Another available option"})]})]})}},F={render:()=>{let e=i.useId(),[s,t]=i.useState("email");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600,fontSize:"14px"},children:"Notification method"}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"email",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Email"})]}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"sms",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"SMS"})]}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"push",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Push notification"})]})]})}},O={render:()=>{let e=i.useId(),[s,t]=i.useState("credit");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600,fontSize:"18px"},children:"Payment method"}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"credit",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Credit card"})]}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"debit",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Debit card"})]}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"paypal",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"PayPal"})]})]})}},A={render:()=>{let e=i.useId(),[s,t]=i.useState("yes");return a("div",{children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Do you agree?"}),a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,style:{flexDirection:"row",gap:"24px"},children:[a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"yes",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Yes"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"no",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"No"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"maybe",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Maybe"})]})]})]})}},M={render:()=>{let e=i.useId(),[s,t]=i.useState("starter");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose a plan"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"starter",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Starter"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Perfect for individuals and small projects"})]})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"professional",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Professional"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"For growing teams and businesses"})]})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"enterprise",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Enterprise"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Advanced features for large organizations"})]})]})]})}},P={render:()=>{let e=i.useId(),[s,t]=i.useState("1");return a("div",{children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Select option"}),a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,style:{flexDirection:"row",gap:"16px"},children:[a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"1",className:"RadioButton","aria-label":"Option 1",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})}),a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"2",className:"RadioButton","aria-label":"Option 2",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})}),a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"3",className:"RadioButton","aria-label":"Option 3",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})})]})]})}},j={render:()=>{let e=i.useId(),s=i.useId(),t=i.useId(),[l,d]=i.useState({size:"medium",color:"blue",delivery:"standard"});return a("form",{onSubmit:c=>{c.preventDefault(),console.log("Form submitted:",l),alert(`Selected: Size ${l.size}, Color ${l.color}, Delivery ${l.delivery}`)},style:{width:"300px"},children:[a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.size,onValueChange:c=>d({...l,size:c}),"aria-labelledby":e,children:[a("h3",{id:e,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Size"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"small",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Small"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"medium",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Medium"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"large",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Large"})]})]})}),a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.color,onValueChange:c=>d({...l,color:c}),"aria-labelledby":s,children:[a("h3",{id:s,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Color"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"blue",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Blue"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"red",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Red"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"green",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Green"})]})]})}),a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.delivery,onValueChange:c=>d({...l,delivery:c}),"aria-labelledby":t,children:[a("h3",{id:t,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Delivery"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"standard",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Standard (5-7 days)"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"express",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Express (2-3 days)"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"overnight",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Overnight"})]})]})}),a("button",{type:"submit",className:"Button",children:"Submit Order"})]})}};var R=window.React,S=N||{},$=["Default","Uncontrolled","WithDisabled","SmallSize"];function T({id:e}){let s=b[e],t={...S.args||{},...s.args||{}};return(s.render||(d=>R.createElement(S.component,d)))(t,{args:t,id:e,name:e})}var k=$.map(e=>R.createElement("section",{key:e,className:"ds-story"},R.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),R.createElement("div",{className:"ds-story-body"},R.createElement(T,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(R.createElement(R.Fragment,null,k));})();
15
+ (()=>{var x=Object.create;var c=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var m=(a,t)=>()=>(t||a((t={exports:{}}).exports,t),t.exports),z=(a,t)=>{for(var i in t)c(a,i,{get:t[i],enumerable:!0})},V=(a,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!I.call(a,r)&&r!==i&&c(a,r,{get:()=>t[r],enumerable:!(l=S(t,r))||l.enumerable});return a};var v=(a,t,i)=>(i=a!=null?x(h(a)):{},V(t||!a||!a.__esModule?c(i,"default",{value:a,enumerable:!0}):i,a));var w=m((k,p)=>{p.exports=window.React});var L=m((U,y)=>{y.exports=window.Loomiere});var b={};z(b,{Default:()=>D,FormExample:()=>M,HorizontalLayout:()=>F,LargeSize:()=>G,SmallSize:()=>W,Uncontrolled:()=>E,WithDescriptions:()=>O,WithDisabled:()=>B,WithoutLabels:()=>A,default:()=>u});var d=v(w(),1),e=v(L(),1);var s=window.React;function o(a,t,i){let{children:l,...r}=t||{};return i!==void 0&&(r.key=i),l===void 0?s.createElement(a,r):Array.isArray(l)?s.createElement(a,r,...l):s.createElement(a,r,l)}var H=s.Fragment;var C={title:"Components/Lib/Radio",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},u=C,D={render:()=>{let a=d.useId(),[t,i]=d.useState("apple");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Choose a fruit"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"apple",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Apple"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"banana",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Banana"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"cherry",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Cherry"})]})]})}},E={render:()=>{let a=d.useId();return o(e.RadioGroup,{defaultValue:"medium","aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Select size"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"small",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Small"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"medium",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Medium"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"large",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Large"})]})]})}},B={render:()=>{let a=d.useId(),[t,i]=d.useState("option1");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Choose an option"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"option1",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Available option"})]}),o(e.Radio.Row,{"data-disabled":!0,children:[o(e.Radio.Root,{value:"option2",disabled:!0,children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Disabled option"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"option3",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Another available option"})]})]})}},W={render:()=>{let a=d.useId(),[t,i]=d.useState("email");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600,fontSize:"14px"},children:"Notification method"}),o(e.Radio.Row,{"data-size":"sm",children:[o(e.Radio.Root,{value:"email",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Email"})]}),o(e.Radio.Row,{"data-size":"sm",children:[o(e.Radio.Root,{value:"sms",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"SMS"})]}),o(e.Radio.Row,{"data-size":"sm",children:[o(e.Radio.Root,{value:"push",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Push notification"})]})]})}},G={render:()=>{let a=d.useId(),[t,i]=d.useState("credit");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600,fontSize:"18px"},children:"Payment method"}),o(e.Radio.Row,{"data-size":"lg",children:[o(e.Radio.Root,{value:"credit",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Credit card"})]}),o(e.Radio.Row,{"data-size":"lg",children:[o(e.Radio.Root,{value:"debit",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Debit card"})]}),o(e.Radio.Row,{"data-size":"lg",children:[o(e.Radio.Root,{value:"paypal",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"PayPal"})]})]})}},F={render:()=>{let a=d.useId(),[t,i]=d.useState("yes");return o("div",{children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Do you agree?"}),o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,style:{flexDirection:"row",gap:"24px"},children:[o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"yes",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Yes"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"no",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"No"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"maybe",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Maybe"})]})]})]})}},O={render:()=>{let a=d.useId(),[t,i]=d.useState("starter");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Choose a plan"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"starter",children:o(e.Radio.Indicator,{})}),o("div",{children:[o(e.Radio.Label,{children:"Starter"}),o("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Perfect for individuals and small projects"})]})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"professional",children:o(e.Radio.Indicator,{})}),o("div",{children:[o(e.Radio.Label,{children:"Professional"}),o("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"For growing teams and businesses"})]})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"enterprise",children:o(e.Radio.Indicator,{})}),o("div",{children:[o(e.Radio.Label,{children:"Enterprise"}),o("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Advanced features for large organizations"})]})]})]})}},A={render:()=>{let a=d.useId(),[t,i]=d.useState("1");return o("div",{children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Select option"}),o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,style:{flexDirection:"row",gap:"16px"},children:[o(e.Radio.Row,{children:o(e.Radio.Root,{value:"1","aria-label":"Option 1",children:o(e.Radio.Indicator,{})})}),o(e.Radio.Row,{children:o(e.Radio.Root,{value:"2","aria-label":"Option 2",children:o(e.Radio.Indicator,{})})}),o(e.Radio.Row,{children:o(e.Radio.Root,{value:"3","aria-label":"Option 3",children:o(e.Radio.Indicator,{})})})]})]})}},M={render:()=>{let a=d.useId(),t=d.useId(),i=d.useId(),[l,r]=d.useState({size:"medium",color:"blue",delivery:"standard"});return o("form",{onSubmit:R=>{R.preventDefault(),console.log("Form submitted:",l),alert(`Selected: Size ${l.size}, Color ${l.color}, Delivery ${l.delivery}`)},style:{width:"300px"},children:[o("div",{style:{marginBottom:"24px"},children:o(e.RadioGroup,{value:l.size,onValueChange:R=>r({...l,size:R}),"aria-labelledby":a,children:[o("h3",{id:a,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Size"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"small",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Small"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"medium",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Medium"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"large",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Large"})]})]})}),o("div",{style:{marginBottom:"24px"},children:o(e.RadioGroup,{value:l.color,onValueChange:R=>r({...l,color:R}),"aria-labelledby":t,children:[o("h3",{id:t,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Color"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"blue",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Blue"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"red",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Red"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"green",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Green"})]})]})}),o("div",{style:{marginBottom:"24px"},children:o(e.RadioGroup,{value:l.delivery,onValueChange:R=>r({...l,delivery:R}),"aria-labelledby":i,children:[o("h3",{id:i,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Delivery"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"standard",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Standard (5-7 days)"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"express",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Express (2-3 days)"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"overnight",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Overnight"})]})]})}),o("button",{type:"submit",className:"Button",children:"Submit Order"})]})}};var n=window.React,g=u||{},N=["Default","Uncontrolled","WithDisabled","SmallSize"];function P({id:a}){let t=b[a],i={...g.args||{},...t.args||{}};return(t.render||(r=>n.createElement(g.component,r)))(i,{args:i,id:a,name:a})}var j=N.map(a=>n.createElement("section",{key:a,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(P,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,j));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/ScrollArea/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI ScrollArea styled by the theme. The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until you reach for it, and a thumb in the strong fills. No component tokens.
4
4
 
5
- Use `Loomiere.ScrollArea` (`import { ScrollArea } from '@base-ui/react/scroll-area'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.ScrollArea`, this package's wrapper: it puts the class names on for you (`import { ScrollArea } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.ScrollArea`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/scroll-area
8
8
 
@@ -25,8 +25,8 @@ From the ScrollArea stories (`Default`):
25
25
  ```tsx
26
26
  export const Default: Story = {
27
27
  render: () => (
28
- <ScrollArea.Root className="ScrollAreaRoot" style={{ width: '300px', height: '200px' }}>
29
- <ScrollArea.Viewport className="ScrollAreaViewport">
28
+ <ScrollArea.Root style={{ width: '300px', height: '200px' }}>
29
+ <ScrollArea.Viewport>
30
30
  <div style={{ padding: '16px' }}>
31
31
  <h3 style={{ margin: '0 0 12px 0' }}>Scrollable Content</h3>
32
32
  <p style={{ margin: '0 0 12px 0' }}>
@@ -50,10 +50,10 @@ export const Default: Story = {
50
50
  </p>
51
51
  </div>
52
52
  </ScrollArea.Viewport>
53
- <ScrollArea.Scrollbar orientation="vertical" className="ScrollAreaScrollbar">
54
- <ScrollArea.Thumb className="ScrollAreaThumb" />
53
+ <ScrollArea.Scrollbar orientation="vertical">
54
+ <ScrollArea.Thumb />
55
55
  </ScrollArea.Scrollbar>
56
- <ScrollArea.Corner className="ScrollAreaCorner" />
56
+ <ScrollArea.Corner />
57
57
  </ScrollArea.Root>
58
58
  ),
59
59
  };
package/dist/design-system/components/ScrollArea/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var b=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var A=(o,t)=>()=>(t||o((t={exports:{}}).exports,t),t.exports),v=(o,t)=>{for(var a in t)c(o,a,{get:t[a],enumerable:!0})},w=(o,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of g(t))!y.call(o,l)&&l!==a&&c(o,l,{get:()=>t[l],enumerable:!(i=h(t,l))||i.enumerable});return o};var f=(o,t,a)=>(a=o!=null?b(x(o)):{},w(t||!o||!o.__esModule?c(a,"default",{value:o,enumerable:!0}):a,o));var d=A((H,m)=>{m.exports=window.Loomiere.Base});var p={};v(p,{BothDirections:()=>C,ChatMessages:()=>M,CodeBlock:()=>E,Default:()=>R,HorizontalScroll:()=>q,ListExample:()=>V,WithBorder:()=>T,default:()=>u});var r=f(d(),1);var n=window.React;function e(o,t,a){let{children:i,...l}=t||{};return a!==void 0&&(l.key=a),i===void 0?n.createElement(o,l):Array.isArray(i)?n.createElement(o,l,...i):n.createElement(o,l,i)}var L=n.Fragment;var N={title:"Components/ScrollArea",component:r.ScrollArea.Root,parameters:{layout:"centered"},tags:["autodocs"]},u=N,R={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"300px",height:"200px"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",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(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},q={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"300px",height:"100px"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",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(r.ScrollArea.Scrollbar,{orientation:"horizontal",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},C={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"300px",height:"200px"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",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(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Scrollbar,{orientation:"horizontal",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},T={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"400px",height:"250px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",overflow:"hidden"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",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(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},V={render:()=>{let o=Array.from({length:50},(t,a)=>`Item ${a+1}`);return e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"250px",height:"300px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("div",{style:{padding:"8px"},children:o.map(t=>e("div",{style:{padding:"12px",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",transition:"background-color 0.15s ease"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="var(--sl-surface-overlay)"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="transparent"},children:t},t))})}),e(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})}},E={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"500px",height:"250px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",backgroundColor:"var(--sl-surface-raised)"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("pre",{style:{margin:0,padding:"16px",fontFamily:"monospace",fontSize:"14px",lineHeight:1.5,whiteSpace:"pre"},children:`function exampleFunction() {
15
+ (()=>{var x=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?x(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-lg)",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-lg)"},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-lg)",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(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Scrollbar,{orientation:"horizontal",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},M={render:()=>{let o=[{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(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"350px",height:"400px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",backgroundColor:"var(--sl-surface-canvas)"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("div",{style:{padding:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:o.map(t=>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:t.user}),e("span",{style:{fontSize:"12px",color:"var(--sl-text-tertiary)"},children:t.time})]}),e("div",{style:{padding:"8px 12px",backgroundColor:t.user==="Alice"?"var(--sl-color-primary-100)":"var(--sl-surface-overlay)",borderRadius:"var(--sl-radius-md)",fontSize:"14px",lineHeight:1.5},children:t.text})]},t.id))})}),e(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})}};var s=window.React,S=u||{},k=["Default","HorizontalScroll","BothDirections","WithBorder"];function D({id:o}){let t=p[o],a={...S.args||{},...t.args||{}};return(t.render||(l=>s.createElement(S.component,l)))(a,{args:a,id:o,name:o})}var z=k.map(o=>s.createElement("section",{key:o,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(D,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,z));})();
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-lg)",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,g=u||{},D=["Default","HorizontalScroll","BothDirections","WithBorder"];function z({id:r}){let o=d[r],i={...g.args||{},...o.args||{}};return(o.render||(a=>n.createElement(g.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>
package/dist/design-system/components/Select/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Select styled by the theme. The trigger is a field (the field pattern, control sizes, the base text style); the list is a popup of item rows. Select keeps no tokens of its own.
4
4
 
5
- Use `Loomiere.Select` (`import { Select } from '@base-ui/react/select'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Select`, this package's wrapper: it puts the class names on for you (`import { Select } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Select`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/select
8
8
 
@@ -13,6 +13,7 @@ Base UI docs: https://base-ui.com/react/components/select
13
13
  | `SelectTrigger` | |
14
14
  | `SelectValue` | |
15
15
  | `SelectIcon` | |
16
+ | `Button` | |
16
17
  | `SelectBackdrop` | |
17
18
  | `SelectPositioner` | |
18
19
  | `SelectPopup` | |
@@ -41,33 +42,33 @@ export const Default: Story = {
41
42
  render: () => (
42
43
  <div style={{ width: '300px' }}>
43
44
  <Select.Root items={fruits}>
44
- <Select.Trigger className="SelectTrigger">
45
- <Select.Value className="SelectValue" data-placeholder="Select a fruit" />
46
- <Select.Icon className="SelectIcon">
45
+ <Select.Trigger>
46
+ <Select.Value data-placeholder="Select a fruit" />
47
+ <Select.Icon>
47
48
  <ChevronDownIcon />
48
49
  </Select.Icon>
49
50
  </Select.Trigger>
50
51
  <Select.Portal>
51
- <Select.Positioner className="SelectPositioner" sideOffset={8}>
52
- <Select.Popup className="SelectPopup">
53
- <Select.ScrollUpArrow className="SelectScrollArrow">
52
+ <Select.Positioner sideOffset={8}>
53
+ <Select.Popup>
54
+ <Select.ScrollUpArrow>
54
55
  <svg className="SelectScrollArrowIcon" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5">
55
56
  <path d="M9 5L5 1L1 5" />
56
57
  </svg>
57
58
  </Select.ScrollUpArrow>
58
- <Select.List className="SelectList">
59
+ <Select.List>
59
60
  {fruits.map(({ label, value }) => (
60
- <Select.Item key={value} value={value} className="SelectItem">
61
- <Select.ItemIndicator className="SelectItemIndicator">
61
+ <Select.Item key={value} value={value}>
62
+ <Select.ItemIndicator>
62
63
  <span className="material-symbols-outlined SelectItemIndicatorIcon">
63
64
  check
64
65
  </span>
65
66
  </Select.ItemIndicator>
66
- <Select.ItemText className="SelectItemText">{label}</Select.ItemText>
67
+ <Select.ItemText>{label}</Select.ItemText>
67
68
  </Select.Item>
68
69
  ))}
69
70
  </Select.List>
70
- <Select.ScrollDownArrow className="SelectScrollArrow">
71
+ <Select.ScrollDownArrow>
71
72
  <svg className="SelectScrollArrowIcon" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5">
72
73
  <path d="M1 1L5 5L9 1" />
73
74
  </svg>
package/dist/design-system/components/Select/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var b=Object.create;var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var u=(l,r)=>()=>(r||l((r={exports:{}}).exports,r),r.exports),k=(l,r)=>{for(var o in r)p(l,o,{get:r[o],enumerable:!0})},T=(l,r,o,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of A(r))!P.call(l,a)&&a!==o&&p(l,a,{get:()=>r[a],enumerable:!(c=x(r,a))||c.enumerable});return l};var w=(l,r,o)=>(o=l!=null?b(L(l)):{},T(r||!l||!l.__esModule?p(o,"default",{value:l,enumerable:!0}):o,l));var g=u(($,N)=>{N.exports=window.React});var h=u((z,v)=>{v.exports=window.Loomiere.Base});var I={};k(I,{Controlled:()=>B,Default:()=>C,Disabled:()=>U,Grouped:()=>M,WithDefaultValue:()=>D,WithDisabledItems:()=>W,WithLabel:()=>E,WithScrollArrows:()=>V,default:()=>d});var S=w(g(),1),t=w(h(),1);var m=window.React;function e(l,r,o){let{children:c,...a}=r||{};return o!==void 0&&(a.key=o),c===void 0?m.createElement(l,a):Array.isArray(c)?m.createElement(l,a,...c):m.createElement(l,a,c)}var Z=m.Fragment;var R={title:"Components/Select",parameters:{layout:"centered"},tags:["autodocs"]},d=R,s=[{label:"Apple",value:"apple"},{label:"Banana",value:"banana"},{label:"Cherry",value:"cherry"},{label:"Date",value:"date"},{label:"Elderberry",value:"elderberry"},{label:"Fig",value:"fig"},{label:"Grape",value:"grape"}];function n(l){return e("svg",{width:"8",height:"12",viewBox:"0 0 8 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...l,children:[e("path",{d:"M0.5 4.5L4 1.5L7.5 4.5"}),e("path",{d:"M0.5 7.5L4 10.5L7.5 7.5"})]})}var C={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},D={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,defaultValue:"banana",children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},B={render:()=>{let[l,r]=S.useState("apple");return e("div",{style:{width:"300px"},children:[e(t.Select.Root,{items:s,value:l,onValueChange:r,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:o,value:c})=>e(t.Select.Item,{value:c,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:o})]},c))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]}),e("div",{style:{marginTop:"12px",fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Selected: ",l||"none"]})]})}},y=[{label:"Citrus",items:[{label:"Lemon",value:"lemon"},{label:"Lime",value:"lime"},{label:"Orange",value:"orange"},{label:"Grapefruit",value:"grapefruit"}]},{label:"Berries",items:[{label:"Strawberry",value:"strawberry"},{label:"Blueberry",value:"blueberry"},{label:"Raspberry",value:"raspberry"},{label:"Blackberry",value:"blackberry"}]},{label:"Tropical",items:[{label:"Mango",value:"mango"},{label:"Pineapple",value:"pineapple"},{label:"Papaya",value:"papaya"},{label:"Coconut",value:"coconut"}]}],M={render:()=>{let l=y.flatMap(r=>r.items);return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:y.map((r,o)=>e(S.Fragment,{children:[o>0&&e(t.Select.Separator,{className:"SelectSeparator"}),e(t.Select.Group,{className:"SelectGroup",children:[e(t.Select.GroupLabel,{className:"SelectGroupLabel",children:r.label}),r.items.map(({label:c,value:a})=>e(t.Select.Item,{value:a,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:c})]},a))]})]},r.label))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},W={render:()=>{let l=[{label:"Apple",value:"apple"},{label:"Banana (out of stock)",value:"banana",disabled:!0},{label:"Cherry",value:"cherry"},{label:"Date (out of stock)",value:"date",disabled:!0},{label:"Elderberry",value:"elderberry"}];return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:l.map(({label:r,value:o,disabled:c})=>e(t.Select.Item,{value:o,disabled:c,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},V={render:()=>{let l=Array.from({length:30},(r,o)=>({label:`Fruit ${o+1}`,value:`fruit-${o+1}`}));return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:l.map(({label:r,value:o})=>e(t.Select.Item,{value:o,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},U={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,disabled:!0,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},E={render:()=>{let l=S.useId();return e("div",{style:{width:"300px"},children:[e("label",{htmlFor:l,style:{display:"block",marginBottom:"8px",fontSize:"14px",fontWeight:500,color:"var(--sl-text-primary)"},children:"Choose your favorite fruit"}),e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{id:l,className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:r,value:o})=>e(t.Select.Item,{value:o,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})]})}};var i=window.React,f=d||{},O=["Default","WithDefaultValue","Controlled","Grouped"];function F({id:l}){let r=I[l],o={...f.args||{},...r.args||{}};return(r.render||(a=>i.createElement(f.component,a)))(o,{args:o,id:l,name:l})}var G=O.map(l=>i.createElement("section",{key:l,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},l.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
15
+ (()=>{var x=Object.create;var p=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var I=(l,o)=>()=>(o||l((o={exports:{}}).exports,o),o.exports),T=(l,o)=>{for(var r in o)p(l,r,{get:o[r],enumerable:!0})},R=(l,o,r,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of k(o))!P.call(l,a)&&a!==r&&p(l,a,{get:()=>o[a],enumerable:!(c=L(o,a))||c.enumerable});return l};var w=(l,o,r)=>(r=l!=null?x(A(l)):{},R(o||!l||!l.__esModule?p(r,"default",{value:l,enumerable:!0}):r,l));var g=I(($,v)=>{v.exports=window.React});var y=I((z,h)=>{h.exports=window.Loomiere});var u={};T(u,{Controlled:()=>B,Default:()=>D,Disabled:()=>V,Grouped:()=>M,WithDefaultValue:()=>N,WithDisabledItems:()=>W,WithLabel:()=>E,WithScrollArrows:()=>U,default:()=>m});var S=w(g(),1),t=w(y(),1);var d=window.React;function e(l,o,r){let{children:c,...a}=o||{};return r!==void 0&&(a.key=r),c===void 0?d.createElement(l,a):Array.isArray(c)?d.createElement(l,a,...c):d.createElement(l,a,c)}var Z=d.Fragment;var C={title:"Components/Lib/Select",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=C,s=[{label:"Apple",value:"apple"},{label:"Banana",value:"banana"},{label:"Cherry",value:"cherry"},{label:"Date",value:"date"},{label:"Elderberry",value:"elderberry"},{label:"Fig",value:"fig"},{label:"Grape",value:"grape"}];function n(l){return e("svg",{width:"8",height:"12",viewBox:"0 0 8 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...l,children:[e("path",{d:"M0.5 4.5L4 1.5L7.5 4.5"}),e("path",{d:"M0.5 7.5L4 10.5L7.5 7.5"})]})}var D={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:l,value:o})=>e(t.Select.Item,{value:o,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:l})]},o))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},N={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,defaultValue:"banana",children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:l,value:o})=>e(t.Select.Item,{value:o,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:l})]},o))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},B={render:()=>{let[l,o]=S.useState("apple");return e("div",{style:{width:"300px"},children:[e(t.Select.Root,{items:s,value:l,onValueChange:o,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:r,value:c})=>e(t.Select.Item,{value:c,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:r})]},c))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]}),e("div",{style:{marginTop:"12px",fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Selected: ",l||"none"]})]})}},f=[{label:"Citrus",items:[{label:"Lemon",value:"lemon"},{label:"Lime",value:"lime"},{label:"Orange",value:"orange"},{label:"Grapefruit",value:"grapefruit"}]},{label:"Berries",items:[{label:"Strawberry",value:"strawberry"},{label:"Blueberry",value:"blueberry"},{label:"Raspberry",value:"raspberry"},{label:"Blackberry",value:"blackberry"}]},{label:"Tropical",items:[{label:"Mango",value:"mango"},{label:"Pineapple",value:"pineapple"},{label:"Papaya",value:"papaya"},{label:"Coconut",value:"coconut"}]}],M={render:()=>{let l=f.flatMap(o=>o.items);return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:f.map((o,r)=>e(S.Fragment,{children:[r>0&&e(t.Select.Separator,{}),e(t.Select.Group,{children:[e(t.Select.GroupLabel,{children:o.label}),o.items.map(({label:c,value:a})=>e(t.Select.Item,{value:a,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:c})]},a))]})]},o.label))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},W={render:()=>{let l=[{label:"Apple",value:"apple"},{label:"Banana (out of stock)",value:"banana",disabled:!0},{label:"Cherry",value:"cherry"},{label:"Date (out of stock)",value:"date",disabled:!0},{label:"Elderberry",value:"elderberry"}];return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:l.map(({label:o,value:r,disabled:c})=>e(t.Select.Item,{value:r,disabled:c,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:o})]},r))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},U={render:()=>{let l=Array.from({length:30},(o,r)=>({label:`Fruit ${r+1}`,value:`fruit-${r+1}`}));return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:l.map(({label:o,value:r})=>e(t.Select.Item,{value:r,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:o})]},r))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},V={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,disabled:!0,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:l,value:o})=>e(t.Select.Item,{value:o,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:l})]},o))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},E={render:()=>{let l=S.useId();return e("div",{style:{width:"300px"},children:[e("label",{htmlFor:l,style:{display:"block",marginBottom:"8px",fontSize:"14px",fontWeight:500,color:"var(--sl-text-primary)"},children:"Choose your favorite fruit"}),e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{id:l,children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:o,value:r})=>e(t.Select.Item,{value:r,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:o})]},r))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})]})}};var i=window.React,b=m||{},O=["Default","WithDefaultValue","Controlled","Grouped"];function F({id:l}){let o=u[l],r={...b.args||{},...o.args||{}};return(o.render||(a=>i.createElement(b.component,a)))(r,{args:r,id:l,name:l})}var G=O.map(l=>i.createElement("section",{key:l,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},l.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/Separator/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Separator styled by the theme. A hairline in the everyday divider color (border.default), one stroke thick, with a step of space on either side. No component tokens.
4
4
 
5
- Use `Loomiere.Separator` (`import { Separator } from '@base-ui/react/separator'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Separator`, this package's wrapper: it puts the class names on for you (`import { Separator } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Separator`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/separator
8
8
 
@@ -25,7 +25,7 @@ export const Horizontal: Story = {
25
25
  <div style={{ padding: '16px 0' }}>
26
26
  <p style={{ margin: 0, color: 'var(--sl-text-primary)' }}>Content above</p>
27
27
  </div>
28
- <Separator className="Separator" />
28
+ <Separator />
29
29
  <div style={{ padding: '16px 0' }}>
30
30
  <p style={{ margin: 0, color: 'var(--sl-text-primary)' }}>Content below</p>
31
31
  </div>