import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./TokyoUIClose-BsMsQk2w.js";import{n as o,t as s}from"./IconButton-DZfzVk_P.js";import{n as c,t as l}from"./LayoutFlex-BKX2c6Gj.js";import{n as u,t as d}from"./Tooltip-F-35Ygr4.js";import{n as f,t as p}from"./TokyoUIFav-vlMA44YV.js";import{n as m,t as h}from"./TokyoUINotebook-BfKvwlRS.js";var g,_,v,y,b,x,S,C,w,T;t((()=>{u(),g=e(n(),1),c(),o(),f(),i(),m(),_=r(),v={title:`Components/Tooltip`,component:d,parameters:{layout:`centered`,docs:{story:{inline:!1,height:250},description:{component:`Also see [Composing Popovers](/docs/guides-composing-popovers--docs) for usage with other popovers.`}},preventIframeFromScrollingParent:!0},decorators:[e=>(0,_.jsx)(`div`,{style:{margin:`100px 0`},children:e()})],args:{children:(0,_.jsx)(s,{variant:`ghost`,svg:(0,_.jsx)(p,{}),assistiveText:`Favorite`}),content:`This is a tooltip`},play:async({canvas:e,step:t})=>{await t(`Focus on the trigger`,async()=>{await(await e.findByRole(`button`)).focus()})}},y={name:`Tooltip`},b={args:{content:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`}},x={parameters:{chromatic:{disableSnapshot:!0}},render:()=>(0,_.jsxs)(l,{gap:`4`,children:[(0,_.jsx)(d,{content:`This is a tooltip`,children:(0,_.jsx)(s,{variant:`ghost`,svg:(0,_.jsx)(p,{}),assistiveText:`Icon button`})}),(0,_.jsx)(d,{content:`This is a tooltip`,children:(0,_.jsx)(s,{variant:`ghost`,svg:(0,_.jsx)(a,{}),assistiveText:`Icon button`})}),(0,_.jsx)(d,{content:`This is a tooltip`,children:(0,_.jsx)(s,{variant:`ghost`,svg:(0,_.jsx)(h,{}),assistiveText:`Icon button`})})]}),play:()=>{}},S={parameters:{chromatic:{disableSnapshot:!0}},args:{trigger:`hover-and-touch`}},C={parameters:{chromatic:{disableSnapshot:!0}},render:()=>(0,_.jsx)(d,{content:`This is a tooltip`,children:(0,_.jsx)((0,g.forwardRef)((e,t)=>(0,_.jsx)(`button`,{...e,ref:t})),{children:`Custom child`})})},w={parameters:{chromatic:{disableSnapshot:!0}},args:{content:`Tooltip content`,children:(0,_.jsx)(s,{svg:(0,_.jsx)(p,{}),assistiveText:`Icon button`}),trigger:`hover`,side:`top`},argTypes:{content:{control:`text`},children:{control:!1},dataset:{control:`object`}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  name: 'Tooltip'
}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  args: {
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
  }
}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  render: () => <LayoutFlex gap="4">
            <Tooltip content="This is a tooltip">
                <IconButton variant="ghost" svg={<TokyoUIFav />} assistiveText="Icon button" />
            </Tooltip>
            <Tooltip content="This is a tooltip">
                <IconButton variant="ghost" svg={<TokyoUIClose />} assistiveText="Icon button" />
            </Tooltip>
            <Tooltip content="This is a tooltip">
                <IconButton variant="ghost" svg={<TokyoUINotebook />} assistiveText="Icon button" />
            </Tooltip>
        </LayoutFlex>,
  play: () => {}
}`,...x.parameters?.docs?.source},description:{story:`Tooltips appear after a short delay when hovering the trigger, or instantly when using keyboard focus.
This delay is called the "warmup period", and it is a global timer, shared by all tooltips.
Once a tooltip is displayed, other tooltips display immediately. If the user waits for the
"cooldown period" before hovering another element, the warmup timer restarts.`,...x.parameters?.docs?.description}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  args: {
    trigger: 'hover-and-touch'
  }
}`,...S.parameters?.docs?.source},description:{story:"By default, tooltips only appear on hover and focus. For mobile devices, you can enable touch support\nby setting the `trigger` prop to `hover-and-touch`. When touched, the tooltip will appear and stay\nvisible until the user taps outside of it. Alternatively, user can press and hold, in which case\ntooltip will be hidden immediately after release.",...S.parameters?.docs?.description}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  render: () => {
    const CustomButton = forwardRef<HTMLButtonElement, {
      children: ReactNode;
    }>((props, ref) => {
      return <button {...props} ref={ref} />;
    });
    return <Tooltip content="This is a tooltip">
                <CustomButton>Custom child</CustomButton>
            </Tooltip>;
  }
}`,...C.parameters?.docs?.source},description:{story:`The tooltip works out of the box with html elements and DS components as children.

If you need to wrap a custom component with the tooltip, component should forward
the ref and spread props to the underlying DOM node:

\`\`\`tsx
const CustomButton = forwardRef<HTMLButtonElement, { children: ReactNode }>(
    (props, ref) => {
        return <button {...props} ref={ref} />;
    },
);

<Tooltip content="This is a tooltip">
    <CustomButton>Custom child</CustomButton>
</Tooltip>
\`\`\``,...C.parameters?.docs?.description}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  args: {
    content: 'Tooltip content',
    children: <IconButton svg={<TokyoUIFav />} assistiveText="Icon button" />,
    trigger: 'hover',
    side: 'top'
  },
  argTypes: {
    content: {
      control: 'text'
    },
    children: {
      control: false
    },
    dataset: {
      control: 'object'
    }
  }
}`,...w.parameters?.docs?.source}}},T=[`Basic`,`LongContent`,`Delay`,`UsingOnMobile`,`CustomChildComponent`,`Playground`]}))();export{y as Basic,C as CustomChildComponent,x as Delay,b as LongContent,w as Playground,S as UsingOnMobile,T as __namedExportsOrder,v as default};