@scattered-light/loomiere-base-ui 0.5.2 → 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/Collapsible/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var g=Object.create;var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var h=(l,a)=>()=>(a||l((a={exports:{}}).exports,a),a.exports),f=(l,a)=>{for(var o in a)p(l,o,{get:a[o],enumerable:!0})},R=(l,a,o,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of u(a))!N.call(l,t)&&t!==o&&p(l,t,{get:()=>a[t],enumerable:!(n=y(a,t))||n.enumerable});return l};var T=(l,a,o)=>(o=l!=null?g(v(l)):{},R(a||!l||!l.__esModule?p(o,"default",{value:l,enumerable:!0}):o,l));var d=h((B,b)=>{b.exports=window.Loomiere.Base});var m={};f(m,{Default:()=>w,DefaultOpen:()=>x,FAQ:()=>I,RecoveryKeys:()=>S,default:()=>c});var s=T(d(),1);var r=window.React;function e(l,a,o){let{children:n,...t}=a||{};return o!==void 0&&(t.key=o),n===void 0?r.createElement(l,t):Array.isArray(n)?r.createElement(l,t,...n):r.createElement(l,t,n)}var O=r.Fragment;var P={title:"Components/Collapsible",component:s.Collapsible.Root,parameters:{layout:"centered"},tags:["autodocs"]},c=P,w={render:()=>e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Show more information"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"This is additional content that can be collapsed and expanded. It contains important information that users can choose to view."})})})]})},x={render:()=>e(s.Collapsible.Root,{className:"Collapsible",defaultOpen:!0,children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Hide details"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"This collapsible starts in an open state by default. Click the trigger to collapse it."})})})]})},I={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"What is Base UI?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:`Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.`})})})]}),e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"How do I install it?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:[e("p",{children:"You can install Base UI using npm, yarn, or pnpm:"}),e("code",{children:"npm install @base-ui/react"})]})})]}),e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Is it accessible?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"Yes! Base UI components follow WAI-ARIA authoring practices and are fully accessible out of the box with proper keyboard navigation and screen reader support."})})})]})]})},S={render:()=>e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Recovery keys"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:[e("div",{children:"alien-bean-pasta"}),e("div",{children:"wild-irish-burrito"}),e("div",{children:"horse-battery-staple"})]})})]})};var i=window.React,C=c||{},E=["Default","DefaultOpen","FAQ","RecoveryKeys"];function A({id:l}){let a=m[l],o={...C.args||{},...a.args||{}};return(a.render||(t=>i.createElement(C.component,t)))(o,{args:o,id:l,name:l})}var D=E.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(A,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
15
+ (()=>{var g=Object.create;var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var R=(o,l)=>()=>(l||o((l={exports:{}}).exports,l),l.exports),v=(o,l)=>{for(var a in l)p(o,a,{get:l[a],enumerable:!0})},w=(o,l,a,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of u(l))!f.call(o,n)&&n!==a&&p(o,n,{get:()=>l[n],enumerable:!(s=y(l,n))||s.enumerable});return o};var x=(o,l,a)=>(a=o!=null?g(h(o)):{},w(l||!o||!o.__esModule?p(a,"default",{value:o,enumerable:!0}):a,o));var b=R((O,m)=>{m.exports=window.Loomiere});var d={};v(d,{Default:()=>T,DefaultOpen:()=>S,FAQ:()=>P,RecoveryKeys:()=>E,default:()=>c});var t=x(b(),1);var i=window.React;function e(o,l,a){let{children:s,...n}=l||{};return a!==void 0&&(n.key=a),s===void 0?i.createElement(o,n):Array.isArray(s)?i.createElement(o,n,...s):i.createElement(o,n,s)}var _=i.Fragment;var I={title:"Components/Lib/Collapsible",component:t.Collapsible.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},c=I,T={render:()=>e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Show more information"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:e("p",{children:"This is additional content that can be collapsed and expanded. It contains important information that users can choose to view."})})})]})},S={render:()=>e(t.Collapsible.Root,{defaultOpen:!0,children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Hide details"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:e("p",{children:"This collapsible starts in an open state by default. Click the trigger to collapse it."})})})]})},P={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"What is Base UI?"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:e("p",{children:`Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.`})})})]}),e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"How do I install it?"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:[e("p",{children:"You can install Base UI using npm, yarn, or pnpm:"}),e("code",{children:"npm install @base-ui/react"})]})})]}),e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Is it accessible?"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:e("p",{children:"Yes! Base UI components follow WAI-ARIA authoring practices and are fully accessible out of the box with proper keyboard navigation and screen reader support."})})})]})]})},E={render:()=>e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Recovery keys"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:[e("div",{children:"alien-bean-pasta"}),e("div",{children:"wild-irish-burrito"}),e("div",{children:"horse-battery-staple"})]})})]})};var r=window.React,C=c||{},N=["Default","DefaultOpen","FAQ","RecoveryKeys"];function A({id:o}){let l=d[o],a={...C.args||{},...l.args||{}};return(l.render||(n=>r.createElement(C.component,n)))(a,{args:a,id:o,name:o})}var D=N.map(o=>r.createElement("section",{key:o,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(A,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,D));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/Combobox/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Combobox styled by the theme. No component tokens. The input is Input (Input.css); the chips box is a field; the clear and open buttons are icon buttons; the list is a popup of item rows with the shared group label, separator and empty message. Rules that adjust Input are scoped under a Combobox parent so they win over Input.css, which loads later.
4
4
 
5
- Use `Loomiere.Combobox` (`import { Combobox } from '@base-ui/react/combobox'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Combobox`, this package's wrapper: it puts the class names on for you (`import { Combobox } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Combobox`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/combobox
8
8
 
@@ -55,19 +55,19 @@ export const Default: Story = {
55
55
  render: () => {
56
56
  const id = React.useId();
57
57
  return (
58
- <div className="ComboboxRoot" style={{ width: '400px' }}>
58
+ <div style={{ width: '400px' }}>
59
59
  <Combobox.Root items={fruits}>
60
60
  <label htmlFor={id} className="ComboboxLabel">
61
61
  Choose a fruit
62
62
  <div className="ComboboxInputWrapper">
63
- <Combobox.Input placeholder="e.g. Apple" id={id} className="ComboboxInput" />
63
+ <Combobox.Input placeholder="e.g. Apple" id={id} />
64
64
  <div className="ComboboxActionButtons">
65
- <Combobox.Clear className="ComboboxClear" aria-label="Clear selection">
65
+ <Combobox.Clear aria-label="Clear selection">
66
66
  <span className="material-symbols-outlined ComboboxClearIcon">
67
67
  close
68
68
  </span>
69
69
  </Combobox.Clear>
70
- <Combobox.Trigger className="ComboboxTrigger" aria-label="Open popup">
70
+ <Combobox.Trigger aria-label="Open popup">
71
71
  <span className="material-symbols-outlined ComboboxTriggerIcon">
72
72
  expand_more
73
73
  </span>
@@ -77,13 +77,13 @@ export const Default: Story = {
77
77
  </label>
78
78
 
79
79
  <Combobox.Portal>
80
- <Combobox.Positioner className="ComboboxPositioner" sideOffset={4}>
81
- <Combobox.Popup className="ComboboxPopup">
82
- <Combobox.Empty className="ComboboxEmpty">No fruits found.</Combobox.Empty>
83
- <Combobox.List className="ComboboxList">
80
+ <Combobox.Positioner sideOffset={4}>
81
+ <Combobox.Popup>
82
+ <Combobox.Empty>No fruits found.</Combobox.Empty>
83
+ <Combobox.List>
84
84
  {(item: string) => (
85
- <Combobox.Item key={item} value={item} className="ComboboxItem">
86
- <Combobox.ItemIndicator className="ComboboxItemIndicator">
85
+ <Combobox.Item key={item} value={item}>
86
+ <Combobox.ItemIndicator>
87
87
  <span className="material-symbols-outlined ComboboxItemIndicatorIcon">
88
88
  check
89
89
  </span>
package/dist/design-system/components/Combobox/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var q=Object.create;var V=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var O=(a,t)=>()=>(t||a((t={exports:{}}).exports,t),t.exports),se=(a,t)=>{for(var l in t)V(a,l,{get:t[l],enumerable:!0})},ne=(a,t,l,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let m of oe(t))!te.call(a,m)&&m!==l&&V(a,m,{get:()=>t[m],enumerable:!(r=ee(t,m))||r.enumerable});return a};var U=(a,t,l)=>(l=a!=null?q(ae(a)):{},ne(t||!a||!a.__esModule?V(l,"default",{value:a,enumerable:!0}):l,a));var $=O((he,G)=>{G.exports=window.React});var K=O((Ne,H)=>{H.exports=window.Loomiere.Base});var _=O((fe,W)=>{W.exports=window.Loomiere.Base});var j={};se(j,{AsyncSearchMultiple:()=>Ce,AsyncSearchSingle:()=>pe,Creatable:()=>be,Default:()=>re,Grouped:()=>ie,InputInsidePopup:()=>ue,MultipleSelect:()=>me,default:()=>B});var n=U($(),1),o=U(K(),1),v=U(_(),1);var k=window.React;function e(a,t,l){let{children:r,...m}=t||{};return l!==void 0&&(m.key=l),r===void 0?k.createElement(a,m):Array.isArray(r)?k.createElement(a,m,...r):k.createElement(a,m,r)}var ve=k.Fragment;var Q=["Apple","Banana","Cherry","Date","Elderberry","Fig","Grape","Honeydew","Kiwi","Lemon","Mango","Orange"],le={title:"Components/Combobox",parameters:{layout:"centered"},tags:["autodocs"]},B=le,re={render:()=>{let a=n.useId();return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:Q,children:[e("label",{htmlFor:a,className:"ComboboxLabel",children:["Choose a fruit",e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{placeholder:"e.g. Apple",id:a,className:"ComboboxInput"}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{className:"ComboboxClear","aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{className:"ComboboxTrigger","aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup",children:[e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No fruits found."}),e(o.Combobox.List,{className:"ComboboxList",children:t=>e(o.Combobox.Item,{value:t,className:"ComboboxItem",children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:t})]},t)})]})})})]})})}},me={render:()=>{let a=n.useRef(null),t=n.useId();return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:Q,multiple:!0,children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:t,children:"Choose fruits"}),e(o.Combobox.Chips,{className:"ComboboxChips",ref:a,children:e(o.Combobox.Value,{children:l=>e(n.Fragment,{children:[l.map(r=>e(o.Combobox.Chip,{className:"ComboboxChip","aria-label":r,children:[r,e(o.Combobox.ChipRemove,{className:"ComboboxChipRemove","aria-label":`Remove ${r}`,children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},r)),e(o.Combobox.Input,{id:t,placeholder:l.length>0?"":"e.g. Apple",className:"ComboboxInput"})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,anchor:a,children:e(o.Combobox.Popup,{className:"ComboboxPopup",children:[e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No fruits found."}),e(o.Combobox.List,{className:"ComboboxList",children:l=>e(o.Combobox.Item,{value:l,className:"ComboboxItem",children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:l})]},l)})]})})})]})})}},z=[{category:"Citrus",items:["Lemon","Lime","Orange","Grapefruit"]},{category:"Berries",items:["Strawberry","Blueberry","Raspberry","Blackberry"]},{category:"Tropical",items:["Mango","Pineapple","Papaya","Coconut"]}],ie={render:()=>{let a=n.useId(),t=z.flatMap(l=>l.items);return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:t,children:[e("label",{htmlFor:a,className:"ComboboxLabel",children:["Choose a fruit",e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{placeholder:"Search fruits...",id:a,className:"ComboboxInput"}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{className:"ComboboxClear","aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{className:"ComboboxTrigger","aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup",children:[e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No fruits found."}),z.map((l,r)=>e(n.Fragment,{children:[r>0&&e(o.Combobox.Separator,{className:"ComboboxSeparator"}),e(o.Combobox.Group,{className:"ComboboxGroup",children:[e(o.Combobox.GroupLabel,{className:"ComboboxGroupLabel",children:l.category}),l.items.map(m=>e(o.Combobox.Item,{value:m,className:"ComboboxItem",children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:m})]},m))]})]},l.category))]})})})]})})}},ce=[{id:"bug",value:"bug"},{id:"docs",value:"documentation"},{id:"enhancement",value:"enhancement"},{id:"help-wanted",value:"help wanted"},{id:"good-first-issue",value:"good first issue"}],be={render:()=>{let a=n.useId(),[t,l]=n.useState(ce),[r,m]=n.useState([]),[R,g]=n.useState(""),[f,d]=n.useState(!1),p=n.useRef(null),y=n.useRef(null),h=n.useRef(null),I=n.useRef(""),N=n.useRef(void 0);function D(s){if(s.key!=="Enter"||N.current)return;let c=R.trim();if(c==="")return;let C=c.toLocaleLowerCase(),u=t.find(x=>x.value.trim().toLocaleLowerCase()===C);if(u){m(x=>x.some(F=>F.id===u.id)?x:[...x,u]),g("");return}I.current=c,d(!0)}function L(){let s=y.current||h.current,c=s?s.value.trim():"";if(!c)return;let C=c.toLocaleLowerCase(),u=C.replace(/\s+/g,"-"),x=t.find(b=>b.value.trim().toLocaleLowerCase()===C);if(x){m(b=>b.some(Y=>Y.id===x.id)?b:[...b,x]),d(!1),g("");return}let F=new Set(t.map(b=>b.id)),A=u;if(F.has(A)){let b=2;for(;F.has(`${u}-${b}`);)b+=1;A=`${u}-${b}`}let M={id:A,value:c};r.find(b=>b.id===M.id)||(l(b=>[...b,M]),m(b=>[...b,M])),d(!1),g("")}function P(s){s.preventDefault(),L()}let i=R.trim(),E=i.toLocaleLowerCase(),w=t.some(s=>s.value.trim().toLocaleLowerCase()===E),T=i!==""&&!w?[...t,{creatable:i,id:`create:${E}`,value:`Create "${i}"`}]:t;return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(n.Fragment,{children:[e(o.Combobox.Root,{items:T,multiple:!0,onValueChange:s=>{let c=s.find(u=>u.creatable&&!r.some(x=>x.id===u.id));if(c&&c.creatable){I.current=c.creatable,d(!0);return}let C=s.filter(u=>!u.creatable);m(C),g("")},value:r,inputValue:R,onInputValueChange:g,onItemHighlighted:s=>{N.current=s},children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:a,children:"Labels"}),e(o.Combobox.Chips,{className:"ComboboxChips",ref:p,children:e(o.Combobox.Value,{children:s=>e(n.Fragment,{children:[s.map(c=>e(o.Combobox.Chip,{className:"ComboboxChip","aria-label":c.value,children:[c.value,e(o.Combobox.ChipRemove,{className:"ComboboxChipRemove","aria-label":"Remove",children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},c.id)),e(o.Combobox.Input,{ref:h,id:a,placeholder:s.length>0?"":"e.g. bug",className:"ComboboxInput",onKeyDown:D})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,anchor:p,children:e(o.Combobox.Popup,{className:"ComboboxPopup",children:[e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No labels found."}),e(o.Combobox.List,{className:"ComboboxList",children:s=>s.creatable?e(o.Combobox.Item,{className:"ComboboxItem",value:s,children:[e("span",{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"add"})}),e("div",{className:"ComboboxItemText",children:['Create "',s.creatable,'"']})]},s.id):e(o.Combobox.Item,{className:"ComboboxItem",value:s,children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:s.value})]},s.id)})]})})})]}),e(v.Dialog.Root,{open:f,onOpenChange:d,children:e(v.Dialog.Portal,{children:[e(v.Dialog.Backdrop,{className:"DialogBackdrop"}),e(v.Dialog.Popup,{className:"DialogPopup",initialFocus:y,children:[e(v.Dialog.Title,{className:"DialogTitle",children:"Create new label"}),e(v.Dialog.Description,{className:"DialogDescription",children:"Add a new label to select."}),e("form",{onSubmit:P,children:[e("input",{ref:y,className:"Input",placeholder:"Label name",defaultValue:I.current}),e("div",{className:"DialogActions",children:[e(v.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),e("button",{type:"submit",className:"Button",children:"Create"})]})]})]})]})})]})})}},J=[{code:"",value:null,continent:"",label:"Select country"},{code:"af",value:"afghanistan",label:"Afghanistan",continent:"Asia"},{code:"au",value:"australia",label:"Australia",continent:"Oceania"},{code:"ca",value:"canada",label:"Canada",continent:"North America"},{code:"cn",value:"china",label:"China",continent:"Asia"},{code:"fr",value:"france",label:"France",continent:"Europe"},{code:"de",value:"germany",label:"Germany",continent:"Europe"},{code:"in",value:"india",label:"India",continent:"Asia"},{code:"jp",value:"japan",label:"Japan",continent:"Asia"},{code:"mx",value:"mexico",label:"Mexico",continent:"North America"},{code:"gb",value:"united-kingdom",label:"United Kingdom",continent:"Europe"},{code:"us",value:"united-states",label:"United States",continent:"North America"}],ue={render:()=>e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:J,defaultValue:J[0],children:[e(o.Combobox.Trigger,{className:"ComboboxSelectTrigger",children:[e(o.Combobox.Value,{}),e(o.Combobox.Icon,{className:"ComboboxIcon",children:e("span",{className:"material-symbols-outlined",children:"unfold_more"})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",align:"start",sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup","aria-label":"Select country",children:[e("div",{className:"ComboboxInputContainer",children:e(o.Combobox.Input,{placeholder:"e.g. United Kingdom",className:"ComboboxInput"})}),e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No countries found."}),e(o.Combobox.List,{className:"ComboboxList",children:a=>e(o.Combobox.Item,{value:a,className:"ComboboxItem",children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:a.label??a.value})]},a.code)})]})})})]})})},de=[{id:"leslie-alexander",name:"Leslie Alexander",username:"leslie",email:"leslie.alexander@example.com",title:"Product Manager"},{id:"kathryn-murphy",name:"Kathryn Murphy",username:"kathryn",email:"kathryn.murphy@example.com",title:"Marketing Lead"},{id:"courtney-henry",name:"Courtney Henry",username:"courtney",email:"courtney.henry@example.com",title:"Design Systems"},{id:"michael-foster",name:"Michael Foster",username:"michael",email:"michael.foster@example.com",title:"Engineering Manager"},{id:"lindsay-walton",name:"Lindsay Walton",username:"lindsay",email:"lindsay.walton@example.com",title:"Product Designer"},{id:"tom-cook",name:"Tom Cook",username:"tom",email:"tom.cook@example.com",title:"Frontend Engineer"},{id:"whitney-francis",name:"Whitney Francis",username:"whitney",email:"whitney.francis@example.com",title:"Customer Success"},{id:"jacob-jones",name:"Jacob Jones",username:"jacob",email:"jacob.jones@example.com",title:"Security Engineer"}];async function Z(a,t){return await new Promise(r=>{setTimeout(r,Math.random()*500+100)}),Math.random()<.01||a==="will_error"?{users:[],error:"Failed to fetch people. Please try again."}:{users:de.filter(r=>t(r.name,a)||t(r.username,a)||t(r.email,a)||t(r.title,a)),error:null}}var pe={render:()=>{let a=n.useId(),[t,l]=n.useState([]),[r,m]=n.useState(null),[R,g]=n.useState(""),[f,d]=n.useState(null),[p,y]=n.useTransition(),{contains:h}=o.Combobox.useFilter(),I=n.useRef(null),N=R.trim(),D=n.useMemo(()=>!r||t.some(i=>i.id===r.id)?t:[...t,r],[t,r]);function L(){return p?e(n.Fragment,{children:[e("span",{className:"ComboboxSpinner","aria-hidden":!0}),"Searching..."]}):f||(N===""?r?null:"Start typing to search people...":t.length===0?`No matches for "${N}".`:null)}function P(){return N===""||p||t.length>0||f?null:"Try a different search term."}return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:D,itemToStringLabel:i=>i.name,filter:null,onOpenChangeComplete:i=>{!i&&r&&l([r])},onValueChange:i=>{m(i),g(""),d(null)},onInputValueChange:(i,{reason:E})=>{g(i);let w=new AbortController;if(I.current?.abort(),I.current=w,i===""){l([]),d(null);return}E!=="item-press"&&y(()=>{(async()=>{d(null);let T=await Z(i,h);w.signal.aborted||y(()=>{l(T.users),d(T.error)})})()})},children:[e("div",{className:"ComboboxLabel",children:[e("label",{htmlFor:a,children:"Assign reviewer"}),e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{id:a,placeholder:"e.g. Michael",className:"ComboboxInput"}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{className:"ComboboxClear","aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{className:"ComboboxTrigger","aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup","aria-busy":p||void 0,children:[e(o.Combobox.Status,{className:"ComboboxStatus visually-hidden",children:L()}),e(o.Combobox.Empty,{className:"ComboboxEmpty",children:P()}),e(o.Combobox.List,{className:"ComboboxList",children:i=>e(o.Combobox.Item,{className:"ComboboxItem",value:i,children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:[e("div",{className:"ComboboxItemTitle",children:i.name}),e("div",{className:"ComboboxItemSubtitle",children:[e("span",{className:"ComboboxItemUsername",children:["@",i.username]}),e("span",{children:i.title})]}),e("div",{className:"ComboboxItemEmail",children:i.email})]})]},i.id)})]})})})]})})}},Ce={render:()=>{let a=n.useId(),t=n.useRef(null),[l,r]=n.useState([]),[m,R]=n.useState([]),[g,f]=n.useState(""),[d,p]=n.useState(null),[y,h]=n.useState(!1),[I,N]=n.useTransition(),{contains:D}=o.Combobox.useFilter(),L=n.useRef(null),P=n.useRef([]),i=g.trim(),E=n.useMemo(()=>{if(m.length===0)return l;let s=[...l];return m.forEach(c=>{l.some(C=>C.id===c.id)||s.push(c)}),s},[l,m]);function w(){return I?e(n.Fragment,{children:[e("span",{className:"ComboboxSpinner","aria-hidden":!0}),"Searching..."]}):d||(i===""&&!y?m.length>0?null:"Start typing to search people...":l.length===0&&!y?`No matches for "${i}".`:null)}function T(){return i===""||I||l.length>0||d?null:"Try a different search term."}return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:E,itemToStringLabel:s=>s.name,multiple:!0,filter:null,onOpenChangeComplete:s=>{s||(r(P.current),h(!1))},onValueChange:s=>{P.current=s,R(s),f(""),p(null),s.length===0?(r([]),h(!1)):h(!0)},onInputValueChange:(s,{reason:c})=>{f(s);let C=new AbortController;if(L.current?.abort(),L.current=C,s===""){r(P.current),p(null),h(!1);return}c!=="item-press"&&N(()=>{(async()=>{p(null);let u=await Z(s,D);C.signal.aborted||N(()=>{r(u.users),p(u.error)})})()})},children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:a,children:"Assign reviewers"}),e(o.Combobox.Chips,{className:"ComboboxChips",ref:t,children:e(o.Combobox.Value,{children:s=>e(n.Fragment,{children:[s.map(c=>e(o.Combobox.Chip,{className:"ComboboxChip","aria-label":c.name,children:[c.name,e(o.Combobox.ChipRemove,{className:"ComboboxChipRemove","aria-label":"Remove",children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},c.id)),e(o.Combobox.Input,{id:a,placeholder:s.length>0?"":"e.g. Michael",className:"ComboboxInput"})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",anchor:t,sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup","aria-busy":I||void 0,children:[e(o.Combobox.Status,{className:"ComboboxStatus visually-hidden",children:w()}),e(o.Combobox.Empty,{className:"ComboboxEmpty",children:T()}),e(o.Combobox.List,{className:"ComboboxList",children:s=>e(o.Combobox.Item,{className:"ComboboxItem",value:s,children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:[e("div",{className:"ComboboxItemTitle",children:s.name}),e("div",{className:"ComboboxItemSubtitle",children:[e("span",{className:"ComboboxItemUsername",children:["@",s.username]}),e("span",{children:s.title})]}),e("div",{className:"ComboboxItemEmail",children:s.email})]})]},s.id)})]})})})]})})}};var S=window.React,X=B||{},xe=["Default","MultipleSelect","Grouped","Creatable"];function ge({id:a}){let t=j[a],l={...X.args||{},...t.args||{}};return(t.render||(m=>S.createElement(X.component,m)))(l,{args:l,id:a,name:a})}var Ie=xe.map(a=>S.createElement("section",{key:a,className:"ds-story"},S.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),S.createElement("div",{className:"ds-story-body"},S.createElement(ge,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(S.createElement(S.Fragment,null,Ie));})();
15
+ (()=>{var Z=Object.create;var M=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var U=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),oe=(t,a)=>{for(var s in a)M(t,s,{get:a[s],enumerable:!0})},te=(t,a,s,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of X(a))!ee.call(t,i)&&i!==s&&M(t,i,{get:()=>a[i],enumerable:!(l=q(a,i))||l.enumerable});return t};var B=(t,a,s)=>(s=t!=null?Z(Y(t)):{},te(a||!t||!t.__esModule?M(s,"default",{value:t,enumerable:!0}):s,t));var $=U((ge,j)=>{j.exports=window.React});var G=U((ye,H)=>{H.exports=window.Loomiere});var O={};oe(O,{AsyncSearchMultiple:()=>ue,AsyncSearchSingle:()=>be,Creatable:()=>ie,Default:()=>ne,Grouped:()=>se,InputInsidePopup:()=>me,MultipleSelect:()=>re,default:()=>V});var r=B($(),1),o=B(G(),1);var F=window.React;function e(t,a,s){let{children:l,...i}=a||{};return s!==void 0&&(i.key=s),l===void 0?F.createElement(t,i):Array.isArray(l)?F.createElement(t,i,...l):F.createElement(t,i,l)}var fe=F.Fragment;var _=["Apple","Banana","Cherry","Date","Elderberry","Fig","Grape","Honeydew","Kiwi","Lemon","Mango","Orange"],ae={title:"Components/Lib/Combobox",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},V=ae,ne={render:()=>{let t=r.useId();return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:_,children:[e("label",{htmlFor:t,className:"ComboboxLabel",children:["Choose a fruit",e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{placeholder:"e.g. Apple",id:t}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{"aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{"aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,children:e(o.Combobox.Popup,{children:[e(o.Combobox.Empty,{children:"No fruits found."}),e(o.Combobox.List,{children:a=>e(o.Combobox.Item,{value:a,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:a})]},a)})]})})})]})})}},re={render:()=>{let t=r.useRef(null),a=r.useId();return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:_,multiple:!0,children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:a,children:"Choose fruits"}),e(o.Combobox.Chips,{ref:t,children:e(o.Combobox.Value,{children:s=>e(r.Fragment,{children:[s.map(l=>e(o.Combobox.Chip,{"aria-label":l,children:[l,e(o.Combobox.ChipRemove,{"aria-label":`Remove ${l}`,children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},l)),e(o.Combobox.Input,{id:a,placeholder:s.length>0?"":"e.g. Apple"})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,anchor:t,children:e(o.Combobox.Popup,{children:[e(o.Combobox.Empty,{children:"No fruits found."}),e(o.Combobox.List,{children:s=>e(o.Combobox.Item,{value:s,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:s})]},s)})]})})})]})})}},K=[{category:"Citrus",items:["Lemon","Lime","Orange","Grapefruit"]},{category:"Berries",items:["Strawberry","Blueberry","Raspberry","Blackberry"]},{category:"Tropical",items:["Mango","Pineapple","Papaya","Coconut"]}],se={render:()=>{let t=r.useId(),a=K.flatMap(s=>s.items);return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:a,children:[e("label",{htmlFor:t,className:"ComboboxLabel",children:["Choose a fruit",e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{placeholder:"Search fruits...",id:t}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{"aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{"aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,children:e(o.Combobox.Popup,{children:[e(o.Combobox.Empty,{children:"No fruits found."}),K.map((s,l)=>e(r.Fragment,{children:[l>0&&e(o.Combobox.Separator,{}),e(o.Combobox.Group,{children:[e(o.Combobox.GroupLabel,{children:s.category}),s.items.map(i=>e(o.Combobox.Item,{value:i,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:i})]},i))]})]},s.category))]})})})]})})}},le=[{id:"bug",value:"bug"},{id:"docs",value:"documentation"},{id:"enhancement",value:"enhancement"},{id:"help-wanted",value:"help wanted"},{id:"good-first-issue",value:"good first issue"}],ie={render:()=>{let t=r.useId(),[a,s]=r.useState(le),[l,i]=r.useState([]),[R,g]=r.useState(""),[v,d]=r.useState(!1),p=r.useRef(null),f=r.useRef(null),h=r.useRef(null),y=r.useRef(""),I=r.useRef(void 0);function T(n){if(n.key!=="Enter"||I.current)return;let c=R.trim();if(c==="")return;let C=c.toLocaleLowerCase(),u=a.find(x=>x.value.trim().toLocaleLowerCase()===C);if(u){i(x=>x.some(D=>D.id===u.id)?x:[...x,u]),g("");return}y.current=c,d(!0)}function L(){let n=f.current||h.current,c=n?n.value.trim():"";if(!c)return;let C=c.toLocaleLowerCase(),u=C.replace(/\s+/g,"-"),x=a.find(b=>b.value.trim().toLocaleLowerCase()===C);if(x){i(b=>b.some(Q=>Q.id===x.id)?b:[...b,x]),d(!1),g("");return}let D=new Set(a.map(b=>b.id)),k=u;if(D.has(k)){let b=2;for(;D.has(`${u}-${b}`);)b+=1;k=`${u}-${b}`}let A={id:k,value:c};l.find(b=>b.id===A.id)||(s(b=>[...b,A]),i(b=>[...b,A])),d(!1),g("")}function N(n){n.preventDefault(),L()}let m=R.trim(),P=m.toLocaleLowerCase(),w=a.some(n=>n.value.trim().toLocaleLowerCase()===P),E=m!==""&&!w?[...a,{creatable:m,id:`create:${P}`,value:`Create "${m}"`}]:a;return e("div",{style:{width:"400px"},children:e(r.Fragment,{children:[e(o.Combobox.Root,{items:E,multiple:!0,onValueChange:n=>{let c=n.find(u=>u.creatable&&!l.some(x=>x.id===u.id));if(c&&c.creatable){y.current=c.creatable,d(!0);return}let C=n.filter(u=>!u.creatable);i(C),g("")},value:l,inputValue:R,onInputValueChange:g,onItemHighlighted:n=>{I.current=n},children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:t,children:"Labels"}),e(o.Combobox.Chips,{ref:p,children:e(o.Combobox.Value,{children:n=>e(r.Fragment,{children:[n.map(c=>e(o.Combobox.Chip,{"aria-label":c.value,children:[c.value,e(o.Combobox.ChipRemove,{"aria-label":"Remove",children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},c.id)),e(o.Combobox.Input,{ref:h,id:t,placeholder:n.length>0?"":"e.g. bug",onKeyDown:T})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,anchor:p,children:e(o.Combobox.Popup,{children:[e(o.Combobox.Empty,{children:"No labels found."}),e(o.Combobox.List,{children:n=>n.creatable?e(o.Combobox.Item,{value:n,children:[e("span",{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"add"})}),e("div",{className:"ComboboxItemText",children:['Create "',n.creatable,'"']})]},n.id):e(o.Combobox.Item,{value:n,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:n.value})]},n.id)})]})})})]}),e(o.Dialog.Root,{open:v,onOpenChange:d,children:e(o.Dialog.Portal,{children:[e(o.Dialog.Backdrop,{}),e(o.Dialog.Popup,{initialFocus:f,children:[e(o.Dialog.Title,{children:"Create new label"}),e(o.Dialog.Description,{children:"Add a new label to select."}),e("form",{onSubmit:N,children:[e(o.Input,{ref:f,placeholder:"Label name",defaultValue:y.current}),e(o.Dialog.Actions,{children:[e(o.Dialog.Close,{emphasis:"quiet",children:"Cancel"}),e(o.Button,{type:"submit",children:"Create"})]})]})]})]})})]})})}},W=[{code:"",value:null,continent:"",label:"Select country"},{code:"af",value:"afghanistan",label:"Afghanistan",continent:"Asia"},{code:"au",value:"australia",label:"Australia",continent:"Oceania"},{code:"ca",value:"canada",label:"Canada",continent:"North America"},{code:"cn",value:"china",label:"China",continent:"Asia"},{code:"fr",value:"france",label:"France",continent:"Europe"},{code:"de",value:"germany",label:"Germany",continent:"Europe"},{code:"in",value:"india",label:"India",continent:"Asia"},{code:"jp",value:"japan",label:"Japan",continent:"Asia"},{code:"mx",value:"mexico",label:"Mexico",continent:"North America"},{code:"gb",value:"united-kingdom",label:"United Kingdom",continent:"Europe"},{code:"us",value:"united-states",label:"United States",continent:"North America"}],me={render:()=>e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:W,defaultValue:W[0],children:[e(o.Combobox.Trigger,{className:"ComboboxSelectTrigger",children:[e(o.Combobox.Value,{}),e(o.Combobox.Icon,{children:e("span",{className:"material-symbols-outlined",children:"unfold_more"})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{align:"start",sideOffset:4,children:e(o.Combobox.Popup,{"aria-label":"Select country",children:[e("div",{className:"ComboboxInputContainer",children:e(o.Combobox.Input,{placeholder:"e.g. United Kingdom"})}),e(o.Combobox.Empty,{children:"No countries found."}),e(o.Combobox.List,{children:t=>e(o.Combobox.Item,{value:t,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:t.label??t.value})]},t.code)})]})})})]})})},ce=[{id:"leslie-alexander",name:"Leslie Alexander",username:"leslie",email:"leslie.alexander@example.com",title:"Product Manager"},{id:"kathryn-murphy",name:"Kathryn Murphy",username:"kathryn",email:"kathryn.murphy@example.com",title:"Marketing Lead"},{id:"courtney-henry",name:"Courtney Henry",username:"courtney",email:"courtney.henry@example.com",title:"Design Systems"},{id:"michael-foster",name:"Michael Foster",username:"michael",email:"michael.foster@example.com",title:"Engineering Manager"},{id:"lindsay-walton",name:"Lindsay Walton",username:"lindsay",email:"lindsay.walton@example.com",title:"Product Designer"},{id:"tom-cook",name:"Tom Cook",username:"tom",email:"tom.cook@example.com",title:"Frontend Engineer"},{id:"whitney-francis",name:"Whitney Francis",username:"whitney",email:"whitney.francis@example.com",title:"Customer Success"},{id:"jacob-jones",name:"Jacob Jones",username:"jacob",email:"jacob.jones@example.com",title:"Security Engineer"}];async function z(t,a){return await new Promise(l=>{setTimeout(l,Math.random()*500+100)}),Math.random()<.01||t==="will_error"?{users:[],error:"Failed to fetch people. Please try again."}:{users:ce.filter(l=>a(l.name,t)||a(l.username,t)||a(l.email,t)||a(l.title,t)),error:null}}var be={render:()=>{let t=r.useId(),[a,s]=r.useState([]),[l,i]=r.useState(null),[R,g]=r.useState(""),[v,d]=r.useState(null),[p,f]=r.useTransition(),{contains:h}=o.Combobox.useFilter(),y=r.useRef(null),I=R.trim(),T=r.useMemo(()=>!l||a.some(m=>m.id===l.id)?a:[...a,l],[a,l]);function L(){return p?e(r.Fragment,{children:[e("span",{className:"ComboboxSpinner","aria-hidden":!0}),"Searching..."]}):v||(I===""?l?null:"Start typing to search people...":a.length===0?`No matches for "${I}".`:null)}function N(){return I===""||p||a.length>0||v?null:"Try a different search term."}return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:T,itemToStringLabel:m=>m.name,filter:null,onOpenChangeComplete:m=>{!m&&l&&s([l])},onValueChange:m=>{i(m),g(""),d(null)},onInputValueChange:(m,{reason:P})=>{g(m);let w=new AbortController;if(y.current?.abort(),y.current=w,m===""){s([]),d(null);return}P!=="item-press"&&f(()=>{(async()=>{d(null);let E=await z(m,h);w.signal.aborted||f(()=>{s(E.users),d(E.error)})})()})},children:[e("div",{className:"ComboboxLabel",children:[e("label",{htmlFor:t,children:"Assign reviewer"}),e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{id:t,placeholder:"e.g. Michael"}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{"aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{"aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,children:e(o.Combobox.Popup,{"aria-busy":p||void 0,children:[e(o.Combobox.Status,{className:"visually-hidden",children:L()}),e(o.Combobox.Empty,{children:N()}),e(o.Combobox.List,{children:m=>e(o.Combobox.Item,{value:m,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:[e("div",{className:"ComboboxItemTitle",children:m.name}),e("div",{className:"ComboboxItemSubtitle",children:[e("span",{className:"ComboboxItemUsername",children:["@",m.username]}),e("span",{children:m.title})]}),e("div",{className:"ComboboxItemEmail",children:m.email})]})]},m.id)})]})})})]})})}},ue={render:()=>{let t=r.useId(),a=r.useRef(null),[s,l]=r.useState([]),[i,R]=r.useState([]),[g,v]=r.useState(""),[d,p]=r.useState(null),[f,h]=r.useState(!1),[y,I]=r.useTransition(),{contains:T}=o.Combobox.useFilter(),L=r.useRef(null),N=r.useRef([]),m=g.trim(),P=r.useMemo(()=>{if(i.length===0)return s;let n=[...s];return i.forEach(c=>{s.some(C=>C.id===c.id)||n.push(c)}),n},[s,i]);function w(){return y?e(r.Fragment,{children:[e("span",{className:"ComboboxSpinner","aria-hidden":!0}),"Searching..."]}):d||(m===""&&!f?i.length>0?null:"Start typing to search people...":s.length===0&&!f?`No matches for "${m}".`:null)}function E(){return m===""||y||s.length>0||d?null:"Try a different search term."}return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:P,itemToStringLabel:n=>n.name,multiple:!0,filter:null,onOpenChangeComplete:n=>{n||(l(N.current),h(!1))},onValueChange:n=>{N.current=n,R(n),v(""),p(null),n.length===0?(l([]),h(!1)):h(!0)},onInputValueChange:(n,{reason:c})=>{v(n);let C=new AbortController;if(L.current?.abort(),L.current=C,n===""){l(N.current),p(null),h(!1);return}c!=="item-press"&&I(()=>{(async()=>{p(null);let u=await z(n,T);C.signal.aborted||I(()=>{l(u.users),p(u.error)})})()})},children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:t,children:"Assign reviewers"}),e(o.Combobox.Chips,{ref:a,children:e(o.Combobox.Value,{children:n=>e(r.Fragment,{children:[n.map(c=>e(o.Combobox.Chip,{"aria-label":c.name,children:[c.name,e(o.Combobox.ChipRemove,{"aria-label":"Remove",children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},c.id)),e(o.Combobox.Input,{id:t,placeholder:n.length>0?"":"e.g. Michael"})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{anchor:a,sideOffset:4,children:e(o.Combobox.Popup,{"aria-busy":y||void 0,children:[e(o.Combobox.Status,{className:"visually-hidden",children:w()}),e(o.Combobox.Empty,{children:E()}),e(o.Combobox.List,{children:n=>e(o.Combobox.Item,{value:n,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:[e("div",{className:"ComboboxItemTitle",children:n.name}),e("div",{className:"ComboboxItemSubtitle",children:[e("span",{className:"ComboboxItemUsername",children:["@",n.username]}),e("span",{children:n.title})]}),e("div",{className:"ComboboxItemEmail",children:n.email})]})]},n.id)})]})})})]})})}};var S=window.React,J=V||{},de=["Default","MultipleSelect","Grouped","Creatable"];function pe({id:t}){let a=O[t],s={...J.args||{},...a.args||{}};return(a.render||(i=>S.createElement(J.component,i)))(s,{args:s,id:t,name:t})}var Ce=de.map(t=>S.createElement("section",{key:t,className:"ds-story"},S.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),S.createElement("div",{className:"ds-story-body"},S.createElement(pe,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(S.createElement(S.Fragment,null,Ce));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/ContextMenu/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI ContextMenu styled by the theme. No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
4
4
 
5
- Use `Loomiere.ContextMenu` (`import { ContextMenu } from '@base-ui/react/context-menu'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.ContextMenu`, this package's wrapper: it puts the class names on for you (`import { ContextMenu } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.ContextMenu`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/context-menu
8
8
 
@@ -36,7 +36,7 @@ From the ContextMenu stories (`Default`):
36
36
  export const Default: Story = {
37
37
  render: () => (
38
38
  <ContextMenu.Root>
39
- <ContextMenu.Trigger className="ContextMenuTrigger">
39
+ <ContextMenu.Trigger>
40
40
  <div style={{
41
41
  width: '300px',
42
42
  height: '200px',
@@ -52,13 +52,13 @@ export const Default: Story = {
52
52
  </div>
53
53
  </ContextMenu.Trigger>
54
54
  <ContextMenu.Portal>
55
- <ContextMenu.Positioner className="ContextMenuPositioner">
56
- <ContextMenu.Popup className="ContextMenuPopup">
57
- <ContextMenu.Item className="ContextMenuItem">Copy</ContextMenu.Item>
58
- <ContextMenu.Item className="ContextMenuItem">Cut</ContextMenu.Item>
59
- <ContextMenu.Item className="ContextMenuItem">Paste</ContextMenu.Item>
60
- <ContextMenu.Separator className="ContextMenuSeparator" />
61
- <ContextMenu.Item className="ContextMenuItem">Delete</ContextMenu.Item>
55
+ <ContextMenu.Positioner>
56
+ <ContextMenu.Popup>
57
+ <ContextMenu.Item>Copy</ContextMenu.Item>
58
+ <ContextMenu.Item>Cut</ContextMenu.Item>
59
+ <ContextMenu.Item>Paste</ContextMenu.Item>
60
+ <ContextMenu.Separator />
61
+ <ContextMenu.Item>Delete</ContextMenu.Item>
62
62
  </ContextMenu.Popup>
63
63
  </ContextMenu.Positioner>
64
64
  </ContextMenu.Portal>
package/dist/design-system/components/ContextMenu/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var R=Object.create;var m=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var x=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),S=(o,n)=>{for(var a in n)m(o,a,{get:n[a],enumerable:!0})},f=(o,n,a,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of y(n))!P.call(o,s)&&s!==a&&m(o,s,{get:()=>n[s],enumerable:!(r=N(n,s))||r.enumerable});return o};var C=(o,n,a)=>(a=o!=null?R(k(o)):{},f(n||!o||!o.__esModule?m(a,"default",{value:o,enumerable:!0}):a,o));var p=x((W,I)=>{I.exports=window.React});var h=x((V,M)=>{M.exports=window.Loomiere.Base});var l={};S(l,{Default:()=>w,WithCheckboxes:()=>T,WithDisabledItems:()=>_,WithRadioGroup:()=>E,WithSubmenu:()=>L,default:()=>d});var u=C(p(),1),t=C(h(),1);var i=window.React;function e(o,n,a){let{children:r,...s}=n||{};return a!==void 0&&(s.key=a),r===void 0?i.createElement(o,s):Array.isArray(r)?i.createElement(o,s,...r):i.createElement(o,s,r)}var A=i.Fragment;var v={title:"Components/ContextMenu",component:t.ContextMenu.Root,parameters:{layout:"centered"},tags:["autodocs"]},d=v,w={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{className:"ContextMenuTrigger",children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{className:"ContextMenuPositioner",children:e(t.ContextMenu.Popup,{className:"ContextMenuPopup",children:[e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Copy"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Cut"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Paste"}),e(t.ContextMenu.Separator,{className:"ContextMenuSeparator"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Delete"})]})})})]})},T={render:()=>{let[o,n]=u.useState(!1),[a,r]=u.useState(!0),[s,g]=u.useState(!1);return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{className:"ContextMenuTrigger",children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for view options"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{className:"ContextMenuPositioner",children:e(t.ContextMenu.Popup,{className:"ContextMenuPopup",children:[e(t.ContextMenu.CheckboxItem,{className:"ContextMenuCheckboxItem",checked:o,onCheckedChange:n,children:[e(t.ContextMenu.CheckboxItemIndicator,{className:"ContextMenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show toolbar"]}),e(t.ContextMenu.CheckboxItem,{className:"ContextMenuCheckboxItem",checked:a,onCheckedChange:r,children:[e(t.ContextMenu.CheckboxItemIndicator,{className:"ContextMenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show sidebar"]}),e(t.ContextMenu.CheckboxItem,{className:"ContextMenuCheckboxItem",checked:s,onCheckedChange:g,children:[e(t.ContextMenu.CheckboxItemIndicator,{className:"ContextMenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show footer"]})]})})})]})}},E={render:()=>{let[o,n]=u.useState("light");return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{className:"ContextMenuTrigger",children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click to change theme"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{className:"ContextMenuPositioner",children:e(t.ContextMenu.Popup,{className:"ContextMenuPopup",children:e(t.ContextMenu.Group,{className:"ContextMenuGroup",children:[e(t.ContextMenu.GroupLabel,{className:"ContextMenuGroupLabel",children:"Theme"}),e(t.ContextMenu.RadioGroup,{value:o,onValueChange:n,children:[e(t.ContextMenu.RadioItem,{value:"light",className:"ContextMenuRadioItem",children:[e(t.ContextMenu.RadioItemIndicator,{className:"ContextMenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.ContextMenu.RadioItem,{value:"dark",className:"ContextMenuRadioItem",children:[e(t.ContextMenu.RadioItemIndicator,{className:"ContextMenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.ContextMenu.RadioItem,{value:"system",className:"ContextMenuRadioItem",children:[e(t.ContextMenu.RadioItemIndicator,{className:"ContextMenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})]})})})})]})}},L={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{className:"ContextMenuTrigger",children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for nested menu"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{className:"ContextMenuPositioner",children:e(t.ContextMenu.Popup,{className:"ContextMenuPopup",children:[e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"New File"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"New Folder"}),e(t.ContextMenu.Separator,{className:"ContextMenuSeparator"}),e(t.ContextMenu.SubmenuRoot,{children:[e(t.ContextMenu.SubmenuTrigger,{className:"ContextMenuSubmenuTrigger",children:"Share"}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{className:"ContextMenuPositioner",children:e(t.ContextMenu.Popup,{className:"ContextMenuPopup",children:[e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Email"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Copy Link"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Social Media"})]})})})]})]})})})]})},_={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{className:"ContextMenuTrigger",children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{className:"ContextMenuPositioner",children:e(t.ContextMenu.Popup,{className:"ContextMenuPopup",children:[e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Copy"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",disabled:!0,children:"Cut (disabled)"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",disabled:!0,children:"Paste (disabled)"}),e(t.ContextMenu.Separator,{className:"ContextMenuSeparator"}),e(t.ContextMenu.Item,{className:"ContextMenuItem",children:"Delete"})]})})})]})};var c=window.React,b=d||{},F=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function G({id:o}){let n=l[o],a={...b.args||{},...n.args||{}};return(n.render||(s=>c.createElement(b.component,s)))(a,{args:a,id:o,name:o})}var j=F.map(o=>c.createElement("section",{key:o,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(G,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,j));})();
15
+ (()=>{var R=Object.create;var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var x=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),S=(o,n)=>{for(var a in n)d(o,a,{get:n[a],enumerable:!0})},v=(o,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of k(n))!P.call(o,r)&&r!==a&&d(o,r,{get:()=>n[r],enumerable:!(s=y(n,r))||s.enumerable});return o};var p=(o,n,a)=>(a=o!=null?R(f(o)):{},v(n||!o||!o.__esModule?d(a,"default",{value:o,enumerable:!0}):a,o));var I=x((W,C)=>{C.exports=window.React});var b=x((V,h)=>{h.exports=window.Loomiere});var l={};S(l,{Default:()=>N,WithCheckboxes:()=>T,WithDisabledItems:()=>_,WithRadioGroup:()=>E,WithSubmenu:()=>L,default:()=>m});var c=p(I(),1),t=p(b(),1);var u=window.React;function e(o,n,a){let{children:s,...r}=n||{};return a!==void 0&&(r.key=a),s===void 0?u.createElement(o,r):Array.isArray(s)?u.createElement(o,r,...s):u.createElement(o,r,s)}var A=u.Fragment;var w={title:"Components/Lib/ContextMenu",component:t.ContextMenu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=w,N={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{children:"Cut"}),e(t.ContextMenu.Item,{children:"Paste"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})},T={render:()=>{let[o,n]=c.useState(!1),[a,s]=c.useState(!0),[r,g]=c.useState(!1);return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for view options"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show toolbar"]}),e(t.ContextMenu.CheckboxItem,{checked:a,onCheckedChange:s,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show sidebar"]}),e(t.ContextMenu.CheckboxItem,{checked:r,onCheckedChange:g,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show footer"]})]})})})]})}},E={render:()=>{let[o,n]=c.useState("light");return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click to change theme"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:e(t.ContextMenu.Group,{children:[e(t.ContextMenu.GroupLabel,{children:"Theme"}),e(t.ContextMenu.RadioGroup,{value:o,onValueChange:n,children:[e(t.ContextMenu.RadioItem,{value:"light",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.ContextMenu.RadioItem,{value:"dark",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.ContextMenu.RadioItem,{value:"system",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})]})})})})]})}},L={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for nested menu"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"New File"}),e(t.ContextMenu.Item,{children:"New Folder"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.SubmenuRoot,{children:[e(t.ContextMenu.SubmenuTrigger,{children:"Share"}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Email"}),e(t.ContextMenu.Item,{children:"Copy Link"}),e(t.ContextMenu.Item,{children:"Social Media"})]})})})]})]})})})]})},_={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{disabled:!0,children:"Cut (disabled)"}),e(t.ContextMenu.Item,{disabled:!0,children:"Paste (disabled)"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})};var i=window.React,M=m||{},F=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function j({id:o}){let n=l[o],a={...M.args||{},...n.args||{}};return(n.render||(r=>i.createElement(M.component,r)))(a,{args:a,id:o,name:o})}var D=F.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/Dialog/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Dialog styled by the theme. Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the title-amplify heading and base description. Alert dialog shares every rule here; AlertDialog.css adds nothing of its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
4
4
 
5
- Use `Loomiere.Dialog` (`import { Dialog } from '@base-ui/react/dialog'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Dialog`, this package's wrapper: it puts the class names on for you (`import { Dialog } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Dialog`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/dialog
8
8
 
@@ -34,14 +34,14 @@ From the Dialog stories (`Default`):
34
34
  export const Default: Story = {
35
35
  render: () => (
36
36
  <Dialog.Root>
37
- <Dialog.Trigger className="Button">
37
+ <Dialog.Trigger>
38
38
  Open Dialog
39
39
  </Dialog.Trigger>
40
40
  <Dialog.Portal>
41
- <Dialog.Backdrop className="DialogBackdrop" />
42
- <Dialog.Popup className="DialogPopup">
43
- <Dialog.Title className="DialogTitle">Dialog Title</Dialog.Title>
44
- <Dialog.Description className="DialogDescription">
41
+ <Dialog.Backdrop />
42
+ <Dialog.Popup>
43
+ <Dialog.Title>Dialog Title</Dialog.Title>
44
+ <Dialog.Description>
45
45
  This is a description of the dialog. It provides context about what the dialog is for.
46
46
  </Dialog.Description>
47
47
  <div className="DialogActions">
package/dist/design-system/components/Dialog/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var C=Object.create;var c=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var d=(a,t)=>()=>(t||a((t={exports:{}}).exports,t),t.exports),R=(a,t)=>{for(var i in t)c(a,i,{get:t[i],enumerable:!0})},b=(a,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of h(t))!B.call(a,l)&&l!==i&&c(a,l,{get:()=>t[l],enumerable:!(s=P(t,l))||s.enumerable});return a};var u=(a,t,i)=>(i=a!=null?C(y(a)):{},b(t||!a||!a.__esModule?c(i,"default",{value:a,enumerable:!0}):i,a));var N=d((I,D)=>{D.exports=window.React});var f=d((L,v)=>{v.exports=window.Loomiere.Base});var g={};R(g,{Default:()=>F,LongContent:()=>E,Nested:()=>q,WithForm:()=>S,default:()=>p});var m=u(N(),1),e=u(f(),1);var n=window.React;function o(a,t,i){let{children:s,...l}=t||{};return i!==void 0&&(l.key=i),s===void 0?n.createElement(a,l):Array.isArray(s)?n.createElement(a,l,...s):n.createElement(a,l,s)}var j=n.Fragment;var x={title:"Components/Dialog",component:e.Dialog.Root,parameters:{layout:"centered"},tags:["autodocs"]},p=x,F={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button",children:"Open Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"Dialog Title"}),o(e.Dialog.Description,{className:"DialogDescription",children:"This is a description of the dialog. It provides context about what the dialog is for."}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),o(e.Dialog.Close,{className:"Button",children:"Confirm"})]})]})]})]})},S={render:()=>{let a=m.useId(),t=m.useId(),i=s=>{s.preventDefault(),console.log("Form submitted")};return o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button",children:"Open Form Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"Contact Information"}),o(e.Dialog.Description,{className:"DialogDescription",children:"Please provide your contact details."}),o("form",{className:"Form",onSubmit:i,children:[o("div",{className:"FieldRoot",children:[o("label",{htmlFor:a,className:"FieldLabel",children:"Name"}),o("input",{id:a,type:"text",className:"FieldControl",placeholder:"John Doe"})]}),o("div",{className:"FieldRoot",children:[o("label",{htmlFor:t,className:"FieldLabel",children:"Email"}),o("input",{id:t,type:"email",className:"FieldControl",placeholder:"you@example.com"})]})]}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),o(e.Dialog.Close,{className:"Button",children:"Submit"})]})]})]})]})}},q={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button",children:"Open First Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"First Dialog"}),o(e.Dialog.Description,{className:"DialogDescription",children:"This is the first dialog. You can open another dialog from here."}),o("div",{className:"DialogActions",children:[o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button","data-variant":"outline",children:"Open Second Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"Second Dialog"}),o(e.Dialog.Description,{className:"DialogDescription",children:"This is a nested dialog opened from the first one."}),o("div",{className:"DialogActions",children:o(e.Dialog.Close,{className:"Button",children:"Close"})})]})]})]}),o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Close"})]})]})]})]})},E={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{className:"Button",children:"Open Long Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{className:"DialogBackdrop"}),o(e.Dialog.Popup,{className:"DialogPopup",children:[o(e.Dialog.Title,{className:"DialogTitle",children:"Terms and Conditions"}),o(e.Dialog.Description,{className:"DialogDescription",children:"Please read and accept our terms and conditions."}),o("div",{className:"DialogContent",children:[o("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}),o("p",{children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),o("p",{children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."}),o("p",{children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Decline"}),o(e.Dialog.Close,{className:"Button",children:"Accept"})]})]})]})]})};var r=window.React,T=p||{},k=["Default","WithForm","Nested","LongContent"];function w({id:a}){let t=g[a],i={...T.args||{},...t.args||{}};return(t.render||(l=>r.createElement(T.component,l)))(i,{args:i,id:a,name:a})}var A=k.map(a=>r.createElement("section",{key:a,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(w,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,A));})();
15
+ (()=>{var h=Object.create;var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var u=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),P=(t,a)=>{for(var i in a)c(t,i,{get:a[i],enumerable:!0})},x=(t,a,i,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of R(a))!b.call(t,l)&&l!==i&&c(t,l,{get:()=>a[l],enumerable:!(s=y(a,l))||s.enumerable});return t};var g=(t,a,i)=>(i=t!=null?h(T(t)):{},x(a||!t||!t.__esModule?c(i,"default",{value:t,enumerable:!0}):i,t));var v=u((k,D)=>{D.exports=window.React});var C=u((I,f)=>{f.exports=window.Loomiere});var p={};P(p,{Default:()=>S,LongContent:()=>E,Nested:()=>B,WithForm:()=>q,default:()=>m});var d=g(v(),1),e=g(C(),1);var n=window.React;function o(t,a,i){let{children:s,...l}=a||{};return i!==void 0&&(l.key=i),s===void 0?n.createElement(t,l):Array.isArray(s)?n.createElement(t,l,...s):n.createElement(t,l,s)}var j=n.Fragment;var F={title:"Components/Lib/Dialog",component:e.Dialog.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=F,S={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{children:"Open Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"Dialog Title"}),o(e.Dialog.Description,{children:"This is a description of the dialog. It provides context about what the dialog is for."}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),o(e.Dialog.Close,{className:"Button",children:"Confirm"})]})]})]})]})},q={render:()=>{let t=d.useId(),a=d.useId(),i=s=>{s.preventDefault(),console.log("Form submitted")};return o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{children:"Open Form Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"Contact Information"}),o(e.Dialog.Description,{children:"Please provide your contact details."}),o("form",{className:"Form",onSubmit:i,children:[o("div",{className:"FieldRoot",children:[o("label",{htmlFor:t,className:"FieldLabel",children:"Name"}),o("input",{id:t,type:"text",className:"FieldControl",placeholder:"John Doe"})]}),o("div",{className:"FieldRoot",children:[o("label",{htmlFor:a,className:"FieldLabel",children:"Email"}),o("input",{id:a,type:"email",className:"FieldControl",placeholder:"you@example.com"})]})]}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),o(e.Dialog.Close,{className:"Button",children:"Submit"})]})]})]})]})}},B={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{children:"Open First Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"First Dialog"}),o(e.Dialog.Description,{children:"This is the first dialog. You can open another dialog from here."}),o("div",{className:"DialogActions",children:[o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{"data-variant":"outline",children:"Open Second Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"Second Dialog"}),o(e.Dialog.Description,{children:"This is a nested dialog opened from the first one."}),o("div",{className:"DialogActions",children:o(e.Dialog.Close,{className:"Button",children:"Close"})})]})]})]}),o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Close"})]})]})]})]})},E={render:()=>o(e.Dialog.Root,{children:[o(e.Dialog.Trigger,{children:"Open Long Dialog"}),o(e.Dialog.Portal,{children:[o(e.Dialog.Backdrop,{}),o(e.Dialog.Popup,{children:[o(e.Dialog.Title,{children:"Terms and Conditions"}),o(e.Dialog.Description,{children:"Please read and accept our terms and conditions."}),o("div",{className:"DialogContent",children:[o("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}),o("p",{children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),o("p",{children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."}),o("p",{children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]}),o("div",{className:"DialogActions",children:[o(e.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Decline"}),o(e.Dialog.Close,{className:"Button",children:"Accept"})]})]})]})]})};var r=window.React,N=m||{},w=["Default","WithForm","Nested","LongContent"];function A({id:t}){let a=p[t],i={...N.args||{},...a.args||{}};return(a.render||(l=>r.createElement(N.component,l)))(i,{args:i,id:t,name:t})}var L=w.map(t=>r.createElement("section",{key:t,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(A,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,L));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/Drawer/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Drawer styled by the theme. The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a drawer reads as a dialog's sibling; only its size and grab bar are its own (--sl-drawer-*). Base UI supplies the swipe through --drawer-swipe-movement-x/y and data-swipe-direction on the popup.
4
4
 
5
- Use `Loomiere.Drawer` (`import { Drawer } from '@base-ui/react/drawer'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Drawer`, this package's wrapper: it puts the class names on for you (`import { Drawer } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Drawer`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/drawer
8
8
 
package/dist/design-system/components/Drawer/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var y=Object.create;var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var N=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),R=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},S=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!h.call(e,a)&&a!==o&&p(e,a,{get:()=>t[a],enumerable:!(n=f(t,a))||n.enumerable});return e};var x=(e,t,o)=>(o=e!=null?y(E(e)):{},S(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e));var w=N((j,d)=>{d.exports=window.Loomiere.Base});var m={};R(m,{Default:()=>B,Sides:()=>b,default:()=>i});var s=x(w(),1);var l=window.React;function r(e,t,o){let{children:n,...a}=t||{};return o!==void 0&&(a.key=o),n===void 0?l.createElement(e,a):Array.isArray(n)?l.createElement(e,a,...n):l.createElement(e,a,n)}var V=l.Fragment;var T={title:"Components/Drawer",component:s.Drawer.Root,parameters:{layout:"centered"},tags:["autodocs"]},i=T,D=({side:e})=>r(s.Drawer.Root,{swipeDirection:e,children:[r(s.Drawer.Trigger,{className:"Button","data-emphasis":"standard",children:[e==="down"?"Bottom":e==="up"?"Top":e==="left"?"Left":"Right"," drawer"]}),r(s.Drawer.Portal,{children:[r(s.Drawer.Backdrop,{className:"DrawerBackdrop"}),r(s.Drawer.Viewport,{className:"DrawerViewport",children:r(s.Drawer.Popup,{className:"DrawerPopup",children:[r(s.Drawer.Title,{className:"DrawerTitle",children:"Trail notes"}),r(s.Drawer.Description,{className:"DrawerDescription",children:"Swipe it away, press Escape, or use the button."}),r(s.Drawer.Content,{className:"DrawerContent",children:r("p",{children:"Three sites logged at dusk. Wind from the southwest, sand moving east."})}),r(s.Drawer.Close,{className:"Button","data-emphasis":"bold",children:"Done"})]})})]})]}),B={render:()=>r(D,{side:"down"})},b={render:()=>r("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["down","right","left","up"].map(e=>r(D,{side:e},e))})};var c=window.React,u=i||{},k=["Default","Sides"];function C({id:e}){let t=m[e],o={...u.args||{},...t.args||{}};return(t.render||(a=>c.createElement(u.component,a)))(o,{args:o,id:e,name:e})}var P=k.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(C,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,P));})();
15
+ (()=>{var f=Object.create;var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var R=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),S=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},x=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of D(t))!h.call(e,a)&&a!==o&&p(e,a,{get:()=>t[a],enumerable:!(s=g(t,a))||s.enumerable});return e};var b=(e,t,o)=>(o=e!=null?f(E(e)):{},x(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e));var w=R((B,m)=>{m.exports=window.Loomiere});var l={};S(l,{Default:()=>k,Sides:()=>v,default:()=>d});var n=b(w(),1);var i=window.React;function r(e,t,o){let{children:s,...a}=t||{};return o!==void 0&&(a.key=o),s===void 0?i.createElement(e,a):Array.isArray(s)?i.createElement(e,a,...s):i.createElement(e,a,s)}var F=i.Fragment;var T={title:"Components/Lib/Drawer",component:n.Drawer.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=T,y=({side:e})=>r(n.Drawer.Root,{swipeDirection:e,children:[r(n.Drawer.Trigger,{"data-emphasis":"standard",children:[e==="down"?"Bottom":e==="up"?"Top":e==="left"?"Left":"Right"," drawer"]}),r(n.Drawer.Portal,{children:[r(n.Drawer.Backdrop,{}),r(n.Drawer.Viewport,{children:r(n.Drawer.Popup,{children:[r(n.Drawer.Title,{children:"Trail notes"}),r(n.Drawer.Description,{children:"Swipe it away, press Escape, or use the button."}),r(n.Drawer.Content,{children:r("p",{children:"Three sites logged at dusk. Wind from the southwest, sand moving east."})}),r(n.Drawer.Close,{"data-emphasis":"bold",children:"Done"})]})})]})]}),k={render:()=>r(y,{side:"down"})},v={render:()=>r("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["down","right","left","up"].map(e=>r(y,{side:e},e))})};var c=window.React,u=d||{},C=["Default","Sides"];function P({id:e}){let t=l[e],o={...u.args||{},...t.args||{}};return(t.render||(a=>c.createElement(u.component,a)))(o,{args:o,id:e,name:e})}var j=C.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(P,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,j));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/design-system/components/Menu/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Menu styled by the theme. No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
4
4
 
5
- Use `Loomiere.Menu` (`import { Menu } from '@base-ui/react/menu'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Menu`, this package's wrapper: it puts the class names on for you (`import { Menu } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Menu`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/menu
8
8
 
@@ -34,19 +34,19 @@ From the Menu stories (`Default`):
34
34
  export const Default: Story = {
35
35
  render: () => (
36
36
  <Menu.Root>
37
- <Menu.Trigger className="Button">
37
+ <Menu.Trigger>
38
38
  Open Menu
39
39
  </Menu.Trigger>
40
40
  <Menu.Portal>
41
- <Menu.Positioner className="MenuPositioner">
42
- <Menu.Popup className="MenuPopup">
43
- <Menu.Item className="MenuItem">New File</Menu.Item>
44
- <Menu.Item className="MenuItem">New Window</Menu.Item>
45
- <Menu.Separator className="MenuSeparator" />
46
- <Menu.Item className="MenuItem">Save</Menu.Item>
47
- <Menu.Item className="MenuItem">Save As...</Menu.Item>
48
- <Menu.Separator className="MenuSeparator" />
49
- <Menu.Item className="MenuItem">Exit</Menu.Item>
41
+ <Menu.Positioner>
42
+ <Menu.Popup>
43
+ <Menu.Item>New File</Menu.Item>
44
+ <Menu.Item>New Window</Menu.Item>
45
+ <Menu.Separator />
46
+ <Menu.Item>Save</Menu.Item>
47
+ <Menu.Item>Save As...</Menu.Item>
48
+ <Menu.Separator />
49
+ <Menu.Item>Exit</Menu.Item>
50
50
  </Menu.Popup>
51
51
  </Menu.Positioner>
52
52
  </Menu.Portal>
package/dist/design-system/components/Menu/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var S=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var d=(a,o)=>()=>(o||a((o={exports:{}}).exports,o),o.exports),C=(a,o)=>{for(var n in o)i(a,n,{get:o[n],enumerable:!0})},w=(a,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of k(o))!y.call(a,s)&&s!==n&&i(a,s,{get:()=>o[s],enumerable:!(r=g(o,s))||r.enumerable});return a};var M=(a,o,n)=>(n=a!=null?S(x(a)):{},w(o||!a||!a.__esModule?i(n,"default",{value:a,enumerable:!0}):n,a));var h=d((D,p)=>{p.exports=window.React});var R=d((O,N)=>{N.exports=window.Loomiere.Base});var I={};C(I,{Default:()=>T,WithCheckboxes:()=>E,WithDisabledItems:()=>v,WithRadioGroup:()=>F,WithSubmenu:()=>_,default:()=>l});var c=M(h(),1),t=M(R(),1);var u=window.React;function e(a,o,n){let{children:r,...s}=o||{};return n!==void 0&&(s.key=n),r===void 0?u.createElement(a,s):Array.isArray(r)?u.createElement(a,s,...r):u.createElement(a,s,r)}var V=u.Fragment;var f={title:"Components/Menu",component:t.Menu.Root,parameters:{layout:"centered"},tags:["autodocs"]},l=f,T={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button",children:"Open Menu"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New File"}),e(t.Menu.Item,{className:"MenuItem",children:"New Window"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Save"}),e(t.Menu.Item,{className:"MenuItem",children:"Save As..."}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Exit"})]})})})]})},E={render:()=>{let[a,o]=c.useState(!1),[n,r]=c.useState(!0),[s,P]=c.useState(!1);return e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button","data-variant":"outline",children:"View Options"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:a,onCheckedChange:o,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Toolbar"]}),e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:n,onCheckedChange:r,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Sidebar"]}),e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:s,onCheckedChange:P,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Footer"]})]})})})]})}},F={render:()=>{let[a,o]=c.useState("light");return e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button","data-variant":"ghost",children:"Theme"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:e(t.Menu.RadioGroup,{value:a,onValueChange:o,children:[e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"light",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"dark",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"system",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})})})})]})}},_={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New File"}),e(t.Menu.Item,{className:"MenuItem",children:"New Window"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.SubmenuRoot,{children:[e(t.Menu.SubmenuTrigger,{className:"MenuSubmenuTrigger",children:"Open Recent"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"project-1.txt"}),e(t.Menu.Item,{className:"MenuItem",children:"project-2.txt"}),e(t.Menu.Item,{className:"MenuItem",children:"project-3.txt"})]})})})]}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Exit"})]})})})]})},v={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Cut"}),e(t.Menu.Item,{className:"MenuItem",children:"Copy"}),e(t.Menu.Item,{className:"MenuItem",disabled:!0,children:"Paste (Nothing to paste)"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Select All"})]})})})]})};var m=window.React,b=l||{},W=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function L({id:a}){let o=I[a],n={...b.args||{},...o.args||{}};return(o.render||(s=>m.createElement(b.component,s)))(n,{args:n,id:a,name:a})}var j=W.map(a=>m.createElement("section",{key:a,className:"ds-story"},m.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),m.createElement("div",{className:"ds-story-body"},m.createElement(L,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(m.createElement(m.Fragment,null,j));})();
15
+ (()=>{var k=Object.create;var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var l=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),C=(o,n)=>{for(var a in n)m(o,a,{get:n[a],enumerable:!0})},f=(o,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of P(n))!w.call(o,r)&&r!==a&&m(o,r,{get:()=>n[r],enumerable:!(s=y(n,r))||s.enumerable});return o};var p=(o,n,a)=>(a=o!=null?k(x(o)):{},f(n||!o||!o.__esModule?m(a,"default",{value:o,enumerable:!0}):a,o));var h=l((O,M)=>{M.exports=window.React});var R=l((V,b)=>{b.exports=window.Loomiere});var I={};C(I,{Default:()=>T,WithCheckboxes:()=>E,WithDisabledItems:()=>v,WithRadioGroup:()=>F,WithSubmenu:()=>_,default:()=>d});var c=p(h(),1),t=p(R(),1);var u=window.React;function e(o,n,a){let{children:s,...r}=n||{};return a!==void 0&&(r.key=a),s===void 0?u.createElement(o,r):Array.isArray(s)?u.createElement(o,r,...s):u.createElement(o,r,s)}var A=u.Fragment;var N={title:"Components/Lib/Menu",component:t.Menu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=N,T={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{children:"Open Menu"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New File"}),e(t.Menu.Item,{children:"New Window"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Save"}),e(t.Menu.Item,{children:"Save As..."}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Exit"})]})})})]})},E={render:()=>{let[o,n]=c.useState(!1),[a,s]=c.useState(!0),[r,S]=c.useState(!1);return e(t.Menu.Root,{children:[e(t.Menu.Trigger,{"data-variant":"outline",children:"View Options"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Toolbar"]}),e(t.Menu.CheckboxItem,{checked:a,onCheckedChange:s,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Sidebar"]}),e(t.Menu.CheckboxItem,{checked:r,onCheckedChange:S,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Footer"]})]})})})]})}},F={render:()=>{let[o,n]=c.useState("light");return e(t.Menu.Root,{children:[e(t.Menu.Trigger,{"data-variant":"ghost",children:"Theme"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:e(t.Menu.RadioGroup,{value:o,onValueChange:n,children:[e(t.Menu.RadioItem,{value:"light",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.Menu.RadioItem,{value:"dark",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.Menu.RadioItem,{value:"system",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})})})})]})}},_={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New File"}),e(t.Menu.Item,{children:"New Window"}),e(t.Menu.Separator,{}),e(t.Menu.SubmenuRoot,{children:[e(t.Menu.SubmenuTrigger,{children:"Open Recent"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"project-1.txt"}),e(t.Menu.Item,{children:"project-2.txt"}),e(t.Menu.Item,{children:"project-3.txt"})]})})})]}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Exit"})]})})})]})},v={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Cut"}),e(t.Menu.Item,{children:"Copy"}),e(t.Menu.Item,{disabled:!0,children:"Paste (Nothing to paste)"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Select All"})]})})})]})};var i=window.React,g=d||{},L=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function W({id:o}){let n=I[o],a={...g.args||{},...n.args||{}};return(n.render||(r=>i.createElement(g.component,r)))(a,{args:a,id:o,name:o})}var j=L.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(W,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,j));})();
16
16
 
17
17
  </script>
18
18
  </body>