@scattered-light/loomiere-mojave 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 (86) hide show
  1. package/README.md +6 -1
  2. package/dist/exports/AGENTS.md +150 -0
  3. package/dist/exports/catalog.json +99 -1
  4. package/dist/exports/design-system/README.md +142 -0
  5. package/dist/exports/design-system/components/Accordion/README.md +97 -0
  6. package/dist/exports/design-system/components/Accordion/preview.html +19 -0
  7. package/dist/exports/design-system/components/AlertDialog/README.md +52 -0
  8. package/dist/exports/design-system/components/AlertDialog/preview.html +19 -0
  9. package/dist/exports/design-system/components/Autocomplete/README.md +68 -0
  10. package/dist/exports/design-system/components/Autocomplete/preview.html +19 -0
  11. package/dist/exports/design-system/components/Avatar/README.md +39 -0
  12. package/dist/exports/design-system/components/Avatar/preview.html +19 -0
  13. package/dist/exports/design-system/components/Button/README.md +27 -0
  14. package/dist/exports/design-system/components/Button/preview.html +23 -0
  15. package/dist/exports/design-system/components/Checkbox/README.md +39 -0
  16. package/dist/exports/design-system/components/Checkbox/preview.html +19 -0
  17. package/dist/exports/design-system/components/CheckboxGroup/README.md +56 -0
  18. package/dist/exports/design-system/components/CheckboxGroup/preview.html +19 -0
  19. package/dist/exports/design-system/components/Collapsible/README.md +48 -0
  20. package/dist/exports/design-system/components/Collapsible/preview.html +19 -0
  21. package/dist/exports/design-system/components/Combobox/README.md +105 -0
  22. package/dist/exports/design-system/components/Combobox/preview.html +19 -0
  23. package/dist/exports/design-system/components/ContextMenu/README.md +70 -0
  24. package/dist/exports/design-system/components/ContextMenu/preview.html +19 -0
  25. package/dist/exports/design-system/components/Cover/preview.html +39 -0
  26. package/dist/exports/design-system/components/Dialog/README.md +62 -0
  27. package/dist/exports/design-system/components/Dialog/preview.html +19 -0
  28. package/dist/exports/design-system/components/Drawer/README.md +32 -0
  29. package/dist/exports/design-system/components/Drawer/preview.html +19 -0
  30. package/dist/exports/design-system/components/Field/README.md +41 -0
  31. package/dist/exports/design-system/components/Field/preview.html +19 -0
  32. package/dist/exports/design-system/components/Fieldset/README.md +45 -0
  33. package/dist/exports/design-system/components/Fieldset/preview.html +19 -0
  34. package/dist/exports/design-system/components/Form/README.md +57 -0
  35. package/dist/exports/design-system/components/Form/preview.html +19 -0
  36. package/dist/exports/design-system/components/Input/README.md +38 -0
  37. package/dist/exports/design-system/components/Input/preview.html +19 -0
  38. package/dist/exports/design-system/components/Menu/README.md +58 -0
  39. package/dist/exports/design-system/components/Menu/preview.html +19 -0
  40. package/dist/exports/design-system/components/Menubar/README.md +105 -0
  41. package/dist/exports/design-system/components/Menubar/preview.html +19 -0
  42. package/dist/exports/design-system/components/Meter/README.md +43 -0
  43. package/dist/exports/design-system/components/Meter/preview.html +19 -0
  44. package/dist/exports/design-system/components/NavigationMenu/README.md +148 -0
  45. package/dist/exports/design-system/components/NavigationMenu/preview.html +19 -0
  46. package/dist/exports/design-system/components/NumberField/README.md +58 -0
  47. package/dist/exports/design-system/components/NumberField/preview.html +19 -0
  48. package/dist/exports/design-system/components/OTPField/README.md +39 -0
  49. package/dist/exports/design-system/components/OTPField/preview.html +19 -0
  50. package/dist/exports/design-system/components/Popover/README.md +56 -0
  51. package/dist/exports/design-system/components/Popover/preview.html +19 -0
  52. package/dist/exports/design-system/components/PreviewCard/README.md +74 -0
  53. package/dist/exports/design-system/components/PreviewCard/preview.html +19 -0
  54. package/dist/exports/design-system/components/Progress/README.md +58 -0
  55. package/dist/exports/design-system/components/Progress/preview.html +19 -0
  56. package/dist/exports/design-system/components/Radio/README.md +74 -0
  57. package/dist/exports/design-system/components/Radio/preview.html +19 -0
  58. package/dist/exports/design-system/components/ScrollArea/README.md +62 -0
  59. package/dist/exports/design-system/components/ScrollArea/preview.html +40 -0
  60. package/dist/exports/design-system/components/Select/README.md +84 -0
  61. package/dist/exports/design-system/components/Select/preview.html +19 -0
  62. package/dist/exports/design-system/components/Separator/README.md +37 -0
  63. package/dist/exports/design-system/components/Separator/preview.html +19 -0
  64. package/dist/exports/design-system/components/Slider/README.md +44 -0
  65. package/dist/exports/design-system/components/Slider/preview.html +19 -0
  66. package/dist/exports/design-system/components/Switch/README.md +34 -0
  67. package/dist/exports/design-system/components/Switch/preview.html +19 -0
  68. package/dist/exports/design-system/components/Tabs/README.md +56 -0
  69. package/dist/exports/design-system/components/Tabs/preview.html +19 -0
  70. package/dist/exports/design-system/components/Toast/README.md +78 -0
  71. package/dist/exports/design-system/components/Toast/preview.html +19 -0
  72. package/dist/exports/design-system/components/Toggle/README.md +32 -0
  73. package/dist/exports/design-system/components/Toggle/preview.html +19 -0
  74. package/dist/exports/design-system/components/ToggleGroup/README.md +40 -0
  75. package/dist/exports/design-system/components/ToggleGroup/preview.html +19 -0
  76. package/dist/exports/design-system/components/Toolbar/README.md +65 -0
  77. package/dist/exports/design-system/components/Toolbar/preview.html +19 -0
  78. package/dist/exports/design-system/components/Tooltip/README.md +46 -0
  79. package/dist/exports/design-system/components/Tooltip/preview.html +19 -0
  80. package/dist/exports/design-system/components/bundle.css +9881 -0
  81. package/dist/exports/design-system/components/bundle.js +5 -0
  82. package/dist/exports/design-system/components/index.d.ts +107 -0
  83. package/dist/exports/design-system/tokens.json +3063 -0
  84. package/dist/exports/shadcn.css +111 -0
  85. package/dist/exports/tailwind.css +1230 -36
  86. package/package.json +4 -2
package/dist/exports/design-system/components/AlertDialog/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Overlays" height=240 subtitle="Default / Warning" -->
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 c=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),C=(e,o)=>{for(var r in o)c(e,r,{get:o[r],enumerable:!0})},T=(e,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of y(o))!f.call(e,l)&&l!==r&&c(e,l,{get:()=>o[l],enumerable:!(s=A(o,l))||s.enumerable});return e};var B=(e,o,r)=>(r=e!=null?u(N(e)):{},T(o||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e));var D=v((b,p)=>{p.exports=window.Loomiere.Base});var m={};C(m,{Default:()=>w,Warning:()=>E,default:()=>g});var a=B(D(),1);var i=window.React;function t(e,o,r){let{children:s,...l}=o||{};return r!==void 0&&(l.key=r),s===void 0?i.createElement(e,l):Array.isArray(s)?i.createElement(e,l,...s):i.createElement(e,l,s)}var k=i.Fragment;var R={title:"Components/AlertDialog",component:a.AlertDialog.Root,parameters:{layout:"centered"},tags:["autodocs"]},g=R,w={render:()=>t(a.AlertDialog.Root,{children:[t(a.AlertDialog.Trigger,{className:"Button",children:"Delete Account"}),t(a.AlertDialog.Portal,{children:[t(a.AlertDialog.Backdrop,{className:"AlertDialogBackdrop"}),t(a.AlertDialog.Popup,{className:"AlertDialogPopup",children:[t(a.AlertDialog.Title,{className:"AlertDialogTitle",children:"Are you absolutely sure?"}),t(a.AlertDialog.Description,{className:"AlertDialogDescription",children:"This action cannot be undone. This will permanently delete your account and remove your data from our servers."}),t("div",{className:"AlertDialogActions",children:[t(a.AlertDialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),t(a.AlertDialog.Close,{className:"Button","data-color":"error",children:"Delete Account"})]})]})]})]})},E={render:()=>t(a.AlertDialog.Root,{children:[t(a.AlertDialog.Trigger,{className:"Button","data-variant":"outline",children:"Clear All Data"}),t(a.AlertDialog.Portal,{children:[t(a.AlertDialog.Backdrop,{className:"AlertDialogBackdrop"}),t(a.AlertDialog.Popup,{className:"AlertDialogPopup",children:[t(a.AlertDialog.Title,{className:"AlertDialogTitle",children:"Clear all data?"}),t(a.AlertDialog.Description,{className:"AlertDialogDescription",children:"This will remove all your saved preferences and settings. You'll need to set everything up again."}),t("div",{className:"AlertDialogActions",children:[t(a.AlertDialog.Close,{className:"Button","data-variant":"ghost",children:"Keep Data"}),t(a.AlertDialog.Close,{className:"Button",children:"Clear All"})]})]})]})]})};var n=window.React,d=g||{},P=["Default","Warning"];function x({id:e}){let o=m[e],r={...d.args||{},...o.args||{}};return(o.render||(l=>n.createElement(d.component,l)))(r,{args:r,id:e,name:e})}var h=P.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(x,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,h));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/exports/design-system/components/Autocomplete/README.md ADDED
@@ -0,0 +1,68 @@
1
+ # Autocomplete
2
+
3
+ The Base UI Autocomplete styled by the theme. No component tokens. The input is Input (Input.css), the clear button is an icon button, and the list is a popup of item rows with the shared group label, separator and empty message.
4
+
5
+ Use `Loomiere.Autocomplete` (`import { Autocomplete } from '@base-ui/react/autocomplete'` 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/autocomplete
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `AutocompleteRoot` | |
14
+ | `AutocompleteInput` | |
15
+ | `AutocompleteClear` | |
16
+ | `AutocompletePositioner` | |
17
+ | `AutocompletePopup` | `data-ending-style` |
18
+ | `AutocompleteList` | |
19
+ | `AutocompleteItem` | `data-highlighted`; `data-selected`; `data-disabled` |
20
+ | `AutocompleteGroupLabel` | |
21
+ | `AutocompleteSeparator` | |
22
+ | `AutocompleteEmpty` | |
23
+
24
+ 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.
25
+
26
+ ## Example
27
+
28
+ From the Autocomplete stories (`Default`):
29
+
30
+ ```tsx
31
+ export const Default: Story = {
32
+ render: () => (
33
+ <div className="AutocompleteRoot" style={{ width: '300px' }}>
34
+ <Autocomplete.Root>
35
+ <div style={{ position: 'relative' }}>
36
+ <Autocomplete.Input
37
+ className="AutocompleteInput"
38
+ placeholder="Search fruits..."
39
+ />
40
+ <Autocomplete.Clear className="AutocompleteClear">×</Autocomplete.Clear>
41
+ </div>
42
+ <Autocomplete.Portal>
43
+ <Autocomplete.Positioner className="AutocompletePositioner">
44
+ <Autocomplete.Popup className="AutocompletePopup">
45
+ <Autocomplete.List className="AutocompleteList">
46
+ {fruits.map((fruit) => (
47
+ <Autocomplete.Item
48
+ key={fruit}
49
+ value={fruit}
50
+ className="AutocompleteItem"
51
+ >
52
+ {fruit}
53
+ </Autocomplete.Item>
54
+ ))}
55
+ <Autocomplete.Empty className="AutocompleteEmpty">
56
+ No results found
57
+ </Autocomplete.Empty>
58
+ </Autocomplete.List>
59
+ </Autocomplete.Popup>
60
+ </Autocomplete.Positioner>
61
+ </Autocomplete.Portal>
62
+ </Autocomplete.Root>
63
+ </div>
64
+ ),
65
+ };
66
+ ```
67
+
68
+ The preview also shows `WithGroups`, `WithDisabledItems`.
package/dist/exports/design-system/components/Autocomplete/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Forms" height=360 subtitle="Default / WithGroups / WithDisabledItems" -->
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 r=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var E=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),b=(o,a)=>{for(var l in a)r(o,l,{get:a[l],enumerable:!0})},h=(o,a,l,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let m of N(a))!P.call(o,m)&&m!==l&&r(o,m,{get:()=>a[m],enumerable:!(s=y(a,m))||s.enumerable});return o};var f=(o,a,l)=>(l=o!=null?I(v(o)):{},h(a||!o||!o.__esModule?r(l,"default",{value:o,enumerable:!0}):l,o));var A=E((D,i)=>{i.exports=window.Loomiere.Base});var n={};b(n,{Default:()=>S,WithDisabledItems:()=>g,WithGroups:()=>R,default:()=>u});var t=f(A(),1);var p=window.React;function e(o,a,l){let{children:s,...m}=a||{};return l!==void 0&&(m.key=l),s===void 0?p.createElement(o,m):Array.isArray(s)?p.createElement(o,m,...s):p.createElement(o,m,s)}var F=p.Fragment;var C={title:"Components/Autocomplete",parameters:{layout:"centered"},tags:["autodocs"]},u=C,L=["Apple","Banana","Cherry","Date","Elderberry","Fig","Grape","Honeydew","Kiwi","Lemon","Mango","Orange","Papaya","Raspberry","Strawberry"],S={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Search fruits..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[L.map(o=>e(t.Autocomplete.Item,{value:o,className:"AutocompleteItem",children:o},o)),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})},R={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Search produce..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[e(t.Autocomplete.Group,{className:"AutocompleteGroup",children:[e(t.Autocomplete.GroupLabel,{className:"AutocompleteGroupLabel",children:"Fruits"}),e(t.Autocomplete.Item,{value:"Apple",className:"AutocompleteItem",children:"Apple"}),e(t.Autocomplete.Item,{value:"Banana",className:"AutocompleteItem",children:"Banana"}),e(t.Autocomplete.Item,{value:"Cherry",className:"AutocompleteItem",children:"Cherry"})]}),e(t.Autocomplete.Separator,{className:"AutocompleteSeparator"}),e(t.Autocomplete.Group,{className:"AutocompleteGroup",children:[e(t.Autocomplete.GroupLabel,{className:"AutocompleteGroupLabel",children:"Vegetables"}),e(t.Autocomplete.Item,{value:"Carrot",className:"AutocompleteItem",children:"Carrot"}),e(t.Autocomplete.Item,{value:"Broccoli",className:"AutocompleteItem",children:"Broccoli"}),e(t.Autocomplete.Item,{value:"Spinach",className:"AutocompleteItem",children:"Spinach"})]}),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})},g={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Some items are disabled..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[e(t.Autocomplete.Item,{value:"Apple",className:"AutocompleteItem",children:"Apple"}),e(t.Autocomplete.Item,{value:"Banana",className:"AutocompleteItem",disabled:!0,children:"Banana (Out of stock)"}),e(t.Autocomplete.Item,{value:"Cherry",className:"AutocompleteItem",children:"Cherry"}),e(t.Autocomplete.Item,{value:"Date",className:"AutocompleteItem",disabled:!0,children:"Date (Out of stock)"}),e(t.Autocomplete.Item,{value:"Elderberry",className:"AutocompleteItem",children:"Elderberry"}),e(t.Autocomplete.Item,{value:"Fig",className:"AutocompleteItem",children:"Fig"}),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})};var c=window.React,d=u||{},w=["Default","WithGroups","WithDisabledItems"];function G({id:o}){let a=n[o],l={...d.args||{},...a.args||{}};return(a.render||(m=>c.createElement(d.component,m)))(l,{args:l,id:o,name:o})}var x=w.map(o=>c.createElement("section",{key:o,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(G,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,x));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/exports/design-system/components/Avatar/README.md ADDED
@@ -0,0 +1,39 @@
1
+ # Avatar
2
+
3
+ The Base UI Avatar styled by the theme. A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials sit on the scope's solid fill in its on-solid text (the bold emphasis colors), so data-color re-colors them. Initials use the heading text style one tier per size. Only the sizes are avatar tokens.
4
+
5
+ Use `Loomiere.Avatar` (`import { Avatar } from '@base-ui/react/avatar'` 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/avatar
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `AvatarRoot` | `data-size`: `xs`, `sm`, `lg`, `xl` |
14
+ | `AvatarImage` | |
15
+ | `AvatarFallback` | |
16
+ | `AvatarGroup` | |
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 Avatar stories (`Default`):
23
+
24
+ ```tsx
25
+ export const Default: Story = {
26
+ render: () => (
27
+ <Avatar.Root className="AvatarRoot">
28
+ <Avatar.Image
29
+ className="AvatarImage"
30
+ src="https://i.pravatar.cc/150?img=1"
31
+ alt="User avatar"
32
+ />
33
+ <Avatar.Fallback className="AvatarFallback">JD</Avatar.Fallback>
34
+ </Avatar.Root>
35
+ ),
36
+ };
37
+ ```
38
+
39
+ The preview also shows `Fallback`, `Sizes`, `Group`.
package/dist/exports/design-system/components/Avatar/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Display" height=480 subtitle="Default / Fallback / Sizes / Group" -->
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 F=Object.create;var v=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var d=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),y=(e,r)=>{for(var l in r)v(e,l,{get:r[l],enumerable:!0})},I=(e,r,l,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of p(r))!N.call(e,s)&&s!==l&&v(e,s,{get:()=>r[s],enumerable:!(o=k(r,s))||o.enumerable});return e};var x=(e,r,l)=>(l=e!=null?F(g(e)):{},I(r||!e||!e.__esModule?v(l,"default",{value:e,enumerable:!0}):l,e));var R=d((j,i)=>{i.exports=window.Loomiere.Base});var n={};y(n,{Default:()=>f,Fallback:()=>S,FallbackOnly:()=>w,Group:()=>h,Sizes:()=>E,default:()=>A});var t=x(R(),1);var m=window.React;function a(e,r,l){let{children:o,...s}=r||{};return l!==void 0&&(s.key=l),o===void 0?m.createElement(e,s):Array.isArray(o)?m.createElement(e,s,...o):m.createElement(e,s,o)}var G=m.Fragment;var u={title:"Components/Avatar",component:t.Avatar.Root,parameters:{layout:"centered"},tags:["autodocs"]},A=u,f={render:()=>a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=1",alt:"User avatar"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"JD"})]})},S={render:()=>a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"invalid-url.jpg",alt:"User avatar"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"JD"})]})},E={render:()=>a("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[a(t.Avatar.Root,{className:"AvatarRoot","data-size":"xs",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=2",alt:"Extra Small"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"XS"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"sm",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=3",alt:"Small"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"SM"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"md",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=4",alt:"Medium"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"MD"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"lg",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=5",alt:"Large"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"LG"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"xl",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=6",alt:"Extra Large"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"XL"})]})]})},h={render:()=>a("div",{className:"AvatarGroup",children:[a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=7",alt:"User 1"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U1"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=8",alt:"User 2"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U2"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=9",alt:"User 3"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U3"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"+5"})})]})},w={render:()=>a("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"AB"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"CD"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"EF"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"GH"})})]})};var c=window.React,b=A||{},z=["Default","Fallback","Sizes","Group"];function D({id:e}){let r=n[e],l={...b.args||{},...r.args||{}};return(r.render||(s=>c.createElement(b.component,s)))(l,{args:l,id:e,name:e})}var U=z.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(D,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,U));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/exports/design-system/components/Button/README.md ADDED
@@ -0,0 +1,27 @@
1
+ # Button
2
+
3
+ The Base UI Button styled by the theme. Colors are the brand's emphasis levels, sizes are control.*, text is the trigger text style of each tier, and icons fill the button line (icon-size one tier up). Only the pill shape and disabled fade are Button's own (tokens/component/button.json).
4
+
5
+ Use `Loomiere.Button`, this package's wrapper: it puts the class names on for you (`import { Button } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Button`.
6
+
7
+ Base UI docs: https://base-ui.com/react/components/button
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `Button` | `data-size`: `xs`, `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 Button stories (`Default`):
20
+
21
+ ```tsx
22
+ export const Default: Story = {
23
+ render: () => <Button type="button">Button</Button>,
24
+ };
25
+ ```
26
+
27
+ The preview also shows `Variants`, `Sizes`, `WithIcon`.
package/dist/exports/design-system/components/Button/preview.html ADDED
@@ -0,0 +1,23 @@
1
+ <!-- @dsCard group="Actions" height=480 subtitle="Default / Variants / Sizes / WithIcon" -->
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 f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var w=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),h=(e,a)=>{for(var n in a)p(e,n,{get:a[n],enumerable:!0})},S=(e,a,n,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of g(a))!B.call(e,r)&&r!==n&&p(e,r,{get:()=>a[r],enumerable:!(s=f(a,r))||s.enumerable});return e};var E=(e,a,n)=>(n=e!=null?b(v(e)):{},S(a||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));var m=w((F,c)=>{c.exports=window.Loomiere});var y={};h(y,{Default:()=>D,Disabled:()=>k,Emphasis:()=>L,IconOnly:()=>W,Loading:()=>C,Sizes:()=>R,Variants:()=>I,WithIcon:()=>z,default:()=>u});var o=E(m(),1);var l=window.React;function t(e,a,n){let{children:s,...r}=a||{};return n!==void 0&&(r.key=n),s===void 0?l.createElement(e,r):Array.isArray(s)?l.createElement(e,r,...s):l.createElement(e,r,s)}var N=l.Fragment;var A={title:"Components/Lib/Button",component:o.Button,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Button content"}}},u=A,i=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",...e,children:t("path",{d:"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"})}),D={render:()=>t(o.Button,{type:"button",children:"Button"})},I={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:"Default"}),t(o.Button,{type:"button","data-variant":"outline",children:"Outline"}),t(o.Button,{type:"button","data-variant":"ghost",children:"Ghost"})]})},R={render:()=>t("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},children:[t(o.Button,{type:"button","data-size":"xs",children:"Extra Small"}),t(o.Button,{type:"button","data-size":"sm",children:"Small"}),t(o.Button,{type:"button","data-size":"md",children:"Medium"}),t(o.Button,{type:"button","data-size":"lg",children:"Large"})]})},z={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:[t(i,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"outline",children:[t(i,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"ghost",children:[t(i,{}),"Add Item"]})]})},W={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button","aria-label":"Add item",children:t(i,{})}),t(o.Button,{type:"button","data-variant":"outline","aria-label":"Add item",children:t(i,{})}),t(o.Button,{type:"button","data-variant":"ghost","aria-label":"Add item",children:t(i,{})})]})},k={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"outline",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"ghost",disabled:!0,children:"Disabled"})]})},C={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:[t("span",{style:{width:"16px",height:"16px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite"}}),"Loading..."]}),t("style",{children:`
16
+ @keyframes spin {
17
+ to { transform: rotate(360deg); }
18
+ }
19
+ `})]})},L={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)"},children:[void 0,"secondary","error"].map(e=>t("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["bold","standard","subtle","quiet"].map(a=>t(o.Button,{type:"button",emphasis:a,palette:e,children:e?`${a} ${e}`:a},a))},e??"default"))})};var d=window.React,x=u||{},M=["Default","Variants","Sizes","WithIcon"];function O({id:e}){let a=y[e],n={...x.args||{},...a.args||{}};return(a.render||(r=>d.createElement(x.component,r)))(n,{args:n,id:e,name:e})}var j=M.map(e=>d.createElement("section",{key:e,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(O,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,j));})();
20
+
21
+ </script>
22
+ </body>
23
+ </html>
package/dist/exports/design-system/components/Checkbox/README.md ADDED
@@ -0,0 +1,39 @@
1
+ # Checkbox
2
+
3
+ The Base UI Checkbox styled by the theme. Sizes follow the label: the box is the icon size one tier above the label's text tier (like a button's icon) and the check mark one tier below it.
4
+
5
+ Use `Loomiere.Checkbox` (`import { Checkbox } from '@base-ui/react/checkbox'` 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/checkbox
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `CheckboxLabel` | `data-size`: `sm`, `lg`; `data-disabled` |
14
+ | `CheckboxRoot` | `data-size`: `sm`, `lg`; `data-checked`; `data-indeterminate`; `data-disabled`; `data-variant`: `outline`, `circular-outline`, `circular` |
15
+ | `CheckboxIndicator` | |
16
+ | `CheckboxIcon` | |
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 Checkbox stories (`Default`):
23
+
24
+ ```tsx
25
+ export const Default: Story = {
26
+ render: () => (
27
+ <label className="CheckboxLabel">
28
+ <Checkbox.Root className="CheckboxRoot">
29
+ <Checkbox.Indicator className="CheckboxIndicator">
30
+ <CheckIcon className="CheckboxIcon" />
31
+ </Checkbox.Indicator>
32
+ </Checkbox.Root>
33
+ Accept terms and conditions
34
+ </label>
35
+ ),
36
+ };
37
+ ```
38
+
39
+ The preview also shows `Checked`, `Indeterminate`, `Disabled`.
package/dist/exports/design-system/components/Checkbox/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Forms" height=480 subtitle="Default / Checked / Indeterminate / 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 k=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var N=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var c in t)i(e,c,{get:t[c],enumerable:!0})},f=(e,t,c,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of I(t))!u.call(e,r)&&r!==c&&i(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var g=(e,t,c)=>(c=e!=null?k(R(e)):{},f(t||!e||!e.__esModule?i(c,"default",{value:e,enumerable:!0}):c,e));var x=N((O,h)=>{h.exports=window.Loomiere.Base});var b={};y(b,{Checked:()=>v,Default:()=>S,Disabled:()=>D,Indeterminate:()=>E,WithoutLabel:()=>M,default:()=>m});var a=g(x(),1);var d=window.React;function o(e,t,c){let{children:s,...r}=t||{};return c!==void 0&&(r.key=c),s===void 0?d.createElement(e,r):Array.isArray(s)?d.createElement(e,r,...s):d.createElement(e,r,s)}var P=d.Fragment;var w={title:"Components/Checkbox",component:a.Checkbox.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=w;function l(e){return o("svg",{fill:"currentcolor",width:"10",height:"10",viewBox:"0 0 10 10",...e,children:o("path",{d:"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"})})}function L(e){return o("svg",{fill:"currentcolor",width:"10",height:"10",viewBox:"0 0 10 10",...e,children:o("path",{d:"M1 5h8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}var S={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Accept terms and conditions"]})},v={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",defaultChecked:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"I agree to the terms"]})},E={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",indeterminate:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(L,{className:"CheckboxIcon"})})}),"Select all items"]})},D={render:()=>o("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",disabled:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Disabled unchecked"]}),o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",disabled:!0,defaultChecked:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Disabled checked"]})]})},M={render:()=>o(a.Checkbox.Root,{className:"CheckboxRoot",children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})})};var n=window.React,C=m||{},j=["Default","Checked","Indeterminate","Disabled"];function A({id:e}){let t=b[e],c={...C.args||{},...t.args||{}};return(t.render||(r=>n.createElement(C.component,r)))(c,{args:c,id:e,name:e})}var B=j.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(A,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,B));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/exports/design-system/components/CheckboxGroup/README.md ADDED
@@ -0,0 +1,56 @@
1
+ # CheckboxGroup
2
+
3
+ The Base UI CheckboxGroup styled by the theme.
4
+
5
+ Use `Loomiere.CheckboxGroup` (`import { CheckboxGroup } from '@base-ui/react/checkbox-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/checkbox-group
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `CheckboxGroup` | `data-disabled` |
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 CheckboxGroup stories (`Default`):
20
+
21
+ ```tsx
22
+ export const Default: Story = {
23
+ render: () => (
24
+ <CheckboxGroup className="CheckboxGroup" defaultValue={['design']}>
25
+ <label className="CheckboxLabel">
26
+ <Checkbox.Root className="CheckboxRoot" name="interests" value="design">
27
+ <Checkbox.Indicator className="CheckboxIndicator">
28
+ <CheckIcon className="CheckboxIcon" />
29
+ </Checkbox.Indicator>
30
+ </Checkbox.Root>
31
+ Design
32
+ </label>
33
+
34
+ <label className="CheckboxLabel">
35
+ <Checkbox.Root className="CheckboxRoot" name="interests" value="development">
36
+ <Checkbox.Indicator className="CheckboxIndicator">
37
+ <CheckIcon className="CheckboxIcon" />
38
+ </Checkbox.Indicator>
39
+ </Checkbox.Root>
40
+ Development
41
+ </label>
42
+
43
+ <label className="CheckboxLabel">
44
+ <Checkbox.Root className="CheckboxRoot" name="interests" value="marketing">
45
+ <Checkbox.Indicator className="CheckboxIndicator">
46
+ <CheckIcon className="CheckboxIcon" />
47
+ </Checkbox.Indicator>
48
+ </Checkbox.Root>
49
+ Marketing
50
+ </label>
51
+ </CheckboxGroup>
52
+ ),
53
+ };
54
+ ```
55
+
56
+ The preview also shows `WithLabel`, `Disabled`, `WithDefaultValues`.
package/dist/exports/design-system/components/CheckboxGroup/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Forms" height=480 subtitle="Default / WithLabel / Disabled / WithDefaultValues" -->
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 R=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var k=(o,c)=>()=>(c||o((c={exports:{}}).exports,c),c.exports),L=(o,c)=>{for(var s in c)i(o,s,{get:c[s],enumerable:!0})},D=(o,c,s,n)=>{if(c&&typeof c=="object"||typeof c=="function")for(let l of v(c))!y.call(o,l)&&l!==s&&i(o,l,{get:()=>c[l],enumerable:!(n=g(c,l))||n.enumerable});return o};var C=(o,c,s)=>(s=o!=null?R(f(o)):{},D(c||!o||!o.__esModule?i(s,"default",{value:o,enumerable:!0}):s,o));var N=k((A,d)=>{d.exports=window.Loomiere.Base});var p=k((F,I)=>{I.exports=window.Loomiere.Base});var h={};L(h,{Default:()=>G,Disabled:()=>E,HorizontalLayout:()=>W,WithDefaultValues:()=>M,WithLabel:()=>S,default:()=>x});var a=C(N(),1),r=C(p(),1);var m=window.React;function e(o,c,s){let{children:n,...l}=c||{};return s!==void 0&&(l.key=s),n===void 0?m.createElement(o,l):Array.isArray(n)?m.createElement(o,l,...n):m.createElement(o,l,n)}var O=m.Fragment;var w={title:"Components/CheckboxGroup",component:r.CheckboxGroup,parameters:{layout:"centered"},tags:["autodocs"]},x=w;function t(o){return e("svg",{fill:"currentcolor",width:"14",height:"14",viewBox:"0 0 10 10",...o,children:e("path",{d:"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"})})}var G={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",defaultValue:["design"],children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},S={render:()=>{let o=`checkbox-group-${Math.random()}`;return e("div",{children:[e("div",{id:o,style:{fontSize:"var(--sl-font-size-lg)",fontWeight:"var(--sl-font-weight-semibold)",marginBottom:"var(--sl-space-3)",color:"var(--sl-text-primary)"},children:"Select your interests"}),e(r.CheckboxGroup,{className:"CheckboxGroup","aria-labelledby":o,children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})]})}},E={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",disabled:!0,children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},M={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",defaultValue:["design","development"],children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},W={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",style:{flexDirection:"row",flexWrap:"wrap",gap:"var(--sl-space-4)"},children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})};var b=window.React,u=x||{},B=["Default","WithLabel","Disabled","WithDefaultValues"];function V({id:o}){let c=h[o],s={...u.args||{},...c.args||{}};return(c.render||(l=>b.createElement(u.component,l)))(s,{args:s,id:o,name:o})}var j=B.map(o=>b.createElement("section",{key:o,className:"ds-story"},b.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),b.createElement("div",{className:"ds-story-body"},b.createElement(V,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(b.createElement(b.Fragment,null,j));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/exports/design-system/components/Collapsible/README.md ADDED
@@ -0,0 +1,48 @@
1
+ # Collapsible
2
+
3
+ The Base UI Collapsible styled by the theme. No component tokens. Hover, press, chevron and motion are the disclosure concept (tokens/semantic/disclosure.json). The trigger is base-subtitle text with a base-size chevron; the panel lines up under the trigger's text and sits on the overlay surface.
4
+
5
+ Use `Loomiere.Collapsible` (`import { Collapsible } from '@base-ui/react/collapsible'` 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/collapsible
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `Collapsible` | |
14
+ | `CollapsibleTrigger` | `data-panel-open` |
15
+ | `CollapsibleIcon` | |
16
+ | `CollapsiblePanel` | `data-starting-style`; `data-ending-style` |
17
+ | `CollapsibleContent` | |
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 Collapsible stories (`Default`):
24
+
25
+ ```tsx
26
+ export const Default: Story = {
27
+ render: () => (
28
+ <Collapsible.Root className="Collapsible">
29
+ <Collapsible.Trigger className="CollapsibleTrigger">
30
+ <span className="material-symbols-outlined CollapsibleIcon">
31
+ chevron_right
32
+ </span>
33
+ Show more information
34
+ </Collapsible.Trigger>
35
+ <Collapsible.Panel className="CollapsiblePanel">
36
+ <div className="CollapsibleContent">
37
+ <p>
38
+ This is additional content that can be collapsed and expanded.
39
+ It contains important information that users can choose to view.
40
+ </p>
41
+ </div>
42
+ </Collapsible.Panel>
43
+ </Collapsible.Root>
44
+ ),
45
+ };
46
+ ```
47
+
48
+ The preview also shows `DefaultOpen`, `FAQ`, `RecoveryKeys`.
package/dist/exports/design-system/components/Collapsible/preview.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Disclosure" height=480 subtitle="Default / DefaultOpen / FAQ / RecoveryKeys" -->
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 p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var h=(l,a)=>()=>(a||l((a={exports:{}}).exports,a),a.exports),f=(l,a)=>{for(var o in a)p(l,o,{get:a[o],enumerable:!0})},R=(l,a,o,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of u(a))!N.call(l,t)&&t!==o&&p(l,t,{get:()=>a[t],enumerable:!(n=y(a,t))||n.enumerable});return l};var T=(l,a,o)=>(o=l!=null?g(v(l)):{},R(a||!l||!l.__esModule?p(o,"default",{value:l,enumerable:!0}):o,l));var d=h((B,b)=>{b.exports=window.Loomiere.Base});var m={};f(m,{Default:()=>w,DefaultOpen:()=>x,FAQ:()=>I,RecoveryKeys:()=>S,default:()=>c});var s=T(d(),1);var r=window.React;function e(l,a,o){let{children:n,...t}=a||{};return o!==void 0&&(t.key=o),n===void 0?r.createElement(l,t):Array.isArray(n)?r.createElement(l,t,...n):r.createElement(l,t,n)}var O=r.Fragment;var P={title:"Components/Collapsible",component:s.Collapsible.Root,parameters:{layout:"centered"},tags:["autodocs"]},c=P,w={render:()=>e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Show more information"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"This is additional content that can be collapsed and expanded. It contains important information that users can choose to view."})})})]})},x={render:()=>e(s.Collapsible.Root,{className:"Collapsible",defaultOpen:!0,children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Hide details"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"This collapsible starts in an open state by default. Click the trigger to collapse it."})})})]})},I={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"What is Base UI?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:`Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.`})})})]}),e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"How do I install it?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:[e("p",{children:"You can install Base UI using npm, yarn, or pnpm:"}),e("code",{children:"npm install @base-ui/react"})]})})]}),e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Is it accessible?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"Yes! Base UI components follow WAI-ARIA authoring practices and are fully accessible out of the box with proper keyboard navigation and screen reader support."})})})]})]})},S={render:()=>e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Recovery keys"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:[e("div",{children:"alien-bean-pasta"}),e("div",{children:"wild-irish-burrito"}),e("div",{children:"horse-battery-staple"})]})})]})};var i=window.React,C=c||{},E=["Default","DefaultOpen","FAQ","RecoveryKeys"];function A({id:l}){let a=m[l],o={...C.args||{},...a.args||{}};return(a.render||(t=>i.createElement(C.component,t)))(o,{args:o,id:l,name:l})}var D=E.map(l=>i.createElement("section",{key:l,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},l.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(A,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
16
+
17
+ </script>
18
+ </body>
19
+ </html>
package/dist/exports/design-system/components/Combobox/README.md ADDED
@@ -0,0 +1,105 @@
1
+ # Combobox
2
+
3
+ The Base UI Combobox styled by the theme. No component tokens. The input is Input (Input.css); the chips box is a field; the clear and open buttons are icon buttons; the list is a popup of item rows with the shared group label, separator and empty message. Rules that adjust Input are scoped under a Combobox parent so they win over Input.css, which loads later.
4
+
5
+ Use `Loomiere.Combobox` (`import { Combobox } from '@base-ui/react/combobox'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
6
+
7
+ Base UI docs: https://base-ui.com/react/components/combobox
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `ComboboxRoot` | |
14
+ | `ComboboxContainer` | |
15
+ | `ComboboxLabel` | |
16
+ | `ComboboxInputWrapper` | |
17
+ | `ComboboxInput` | |
18
+ | `ComboboxChips` | |
19
+ | `ComboboxChip` | `data-highlighted` |
20
+ | `ComboboxChipRemove` | |
21
+ | `ComboboxChipRemoveIcon` | |
22
+ | `ComboboxActionButtons` | |
23
+ | `ComboboxClear` | |
24
+ | `ComboboxTrigger` | |
25
+ | `ComboboxClearIcon` | |
26
+ | `ComboboxTriggerIcon` | |
27
+ | `ComboboxPositioner` | |
28
+ | `ComboboxPopup` | |
29
+ | `ComboboxList` | |
30
+ | `ComboboxItem` | `data-highlighted`; `data-selected`; `data-disabled` |
31
+ | `ComboboxItemIndicator` | |
32
+ | `ComboboxItemIndicatorIcon` | |
33
+ | `ComboboxItemText` | |
34
+ | `ComboboxGroupLabel` | |
35
+ | `ComboboxSeparator` | |
36
+ | `ComboboxEmpty` | |
37
+ | `ComboboxStatus` | |
38
+ | `ComboboxSelectTrigger` | |
39
+ | `ComboboxIcon` | |
40
+ | `ComboboxInputContainer` | |
41
+ | `ComboboxSpinner` | |
42
+ | `ComboboxItemTitle` | |
43
+ | `ComboboxItemSubtitle` | |
44
+ | `ComboboxItemUsername` | |
45
+ | `ComboboxItemEmail` | |
46
+
47
+ 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.
48
+
49
+ ## Example
50
+
51
+ From the Combobox stories (`Default`):
52
+
53
+ ```tsx
54
+ export const Default: Story = {
55
+ render: () => {
56
+ const id = React.useId();
57
+ return (
58
+ <div className="ComboboxRoot" style={{ width: '400px' }}>
59
+ <Combobox.Root items={fruits}>
60
+ <label htmlFor={id} className="ComboboxLabel">
61
+ Choose a fruit
62
+ <div className="ComboboxInputWrapper">
63
+ <Combobox.Input placeholder="e.g. Apple" id={id} className="ComboboxInput" />
64
+ <div className="ComboboxActionButtons">
65
+ <Combobox.Clear className="ComboboxClear" aria-label="Clear selection">
66
+ <span className="material-symbols-outlined ComboboxClearIcon">
67
+ close
68
+ </span>
69
+ </Combobox.Clear>
70
+ <Combobox.Trigger className="ComboboxTrigger" aria-label="Open popup">
71
+ <span className="material-symbols-outlined ComboboxTriggerIcon">
72
+ expand_more
73
+ </span>
74
+ </Combobox.Trigger>
75
+ </div>
76
+ </div>
77
+ </label>
78
+
79
+ <Combobox.Portal>
80
+ <Combobox.Positioner className="ComboboxPositioner" sideOffset={4}>
81
+ <Combobox.Popup className="ComboboxPopup">
82
+ <Combobox.Empty className="ComboboxEmpty">No fruits found.</Combobox.Empty>
83
+ <Combobox.List className="ComboboxList">
84
+ {(item: string) => (
85
+ <Combobox.Item key={item} value={item} className="ComboboxItem">
86
+ <Combobox.ItemIndicator className="ComboboxItemIndicator">
87
+ <span className="material-symbols-outlined ComboboxItemIndicatorIcon">
88
+ check
89
+ </span>
90
+ </Combobox.ItemIndicator>
91
+ <div className="ComboboxItemText">{item}</div>
92
+ </Combobox.Item>
93
+ )}
94
+ </Combobox.List>
95
+ </Combobox.Popup>
96
+ </Combobox.Positioner>
97
+ </Combobox.Portal>
98
+ </Combobox.Root>
99
+ </div>
100
+ );
101
+ },
102
+ };
103
+ ```
104
+
105
+ The preview also shows `MultipleSelect`, `Grouped`, `Creatable`.