@scattered-light/loomiere-base-ui 0.5.3 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -1
- package/dist/design-system/components/Accordion/README.md +20 -20
- package/dist/design-system/components/Accordion/preview.html +1 -1
- package/dist/design-system/components/AlertDialog/README.md +8 -8
- package/dist/design-system/components/AlertDialog/preview.html +1 -1
- package/dist/design-system/components/Autocomplete/README.md +9 -9
- package/dist/design-system/components/Autocomplete/preview.html +1 -1
- package/dist/design-system/components/Avatar/README.md +3 -4
- package/dist/design-system/components/Avatar/preview.html +1 -1
- package/dist/design-system/components/Checkbox/README.md +5 -5
- package/dist/design-system/components/Checkbox/preview.html +1 -1
- package/dist/design-system/components/CheckboxGroup/README.md +14 -14
- package/dist/design-system/components/CheckboxGroup/preview.html +1 -1
- package/dist/design-system/components/Collapsible/README.md +6 -6
- package/dist/design-system/components/Collapsible/preview.html +1 -1
- package/dist/design-system/components/Combobox/README.md +11 -11
- package/dist/design-system/components/Combobox/preview.html +1 -1
- package/dist/design-system/components/ContextMenu/README.md +9 -9
- package/dist/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/design-system/components/Dialog/README.md +6 -6
- package/dist/design-system/components/Dialog/preview.html +1 -1
- package/dist/design-system/components/Drawer/README.md +1 -1
- package/dist/design-system/components/Drawer/preview.html +1 -1
- package/dist/design-system/components/Menu/README.md +11 -11
- package/dist/design-system/components/Menu/preview.html +1 -1
- package/dist/design-system/components/Menubar/README.md +32 -32
- package/dist/design-system/components/Menubar/preview.html +1 -1
- package/dist/design-system/components/Meter/README.md +9 -8
- package/dist/design-system/components/Meter/preview.html +1 -1
- package/dist/design-system/components/NumberField/README.md +10 -10
- package/dist/design-system/components/NumberField/preview.html +1 -1
- package/dist/design-system/components/OTPField/README.md +5 -5
- package/dist/design-system/components/OTPField/preview.html +1 -1
- package/dist/design-system/components/Popover/README.md +7 -7
- package/dist/design-system/components/Popover/preview.html +1 -1
- package/dist/design-system/components/PreviewCard/README.md +9 -11
- package/dist/design-system/components/PreviewCard/preview.html +1 -1
- package/dist/design-system/components/Progress/README.md +8 -8
- package/dist/design-system/components/Progress/preview.html +1 -1
- package/dist/design-system/components/Radio/README.md +16 -23
- package/dist/design-system/components/Radio/preview.html +1 -1
- package/dist/design-system/components/ScrollArea/README.md +6 -6
- package/dist/design-system/components/ScrollArea/preview.html +2 -2
- package/dist/design-system/components/Select/README.md +13 -12
- package/dist/design-system/components/Select/preview.html +1 -1
- package/dist/design-system/components/Separator/README.md +2 -2
- package/dist/design-system/components/Separator/preview.html +1 -1
- package/dist/design-system/components/Slider/README.md +6 -6
- package/dist/design-system/components/Slider/preview.html +1 -1
- package/dist/design-system/components/Switch/README.md +3 -3
- package/dist/design-system/components/Switch/preview.html +1 -1
- package/dist/design-system/components/Tabs/README.md +9 -9
- package/dist/design-system/components/Tabs/preview.html +1 -1
- package/dist/design-system/components/Toast/README.md +7 -7
- package/dist/design-system/components/Toast/preview.html +1 -1
- package/dist/design-system/components/Toggle/README.md +2 -2
- package/dist/design-system/components/Toggle/preview.html +1 -1
- package/dist/design-system/components/ToggleGroup/README.md +5 -5
- package/dist/design-system/components/ToggleGroup/preview.html +1 -1
- package/dist/design-system/components/Toolbar/README.md +11 -11
- package/dist/design-system/components/Toolbar/preview.html +1 -1
- package/dist/design-system/components/Tooltip/README.md +4 -4
- package/dist/design-system/components/Tooltip/preview.html +1 -1
- package/dist/design-system/components/bundle.js +4 -4
- package/dist/design-system/components/index.d.ts +645 -29
- package/dist/design-system/components/styles.css +59 -45
- package/dist/index.d.ts +645 -29
- package/dist/index.js +1404 -27
- package/dist/index.js.map +1 -1
- package/dist/styles/components/Accordion.css +1 -1
- package/dist/styles/components/AlertDialog.css +1 -1
- package/dist/styles/components/Autocomplete.css +1 -1
- package/dist/styles/components/Avatar.css +1 -1
- package/dist/styles/components/Button.css +1 -1
- package/dist/styles/components/Checkbox.css +1 -1
- package/dist/styles/components/CheckboxGroup.css +1 -1
- package/dist/styles/components/Collapsible.css +1 -1
- package/dist/styles/components/Combobox.css +1 -1
- package/dist/styles/components/ContextMenu.css +1 -1
- package/dist/styles/components/Dialog.css +1 -1
- package/dist/styles/components/Drawer.css +1 -1
- package/dist/styles/components/Field.css +1 -1
- package/dist/styles/components/Fieldset.css +1 -1
- package/dist/styles/components/Form.css +1 -1
- package/dist/styles/components/Input.css +1 -1
- package/dist/styles/components/Menu.css +1 -1
- package/dist/styles/components/Menubar.css +1 -1
- package/dist/styles/components/Meter.css +7 -4
- package/dist/styles/components/NavigationMenu.css +1 -1
- package/dist/styles/components/NumberField.css +1 -1
- package/dist/styles/components/OTPField.css +1 -1
- package/dist/styles/components/Popover.css +1 -1
- package/dist/styles/components/PreviewCard.css +1 -1
- package/dist/styles/components/Progress.css +1 -1
- package/dist/styles/components/Radio.css +1 -1
- package/dist/styles/components/ScrollArea.css +1 -1
- package/dist/styles/components/Select.css +12 -1
- package/dist/styles/components/Separator.css +1 -1
- package/dist/styles/components/Slider.css +1 -1
- package/dist/styles/components/Switch.css +1 -1
- package/dist/styles/components/Table.css +1 -1
- package/dist/styles/components/Tabs.css +1 -1
- package/dist/styles/components/Toast.css +1 -1
- package/dist/styles/components/Toggle.css +1 -1
- package/dist/styles/components/ToggleGroup.css +1 -1
- package/dist/styles/components/Toolbar.css +1 -1
- package/dist/styles/components/Tooltip.css +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/styles/reset/accessibility.css +1 -1
- package/dist/styles/reset/reset-accessibility.css +1 -1
- package/dist/styles/reset/reset-tailwind.css +1 -1
- package/dist/styles/reset/reset.css +1 -1
- package/dist/styles/tailwind.css +1 -1
- package/package.json +2 -2
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var g=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var
|
|
15
|
+
(()=>{var g=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var h=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),S=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},z=(e,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of x(t))!f.call(e,s)&&s!==a&&d(e,s,{get:()=>t[s],enumerable:!(n=u(t,s))||n.enumerable});return e};var w=(e,t,a)=>(a=e!=null?g(b(e)):{},z(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e));var m=h((H,v)=>{v.exports=window.Loomiere});var c={};S(c,{Horizontal:()=>k,InCard:()=>C,InMenu:()=>I,InToolbar:()=>B,Vertical:()=>E,WithCustomSpacing:()=>M,default:()=>p});var o=w(m(),1);var l=window.React;function r(e,t,a){let{children:n,...s}=t||{};return a!==void 0&&(s.key=a),n===void 0?l.createElement(e,s):Array.isArray(n)?l.createElement(e,s,...n):l.createElement(e,s,n)}var T=l.Fragment;var R={title:"Components/Lib/Separator",component:o.Separator,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},p=R,k={render:()=>r("div",{style:{width:"300px"},children:[r("div",{style:{padding:"16px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content above"})}),r(o.Separator,{}),r("div",{style:{padding:"16px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content below"})})]})},E={render:()=>r("div",{style:{display:"flex",alignItems:"center",height:"100px"},children:[r("div",{style:{padding:"0 16px"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Left"})}),r(o.Separator,{orientation:"vertical"}),r("div",{style:{padding:"0 16px"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Right"})})]})},I={render:()=>r("div",{style:{width:"200px",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",padding:"var(--sl-space-2)"},children:[r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"New File"})}),r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"New Folder"})}),r(o.Separator,{style:{marginBlock:"var(--sl-space-1)"}}),r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"Settings"})})]})},C={render:()=>r("div",{style:{width:"400px",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",padding:"var(--sl-space-6)"},children:[r("h3",{style:{margin:"0 0 var(--sl-space-2) 0",fontSize:"var(--sl-font-size-lg)",fontWeight:"var(--sl-font-weight-semibold)",color:"var(--sl-text-primary)"},children:"Card Title"}),r("p",{style:{margin:0,fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-secondary)",lineHeight:"var(--sl-line-height-sm)"},children:"This is a description that provides context about the card content."}),r(o.Separator,{}),r("div",{children:r("p",{style:{margin:"0 0 var(--sl-space-2) 0",fontSize:"var(--sl-font-size-md)",color:"var(--sl-text-primary)",lineHeight:"var(--sl-line-height-sm)"},children:"Main content goes here with additional details and information."})})]})},M={render:()=>r("div",{style:{width:"300px"},children:[r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Tight spacing"})}),r(o.Separator,{style:{marginBlock:"var(--sl-space-2)"}}),r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content"})}),r(o.Separator,{style:{marginBlock:"var(--sl-space-8)"}}),r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Loose spacing"})})]})},B={render:()=>r("div",{style:{display:"flex",alignItems:"center",padding:"var(--sl-space-2)",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-md)",gap:"var(--sl-space-2)"},children:[r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Bold"}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Italic"}),r(o.Separator,{orientation:"vertical",style:{marginInline:"var(--sl-space-1)",height:"24px"}}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Link"}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Image"})]})};var i=window.React,y=p||{},F=["Horizontal","Vertical","InMenu","InCard"];function L({id:e}){let t=c[e],a={...y.args||{},...t.args||{}};return(t.render||(s=>i.createElement(y.component,s)))(a,{args:a,id:e,name:e})}var N=F.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(L,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,N));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Slider styled by the theme. A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as Meter and Progress, thin size), and the fill is the scope's solid color, so data-color on the root re-colors it. The thumb is a field-colored knob ringed in that color. Only the knob size and the vertical length are slider tokens.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Slider
|
|
5
|
+
Use `Loomiere.Slider`, this package's wrapper: it puts the class names on for you (`import { Slider } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Slider`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/slider
|
|
8
8
|
|
|
@@ -29,11 +29,11 @@ From the Slider stories (`Default`):
|
|
|
29
29
|
```tsx
|
|
30
30
|
export const Default: Story = {
|
|
31
31
|
render: () => (
|
|
32
|
-
<Slider.Root defaultValue={25}
|
|
33
|
-
<Slider.Control
|
|
34
|
-
<Slider.Track
|
|
35
|
-
<Slider.Indicator
|
|
36
|
-
<Slider.Thumb
|
|
32
|
+
<Slider.Root defaultValue={25}>
|
|
33
|
+
<Slider.Control>
|
|
34
|
+
<Slider.Track>
|
|
35
|
+
<Slider.Indicator />
|
|
36
|
+
<Slider.Thumb />
|
|
37
37
|
</Slider.Track>
|
|
38
38
|
</Slider.Control>
|
|
39
39
|
</Slider.Root>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var V=Object.create;var i=Object.defineProperty;var
|
|
15
|
+
(()=>{var V=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var S=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),C=(t,a)=>{for(var o in a)i(t,o,{get:a[o],enumerable:!0})},E=(t,a,o,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of T(a))!w.call(t,n)&&n!==o&&i(t,n,{get:()=>a[n],enumerable:!(l=g(a,n))||l.enumerable});return t};var p=(t,a,o)=>(o=t!=null?V(h(t)):{},E(a||!t||!t.__esModule?i(o,"default",{value:t,enumerable:!0}):o,t));var R=S((A,b)=>{b.exports=window.React});var f=S((F,y)=>{y.exports=window.Loomiere});var u={};C(u,{Default:()=>L,Disabled:()=>H,Range:()=>v,WithValue:()=>D,default:()=>m});var c=p(R(),1),r=p(f(),1);var s=window.React;function e(t,a,o){let{children:l,...n}=a||{};return o!==void 0&&(n.key=o),l===void 0?s.createElement(t,n):Array.isArray(l)?s.createElement(t,n,...l):s.createElement(t,n,l)}var N=s.Fragment;var k={title:"Components/Lib/Slider",component:r.Slider.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],decorators:[t=>e("div",{style:{width:"400px",padding:"40px"},children:e(t,{})})]},m=k,L={render:()=>e(r.Slider.Root,{defaultValue:25,children:e(r.Slider.Control,{children:e(r.Slider.Track,{children:[e(r.Slider.Indicator,{}),e(r.Slider.Thumb,{})]})})})},D={render:()=>{let[t,a]=c.useState(50);return e(r.Slider.Root,{value:t,onValueChange:a,children:[e(r.Slider.Header,{children:[e(r.Slider.Label,{children:"Volume"}),e(r.Slider.Value,{children:o=>e("span",{children:[o,"%"]})})]}),e(r.Slider.Control,{children:e(r.Slider.Track,{children:[e(r.Slider.Indicator,{}),e(r.Slider.Thumb,{})]})})]})}},v={render:()=>{let[t,a]=c.useState([25,75]);return e(r.Slider.Root,{value:t,onValueChange:a,children:[e(r.Slider.Header,{children:[e(r.Slider.Label,{children:"Price Range"}),e(r.Slider.Value,{children:o=>e("span",{children:["$",o[0]," - $",o[1]]})})]}),e(r.Slider.Control,{children:e(r.Slider.Track,{children:[e(r.Slider.Indicator,{}),e(r.Slider.Thumb,{index:0,"aria-label":"Minimum price"}),e(r.Slider.Thumb,{index:1,"aria-label":"Maximum price"})]})})]})}},H={render:()=>e(r.Slider.Root,{defaultValue:60,disabled:!0,children:[e(r.Slider.Header,{children:[e(r.Slider.Label,{children:"Disabled Slider"}),e(r.Slider.Value,{children:t=>e("span",{children:[t,"%"]})})]}),e(r.Slider.Control,{children:e(r.Slider.Track,{children:[e(r.Slider.Indicator,{}),e(r.Slider.Thumb,{})]})})]})};var d=window.React,x=m||{},I=["Default","WithValue","Range","Disabled"];function M({id:t}){let a=u[t],o={...x.args||{},...a.args||{}};return(a.render||(n=>d.createElement(x.component,n)))(o,{args:o,id:t,name:t})}var j=I.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,j));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Switch styled by the theme. Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are worked out from them: the thumb fills the track's height inside the padding, travels (width - height), and the text centers in the part the thumb leaves free.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Switch
|
|
5
|
+
Use `Loomiere.Switch`, this package's wrapper: it puts the class names on for you (`import { Switch } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Switch`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/switch
|
|
8
8
|
|
|
@@ -24,8 +24,8 @@ From the Switch stories (`Default`):
|
|
|
24
24
|
```tsx
|
|
25
25
|
export const Default: Story = {
|
|
26
26
|
render: () => (
|
|
27
|
-
<Switch.Root defaultChecked
|
|
28
|
-
<Switch.Thumb
|
|
27
|
+
<Switch.Root defaultChecked>
|
|
28
|
+
<Switch.Thumb />
|
|
29
29
|
</Switch.Root>
|
|
30
30
|
),
|
|
31
31
|
};
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var R=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),g=(o,a)=>{for(var n in a)l(o,n,{get:a[n],enumerable:!0})},v=(o,a,n,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of L(a))!x.call(o,i)&&i!==n&&l(o,i,{get:()=>a[i],enumerable:!(c=y(a,i))||c.enumerable});return o};var b=(o,a,n)=>(n=o!=null?R(k(o)):{},v(a||!o||!o.__esModule?l(n,"default",{value:o,enumerable:!0}):n,o));var w=m(($,u)=>{u.exports=window.React});var f=m((B,C)=>{C.exports=window.Loomiere});var S={};g(S,{Controlled:()=>M,Default:()=>D,Disabled:()=>z,Multiple:()=>O,Sizes:()=>A,WithLabel:()=>T,default:()=>h});var d=b(w(),1),t=b(f(),1);var s=window.React;function e(o,a,n){let{children:c,...i}=a||{};return n!==void 0&&(i.key=n),c===void 0?s.createElement(o,i):Array.isArray(c)?s.createElement(o,i,...c):s.createElement(o,i,c)}var I=s.Fragment;var E={title:"Components/Lib/Switch",component:t.Switch.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],decorators:[o=>e("div",{style:{padding:"40px"},children:e(o,{})})]},h=E,D={render:()=>e(t.Switch.Root,{defaultChecked:!0,children:e(t.Switch.Thumb,{})})},T={render:()=>e(t.Switch.Container,{children:[e(t.Switch.Root,{defaultChecked:!0,children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Enable notifications"})]})},M={render:()=>{let[o,a]=d.useState(!0);return e(t.Switch.Container,{children:[e(t.Switch.Root,{checked:o,onCheckedChange:a,children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:o?"On":"Off"})]})}},z={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e(t.Switch.Container,{"data-disabled":!0,children:[e(t.Switch.Root,{disabled:!0,children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Disabled (off)"})]}),e(t.Switch.Container,{"data-disabled":!0,children:[e(t.Switch.Root,{disabled:!0,defaultChecked:!0,children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Disabled (on)"})]})]})},A={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[e(t.Switch.Container,{"data-size":"sm",children:[e(t.Switch.Root,{defaultChecked:!0,children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Small"})]}),e(t.Switch.Container,{"data-size":"md",children:[e(t.Switch.Root,{defaultChecked:!0,children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Medium (default)"})]}),e(t.Switch.Container,{"data-size":"lg",children:[e(t.Switch.Root,{defaultChecked:!0,children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Large"})]})]})},O={render:()=>{let[o,a]=d.useState({notifications:!0,darkMode:!1,autoSave:!0,analytics:!1});return e("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e(t.Switch.Container,{children:[e(t.Switch.Root,{checked:o.notifications,onCheckedChange:n=>a({...o,notifications:n}),children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Enable notifications"})]}),e(t.Switch.Container,{children:[e(t.Switch.Root,{checked:o.darkMode,onCheckedChange:n=>a({...o,darkMode:n}),children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Dark mode"})]}),e(t.Switch.Container,{children:[e(t.Switch.Root,{checked:o.autoSave,onCheckedChange:n=>a({...o,autoSave:n}),children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Auto-save"})]}),e(t.Switch.Container,{children:[e(t.Switch.Root,{checked:o.analytics,onCheckedChange:n=>a({...o,analytics:n}),children:e(t.Switch.Thumb,{})}),e(t.Switch.Label,{children:"Analytics"})]})]})}};var r=window.React,p=h||{},j=["Default","WithLabel","Controlled","Disabled"];function F({id:o}){let a=S[o],n={...p.args||{},...a.args||{}};return(a.render||(i=>r.createElement(p.component,i)))(n,{args:n,id:o,name:o})}var N=j.map(o=>r.createElement("section",{key:o,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(F,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,N));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Tabs styled by the theme. No component tokens. The divider, the selected line and color, hover and the disabled fade are the disclosure concept (tokens/semantic/disclosure.json). Tabs use the text style of their tier and switch to that tier's selected style when chosen, like a selected row in a list.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Tabs
|
|
5
|
+
Use `Loomiere.Tabs`, this package's wrapper: it puts the class names on for you (`import { Tabs } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Tabs`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/tabs
|
|
8
8
|
|
|
@@ -24,27 +24,27 @@ From the Tabs stories (`Default`):
|
|
|
24
24
|
```tsx
|
|
25
25
|
export const Default: Story = {
|
|
26
26
|
render: () => (
|
|
27
|
-
<Tabs.Root defaultValue="tab1"
|
|
28
|
-
<Tabs.List
|
|
29
|
-
<Tabs.Tab value="tab1"
|
|
27
|
+
<Tabs.Root defaultValue="tab1">
|
|
28
|
+
<Tabs.List>
|
|
29
|
+
<Tabs.Tab value="tab1">
|
|
30
30
|
Account
|
|
31
31
|
</Tabs.Tab>
|
|
32
|
-
<Tabs.Tab value="tab2"
|
|
32
|
+
<Tabs.Tab value="tab2">
|
|
33
33
|
Settings
|
|
34
34
|
</Tabs.Tab>
|
|
35
|
-
<Tabs.Tab value="tab3"
|
|
35
|
+
<Tabs.Tab value="tab3">
|
|
36
36
|
Notifications
|
|
37
37
|
</Tabs.Tab>
|
|
38
38
|
</Tabs.List>
|
|
39
|
-
<Tabs.Panel value="tab1"
|
|
39
|
+
<Tabs.Panel value="tab1">
|
|
40
40
|
<h3 style={{ marginTop: 0 }}>Account Information</h3>
|
|
41
41
|
<p>Manage your account settings and preferences.</p>
|
|
42
42
|
</Tabs.Panel>
|
|
43
|
-
<Tabs.Panel value="tab2"
|
|
43
|
+
<Tabs.Panel value="tab2">
|
|
44
44
|
<h3 style={{ marginTop: 0 }}>Settings</h3>
|
|
45
45
|
<p>Configure your application settings.</p>
|
|
46
46
|
</Tabs.Panel>
|
|
47
|
-
<Tabs.Panel value="tab3"
|
|
47
|
+
<Tabs.Panel value="tab3">
|
|
48
48
|
<h3 style={{ marginTop: 0 }}>Notifications</h3>
|
|
49
49
|
<p>Manage your notification preferences.</p>
|
|
50
50
|
</Tabs.Panel>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var f=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var c=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),L=(t,n)=>{for(var b in n)r(t,b,{get:n[b],enumerable:!0})},w=(t,n,b,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of R(n))!x.call(t,l)&&l!==b&&r(t,l,{get:()=>n[l],enumerable:!(s=h(n,l))||s.enumerable});return t};var p=(t,n,b)=>(b=t!=null?f(S(t)):{},w(n||!t||!t.__esModule?r(b,"default",{value:t,enumerable:!0}):b,t));var d=c((I,v)=>{v.exports=window.React});var P=c((F,m)=>{m.exports=window.Loomiere});var u={};L(u,{Controlled:()=>A,Default:()=>M,ManyTabs:()=>C,Sizes:()=>B,Vertical:()=>E,WithDisabledTab:()=>D,default:()=>i});var g=p(d(),1),e=p(P(),1);var T=window.React;function a(t,n,b){let{children:s,...l}=n||{};return b!==void 0&&(l.key=b),s===void 0?T.createElement(t,l):Array.isArray(s)?T.createElement(t,l,...s):T.createElement(t,l,s)}var U=T.Fragment;var V={title:"Components/Lib/Tabs",component:e.Tabs.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],decorators:[t=>a("div",{style:{width:"600px",padding:"40px"},children:a(t,{})})]},i=V,M={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Account"}),a(e.Tabs.Tab,{value:"tab2",children:"Settings"}),a(e.Tabs.Tab,{value:"tab3",children:"Notifications"})]}),a(e.Tabs.Panel,{value:"tab1",children:[a("h3",{style:{marginTop:0},children:"Account Information"}),a("p",{children:"Manage your account settings and preferences."})]}),a(e.Tabs.Panel,{value:"tab2",children:[a("h3",{style:{marginTop:0},children:"Settings"}),a("p",{children:"Configure your application settings."})]}),a(e.Tabs.Panel,{value:"tab3",children:[a("h3",{style:{marginTop:0},children:"Notifications"}),a("p",{children:"Manage your notification preferences."})]})]})},A={render:()=>{let[t,n]=g.useState("tab1");return a("div",{children:[a(e.Tabs.Root,{value:t,onValueChange:n,children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Overview"}),a(e.Tabs.Tab,{value:"tab2",children:"Analytics"}),a(e.Tabs.Tab,{value:"tab3",children:"Reports"})]}),a(e.Tabs.Panel,{value:"tab1",children:a("p",{children:["Overview content for ",t]})}),a(e.Tabs.Panel,{value:"tab2",children:a("p",{children:["Analytics content for ",t]})}),a(e.Tabs.Panel,{value:"tab3",children:a("p",{children:["Reports content for ",t]})})]}),a("div",{style:{marginTop:"16px",fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Current tab: ",t]})]})}},D={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Available"}),a(e.Tabs.Tab,{value:"tab2",disabled:!0,children:"Disabled"}),a(e.Tabs.Tab,{value:"tab3",children:"Active"})]}),a(e.Tabs.Panel,{value:"tab1",children:a("p",{children:"This tab is available."})}),a(e.Tabs.Panel,{value:"tab2",children:a("p",{children:"This tab is disabled and cannot be accessed."})}),a(e.Tabs.Panel,{value:"tab3",children:a("p",{children:"This tab is active."})})]})},E={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",orientation:"vertical",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Profile"}),a(e.Tabs.Tab,{value:"tab2",children:"Security"}),a(e.Tabs.Tab,{value:"tab3",children:"Billing"}),a(e.Tabs.Tab,{value:"tab4",children:"Team"})]}),a(e.Tabs.Panel,{value:"tab1",children:[a("h3",{style:{marginTop:0},children:"Profile Settings"}),a("p",{children:"Update your profile information and photo."})]}),a(e.Tabs.Panel,{value:"tab2",children:[a("h3",{style:{marginTop:0},children:"Security Settings"}),a("p",{children:"Manage your password and two-factor authentication."})]}),a(e.Tabs.Panel,{value:"tab3",children:[a("h3",{style:{marginTop:0},children:"Billing Information"}),a("p",{children:"View and manage your billing details."})]}),a(e.Tabs.Panel,{value:"tab4",children:[a("h3",{style:{marginTop:0},children:"Team Management"}),a("p",{children:"Invite and manage team members."})]})]})},B={render:()=>a("div",{style:{display:"flex",flexDirection:"column",gap:"32px"},children:[a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Small"}),a(e.Tabs.Root,{defaultValue:"tab1","data-size":"sm",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",children:"Small tab panel content"}),a(e.Tabs.Panel,{value:"tab2",children:"Small tab panel content"}),a(e.Tabs.Panel,{value:"tab3",children:"Small tab panel content"})]})]}),a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Medium (Default)"}),a(e.Tabs.Root,{defaultValue:"tab1",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",children:"Medium tab panel content"}),a(e.Tabs.Panel,{value:"tab2",children:"Medium tab panel content"}),a(e.Tabs.Panel,{value:"tab3",children:"Medium tab panel content"})]})]}),a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Large"}),a(e.Tabs.Root,{defaultValue:"tab1","data-size":"lg",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",children:"Large tab panel content"}),a(e.Tabs.Panel,{value:"tab2",children:"Large tab panel content"}),a(e.Tabs.Panel,{value:"tab3",children:"Large tab panel content"})]})]})]})},C={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Dashboard"}),a(e.Tabs.Tab,{value:"tab2",children:"Analytics"}),a(e.Tabs.Tab,{value:"tab3",children:"Reports"}),a(e.Tabs.Tab,{value:"tab4",children:"Settings"}),a(e.Tabs.Tab,{value:"tab5",children:"Users"}),a(e.Tabs.Tab,{value:"tab6",children:"Billing"})]}),a(e.Tabs.Panel,{value:"tab1",children:"Dashboard content"}),a(e.Tabs.Panel,{value:"tab2",children:"Analytics content"}),a(e.Tabs.Panel,{value:"tab3",children:"Reports content"}),a(e.Tabs.Panel,{value:"tab4",children:"Settings content"}),a(e.Tabs.Panel,{value:"tab5",children:"Users content"}),a(e.Tabs.Panel,{value:"tab6",children:"Billing content"})]})};var o=window.React,y=i||{},z=["Default","Controlled","WithDisabledTab","Vertical"];function N({id:t}){let n=u[t],b={...y.args||{},...n.args||{}};return(n.render||(l=>o.createElement(y.component,l)))(b,{args:b,id:t,name:t})}var O=z.map(t=>o.createElement("section",{key:t,className:"ds-story"},o.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),o.createElement("div",{className:"ds-story-body"},o.createElement(N,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(o.createElement(o.Fragment,null,O));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Toast styled by the theme. A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type is success, warning, error or info takes that palette (the build points the scope at it); data-color picks any other palette. Toast tokens hold only the stack's place and width.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Toast
|
|
5
|
+
Use `Loomiere.Toast`, this package's wrapper: it puts the class names on for you (`import { Toast } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Toast`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/toast
|
|
8
8
|
|
|
@@ -49,11 +49,11 @@ export const Default: Story = {
|
|
|
49
49
|
function ToastList() {
|
|
50
50
|
const { toasts } = Toast.useToastManager();
|
|
51
51
|
return toasts.map((toast) => (
|
|
52
|
-
<Toast.Root key={toast.id} toast={toast}
|
|
53
|
-
<Toast.Content
|
|
54
|
-
<Toast.Title
|
|
55
|
-
<Toast.Description
|
|
56
|
-
<Toast.Close
|
|
52
|
+
<Toast.Root key={toast.id} toast={toast}>
|
|
53
|
+
<Toast.Content>
|
|
54
|
+
<Toast.Title />
|
|
55
|
+
<Toast.Description />
|
|
56
|
+
<Toast.Close aria-label="Close">
|
|
57
57
|
<XIcon className="Icon" />
|
|
58
58
|
</Toast.Close>
|
|
59
59
|
</Toast.Content>
|
|
@@ -65,7 +65,7 @@ export const Default: Story = {
|
|
|
65
65
|
<Toast.Provider>
|
|
66
66
|
<ToastButton />
|
|
67
67
|
<Toast.Portal>
|
|
68
|
-
<Toast.Viewport
|
|
68
|
+
<Toast.Viewport>
|
|
69
69
|
<ToastList />
|
|
70
70
|
</Toast.Viewport>
|
|
71
71
|
</Toast.Portal>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var R=Object.create;var m=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var C=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),S=(e,n)=>{for(var s in n)m(e,s,{get:n[s],enumerable:!0})},B=(e,n,s,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of I(n))!N.call(e,r)&&r!==s&&m(e,r,{get:()=>n[r],enumerable:!(a=P(n,r))||a.enumerable});return e};var h=(e,n,s)=>(s=e!=null?R(L(e)):{},B(n||!e||!e.__esModule?m(s,"default",{value:e,enumerable:!0}):s,e));var v=C((z,w)=>{w.exports=window.React});var y=C((G,f)=>{f.exports=window.Loomiere});var T={};S(T,{AutoDismiss:()=>$,Default:()=>j,MultipleToasts:()=>H,Variants:()=>W,VaryingHeights:()=>Z,default:()=>g});var u=h(v(),1),o=h(y(),1);var d=window.React;function t(e,n,s){let{children:a,...r}=n||{};return s!==void 0&&(r.key=s),a===void 0?d.createElement(e,r):Array.isArray(a)?d.createElement(e,r,...a):d.createElement(e,r,a)}var _=d.Fragment;var V={title:"Components/Lib/Toast",component:o.Toast.Provider,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"],decorators:[e=>t("div",{style:{minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center",padding:"2rem"},children:t(e,{})})]},g=V,x=e=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:t("path",{d:"M16.25 5.625L7.5 14.375L3.75 10.625",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),E=e=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:t("path",{d:"M10 6.25V10.625M10 13.75H10.0088M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),A=e=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:t("path",{d:"M10 6.875V10.625M10 13.75H10.0088M8.57465 3.125L2.01215 14.375C1.86431 14.6336 1.78652 14.9254 1.78652 15.2219C1.78652 15.5184 1.86431 15.8102 2.01215 16.0688C2.15999 16.3273 2.37329 16.5445 2.63036 16.6989C2.88743 16.8533 3.18004 16.9393 3.47965 16.9469H16.6046C16.9042 16.9393 17.1968 16.8533 17.4539 16.6989C17.711 16.5445 17.9243 16.3273 18.0721 16.0688C18.22 15.8102 18.2978 15.5184 18.2978 15.2219C18.2978 14.9254 18.22 14.6336 18.0721 14.375L11.5096 3.125C11.3618 2.86645 11.1485 2.64924 10.8914 2.49484C10.6344 2.34044 10.3418 2.25439 10.0421 2.25439C9.74249 2.25439 9.44988 2.34044 9.19281 2.49484C8.93574 2.64924 8.72244 2.86645 8.57465 3.125Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),D=e=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:t("path",{d:"M10 13.125V10M10 6.875H10.0088M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),p=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...e,children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]}),k=["Short message.","A bit longer message that spans two lines.","This is a longer description that intentionally takes more vertical space to demonstrate stacking with varying heights.","An even longer description that should span multiple lines so we can verify the clamped collapsed height and smooth expansion animation when hovering or focusing the viewport."],j={render:()=>{function e(){let s=o.Toast.useToastManager(),[a,r]=u.useState(0);function i(){r(c=>c+1),s.add({title:`Toast ${a+1} created`,description:"This is a toast notification."})}return t("button",{type:"button",className:"Button",onClick:i,children:"Create toast"})}function n(){let{toasts:s}=o.Toast.useToastManager();return s.map(a=>t(o.Toast.Root,{toast:a,children:t(o.Toast.Content,{children:[t(o.Toast.Title,{}),t(o.Toast.Description,{}),t(o.Toast.Close,{"aria-label":"Close",children:t(p,{className:"Icon"})})]})},a.id))}return t(o.Toast.Provider,{children:[t(e,{}),t(o.Toast.Portal,{children:t(o.Toast.Viewport,{children:t(n,{})})})]})}},W={render:()=>{function e(){let s=o.Toast.useToastManager();return t("div",{style:{display:"flex",gap:"8px",flexWrap:"wrap"},children:[t("button",{className:"Button",onClick:()=>s.add({title:"Success",description:"Your changes have been saved successfully.",type:"success"}),children:"Success"}),t("button",{className:"Button",onClick:()=>s.add({title:"Error",description:"Something went wrong. Please try again.",type:"error"}),children:"Error"}),t("button",{className:"Button",onClick:()=>s.add({title:"Warning",description:"Your session will expire in 5 minutes.",type:"warning"}),children:"Warning"}),t("button",{className:"Button",onClick:()=>s.add({title:"Info",description:"A new version is available. Refresh to update.",type:"info"}),children:"Info"})]})}function n(){let{toasts:s}=o.Toast.useToastManager(),a=r=>{switch(r){case"success":return t(x,{className:"Icon"});case"error":return t(E,{className:"Icon"});case"warning":return t(A,{className:"Icon"});case"info":return t(D,{className:"Icon"});default:return null}};return s.map(r=>{let i=r.type;return t(o.Toast.Root,{toast:r,children:t(o.Toast.Content,{children:[t("div",{style:{display:"flex",gap:"0.75rem",alignItems:"flex-start"},children:[i&&a(i),t("div",{style:{flex:1},children:[t(o.Toast.Title,{}),t(o.Toast.Description,{})]})]}),t(o.Toast.Close,{"aria-label":"Close",children:t(p,{className:"Icon"})})]})},r.id)})}return t(o.Toast.Provider,{children:[t(e,{}),t(o.Toast.Portal,{children:t(o.Toast.Viewport,{children:t(n,{})})})]})}},$={render:()=>{function e(){let s=o.Toast.useToastManager(),[a,r]=u.useState(0);function i(){r(c=>c+1),s.add({title:`Auto-dismiss Toast ${a+1}`,description:"This toast will automatically close in 3 seconds.",type:"success",timeout:3e3})}return t("button",{type:"button",className:"Button",onClick:i,children:"Create auto-dismiss toast"})}function n(){let{toasts:s}=o.Toast.useToastManager();return s.map(a=>t(o.Toast.Root,{toast:a,children:t(o.Toast.Content,{children:t("div",{style:{display:"flex",gap:"0.75rem",alignItems:"flex-start"},children:[t(x,{className:"Icon"}),t("div",{style:{flex:1},children:[t(o.Toast.Title,{}),t(o.Toast.Description,{})]})]})})},a.id))}return t(o.Toast.Provider,{children:[t(e,{}),t(o.Toast.Portal,{children:t(o.Toast.Viewport,{children:t(n,{})})})]})}},H={render:()=>{function e(){let s=o.Toast.useToastManager(),[a,r]=u.useState(0);function i(){r(c=>c+1),s.add({title:`Toast #${a+1}`,description:`This is toast number ${a+1}.`})}return t("button",{type:"button",className:"Button",onClick:i,children:"Add toast"})}function n(){let{toasts:s}=o.Toast.useToastManager();return s.map(a=>t(o.Toast.Root,{toast:a,children:t(o.Toast.Content,{children:[t(o.Toast.Title,{}),t(o.Toast.Description,{}),t(o.Toast.Close,{"aria-label":"Close",children:t(p,{className:"Icon"})})]})},a.id))}return t(o.Toast.Provider,{children:[t(e,{}),t(o.Toast.Portal,{children:t(o.Toast.Viewport,{children:t(n,{})})})]})}},Z={render:()=>{function e(){let s=o.Toast.useToastManager(),[a,r]=u.useState(0);function i(){r(M=>M+1);let c=k[Math.floor(Math.random()*k.length)];s.add({title:`Toast ${a+1} created`,description:c})}return t("button",{type:"button",className:"Button",onClick:i,children:"Create varying height toast"})}function n(){let{toasts:s}=o.Toast.useToastManager();return s.map(a=>t(o.Toast.Root,{toast:a,children:t(o.Toast.Content,{children:[t(o.Toast.Title,{}),t(o.Toast.Description,{}),t(o.Toast.Close,{"aria-label":"Close",children:t(p,{className:"Icon"})})]})},a.id))}return t(o.Toast.Provider,{children:[t(e,{}),t(o.Toast.Portal,{children:t(o.Toast.Viewport,{children:t(n,{})})})]})}};var l=window.React,b=g||{},F=["Default","Variants","AutoDismiss","MultipleToasts"];function O({id:e}){let n=T[e],s={...b.args||{},...n.args||{}};return(n.render||(r=>l.createElement(b.component,r)))(s,{args:s,id:e,name:e})}var Y=F.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(O,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,Y));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size. Pressed, it takes its emphasis level's pressed look (standard unless data-emphasis on it or its group says otherwise), so the brand's emphasis ladder decides how loud an "on" toggle is.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Toggle
|
|
5
|
+
Use `Loomiere.Toggle`, this package's wrapper: it puts the class names on for you (`import { Toggle } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Toggle`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/toggle
|
|
8
8
|
|
|
@@ -21,7 +21,7 @@ From the Toggle stories (`Default`):
|
|
|
21
21
|
```tsx
|
|
22
22
|
export const Default: Story = {
|
|
23
23
|
render: () => (
|
|
24
|
-
<Toggle
|
|
24
|
+
<Toggle>
|
|
25
25
|
<HeartIcon />
|
|
26
26
|
Like
|
|
27
27
|
</Toggle>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var T=Object.create;var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var y=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),E=(t,o)=>{for(var s in o)c(t,s,{get:o[s],enumerable:!0})},L=(t,o,s,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of b(o))!R.call(t,n)&&n!==s&&c(t,n,{get:()=>o[n],enumerable:!(a=k(o,n))||a.enumerable});return t};var x=(t,o,s)=>(s=t!=null?T(C(t)):{},L(o||!t||!t.__esModule?c(s,"default",{value:t,enumerable:!0}):s,t));var v=y((H,f)=>{f.exports=window.React});var h=y((Z,u)=>{u.exports=window.Loomiere});var m={};E(m,{Controlled:()=>F,Default:()=>I,DefaultPressed:()=>O,Disabled:()=>N,IconOnly:()=>B,Sizes:()=>j,TextOnly:()=>D,default:()=>g});var w=x(v(),1),r=x(h(),1);var d=window.React;function e(t,o,s){let{children:a,...n}=o||{};return s!==void 0&&(n.key=s),a===void 0?d.createElement(t,n):Array.isArray(a)?d.createElement(t,n,...a):d.createElement(t,n,a)}var q=d.Fragment;var M={title:"Components/Lib/Toggle",component:r.Toggle,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},g=M,l=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M10 17.5s-6-4.5-6-8c0-2.2 1.8-4 4-4 1.1 0 2.1.5 2.8 1.2L10 8l.8-1.3C11.5 5.5 12.5 5 13.6 5c2.2 0 4 1.8 4 4 0 3.5-6 8-6 8z"})}),p=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M10 2l2.5 5 5.5.5-4 3.5 1.5 5.5L10 13.5l-5.5 3 1.5-5.5-4-3.5 5.5-.5L10 2z"})}),P=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M15 6.5a5 5 0 0 0-10 0c0 5-2 6.5-2 6.5h14s-2-1.5-2-6.5zM11.5 16.5a1.5 1.5 0 0 1-3 0"})}),z=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M5 3h10v14l-5-3-5 3V3z"})}),I={render:()=>e(r.Toggle,{children:[e(l,{}),"Like"]})},B={render:()=>e("div",{style:{display:"flex",gap:"8px"},children:[e(r.Toggle,{"aria-label":"Like",children:e(l,{})}),e(r.Toggle,{"aria-label":"Favorite",children:e(p,{})}),e(r.Toggle,{"aria-label":"Notifications",children:e(P,{})}),e(r.Toggle,{"aria-label":"Bookmark",children:e(z,{})})]})},D={render:()=>e("div",{style:{display:"flex",gap:"8px"},children:[e(r.Toggle,{children:"Subscribe"}),e(r.Toggle,{children:"Follow"}),e(r.Toggle,{children:"Mute"})]})},F={render:()=>{let[t,o]=w.useState(!1);return e("div",{style:{display:"flex",flexDirection:"column",gap:"16px",alignItems:"center"},children:[e(r.Toggle,{pressed:t,onPressedChange:o,children:[e(l,{}),t?"Liked":"Like"]}),e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Status: ",t?"Pressed":"Not pressed"]})]})}},O={render:()=>e(r.Toggle,{defaultPressed:!0,children:[e(p,{}),"Favorite"]})},N={render:()=>e("div",{style:{display:"flex",gap:"8px"},children:[e(r.Toggle,{disabled:!0,children:[e(l,{}),"Like"]}),e(r.Toggle,{disabled:!0,defaultPressed:!0,children:[e(p,{}),"Favorite"]})]})},j={render:()=>e("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e(r.Toggle,{"data-size":"sm",children:[e(l,{}),"Small"]}),e(r.Toggle,{children:[e(l,{}),"Medium"]}),e(r.Toggle,{"data-size":"lg",children:[e(l,{}),"Large"]})]})};var i=window.React,S=g||{},W=["Default","IconOnly","TextOnly","Controlled"];function A({id:t}){let o=m[t],s={...S.args||{},...o.args||{}};return(o.render||(n=>i.createElement(S.component,n)))(s,{args:s,id:t,name:t})}var V=W.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(A,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,V));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI ToggleGroup styled by the theme. No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the toggles are Toggle, with item corners so they nest inside the strip's.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.ToggleGroup
|
|
5
|
+
Use `Loomiere.ToggleGroup`, this package's wrapper: it puts the class names on for you (`import { ToggleGroup } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.ToggleGroup`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/toggle-group
|
|
8
8
|
|
|
@@ -22,14 +22,14 @@ From the ToggleGroup stories (`Default`):
|
|
|
22
22
|
```tsx
|
|
23
23
|
export const Default: Story = {
|
|
24
24
|
render: () => (
|
|
25
|
-
<ToggleGroup
|
|
26
|
-
<Toggle value="bold"
|
|
25
|
+
<ToggleGroup defaultValue={['bold']}>
|
|
26
|
+
<Toggle value="bold" aria-label="Bold">
|
|
27
27
|
<BoldIcon />
|
|
28
28
|
</Toggle>
|
|
29
|
-
<Toggle value="italic"
|
|
29
|
+
<Toggle value="italic" aria-label="Italic">
|
|
30
30
|
<ItalicIcon />
|
|
31
31
|
</Toggle>
|
|
32
|
-
<Toggle value="underline"
|
|
32
|
+
<Toggle value="underline" aria-label="Underline">
|
|
33
33
|
<UnderlineIcon />
|
|
34
34
|
</Toggle>
|
|
35
35
|
</ToggleGroup>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var R=Object.create;var g=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var v=(t,l)=>()=>(l||t((l={exports:{}}).exports,l),l.exports),E=(t,l)=>{for(var a in l)g(t,a,{get:l[a],enumerable:!0})},V=(t,l,a,n)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of B(l))!A.call(t,r)&&r!==a&&g(t,r,{get:()=>l[r],enumerable:!(n=I(l,r))||n.enumerable});return t};var m=(t,l,a)=>(a=t!=null?R(k(t)):{},V(l||!t||!t.__esModule?g(a,"default",{value:t,enumerable:!0}):a,t));var y=v((F,f)=>{f.exports=window.React});var b=v(($,x)=>{x.exports=window.Loomiere});var h={};E(h,{Default:()=>D,Disabled:()=>W,MultipleSelection:()=>j,SingleSelection:()=>P,WithText:()=>H,default:()=>c});var T=m(y(),1),o=m(b(),1);var s=window.React;function e(t,l,a){let{children:n,...r}=l||{};return a!==void 0&&(r.key=a),n===void 0?s.createElement(t,r):Array.isArray(n)?s.createElement(t,r,...n):s.createElement(t,r,n)}var J=s.Fragment;var z={title:"Components/Lib/ToggleGroup",component:o.ToggleGroup,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},c=z,d=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),p=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),u=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),w=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),M=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),S=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),G=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h14M3 12h14M3 16h14"})}),D={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})},P={render:()=>{let[t,l]=T.useState(["left"]);return e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Only one can be selected at a time"}),e(o.ToggleGroup,{multiple:!1,value:t,onValueChange:l,children:[e(o.Toggle,{value:"left","aria-label":"Align left",children:e(w,{})}),e(o.Toggle,{value:"center","aria-label":"Align center",children:e(M,{})}),e(o.Toggle,{value:"right","aria-label":"Align right",children:e(S,{})}),e(o.Toggle,{value:"justify","aria-label":"Align justify",children:e(G,{})})]}),e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:["Selected: ",t[0]||"None"]})]})}},j={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Click multiple buttons - they can all be active at once"}),e(o.ToggleGroup,{multiple:!0,defaultValue:["bold","italic"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})]})},H={render:()=>e(o.ToggleGroup,{defaultValue:["left"],children:[e(o.Toggle,{value:"left",children:[e(w,{}),"Left"]}),e(o.Toggle,{value:"center",children:[e(M,{}),"Center"]}),e(o.Toggle,{value:"right",children:[e(S,{}),"Right"]})]})},W={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic",disabled:!0,"aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})};var i=window.React,C=c||{},L=["Default","SingleSelection","MultipleSelection","WithText"];function N({id:t}){let l=h[t],a={...C.args||{},...l.args||{}};return(l.render||(r=>i.createElement(C.component,r)))(a,{args:a,id:t,name:t})}var O=L.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(N,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,O));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Toolbar styled by the theme. The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects and inputs inside it keep their own styles; only the field's width is the toolbar's.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Toolbar
|
|
5
|
+
Use `Loomiere.Toolbar`, this package's wrapper: it puts the class names on for you (`import { Toolbar } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Toolbar`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/toolbar
|
|
8
8
|
|
|
@@ -25,36 +25,36 @@ From the Toolbar stories (`Default`):
|
|
|
25
25
|
```tsx
|
|
26
26
|
export const Default: Story = {
|
|
27
27
|
render: () => (
|
|
28
|
-
<Toolbar.Root
|
|
28
|
+
<Toolbar.Root>
|
|
29
29
|
<ToggleGroup className="ToolbarGroup" multiple>
|
|
30
|
-
<Toggle value="bold"
|
|
30
|
+
<Toggle value="bold" aria-label="Bold">
|
|
31
31
|
<BoldIcon />
|
|
32
32
|
</Toggle>
|
|
33
|
-
<Toggle value="italic"
|
|
33
|
+
<Toggle value="italic" aria-label="Italic">
|
|
34
34
|
<ItalicIcon />
|
|
35
35
|
</Toggle>
|
|
36
|
-
<Toggle value="underline"
|
|
36
|
+
<Toggle value="underline" aria-label="Underline">
|
|
37
37
|
<UnderlineIcon />
|
|
38
38
|
</Toggle>
|
|
39
39
|
</ToggleGroup>
|
|
40
40
|
|
|
41
|
-
<Toolbar.Separator
|
|
41
|
+
<Toolbar.Separator />
|
|
42
42
|
|
|
43
43
|
<ToggleGroup className="ToolbarGroup" defaultValue={['left']}>
|
|
44
|
-
<Toggle value="left"
|
|
44
|
+
<Toggle value="left" aria-label="Align left">
|
|
45
45
|
<AlignLeftIcon />
|
|
46
46
|
</Toggle>
|
|
47
|
-
<Toggle value="center"
|
|
47
|
+
<Toggle value="center" aria-label="Align center">
|
|
48
48
|
<AlignCenterIcon />
|
|
49
49
|
</Toggle>
|
|
50
|
-
<Toggle value="right"
|
|
50
|
+
<Toggle value="right" aria-label="Align right">
|
|
51
51
|
<AlignRightIcon />
|
|
52
52
|
</Toggle>
|
|
53
53
|
</ToggleGroup>
|
|
54
54
|
|
|
55
|
-
<Toolbar.Separator
|
|
55
|
+
<Toolbar.Separator />
|
|
56
56
|
|
|
57
|
-
<Toolbar.Button
|
|
57
|
+
<Toolbar.Button>
|
|
58
58
|
Save
|
|
59
59
|
</Toolbar.Button>
|
|
60
60
|
</Toolbar.Root>
|