@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
|
|
15
|
+
(()=>{var f=Object.create;var p=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var C=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),M=(o,a)=>{for(var l in a)p(o,l,{get:a[l],enumerable:!0})},k=(o,a,l,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of w(a))!R.call(o,r)&&r!==l&&p(o,r,{get:()=>a[r],enumerable:!(n=B(a,r))||n.enumerable});return o};var G=(o,a,l)=>(l=o!=null?f(y(o)):{},k(a||!o||!o.__esModule?p(l,"default",{value:o,enumerable:!0}):l,o));var b=C((O,v)=>{v.exports=window.Loomiere});var m={};M(m,{Compact:()=>L,Default:()=>W,WithGroups:()=>z,WithLink:()=>N,WithSelect:()=>E,default:()=>d});var t=G(b(),1);var g=window.React;function e(o,a,l){let{children:n,...r}=a||{};return l!==void 0&&(r.key=l),n===void 0?g.createElement(o,r):Array.isArray(n)?g.createElement(o,r,...n):g.createElement(o,r,n)}var U=g.Fragment;var A={title:"Components/Lib/Toolbar",component:t.Toolbar.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=A,s=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),c=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),u=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),T=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),x=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),I=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),P=o=>e("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...o,children:e("path",{d:"M2 4l4 4 4-4"})}),h=o=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 8l3 3 7-7"})}),W={render:()=>e(t.Toolbar.Root,{children:[e(t.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(t.Toggle,{value:"bold","aria-label":"Bold",children:e(s,{})}),e(t.Toggle,{value:"italic","aria-label":"Italic",children:e(c,{})}),e(t.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]}),e(t.Toolbar.Separator,{}),e(t.ToggleGroup,{className:"ToolbarGroup",defaultValue:["left"],children:[e(t.Toggle,{value:"left","aria-label":"Align left",children:e(T,{})}),e(t.Toggle,{value:"center","aria-label":"Align center",children:e(x,{})}),e(t.Toggle,{value:"right","aria-label":"Align right",children:e(I,{})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Button,{children:"Save"})]})},E={render:()=>e(t.Toolbar.Root,{children:[e(t.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(t.Toggle,{value:"bold","aria-label":"Bold",children:e(s,{})}),e(t.Toggle,{value:"italic","aria-label":"Italic",children:e(c,{})})]}),e(t.Toolbar.Separator,{}),e(t.Select.Root,{defaultValue:"helvetica",children:[e(t.Select.Trigger,{className:"Button",style:{minWidth:"140px"},children:[e(t.Select.Value,{}),e(t.Select.Icon,{children:e(P,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.Item,{value:"helvetica",children:[e(t.Select.ItemIndicator,{children:e(h,{})}),e(t.Select.ItemText,{children:"Helvetica"})]}),e(t.Select.Item,{value:"arial",children:[e(t.Select.ItemIndicator,{children:e(h,{})}),e(t.Select.ItemText,{children:"Arial"})]}),e(t.Select.Item,{value:"times",children:[e(t.Select.ItemIndicator,{children:e(h,{})}),e(t.Select.ItemText,{children:"Times New Roman"})]})]})})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Button,{children:"Apply"})]})},N={render:()=>e(t.Toolbar.Root,{children:[e(t.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(t.Toggle,{value:"bold","aria-label":"Bold",children:e(s,{})}),e(t.Toggle,{value:"italic","aria-label":"Italic",children:e(c,{})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Link,{href:"#",children:"Last edited 2h ago"})]})},z={render:()=>e(t.Toolbar.Root,{children:[e(t.Toolbar.Group,{"aria-label":"Text formatting",children:[e(t.Toolbar.Button,{"aria-label":"Bold",children:e(s,{})}),e(t.Toolbar.Button,{"aria-label":"Italic",children:e(c,{})}),e(t.Toolbar.Button,{"aria-label":"Underline",children:e(u,{})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Group,{"aria-label":"Alignment",children:[e(t.Toolbar.Button,{"aria-label":"Align left",children:e(T,{})}),e(t.Toolbar.Button,{"aria-label":"Align center",children:e(x,{})}),e(t.Toolbar.Button,{"aria-label":"Align right",children:e(I,{})})]})]})},L={render:()=>e(t.Toolbar.Root,{style:{padding:"var(--sl-space-1)",gap:"var(--sl-space-1)"},children:[e(t.ToggleGroup,{className:"ToolbarGroup",multiple:!0,style:{gap:"2px"},children:[e(t.Toggle,{value:"bold","aria-label":"Bold",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(s,{style:{width:"16px",height:"16px"}})}),e(t.Toggle,{value:"italic","aria-label":"Italic",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(c,{style:{width:"16px",height:"16px"}})}),e(t.Toggle,{value:"underline","aria-label":"Underline",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(u,{style:{width:"16px",height:"16px"}})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Button,{"data-size":"xs",children:"Save"})]})};var i=window.React,S=d||{},V=["Default","WithSelect","WithLink","WithGroups"];function H({id:o}){let a=m[o],l={...S.args||{},...a.args||{}};return(a.render||(r=>i.createElement(S.component,r)))(l,{args:l,id:o,name:o})}var D=V.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(H,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Tooltip styled by the theme. The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip reads as a label laid over the page. Motion is the popup's; only the width limit is the tooltip's own (tokens/component/tooltip.json).
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Tooltip
|
|
5
|
+
Use `Loomiere.Tooltip`, this package's wrapper: it puts the class names on for you (`import { Tooltip } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Tooltip`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/tooltip
|
|
8
8
|
|
|
@@ -29,9 +29,9 @@ export const Default: Story = {
|
|
|
29
29
|
Hover me
|
|
30
30
|
</Tooltip.Trigger>
|
|
31
31
|
<Tooltip.Portal>
|
|
32
|
-
<Tooltip.Positioner
|
|
33
|
-
<Tooltip.Popup
|
|
34
|
-
<Tooltip.Arrow
|
|
32
|
+
<Tooltip.Positioner sideOffset={8}>
|
|
33
|
+
<Tooltip.Popup>
|
|
34
|
+
<Tooltip.Arrow>
|
|
35
35
|
<TooltipArrow />
|
|
36
36
|
</Tooltip.Arrow>
|
|
37
37
|
This is a helpful tooltip
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var u=Object.create;var T=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var
|
|
15
|
+
(()=>{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));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|