@scattered-light/loomiere-mojave 0.5.3 → 0.7.0

package/dist/exports/design-system/components/Tooltip/preview.html

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var u=Object.create;var T=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var A=(e,i)=>()=>(i||e((i={exports:{}}).exports,i),i.exports),h=(e,i)=>{for(var r in i)T(e,r,{get:i[r],enumerable:!0})},R=(e,i,r,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of w(i))!y.call(e,l)&&l!==r&&T(e,l,{get:()=>i[l],enumerable:!(p=f(i,l))||p.enumerable});return e};var v=(e,i,r)=>(r=e!=null?u(N(e)):{},R(i||!e||!e.__esModule?T(r,"default",{value:e,enumerable:!0}):r,e));var P=A((M,d)=>{d.exports=window.Loomiere.Base});var c={};h(c,{Default:()=>B,LongContent:()=>S,OnText:()=>E,Placement:()=>C,WithDelay:()=>b,WithIcon:()=>O,WithoutArrow:()=>D,default:()=>m});var t=v(P(),1);var n=window.React;function o(e,i,r){let{children:p,...l}=i||{};return r!==void 0&&(l.key=r),p===void 0?n.createElement(e,l):Array.isArray(p)?n.createElement(e,l,...p):n.createElement(e,l,p)}var W=n.Fragment;var x={title:"Components/Tooltip",component:t.Tooltip.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=x;function s(e){return o("svg",{width:"12",height:"6",viewBox:"0 0 12 6",fill:"none",...e,children:o("path",{d:"M0 6L6 0L12 6H0Z"})})}var q=e=>o("svg",{width:"20",height:"20",viewBox:"0 -960 960 960",fill:"currentColor",...e,children:o("path",{d:"M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"})}),B={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This is a helpful tooltip"]})})})]})},O={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button","data-variant":"ghost","aria-label":"More information",style:{padding:"var(--sl-space-2)",minWidth:"40px",display:"flex",alignItems:"center",justifyContent:"center"},children:o(q,{})}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Additional information about this feature"]})})})]})},S={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover for details"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This is a longer tooltip with more detailed information. It will wrap to multiple lines when it exceeds the maximum width."]})})})]})},C={render:()=>o("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"80px",padding:"80px"},children:[o("div",{style:{gridColumn:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Top"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"top",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on top"]})})})]})}),o("div",{style:{gridColumn:"1",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Left"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"left",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on left"]})})})]})}),o("div",{style:{gridColumn:"3",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Right"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"right",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on right"]})})})]})}),o("div",{style:{gridColumn:"2",gridRow:"3"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Bottom"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"bottom",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on bottom"]})})})]})})]})},b={render:()=>o("div",{style:{display:"flex",gap:"16px"},children:[o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:0,children:"No delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears immediately"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:500,children:"500ms delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears after 500ms"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:1e3,children:"1s delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears after 1 second"]})})})]})]})},E={render:()=>o("div",{style:{maxWidth:"400px",fontSize:"16px",lineHeight:"1.6"},children:o("p",{children:["Tooltips can be attached to inline text elements."," ",o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{style:{textDecoration:"underline",textDecorationStyle:"dotted",cursor:"help",background:"none",border:"none",padding:0,font:"inherit",color:"var(--sl-text-accent)"},children:"Hover this text"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This provides additional context"]})})})]})," ","to see more information without leaving the page."]})})},D={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:"Tooltip without an arrow"})})})]})};var a=window.React,g=m||{},I=["Default","WithIcon","LongContent","Placement"];function Z({id:e}){let i=c[e],r={...g.args||{},...i.args||{}};return(i.render||(l=>a.createElement(g.component,l)))(r,{args:r,id:e,name:e})}var H=I.map(e=>a.createElement("section",{key:e,className:"ds-story"},a.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),a.createElement("div",{className:"ds-story-body"},a.createElement(Z,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(a.createElement(a.Fragment,null,H));})();
+(()=>{var u=Object.create;var T=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var R=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),v=(e,r)=>{for(var i in r)T(e,i,{get:r[i],enumerable:!0})},x=(e,r,i,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of w(r))!h.call(e,l)&&l!==i&&T(e,l,{get:()=>r[l],enumerable:!(n=f(r,l))||n.enumerable});return e};var A=(e,r,i)=>(i=e!=null?u(y(e)):{},x(r||!e||!e.__esModule?T(i,"default",{value:e,enumerable:!0}):i,e));var c=R((M,m)=>{m.exports=window.Loomiere});var g={};v(g,{Default:()=>B,LongContent:()=>S,OnText:()=>E,Placement:()=>b,WithDelay:()=>C,WithIcon:()=>N,WithoutArrow:()=>D,default:()=>d});var t=A(c(),1);var a=window.React;function o(e,r,i){let{children:n,...l}=r||{};return i!==void 0&&(l.key=i),n===void 0?a.createElement(e,l):Array.isArray(n)?a.createElement(e,l,...n):a.createElement(e,l,n)}var W=a.Fragment;var q={title:"Components/Lib/Tooltip",component:t.Tooltip.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=q;function p(e){return o("svg",{width:"12",height:"6",viewBox:"0 0 12 6",fill:"none",...e,children:o("path",{d:"M0 6L6 0L12 6H0Z"})})}var O=e=>o("svg",{width:"20",height:"20",viewBox:"0 -960 960 960",fill:"currentColor",...e,children:o("path",{d:"M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"})}),B={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"This is a helpful tooltip"]})})})]})},N={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button","data-variant":"ghost","aria-label":"More information",style:{padding:"var(--sl-space-2)",minWidth:"40px",display:"flex",alignItems:"center",justifyContent:"center"},children:o(O,{})}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Additional information about this feature"]})})})]})},S={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover for details"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"This is a longer tooltip with more detailed information. It will wrap to multiple lines when it exceeds the maximum width."]})})})]})},b={render:()=>o("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"80px",padding:"80px"},children:[o("div",{style:{gridColumn:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Top"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{side:"top",sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Tooltip on top"]})})})]})}),o("div",{style:{gridColumn:"1",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Left"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{side:"left",sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Tooltip on left"]})})})]})}),o("div",{style:{gridColumn:"3",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Right"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{side:"right",sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Tooltip on right"]})})})]})}),o("div",{style:{gridColumn:"2",gridRow:"3"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Bottom"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{side:"bottom",sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Tooltip on bottom"]})})})]})})]})},C={render:()=>o("div",{style:{display:"flex",gap:"16px"},children:[o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:0,children:"No delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Appears immediately"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:500,children:"500ms delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Appears after 500ms"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:1e3,children:"1s delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Appears after 1 second"]})})})]})]})},E={render:()=>o("div",{style:{maxWidth:"400px",fontSize:"16px",lineHeight:"1.6"},children:o("p",{children:["Tooltips can be attached to inline text elements."," ",o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{style:{textDecoration:"underline",textDecorationStyle:"dotted",cursor:"help",background:"none",border:"none",padding:0,font:"inherit",color:"var(--sl-text-accent)"},children:"Hover this text"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"This provides additional context"]})})})]})," ","to see more information without leaving the page."]})})},D={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:"Tooltip without an arrow"})})})]})};var s=window.React,P=d||{},I=["Default","WithIcon","LongContent","Placement"];function L({id:e}){let r=g[e],i={...P.args||{},...r.args||{}};return(r.render||(l=>s.createElement(P.component,l)))(i,{args:i,id:e,name:e})}var Z=I.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(L,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,Z));})();
 
 </script>
 </body>