@scattered-light/loomiere-base-ui 0.1.1 → 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/Switch/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Forms" height=480 subtitle="Default / WithLabel / Controlled / 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 p=Object.create;var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var S=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),x=(t,a)=>{for(var c in a)d(t,c,{get:a[c],enumerable:!0})},T=(t,a,c,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of y(a))!k.call(t,s)&&s!==c&&d(t,s,{get:()=>a[s],enumerable:!(l=v(a,s))||l.enumerable});return t};var b=(t,a,c)=>(c=t!=null?p(C(t)):{},T(a||!t||!t.__esModule?d(c,"default",{value:t,enumerable:!0}):c,t));var u=S((W,w)=>{w.exports=window.React});var R=S(($,N)=>{N.exports=window.Loomiere.Base});var h={};x(h,{Controlled:()=>D,Default:()=>L,Disabled:()=>M,Multiple:()=>A,Sizes:()=>z,WithLabel:()=>E,default:()=>m});var r=b(u(),1),o=b(R(),1);var n=window.React;function e(t,a,c){let{children:l,...s}=a||{};return c!==void 0&&(s.key=c),l===void 0?n.createElement(t,s):Array.isArray(l)?n.createElement(t,s,...l):n.createElement(t,s,l)}var I=n.Fragment;var g={title:"Components/Switch",component:o.Switch.Root,parameters:{layout:"centered"},tags:["autodocs"],decorators:[t=>e("div",{style:{padding:"40px"},children:e(t,{})})]},m=g,L={render:()=>e(o.Switch.Root,{defaultChecked:!0,className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})})},E={render:()=>e("div",{className:"SwitchContainer",children:[e(o.Switch.Root,{defaultChecked:!0,className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Enable notifications"})]})},D={render:()=>{let[t,a]=r.useState(!0);return e("div",{className:"SwitchContainer",children:[e(o.Switch.Root,{checked:t,onCheckedChange:a,className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:t?"On":"Off"})]})}},M={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e("div",{className:"SwitchContainer","data-disabled":!0,children:[e(o.Switch.Root,{disabled:!0,className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Disabled (off)"})]}),e("div",{className:"SwitchContainer","data-disabled":!0,children:[e(o.Switch.Root,{disabled:!0,defaultChecked:!0,className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Disabled (on)"})]})]})},z={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[e("div",{className:"SwitchContainer","data-size":"sm",children:[e(o.Switch.Root,{defaultChecked:!0,className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Small"})]}),e("div",{className:"SwitchContainer","data-size":"md",children:[e(o.Switch.Root,{defaultChecked:!0,className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Medium (default)"})]}),e("div",{className:"SwitchContainer","data-size":"lg",children:[e(o.Switch.Root,{defaultChecked:!0,className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Large"})]})]})},A={render:()=>{let[t,a]=r.useState({notifications:!0,darkMode:!1,autoSave:!0,analytics:!1});return e("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e("div",{className:"SwitchContainer",children:[e(o.Switch.Root,{checked:t.notifications,onCheckedChange:c=>a({...t,notifications:c}),className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Enable notifications"})]}),e("div",{className:"SwitchContainer",children:[e(o.Switch.Root,{checked:t.darkMode,onCheckedChange:c=>a({...t,darkMode:c}),className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Dark mode"})]}),e("div",{className:"SwitchContainer",children:[e(o.Switch.Root,{checked:t.autoSave,onCheckedChange:c=>a({...t,autoSave:c}),className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Auto-save"})]}),e("div",{className:"SwitchContainer",children:[e(o.Switch.Root,{checked:t.analytics,onCheckedChange:c=>a({...t,analytics:c}),className:"SwitchRoot",children:e(o.Switch.Thumb,{className:"SwitchThumb"})}),e("label",{className:"SwitchLabel",children:"Analytics"})]})]})}};var i=window.React,f=m||{},O=["Default","WithLabel","Controlled","Disabled"];function j({id:t}){let a=h[t],c={...f.args||{},...a.args||{}};return(a.render||(s=>i.createElement(f.component,s)))(c,{args:c,id:t,name:t})}var F=O.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,F));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Tabs/README.md ADDED
@@ -0,0 +1,56 @@
1
+ # Tabs
2
+
3
+ The Base UI Tabs styled by the theme. No component tokens. The divider, the selected line and color, hover and the disabled fade are the disclosure concept (tokens/semantic/disclosure.json). Tabs use the text style of their tier and switch to that tier's selected style when chosen, like a selected row in a list.
4
+
5
+ Use `Loomiere.Tabs` (`import { Tabs } from '@base-ui/react/tabs'` 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/tabs
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `TabsRoot` | `data-orientation`: `vertical`; `data-size`: `sm`, `lg` |
14
+ | `TabsList` | |
15
+ | `TabsTab` | `data-disabled`; `data-active` |
16
+ | `TabsPanel` | |
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 Tabs stories (`Default`):
23
+
24
+ ```tsx
25
+ export const Default: Story = {
26
+ render: () => (
27
+ <Tabs.Root defaultValue="tab1" className="TabsRoot">
28
+ <Tabs.List className="TabsList">
29
+ <Tabs.Tab value="tab1" className="TabsTab">
30
+ Account
31
+ </Tabs.Tab>
32
+ <Tabs.Tab value="tab2" className="TabsTab">
33
+ Settings
34
+ </Tabs.Tab>
35
+ <Tabs.Tab value="tab3" className="TabsTab">
36
+ Notifications
37
+ </Tabs.Tab>
38
+ </Tabs.List>
39
+ <Tabs.Panel value="tab1" className="TabsPanel">
40
+ <h3 style={{ marginTop: 0 }}>Account Information</h3>
41
+ <p>Manage your account settings and preferences.</p>
42
+ </Tabs.Panel>
43
+ <Tabs.Panel value="tab2" className="TabsPanel">
44
+ <h3 style={{ marginTop: 0 }}>Settings</h3>
45
+ <p>Configure your application settings.</p>
46
+ </Tabs.Panel>
47
+ <Tabs.Panel value="tab3" className="TabsPanel">
48
+ <h3 style={{ marginTop: 0 }}>Notifications</h3>
49
+ <p>Manage your notification preferences.</p>
50
+ </Tabs.Panel>
51
+ </Tabs.Root>
52
+ ),
53
+ };
54
+ ```
55
+
56
+ The preview also shows `Controlled`, `WithDisabledTab`, `Vertical`.
package/dist/design-system/components/Tabs/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Navigation" height=480 subtitle="Default / Controlled / WithDisabledTab / Vertical" -->
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 y=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var m=(s,t)=>()=>(t||s((t={exports:{}}).exports,t),t.exports),S=(s,t)=>{for(var b in t)c(s,b,{get:t[b],enumerable:!0})},x=(s,t,b,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of R(t))!L.call(s,l)&&l!==b&&c(s,l,{get:()=>t[l],enumerable:!(n=f(t,l))||n.enumerable});return s};var u=(s,t,b)=>(b=s!=null?y(h(s)):{},x(t||!s||!s.__esModule?c(b,"default",{value:s,enumerable:!0}):b,s));var P=m((I,p)=>{p.exports=window.React});var d=m((F,v)=>{v.exports=window.Loomiere.Base});var r={};S(r,{Controlled:()=>M,Default:()=>V,ManyTabs:()=>B,Sizes:()=>E,Vertical:()=>D,WithDisabledTab:()=>A,default:()=>i});var N=u(P(),1),e=u(d(),1);var o=window.React;function a(s,t,b){let{children:n,...l}=t||{};return b!==void 0&&(l.key=b),n===void 0?o.createElement(s,l):Array.isArray(n)?o.createElement(s,l,...n):o.createElement(s,l,n)}var U=o.Fragment;var w={title:"Components/Tabs",component:e.Tabs.Root,parameters:{layout:"centered"},tags:["autodocs"],decorators:[s=>a("div",{style:{width:"600px",padding:"40px"},children:a(s,{})})]},i=w,V={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",className:"TabsRoot",children:[a(e.Tabs.List,{className:"TabsList",children:[a(e.Tabs.Tab,{value:"tab1",className:"TabsTab",children:"Account"}),a(e.Tabs.Tab,{value:"tab2",className:"TabsTab",children:"Settings"}),a(e.Tabs.Tab,{value:"tab3",className:"TabsTab",children:"Notifications"})]}),a(e.Tabs.Panel,{value:"tab1",className:"TabsPanel",children:[a("h3",{style:{marginTop:0},children:"Account Information"}),a("p",{children:"Manage your account settings and preferences."})]}),a(e.Tabs.Panel,{value:"tab2",className:"TabsPanel",children:[a("h3",{style:{marginTop:0},children:"Settings"}),a("p",{children:"Configure your application settings."})]}),a(e.Tabs.Panel,{value:"tab3",className:"TabsPanel",children:[a("h3",{style:{marginTop:0},children:"Notifications"}),a("p",{children:"Manage your notification preferences."})]})]})},M={render:()=>{let[s,t]=N.useState("tab1");return a("div",{children:[a(e.Tabs.Root,{value:s,onValueChange:t,className:"TabsRoot",children:[a(e.Tabs.List,{className:"TabsList",children:[a(e.Tabs.Tab,{value:"tab1",className:"TabsTab",children:"Overview"}),a(e.Tabs.Tab,{value:"tab2",className:"TabsTab",children:"Analytics"}),a(e.Tabs.Tab,{value:"tab3",className:"TabsTab",children:"Reports"})]}),a(e.Tabs.Panel,{value:"tab1",className:"TabsPanel",children:a("p",{children:["Overview content for ",s]})}),a(e.Tabs.Panel,{value:"tab2",className:"TabsPanel",children:a("p",{children:["Analytics content for ",s]})}),a(e.Tabs.Panel,{value:"tab3",className:"TabsPanel",children:a("p",{children:["Reports content for ",s]})})]}),a("div",{style:{marginTop:"16px",fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Current tab: ",s]})]})}},A={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",className:"TabsRoot",children:[a(e.Tabs.List,{className:"TabsList",children:[a(e.Tabs.Tab,{value:"tab1",className:"TabsTab",children:"Available"}),a(e.Tabs.Tab,{value:"tab2",className:"TabsTab",disabled:!0,children:"Disabled"}),a(e.Tabs.Tab,{value:"tab3",className:"TabsTab",children:"Active"})]}),a(e.Tabs.Panel,{value:"tab1",className:"TabsPanel",children:a("p",{children:"This tab is available."})}),a(e.Tabs.Panel,{value:"tab2",className:"TabsPanel",children:a("p",{children:"This tab is disabled and cannot be accessed."})}),a(e.Tabs.Panel,{value:"tab3",className:"TabsPanel",children:a("p",{children:"This tab is active."})})]})},D={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",orientation:"vertical",className:"TabsRoot",children:[a(e.Tabs.List,{className:"TabsList",children:[a(e.Tabs.Tab,{value:"tab1",className:"TabsTab",children:"Profile"}),a(e.Tabs.Tab,{value:"tab2",className:"TabsTab",children:"Security"}),a(e.Tabs.Tab,{value:"tab3",className:"TabsTab",children:"Billing"}),a(e.Tabs.Tab,{value:"tab4",className:"TabsTab",children:"Team"})]}),a(e.Tabs.Panel,{value:"tab1",className:"TabsPanel",children:[a("h3",{style:{marginTop:0},children:"Profile Settings"}),a("p",{children:"Update your profile information and photo."})]}),a(e.Tabs.Panel,{value:"tab2",className:"TabsPanel",children:[a("h3",{style:{marginTop:0},children:"Security Settings"}),a("p",{children:"Manage your password and two-factor authentication."})]}),a(e.Tabs.Panel,{value:"tab3",className:"TabsPanel",children:[a("h3",{style:{marginTop:0},children:"Billing Information"}),a("p",{children:"View and manage your billing details."})]}),a(e.Tabs.Panel,{value:"tab4",className:"TabsPanel",children:[a("h3",{style:{marginTop:0},children:"Team Management"}),a("p",{children:"Invite and manage team members."})]})]})},E={render:()=>a("div",{style:{display:"flex",flexDirection:"column",gap:"32px"},children:[a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Small"}),a(e.Tabs.Root,{defaultValue:"tab1",className:"TabsRoot","data-size":"sm",children:[a(e.Tabs.List,{className:"TabsList",children:[a(e.Tabs.Tab,{value:"tab1",className:"TabsTab",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",className:"TabsTab",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",className:"TabsTab",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",className:"TabsPanel",children:"Small tab panel content"}),a(e.Tabs.Panel,{value:"tab2",className:"TabsPanel",children:"Small tab panel content"}),a(e.Tabs.Panel,{value:"tab3",className:"TabsPanel",children:"Small tab panel content"})]})]}),a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Medium (Default)"}),a(e.Tabs.Root,{defaultValue:"tab1",className:"TabsRoot",children:[a(e.Tabs.List,{className:"TabsList",children:[a(e.Tabs.Tab,{value:"tab1",className:"TabsTab",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",className:"TabsTab",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",className:"TabsTab",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",className:"TabsPanel",children:"Medium tab panel content"}),a(e.Tabs.Panel,{value:"tab2",className:"TabsPanel",children:"Medium tab panel content"}),a(e.Tabs.Panel,{value:"tab3",className:"TabsPanel",children:"Medium tab panel content"})]})]}),a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Large"}),a(e.Tabs.Root,{defaultValue:"tab1",className:"TabsRoot","data-size":"lg",children:[a(e.Tabs.List,{className:"TabsList",children:[a(e.Tabs.Tab,{value:"tab1",className:"TabsTab",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",className:"TabsTab",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",className:"TabsTab",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",className:"TabsPanel",children:"Large tab panel content"}),a(e.Tabs.Panel,{value:"tab2",className:"TabsPanel",children:"Large tab panel content"}),a(e.Tabs.Panel,{value:"tab3",className:"TabsPanel",children:"Large tab panel content"})]})]})]})},B={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",className:"TabsRoot",children:[a(e.Tabs.List,{className:"TabsList",children:[a(e.Tabs.Tab,{value:"tab1",className:"TabsTab",children:"Dashboard"}),a(e.Tabs.Tab,{value:"tab2",className:"TabsTab",children:"Analytics"}),a(e.Tabs.Tab,{value:"tab3",className:"TabsTab",children:"Reports"}),a(e.Tabs.Tab,{value:"tab4",className:"TabsTab",children:"Settings"}),a(e.Tabs.Tab,{value:"tab5",className:"TabsTab",children:"Users"}),a(e.Tabs.Tab,{value:"tab6",className:"TabsTab",children:"Billing"})]}),a(e.Tabs.Panel,{value:"tab1",className:"TabsPanel",children:"Dashboard content"}),a(e.Tabs.Panel,{value:"tab2",className:"TabsPanel",children:"Analytics content"}),a(e.Tabs.Panel,{value:"tab3",className:"TabsPanel",children:"Reports content"}),a(e.Tabs.Panel,{value:"tab4",className:"TabsPanel",children:"Settings content"}),a(e.Tabs.Panel,{value:"tab5",className:"TabsPanel",children:"Users content"}),a(e.Tabs.Panel,{value:"tab6",className:"TabsPanel",children:"Billing content"})]})};var T=window.React,g=i||{},C=["Default","Controlled","WithDisabledTab","Vertical"];function z({id:s}){let t=r[s],b={...g.args||{},...t.args||{}};return(t.render||(l=>T.createElement(g.component,l)))(b,{args:b,id:s,name:s})}var O=C.map(s=>T.createElement("section",{key:s,className:"ds-story"},T.createElement("p",{className:"ds-story-name"},s.replace(/([a-z])([A-Z])/g,"$1 $2")),T.createElement("div",{className:"ds-story-body"},T.createElement(z,{id:s}))));window.ReactDOM.createRoot(document.getElementById("root")).render(T.createElement(T.Fragment,null,O));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Toast/README.md ADDED
@@ -0,0 +1,78 @@
1
+ # Toast
2
+
3
+ The Base UI Toast styled by the theme. A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type is success, warning, error or info takes that palette (the build points the scope at it); data-color picks any other palette. Toast tokens hold only the stack's place and width.
4
+
5
+ Use `Loomiere.Toast` (`import { Toast } from '@base-ui/react/toast'` 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/toast
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `Viewport` | |
14
+ | `Toast` | `data-expanded`; `data-starting-style`; `data-ending-style`; `data-swipe-direction`: `up`, `down`, `left`, `right`; `data-limited` |
15
+ | `Content` | `data-behind`; `data-expanded` |
16
+ | `Title` | |
17
+ | `Description` | |
18
+ | `Close` | |
19
+ | `Icon` | |
20
+
21
+ 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.
22
+
23
+ ## Example
24
+
25
+ From the Toast stories (`Default`):
26
+
27
+ ```tsx
28
+ export const Default: Story = {
29
+ render: () => {
30
+ function ToastButton() {
31
+ const toastManager = Toast.useToastManager();
32
+ const [count, setCount] = React.useState(0);
33
+
34
+ function createToast() {
35
+ setCount((prev) => prev + 1);
36
+ toastManager.add({
37
+ title: `Toast ${count + 1} created`,
38
+ description: 'This is a toast notification.',
39
+ });
40
+ }
41
+
42
+ return (
43
+ <button type="button" className="Button" onClick={createToast}>
44
+ Create toast
45
+ </button>
46
+ );
47
+ }
48
+
49
+ function ToastList() {
50
+ const { toasts } = Toast.useToastManager();
51
+ return toasts.map((toast) => (
52
+ <Toast.Root key={toast.id} toast={toast} className="Toast">
53
+ <Toast.Content className="Content">
54
+ <Toast.Title className="Title" />
55
+ <Toast.Description className="Description" />
56
+ <Toast.Close className="Close" aria-label="Close">
57
+ <XIcon className="Icon" />
58
+ </Toast.Close>
59
+ </Toast.Content>
60
+ </Toast.Root>
61
+ ));
62
+ }
63
+
64
+ return (
65
+ <Toast.Provider>
66
+ <ToastButton />
67
+ <Toast.Portal>
68
+ <Toast.Viewport className="Viewport">
69
+ <ToastList />
70
+ </Toast.Viewport>
71
+ </Toast.Portal>
72
+ </Toast.Provider>
73
+ );
74
+ },
75
+ };
76
+ ```
77
+
78
+ The preview also shows `Variants`, `AutoDismiss`, `MultipleToasts`.
package/dist/design-system/components/Toast/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Feedback" height=480 subtitle="Default / Variants / AutoDismiss / MultipleToasts" -->
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 R=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var C=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),B=(o,a)=>{for(var s in a)m(o,s,{get:a[s],enumerable:!0})},L=(o,a,s,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of P(a))!V.call(o,r)&&r!==s&&m(o,r,{get:()=>a[r],enumerable:!(n=R(a,r))||n.enumerable});return o};var w=(o,a,s)=>(s=o!=null?b(I(o)):{},L(a||!o||!o.__esModule?m(s,"default",{value:o,enumerable:!0}):s,o));var v=C((z,h)=>{h.exports=window.React});var y=C((G,f)=>{f.exports=window.Loomiere.Base});var T={};B(T,{AutoDismiss:()=>$,Default:()=>j,MultipleToasts:()=>H,Variants:()=>W,VaryingHeights:()=>Z,default:()=>g});var u=w(v(),1),e=w(y(),1);var d=window.React;function t(o,a,s){let{children:n,...r}=a||{};return s!==void 0&&(r.key=s),n===void 0?d.createElement(o,r):Array.isArray(n)?d.createElement(o,r,...n):d.createElement(o,r,n)}var _=d.Fragment;var S={title:"Components/Toast",component:e.Toast.Provider,parameters:{layout:"fullscreen"},tags:["autodocs"],decorators:[o=>t("div",{style:{minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center",padding:"2rem"},children:t(o,{})})]},g=S,k=o=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:t("path",{d:"M16.25 5.625L7.5 14.375L3.75 10.625",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),D=o=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:t("path",{d:"M10 6.25V10.625M10 13.75H10.0088M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),E=o=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:t("path",{d:"M10 6.875V10.625M10 13.75H10.0088M8.57465 3.125L2.01215 14.375C1.86431 14.6336 1.78652 14.9254 1.78652 15.2219C1.78652 15.5184 1.86431 15.8102 2.01215 16.0688C2.15999 16.3273 2.37329 16.5445 2.63036 16.6989C2.88743 16.8533 3.18004 16.9393 3.47965 16.9469H16.6046C16.9042 16.9393 17.1968 16.8533 17.4539 16.6989C17.711 16.5445 17.9243 16.3273 18.0721 16.0688C18.22 15.8102 18.2978 15.5184 18.2978 15.2219C18.2978 14.9254 18.22 14.6336 18.0721 14.375L11.5096 3.125C11.3618 2.86645 11.1485 2.64924 10.8914 2.49484C10.6344 2.34044 10.3418 2.25439 10.0421 2.25439C9.74249 2.25439 9.44988 2.34044 9.19281 2.49484C8.93574 2.64924 8.72244 2.86645 8.57465 3.125Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),A=o=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:t("path",{d:"M10 13.125V10M10 6.875H10.0088M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),p=o=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...o,children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]}),N=["Short message.","A bit longer message that spans two lines.","This is a longer description that intentionally takes more vertical space to demonstrate stacking with varying heights.","An even longer description that should span multiple lines so we can verify the clamped collapsed height and smooth expansion animation when hovering or focusing the viewport."],j={render:()=>{function o(){let s=e.Toast.useToastManager(),[n,r]=u.useState(0);function i(){r(c=>c+1),s.add({title:`Toast ${n+1} created`,description:"This is a toast notification."})}return t("button",{type:"button",className:"Button",onClick:i,children:"Create toast"})}function a(){let{toasts:s}=e.Toast.useToastManager();return s.map(n=>t(e.Toast.Root,{toast:n,className:"Toast",children:t(e.Toast.Content,{className:"Content",children:[t(e.Toast.Title,{className:"Title"}),t(e.Toast.Description,{className:"Description"}),t(e.Toast.Close,{className:"Close","aria-label":"Close",children:t(p,{className:"Icon"})})]})},n.id))}return t(e.Toast.Provider,{children:[t(o,{}),t(e.Toast.Portal,{children:t(e.Toast.Viewport,{className:"Viewport",children:t(a,{})})})]})}},W={render:()=>{function o(){let s=e.Toast.useToastManager();return t("div",{style:{display:"flex",gap:"8px",flexWrap:"wrap"},children:[t("button",{className:"Button",onClick:()=>s.add({title:"Success",description:"Your changes have been saved successfully.",type:"success"}),children:"Success"}),t("button",{className:"Button",onClick:()=>s.add({title:"Error",description:"Something went wrong. Please try again.",type:"error"}),children:"Error"}),t("button",{className:"Button",onClick:()=>s.add({title:"Warning",description:"Your session will expire in 5 minutes.",type:"warning"}),children:"Warning"}),t("button",{className:"Button",onClick:()=>s.add({title:"Info",description:"A new version is available. Refresh to update.",type:"info"}),children:"Info"})]})}function a(){let{toasts:s}=e.Toast.useToastManager(),n=r=>{switch(r){case"success":return t(k,{className:"Icon"});case"error":return t(D,{className:"Icon"});case"warning":return t(E,{className:"Icon"});case"info":return t(A,{className:"Icon"});default:return null}};return s.map(r=>{let i=r.type;return t(e.Toast.Root,{toast:r,className:"Toast",children:t(e.Toast.Content,{className:"Content",children:[t("div",{style:{display:"flex",gap:"0.75rem",alignItems:"flex-start"},children:[i&&n(i),t("div",{style:{flex:1},children:[t(e.Toast.Title,{className:"Title"}),t(e.Toast.Description,{className:"Description"})]})]}),t(e.Toast.Close,{className:"Close","aria-label":"Close",children:t(p,{className:"Icon"})})]})},r.id)})}return t(e.Toast.Provider,{children:[t(o,{}),t(e.Toast.Portal,{children:t(e.Toast.Viewport,{className:"Viewport",children:t(a,{})})})]})}},$={render:()=>{function o(){let s=e.Toast.useToastManager(),[n,r]=u.useState(0);function i(){r(c=>c+1),s.add({title:`Auto-dismiss Toast ${n+1}`,description:"This toast will automatically close in 3 seconds.",type:"success",timeout:3e3})}return t("button",{type:"button",className:"Button",onClick:i,children:"Create auto-dismiss toast"})}function a(){let{toasts:s}=e.Toast.useToastManager();return s.map(n=>t(e.Toast.Root,{toast:n,className:"Toast",children:t(e.Toast.Content,{className:"Content",children:t("div",{style:{display:"flex",gap:"0.75rem",alignItems:"flex-start"},children:[t(k,{className:"Icon"}),t("div",{style:{flex:1},children:[t(e.Toast.Title,{className:"Title"}),t(e.Toast.Description,{className:"Description"})]})]})})},n.id))}return t(e.Toast.Provider,{children:[t(o,{}),t(e.Toast.Portal,{children:t(e.Toast.Viewport,{className:"Viewport",children:t(a,{})})})]})}},H={render:()=>{function o(){let s=e.Toast.useToastManager(),[n,r]=u.useState(0);function i(){r(c=>c+1),s.add({title:`Toast #${n+1}`,description:`This is toast number ${n+1}.`})}return t("button",{type:"button",className:"Button",onClick:i,children:"Add toast"})}function a(){let{toasts:s}=e.Toast.useToastManager();return s.map(n=>t(e.Toast.Root,{toast:n,className:"Toast",children:t(e.Toast.Content,{className:"Content",children:[t(e.Toast.Title,{className:"Title"}),t(e.Toast.Description,{className:"Description"}),t(e.Toast.Close,{className:"Close","aria-label":"Close",children:t(p,{className:"Icon"})})]})},n.id))}return t(e.Toast.Provider,{children:[t(o,{}),t(e.Toast.Portal,{children:t(e.Toast.Viewport,{className:"Viewport",children:t(a,{})})})]})}},Z={render:()=>{function o(){let s=e.Toast.useToastManager(),[n,r]=u.useState(0);function i(){r(M=>M+1);let c=N[Math.floor(Math.random()*N.length)];s.add({title:`Toast ${n+1} created`,description:c})}return t("button",{type:"button",className:"Button",onClick:i,children:"Create varying height toast"})}function a(){let{toasts:s}=e.Toast.useToastManager();return s.map(n=>t(e.Toast.Root,{toast:n,className:"Toast",children:t(e.Toast.Content,{className:"Content",children:[t(e.Toast.Title,{className:"Title"}),t(e.Toast.Description,{className:"Description"}),t(e.Toast.Close,{className:"Close","aria-label":"Close",children:t(p,{className:"Icon"})})]})},n.id))}return t(e.Toast.Provider,{children:[t(o,{}),t(e.Toast.Portal,{children:t(e.Toast.Viewport,{className:"Viewport",children:t(a,{})})})]})}};var l=window.React,x=g||{},F=["Default","Variants","AutoDismiss","MultipleToasts"];function O({id:o}){let a=T[o],s={...x.args||{},...a.args||{}};return(a.render||(r=>l.createElement(x.component,r)))(s,{args:s,id:o,name:o})}var Y=F.map(o=>l.createElement("section",{key:o,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(O,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,Y));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Toggle/README.md ADDED
@@ -0,0 +1,32 @@
1
+ # Toggle
2
+
3
+ The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size.
4
+
5
+ Use `Loomiere.Toggle` (`import { Toggle } from '@base-ui/react/toggle'` 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/toggle
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `Toggle` | `data-disabled`; `data-pressed`; `data-size`: `sm`, `lg` |
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 Toggle stories (`Default`):
20
+
21
+ ```tsx
22
+ export const Default: Story = {
23
+ render: () => (
24
+ <Toggle className="Toggle">
25
+ <HeartIcon />
26
+ Like
27
+ </Toggle>
28
+ ),
29
+ };
30
+ ```
31
+
32
+ The preview also shows `IconOnly`, `TextOnly`, `Controlled`.
package/dist/design-system/components/Toggle/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Actions" height=480 subtitle="Default / IconOnly / TextOnly / Controlled" -->
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 N=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var y=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),R=(t,o)=>{for(var r in o)i(t,r,{get:o[r],enumerable:!0})},E=(t,o,r,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of k(o))!C.call(t,a)&&a!==r&&i(t,a,{get:()=>o[a],enumerable:!(l=S(o,a))||l.enumerable});return t};var T=(t,o,r)=>(r=t!=null?N(b(t)):{},E(o||!t||!t.__esModule?i(r,"default",{value:t,enumerable:!0}):r,t));var f=y((H,x)=>{x.exports=window.React});var u=y((Z,v)=>{v.exports=window.Loomiere.Base});var p={};R(p,{Controlled:()=>D,Default:()=>z,DefaultPressed:()=>F,Disabled:()=>O,IconOnly:()=>B,Sizes:()=>j,TextOnly:()=>I,default:()=>d});var h=T(f(),1),s=T(u(),1);var c=window.React;function e(t,o,r){let{children:l,...a}=o||{};return r!==void 0&&(a.key=r),l===void 0?c.createElement(t,a):Array.isArray(l)?c.createElement(t,a,...l):c.createElement(t,a,l)}var q=c.Fragment;var L={title:"Components/Toggle",component:s.Toggle,parameters:{layout:"centered"},tags:["autodocs"]},d=L,n=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M10 17.5s-6-4.5-6-8c0-2.2 1.8-4 4-4 1.1 0 2.1.5 2.8 1.2L10 8l.8-1.3C11.5 5.5 12.5 5 13.6 5c2.2 0 4 1.8 4 4 0 3.5-6 8-6 8z"})}),m=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M10 2l2.5 5 5.5.5-4 3.5 1.5 5.5L10 13.5l-5.5 3 1.5-5.5-4-3.5 5.5-.5L10 2z"})}),M=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M15 6.5a5 5 0 0 0-10 0c0 5-2 6.5-2 6.5h14s-2-1.5-2-6.5zM11.5 16.5a1.5 1.5 0 0 1-3 0"})}),P=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M5 3h10v14l-5-3-5 3V3z"})}),z={render:()=>e(s.Toggle,{className:"Toggle",children:[e(n,{}),"Like"]})},B={render:()=>e("div",{style:{display:"flex",gap:"8px"},children:[e(s.Toggle,{className:"Toggle","aria-label":"Like",children:e(n,{})}),e(s.Toggle,{className:"Toggle","aria-label":"Favorite",children:e(m,{})}),e(s.Toggle,{className:"Toggle","aria-label":"Notifications",children:e(M,{})}),e(s.Toggle,{className:"Toggle","aria-label":"Bookmark",children:e(P,{})})]})},I={render:()=>e("div",{style:{display:"flex",gap:"8px"},children:[e(s.Toggle,{className:"Toggle",children:"Subscribe"}),e(s.Toggle,{className:"Toggle",children:"Follow"}),e(s.Toggle,{className:"Toggle",children:"Mute"})]})},D={render:()=>{let[t,o]=h.useState(!1);return e("div",{style:{display:"flex",flexDirection:"column",gap:"16px",alignItems:"center"},children:[e(s.Toggle,{className:"Toggle",pressed:t,onPressedChange:o,children:[e(n,{}),t?"Liked":"Like"]}),e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Status: ",t?"Pressed":"Not pressed"]})]})}},F={render:()=>e(s.Toggle,{className:"Toggle",defaultPressed:!0,children:[e(m,{}),"Favorite"]})},O={render:()=>e("div",{style:{display:"flex",gap:"8px"},children:[e(s.Toggle,{className:"Toggle",disabled:!0,children:[e(n,{}),"Like"]}),e(s.Toggle,{className:"Toggle",disabled:!0,defaultPressed:!0,children:[e(m,{}),"Favorite"]})]})},j={render:()=>e("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e(s.Toggle,{className:"Toggle","data-size":"sm",children:[e(n,{}),"Small"]}),e(s.Toggle,{className:"Toggle",children:[e(n,{}),"Medium"]}),e(s.Toggle,{className:"Toggle","data-size":"lg",children:[e(n,{}),"Large"]})]})};var g=window.React,w=d||{},W=["Default","IconOnly","TextOnly","Controlled"];function A({id:t}){let o=p[t],r={...w.args||{},...o.args||{}};return(o.render||(a=>g.createElement(w.component,a)))(r,{args:r,id:t,name:t})}var V=W.map(t=>g.createElement("section",{key:t,className:"ds-story"},g.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),g.createElement("div",{className:"ds-story-body"},g.createElement(A,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(g.createElement(g.Fragment,null,V));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/ToggleGroup/README.md ADDED
@@ -0,0 +1,40 @@
1
+ # ToggleGroup
2
+
3
+ The Base UI ToggleGroup styled by the theme. No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the toggles are Toggle, with item corners so they nest inside the strip's.
4
+
5
+ Use `Loomiere.ToggleGroup` (`import { ToggleGroup } from '@base-ui/react/toggle-group'` 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/toggle-group
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `ToggleGroup` | |
14
+ | `Toggle` | |
15
+
16
+ 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.
17
+
18
+ ## Example
19
+
20
+ From the ToggleGroup stories (`Default`):
21
+
22
+ ```tsx
23
+ export const Default: Story = {
24
+ render: () => (
25
+ <ToggleGroup className="ToggleGroup" defaultValue={['bold']}>
26
+ <Toggle value="bold" className="Toggle" aria-label="Bold">
27
+ <BoldIcon />
28
+ </Toggle>
29
+ <Toggle value="italic" className="Toggle" aria-label="Italic">
30
+ <ItalicIcon />
31
+ </Toggle>
32
+ <Toggle value="underline" className="Toggle" aria-label="Underline">
33
+ <UnderlineIcon />
34
+ </Toggle>
35
+ </ToggleGroup>
36
+ ),
37
+ };
38
+ ```
39
+
40
+ The preview also shows `SingleSelection`, `MultipleSelection`, `WithText`.
package/dist/design-system/components/ToggleGroup/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Actions" height=480 subtitle="Default / SingleSelection / MultipleSelection / WithText" -->
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 I=Object.create;var c=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var d=(l,o)=>()=>(o||l((o={exports:{}}).exports,o),o.exports),V=(l,o)=>{for(var a in o)c(l,a,{get:o[a],enumerable:!0})},z=(l,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of k(o))!E.call(l,r)&&r!==a&&c(l,r,{get:()=>o[r],enumerable:!(n=G(o,r))||n.enumerable});return l};var m=(l,o,a)=>(a=l!=null?I(A(l)):{},z(o||!l||!l.__esModule?c(a,"default",{value:l,enumerable:!0}):a,l));var y=d((Z,f)=>{f.exports=window.React});var b=d((q,x)=>{x.exports=window.Loomiere.Base});var N=d((K,w)=>{w.exports=window.Loomiere.Base});var T={};V(T,{Default:()=>j,Disabled:()=>O,MultipleSelection:()=>W,SingleSelection:()=>H,WithText:()=>L,default:()=>p});var M=m(y(),1),t=m(b(),1),s=m(N(),1);var i=window.React;function e(l,o,a){let{children:n,...r}=o||{};return a!==void 0&&(r.key=a),n===void 0?i.createElement(l,r):Array.isArray(n)?i.createElement(l,r,...n):i.createElement(l,r,n)}var Q=i.Fragment;var D={title:"Components/ToggleGroup",component:s.ToggleGroup,parameters:{layout:"centered"},tags:["autodocs"]},p=D,u=l=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...l,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),h=l=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...l,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),v=l=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...l,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),S=l=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...l,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),C=l=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...l,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),R=l=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...l,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),P=l=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...l,children:e("path",{d:"M3 4h14M3 8h14M3 12h14M3 16h14"})}),j={render:()=>e(s.ToggleGroup,{className:"ToggleGroup",defaultValue:["bold"],children:[e(t.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(u,{})}),e(t.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",children:e(h,{})}),e(t.Toggle,{value:"underline",className:"Toggle","aria-label":"Underline",children:e(v,{})})]})},H={render:()=>{let[l,o]=M.useState(["left"]);return e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Only one can be selected at a time"}),e(s.ToggleGroup,{className:"ToggleGroup",multiple:!1,value:l,onValueChange:o,children:[e(t.Toggle,{value:"left",className:"Toggle","aria-label":"Align left",children:e(S,{})}),e(t.Toggle,{value:"center",className:"Toggle","aria-label":"Align center",children:e(C,{})}),e(t.Toggle,{value:"right",className:"Toggle","aria-label":"Align right",children:e(R,{})}),e(t.Toggle,{value:"justify",className:"Toggle","aria-label":"Align justify",children:e(P,{})})]}),e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:["Selected: ",l[0]||"None"]})]})}},W={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Click multiple buttons - they can all be active at once"}),e(s.ToggleGroup,{className:"ToggleGroup",multiple:!0,defaultValue:["bold","italic"],children:[e(t.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(u,{})}),e(t.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",children:e(h,{})}),e(t.Toggle,{value:"underline",className:"Toggle","aria-label":"Underline",children:e(v,{})})]})]})},L={render:()=>e(s.ToggleGroup,{className:"ToggleGroup",defaultValue:["left"],children:[e(t.Toggle,{value:"left",className:"Toggle",children:[e(S,{}),"Left"]}),e(t.Toggle,{value:"center",className:"Toggle",children:[e(C,{}),"Center"]}),e(t.Toggle,{value:"right",className:"Toggle",children:[e(R,{}),"Right"]})]})},O={render:()=>e(s.ToggleGroup,{className:"ToggleGroup",defaultValue:["bold"],children:[e(t.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(u,{})}),e(t.Toggle,{value:"italic",className:"Toggle",disabled:!0,"aria-label":"Italic",children:e(h,{})}),e(t.Toggle,{value:"underline",className:"Toggle","aria-label":"Underline",children:e(v,{})})]})};var g=window.React,B=p||{},U=["Default","SingleSelection","MultipleSelection","WithText"];function F({id:l}){let o=T[l],a={...B.args||{},...o.args||{}};return(o.render||(r=>g.createElement(B.component,r)))(a,{args:a,id:l,name:l})}var $=U.map(l=>g.createElement("section",{key:l,className:"ds-story"},g.createElement("p",{className:"ds-story-name"},l.replace(/([a-z])([A-Z])/g,"$1 $2")),g.createElement("div",{className:"ds-story-body"},g.createElement(F,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(g.createElement(g.Fragment,null,$));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Toolbar/README.md ADDED
@@ -0,0 +1,65 @@
1
+ # Toolbar
2
+
3
+ The Base UI Toolbar styled by the theme. The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects and inputs inside it keep their own styles; only the field's width is the toolbar's.
4
+
5
+ Use `Loomiere.Toolbar` (`import { Toolbar } from '@base-ui/react/toolbar'` 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/toolbar
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `Toolbar` | |
14
+ | `ToolbarGroup` | |
15
+ | `ToolbarSeparator` | |
16
+ | `ToolbarLink` | |
17
+ | `ToolbarInput` | |
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 Toolbar stories (`Default`):
24
+
25
+ ```tsx
26
+ export const Default: Story = {
27
+ render: () => (
28
+ <Toolbar.Root className="Toolbar">
29
+ <ToggleGroup className="ToolbarGroup" multiple>
30
+ <Toggle value="bold" className="Toggle" aria-label="Bold">
31
+ <BoldIcon />
32
+ </Toggle>
33
+ <Toggle value="italic" className="Toggle" aria-label="Italic">
34
+ <ItalicIcon />
35
+ </Toggle>
36
+ <Toggle value="underline" className="Toggle" aria-label="Underline">
37
+ <UnderlineIcon />
38
+ </Toggle>
39
+ </ToggleGroup>
40
+
41
+ <Toolbar.Separator className="ToolbarSeparator" />
42
+
43
+ <ToggleGroup className="ToolbarGroup" defaultValue={['left']}>
44
+ <Toggle value="left" className="Toggle" aria-label="Align left">
45
+ <AlignLeftIcon />
46
+ </Toggle>
47
+ <Toggle value="center" className="Toggle" aria-label="Align center">
48
+ <AlignCenterIcon />
49
+ </Toggle>
50
+ <Toggle value="right" className="Toggle" aria-label="Align right">
51
+ <AlignRightIcon />
52
+ </Toggle>
53
+ </ToggleGroup>
54
+
55
+ <Toolbar.Separator className="ToolbarSeparator" />
56
+
57
+ <Toolbar.Button className="Button">
58
+ Save
59
+ </Toolbar.Button>
60
+ </Toolbar.Root>
61
+ ),
62
+ };
63
+ ```
64
+
65
+ The preview also shows `WithSelect`, `WithLink`, `WithGroups`.
package/dist/design-system/components/Toolbar/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Actions" height=480 subtitle="Default / WithSelect / WithLink / WithGroups" -->
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 P=Object.create;var T=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var u=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),V=(o,a)=>{for(var r in a)T(o,r,{get:a[r],enumerable:!0})},H=(o,a,r,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of E(a))!z.call(o,n)&&n!==r&&T(o,n,{get:()=>a[n],enumerable:!(c=W(a,n))||c.enumerable});return o};var h=(o,a,r)=>(r=o!=null?P(L(o)):{},H(a||!o||!o.__esModule?T(r,"default",{value:o,enumerable:!0}):r,o));var B=u((X,I)=>{I.exports=window.Loomiere.Base});var w=u((Y,x)=>{x.exports=window.Loomiere.Base});var y=u((_,f)=>{f.exports=window.Loomiere.Base});var C=u((ee,R)=>{R.exports=window.Loomiere.Base});var S={};V(S,{Compact:()=>Z,Default:()=>O,WithGroups:()=>$,WithLink:()=>F,WithSelect:()=>U,default:()=>v});var t=h(B(),1),s=h(w(),1),m=h(y(),1),l=h(C(),1);var d=window.React;function e(o,a,r){let{children:c,...n}=a||{};return r!==void 0&&(n.key=r),c===void 0?d.createElement(o,n):Array.isArray(c)?d.createElement(o,n,...c):d.createElement(o,n,c)}var oe=d.Fragment;var D={title:"Components/Toolbar",component:t.Toolbar.Root,parameters:{layout:"centered"},tags:["autodocs"]},v=D,g=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),p=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),N=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),M=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),G=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),k=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),j=o=>e("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...o,children:e("path",{d:"M2 4l4 4 4-4"})}),b=o=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 8l3 3 7-7"})}),O={render:()=>e(t.Toolbar.Root,{className:"Toolbar",children:[e(m.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(s.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(g,{})}),e(s.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",children:e(p,{})}),e(s.Toggle,{value:"underline",className:"Toggle","aria-label":"Underline",children:e(N,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(m.ToggleGroup,{className:"ToolbarGroup",defaultValue:["left"],children:[e(s.Toggle,{value:"left",className:"Toggle","aria-label":"Align left",children:e(M,{})}),e(s.Toggle,{value:"center",className:"Toggle","aria-label":"Align center",children:e(G,{})}),e(s.Toggle,{value:"right",className:"Toggle","aria-label":"Align right",children:e(k,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Button,{className:"Button",children:"Save"})]})},U={render:()=>e(t.Toolbar.Root,{className:"Toolbar",children:[e(m.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(s.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(g,{})}),e(s.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",children:e(p,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(l.Select.Root,{defaultValue:"helvetica",children:[e(l.Select.Trigger,{className:"Button",style:{minWidth:"140px"},children:[e(l.Select.Value,{}),e(l.Select.Icon,{children:e(j,{})})]}),e(l.Select.Portal,{children:e(l.Select.Positioner,{sideOffset:8,children:e(l.Select.Popup,{className:"SelectPopup",children:[e(l.Select.Item,{className:"SelectItem",value:"helvetica",children:[e(l.Select.ItemIndicator,{className:"SelectItemIndicator",children:e(b,{})}),e(l.Select.ItemText,{children:"Helvetica"})]}),e(l.Select.Item,{className:"SelectItem",value:"arial",children:[e(l.Select.ItemIndicator,{className:"SelectItemIndicator",children:e(b,{})}),e(l.Select.ItemText,{children:"Arial"})]}),e(l.Select.Item,{className:"SelectItem",value:"times",children:[e(l.Select.ItemIndicator,{className:"SelectItemIndicator",children:e(b,{})}),e(l.Select.ItemText,{children:"Times New Roman"})]})]})})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Button,{className:"Button",children:"Apply"})]})},F={render:()=>e(t.Toolbar.Root,{className:"Toolbar",children:[e(m.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(s.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(g,{})}),e(s.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",children:e(p,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Link,{className:"ToolbarLink",href:"#",children:"Last edited 2h ago"})]})},$={render:()=>e(t.Toolbar.Root,{className:"Toolbar",children:[e(t.Toolbar.Group,{className:"ToolbarGroup","aria-label":"Text formatting",children:[e(t.Toolbar.Button,{className:"Button","aria-label":"Bold",children:e(g,{})}),e(t.Toolbar.Button,{className:"Button","aria-label":"Italic",children:e(p,{})}),e(t.Toolbar.Button,{className:"Button","aria-label":"Underline",children:e(N,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Group,{className:"ToolbarGroup","aria-label":"Alignment",children:[e(t.Toolbar.Button,{className:"Button","aria-label":"Align left",children:e(M,{})}),e(t.Toolbar.Button,{className:"Button","aria-label":"Align center",children:e(G,{})}),e(t.Toolbar.Button,{className:"Button","aria-label":"Align right",children:e(k,{})})]})]})},Z={render:()=>e(t.Toolbar.Root,{className:"Toolbar",style:{padding:"var(--sl-space-1)",gap:"var(--sl-space-1)"},children:[e(m.ToggleGroup,{className:"ToolbarGroup",multiple:!0,style:{gap:"2px"},children:[e(s.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(g,{style:{width:"16px",height:"16px"}})}),e(s.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(p,{style:{width:"16px",height:"16px"}})}),e(s.Toggle,{value:"underline",className:"Toggle","aria-label":"Underline",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(N,{style:{width:"16px",height:"16px"}})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Button,{className:"Button","data-size":"xs",children:"Save"})]})};var i=window.React,A=v||{},q=["Default","WithSelect","WithLink","WithGroups"];function J({id:o}){let a=S[o],r={...A.args||{},...a.args||{}};return(a.render||(n=>i.createElement(A.component,n)))(r,{args:r,id:o,name:o})}var K=q.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,K));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/design-system/components/Tooltip/README.md ADDED
@@ -0,0 +1,46 @@
1
+ # Tooltip
2
+
3
+ The Base UI Tooltip styled by the theme. The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip reads as a label laid over the page. Motion is the popup's; only the width limit is the tooltip's own (tokens/component/tooltip.json).
4
+
5
+ Use `Loomiere.Tooltip` (`import { Tooltip } from '@base-ui/react/tooltip'` 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/tooltip
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `TooltipTrigger` | |
14
+ | `TooltipPositioner` | |
15
+ | `TooltipPopup` | `data-starting-style`; `data-ending-style` |
16
+ | `TooltipArrow` | |
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 Tooltip stories (`Default`):
23
+
24
+ ```tsx
25
+ export const Default: Story = {
26
+ render: () => (
27
+ <Tooltip.Root>
28
+ <Tooltip.Trigger className="Button">
29
+ Hover me
30
+ </Tooltip.Trigger>
31
+ <Tooltip.Portal>
32
+ <Tooltip.Positioner className="TooltipPositioner" sideOffset={8}>
33
+ <Tooltip.Popup className="TooltipPopup">
34
+ <Tooltip.Arrow className="TooltipArrow">
35
+ <TooltipArrow />
36
+ </Tooltip.Arrow>
37
+ This is a helpful tooltip
38
+ </Tooltip.Popup>
39
+ </Tooltip.Positioner>
40
+ </Tooltip.Portal>
41
+ </Tooltip.Root>
42
+ ),
43
+ };
44
+ ```
45
+
46
+ The preview also shows `WithIcon`, `LongContent`, `Placement`.
package/dist/design-system/components/Tooltip/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Overlays" height=480 subtitle="Default / WithIcon / LongContent / Placement" -->
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 u=Object.create;var T=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var A=(e,i)=>()=>(i||e((i={exports:{}}).exports,i),i.exports),h=(e,i)=>{for(var r in i)T(e,r,{get:i[r],enumerable:!0})},R=(e,i,r,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of w(i))!y.call(e,l)&&l!==r&&T(e,l,{get:()=>i[l],enumerable:!(p=f(i,l))||p.enumerable});return e};var v=(e,i,r)=>(r=e!=null?u(N(e)):{},R(i||!e||!e.__esModule?T(r,"default",{value:e,enumerable:!0}):r,e));var P=A((M,d)=>{d.exports=window.Loomiere.Base});var c={};h(c,{Default:()=>B,LongContent:()=>S,OnText:()=>E,Placement:()=>C,WithDelay:()=>b,WithIcon:()=>O,WithoutArrow:()=>D,default:()=>m});var t=v(P(),1);var n=window.React;function o(e,i,r){let{children:p,...l}=i||{};return r!==void 0&&(l.key=r),p===void 0?n.createElement(e,l):Array.isArray(p)?n.createElement(e,l,...p):n.createElement(e,l,p)}var W=n.Fragment;var x={title:"Components/Tooltip",component:t.Tooltip.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=x;function s(e){return o("svg",{width:"12",height:"6",viewBox:"0 0 12 6",fill:"none",...e,children:o("path",{d:"M0 6L6 0L12 6H0Z"})})}var q=e=>o("svg",{width:"20",height:"20",viewBox:"0 -960 960 960",fill:"currentColor",...e,children:o("path",{d:"M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"})}),B={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This is a helpful tooltip"]})})})]})},O={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button","data-variant":"ghost","aria-label":"More information",style:{padding:"var(--sl-space-2)",minWidth:"40px",display:"flex",alignItems:"center",justifyContent:"center"},children:o(q,{})}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Additional information about this feature"]})})})]})},S={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover for details"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This is a longer tooltip with more detailed information. It will wrap to multiple lines when it exceeds the maximum width."]})})})]})},C={render:()=>o("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"80px",padding:"80px"},children:[o("div",{style:{gridColumn:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Top"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"top",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on top"]})})})]})}),o("div",{style:{gridColumn:"1",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Left"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"left",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on left"]})})})]})}),o("div",{style:{gridColumn:"3",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Right"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"right",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on right"]})})})]})}),o("div",{style:{gridColumn:"2",gridRow:"3"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Bottom"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"bottom",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on bottom"]})})})]})})]})},b={render:()=>o("div",{style:{display:"flex",gap:"16px"},children:[o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:0,children:"No delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears immediately"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:500,children:"500ms delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears after 500ms"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:1e3,children:"1s delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears after 1 second"]})})})]})]})},E={render:()=>o("div",{style:{maxWidth:"400px",fontSize:"16px",lineHeight:"1.6"},children:o("p",{children:["Tooltips can be attached to inline text elements."," ",o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{style:{textDecoration:"underline",textDecorationStyle:"dotted",cursor:"help",background:"none",border:"none",padding:0,font:"inherit",color:"var(--sl-text-accent)"},children:"Hover this text"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This provides additional context"]})})})]})," ","to see more information without leaving the page."]})})},D={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:"Tooltip without an arrow"})})})]})};var a=window.React,g=m||{},I=["Default","WithIcon","LongContent","Placement"];function Z({id:e}){let i=c[e],r={...g.args||{},...i.args||{}};return(i.render||(l=>a.createElement(g.component,l)))(r,{args:r,id:e,name:e})}var H=I.map(e=>a.createElement("section",{key:e,className:"ds-story"},a.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),a.createElement("div",{className:"ds-story-body"},a.createElement(Z,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(a.createElement(a.Fragment,null,H));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>