@scattered-light/loomiere-mojave 0.5.3 → 0.7.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 (102) hide show
  1. package/dist/exports/AGENTS.md +24 -8
  2. package/dist/exports/catalog.json +21 -0
  3. package/dist/exports/chakra.js +333 -0
  4. package/dist/exports/design-system/README.md +23 -7
  5. package/dist/exports/design-system/components/Accordion/README.md +20 -20
  6. package/dist/exports/design-system/components/Accordion/preview.html +1 -1
  7. package/dist/exports/design-system/components/AlertDialog/README.md +8 -8
  8. package/dist/exports/design-system/components/AlertDialog/preview.html +1 -1
  9. package/dist/exports/design-system/components/Autocomplete/README.md +9 -9
  10. package/dist/exports/design-system/components/Autocomplete/preview.html +1 -1
  11. package/dist/exports/design-system/components/Avatar/README.md +3 -4
  12. package/dist/exports/design-system/components/Avatar/preview.html +1 -1
  13. package/dist/exports/design-system/components/Badge/README.md +35 -0
  14. package/dist/exports/design-system/components/Badge/preview.html +19 -0
  15. package/dist/exports/design-system/components/Checkbox/README.md +5 -5
  16. package/dist/exports/design-system/components/Checkbox/preview.html +1 -1
  17. package/dist/exports/design-system/components/CheckboxGroup/README.md +14 -14
  18. package/dist/exports/design-system/components/CheckboxGroup/preview.html +1 -1
  19. package/dist/exports/design-system/components/Collapsible/README.md +6 -6
  20. package/dist/exports/design-system/components/Collapsible/preview.html +1 -1
  21. package/dist/exports/design-system/components/Collection/README.md +14 -0
  22. package/dist/exports/design-system/components/CollectionPagination/README.md +15 -0
  23. package/dist/exports/design-system/components/CollectionToolbar/README.md +24 -0
  24. package/dist/exports/design-system/components/Combobox/README.md +11 -11
  25. package/dist/exports/design-system/components/Combobox/preview.html +1 -1
  26. package/dist/exports/design-system/components/ContextMenu/README.md +9 -9
  27. package/dist/exports/design-system/components/ContextMenu/preview.html +1 -1
  28. package/dist/exports/design-system/components/DataList/README.md +39 -0
  29. package/dist/exports/design-system/components/DataList/preview.html +475 -0
  30. package/dist/exports/design-system/components/DataTable/README.md +41 -0
  31. package/dist/exports/design-system/components/DataTable/preview.html +475 -0
  32. package/dist/exports/design-system/components/DatePicker/README.md +55 -0
  33. package/dist/exports/design-system/components/DatePicker/preview.html +475 -0
  34. package/dist/exports/design-system/components/Dialog/README.md +6 -6
  35. package/dist/exports/design-system/components/Dialog/preview.html +1 -1
  36. package/dist/exports/design-system/components/Drawer/README.md +1 -1
  37. package/dist/exports/design-system/components/Drawer/preview.html +1 -1
  38. package/dist/exports/design-system/components/EditableList/README.md +33 -0
  39. package/dist/exports/design-system/components/EditableList/preview.html +475 -0
  40. package/dist/exports/design-system/components/EmptyState/README.md +60 -0
  41. package/dist/exports/design-system/components/EmptyState/preview.html +475 -0
  42. package/dist/exports/design-system/components/ListDetail/README.md +43 -0
  43. package/dist/exports/design-system/components/ListDetail/preview.html +475 -0
  44. package/dist/exports/design-system/components/Menu/README.md +11 -11
  45. package/dist/exports/design-system/components/Menu/preview.html +1 -1
  46. package/dist/exports/design-system/components/Menubar/README.md +32 -32
  47. package/dist/exports/design-system/components/Menubar/preview.html +1 -1
  48. package/dist/exports/design-system/components/Meter/README.md +9 -8
  49. package/dist/exports/design-system/components/Meter/preview.html +1 -1
  50. package/dist/exports/design-system/components/MoneyField/README.md +52 -0
  51. package/dist/exports/design-system/components/MoneyField/preview.html +475 -0
  52. package/dist/exports/design-system/components/NumberField/README.md +10 -10
  53. package/dist/exports/design-system/components/NumberField/preview.html +1 -1
  54. package/dist/exports/design-system/components/OTPField/README.md +5 -5
  55. package/dist/exports/design-system/components/OTPField/preview.html +1 -1
  56. package/dist/exports/design-system/components/Popover/README.md +7 -7
  57. package/dist/exports/design-system/components/Popover/preview.html +1 -1
  58. package/dist/exports/design-system/components/PreviewCard/README.md +9 -11
  59. package/dist/exports/design-system/components/PreviewCard/preview.html +1 -1
  60. package/dist/exports/design-system/components/Progress/README.md +8 -8
  61. package/dist/exports/design-system/components/Progress/preview.html +1 -1
  62. package/dist/exports/design-system/components/Radio/README.md +16 -23
  63. package/dist/exports/design-system/components/Radio/preview.html +1 -1
  64. package/dist/exports/design-system/components/ScrollArea/README.md +6 -6
  65. package/dist/exports/design-system/components/ScrollArea/preview.html +2 -2
  66. package/dist/exports/design-system/components/Select/README.md +13 -12
  67. package/dist/exports/design-system/components/Select/preview.html +1 -1
  68. package/dist/exports/design-system/components/Separator/README.md +2 -2
  69. package/dist/exports/design-system/components/Separator/preview.html +1 -1
  70. package/dist/exports/design-system/components/Slider/README.md +6 -6
  71. package/dist/exports/design-system/components/Slider/preview.html +1 -1
  72. package/dist/exports/design-system/components/Splitter/README.md +42 -0
  73. package/dist/exports/design-system/components/Splitter/preview.html +475 -0
  74. package/dist/exports/design-system/components/Switch/README.md +3 -3
  75. package/dist/exports/design-system/components/Switch/preview.html +1 -1
  76. package/dist/exports/design-system/components/Table/README.md +2 -1
  77. package/dist/exports/design-system/components/Table/preview.html +1 -1
  78. package/dist/exports/design-system/components/Tabs/README.md +9 -9
  79. package/dist/exports/design-system/components/Tabs/preview.html +1 -1
  80. package/dist/exports/design-system/components/Toast/README.md +7 -7
  81. package/dist/exports/design-system/components/Toast/preview.html +1 -1
  82. package/dist/exports/design-system/components/Toggle/README.md +2 -2
  83. package/dist/exports/design-system/components/Toggle/preview.html +1 -1
  84. package/dist/exports/design-system/components/ToggleGroup/README.md +5 -5
  85. package/dist/exports/design-system/components/ToggleGroup/preview.html +1 -1
  86. package/dist/exports/design-system/components/Toolbar/README.md +11 -11
  87. package/dist/exports/design-system/components/Toolbar/preview.html +1 -1
  88. package/dist/exports/design-system/components/Tooltip/README.md +4 -4
  89. package/dist/exports/design-system/components/Tooltip/preview.html +1 -1
  90. package/dist/exports/design-system/components/bundle.css +2394 -193
  91. package/dist/exports/design-system/components/bundle.js +7 -5
  92. package/dist/exports/design-system/components/index.d.ts +627 -29
  93. package/dist/exports/design-system/tokens.json +15 -0
  94. package/dist/exports/figma.json +1 -1
  95. package/dist/exports/mui.js +727 -0
  96. package/dist/exports/tailwind.css +36 -0
  97. package/dist/exports/tokens.dtcg.json +316 -2
  98. package/dist/tokens.css +111 -4
  99. package/dist/tokens.d.ts +93 -0
  100. package/dist/tokens.js +94 -1
  101. package/dist/tokens.json +572 -2
  102. package/package.json +2 -2
package/dist/exports/design-system/components/NumberField/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI NumberField styled by the theme. No component tokens. The input is Input (Input.css) and the label, description and error are Field's parts (Field.css). Only the stepper buttons are drawn here: two stacked halves of the field's height, as wide as the smallest control.
4
4
 
5
- Use `Loomiere.NumberField` (`import { NumberField } from '@base-ui/react/number-field'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.NumberField`, this package's wrapper: it puts the class names on for you (`import { NumberField } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.NumberField`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/number-field
8
8
 
@@ -29,22 +29,22 @@ export const Default: Story = {
29
29
  const id = React.useId();
30
30
  return (
31
31
  <div style={{ width: '200px' }}>
32
- <NumberField.Root id={id} defaultValue={100} className="NumberFieldRoot">
33
- <NumberField.ScrubArea className="NumberFieldScrubArea">
34
- <label htmlFor={id} className="NumberFieldLabel">
32
+ <NumberField.Root id={id} defaultValue={100}>
33
+ <NumberField.ScrubArea>
34
+ <NumberField.Label htmlFor={id}>
35
35
  Amount
36
- </label>
37
- <NumberField.ScrubAreaCursor className="NumberFieldScrubAreaCursor">
36
+ </NumberField.Label>
37
+ <NumberField.ScrubAreaCursor>
38
38
  <CursorGrowIcon />
39
39
  </NumberField.ScrubAreaCursor>
40
40
  </NumberField.ScrubArea>
41
41
 
42
- <NumberField.Group className="NumberFieldGroup">
43
- <NumberField.Decrement className="NumberFieldDecrement">
42
+ <NumberField.Group>
43
+ <NumberField.Decrement>
44
44
  <MinusIcon />
45
45
  </NumberField.Decrement>
46
- <NumberField.Input className="NumberFieldInput" />
47
- <NumberField.Increment className="NumberFieldIncrement">
46
+ <NumberField.Input />
47
+ <NumberField.Increment>
48
48
  <PlusIcon />
49
49
  </NumberField.Increment>
50
50
  </NumberField.Group>
package/dist/exports/design-system/components/NumberField/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var y=Object.create;var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var p=(r,l)=>()=>(l||r((l={exports:{}}).exports,l),l.exports),g=(r,l)=>{for(var a in l)b(r,a,{get:l[a],enumerable:!0})},C=(r,l,a,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let m of x(l))!D.call(r,m)&&m!==a&&b(r,m,{get:()=>l[m],enumerable:!(s=v(l,m))||s.enumerable});return r};var S=(r,l,a)=>(a=r!=null?y(f(r)):{},C(l||!r||!r.__esModule?b(a,"default",{value:r,enumerable:!0}):a,r));var A=p(($,I)=>{I.exports=window.React});var h=p((z,R)=>{R.exports=window.Loomiere.Base});var F={};g(F,{Default:()=>L,Disabled:()=>W,LargeStep:()=>O,ReadOnly:()=>B,WithDecimals:()=>E,WithMinMax:()=>V,WithStep:()=>M,WithoutScrubArea:()=>k,default:()=>N});var u=S(A(),1),t=S(h(),1);var i=window.React;function e(r,l,a){let{children:s,...m}=l||{};return a!==void 0&&(m.key=a),s===void 0?i.createElement(r,m):Array.isArray(s)?i.createElement(r,m,...s):i.createElement(r,m,s)}var q=i.Fragment;var G={title:"Components/NumberField",component:t.NumberField.Root,parameters:{layout:"centered"},tags:["autodocs"]},N=G;function n(r){return e("svg",{width:"26",height:"14",viewBox:"0 0 24 14",fill:"black",stroke:"white",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z"})})}function o(r){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M0 5H5M10 5H5M5 5V0M5 5V10"})})}function c(r){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M0 5H10"})})}var L={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:100,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Amount"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},V={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:5,min:0,max:10,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Rating (0-10)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},M={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:5,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Amount (increments of 5)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},E={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:.1,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Price"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},W={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:5,disabled:!0,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Disabled field"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},k={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:50,className:"NumberFieldRoot",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Volume"}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},B={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:100,readOnly:!0,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Read-only value"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},O={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:100,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Budget (hundreds)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}};var d=window.React,w=N||{},P=["Default","WithMinMax","WithStep","WithDecimals"];function j({id:r}){let l=F[r],a={...w.args||{},...l.args||{}};return(l.render||(m=>d.createElement(w.component,m)))(a,{args:a,id:r,name:r})}var H=P.map(r=>d.createElement("section",{key:r,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(j,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,H));})();
15
+ (()=>{var A=Object.create;var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var N=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),L=(t,o)=>{for(var u in o)b(t,u,{get:o[u],enumerable:!0})},D=(t,o,u,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of x(o))!g.call(t,n)&&n!==u&&b(t,n,{get:()=>o[n],enumerable:!(i=v(o,n))||i.enumerable});return t};var S=(t,o,u)=>(u=t!=null?A(f(t)):{},D(o||!t||!t.__esModule?b(u,"default",{value:t,enumerable:!0}):u,t));var R=N(($,h)=>{h.exports=window.React});var y=N((z,w)=>{w.exports=window.Loomiere});var F={};L(F,{Default:()=>G,Disabled:()=>W,LargeStep:()=>O,ReadOnly:()=>B,WithDecimals:()=>E,WithMinMax:()=>V,WithStep:()=>M,WithoutScrubArea:()=>k,default:()=>p});var d=S(R(),1),r=S(y(),1);var s=window.React;function e(t,o,u){let{children:i,...n}=o||{};return u!==void 0&&(n.key=u),i===void 0?s.createElement(t,n):Array.isArray(i)?s.createElement(t,n,...i):s.createElement(t,n,i)}var q=s.Fragment;var C={title:"Components/Lib/NumberField",component:r.NumberField.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},p=C;function a(t){return e("svg",{width:"26",height:"14",viewBox:"0 0 24 14",fill:"black",stroke:"white",xmlns:"http://www.w3.org/2000/svg",...t,children:e("path",{d:"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z"})})}function l(t){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...t,children:e("path",{d:"M0 5H5M10 5H5M5 5V0M5 5V10"})})}function m(t){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...t,children:e("path",{d:"M0 5H10"})})}var G={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:100,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Amount"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},V={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:5,min:0,max:10,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Rating (0-10)"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},M={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:0,step:5,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Amount (increments of 5)"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},E={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:0,step:.1,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Price"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},W={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:5,disabled:!0,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Disabled field"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},k={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:50,children:[e(r.NumberField.Label,{htmlFor:t,children:"Volume"}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},B={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:100,readOnly:!0,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Read-only value"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},O={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:0,step:100,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Budget (hundreds)"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}};var c=window.React,I=p||{},P=["Default","WithMinMax","WithStep","WithDecimals"];function j({id:t}){let o=F[t],u={...I.args||{},...o.args||{}};return(o.render||(n=>c.createElement(I.component,n)))(u,{args:u,id:t,name:t})}var H=P.map(t=>c.createElement("section",{key:t,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(j,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,H));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/OTPField/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI OTPField styled by the theme. One-time code entry: a row of single-character inputs. Each slot is the same control as Input (Input.css styles .OTPFieldInput with the field pattern, hover, focus, disabled and error), cut into a square as tall as a control of the same size. data-size on the root picks the control size and the text tier of the same name, as on Input. No component tokens.
4
4
 
5
- Use `Loomiere.OTPField` (`import { OTPField } from '@base-ui/react/otpfield'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.OTPField`, this package's wrapper: it puts the class names on for you (`import { OTPField } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.OTPField`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/otpfield
8
8
 
@@ -23,12 +23,12 @@ From the OTPField stories (`Default`):
23
23
  ```tsx
24
24
  export const Default: Story = {
25
25
  render: () => (
26
- <Field.Root className="FieldRoot">
27
- <Field.Label className="FieldLabel">Verification code</Field.Label>
28
- <OTPField.Root length={6} className="OTPFieldRoot">
26
+ <Field.Root>
27
+ <Field.Label>Verification code</Field.Label>
28
+ <OTPField.Root length={6}>
29
29
  <Slots length={6} />
30
30
  </OTPField.Root>
31
- <Field.Description className="FieldDescription">
31
+ <Field.Description>
32
32
  Enter the 6-digit code we sent to your phone.
33
33
  </Field.Description>
34
34
  </Field.Root>
package/dist/exports/design-system/components/OTPField/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var P=Object.create;var m=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var F=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),w=(t,o)=>{for(var l in o)m(t,l,{get:o[l],enumerable:!0})},D=(t,o,l,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of S(o))!E.call(t,s)&&s!==l&&m(t,s,{get:()=>o[s],enumerable:!(r=T(o,s))||r.enumerable});return t};var R=(t,o,l)=>(l=t!=null?P(x(t)):{},D(o||!t||!t.__esModule?m(l,"default",{value:t,enumerable:!0}):l,t));var h=F((H,g)=>{g.exports=window.React});var y=F((_,f)=>{f.exports=window.Loomiere.Base});var N=F((Z,b)=>{b.exports=window.Loomiere.Base});var u={};w(u,{Controlled:()=>j,Default:()=>v,Disabled:()=>$,Grouped:()=>C,Invalid:()=>A,PlaceholderHints:()=>k,Sizes:()=>I,default:()=>p});var L=R(h(),1),a=R(y(),1),n=R(N(),1);var c=window.React;function e(t,o,l){let{children:r,...s}=o||{};return l!==void 0&&(s.key=l),r===void 0?c.createElement(t,s):Array.isArray(r)?c.createElement(t,s,...r):c.createElement(t,s,r)}var q=c.Fragment;var V={title:"Components/OTPField",component:n.OTPField.Root,args:{length:6},parameters:{layout:"centered"},tags:["autodocs"]},p=V;function i({length:t,from:o=0}){return Array.from({length:t},(l,r)=>e(n.OTPField.Input,{className:"OTPFieldInput","aria-label":o+r===0?void 0:`Character ${o+r+1}`},o+r))}var v={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",children:e(i,{length:6})}),e(a.Field.Description,{className:"FieldDescription",children:"Enter the 6-digit code we sent to your phone."})]})},C={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Backup code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",children:[e(i,{length:3}),e(n.OTPField.Separator,{className:"OTPFieldSeparator"}),e(i,{length:3,from:3})]})]})},k={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:4,className:"OTPFieldRoot",children:Array.from({length:4},(t,o)=>e(n.OTPField.Input,{className:"OTPFieldInput",placeholder:"\u2022","aria-label":o===0?void 0:`Character ${o+1}`},o))})]})},I={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"var(--sl-space-6)"},children:["sm","md","lg"].map(t=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:["Size ",t]}),e(n.OTPField.Root,{length:4,className:"OTPFieldRoot","data-size":t,children:e(i,{length:4})})]},t))})},A={render:()=>e(a.Field.Root,{className:"FieldRoot",invalid:!0,children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",defaultValue:"482",children:e(i,{length:6})}),e(a.Field.Error,{className:"FieldError",match:!0,children:"That code didn't match. Check the message and try again."})]})},$={render:()=>e(a.Field.Root,{className:"FieldRoot",disabled:!0,children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",defaultValue:"4821",children:e(i,{length:6})})]})},j={render:function(){let[o,l]=L.useState("");return e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",value:o,onValueChange:l,children:e(i,{length:6})}),e(a.Field.Description,{className:"FieldDescription",children:o.length===6?"Code complete.":`${6-o.length} characters left.`})]})}};var d=window.React,O=p||{},B=["Default","Grouped","PlaceholderHints","Sizes"];function z({id:t}){let o=u[t],l={...O.args||{},...o.args||{}};return(o.render||(s=>d.createElement(O.component,s)))(l,{args:l,id:t,name:t})}var M=B.map(t=>d.createElement("section",{key:t,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(z,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,M));})();
15
+ (()=>{var S=Object.create;var s=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var R=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),w=(t,o)=>{for(var n in o)s(t,n,{get:o[n],enumerable:!0})},P=(t,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of L(o))!O.call(t,l)&&l!==n&&s(t,l,{get:()=>o[l],enumerable:!(a=x(o,l))||a.enumerable});return t};var u=(t,o,n)=>(n=t!=null?S(E(t)):{},P(o||!t||!t.__esModule?s(n,"default",{value:t,enumerable:!0}):n,t));var h=R((N,g)=>{g.exports=window.React});var f=R((B,y)=>{y.exports=window.Loomiere});var p={};w(p,{Controlled:()=>$,Default:()=>D,Disabled:()=>A,Grouped:()=>V,Invalid:()=>k,PlaceholderHints:()=>v,Sizes:()=>C,default:()=>m});var F=u(h(),1),r=u(f(),1);var c=window.React;function e(t,o,n){let{children:a,...l}=o||{};return n!==void 0&&(l.key=n),a===void 0?c.createElement(t,l):Array.isArray(a)?c.createElement(t,l,...a):c.createElement(t,l,a)}var G=c.Fragment;var T={title:"Components/Lib/OTPField",component:r.OTPField.Root,args:{length:6},parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=T;function d({length:t,from:o=0}){return Array.from({length:t},(n,a)=>e(r.OTPField.Input,{"aria-label":o+a===0?void 0:`Character ${o+a+1}`},o+a))}var D={render:()=>e(r.Field.Root,{children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:6,children:e(d,{length:6})}),e(r.Field.Description,{children:"Enter the 6-digit code we sent to your phone."})]})},V={render:()=>e(r.Field.Root,{children:[e(r.Field.Label,{children:"Backup code"}),e(r.OTPField.Root,{length:6,children:[e(d,{length:3}),e(r.OTPField.Separator,{}),e(d,{length:3,from:3})]})]})},v={render:()=>e(r.Field.Root,{children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:4,children:Array.from({length:4},(t,o)=>e(r.OTPField.Input,{placeholder:"\u2022","aria-label":o===0?void 0:`Character ${o+1}`},o))})]})},C={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"var(--sl-space-6)"},children:["sm","md","lg"].map(t=>e(r.Field.Root,{children:[e(r.Field.Label,{children:["Size ",t]}),e(r.OTPField.Root,{length:4,"data-size":t,children:e(d,{length:4})})]},t))})},k={render:()=>e(r.Field.Root,{invalid:!0,children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:6,defaultValue:"482",children:e(d,{length:6})}),e(r.Field.Error,{match:!0,children:"That code didn't match. Check the message and try again."})]})},A={render:()=>e(r.Field.Root,{disabled:!0,children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:6,defaultValue:"4821",children:e(d,{length:6})})]})},$={render:function(){let[o,n]=F.useState("");return e(r.Field.Root,{children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:6,value:o,onValueChange:n,children:e(d,{length:6})}),e(r.Field.Description,{children:o.length===6?"Code complete.":`${6-o.length} characters left.`})]})}};var i=window.React,b=m||{},j=["Default","Grouped","PlaceholderHints","Sizes"];function I({id:t}){let o=p[t],n={...b.args||{},...o.args||{}};return(o.render||(l=>i.createElement(b.component,l)))(n,{args:n,id:t,name:t})}var z=j.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(I,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,z));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/Popover/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Popover styled by the theme.
4
4
 
5
- Use `Loomiere.Popover` (`import { Popover } from '@base-ui/react/popover'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Popover`, this package's wrapper: it puts the class names on for you (`import { Popover } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Popover`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/popover
8
8
 
@@ -32,17 +32,17 @@ From the Popover stories (`Default`):
32
32
  export const Default: Story = {
33
33
  render: () => (
34
34
  <Popover.Root>
35
- <Popover.Trigger className="PopoverTrigger Button" aria-label="Notifications">
35
+ <Popover.Trigger className="Button" aria-label="Notifications">
36
36
  <BellIcon aria-hidden="true" />
37
37
  </Popover.Trigger>
38
38
  <Popover.Portal>
39
- <Popover.Positioner className="PopoverPositioner" sideOffset={8}>
40
- <Popover.Popup className="PopoverPopup">
41
- <Popover.Arrow className="PopoverArrow">
39
+ <Popover.Positioner sideOffset={8}>
40
+ <Popover.Popup>
41
+ <Popover.Arrow>
42
42
  <ArrowSvg />
43
43
  </Popover.Arrow>
44
- <Popover.Title className="PopoverTitle">Notifications</Popover.Title>
45
- <Popover.Description className="PopoverDescription">
44
+ <Popover.Title>Notifications</Popover.Title>
45
+ <Popover.Description>
46
46
  You are all caught up. Good job!
47
47
  </Popover.Description>
48
48
  </Popover.Popup>
package/dist/exports/design-system/components/Popover/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var y=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var d=(r,t)=>()=>(t||r((t={exports:{}}).exports,t),t.exports),R=(r,t)=>{for(var s in t)c(r,s,{get:t[s],enumerable:!0})},b=(r,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!L.call(r,a)&&a!==s&&c(r,a,{get:()=>t[a],enumerable:!(p=h(t,a))||p.enumerable});return r};var u=(r,t,s)=>(s=r!=null?y(T(r)):{},b(t||!r||!r.__esModule?c(s,"default",{value:r,enumerable:!0}):s,r));var w=d((W,g)=>{g.exports=window.React});var C=d((Z,f)=>{f.exports=window.Loomiere.Base});var m={};R(m,{Default:()=>B,Placement:()=>M,WithBackdrop:()=>O,WithCloseButton:()=>S,WithForm:()=>E,default:()=>v});var P=u(w(),1),e=u(C(),1);var l=window.React;function o(r,t,s){let{children:p,...a}=t||{};return s!==void 0&&(a.key=s),p===void 0?l.createElement(r,a):Array.isArray(p)?l.createElement(r,a,...p):l.createElement(r,a,p)}var V=l.Fragment;var A={title:"Components/Popover",component:e.Popover.Root,parameters:{layout:"centered"},tags:["autodocs"]},v=A;function n(r){return o("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...r,children:[o("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PopoverArrowFill"}),o("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PopoverArrowOuterStroke"}),o("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PopoverArrowInnerStroke"})]})}function D(r){return o("svg",{fill:"currentcolor",width:"20",height:"20",viewBox:"0 0 16 16",...r,children:o("path",{d:"M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z"})})}function k(r){return o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"16",height:"16",...r,children:o("path",{d:"M18 6L6 18M6 6l12 12"})})}var B={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button","aria-label":"Notifications",children:o(D,{"aria-hidden":"true"})}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Notifications"}),o(e.Popover.Description,{className:"PopoverDescription",children:"You are all caught up. Good job!"})]})})})]})},S={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open settings"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Close,{className:"PopoverClose","aria-label":"Close",children:o(k,{})}),o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Settings"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Adjust your preferences and account settings here."})]})})})]})},E={render:()=>{let r=P.useId(),t=P.useId();return o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Contact form"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Get in touch"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Fill out the form below and we'll get back to you."}),o("div",{style:{marginTop:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:[o("div",{children:[o("label",{htmlFor:r,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Name"}),o("input",{id:r,type:"text",className:"Input",placeholder:"Your name",style:{width:"100%"}})]}),o("div",{children:[o("label",{htmlFor:t,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Email"}),o("input",{id:t,type:"email",className:"Input",placeholder:"you@example.com",style:{width:"100%"}})]}),o("button",{className:"Button",style:{marginTop:"8px"},children:"Submit"})]})]})})})]})}},M={render:()=>o("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:["top","right","bottom","left"].map(r=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:r}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",side:r,sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Description,{className:"PopoverDescription",children:["Popover on the ",r]})]})})})]},r))})},O={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open with backdrop"}),o(e.Popover.Portal,{children:[o(e.Popover.Backdrop,{className:"PopoverBackdrop",style:{background:"rgba(0, 0, 0, 0.3)"}}),o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Modal-like popover"}),o(e.Popover.Description,{className:"PopoverDescription",children:"This popover has a backdrop to focus attention."})]})})]})]})};var i=window.React,N=v||{},I=["Default","WithCloseButton","WithForm","Placement"];function F({id:r}){let t=m[r],s={...N.args||{},...t.args||{}};return(t.render||(a=>i.createElement(N.component,a)))(s,{args:s,id:r,name:r})}var j=I.map(r=>i.createElement("section",{key:r,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,j));})();
15
+ (()=>{var h=Object.create;var c=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var v=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports),T=(t,r)=>{for(var n in r)c(t,n,{get:r[n],enumerable:!0})},k=(t,r,n,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of L(r))!R.call(t,s)&&s!==n&&c(t,s,{get:()=>r[s],enumerable:!(i=x(r,s))||i.enumerable});return t};var u=(t,r,n)=>(n=t!=null?h(b(t)):{},k(r||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t));var f=v((W,g)=>{g.exports=window.React});var w=v((Z,C)=>{C.exports=window.Loomiere});var d={};T(d,{Default:()=>N,Placement:()=>M,WithBackdrop:()=>O,WithCloseButton:()=>D,WithForm:()=>E,default:()=>m});var P=u(f(),1),e=u(w(),1);var l=window.React;function o(t,r,n){let{children:i,...s}=r||{};return n!==void 0&&(s.key=n),i===void 0?l.createElement(t,s):Array.isArray(i)?l.createElement(t,s,...i):l.createElement(t,s,i)}var V=l.Fragment;var A={title:"Components/Lib/Popover",component:e.Popover.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=A;function a(t){return o("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...t,children:[o("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PopoverArrowFill"}),o("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PopoverArrowOuterStroke"}),o("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PopoverArrowInnerStroke"})]})}function S(t){return o("svg",{fill:"currentcolor",width:"20",height:"20",viewBox:"0 0 16 16",...t,children:o("path",{d:"M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z"})})}function B(t){return o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"16",height:"16",...t,children:o("path",{d:"M18 6L6 18M6 6l12 12"})})}var N={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"Button","aria-label":"Notifications",children:o(S,{"aria-hidden":"true"})}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{sideOffset:8,children:o(e.Popover.Popup,{children:[o(e.Popover.Arrow,{children:o(a,{})}),o(e.Popover.Title,{children:"Notifications"}),o(e.Popover.Description,{children:"You are all caught up. Good job!"})]})})})]})},D={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"Button",children:"Open settings"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{sideOffset:8,children:o(e.Popover.Popup,{children:[o(e.Popover.Close,{"aria-label":"Close",children:o(B,{})}),o(e.Popover.Arrow,{children:o(a,{})}),o(e.Popover.Title,{children:"Settings"}),o(e.Popover.Description,{children:"Adjust your preferences and account settings here."})]})})})]})},E={render:()=>{let t=P.useId(),r=P.useId();return o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"Button",children:"Contact form"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{sideOffset:8,children:o(e.Popover.Popup,{children:[o(e.Popover.Arrow,{children:o(a,{})}),o(e.Popover.Title,{children:"Get in touch"}),o(e.Popover.Description,{children:"Fill out the form below and we'll get back to you."}),o("div",{style:{marginTop:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:[o("div",{children:[o("label",{htmlFor:t,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Name"}),o("input",{id:t,type:"text",className:"Input",placeholder:"Your name",style:{width:"100%"}})]}),o("div",{children:[o("label",{htmlFor:r,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Email"}),o("input",{id:r,type:"email",className:"Input",placeholder:"you@example.com",style:{width:"100%"}})]}),o("button",{className:"Button",style:{marginTop:"8px"},children:"Submit"})]})]})})})]})}},M={render:()=>o("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:["top","right","bottom","left"].map(t=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"Button",children:t}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{side:t,sideOffset:8,children:o(e.Popover.Popup,{children:[o(e.Popover.Arrow,{children:o(a,{})}),o(e.Popover.Description,{children:["Popover on the ",t]})]})})})]},t))})},O={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"Button",children:"Open with backdrop"}),o(e.Popover.Portal,{children:[o(e.Popover.Backdrop,{style:{background:"rgba(0, 0, 0, 0.3)"}}),o(e.Popover.Positioner,{sideOffset:8,children:o(e.Popover.Popup,{children:[o(e.Popover.Arrow,{children:o(a,{})}),o(e.Popover.Title,{children:"Modal-like popover"}),o(e.Popover.Description,{children:"This popover has a backdrop to focus attention."})]})})]})]})};var p=window.React,y=m||{},I=["Default","WithCloseButton","WithForm","Placement"];function F({id:t}){let r=d[t],n={...y.args||{},...r.args||{}};return(r.render||(s=>p.createElement(y.component,s)))(n,{args:n,id:t,name:t})}var j=I.map(t=>p.createElement("section",{key:t,className:"ds-story"},p.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),p.createElement("div",{className:"ds-story-body"},p.createElement(F,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(p.createElement(p.Fragment,null,j));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/PreviewCard/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a title-magnify title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
4
4
 
5
- Use `Loomiere.PreviewCard` (`import { PreviewCard } from '@base-ui/react/preview-card'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.PreviewCard`, this package's wrapper: it puts the class names on for you (`import { PreviewCard } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.PreviewCard`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/preview-card
8
8
 
@@ -36,30 +36,28 @@ export const Default: Story = {
36
36
  The principles of good{' '}
37
37
  <PreviewCard.Root>
38
38
  <PreviewCard.Trigger
39
- className="PreviewCardTrigger"
40
39
  href="https://en.wikipedia.org/wiki/Typography"
41
40
  >
42
41
  typography
43
42
  </PreviewCard.Trigger>
44
43
  <PreviewCard.Portal>
45
- <PreviewCard.Positioner className="PreviewCardPositioner" sideOffset={8}>
46
- <PreviewCard.Popup className="PreviewCardPopup">
47
- <PreviewCard.Arrow className="PreviewCardArrow">
44
+ <PreviewCard.Positioner sideOffset={8}>
45
+ <PreviewCard.Popup>
46
+ <PreviewCard.Arrow>
48
47
  <ArrowSvg />
49
48
  </PreviewCard.Arrow>
50
- <img
49
+ <PreviewCard.Image
51
50
  width="448"
52
51
  height="300"
53
- className="PreviewCardImage"
54
52
  src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
55
53
  alt="Station Hofplein signage in Rotterdam, Netherlands"
56
54
  />
57
- <div className="PreviewCardContent">
58
- <p className="PreviewCardDescription">
55
+ <PreviewCard.Content>
56
+ <PreviewCard.Description>
59
57
  <strong>Typography</strong> is the art and science of arranging type to make written
60
58
  language clear, visually appealing, and effective in communication.
61
- </p>
62
- </div>
59
+ </PreviewCard.Description>
60
+ </PreviewCard.Content>
63
61
  </PreviewCard.Popup>
64
62
  </PreviewCard.Positioner>
65
63
  </PreviewCard.Portal>
package/dist/exports/design-system/components/PreviewCard/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var C=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var N=(i,a)=>()=>(a||i((a={exports:{}}).exports,a),a.exports),y=(i,a)=>{for(var t in a)l(i,t,{get:a[t],enumerable:!0})},T=(i,a,t,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of h(a))!f.call(i,o)&&o!==t&&l(i,o,{get:()=>a[o],enumerable:!(s=g(a,o))||s.enumerable});return i};var x=(i,a,t)=>(t=i!=null?C(u(i)):{},T(a||!i||!i.__esModule?l(t,"default",{value:i,enumerable:!0}):t,i));var c=N((E,v)=>{v.exports=window.Loomiere.Base});var w={};y(w,{Default:()=>S,DifferentPlacements:()=>b,MultipleLinks:()=>L,TextOnly:()=>k,WithTitle:()=>R,default:()=>P});var r=x(c(),1);var p=window.React;function e(i,a,t){let{children:s,...o}=a||{};return t!==void 0&&(o.key=t),s===void 0?p.createElement(i,o):Array.isArray(s)?p.createElement(i,o,...s):p.createElement(i,o,s)}var W=p.Fragment;var A={title:"Components/PreviewCard",component:r.PreviewCard.Root,parameters:{layout:"centered"},tags:["autodocs"]},P=A;function d(i){return e("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...i,children:[e("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PreviewCardArrowFill"}),e("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PreviewCardArrowOuterStroke"}),e("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PreviewCardArrowInnerStroke"})]})}var S={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["The principles of good"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/Typography",children:"typography"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("img",{width:"448",height:"300",className:"PreviewCardImage",src:"https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300",alt:"Station Hofplein signage in Rotterdam, Netherlands"}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:[e("strong",{children:"Typography"})," is the art and science of arranging type to make written language clear, visually appealing, and effective in communication."]})})]})})})]})," ","remain into the digital age."]})})},R={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Learn more about"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/Design",children:"design principles"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("img",{width:"448",height:"300",className:"PreviewCardImage",src:"https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=448&h=300",alt:"Design workspace"}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"Design Principles"}),e("p",{className:"PreviewCardDescription",children:"Fundamental guidelines that help designers create effective, aesthetically pleasing, and functional designs across various mediums."})]})]})})})]})," ","in modern web development."]})})},k={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Check out our"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com/documentation",children:"documentation"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"Documentation"}),e("p",{className:"PreviewCardDescription",children:"Comprehensive guides and API references to help you build with our platform. Includes tutorials, examples, and best practices."})]})]})})})]})," ","for more information."]})})},L={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Modern web development involves understanding"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/HTML",children:"HTML"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"HTML"}),e("p",{className:"PreviewCardDescription",children:"HyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser."})]})]})})})]}),","," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/CSS",children:"CSS"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"CSS"}),e("p",{className:"PreviewCardDescription",children:"Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML."})]})]})})})]}),", and"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/JavaScript",children:"JavaScript"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"JavaScript"}),e("p",{className:"PreviewCardDescription",children:"A high-level, interpreted programming language that conforms to the ECMAScript specification. It's a core technology of the World Wide Web."})]})]})})})]}),"."]})})},b={render:()=>e("div",{style:{padding:"100px",display:"flex",flexDirection:"column",gap:"40px"},children:[e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on top:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",side:"top",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:"This preview appears above the link."})})]})})})]})]}),e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on bottom:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",side:"bottom",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:"This preview appears below the link."})})]})})})]})]})]})};var n=window.React,m=P||{},H=["Default","WithTitle","TextOnly","MultipleLinks"];function D({id:i}){let a=w[i],t={...m.args||{},...a.args||{}};return(a.render||(o=>n.createElement(m.component,o)))(t,{args:t,id:i,name:i})}var M=H.map(i=>n.createElement("section",{key:i,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},i.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(D,{id:i}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,M));})();
15
+ (()=>{var g=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(t,i)=>()=>(i||t((i={exports:{}}).exports,i),i.exports),x=(t,i)=>{for(var o in i)l(t,o,{get:i[o],enumerable:!0})},T=(t,i,o,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of h(i))!u.call(t,a)&&a!==o&&l(t,a,{get:()=>i[a],enumerable:!(n=m(i,a))||n.enumerable});return t};var S=(t,i,o)=>(o=t!=null?g(f(t)):{},T(i||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t));var c=y((W,C)=>{C.exports=window.Loomiere});var P={};x(P,{Default:()=>A,DifferentPlacements:()=>b,MultipleLinks:()=>L,TextOnly:()=>k,WithTitle:()=>D,default:()=>w});var r=S(c(),1);var p=window.React;function e(t,i,o){let{children:n,...a}=i||{};return o!==void 0&&(a.key=o),n===void 0?p.createElement(t,a):Array.isArray(n)?p.createElement(t,a,...n):p.createElement(t,a,n)}var z=p.Fragment;var R={title:"Components/Lib/PreviewCard",component:r.PreviewCard.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},w=R;function s(t){return e("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...t,children:[e("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PreviewCardArrowFill"}),e("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PreviewCardArrowOuterStroke"}),e("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PreviewCardArrowInnerStroke"})]})}var A={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["The principles of good"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/Typography",children:"typography"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Image,{width:"448",height:"300",src:"https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300",alt:"Station Hofplein signage in Rotterdam, Netherlands"}),e(r.PreviewCard.Content,{children:e(r.PreviewCard.Description,{children:[e("strong",{children:"Typography"})," is the art and science of arranging type to make written language clear, visually appealing, and effective in communication."]})})]})})})]})," ","remain into the digital age."]})})},D={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Learn more about"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/Design",children:"design principles"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Image,{width:"448",height:"300",src:"https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=448&h=300",alt:"Design workspace"}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"Design Principles"}),e(r.PreviewCard.Description,{children:"Fundamental guidelines that help designers create effective, aesthetically pleasing, and functional designs across various mediums."})]})]})})})]})," ","in modern web development."]})})},k={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Check out our"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://example.com/documentation",children:"documentation"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"Documentation"}),e(r.PreviewCard.Description,{children:"Comprehensive guides and API references to help you build with our platform. Includes tutorials, examples, and best practices."})]})]})})})]})," ","for more information."]})})},L={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Modern web development involves understanding"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/HTML",children:"HTML"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"HTML"}),e(r.PreviewCard.Description,{children:"HyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser."})]})]})})})]}),","," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/CSS",children:"CSS"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"CSS"}),e(r.PreviewCard.Description,{children:"Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML."})]})]})})})]}),", and"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://en.wikipedia.org/wiki/JavaScript",children:"JavaScript"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:[e(r.PreviewCard.Title,{children:"JavaScript"}),e(r.PreviewCard.Description,{children:"A high-level, interpreted programming language that conforms to the ECMAScript specification. It's a core technology of the World Wide Web."})]})]})})})]}),"."]})})},b={render:()=>e("div",{style:{padding:"100px",display:"flex",flexDirection:"column",gap:"40px"},children:[e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on top:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{side:"top",sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:e(r.PreviewCard.Description,{children:"This preview appears above the link."})})]})})})]})]}),e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on bottom:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{side:"bottom",sideOffset:8,children:e(r.PreviewCard.Popup,{children:[e(r.PreviewCard.Arrow,{children:e(s,{})}),e(r.PreviewCard.Content,{children:e(r.PreviewCard.Description,{children:"This preview appears below the link."})})]})})})]})]})]})};var d=window.React,v=w||{},H=["Default","WithTitle","TextOnly","MultipleLinks"];function M({id:t}){let i=P[t],o={...v.args||{},...i.args||{}};return(i.render||(a=>d.createElement(v.component,a)))(o,{args:o,id:t,name:t})}var O=H.map(t=>d.createElement("section",{key:t,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(M,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,O));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/Progress/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Progress styled by the theme. A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of the scope around it: the accent by default, or set data-color on the root (success, warning, error, any palette).
4
4
 
5
- Use `Loomiere.Progress` (`import { Progress } from '@base-ui/react/progress'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Progress`, this package's wrapper: it puts the class names on for you (`import { Progress } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Progress`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/progress
8
8
 
@@ -40,13 +40,13 @@ export const Default: Story = {
40
40
 
41
41
  return (
42
42
  <div style={{ width: '400px' }}>
43
- <Progress.Root className="ProgressRoot" value={value}>
44
- <div className="ProgressHeader">
45
- <Progress.Label className="ProgressLabel">Export data</Progress.Label>
46
- <Progress.Value className="ProgressValue" />
47
- </div>
48
- <Progress.Track className="ProgressTrack">
49
- <Progress.Indicator className="ProgressIndicator" />
43
+ <Progress.Root value={value}>
44
+ <Progress.Header>
45
+ <Progress.Label>Export data</Progress.Label>
46
+ <Progress.Value />
47
+ </Progress.Header>
48
+ <Progress.Track>
49
+ <Progress.Indicator />
50
50
  </Progress.Track>
51
51
  </Progress.Root>
52
52
  </div>
package/dist/exports/design-system/components/Progress/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var b=Object.create;var g=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var P=(r,a)=>()=>(a||r((a={exports:{}}).exports,a),a.exports),I=(r,a)=>{for(var o in a)g(r,o,{get:a[o],enumerable:!0})},S=(r,a,o,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of L(a))!T.call(r,t)&&t!==o&&g(r,t,{get:()=>a[t],enumerable:!(c=k(a,t))||c.enumerable});return r};var u=(r,a,o)=>(o=r!=null?b(x(r)):{},S(a||!r||!r.__esModule?g(o,"default",{value:r,enumerable:!0}):o,r));var p=P(($,N)=>{N.exports=window.React});var R=P((U,v)=>{v.exports=window.Loomiere.Base});var m={};I(m,{Default:()=>V,ErrorVariant:()=>W,Indeterminate:()=>h,LargeSize:()=>D,MultipleProgress:()=>A,SmallSize:()=>M,Static:()=>w,SuccessVariant:()=>j,WarningVariant:()=>z,WithoutLabel:()=>E,WithoutValue:()=>H,default:()=>i});var n=u(p(),1),s=u(R(),1);var d=window.React;function e(r,a,o){let{children:c,...t}=a||{};return o!==void 0&&(t.key=o),c===void 0?d.createElement(r,t):Array.isArray(c)?d.createElement(r,t,...c):d.createElement(r,t,c)}var Z=d.Fragment;var f={title:"Components/Progress",parameters:{layout:"centered"},tags:["autodocs"]},i=f,V={render:()=>{let[r,a]=n.useState(20);return n.useEffect(()=>{let o=setInterval(()=>{a(c=>{let t=c+Math.random()*25;return t>=100?100:Math.round(t)})},1e3);return()=>clearInterval(o)},[]),e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:r,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Export data"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})}},w={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:65,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Upload progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},h={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:null,children:[e("div",{className:"ProgressHeader",children:e(s.Progress.Label,{className:"ProgressLabel",children:"Loading..."})}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},E={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:45,children:e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})})})},H={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:75,children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Installation progress"}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},M={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:60,"data-size":"sm",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Small progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},D={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:80,"data-size":"lg",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Large progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},j={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:100,"data-color":"success",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Complete!"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},z={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:85,"data-color":"warning",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Storage almost full"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},W={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:95,"data-color":"error",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Storage critical"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},A={render:()=>{let[r,a]=n.useState([{id:1,name:"Document.pdf",progress:45},{id:2,name:"Image.jpg",progress:78},{id:3,name:"Video.mp4",progress:12}]);return n.useEffect(()=>{let o=setInterval(()=>{a(c=>c.map(t=>({...t,progress:Math.min(100,t.progress+Math.random()*15)})))},800);return()=>clearInterval(o)},[]),e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"16px"},children:r.map(o=>e(s.Progress.Root,{className:"ProgressRoot",value:o.progress,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:o.name}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]},o.id))})}};var l=window.React,y=i||{},F=["Default","Static","Indeterminate","WithoutLabel"];function O({id:r}){let a=m[r],o={...y.args||{},...a.args||{}};return(a.render||(t=>l.createElement(y.component,t)))(o,{args:o,id:r,name:r})}var B=F.map(r=>l.createElement("section",{key:r,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(O,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,B));})();
15
+ (()=>{var b=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),w=(t,o)=>{for(var a in o)i(t,a,{get:o[a],enumerable:!0})},T=(t,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of L(o))!f.call(t,s)&&s!==a&&i(t,s,{get:()=>o[s],enumerable:!(n=S(o,s))||n.enumerable});return t};var m=(t,o,a)=>(a=t!=null?b(k(t)):{},T(o||!t||!t.__esModule?i(a,"default",{value:t,enumerable:!0}):a,t));var v=u((B,P)=>{P.exports=window.React});var x=u((U,y)=>{y.exports=window.Loomiere});var p={};w(p,{Default:()=>I,ErrorVariant:()=>A,Indeterminate:()=>E,LargeSize:()=>j,MultipleProgress:()=>F,SmallSize:()=>D,Static:()=>H,SuccessVariant:()=>z,WarningVariant:()=>W,WithoutLabel:()=>V,WithoutValue:()=>M,default:()=>g});var c=m(v(),1),r=m(x(),1);var l=window.React;function e(t,o,a){let{children:n,...s}=o||{};return a!==void 0&&(s.key=a),n===void 0?l.createElement(t,s):Array.isArray(n)?l.createElement(t,s,...n):l.createElement(t,s,n)}var Z=l.Fragment;var h={title:"Components/Lib/Progress",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},g=h,I={render:()=>{let[t,o]=c.useState(20);return c.useEffect(()=>{let a=setInterval(()=>{o(n=>{let s=n+Math.random()*25;return s>=100?100:Math.round(s)})},1e3);return()=>clearInterval(a)},[]),e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:t,children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Export data"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})}},H={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:65,children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Upload progress"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},E={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:null,children:[e(r.Progress.Header,{children:e(r.Progress.Label,{children:"Loading..."})}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},V={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:45,children:e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})})})},M={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:75,children:[e(r.Progress.Label,{children:"Installation progress"}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},D={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:60,"data-size":"sm",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Small progress"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},j={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:80,"data-size":"lg",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Large progress"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},z={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:100,"data-color":"success",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Complete!"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},W={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:85,"data-color":"warning",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Storage almost full"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},A={render:()=>e("div",{style:{width:"400px"},children:e(r.Progress.Root,{value:95,"data-color":"error",children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:"Storage critical"}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]})})},F={render:()=>{let[t,o]=c.useState([{id:1,name:"Document.pdf",progress:45},{id:2,name:"Image.jpg",progress:78},{id:3,name:"Video.mp4",progress:12}]);return c.useEffect(()=>{let a=setInterval(()=>{o(n=>n.map(s=>({...s,progress:Math.min(100,s.progress+Math.random()*15)})))},800);return()=>clearInterval(a)},[]),e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"16px"},children:t.map(a=>e(r.Progress.Root,{value:a.progress,children:[e(r.Progress.Header,{children:[e(r.Progress.Label,{children:a.name}),e(r.Progress.Value,{})]}),e(r.Progress.Track,{children:e(r.Progress.Indicator,{})})]},a.id))})}};var d=window.React,R=g||{},N=["Default","Static","Indeterminate","WithoutLabel"];function O({id:t}){let o=p[t],a={...R.args||{},...o.args||{}};return(o.render||(s=>d.createElement(R.component,s)))(a,{args:a,id:t,name:t})}var C=N.map(t=>d.createElement("section",{key:t,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(O,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,C));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/Radio/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Radio styled by the theme. Same box as Checkbox, always round. Sizes follow the label the same way, and the dot is a share of the circle (check.dot-scale).
4
4
 
5
- Use `Loomiere.Radio` (`import { Radio } from '@base-ui/react/radio'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Radio`, this package's wrapper: it puts the class names on for you (`import { Radio } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Radio`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/radio
8
8
 
@@ -30,7 +30,6 @@ export const Default: Story = {
30
30
 
31
31
  return (
32
32
  <RadioGroup
33
- className="RadioGroup"
34
33
  value={value}
35
34
  onValueChange={setValue}
36
35
  aria-labelledby={id}
@@ -39,32 +38,26 @@ export const Default: Story = {
39
38
  Choose a fruit
40
39
  </div>
41
40
 
42
- <label className="RadioRoot">
43
- <Radio.Root value="apple" className="RadioButton">
44
- <Radio.Indicator className="RadioIndicator">
45
- <span className="RadioIcon" />
46
- </Radio.Indicator>
41
+ <Radio.Row>
42
+ <Radio.Root value="apple">
43
+ <Radio.Indicator />
47
44
  </Radio.Root>
48
- <span className="RadioLabel">Apple</span>
49
- </label>
45
+ <Radio.Label>Apple</Radio.Label>
46
+ </Radio.Row>
50
47
 
51
- <label className="RadioRoot">
52
- <Radio.Root value="banana" className="RadioButton">
53
- <Radio.Indicator className="RadioIndicator">
54
- <span className="RadioIcon" />
55
- </Radio.Indicator>
48
+ <Radio.Row>
49
+ <Radio.Root value="banana">
50
+ <Radio.Indicator />
56
51
  </Radio.Root>
57
- <span className="RadioLabel">Banana</span>
58
- </label>
52
+ <Radio.Label>Banana</Radio.Label>
53
+ </Radio.Row>
59
54
 
60
- <label className="RadioRoot">
61
- <Radio.Root value="cherry" className="RadioButton">
62
- <Radio.Indicator className="RadioIndicator">
63
- <span className="RadioIcon" />
64
- </Radio.Indicator>
55
+ <Radio.Row>
56
+ <Radio.Root value="cherry">
57
+ <Radio.Indicator />
65
58
  </Radio.Root>
66
- <span className="RadioLabel">Cherry</span>
67
- </label>
59
+ <Radio.Label>Cherry</Radio.Label>
60
+ </Radio.Row>
68
61
  </RadioGroup>
69
62
  );
70
63
  },
package/dist/exports/design-system/components/Radio/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var B=Object.create;var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var p=(e,s)=>()=>(s||e((s={exports:{}}).exports,s),s.exports),V=(e,s)=>{for(var t in s)m(e,t,{get:s[t],enumerable:!0})},C=(e,s,t,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of L(s))!G.call(e,d)&&d!==t&&m(e,d,{get:()=>s[d],enumerable:!(l=h(s,d))||l.enumerable});return e};var u=(e,s,t)=>(t=e!=null?B(z(e)):{},C(s||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e));var v=p((Y,I)=>{I.exports=window.React});var g=p((Z,y)=>{y.exports=window.Loomiere.Base});var f=p((q,x)=>{x.exports=window.Loomiere.Base});var b={};V(b,{Default:()=>D,FormExample:()=>j,HorizontalLayout:()=>A,LargeSize:()=>O,SmallSize:()=>F,Uncontrolled:()=>E,WithDescriptions:()=>M,WithDisabled:()=>W,WithoutLabels:()=>P,default:()=>N});var i=u(v(),1),o=u(g(),1),n=u(f(),1);var r=window.React;function a(e,s,t){let{children:l,...d}=s||{};return t!==void 0&&(d.key=t),l===void 0?r.createElement(e,d):Array.isArray(l)?r.createElement(e,d,...l):r.createElement(e,d,l)}var J=r.Fragment;var w={title:"Components/Radio",parameters:{layout:"centered"},tags:["autodocs"]},N=w,D={render:()=>{let e=i.useId(),[s,t]=i.useState("apple");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose a fruit"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"apple",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Apple"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"banana",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Banana"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"cherry",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Cherry"})]})]})}},E={render:()=>{let e=i.useId();return a(n.RadioGroup,{className:"RadioGroup",defaultValue:"medium","aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Select size"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"small",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Small"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"medium",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Medium"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"large",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Large"})]})]})}},W={render:()=>{let e=i.useId(),[s,t]=i.useState("option1");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose an option"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"option1",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Available option"})]}),a("label",{className:"RadioRoot","data-disabled":!0,children:[a(o.Radio.Root,{value:"option2",className:"RadioButton",disabled:!0,children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Disabled option"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"option3",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Another available option"})]})]})}},F={render:()=>{let e=i.useId(),[s,t]=i.useState("email");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600,fontSize:"14px"},children:"Notification method"}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"email",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Email"})]}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"sms",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"SMS"})]}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"push",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Push notification"})]})]})}},O={render:()=>{let e=i.useId(),[s,t]=i.useState("credit");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600,fontSize:"18px"},children:"Payment method"}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"credit",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Credit card"})]}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"debit",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Debit card"})]}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"paypal",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"PayPal"})]})]})}},A={render:()=>{let e=i.useId(),[s,t]=i.useState("yes");return a("div",{children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Do you agree?"}),a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,style:{flexDirection:"row",gap:"24px"},children:[a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"yes",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Yes"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"no",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"No"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"maybe",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Maybe"})]})]})]})}},M={render:()=>{let e=i.useId(),[s,t]=i.useState("starter");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose a plan"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"starter",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Starter"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Perfect for individuals and small projects"})]})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"professional",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Professional"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"For growing teams and businesses"})]})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"enterprise",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Enterprise"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Advanced features for large organizations"})]})]})]})}},P={render:()=>{let e=i.useId(),[s,t]=i.useState("1");return a("div",{children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Select option"}),a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,style:{flexDirection:"row",gap:"16px"},children:[a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"1",className:"RadioButton","aria-label":"Option 1",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})}),a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"2",className:"RadioButton","aria-label":"Option 2",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})}),a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"3",className:"RadioButton","aria-label":"Option 3",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})})]})]})}},j={render:()=>{let e=i.useId(),s=i.useId(),t=i.useId(),[l,d]=i.useState({size:"medium",color:"blue",delivery:"standard"});return a("form",{onSubmit:c=>{c.preventDefault(),console.log("Form submitted:",l),alert(`Selected: Size ${l.size}, Color ${l.color}, Delivery ${l.delivery}`)},style:{width:"300px"},children:[a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.size,onValueChange:c=>d({...l,size:c}),"aria-labelledby":e,children:[a("h3",{id:e,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Size"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"small",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Small"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"medium",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Medium"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"large",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Large"})]})]})}),a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.color,onValueChange:c=>d({...l,color:c}),"aria-labelledby":s,children:[a("h3",{id:s,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Color"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"blue",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Blue"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"red",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Red"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"green",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Green"})]})]})}),a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.delivery,onValueChange:c=>d({...l,delivery:c}),"aria-labelledby":t,children:[a("h3",{id:t,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Delivery"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"standard",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Standard (5-7 days)"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"express",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Express (2-3 days)"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"overnight",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Overnight"})]})]})}),a("button",{type:"submit",className:"Button",children:"Submit Order"})]})}};var R=window.React,S=N||{},$=["Default","Uncontrolled","WithDisabled","SmallSize"];function T({id:e}){let s=b[e],t={...S.args||{},...s.args||{}};return(s.render||(d=>R.createElement(S.component,d)))(t,{args:t,id:e,name:e})}var k=$.map(e=>R.createElement("section",{key:e,className:"ds-story"},R.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),R.createElement("div",{className:"ds-story-body"},R.createElement(T,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(R.createElement(R.Fragment,null,k));})();
15
+ (()=>{var x=Object.create;var c=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var m=(a,t)=>()=>(t||a((t={exports:{}}).exports,t),t.exports),z=(a,t)=>{for(var i in t)c(a,i,{get:t[i],enumerable:!0})},V=(a,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!I.call(a,r)&&r!==i&&c(a,r,{get:()=>t[r],enumerable:!(l=S(t,r))||l.enumerable});return a};var v=(a,t,i)=>(i=a!=null?x(h(a)):{},V(t||!a||!a.__esModule?c(i,"default",{value:a,enumerable:!0}):i,a));var w=m((k,p)=>{p.exports=window.React});var L=m((U,y)=>{y.exports=window.Loomiere});var b={};z(b,{Default:()=>D,FormExample:()=>M,HorizontalLayout:()=>F,LargeSize:()=>G,SmallSize:()=>W,Uncontrolled:()=>E,WithDescriptions:()=>O,WithDisabled:()=>B,WithoutLabels:()=>A,default:()=>u});var d=v(w(),1),e=v(L(),1);var s=window.React;function o(a,t,i){let{children:l,...r}=t||{};return i!==void 0&&(r.key=i),l===void 0?s.createElement(a,r):Array.isArray(l)?s.createElement(a,r,...l):s.createElement(a,r,l)}var H=s.Fragment;var C={title:"Components/Lib/Radio",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},u=C,D={render:()=>{let a=d.useId(),[t,i]=d.useState("apple");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Choose a fruit"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"apple",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Apple"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"banana",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Banana"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"cherry",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Cherry"})]})]})}},E={render:()=>{let a=d.useId();return o(e.RadioGroup,{defaultValue:"medium","aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Select size"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"small",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Small"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"medium",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Medium"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"large",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Large"})]})]})}},B={render:()=>{let a=d.useId(),[t,i]=d.useState("option1");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Choose an option"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"option1",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Available option"})]}),o(e.Radio.Row,{"data-disabled":!0,children:[o(e.Radio.Root,{value:"option2",disabled:!0,children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Disabled option"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"option3",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Another available option"})]})]})}},W={render:()=>{let a=d.useId(),[t,i]=d.useState("email");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600,fontSize:"14px"},children:"Notification method"}),o(e.Radio.Row,{"data-size":"sm",children:[o(e.Radio.Root,{value:"email",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Email"})]}),o(e.Radio.Row,{"data-size":"sm",children:[o(e.Radio.Root,{value:"sms",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"SMS"})]}),o(e.Radio.Row,{"data-size":"sm",children:[o(e.Radio.Root,{value:"push",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Push notification"})]})]})}},G={render:()=>{let a=d.useId(),[t,i]=d.useState("credit");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600,fontSize:"18px"},children:"Payment method"}),o(e.Radio.Row,{"data-size":"lg",children:[o(e.Radio.Root,{value:"credit",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Credit card"})]}),o(e.Radio.Row,{"data-size":"lg",children:[o(e.Radio.Root,{value:"debit",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Debit card"})]}),o(e.Radio.Row,{"data-size":"lg",children:[o(e.Radio.Root,{value:"paypal",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"PayPal"})]})]})}},F={render:()=>{let a=d.useId(),[t,i]=d.useState("yes");return o("div",{children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Do you agree?"}),o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,style:{flexDirection:"row",gap:"24px"},children:[o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"yes",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Yes"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"no",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"No"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"maybe",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Maybe"})]})]})]})}},O={render:()=>{let a=d.useId(),[t,i]=d.useState("starter");return o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Choose a plan"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"starter",children:o(e.Radio.Indicator,{})}),o("div",{children:[o(e.Radio.Label,{children:"Starter"}),o("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Perfect for individuals and small projects"})]})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"professional",children:o(e.Radio.Indicator,{})}),o("div",{children:[o(e.Radio.Label,{children:"Professional"}),o("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"For growing teams and businesses"})]})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"enterprise",children:o(e.Radio.Indicator,{})}),o("div",{children:[o(e.Radio.Label,{children:"Enterprise"}),o("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Advanced features for large organizations"})]})]})]})}},A={render:()=>{let a=d.useId(),[t,i]=d.useState("1");return o("div",{children:[o("div",{id:a,style:{marginBottom:"12px",fontWeight:600},children:"Select option"}),o(e.RadioGroup,{value:t,onValueChange:i,"aria-labelledby":a,style:{flexDirection:"row",gap:"16px"},children:[o(e.Radio.Row,{children:o(e.Radio.Root,{value:"1","aria-label":"Option 1",children:o(e.Radio.Indicator,{})})}),o(e.Radio.Row,{children:o(e.Radio.Root,{value:"2","aria-label":"Option 2",children:o(e.Radio.Indicator,{})})}),o(e.Radio.Row,{children:o(e.Radio.Root,{value:"3","aria-label":"Option 3",children:o(e.Radio.Indicator,{})})})]})]})}},M={render:()=>{let a=d.useId(),t=d.useId(),i=d.useId(),[l,r]=d.useState({size:"medium",color:"blue",delivery:"standard"});return o("form",{onSubmit:R=>{R.preventDefault(),console.log("Form submitted:",l),alert(`Selected: Size ${l.size}, Color ${l.color}, Delivery ${l.delivery}`)},style:{width:"300px"},children:[o("div",{style:{marginBottom:"24px"},children:o(e.RadioGroup,{value:l.size,onValueChange:R=>r({...l,size:R}),"aria-labelledby":a,children:[o("h3",{id:a,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Size"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"small",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Small"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"medium",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Medium"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"large",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Large"})]})]})}),o("div",{style:{marginBottom:"24px"},children:o(e.RadioGroup,{value:l.color,onValueChange:R=>r({...l,color:R}),"aria-labelledby":t,children:[o("h3",{id:t,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Color"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"blue",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Blue"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"red",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Red"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"green",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Green"})]})]})}),o("div",{style:{marginBottom:"24px"},children:o(e.RadioGroup,{value:l.delivery,onValueChange:R=>r({...l,delivery:R}),"aria-labelledby":i,children:[o("h3",{id:i,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Delivery"}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"standard",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Standard (5-7 days)"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"express",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Express (2-3 days)"})]}),o(e.Radio.Row,{children:[o(e.Radio.Root,{value:"overnight",children:o(e.Radio.Indicator,{})}),o(e.Radio.Label,{children:"Overnight"})]})]})}),o("button",{type:"submit",className:"Button",children:"Submit Order"})]})}};var n=window.React,g=u||{},N=["Default","Uncontrolled","WithDisabled","SmallSize"];function P({id:a}){let t=b[a],i={...g.args||{},...t.args||{}};return(t.render||(r=>n.createElement(g.component,r)))(i,{args:i,id:a,name:a})}var j=N.map(a=>n.createElement("section",{key:a,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(P,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,j));})();
16
16
 
17
17
  </script>
18
18
  </body>