@v-miniapp/ui-react 1.0.40 → 1.0.45

package/dist-storybook/assets/toast.stories-iWAToAZA.js

@@ -0,0 +1,201 @@
+import{j as o}from"./iframe-CQAwSt4E.js";import{T as M,S as k,M as y,P as N,a as T}from"./blocks-BuaOUtiH.js";import{T as e,a as j}from"./toast-provider-DurnMJhd.js";import{B as s}from"./button-CL7GeC23.js";import{t}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";import"./classname-CUR_zgkh.js";import"./icon-DdQsMyRa.js";import"./colors-_6nFGM3e.js";import"./typography-DEpAJl_i.js";import"./react-hufnxGVs.js";const D=()=>{const n=`
+## ${t("common.table.title")}
+
+| ${t("common.table.name")} | ${t("common.table.type")} | ${t("common.table.required")} | ${t("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`type\` | \`'neutral' \\| 'informative' \\| 'positive' \\| 'negative'\` | ${t("common.table.no")} | ${t("components.toast.typeDescription")} |
+| \`message\` | \`ReactNode\` | ${t("common.table.yes")} | ${t("components.toast.messageDescription")} |
+| \`closeAction\` | \`boolean\` | ${t("common.table.no")} | ${t("components.toast.closeActionDescription")} |
+| \`onCloseActionClick\` | \`() => void\` | ${t("common.table.no")} | ${t("components.toast.onCloseActionClickDescription")} |
+| \`action\` | \`string\` | ${t("common.table.no")} | ${t("components.toast.actionDescription")} |
+| \`onActionClick\` | \`() => void\` | ${t("common.table.no")} | ${t("components.toast.onActionClickDescription")} |
+| \`icon\` | \`IIconProps \\| ReactNode\` | ${t("common.table.no")} | ${t("components.toast.iconDescription")} |
+| \`className\` | \`string\` | ${t("common.table.no")} | ${t("components.toast.classNameDescription")} |
+| \`...props\` | \`ComponentProps<'div'>\` | ${t("common.table.no")} | ${t("components.toast.propsDescription")} |
+  `;return o.jsxs(o.Fragment,{children:[o.jsx(M,{}),o.jsx(k,{}),o.jsx(y,{children:t("components.toast.description")}),o.jsx(N,{}),o.jsx(y,{children:n}),o.jsx(T,{})]})},_={title:"Components/Toast",component:e,parameters:{layout:"padded",docs:{page:D}},tags:["autodocs"],decorators:[n=>o.jsxs(o.Fragment,{children:[o.jsx(n,{}),o.jsx(j,{})]})],argTypes:{type:{control:"select",options:["neutral","informative","positive","negative"],description:t("components.toast.argTypes.typeDescription"),table:{type:{summary:"IToastType"},defaultValue:{summary:"informative"}}},message:{control:"text",description:t("components.toast.argTypes.messageDescription"),table:{type:{summary:"ReactNode"}}},closeAction:{control:"boolean",description:t("components.toast.argTypes.closeActionDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},onCloseActionClick:{action:"close clicked",description:t("components.toast.argTypes.onCloseActionClickDescription"),table:{type:{summary:"() => void"}}},action:{control:"text",description:t("components.toast.argTypes.actionDescription"),table:{type:{summary:"string"}}},onActionClick:{action:"action clicked",description:t("components.toast.argTypes.onActionClickDescription"),table:{type:{summary:"() => void"}}},icon:{control:!1,description:t("components.toast.argTypes.iconDescription"),table:{type:{summary:"IIconProps | ReactNode"}}}}},a={storyName:t("components.toast.stories.default.title"),args:{type:"informative",message:t("components.toast.default.message")}},i={storyName:t("components.toast.stories.types.title"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(e,{type:"neutral",message:t("components.toast.types.neutral")}),o.jsx(e,{type:"informative",message:t("components.toast.types.informative")}),o.jsx(e,{type:"positive",message:t("components.toast.types.positive")}),o.jsx(e,{type:"negative",message:t("components.toast.types.negative")})]})},c={storyName:t("components.toast.stories.informative.title"),args:{type:"informative",message:t("components.toast.informative.message")}},m={storyName:t("components.toast.stories.positive.title"),args:{type:"positive",message:t("components.toast.positive.message")}},r={storyName:t("components.toast.stories.negative.title"),args:{type:"negative",message:t("components.toast.negative.message")}},p={storyName:t("components.toast.stories.neutral.title"),args:{type:"neutral",message:t("components.toast.neutral.message")}},l={storyName:t("components.toast.stories.withAction.title"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(e,{type:"informative",message:t("components.toast.withAction.informativeMessage"),action:t("components.toast.withAction.informativeAction"),onActionClick:()=>{console.log("Action clicked")}}),o.jsx(e,{type:"positive",message:t("components.toast.withAction.positiveMessage"),action:t("components.toast.withAction.positiveAction"),onActionClick:()=>{console.log("Action clicked")}}),o.jsx(e,{type:"negative",message:t("components.toast.withAction.negativeMessage"),action:t("components.toast.withAction.negativeAction"),onActionClick:()=>{console.log("Action clicked")}})]})},d={storyName:t("components.toast.stories.withoutCloseButton.title"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(e,{type:"informative",message:t("components.toast.withoutCloseButton.message"),closeAction:!1}),o.jsx(e,{type:"positive",message:t("components.toast.withoutCloseButton.positiveMessage"),closeAction:!1})]})},g={storyName:t("components.toast.stories.withCustomIcon.title"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(e,{type:"informative",message:t("components.toast.withCustomIcon.message"),icon:{name:"star",type:"fill"}}),o.jsx(e,{type:"positive",message:t("components.toast.withCustomIcon.positiveMessage"),icon:{name:"heart",type:"fill"}})]})},h={storyName:t("components.toast.stories.usingShowMethod.title"),render:()=>{const n=()=>{e.show({type:"informative",message:t("components.toast.showMethod.informative")})},w=()=>{e.show({type:"positive",message:t("components.toast.showMethod.positive")})},x=()=>{e.show({type:"negative",message:t("components.toast.showMethod.negative")})},f=()=>{e.show({type:"informative",message:t("components.toast.showMethod.withActionMessage"),action:t("components.toast.showMethod.action"),onActionClick:()=>{console.log("Action clicked")}})},A=()=>{e.show({type:"positive",message:t("components.toast.showMethod.withDurationMessage"),duration:5e3})},C=()=>{e.show({type:"informative",message:t("components.toast.showMethod.bottomMessage"),position:"bottom"})};return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",maxWidth:"300px"},children:[o.jsx(s,{onClick:n,theme:"neutral",children:t("components.toast.showMethod.showInformative")}),o.jsx(s,{onClick:w,theme:"neutral",children:t("components.toast.showMethod.showPositive")}),o.jsx(s,{onClick:x,theme:"neutral",children:t("components.toast.showMethod.showNegative")}),o.jsx(s,{onClick:f,theme:"neutral",children:t("components.toast.showMethod.showWithAction")}),o.jsx(s,{onClick:A,theme:"neutral",children:t("components.toast.showMethod.showWithDuration")}),o.jsx(s,{onClick:C,theme:"neutral",children:t("components.toast.showMethod.showAtBottom")})]})}},v={storyName:t("components.toast.stories.completeExample.title"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(e,{type:"informative",message:t("components.toast.completeExample.informativeMessage"),action:t("components.toast.completeExample.informativeAction"),onActionClick:()=>{console.log("Action clicked")}}),o.jsx(e,{type:"positive",message:t("components.toast.completeExample.positiveMessage"),action:t("components.toast.completeExample.positiveAction"),onActionClick:()=>{console.log("Action clicked")}}),o.jsx(e,{type:"negative",message:t("components.toast.completeExample.negativeMessage"),action:t("components.toast.completeExample.negativeAction"),onActionClick:()=>{console.log("Action clicked")}})]})},u={storyName:t("components.toast.stories.interactive.title"),args:{type:"informative",message:t("components.toast.interactive.message"),closeAction:!0,action:t("components.toast.interactive.action")},parameters:{controls:{expanded:!0}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.default.title'),
+  args: {
+    type: 'informative',
+    message: t('components.toast.default.message')
+  }
+}`,...a.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.types.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Toast type="neutral" message={t('components.toast.types.neutral')} />
+      <Toast type="informative" message={t('components.toast.types.informative')} />
+      <Toast type="positive" message={t('components.toast.types.positive')} />
+      <Toast type="negative" message={t('components.toast.types.negative')} />
+    </div>
+}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.informative.title'),
+  args: {
+    type: 'informative',
+    message: t('components.toast.informative.message')
+  }
+}`,...c.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.positive.title'),
+  args: {
+    type: 'positive',
+    message: t('components.toast.positive.message')
+  }
+}`,...m.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.negative.title'),
+  args: {
+    type: 'negative',
+    message: t('components.toast.negative.message')
+  }
+}`,...r.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.neutral.title'),
+  args: {
+    type: 'neutral',
+    message: t('components.toast.neutral.message')
+  }
+}`,...p.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.withAction.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Toast type="informative" message={t('components.toast.withAction.informativeMessage')} action={t('components.toast.withAction.informativeAction')} onActionClick={() => {
+      console.log('Action clicked');
+    }} />
+      <Toast type="positive" message={t('components.toast.withAction.positiveMessage')} action={t('components.toast.withAction.positiveAction')} onActionClick={() => {
+      console.log('Action clicked');
+    }} />
+      <Toast type="negative" message={t('components.toast.withAction.negativeMessage')} action={t('components.toast.withAction.negativeAction')} onActionClick={() => {
+      console.log('Action clicked');
+    }} />
+    </div>
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.withoutCloseButton.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Toast type="informative" message={t('components.toast.withoutCloseButton.message')} closeAction={false} />
+      <Toast type="positive" message={t('components.toast.withoutCloseButton.positiveMessage')} closeAction={false} />
+    </div>
+}`,...d.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.withCustomIcon.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Toast type="informative" message={t('components.toast.withCustomIcon.message')} icon={{
+      name: 'star',
+      type: 'fill'
+    }} />
+      <Toast type="positive" message={t('components.toast.withCustomIcon.positiveMessage')} icon={{
+      name: 'heart',
+      type: 'fill'
+    }} />
+    </div>
+}`,...g.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.usingShowMethod.title'),
+  render: () => {
+    const handleShowInformative = () => {
+      Toast.show({
+        type: 'informative',
+        message: t('components.toast.showMethod.informative')
+      });
+    };
+    const handleShowPositive = () => {
+      Toast.show({
+        type: 'positive',
+        message: t('components.toast.showMethod.positive')
+      });
+    };
+    const handleShowNegative = () => {
+      Toast.show({
+        type: 'negative',
+        message: t('components.toast.showMethod.negative')
+      });
+    };
+    const handleShowWithAction = () => {
+      Toast.show({
+        type: 'informative',
+        message: t('components.toast.showMethod.withActionMessage'),
+        action: t('components.toast.showMethod.action'),
+        onActionClick: () => {
+          console.log('Action clicked');
+        }
+      });
+    };
+    const handleShowWithDuration = () => {
+      Toast.show({
+        type: 'positive',
+        message: t('components.toast.showMethod.withDurationMessage'),
+        duration: 5000
+      });
+    };
+    const handleShowAtBottom = () => {
+      Toast.show({
+        type: 'informative',
+        message: t('components.toast.showMethod.bottomMessage'),
+        position: 'bottom'
+      });
+    };
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px',
+      maxWidth: '300px'
+    }}>
+        <Button onClick={handleShowInformative} theme="neutral">
+          {t('components.toast.showMethod.showInformative')}
+        </Button>
+        <Button onClick={handleShowPositive} theme="neutral">
+          {t('components.toast.showMethod.showPositive')}
+        </Button>
+        <Button onClick={handleShowNegative} theme="neutral">
+          {t('components.toast.showMethod.showNegative')}
+        </Button>
+        <Button onClick={handleShowWithAction} theme="neutral">
+          {t('components.toast.showMethod.showWithAction')}
+        </Button>
+        <Button onClick={handleShowWithDuration} theme="neutral">
+          {t('components.toast.showMethod.showWithDuration')}
+        </Button>
+        <Button onClick={handleShowAtBottom} theme="neutral">
+          {t('components.toast.showMethod.showAtBottom')}
+        </Button>
+      </div>;
+  }
+}`,...h.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.completeExample.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Toast type="informative" message={t('components.toast.completeExample.informativeMessage')} action={t('components.toast.completeExample.informativeAction')} onActionClick={() => {
+      console.log('Action clicked');
+    }} />
+      <Toast type="positive" message={t('components.toast.completeExample.positiveMessage')} action={t('components.toast.completeExample.positiveAction')} onActionClick={() => {
+      console.log('Action clicked');
+    }} />
+      <Toast type="negative" message={t('components.toast.completeExample.negativeMessage')} action={t('components.toast.completeExample.negativeAction')} onActionClick={() => {
+      console.log('Action clicked');
+    }} />
+    </div>
+}`,...v.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.toast.stories.interactive.title'),
+  args: {
+    type: 'informative',
+    message: t('components.toast.interactive.message'),
+    closeAction: true,
+    action: t('components.toast.interactive.action')
+  },
+  parameters: {
+    controls: {
+      expanded: true
+    }
+  }
+}`,...u.parameters?.docs?.source}}};const q=["Default","Types","Informative","Positive","Negative","Neutral","WithAction","WithoutCloseButton","WithCustomIcon","UsingShowMethod","CompleteExample","Interactive"];export{v as CompleteExample,a as Default,c as Informative,u as Interactive,r as Negative,p as Neutral,m as Positive,i as Types,h as UsingShowMethod,l as WithAction,g as WithCustomIcon,d as WithoutCloseButton,q as __namedExportsOrder,_ as default};

package/dist-storybook/assets/tooltip-QDdel5My.js

@@ -0,0 +1 @@
+import{j as o}from"./iframe-CQAwSt4E.js";import{c as e,g as n}from"./classname-CUR_zgkh.js";import{I as p}from"./icon-DdQsMyRa.js";const s=n("tooltip"),d=r=>{const{type:a="default",position:t="top",closeable:i,className:c,children:l,...m}=r;return o.jsxs("div",{className:e(s,`${s}--${a}`,c),...m,children:[o.jsx("div",{className:e(`${s}__arrow`,`${s}__arrow--${t}`,`${s}__arrow--${a}`)}),o.jsx("div",{className:`${s}__content`,children:l}),i&&o.jsx("div",{className:`${s}__close`,children:o.jsx(p,{name:"xmark",size:16})})]})};d.__docgenInfo={description:"",methods:[],displayName:"Tooltip"};export{d as T};

package/dist-storybook/assets/tooltip.stories-RC6SuPPD.js

@@ -0,0 +1,153 @@
+import{j as t}from"./iframe-CQAwSt4E.js";import{T as e}from"./tooltip-QDdel5My.js";import{t as o}from"./store-D2RudmNr.js";import{T as a,S as d,M as c,P as g,a as h}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-CUR_zgkh.js";import"./icon-DdQsMyRa.js";import"./colors-_6nFGM3e.js";import"./index-DHiZ-gXR.js";const x=()=>{const m=`
+## ${o("common.table.title")}
+| ${o("common.table.name")} | ${o("common.table.type")} | ${o("common.table.required")} | ${o("common.table.description")} |
+| :--- | :--- | :---: | :--- |
+| \`type\` | \`'default' | 'reverse'\` | ${o("common.table.no")} | ${o("components.tooltip.argTypes.typeDescription")} |
+| \`position\` | \`ITooltipPosition\` | ${o("common.table.no")} | ${o("components.tooltip.argTypes.positionDescription")} |
+| \`closeable\` | \`boolean\` | ${o("common.table.no")} | ${o("components.tooltip.argTypes.closeableDescription")} |
+| \`children\` | \`ReactNode\` | ${o("common.table.no")} | ${o("components.tooltip.argTypes.childrenDescription")} |
+| \`className\` | \`string\` | ${o("common.table.no")} | ${o("components.tooltip.argTypes.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${o("common.table.no")} | ${o("components.tooltip.argTypes.propsDescription")} |
+`;return t.jsxs(t.Fragment,{children:[t.jsx(a,{}),t.jsx(d,{}),t.jsx(c,{children:o("components.tooltip.description")}),t.jsx(g,{}),t.jsx(c,{children:m}),t.jsx(h,{})]})},B={title:"Components/Tooltip",component:e,parameters:{layout:"padded",docs:{page:x}},tags:["autodocs"],argTypes:{type:{control:"select",options:["default","reverse"],description:o("components.tooltip.argTypes.typeDescription"),table:{type:{summary:'"default" | "reverse"'},defaultValue:{summary:"default"}}},position:{control:"select",options:["top","bottom","right","left","top-left","top-right","bottom-left","bottom-right","left-top","left-bottom","right-top","right-bottom"],description:o("components.tooltip.argTypes.positionDescription"),table:{type:{summary:"ITooltipPosition"},defaultValue:{summary:"top"}}},closeable:{control:"boolean",description:o("components.tooltip.argTypes.closeableDescription"),table:{type:{summary:"boolean"}}},children:{description:o("components.tooltip.argTypes.childrenDescription")},className:{description:o("components.tooltip.argTypes.classNameDescription")}}},s={name:o("components.tooltip.stories.default.name"),args:{children:o("components.tooltip.stories.default.content")}},i={name:o("components.tooltip.stories.types.name"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsxs("div",{children:[t.jsx("p",{style:{marginBottom:"8px"},children:o("components.tooltip.stories.types.default")}),t.jsx(e,{type:"default",position:"top",children:o("components.tooltip.stories.types.defaultContent")})]}),t.jsxs("div",{children:[t.jsx("p",{style:{marginBottom:"8px"},children:o("components.tooltip.stories.types.reverse")}),t.jsx(e,{type:"reverse",position:"top",children:o("components.tooltip.stories.types.reverseContent")})]})]})},n={name:o("components.tooltip.stories.positions.name"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:o("components.tooltip.stories.positions.top")}),t.jsxs("div",{style:{display:"flex",gap:"16px"},children:[t.jsx(e,{position:"top",children:o("components.tooltip.positions.top")}),t.jsx(e,{position:"top-left",children:o("components.tooltip.positions.topLeft")}),t.jsx(e,{position:"top-right",children:o("components.tooltip.positions.topRight")})]})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:o("components.tooltip.stories.positions.bottom")}),t.jsxs("div",{style:{display:"flex",gap:"16px"},children:[t.jsx(e,{position:"bottom",children:o("components.tooltip.positions.bottom")}),t.jsx(e,{position:"bottom-left",children:o("components.tooltip.positions.bottomLeft")}),t.jsx(e,{position:"bottom-right",children:o("components.tooltip.positions.bottomRight")})]})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:o("components.tooltip.stories.positions.left")}),t.jsxs("div",{style:{display:"flex",gap:"16px"},children:[t.jsx(e,{position:"left",children:o("components.tooltip.positions.left")}),t.jsx(e,{position:"left-top",children:o("components.tooltip.positions.leftTop")}),t.jsx(e,{position:"left-bottom",children:o("components.tooltip.positions.leftBottom")})]})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:o("components.tooltip.stories.positions.right")}),t.jsxs("div",{style:{display:"flex",gap:"16px"},children:[t.jsx(e,{position:"right",children:o("components.tooltip.positions.right")}),t.jsx(e,{position:"right-top",children:o("components.tooltip.positions.rightTop")}),t.jsx(e,{position:"right-bottom",children:o("components.tooltip.positions.rightBottom")})]})]})]})},p={name:o("components.tooltip.stories.closeable.name"),args:{children:o("components.tooltip.stories.closeable.content"),closeable:!0}},l={name:o("components.tooltip.stories.longContent.name"),args:{children:o("components.tooltip.stories.longContent.content")}},r={name:o("components.tooltip.stories.interactive.name"),args:{children:o("components.tooltip.stories.interactive.content"),position:"top"}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  name: t('components.tooltip.stories.default.name'),
+  args: {
+    children: t('components.tooltip.stories.default.content')
+  }
+}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  name: t('components.tooltip.stories.types.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <div>
+        <p style={{
+        marginBottom: '8px'
+      }}>
+          {t('components.tooltip.stories.types.default')}
+        </p>
+        <Tooltip type="default" position="top">
+          {t('components.tooltip.stories.types.defaultContent')}
+        </Tooltip>
+      </div>
+      <div>
+        <p style={{
+        marginBottom: '8px'
+      }}>
+          {t('components.tooltip.stories.types.reverse')}
+        </p>
+        <Tooltip type="reverse" position="top">
+          {t('components.tooltip.stories.types.reverseContent')}
+        </Tooltip>
+      </div>
+    </div>
+}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  name: t('components.tooltip.stories.positions.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px'
+  }}>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.tooltip.stories.positions.top')}
+        </h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px'
+      }}>
+          <Tooltip position="top">
+            {t('components.tooltip.positions.top')}
+          </Tooltip>
+          <Tooltip position="top-left">
+            {t('components.tooltip.positions.topLeft')}
+          </Tooltip>
+          <Tooltip position="top-right">
+            {t('components.tooltip.positions.topRight')}
+          </Tooltip>
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.tooltip.stories.positions.bottom')}
+        </h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px'
+      }}>
+          <Tooltip position="bottom">
+            {t('components.tooltip.positions.bottom')}
+          </Tooltip>
+          <Tooltip position="bottom-left">
+            {t('components.tooltip.positions.bottomLeft')}
+          </Tooltip>
+          <Tooltip position="bottom-right">
+            {t('components.tooltip.positions.bottomRight')}
+          </Tooltip>
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.tooltip.stories.positions.left')}
+        </h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px'
+      }}>
+          <Tooltip position="left">
+            {t('components.tooltip.positions.left')}
+          </Tooltip>
+          <Tooltip position="left-top">
+            {t('components.tooltip.positions.leftTop')}
+          </Tooltip>
+          <Tooltip position="left-bottom">
+            {t('components.tooltip.positions.leftBottom')}
+          </Tooltip>
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.tooltip.stories.positions.right')}
+        </h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px'
+      }}>
+          <Tooltip position="right">
+            {t('components.tooltip.positions.right')}
+          </Tooltip>
+          <Tooltip position="right-top">
+            {t('components.tooltip.positions.rightTop')}
+          </Tooltip>
+          <Tooltip position="right-bottom">
+            {t('components.tooltip.positions.rightBottom')}
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+}`,...n.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  name: t('components.tooltip.stories.closeable.name'),
+  args: {
+    children: t('components.tooltip.stories.closeable.content'),
+    closeable: true
+  }
+}`,...p.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  name: t('components.tooltip.stories.longContent.name'),
+  args: {
+    children: t('components.tooltip.stories.longContent.content')
+  }
+}`,...l.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  name: t('components.tooltip.stories.interactive.name'),
+  args: {
+    children: t('components.tooltip.stories.interactive.content'),
+    position: 'top'
+  }
+}`,...r.parameters?.docs?.source}}};const C=["Default","Types","Positions","Closeable","LongContent","Interactive"];export{p as Closeable,s as Default,r as Interactive,l as LongContent,n as Positions,i as Types,C as __namedExportsOrder,B as default};

package/dist-storybook/assets/typography-DEpAJl_i.js

@@ -0,0 +1 @@
+import{j as l}from"./iframe-CQAwSt4E.js";import{c as m,g as n}from"./classname-CUR_zgkh.js";import{g as f}from"./colors-_6nFGM3e.js";const e=n("typography"),u=({component:s,size:a="inherit",weight:o="inherit",color:r,className:t,...i})=>{const p=s||"div";return l.jsx(p,{className:m(e,`${e}__size--${a}`,`${e}__weight--${o}`,t),...i,style:{color:f(r)}})};u.__docgenInfo={description:"",methods:[],displayName:"Typography",props:{size:{defaultValue:{value:"'inherit'",computed:!1},required:!1},weight:{defaultValue:{value:"'inherit'",computed:!1},required:!1}}};export{u as T};

package/dist-storybook/assets/typography.stories-Bu8qFugR.js

@@ -0,0 +1,202 @@
+import{j as o}from"./iframe-CQAwSt4E.js";import{T as t}from"./typography-DEpAJl_i.js";import{t as e}from"./store-D2RudmNr.js";import{T as c,S as l,M as g,P as m,a as d}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-CUR_zgkh.js";import"./colors-_6nFGM3e.js";import"./index-DHiZ-gXR.js";const f=()=>{const h=`
+## ${e("common.table.title")}
+
+### Typography
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :---: | :--- |
+| \`component\` | \`ElementType\` | ${e("common.table.no")} | ${e("components.typography.componentDescription")} |
+| \`size\` | \`ITypographySize\` | ${e("common.table.no")} | ${e("components.typography.sizeDescription")} |
+| \`weight\` | \`ITypographyWeight\` | ${e("common.table.no")} | ${e("components.typography.weightDescription")} |
+| \`color\` | \`IColor\` | ${e("common.table.no")} | ${e("components.typography.colorDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.typography.classNameDescription")} |
+| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.typography.childrenDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<ElementType>\` | ${e("common.table.no")} | ${e("components.typography.propsDescription")} |
+
+### ITypographySize
+
+| ${e("common.table.value")} | ${e("common.table.description")} |
+| :--- | :--- |
+| \`'inherit'\` | ${e("components.typography.sizes.inherit")} |
+| \`'3x-small'\` | ${e("components.typography.sizes.3xSmall")} |
+| \`'2x-small'\` | ${e("components.typography.sizes.2xSmall")} |
+| \`'x-small'\` | ${e("components.typography.sizes.xSmall")} |
+| \`'small'\` | ${e("components.typography.sizes.small")} |
+| \`'base'\` | ${e("components.typography.sizes.base")} |
+| \`'large'\` | ${e("components.typography.sizes.large")} |
+| \`'x-large'\` | ${e("components.typography.sizes.xLarge")} |
+| \`'2x-large'\` | ${e("components.typography.sizes.2xLarge")} |
+| \`'3x-large'\` | ${e("components.typography.sizes.3xLarge")} |
+| \`'4x-large'\` | ${e("components.typography.sizes.4xLarge")} |
+| \`'5x-large'\` | ${e("components.typography.sizes.5xLarge")} |
+
+### ITypographyWeight
+
+| ${e("common.table.value")} | ${e("common.table.description")} |
+| :--- | :--- |
+| \`'inherit'\` | ${e("components.typography.weights.inherit")} |
+| \`'100'\` | ${e("components.typography.weights.100")} |
+| \`'200'\` | ${e("components.typography.weights.200")} |
+| \`'300'\` | ${e("components.typography.weights.300")} |
+| \`'400'\` / \`'regular'\` | ${e("components.typography.weights.regular")} |
+| \`'500'\` / \`'medium'\` | ${e("components.typography.weights.medium")} |
+| \`'600'\` / \`'semibold'\` | ${e("components.typography.weights.semibold")} |
+| \`'700'\` / \`'bold'\` | ${e("components.typography.weights.bold")} |
+| \`'800'\` | ${e("components.typography.weights.800")} |
+| \`'900'\` | ${e("components.typography.weights.900")} |
+`;return o.jsxs(o.Fragment,{children:[o.jsx(c,{}),o.jsx(l,{}),o.jsx(g,{children:e("components.typography.description")}),o.jsx(m,{}),o.jsx(g,{children:h}),o.jsx(d,{})]})},D={title:"Components/Typography",component:t,parameters:{layout:"padded",docs:{page:f}},tags:["autodocs"],argTypes:{component:{control:"select",options:["div","p","span","h1","h2","h3","h4","h5","h6"],description:e("components.typography.argTypes.componentDescription"),table:{type:{summary:"ElementType"},defaultValue:{summary:"div"}}},size:{control:"select",options:["inherit","5x-large","4x-large","3x-large","2x-large","x-large","large","base","small","x-small","2x-small","3x-small"],description:e("components.typography.argTypes.sizeDescription"),table:{type:{summary:"ITypographySize"},defaultValue:{summary:"inherit"}}},weight:{control:"select",options:["inherit","bold","semibold","medium","regular","100","200","300","400","500","600","700","800","900"],description:e("components.typography.argTypes.weightDescription"),table:{type:{summary:"ITypographyWeight"},defaultValue:{summary:"inherit"}}},color:{control:"text",description:e("components.typography.argTypes.colorDescription")+" (e.g., alias-object-primary) or CSS color value (e.g., #FF0000).",table:{type:{summary:"IColor"}}},className:{control:"text",description:e("components.typography.argTypes.classNameDescription"),table:{type:{summary:"string"}}},children:{control:"text",description:e("components.typography.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}}}},s={name:e("components.typography.stories.default.name"),args:{children:e("components.typography.stories.default.text")}},r={name:e("components.typography.stories.differentSizes.name"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{size:"3x-small",children:e("components.typography.stories.differentSizes.size3xSmall")}),o.jsx(t,{size:"2x-small",children:e("components.typography.stories.differentSizes.size2xSmall")}),o.jsx(t,{size:"x-small",children:e("components.typography.stories.differentSizes.sizeXSmall")}),o.jsx(t,{size:"small",children:e("components.typography.stories.differentSizes.sizeSmall")}),o.jsx(t,{size:"base",children:e("components.typography.stories.differentSizes.sizeBase")}),o.jsx(t,{size:"large",children:e("components.typography.stories.differentSizes.sizeLarge")}),o.jsx(t,{size:"x-large",children:e("components.typography.stories.differentSizes.sizeXLarge")}),o.jsx(t,{size:"2x-large",children:e("components.typography.stories.differentSizes.size2xLarge")}),o.jsx(t,{size:"3x-large",children:e("components.typography.stories.differentSizes.size3xLarge")}),o.jsx(t,{size:"4x-large",children:e("components.typography.stories.differentSizes.size4xLarge")}),o.jsx(t,{size:"5x-large",children:e("components.typography.stories.differentSizes.size5xLarge")})]})},p={name:e("components.typography.stories.differentWeights.name"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{weight:"100",children:e("components.typography.stories.differentWeights.weight100")}),o.jsx(t,{weight:"200",children:e("components.typography.stories.differentWeights.weight200")}),o.jsx(t,{weight:"300",children:e("components.typography.stories.differentWeights.weight300")}),o.jsx(t,{weight:"400",children:e("components.typography.stories.differentWeights.weight400")}),o.jsx(t,{weight:"500",children:e("components.typography.stories.differentWeights.weight500")}),o.jsx(t,{weight:"600",children:e("components.typography.stories.differentWeights.weight600")}),o.jsx(t,{weight:"700",children:e("components.typography.stories.differentWeights.weight700")}),o.jsx(t,{weight:"800",children:e("components.typography.stories.differentWeights.weight800")}),o.jsx(t,{weight:"900",children:e("components.typography.stories.differentWeights.weight900")})]})},i={name:e("components.typography.stories.withColors.name"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{color:"alias-object-primary",children:e("components.typography.stories.withColors.primary")}),o.jsx(t,{color:"alias-object-secondary",children:e("components.typography.stories.withColors.secondary")}),o.jsx(t,{color:"alias-object-tertiary",children:e("components.typography.stories.withColors.tertiary")}),o.jsx(t,{color:"alias-object-danger",children:e("components.typography.stories.withColors.danger")}),o.jsx(t,{color:"alias-object-success",children:e("components.typography.stories.withColors.success")})]})},n={name:e("components.typography.stories.asDifferentElements.name"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{component:"h1",size:"4x-large",weight:"bold",children:e("components.typography.stories.asDifferentElements.heading1")}),o.jsx(t,{component:"h2",size:"3x-large",weight:"bold",children:e("components.typography.stories.asDifferentElements.heading2")}),o.jsx(t,{component:"h3",size:"2x-large",weight:"semibold",children:e("components.typography.stories.asDifferentElements.heading3")}),o.jsx(t,{component:"h4",size:"x-large",weight:"semibold",children:e("components.typography.stories.asDifferentElements.heading4")}),o.jsx(t,{component:"p",size:"base",children:e("components.typography.stories.asDifferentElements.paragraph")}),o.jsx(t,{component:"span",size:"small",children:e("components.typography.stories.asDifferentElements.span")})]})},a={render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[o.jsx(t,{component:"h2",size:"x-large",weight:"bold",color:"alias-object-primary",children:e("components.typography.stories.completeExample.title")}),o.jsx(t,{component:"p",size:"base",weight:"regular",children:e("components.typography.stories.completeExample.paragraph")}),o.jsx(t,{component:"span",size:"small",weight:"medium",color:"#666666",children:e("components.typography.stories.completeExample.caption")})]})},y={name:e("components.typography.stories.interactive.name"),args:{children:e("components.typography.stories.interactive.text"),size:"base",weight:"regular",color:"alias-object-primary",component:"div"}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  name: t('components.typography.stories.default.name'),
+  args: {
+    children: t('components.typography.stories.default.text')
+  }
+}`,...s.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  name: t('components.typography.stories.differentSizes.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Typography size="3x-small">
+        {t('components.typography.stories.differentSizes.size3xSmall')}
+      </Typography>
+      <Typography size="2x-small">
+        {t('components.typography.stories.differentSizes.size2xSmall')}
+      </Typography>
+      <Typography size="x-small">
+        {t('components.typography.stories.differentSizes.sizeXSmall')}
+      </Typography>
+      <Typography size="small">
+        {t('components.typography.stories.differentSizes.sizeSmall')}
+      </Typography>
+      <Typography size="base">
+        {t('components.typography.stories.differentSizes.sizeBase')}
+      </Typography>
+      <Typography size="large">
+        {t('components.typography.stories.differentSizes.sizeLarge')}
+      </Typography>
+      <Typography size="x-large">
+        {t('components.typography.stories.differentSizes.sizeXLarge')}
+      </Typography>
+      <Typography size="2x-large">
+        {t('components.typography.stories.differentSizes.size2xLarge')}
+      </Typography>
+      <Typography size="3x-large">
+        {t('components.typography.stories.differentSizes.size3xLarge')}
+      </Typography>
+      <Typography size="4x-large">
+        {t('components.typography.stories.differentSizes.size4xLarge')}
+      </Typography>
+      <Typography size="5x-large">
+        {t('components.typography.stories.differentSizes.size5xLarge')}
+      </Typography>
+    </div>
+}`,...r.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  name: t('components.typography.stories.differentWeights.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Typography weight="100">
+        {t('components.typography.stories.differentWeights.weight100')}
+      </Typography>
+      <Typography weight="200">
+        {t('components.typography.stories.differentWeights.weight200')}
+      </Typography>
+      <Typography weight="300">
+        {t('components.typography.stories.differentWeights.weight300')}
+      </Typography>
+      <Typography weight="400">
+        {t('components.typography.stories.differentWeights.weight400')}
+      </Typography>
+      <Typography weight="500">
+        {t('components.typography.stories.differentWeights.weight500')}
+      </Typography>
+      <Typography weight="600">
+        {t('components.typography.stories.differentWeights.weight600')}
+      </Typography>
+      <Typography weight="700">
+        {t('components.typography.stories.differentWeights.weight700')}
+      </Typography>
+      <Typography weight="800">
+        {t('components.typography.stories.differentWeights.weight800')}
+      </Typography>
+      <Typography weight="900">
+        {t('components.typography.stories.differentWeights.weight900')}
+      </Typography>
+    </div>
+}`,...p.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  name: t('components.typography.stories.withColors.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Typography color="alias-object-primary">
+        {t('components.typography.stories.withColors.primary')}
+      </Typography>
+      <Typography color="alias-object-secondary">
+        {t('components.typography.stories.withColors.secondary')}
+      </Typography>
+      <Typography color="alias-object-tertiary">
+        {t('components.typography.stories.withColors.tertiary')}
+      </Typography>
+      <Typography color="alias-object-danger">
+        {t('components.typography.stories.withColors.danger')}
+      </Typography>
+      <Typography color="alias-object-success">
+        {t('components.typography.stories.withColors.success')}
+      </Typography>
+    </div>
+}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  name: t('components.typography.stories.asDifferentElements.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Typography component="h1" size="4x-large" weight="bold">
+        {t('components.typography.stories.asDifferentElements.heading1')}
+      </Typography>
+      <Typography component="h2" size="3x-large" weight="bold">
+        {t('components.typography.stories.asDifferentElements.heading2')}
+      </Typography>
+      <Typography component="h3" size="2x-large" weight="semibold">
+        {t('components.typography.stories.asDifferentElements.heading3')}
+      </Typography>
+      <Typography component="h4" size="x-large" weight="semibold">
+        {t('components.typography.stories.asDifferentElements.heading4')}
+      </Typography>
+      <Typography component="p" size="base">
+        {t('components.typography.stories.asDifferentElements.paragraph')}
+      </Typography>
+      <Typography component="span" size="small">
+        {t('components.typography.stories.asDifferentElements.span')}
+      </Typography>
+    </div>
+}`,...n.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px'
+  }}>
+      <Typography component="h2" size="x-large" weight="bold" color="alias-object-primary">
+        {t('components.typography.stories.completeExample.title')}
+      </Typography>
+      <Typography component="p" size="base" weight="regular">
+        {t('components.typography.stories.completeExample.paragraph')}
+      </Typography>
+      <Typography component="span" size="small" weight="medium" color="#666666">
+        {t('components.typography.stories.completeExample.caption')}
+      </Typography>
+    </div>
+}`,...a.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  name: t('components.typography.stories.interactive.name'),
+  args: {
+    children: t('components.typography.stories.interactive.text'),
+    size: 'base',
+    weight: 'regular',
+    color: 'alias-object-primary',
+    component: 'div'
+  }
+}`,...y.parameters?.docs?.source}}};const $=["Default","DifferentSizes","DifferentWeights","WithColors","AsDifferentElements","CompleteExample","Interactive"];export{n as AsDifferentElements,a as CompleteExample,s as Default,r as DifferentSizes,p as DifferentWeights,y as Interactive,i as WithColors,$ as __namedExportsOrder,D as default};