@scattered-light/loomiere-base-ui 0.1.0 → 0.2.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 (122) hide show
  1. package/README.md +10 -1
  2. package/dist/design-system/components/Accordion/README.md +97 -0
  3. package/dist/design-system/components/Accordion/preview.html +19 -0
  4. package/dist/design-system/components/AlertDialog/README.md +52 -0
  5. package/dist/design-system/components/AlertDialog/preview.html +19 -0
  6. package/dist/design-system/components/Autocomplete/README.md +68 -0
  7. package/dist/design-system/components/Autocomplete/preview.html +19 -0
  8. package/dist/design-system/components/Avatar/README.md +39 -0
  9. package/dist/design-system/components/Avatar/preview.html +19 -0
  10. package/dist/design-system/components/Button/README.md +27 -0
  11. package/dist/design-system/components/Button/preview.html +23 -0
  12. package/dist/design-system/components/Checkbox/README.md +39 -0
  13. package/dist/design-system/components/Checkbox/preview.html +19 -0
  14. package/dist/design-system/components/CheckboxGroup/README.md +56 -0
  15. package/dist/design-system/components/CheckboxGroup/preview.html +19 -0
  16. package/dist/design-system/components/Collapsible/README.md +48 -0
  17. package/dist/design-system/components/Collapsible/preview.html +19 -0
  18. package/dist/design-system/components/Combobox/README.md +105 -0
  19. package/dist/design-system/components/Combobox/preview.html +19 -0
  20. package/dist/design-system/components/ContextMenu/README.md +70 -0
  21. package/dist/design-system/components/ContextMenu/preview.html +19 -0
  22. package/dist/design-system/components/Dialog/README.md +62 -0
  23. package/dist/design-system/components/Dialog/preview.html +19 -0
  24. package/dist/design-system/components/Drawer/README.md +32 -0
  25. package/dist/design-system/components/Drawer/preview.html +19 -0
  26. package/dist/design-system/components/Field/README.md +41 -0
  27. package/dist/design-system/components/Field/preview.html +19 -0
  28. package/dist/design-system/components/Fieldset/README.md +45 -0
  29. package/dist/design-system/components/Fieldset/preview.html +19 -0
  30. package/dist/design-system/components/Form/README.md +57 -0
  31. package/dist/design-system/components/Form/preview.html +19 -0
  32. package/dist/design-system/components/Input/README.md +38 -0
  33. package/dist/design-system/components/Input/preview.html +19 -0
  34. package/dist/design-system/components/Menu/README.md +58 -0
  35. package/dist/design-system/components/Menu/preview.html +19 -0
  36. package/dist/design-system/components/Menubar/README.md +105 -0
  37. package/dist/design-system/components/Menubar/preview.html +19 -0
  38. package/dist/design-system/components/Meter/README.md +43 -0
  39. package/dist/design-system/components/Meter/preview.html +19 -0
  40. package/dist/design-system/components/NavigationMenu/README.md +148 -0
  41. package/dist/design-system/components/NavigationMenu/preview.html +19 -0
  42. package/dist/design-system/components/NumberField/README.md +58 -0
  43. package/dist/design-system/components/NumberField/preview.html +19 -0
  44. package/dist/design-system/components/OTPField/README.md +39 -0
  45. package/dist/design-system/components/OTPField/preview.html +19 -0
  46. package/dist/design-system/components/Popover/README.md +56 -0
  47. package/dist/design-system/components/Popover/preview.html +19 -0
  48. package/dist/design-system/components/PreviewCard/README.md +74 -0
  49. package/dist/design-system/components/PreviewCard/preview.html +19 -0
  50. package/dist/design-system/components/Progress/README.md +58 -0
  51. package/dist/design-system/components/Progress/preview.html +19 -0
  52. package/dist/design-system/components/Radio/README.md +74 -0
  53. package/dist/design-system/components/Radio/preview.html +19 -0
  54. package/dist/design-system/components/ScrollArea/README.md +62 -0
  55. package/dist/design-system/components/ScrollArea/preview.html +40 -0
  56. package/dist/design-system/components/Select/README.md +84 -0
  57. package/dist/design-system/components/Select/preview.html +19 -0
  58. package/dist/design-system/components/Separator/README.md +37 -0
  59. package/dist/design-system/components/Separator/preview.html +19 -0
  60. package/dist/design-system/components/Slider/README.md +44 -0
  61. package/dist/design-system/components/Slider/preview.html +19 -0
  62. package/dist/design-system/components/Switch/README.md +34 -0
  63. package/dist/design-system/components/Switch/preview.html +19 -0
  64. package/dist/design-system/components/Tabs/README.md +56 -0
  65. package/dist/design-system/components/Tabs/preview.html +19 -0
  66. package/dist/design-system/components/Toast/README.md +78 -0
  67. package/dist/design-system/components/Toast/preview.html +19 -0
  68. package/dist/design-system/components/Toggle/README.md +32 -0
  69. package/dist/design-system/components/Toggle/preview.html +19 -0
  70. package/dist/design-system/components/ToggleGroup/README.md +40 -0
  71. package/dist/design-system/components/ToggleGroup/preview.html +19 -0
  72. package/dist/design-system/components/Toolbar/README.md +65 -0
  73. package/dist/design-system/components/Toolbar/preview.html +19 -0
  74. package/dist/design-system/components/Tooltip/README.md +46 -0
  75. package/dist/design-system/components/Tooltip/preview.html +19 -0
  76. package/dist/design-system/components/bundle.js +5 -0
  77. package/dist/design-system/components/index.d.ts +107 -0
  78. package/dist/design-system/components/styles.css +5533 -0
  79. package/dist/styles/components/Accordion.css +1 -1
  80. package/dist/styles/components/AlertDialog.css +1 -1
  81. package/dist/styles/components/Autocomplete.css +1 -1
  82. package/dist/styles/components/Avatar.css +1 -1
  83. package/dist/styles/components/Button.css +1 -1
  84. package/dist/styles/components/Checkbox.css +1 -1
  85. package/dist/styles/components/CheckboxGroup.css +1 -1
  86. package/dist/styles/components/Collapsible.css +1 -1
  87. package/dist/styles/components/Combobox.css +1 -1
  88. package/dist/styles/components/ContextMenu.css +1 -1
  89. package/dist/styles/components/Dialog.css +1 -1
  90. package/dist/styles/components/Drawer.css +1 -1
  91. package/dist/styles/components/Field.css +1 -1
  92. package/dist/styles/components/Fieldset.css +1 -1
  93. package/dist/styles/components/Form.css +1 -1
  94. package/dist/styles/components/Input.css +1 -1
  95. package/dist/styles/components/Menu.css +1 -1
  96. package/dist/styles/components/Menubar.css +1 -1
  97. package/dist/styles/components/Meter.css +1 -1
  98. package/dist/styles/components/NavigationMenu.css +1 -1
  99. package/dist/styles/components/NumberField.css +1 -1
  100. package/dist/styles/components/OTPField.css +1 -1
  101. package/dist/styles/components/Popover.css +1 -1
  102. package/dist/styles/components/PreviewCard.css +1 -1
  103. package/dist/styles/components/Progress.css +1 -1
  104. package/dist/styles/components/Radio.css +1 -1
  105. package/dist/styles/components/ScrollArea.css +1 -1
  106. package/dist/styles/components/Select.css +1 -1
  107. package/dist/styles/components/Separator.css +1 -1
  108. package/dist/styles/components/Slider.css +1 -1
  109. package/dist/styles/components/Switch.css +1 -1
  110. package/dist/styles/components/Tabs.css +1 -1
  111. package/dist/styles/components/Toast.css +1 -1
  112. package/dist/styles/components/Toggle.css +1 -1
  113. package/dist/styles/components/ToggleGroup.css +1 -1
  114. package/dist/styles/components/Toolbar.css +1 -1
  115. package/dist/styles/components/Tooltip.css +1 -1
  116. package/dist/styles/index.css +1 -1
  117. package/dist/styles/reset/accessibility.css +1 -1
  118. package/dist/styles/reset/reset-accessibility.css +1 -1
  119. package/dist/styles/reset/reset-tailwind.css +441 -0
  120. package/dist/styles/reset/reset.css +1 -1
  121. package/dist/styles/tailwind.css +55 -0
  122. package/package.json +5 -3
package/dist/design-system/components/Progress/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Feedback" height=480 subtitle="Default / Static / Indeterminate / WithoutLabel" -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <style>
7
+ body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
8
+ #root { display: grid; gap: var(--sl-space-5, 20px); }
9
+ .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>
15
+ (()=>{var b=Object.create;var g=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var P=(r,a)=>()=>(a||r((a={exports:{}}).exports,a),a.exports),I=(r,a)=>{for(var o in a)g(r,o,{get:a[o],enumerable:!0})},S=(r,a,o,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of L(a))!T.call(r,t)&&t!==o&&g(r,t,{get:()=>a[t],enumerable:!(c=k(a,t))||c.enumerable});return r};var u=(r,a,o)=>(o=r!=null?b(x(r)):{},S(a||!r||!r.__esModule?g(o,"default",{value:r,enumerable:!0}):o,r));var p=P(($,N)=>{N.exports=window.React});var R=P((U,v)=>{v.exports=window.Loomiere.Base});var m={};I(m,{Default:()=>V,ErrorVariant:()=>W,Indeterminate:()=>h,LargeSize:()=>D,MultipleProgress:()=>A,SmallSize:()=>M,Static:()=>w,SuccessVariant:()=>j,WarningVariant:()=>z,WithoutLabel:()=>E,WithoutValue:()=>H,default:()=>i});var n=u(p(),1),s=u(R(),1);var d=window.React;function e(r,a,o){let{children:c,...t}=a||{};return o!==void 0&&(t.key=o),c===void 0?d.createElement(r,t):Array.isArray(c)?d.createElement(r,t,...c):d.createElement(r,t,c)}var Z=d.Fragment;var f={title:"Components/Progress",parameters:{layout:"centered"},tags:["autodocs"]},i=f,V={render:()=>{let[r,a]=n.useState(20);return n.useEffect(()=>{let o=setInterval(()=>{a(c=>{let t=c+Math.random()*25;return t>=100?100:Math.round(t)})},1e3);return()=>clearInterval(o)},[]),e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:r,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Export data"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})}},w={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:65,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Upload progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},h={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:null,children:[e("div",{className:"ProgressHeader",children:e(s.Progress.Label,{className:"ProgressLabel",children:"Loading..."})}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},E={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:45,children:e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})})})},H={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:75,children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Installation progress"}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},M={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:60,"data-size":"sm",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Small progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},D={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:80,"data-size":"lg",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Large progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},j={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:100,"data-color":"success",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Complete!"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},z={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:85,"data-color":"warning",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Storage almost full"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},W={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:95,"data-color":"error",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Storage critical"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},A={render:()=>{let[r,a]=n.useState([{id:1,name:"Document.pdf",progress:45},{id:2,name:"Image.jpg",progress:78},{id:3,name:"Video.mp4",progress:12}]);return n.useEffect(()=>{let o=setInterval(()=>{a(c=>c.map(t=>({...t,progress:Math.min(100,t.progress+Math.random()*15)})))},800);return()=>clearInterval(o)},[]),e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"16px"},children:r.map(o=>e(s.Progress.Root,{className:"ProgressRoot",value:o.progress,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:o.name}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]},o.id))})}};var l=window.React,y=i||{},F=["Default","Static","Indeterminate","WithoutLabel"];function O({id:r}){let a=m[r],o={...y.args||{},...a.args||{}};return(a.render||(t=>l.createElement(y.component,t)))(o,{args:o,id:r,name:r})}var B=F.map(r=>l.createElement("section",{key:r,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(O,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,B));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Radio/README.md ADDED
@@ -0,0 +1,74 @@
1
+ # Radio
2
+
3
+ The Base UI Radio styled by the theme. Same box as Checkbox, always round. Sizes follow the label the same way, and the dot is a share of the circle (check.dot-scale).
4
+
5
+ Use `Loomiere.Radio` (`import { Radio } from '@base-ui/react/radio'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
6
+
7
+ Base UI docs: https://base-ui.com/react/components/radio
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `RadioRoot` | `data-size`: `sm`, `lg`; `data-disabled` |
14
+ | `RadioButton` | `data-unchecked`; `data-checked` |
15
+ | `RadioIndicator` | `data-unchecked` |
16
+ | `RadioLabel` | |
17
+ | `RadioGroup` | |
18
+
19
+ Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
20
+
21
+ ## Example
22
+
23
+ From the Radio stories (`Default`):
24
+
25
+ ```tsx
26
+ export const Default: Story = {
27
+ render: () => {
28
+ const id = React.useId();
29
+ const [value, setValue] = React.useState('apple');
30
+
31
+ return (
32
+ <RadioGroup
33
+ className="RadioGroup"
34
+ value={value}
35
+ onValueChange={setValue}
36
+ aria-labelledby={id}
37
+ >
38
+ <div id={id} style={{ marginBottom: '12px', fontWeight: 600 }}>
39
+ Choose a fruit
40
+ </div>
41
+
42
+ <label className="RadioRoot">
43
+ <Radio.Root value="apple" className="RadioButton">
44
+ <Radio.Indicator className="RadioIndicator">
45
+ <span className="RadioIcon" />
46
+ </Radio.Indicator>
47
+ </Radio.Root>
48
+ <span className="RadioLabel">Apple</span>
49
+ </label>
50
+
51
+ <label className="RadioRoot">
52
+ <Radio.Root value="banana" className="RadioButton">
53
+ <Radio.Indicator className="RadioIndicator">
54
+ <span className="RadioIcon" />
55
+ </Radio.Indicator>
56
+ </Radio.Root>
57
+ <span className="RadioLabel">Banana</span>
58
+ </label>
59
+
60
+ <label className="RadioRoot">
61
+ <Radio.Root value="cherry" className="RadioButton">
62
+ <Radio.Indicator className="RadioIndicator">
63
+ <span className="RadioIcon" />
64
+ </Radio.Indicator>
65
+ </Radio.Root>
66
+ <span className="RadioLabel">Cherry</span>
67
+ </label>
68
+ </RadioGroup>
69
+ );
70
+ },
71
+ };
72
+ ```
73
+
74
+ The preview also shows `Uncontrolled`, `WithDisabled`, `SmallSize`.
package/dist/design-system/components/Radio/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Forms" height=480 subtitle="Default / Uncontrolled / WithDisabled / SmallSize" -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <style>
7
+ body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
8
+ #root { display: grid; gap: var(--sl-space-5, 20px); }
9
+ .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>
15
+ (()=>{var B=Object.create;var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var p=(e,s)=>()=>(s||e((s={exports:{}}).exports,s),s.exports),V=(e,s)=>{for(var t in s)m(e,t,{get:s[t],enumerable:!0})},C=(e,s,t,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of L(s))!G.call(e,d)&&d!==t&&m(e,d,{get:()=>s[d],enumerable:!(l=h(s,d))||l.enumerable});return e};var u=(e,s,t)=>(t=e!=null?B(z(e)):{},C(s||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e));var v=p((Y,I)=>{I.exports=window.React});var g=p((Z,y)=>{y.exports=window.Loomiere.Base});var f=p((q,x)=>{x.exports=window.Loomiere.Base});var b={};V(b,{Default:()=>D,FormExample:()=>j,HorizontalLayout:()=>A,LargeSize:()=>O,SmallSize:()=>F,Uncontrolled:()=>E,WithDescriptions:()=>M,WithDisabled:()=>W,WithoutLabels:()=>P,default:()=>N});var i=u(v(),1),o=u(g(),1),n=u(f(),1);var r=window.React;function a(e,s,t){let{children:l,...d}=s||{};return t!==void 0&&(d.key=t),l===void 0?r.createElement(e,d):Array.isArray(l)?r.createElement(e,d,...l):r.createElement(e,d,l)}var J=r.Fragment;var w={title:"Components/Radio",parameters:{layout:"centered"},tags:["autodocs"]},N=w,D={render:()=>{let e=i.useId(),[s,t]=i.useState("apple");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose a fruit"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"apple",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Apple"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"banana",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Banana"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"cherry",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Cherry"})]})]})}},E={render:()=>{let e=i.useId();return a(n.RadioGroup,{className:"RadioGroup",defaultValue:"medium","aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Select size"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"small",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Small"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"medium",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Medium"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"large",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Large"})]})]})}},W={render:()=>{let e=i.useId(),[s,t]=i.useState("option1");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose an option"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"option1",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Available option"})]}),a("label",{className:"RadioRoot","data-disabled":!0,children:[a(o.Radio.Root,{value:"option2",className:"RadioButton",disabled:!0,children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Disabled option"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"option3",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Another available option"})]})]})}},F={render:()=>{let e=i.useId(),[s,t]=i.useState("email");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600,fontSize:"14px"},children:"Notification method"}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"email",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Email"})]}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"sms",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"SMS"})]}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"push",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Push notification"})]})]})}},O={render:()=>{let e=i.useId(),[s,t]=i.useState("credit");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600,fontSize:"18px"},children:"Payment method"}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"credit",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Credit card"})]}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"debit",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Debit card"})]}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"paypal",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"PayPal"})]})]})}},A={render:()=>{let e=i.useId(),[s,t]=i.useState("yes");return a("div",{children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Do you agree?"}),a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,style:{flexDirection:"row",gap:"24px"},children:[a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"yes",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Yes"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"no",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"No"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"maybe",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Maybe"})]})]})]})}},M={render:()=>{let e=i.useId(),[s,t]=i.useState("starter");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose a plan"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"starter",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Starter"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Perfect for individuals and small projects"})]})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"professional",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Professional"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"For growing teams and businesses"})]})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"enterprise",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Enterprise"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Advanced features for large organizations"})]})]})]})}},P={render:()=>{let e=i.useId(),[s,t]=i.useState("1");return a("div",{children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Select option"}),a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,style:{flexDirection:"row",gap:"16px"},children:[a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"1",className:"RadioButton","aria-label":"Option 1",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})}),a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"2",className:"RadioButton","aria-label":"Option 2",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})}),a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"3",className:"RadioButton","aria-label":"Option 3",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})})]})]})}},j={render:()=>{let e=i.useId(),s=i.useId(),t=i.useId(),[l,d]=i.useState({size:"medium",color:"blue",delivery:"standard"});return a("form",{onSubmit:c=>{c.preventDefault(),console.log("Form submitted:",l),alert(`Selected: Size ${l.size}, Color ${l.color}, Delivery ${l.delivery}`)},style:{width:"300px"},children:[a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.size,onValueChange:c=>d({...l,size:c}),"aria-labelledby":e,children:[a("h3",{id:e,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Size"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"small",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Small"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"medium",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Medium"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"large",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Large"})]})]})}),a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.color,onValueChange:c=>d({...l,color:c}),"aria-labelledby":s,children:[a("h3",{id:s,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Color"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"blue",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Blue"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"red",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Red"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"green",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Green"})]})]})}),a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.delivery,onValueChange:c=>d({...l,delivery:c}),"aria-labelledby":t,children:[a("h3",{id:t,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Delivery"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"standard",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Standard (5-7 days)"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"express",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Express (2-3 days)"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"overnight",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Overnight"})]})]})}),a("button",{type:"submit",className:"Button",children:"Submit Order"})]})}};var R=window.React,S=N||{},$=["Default","Uncontrolled","WithDisabled","SmallSize"];function T({id:e}){let s=b[e],t={...S.args||{},...s.args||{}};return(s.render||(d=>R.createElement(S.component,d)))(t,{args:t,id:e,name:e})}var k=$.map(e=>R.createElement("section",{key:e,className:"ds-story"},R.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),R.createElement("div",{className:"ds-story-body"},R.createElement(T,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(R.createElement(R.Fragment,null,k));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/ScrollArea/README.md ADDED
@@ -0,0 +1,62 @@
1
+ # ScrollArea
2
+
3
+ The Base UI ScrollArea styled by the theme. The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until you reach for it, and a thumb in the strong fills. No component tokens.
4
+
5
+ Use `Loomiere.ScrollArea` (`import { ScrollArea } from '@base-ui/react/scroll-area'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
6
+
7
+ Base UI docs: https://base-ui.com/react/components/scroll-area
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `ScrollAreaRoot` | |
14
+ | `ScrollAreaViewport` | |
15
+ | `ScrollAreaScrollbar` | `data-orientation`: `vertical`, `horizontal` |
16
+ | `ScrollAreaThumb` | `data-dragging` |
17
+ | `ScrollAreaCorner` | |
18
+
19
+ Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
20
+
21
+ ## Example
22
+
23
+ From the ScrollArea stories (`Default`):
24
+
25
+ ```tsx
26
+ export const Default: Story = {
27
+ render: () => (
28
+ <ScrollArea.Root className="ScrollAreaRoot" style={{ width: '300px', height: '200px' }}>
29
+ <ScrollArea.Viewport className="ScrollAreaViewport">
30
+ <div style={{ padding: '16px' }}>
31
+ <h3 style={{ margin: '0 0 12px 0' }}>Scrollable Content</h3>
32
+ <p style={{ margin: '0 0 12px 0' }}>
33
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
34
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
35
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
36
+ </p>
37
+ <p style={{ margin: '0 0 12px 0' }}>
38
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
39
+ fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
40
+ culpa qui officia deserunt mollit anim id est laborum.
41
+ </p>
42
+ <p style={{ margin: '0 0 12px 0' }}>
43
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
44
+ laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
45
+ architecto beatae vitae dicta sunt explicabo.
46
+ </p>
47
+ <p style={{ margin: '0' }}>
48
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
49
+ consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
50
+ </p>
51
+ </div>
52
+ </ScrollArea.Viewport>
53
+ <ScrollArea.Scrollbar orientation="vertical" className="ScrollAreaScrollbar">
54
+ <ScrollArea.Thumb className="ScrollAreaThumb" />
55
+ </ScrollArea.Scrollbar>
56
+ <ScrollArea.Corner className="ScrollAreaCorner" />
57
+ </ScrollArea.Root>
58
+ ),
59
+ };
60
+ ```
61
+
62
+ The preview also shows `HorizontalScroll`, `BothDirections`, `WithBorder`.
package/dist/design-system/components/ScrollArea/preview.html ADDED
@@ -0,0 +1,40 @@
1
+ <!-- @dsCard group="Display" height=480 subtitle="Default / HorizontalScroll / BothDirections / WithBorder" -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <style>
7
+ body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
8
+ #root { display: grid; gap: var(--sl-space-5, 20px); }
9
+ .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>
15
+ (()=>{var b=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var A=(o,t)=>()=>(t||o((t={exports:{}}).exports,t),t.exports),v=(o,t)=>{for(var a in t)c(o,a,{get:t[a],enumerable:!0})},w=(o,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of g(t))!y.call(o,l)&&l!==a&&c(o,l,{get:()=>t[l],enumerable:!(i=h(t,l))||i.enumerable});return o};var f=(o,t,a)=>(a=o!=null?b(x(o)):{},w(t||!o||!o.__esModule?c(a,"default",{value:o,enumerable:!0}):a,o));var d=A((H,m)=>{m.exports=window.Loomiere.Base});var p={};v(p,{BothDirections:()=>C,ChatMessages:()=>M,CodeBlock:()=>E,Default:()=>R,HorizontalScroll:()=>q,ListExample:()=>V,WithBorder:()=>T,default:()=>u});var r=f(d(),1);var n=window.React;function e(o,t,a){let{children:i,...l}=t||{};return a!==void 0&&(l.key=a),i===void 0?n.createElement(o,l):Array.isArray(i)?n.createElement(o,l,...i):n.createElement(o,l,i)}var L=n.Fragment;var N={title:"Components/ScrollArea",component:r.ScrollArea.Root,parameters:{layout:"centered"},tags:["autodocs"]},u=N,R={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"300px",height:"200px"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("div",{style:{padding:"16px"},children:[e("h3",{style:{margin:"0 0 12px 0"},children:"Scrollable Content"}),e("p",{style:{margin:"0 0 12px 0"},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}),e("p",{style:{margin:"0 0 12px 0"},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0 0 12px 0"},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."}),e("p",{style:{margin:"0"},children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]})}),e(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},q={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"300px",height:"100px"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("div",{style:{padding:"16px",width:"600px"},children:[e("h3",{style:{margin:"0 0 12px 0",whiteSpace:"nowrap"},children:"This content is wider than the container"}),e("p",{style:{margin:"0",whiteSpace:"nowrap"},children:"Scroll horizontally to see all the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})]})}),e(r.ScrollArea.Scrollbar,{orientation:"horizontal",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},C={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"300px",height:"200px"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("div",{style:{padding:"16px",width:"500px"},children:[e("h3",{style:{margin:"0 0 12px 0",whiteSpace:"nowrap"},children:"Scrollable in Both Directions"}),e("p",{style:{margin:"0 0 12px 0"},children:"This content is both wider and taller than the container, so you can scroll both vertically and horizontally."}),e("p",{style:{margin:"0 0 12px 0"},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}),e("p",{style:{margin:"0 0 12px 0"},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."}),e("p",{style:{margin:"0 0 12px 0"},children:"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0"},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam."})]})}),e(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Scrollbar,{orientation:"horizontal",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},T={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"400px",height:"250px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",overflow:"hidden"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("div",{style:{padding:"20px"},children:[e("h3",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Article Title"}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."}),e("p",{style:{margin:"0",lineHeight:1.6},children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]})}),e(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},V={render:()=>{let o=Array.from({length:50},(t,a)=>`Item ${a+1}`);return e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"250px",height:"300px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("div",{style:{padding:"8px"},children:o.map(t=>e("div",{style:{padding:"12px",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",transition:"background-color 0.15s ease"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="var(--sl-surface-overlay)"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="transparent"},children:t},t))})}),e(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})}},E={render:()=>e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"500px",height:"250px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",backgroundColor:"var(--sl-surface-raised)"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("pre",{style:{margin:0,padding:"16px",fontFamily:"monospace",fontSize:"14px",lineHeight:1.5,whiteSpace:"pre"},children:`function exampleFunction() {
16
+ const message = "Hello, World!";
17
+ console.log(message);
18
+
19
+ const numbers = [1, 2, 3, 4, 5];
20
+ const doubled = numbers.map(n => n * 2);
21
+
22
+ return {
23
+ message,
24
+ doubled,
25
+ timestamp: Date.now(),
26
+ };
27
+ }
28
+
29
+ // Call the function
30
+ const result = exampleFunction();
31
+ console.log(result);
32
+
33
+ // More code to demonstrate scrolling
34
+ const anotherFunction = () => {
35
+ return "This is a longer code example";
36
+ };`})}),e(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Scrollbar,{orientation:"horizontal",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})},M={render:()=>{let o=[{id:1,user:"Alice",text:"Hey, how are you?",time:"10:30 AM"},{id:2,user:"Bob",text:"I'm good! How about you?",time:"10:31 AM"},{id:3,user:"Alice",text:"Doing great! Working on the new project.",time:"10:32 AM"},{id:4,user:"Bob",text:"Nice! How's it going?",time:"10:33 AM"},{id:5,user:"Alice",text:"Pretty well. Just implementing the scroll area component.",time:"10:34 AM"},{id:6,user:"Bob",text:"Cool! Let me know if you need any help.",time:"10:35 AM"},{id:7,user:"Alice",text:"Will do, thanks!",time:"10:36 AM"},{id:8,user:"Bob",text:"No problem \u{1F44D}",time:"10:37 AM"}];return e(r.ScrollArea.Root,{className:"ScrollAreaRoot",style:{width:"350px",height:"400px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",backgroundColor:"var(--sl-surface-canvas)"},children:[e(r.ScrollArea.Viewport,{className:"ScrollAreaViewport",children:e("div",{style:{padding:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:o.map(t=>e("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:[e("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"baseline"},children:[e("span",{style:{fontWeight:600,fontSize:"14px"},children:t.user}),e("span",{style:{fontSize:"12px",color:"var(--sl-text-tertiary)"},children:t.time})]}),e("div",{style:{padding:"8px 12px",backgroundColor:t.user==="Alice"?"var(--sl-color-primary-100)":"var(--sl-surface-overlay)",borderRadius:"var(--sl-radius-md)",fontSize:"14px",lineHeight:1.5},children:t.text})]},t.id))})}),e(r.ScrollArea.Scrollbar,{orientation:"vertical",className:"ScrollAreaScrollbar",children:e(r.ScrollArea.Thumb,{className:"ScrollAreaThumb"})}),e(r.ScrollArea.Corner,{className:"ScrollAreaCorner"})]})}};var s=window.React,S=u||{},k=["Default","HorizontalScroll","BothDirections","WithBorder"];function D({id:o}){let t=p[o],a={...S.args||{},...t.args||{}};return(t.render||(l=>s.createElement(S.component,l)))(a,{args:a,id:o,name:o})}var z=k.map(o=>s.createElement("section",{key:o,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(D,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,z));})();
37
+
38
+ </script>
39
+ </body>
40
+ </html>
package/dist/design-system/components/Select/README.md ADDED
@@ -0,0 +1,84 @@
1
+ # Select
2
+
3
+ The Base UI Select styled by the theme. The trigger is a field (the field pattern, control sizes, the base text style); the list is a popup of item rows. Select keeps no tokens of its own.
4
+
5
+ Use `Loomiere.Select` (`import { Select } from '@base-ui/react/select'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
6
+
7
+ Base UI docs: https://base-ui.com/react/components/select
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `SelectTrigger` | |
14
+ | `SelectValue` | |
15
+ | `SelectIcon` | |
16
+ | `SelectBackdrop` | |
17
+ | `SelectPositioner` | |
18
+ | `SelectPopup` | |
19
+ | `SelectList` | |
20
+ | `SelectItem` | `data-highlighted`; `data-disabled`; `data-selected` |
21
+ | `SelectItemText` | |
22
+ | `SelectItemIndicator` | |
23
+ | `SelectItemIndicatorIcon` | |
24
+ | `SelectGroup` | |
25
+ | `SelectGroupLabel` | |
26
+ | `SelectSeparator` | |
27
+ | `SelectScrollArrow` | |
28
+ | `SelectScrollArrowIcon` | |
29
+ | `SelectArrow` | |
30
+ | `SelectArrowFill` | |
31
+ | `SelectArrowStroke` | |
32
+
33
+ Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
34
+
35
+ ## Example
36
+
37
+ From the Select stories (`Default`):
38
+
39
+ ```tsx
40
+ export const Default: Story = {
41
+ render: () => (
42
+ <div style={{ width: '300px' }}>
43
+ <Select.Root items={fruits}>
44
+ <Select.Trigger className="SelectTrigger">
45
+ <Select.Value className="SelectValue" data-placeholder="Select a fruit" />
46
+ <Select.Icon className="SelectIcon">
47
+ <ChevronDownIcon />
48
+ </Select.Icon>
49
+ </Select.Trigger>
50
+ <Select.Portal>
51
+ <Select.Positioner className="SelectPositioner" sideOffset={8}>
52
+ <Select.Popup className="SelectPopup">
53
+ <Select.ScrollUpArrow className="SelectScrollArrow">
54
+ <svg className="SelectScrollArrowIcon" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5">
55
+ <path d="M9 5L5 1L1 5" />
56
+ </svg>
57
+ </Select.ScrollUpArrow>
58
+ <Select.List className="SelectList">
59
+ {fruits.map(({ label, value }) => (
60
+ <Select.Item key={value} value={value} className="SelectItem">
61
+ <Select.ItemIndicator className="SelectItemIndicator">
62
+ <span className="material-symbols-outlined SelectItemIndicatorIcon">
63
+ check
64
+ </span>
65
+ </Select.ItemIndicator>
66
+ <Select.ItemText className="SelectItemText">{label}</Select.ItemText>
67
+ </Select.Item>
68
+ ))}
69
+ </Select.List>
70
+ <Select.ScrollDownArrow className="SelectScrollArrow">
71
+ <svg className="SelectScrollArrowIcon" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5">
72
+ <path d="M1 1L5 5L9 1" />
73
+ </svg>
74
+ </Select.ScrollDownArrow>
75
+ </Select.Popup>
76
+ </Select.Positioner>
77
+ </Select.Portal>
78
+ </Select.Root>
79
+ </div>
80
+ ),
81
+ };
82
+ ```
83
+
84
+ The preview also shows `WithDefaultValue`, `Controlled`, `Grouped`.
package/dist/design-system/components/Select/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Forms" height=480 subtitle="Default / WithDefaultValue / Controlled / Grouped" -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <style>
7
+ body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
8
+ #root { display: grid; gap: var(--sl-space-5, 20px); }
9
+ .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>
15
+ (()=>{var b=Object.create;var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var u=(l,r)=>()=>(r||l((r={exports:{}}).exports,r),r.exports),k=(l,r)=>{for(var o in r)p(l,o,{get:r[o],enumerable:!0})},T=(l,r,o,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of A(r))!P.call(l,a)&&a!==o&&p(l,a,{get:()=>r[a],enumerable:!(c=x(r,a))||c.enumerable});return l};var w=(l,r,o)=>(o=l!=null?b(L(l)):{},T(r||!l||!l.__esModule?p(o,"default",{value:l,enumerable:!0}):o,l));var g=u(($,N)=>{N.exports=window.React});var h=u((z,v)=>{v.exports=window.Loomiere.Base});var I={};k(I,{Controlled:()=>B,Default:()=>C,Disabled:()=>U,Grouped:()=>M,WithDefaultValue:()=>D,WithDisabledItems:()=>W,WithLabel:()=>E,WithScrollArrows:()=>V,default:()=>d});var S=w(g(),1),t=w(h(),1);var m=window.React;function e(l,r,o){let{children:c,...a}=r||{};return o!==void 0&&(a.key=o),c===void 0?m.createElement(l,a):Array.isArray(c)?m.createElement(l,a,...c):m.createElement(l,a,c)}var Z=m.Fragment;var R={title:"Components/Select",parameters:{layout:"centered"},tags:["autodocs"]},d=R,s=[{label:"Apple",value:"apple"},{label:"Banana",value:"banana"},{label:"Cherry",value:"cherry"},{label:"Date",value:"date"},{label:"Elderberry",value:"elderberry"},{label:"Fig",value:"fig"},{label:"Grape",value:"grape"}];function n(l){return e("svg",{width:"8",height:"12",viewBox:"0 0 8 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...l,children:[e("path",{d:"M0.5 4.5L4 1.5L7.5 4.5"}),e("path",{d:"M0.5 7.5L4 10.5L7.5 7.5"})]})}var C={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},D={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,defaultValue:"banana",children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},B={render:()=>{let[l,r]=S.useState("apple");return e("div",{style:{width:"300px"},children:[e(t.Select.Root,{items:s,value:l,onValueChange:r,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:o,value:c})=>e(t.Select.Item,{value:c,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:o})]},c))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]}),e("div",{style:{marginTop:"12px",fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Selected: ",l||"none"]})]})}},y=[{label:"Citrus",items:[{label:"Lemon",value:"lemon"},{label:"Lime",value:"lime"},{label:"Orange",value:"orange"},{label:"Grapefruit",value:"grapefruit"}]},{label:"Berries",items:[{label:"Strawberry",value:"strawberry"},{label:"Blueberry",value:"blueberry"},{label:"Raspberry",value:"raspberry"},{label:"Blackberry",value:"blackberry"}]},{label:"Tropical",items:[{label:"Mango",value:"mango"},{label:"Pineapple",value:"pineapple"},{label:"Papaya",value:"papaya"},{label:"Coconut",value:"coconut"}]}],M={render:()=>{let l=y.flatMap(r=>r.items);return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:y.map((r,o)=>e(S.Fragment,{children:[o>0&&e(t.Select.Separator,{className:"SelectSeparator"}),e(t.Select.Group,{className:"SelectGroup",children:[e(t.Select.GroupLabel,{className:"SelectGroupLabel",children:r.label}),r.items.map(({label:c,value:a})=>e(t.Select.Item,{value:a,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:c})]},a))]})]},r.label))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},W={render:()=>{let l=[{label:"Apple",value:"apple"},{label:"Banana (out of stock)",value:"banana",disabled:!0},{label:"Cherry",value:"cherry"},{label:"Date (out of stock)",value:"date",disabled:!0},{label:"Elderberry",value:"elderberry"}];return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:l.map(({label:r,value:o,disabled:c})=>e(t.Select.Item,{value:o,disabled:c,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},V={render:()=>{let l=Array.from({length:30},(r,o)=>({label:`Fruit ${o+1}`,value:`fruit-${o+1}`}));return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:l.map(({label:r,value:o})=>e(t.Select.Item,{value:o,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},U={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,disabled:!0,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},E={render:()=>{let l=S.useId();return e("div",{style:{width:"300px"},children:[e("label",{htmlFor:l,style:{display:"block",marginBottom:"8px",fontSize:"14px",fontWeight:500,color:"var(--sl-text-primary)"},children:"Choose your favorite fruit"}),e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{id:l,className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:r,value:o})=>e(t.Select.Item,{value:o,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})]})}};var i=window.React,f=d||{},O=["Default","WithDefaultValue","Controlled","Grouped"];function F({id:l}){let r=I[l],o={...f.args||{},...r.args||{}};return(r.render||(a=>i.createElement(f.component,a)))(o,{args:o,id:l,name:l})}var G=O.map(l=>i.createElement("section",{key:l,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},l.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Separator/README.md ADDED
@@ -0,0 +1,37 @@
1
+ # Separator
2
+
3
+ The Base UI Separator styled by the theme. A hairline in the everyday divider color (border.default), one stroke thick, with a step of space on either side. No component tokens.
4
+
5
+ Use `Loomiere.Separator` (`import { Separator } from '@base-ui/react/separator'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
6
+
7
+ Base UI docs: https://base-ui.com/react/components/separator
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `Separator` | `data-orientation`: `horizontal`, `vertical` |
14
+
15
+ Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
16
+
17
+ ## Example
18
+
19
+ From the Separator stories (`Horizontal`):
20
+
21
+ ```tsx
22
+ export const Horizontal: Story = {
23
+ render: () => (
24
+ <div style={{ width: '300px' }}>
25
+ <div style={{ padding: '16px 0' }}>
26
+ <p style={{ margin: 0, color: 'var(--sl-text-primary)' }}>Content above</p>
27
+ </div>
28
+ <Separator className="Separator" />
29
+ <div style={{ padding: '16px 0' }}>
30
+ <p style={{ margin: 0, color: 'var(--sl-text-primary)' }}>Content below</p>
31
+ </div>
32
+ </div>
33
+ ),
34
+ };
35
+ ```
36
+
37
+ The preview also shows `Vertical`, `InMenu`, `InCard`.
package/dist/design-system/components/Separator/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Display" height=480 subtitle="Horizontal / Vertical / InMenu / InCard" -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <style>
7
+ body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
8
+ #root { display: grid; gap: var(--sl-space-5, 20px); }
9
+ .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>
15
+ (()=>{var g=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var S=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),h=(e,a)=>{for(var t in a)d(e,t,{get:a[t],enumerable:!0})},z=(e,a,t,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of x(a))!f.call(e,s)&&s!==t&&d(e,s,{get:()=>a[s],enumerable:!(n=u(a,s))||n.enumerable});return e};var w=(e,a,t)=>(t=e!=null?g(b(e)):{},z(a||!e||!e.__esModule?d(t,"default",{value:e,enumerable:!0}):t,e));var m=S((L,v)=>{v.exports=window.Loomiere.Base});var c={};h(c,{Horizontal:()=>k,InCard:()=>I,InMenu:()=>E,InToolbar:()=>B,Vertical:()=>N,WithCustomSpacing:()=>C,default:()=>p});var o=w(m(),1);var l=window.React;function r(e,a,t){let{children:n,...s}=a||{};return t!==void 0&&(s.key=t),n===void 0?l.createElement(e,s):Array.isArray(n)?l.createElement(e,s,...n):l.createElement(e,s,n)}var T=l.Fragment;var R={title:"Components/Separator",component:o.Separator,parameters:{layout:"centered"},tags:["autodocs"]},p=R,k={render:()=>r("div",{style:{width:"300px"},children:[r("div",{style:{padding:"16px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content above"})}),r(o.Separator,{className:"Separator"}),r("div",{style:{padding:"16px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content below"})})]})},N={render:()=>r("div",{style:{display:"flex",alignItems:"center",height:"100px"},children:[r("div",{style:{padding:"0 16px"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Left"})}),r(o.Separator,{orientation:"vertical",className:"Separator"}),r("div",{style:{padding:"0 16px"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Right"})})]})},E={render:()=>r("div",{style:{width:"200px",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",padding:"var(--sl-space-2)"},children:[r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"New File"})}),r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"New Folder"})}),r(o.Separator,{className:"Separator",style:{marginBlock:"var(--sl-space-1)"}}),r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"Settings"})})]})},I={render:()=>r("div",{style:{width:"400px",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",padding:"var(--sl-space-6)"},children:[r("h3",{style:{margin:"0 0 var(--sl-space-2) 0",fontSize:"var(--sl-font-size-lg)",fontWeight:"var(--sl-font-weight-semibold)",color:"var(--sl-text-primary)"},children:"Card Title"}),r("p",{style:{margin:0,fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-secondary)",lineHeight:"var(--sl-line-height-sm)"},children:"This is a description that provides context about the card content."}),r(o.Separator,{className:"Separator"}),r("div",{children:r("p",{style:{margin:"0 0 var(--sl-space-2) 0",fontSize:"var(--sl-font-size-md)",color:"var(--sl-text-primary)",lineHeight:"var(--sl-line-height-sm)"},children:"Main content goes here with additional details and information."})})]})},C={render:()=>r("div",{style:{width:"300px"},children:[r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Tight spacing"})}),r(o.Separator,{className:"Separator",style:{marginBlock:"var(--sl-space-2)"}}),r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content"})}),r(o.Separator,{className:"Separator",style:{marginBlock:"var(--sl-space-8)"}}),r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Loose spacing"})})]})},B={render:()=>r("div",{style:{display:"flex",alignItems:"center",padding:"var(--sl-space-2)",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-md)",gap:"var(--sl-space-2)"},children:[r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Bold"}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Italic"}),r(o.Separator,{orientation:"vertical",className:"Separator",style:{marginInline:"var(--sl-space-1)",height:"24px"}}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Link"}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Image"})]})};var i=window.React,y=p||{},M=["Horizontal","Vertical","InMenu","InCard"];function F({id:e}){let a=c[e],t={...y.args||{},...a.args||{}};return(a.render||(s=>i.createElement(y.component,s)))(t,{args:t,id:e,name:e})}var j=M.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,j));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Slider/README.md ADDED
@@ -0,0 +1,44 @@
1
+ # Slider
2
+
3
+ The Base UI Slider styled by the theme. A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as Meter and Progress, thin size), and the fill is the scope's solid color, so data-color on the root re-colors it. The thumb is a field-colored knob ringed in that color. Only the knob size and the vertical length are slider tokens.
4
+
5
+ Use `Loomiere.Slider` (`import { Slider } from '@base-ui/react/slider'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
6
+
7
+ Base UI docs: https://base-ui.com/react/components/slider
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `SliderRoot` | |
14
+ | `SliderHeader` | |
15
+ | `SliderLabel` | |
16
+ | `SliderValue` | |
17
+ | `SliderControl` | `data-disabled`; `data-orientation`: `vertical`, `horizontal` |
18
+ | `SliderTrack` | |
19
+ | `SliderIndicator` | |
20
+ | `SliderThumb` | `data-disabled`; `data-dragging` |
21
+ | `SliderMark` | |
22
+
23
+ Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
24
+
25
+ ## Example
26
+
27
+ From the Slider stories (`Default`):
28
+
29
+ ```tsx
30
+ export const Default: Story = {
31
+ render: () => (
32
+ <Slider.Root defaultValue={25} className="SliderRoot">
33
+ <Slider.Control className="SliderControl">
34
+ <Slider.Track className="SliderTrack">
35
+ <Slider.Indicator className="SliderIndicator" />
36
+ <Slider.Thumb className="SliderThumb" />
37
+ </Slider.Track>
38
+ </Slider.Control>
39
+ </Slider.Root>
40
+ ),
41
+ };
42
+ ```
43
+
44
+ The preview also shows `WithValue`, `Range`, `Disabled`.
package/dist/design-system/components/Slider/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Forms" height=480 subtitle="Default / WithValue / Range / Disabled" -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <style>
7
+ body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
8
+ #root { display: grid; gap: var(--sl-space-5, 20px); }
9
+ .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script>
15
+ (()=>{var V=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(a,l)=>()=>(l||a((l={exports:{}}).exports,l),l.exports),C=(a,l)=>{for(var t in l)i(a,t,{get:l[t],enumerable:!0})},k=(a,l,t,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let o of h(l))!g.call(a,o)&&o!==t&&i(a,o,{get:()=>l[o],enumerable:!(s=f(l,o))||s.enumerable});return a};var p=(a,l,t)=>(t=a!=null?V(x(a)):{},k(l||!a||!a.__esModule?i(t,"default",{value:a,enumerable:!0}):t,a));var b=u((A,N)=>{N.exports=window.React});var y=u((F,R)=>{R.exports=window.Loomiere.Base});var S={};C(S,{Default:()=>w,Disabled:()=>I,Range:()=>L,WithValue:()=>E,default:()=>m});var c=p(b(),1),r=p(y(),1);var n=window.React;function e(a,l,t){let{children:s,...o}=l||{};return t!==void 0&&(o.key=t),s===void 0?n.createElement(a,o):Array.isArray(s)?n.createElement(a,o,...s):n.createElement(a,o,s)}var H=n.Fragment;var v={title:"Components/Slider",component:r.Slider.Root,parameters:{layout:"centered"},tags:["autodocs"],decorators:[a=>e("div",{style:{width:"400px",padding:"40px"},children:e(a,{})})]},m=v,w={render:()=>e(r.Slider.Root,{defaultValue:25,className:"SliderRoot",children:e(r.Slider.Control,{className:"SliderControl",children:e(r.Slider.Track,{className:"SliderTrack",children:[e(r.Slider.Indicator,{className:"SliderIndicator"}),e(r.Slider.Thumb,{className:"SliderThumb"})]})})})},E={render:()=>{let[a,l]=c.useState(50);return e(r.Slider.Root,{value:a,onValueChange:l,className:"SliderRoot",children:[e("div",{className:"SliderHeader",children:[e(r.Slider.Label,{className:"SliderLabel",children:"Volume"}),e(r.Slider.Value,{className:"SliderValue",children:t=>e("span",{children:[t,"%"]})})]}),e(r.Slider.Control,{className:"SliderControl",children:e(r.Slider.Track,{className:"SliderTrack",children:[e(r.Slider.Indicator,{className:"SliderIndicator"}),e(r.Slider.Thumb,{className:"SliderThumb"})]})})]})}},L={render:()=>{let[a,l]=c.useState([25,75]);return e(r.Slider.Root,{value:a,onValueChange:l,className:"SliderRoot",children:[e("div",{className:"SliderHeader",children:[e(r.Slider.Label,{className:"SliderLabel",children:"Price Range"}),e(r.Slider.Value,{className:"SliderValue",children:t=>e("span",{children:["$",t[0]," - $",t[1]]})})]}),e(r.Slider.Control,{className:"SliderControl",children:e(r.Slider.Track,{className:"SliderTrack",children:[e(r.Slider.Indicator,{className:"SliderIndicator"}),e(r.Slider.Thumb,{className:"SliderThumb",index:0,"aria-label":"Minimum price"}),e(r.Slider.Thumb,{className:"SliderThumb",index:1,"aria-label":"Maximum price"})]})})]})}},I={render:()=>e(r.Slider.Root,{defaultValue:60,disabled:!0,className:"SliderRoot",children:[e("div",{className:"SliderHeader",children:[e(r.Slider.Label,{className:"SliderLabel",children:"Disabled Slider"}),e(r.Slider.Value,{className:"SliderValue",children:a=>e("span",{children:[a,"%"]})})]}),e(r.Slider.Control,{className:"SliderControl",children:e(r.Slider.Track,{className:"SliderTrack",children:[e(r.Slider.Indicator,{className:"SliderIndicator"}),e(r.Slider.Thumb,{className:"SliderThumb"})]})})]})};var d=window.React,T=m||{},D=["Default","WithValue","Range","Disabled"];function M({id:a}){let l=S[a],t={...T.args||{},...l.args||{}};return(l.render||(o=>d.createElement(T.component,o)))(t,{args:t,id:a,name:a})}var j=D.map(a=>d.createElement("section",{key:a,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(M,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,j));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Switch/README.md ADDED
@@ -0,0 +1,34 @@
1
+ # Switch
2
+
3
+ The Base UI Switch styled by the theme. Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are worked out from them: the thumb fills the track's height inside the padding, travels (width - height), and the text centers in the part the thumb leaves free.
4
+
5
+ Use `Loomiere.Switch` (`import { Switch } from '@base-ui/react/switch'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
6
+
7
+ Base UI docs: https://base-ui.com/react/components/switch
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `SwitchContainer` | `data-size`: `sm`, `lg`; `data-disabled` |
14
+ | `SwitchRoot` | `data-checked`; `data-disabled` |
15
+ | `SwitchThumb` | `data-checked` |
16
+ | `SwitchLabel` | |
17
+
18
+ Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
19
+
20
+ ## Example
21
+
22
+ From the Switch stories (`Default`):
23
+
24
+ ```tsx
25
+ export const Default: Story = {
26
+ render: () => (
27
+ <Switch.Root defaultChecked className="SwitchRoot">
28
+ <Switch.Thumb className="SwitchThumb" />
29
+ </Switch.Root>
30
+ ),
31
+ };
32
+ ```
33
+
34
+ The preview also shows `WithLabel`, `Controlled`, `Disabled`.