@v-miniapp/ui-react 1.0.41 → 1.0.47

package/dist-storybook/assets/section.stories-B5IhLkbG.js

@@ -0,0 +1,69 @@
+import{j as t}from"./iframe-CLEfhyJc.js";import{S as a,a as m,b as p}from"./section-content-pkGNuEs6.js";import{t as e}from"./store-D2RudmNr.js";import{T as u,S,M as l,P as h,a as y}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-DoNrELT0.js";import"./icon-TJ3FHxUI.js";import"./colors-_6nFGM3e.js";import"./typography-DoV67nnS.js";import"./index-CaMbLGUB.js";const x=()=>{const d=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`space\` | \`boolean\` | ${e("common.table.no")} | ${e("components.section.spaceDescription")} |
+| \`shape\` | \`'rounded' | 'square'\` | ${e("common.table.no")} | ${e("components.section.shapeDescription")} |
+| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.section.childrenDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.section.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.section.propsDescription")} |
+`;return t.jsxs(t.Fragment,{children:[t.jsx(u,{}),t.jsx(S,{}),t.jsx(l,{children:e("components.section.description")}),t.jsx(h,{}),t.jsx(l,{children:d}),t.jsx(y,{})]})},v={title:"Components/Section",component:a,parameters:{layout:"padded",docs:{page:x}},tags:["autodocs"],argTypes:{space:{control:"boolean",description:e("components.section.argTypes.spaceDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},shape:{control:"select",options:["rounded","square"],description:e("components.section.argTypes.shapeDescription"),table:{type:{summary:'"rounded" | "square"'},defaultValue:{summary:"rounded"}}}}},n={storyName:e("components.section.stories.default.storyName"),name:e("components.section.stories.default.name"),args:{children:t.jsx("p",{children:e("components.section.stories.default.content")})}},o={storyName:e("components.section.stories.withoutSpacing.storyName"),name:e("components.section.stories.withoutSpacing.name"),args:{space:!1,children:t.jsx("p",{children:e("components.section.stories.withoutSpacing.content")})}},s={storyName:e("components.section.stories.squareShape.storyName"),name:e("components.section.stories.squareShape.name"),args:{shape:"square",children:t.jsx("p",{children:e("components.section.stories.squareShape.content")})}},i={storyName:e("components.section.stories.withTitleAndContent.storyName"),name:e("components.section.stories.withTitleAndContent.name"),render:()=>t.jsxs(a,{children:[t.jsx(m,{title:e("components.section.stories.withTitleAndContent.title")}),t.jsx(p,{children:t.jsx("p",{children:e("components.section.stories.withTitleAndContent.content")})})]})},c={storyName:e("components.section.stories.multipleSections.storyName"),name:e("components.section.stories.multipleSections.name"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsxs(a,{children:[t.jsx(m,{title:e("components.section.stories.multipleSections.firstTitle")}),t.jsx(p,{children:t.jsx("p",{children:e("components.section.stories.multipleSections.firstContent")})})]}),t.jsxs(a,{children:[t.jsx(m,{title:e("components.section.stories.multipleSections.secondTitle")}),t.jsx(p,{children:t.jsx("p",{children:e("components.section.stories.multipleSections.secondContent")})})]})]})},r={storyName:e("components.section.stories.interactive.storyName"),name:e("components.section.stories.interactive.name"),args:{children:t.jsx("p",{children:e("components.section.stories.interactive.content")})}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.section.stories.default.storyName'),
+  name: t('components.section.stories.default.name'),
+  args: {
+    children: <p>{t('components.section.stories.default.content')}</p>
+  }
+}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.section.stories.withoutSpacing.storyName'),
+  name: t('components.section.stories.withoutSpacing.name'),
+  args: {
+    space: false,
+    children: <p>{t('components.section.stories.withoutSpacing.content')}</p>
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.section.stories.squareShape.storyName'),
+  name: t('components.section.stories.squareShape.name'),
+  args: {
+    shape: 'square',
+    children: <p>{t('components.section.stories.squareShape.content')}</p>
+  }
+}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.section.stories.withTitleAndContent.storyName'),
+  name: t('components.section.stories.withTitleAndContent.name'),
+  render: () => <Section>
+      <SectionTitle title={t('components.section.stories.withTitleAndContent.title')} />
+      <SectionContent>
+        <p>{t('components.section.stories.withTitleAndContent.content')}</p>
+      </SectionContent>
+    </Section>
+}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.section.stories.multipleSections.storyName'),
+  name: t('components.section.stories.multipleSections.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Section>
+        <SectionTitle title={t('components.section.stories.multipleSections.firstTitle')} />
+        <SectionContent>
+          <p>{t('components.section.stories.multipleSections.firstContent')}</p>
+        </SectionContent>
+      </Section>
+      <Section>
+        <SectionTitle title={t('components.section.stories.multipleSections.secondTitle')} />
+        <SectionContent>
+          <p>
+            {t('components.section.stories.multipleSections.secondContent')}
+          </p>
+        </SectionContent>
+      </Section>
+    </div>
+}`,...c.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.section.stories.interactive.storyName'),
+  name: t('components.section.stories.interactive.name'),
+  args: {
+    children: <p>{t('components.section.stories.interactive.content')}</p>
+  }
+}`,...r.parameters?.docs?.source}}};const D=["Default","WithoutSpacing","SquareShape","WithSectionTitleAndContent","MultipleSections","Interactive"];export{n as Default,r as Interactive,c as MultipleSections,s as SquareShape,i as WithSectionTitleAndContent,o as WithoutSpacing,D as __namedExportsOrder,v as default};

package/dist-storybook/assets/sheet.stories-COzxyiqj.js

@@ -0,0 +1,152 @@
+import{j as t,r as c}from"./iframe-CLEfhyJc.js";import{S as r,d as p,e as i,f}from"./chip-zY6gJxDk.js";import{B as s}from"./button-GtWXUngt.js";import{t as e}from"./store-D2RudmNr.js";import{T as C,S as x,M as B,P as j,a as y}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-DoNrELT0.js";import"./icon-TJ3FHxUI.js";import"./colors-_6nFGM3e.js";import"./navigation-bar-CiGSH7u8.js";import"./visibility-sensor-huP-8j4n.js";import"./index-B-Ksafg0.js";import"./store-DxAqU1JB.js";import"./_setToString-CjYxL0rS.js";import"./react-mAVd1wAc.js";import"./omit-CStFhbPt.js";import"./pick-DbIUGM9R.js";import"./image-D6Yo4ht9.js";import"./typography-DoV67nnS.js";import"./bottom-tab-bar-BsPd0FD7.js";import"./toast-provider-B9k1NBG6.js";import"./carousel-sbzGq2WF.js";import"./embla-carousel-react.esm-CCQjHA-d.js";import"./pagination-Dcazh6R_.js";import"./section-content-pkGNuEs6.js";import"./option-item-BloohEvW.js";import"./index-DRIh_SUo.js";import"./alert-abKmNYys.js";import"./skeleton-Dn8rwbgX.js";import"./label-fI1oWVKU.js";import"./input-wrapper-D_9hAdHZ.js";import"./text-field-CjrgfYOZ.js";import"./number-field-DNj4myBV.js";import"./checkbox-CMpJJxvm.js";import"./radio-t2E8E0Oc.js";import"./date-Ci5dIit0.js";import"./date-picker-BCIW_1-h.js";import"./calendar-CJ5_NxYx.js";import"./search-field-CuiHMy7j.js";import"./text-area-CAmJ2yms.js";import"./avatar-B-jvPnzm.js";import"./badge-Cc9u7jBX.js";import"./switch-BziC1t_8.js";import"./tab-bar-DZ3oOU50.js";import"./rating-DsULci27.js";import"./tooltip-VnA8Hy0S.js";import"./index-CaMbLGUB.js";const b=()=>{const n=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`open\` | \`boolean\` | ${e("common.table.no")} | ${e("components.sheet.openDescription")} |
+| \`onBackdropClick\` | \`(e: React.MouseEvent) => void\` | ${e("common.table.no")} | ${e("components.sheet.onBackdropClickDescription")} |
+| \`portal\` | \`boolean\` | ${e("common.table.no")} | ${e("components.sheet.portalDescription")} |
+| \`overlay\` | \`'default' | 'blur'\` | ${e("common.table.no")} | ${e("components.sheet.overlayDescription")} |
+| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.sheet.childrenDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.sheet.classNameDescription")} |
+
+### SheetHeader
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`title\` | \`string\` | ${e("common.table.no")} | ${e("components.sheet.titleDescription")} |
+| \`backIcon\` | \`boolean\` | ${e("common.table.no")} | ${e("components.sheet.backIconDescription")} |
+| \`closeIcon\` | \`boolean\` | ${e("common.table.no")} | ${e("components.sheet.closeIconDescription")} |
+| \`onBackClick\` | \`() => void\` | ${e("common.table.no")} | ${e("components.sheet.onBackClickDescription")} |
+| \`onCloseClick\` | \`() => void\` | ${e("common.table.no")} | ${e("components.sheet.onCloseClickDescription")} |
+
+### SheetBody
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`horizontalSpace\` | \`boolean\` | ${e("common.table.no")} | ${e("components.sheet.horizontalSpaceDescription")} |
+`;return t.jsxs(t.Fragment,{children:[t.jsx(C,{}),t.jsx(x,{}),t.jsx(B,{children:e("components.sheet.description")}),t.jsx(j,{}),t.jsx(B,{children:n}),t.jsx(y,{})]})},Be={title:"Components/Sheet",component:r,parameters:{layout:"fullscreen",docs:{page:b}},tags:["autodocs"],argTypes:{open:{control:"boolean",description:e("components.sheet.argTypes.openDescription"),table:{type:{summary:"boolean"}}},onBackdropClick:{action:"backdrop-clicked",description:e("components.sheet.argTypes.onBackdropClickDescription"),table:{type:{summary:"(e: React.MouseEvent) => void"}}},portal:{control:"boolean",description:e("components.sheet.argTypes.portalDescription"),table:{type:{summary:"boolean"}}},overlay:{control:"select",options:["default","blur"],description:e("components.sheet.argTypes.overlayDescription"),table:{type:{summary:"default | blur"}}},children:{description:e("components.sheet.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},className:{description:e("components.sheet.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},l={name:e("components.sheet.stories.default.name"),render:()=>{const[n,o]=c.useState(!1),[S,a]=c.useState(!1);return t.jsxs("div",{children:[t.jsx(s,{theme:"neutral",onClick:()=>o(!0),children:e("components.sheet.stories.default.openButton")}),t.jsxs(r,{open:S,portal:!0,onBackdropClick:()=>a(!1),children:[t.jsx(p,{title:e("components.sheet.stories.default.title2"),closeIcon:!0,onCloseClick:()=>a(!1)}),t.jsx(i,{children:t.jsx("p",{children:e("components.sheet.stories.default.content2")})})]}),t.jsxs(r,{open:n,portal:!0,onBackdropClick:()=>o(!1),children:[t.jsx(p,{title:e("components.sheet.stories.default.title"),closeIcon:!0,onCloseClick:()=>o(!1)}),t.jsxs(i,{children:[t.jsx("p",{children:e("components.sheet.stories.default.content")}),t.jsx(s,{theme:"neutral",onClick:()=>a(!0),style:{marginTop:"16px"},children:e("components.sheet.stories.default.open2")})]})]})]})}},m={name:e("components.sheet.stories.withFooter.name"),render:()=>{const[n,o]=c.useState(!1);return t.jsxs("div",{children:[t.jsx(s,{theme:"neutral",onClick:()=>o(!0),children:e("components.sheet.stories.withFooter.openButton")}),t.jsxs(r,{open:n,onBackdropClick:()=>o(!1),children:[t.jsx(p,{title:e("components.sheet.stories.withFooter.title")}),t.jsx(i,{children:t.jsx("p",{children:e("components.sheet.stories.withFooter.content")})}),t.jsxs(f,{children:[t.jsx(s,{theme:"neutral",onClick:()=>o(!1),children:e("common.actions.cancel")}),t.jsx(s,{theme:"neutral",onClick:()=>o(!1),children:e("common.actions.confirm")})]})]})]})}},h={name:e("components.sheet.stories.withBackIcon.name"),render:()=>{const[n,o]=c.useState(!1);return t.jsxs("div",{children:[t.jsx(s,{theme:"neutral",onClick:()=>o(!0),children:e("components.sheet.stories.withBackIcon.openButton")}),t.jsxs(r,{open:n,onBackdropClick:()=>o(!1),children:[t.jsx(p,{title:e("components.sheet.stories.withBackIcon.title"),backIcon:!0,onBackClick:()=>o(!1)}),t.jsx(i,{children:e("components.sheet.stories.withBackIcon.content")})]})]})}},d={name:e("components.sheet.stories.withoutHorizontalSpace.name"),render:()=>{const[n,o]=c.useState(!1);return t.jsxs("div",{children:[t.jsx(s,{theme:"neutral",onClick:()=>o(!0),children:e("components.sheet.stories.withoutHorizontalSpace.openButton")}),t.jsx(r,{open:n,onBackdropClick:()=>o(!1),children:t.jsx(i,{horizontalSpace:!1,children:t.jsx("p",{children:e("components.sheet.stories.withoutHorizontalSpace.content")})})})]})}},u={name:e("components.sheet.stories.nested.name"),render:()=>{const[n,o]=c.useState(!1),[S,a]=c.useState(!1);return t.jsxs("div",{children:[t.jsx(s,{theme:"neutral",onClick:()=>o(!0),children:e("components.sheet.stories.nested.openButton")}),t.jsxs(r,{open:n,onBackdropClick:()=>o(!1),children:[t.jsx(p,{title:e("components.sheet.stories.nested.title"),closeIcon:!0,onCloseClick:()=>o(!1)}),t.jsxs(i,{children:[t.jsx("p",{children:e("components.sheet.stories.nested.content")}),t.jsx(s,{theme:"neutral",onClick:()=>a(!0),style:{marginTop:"16px"},children:e("components.sheet.stories.nested.openNestedButton")})]})]}),t.jsxs(r,{open:S,onBackdropClick:()=>a(!1),children:[t.jsx(p,{title:e("components.sheet.stories.nested.nestedTitle"),closeIcon:!0,onCloseClick:()=>a(!1)}),t.jsx(i,{children:t.jsx("p",{children:e("components.sheet.stories.nested.nestedContent")})})]})]})}},k={name:e("components.sheet.stories.interactive.name"),render:()=>{const[n,o]=c.useState(!0);return t.jsxs(r,{open:n,onBackdropClick:()=>o(!1),children:[t.jsx(p,{title:e("components.sheet.stories.interactive.title"),closeIcon:!0,onCloseClick:()=>o(!1)}),t.jsx(i,{children:t.jsx("p",{children:e("components.sheet.stories.interactive.content")})})]})}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  name: t('components.sheet.stories.default.name'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [open2, setOpen2] = useState(false);
+    return <div>
+        <Button theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.sheet.stories.default.openButton')}
+        </Button>
+        <Sheet open={open2} portal onBackdropClick={() => setOpen2(false)}>
+          <SheetHeader title={t('components.sheet.stories.default.title2')} closeIcon onCloseClick={() => setOpen2(false)} />
+          <SheetBody>
+            <p>{t('components.sheet.stories.default.content2')}</p>
+          </SheetBody>
+        </Sheet>
+        <Sheet open={open} portal onBackdropClick={() => setOpen(false)}>
+          <SheetHeader title={t('components.sheet.stories.default.title')} closeIcon onCloseClick={() => setOpen(false)} />
+          <SheetBody>
+            <p>{t('components.sheet.stories.default.content')}</p>
+            <Button theme="neutral" onClick={() => setOpen2(true)} style={{
+            marginTop: '16px'
+          }}>
+              {t('components.sheet.stories.default.open2')}
+            </Button>
+          </SheetBody>
+        </Sheet>
+      </div>;
+  }
+}`,...l.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  name: t('components.sheet.stories.withFooter.name'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <div>
+        <Button theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.sheet.stories.withFooter.openButton')}
+        </Button>
+        <Sheet open={open} onBackdropClick={() => setOpen(false)}>
+          <SheetHeader title={t('components.sheet.stories.withFooter.title')} />
+          <SheetBody>
+            <p>{t('components.sheet.stories.withFooter.content')}</p>
+          </SheetBody>
+          <SheetFooter>
+            <Button theme="neutral" onClick={() => setOpen(false)}>
+              {t('common.actions.cancel')}
+            </Button>
+            <Button theme="neutral" onClick={() => setOpen(false)}>
+              {t('common.actions.confirm')}
+            </Button>
+          </SheetFooter>
+        </Sheet>
+      </div>;
+  }
+}`,...m.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  name: t('components.sheet.stories.withBackIcon.name'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <div>
+        <Button theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.sheet.stories.withBackIcon.openButton')}
+        </Button>
+        <Sheet open={open} onBackdropClick={() => setOpen(false)}>
+          <SheetHeader title={t('components.sheet.stories.withBackIcon.title')} backIcon onBackClick={() => setOpen(false)} />
+          <SheetBody>
+            {t('components.sheet.stories.withBackIcon.content')}
+          </SheetBody>
+        </Sheet>
+      </div>;
+  }
+}`,...h.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  name: t('components.sheet.stories.withoutHorizontalSpace.name'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <div>
+        <Button theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.sheet.stories.withoutHorizontalSpace.openButton')}
+        </Button>
+        <Sheet open={open} onBackdropClick={() => setOpen(false)}>
+          <SheetBody horizontalSpace={false}>
+            <p>
+              {t('components.sheet.stories.withoutHorizontalSpace.content')}
+            </p>
+          </SheetBody>
+        </Sheet>
+      </div>;
+  }
+}`,...d.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  name: t('components.sheet.stories.nested.name'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [openNested, setOpenNested] = useState(false);
+    return <div>
+        <Button theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.sheet.stories.nested.openButton')}
+        </Button>
+        <Sheet open={open} onBackdropClick={() => setOpen(false)}>
+          <SheetHeader title={t('components.sheet.stories.nested.title')} closeIcon onCloseClick={() => setOpen(false)} />
+          <SheetBody>
+            <p>{t('components.sheet.stories.nested.content')}</p>
+            <Button theme="neutral" onClick={() => setOpenNested(true)} style={{
+            marginTop: '16px'
+          }}>
+              {t('components.sheet.stories.nested.openNestedButton')}
+            </Button>
+          </SheetBody>
+        </Sheet>
+        <Sheet open={openNested} onBackdropClick={() => setOpenNested(false)}>
+          <SheetHeader title={t('components.sheet.stories.nested.nestedTitle')} closeIcon onCloseClick={() => setOpenNested(false)} />
+          <SheetBody>
+            <p>{t('components.sheet.stories.nested.nestedContent')}</p>
+          </SheetBody>
+        </Sheet>
+      </div>;
+  }
+}`,...u.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  name: t('components.sheet.stories.interactive.name'),
+  render: () => {
+    const [open, setOpen] = useState(true);
+    return <Sheet open={open} onBackdropClick={() => setOpen(false)}>
+        <SheetHeader title={t('components.sheet.stories.interactive.title')} closeIcon onCloseClick={() => setOpen(false)} />
+        <SheetBody>
+          <p>{t('components.sheet.stories.interactive.content')}</p>
+        </SheetBody>
+      </Sheet>;
+  }
+}`,...k.parameters?.docs?.source}}};const fe=["Default","WithSheetFooter","SheetHeaderWithBackIcon","SheetBodyWithoutHorizontalSpace","Nested","Interactive"];export{l as Default,k as Interactive,u as Nested,d as SheetBodyWithoutHorizontalSpace,h as SheetHeaderWithBackIcon,m as WithSheetFooter,fe as __namedExportsOrder,Be as default};

package/dist-storybook/assets/skeleton-Dn8rwbgX.js

@@ -0,0 +1 @@
+import{j as r}from"./iframe-CLEfhyJc.js";import{c as n,g as u}from"./classname-DoNrELT0.js";const s=u("skeleton"),o=({animated:e=!0,className:t,width:l,height:a,shape:m="square",...i})=>r.jsx("div",{...i,className:n(s,`${s}--${m}`,{[`${s}--animated`]:e},t),style:{...l?{"--width":l+(typeof l=="number"?"px":"")}:{},...a?{"--height":a+(typeof a=="number"?"px":"")}:{}}}),d=e=>r.jsx(o,{...e,className:n(`${s}--title`,e.className)}),p=({lineCount:e=3,...t})=>r.jsx("div",{children:new Array(e).fill(0).map((l,a)=>r.jsx(o,{...t,className:n(`${s}__paragraph-line`,t.className)},a))});o.__docgenInfo={description:"",methods:[],displayName:"Skeleton",props:{animated:{defaultValue:{value:"true",computed:!1},required:!1},shape:{defaultValue:{value:"'square'",computed:!1},required:!1}}};d.__docgenInfo={description:"",methods:[],displayName:"SkeletonTitle"};p.__docgenInfo={description:"",methods:[],displayName:"SkeletonParagraph",props:{lineCount:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"3",computed:!1}}}};export{o as S,d as a,p as b};

package/dist-storybook/assets/skeleton.stories-B71MlMyi.js

@@ -0,0 +1,139 @@
+import{j as n}from"./iframe-CLEfhyJc.js";import{S as m,a as d,b as l}from"./skeleton-Dn8rwbgX.js";import{t as e}from"./store-D2RudmNr.js";import{T as g,S as u,M as c,P as x,a as k}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-DoNrELT0.js";import"./index-CaMbLGUB.js";const S=()=>{const h=`
+## ${e("common.table.title")}
+
+### Skeleton
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`width\` | \`number | string\` | ${e("common.table.no")} | ${e("components.skeleton.widthDescription")} |
+| \`height\` | \`number | string\` | ${e("common.table.no")} | ${e("components.skeleton.heightDescription")} |
+| \`shape\` | \`'rounded' | 'rounded-8' | 'rounded-4' | 'pill' | 'none'\` | ${e("common.table.no")} | ${e("components.skeleton.shapeDescription")} |
+| \`animated\` | \`boolean\` | ${e("common.table.no")} | ${e("components.skeleton.animatedDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.skeleton.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.skeleton.propsDescription")} |
+
+### SkeletonTitle & SkeletonParagraph
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`lineCount\` | \`number\` | ${e("common.table.no")} | ${e("components.skeleton.lineCountDescription")} |
+| \`paragraphProps\` | \`object\` | ${e("common.table.no")} | ${e("components.skeleton.paragraphPropsDescription")} |
+| \`title\` | \`boolean\` | ${e("common.table.no")} | ${e("components.skeleton.titleDescription")} |
+| \`paragraph\` | \`boolean\` | ${e("common.table.no")} | ${e("components.skeleton.paragraphDescription")} |
+`;return n.jsxs(n.Fragment,{children:[n.jsx(g,{}),n.jsx(u,{}),n.jsx(c,{children:e("components.skeleton.description")}),n.jsx(x,{}),n.jsx(c,{children:h}),n.jsx(k,{})]})},w={title:"Components/Skeleton",component:m,parameters:{layout:"padded",docs:{page:S}},tags:["autodocs"],argTypes:{width:{control:"text",description:e("components.skeleton.argTypes.widthDescription"),table:{type:{summary:"number | string"}}},height:{control:"text",description:e("components.skeleton.argTypes.heightDescription"),table:{type:{summary:"number | string"}}},shape:{control:"select",options:["rounded","rounded-8","rounded-4","pill","none"],description:e("components.skeleton.argTypes.shapeDescription"),table:{type:{summary:'"rounded" | "rounded-8" | "rounded-4" | "pill" | "none"'}}},animated:{control:"boolean",description:e("components.skeleton.argTypes.animatedDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},className:{description:e("components.skeleton.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},t={name:e("components.skeleton.stories.default.name"),args:{width:200,height:20}},o={name:e("components.skeleton.stories.differentShapes.name"),render:()=>n.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[n.jsxs("div",{children:[n.jsx("p",{style:{marginBottom:"8px"},children:e("components.skeleton.stories.differentShapes.rounded")}),n.jsx(m,{width:200,height:20,shape:"rounded"})]}),n.jsxs("div",{children:[n.jsx("p",{style:{marginBottom:"8px"},children:e("components.skeleton.stories.differentShapes.pill")}),n.jsx(m,{width:200,height:20,shape:"pill"})]}),n.jsxs("div",{children:[n.jsx("p",{style:{marginBottom:"8px"},children:e("components.skeleton.stories.differentShapes.square")}),n.jsx(m,{width:200,height:20,shape:"none"})]})]})},s={name:e("components.skeleton.stories.titleComponent.name"),render:()=>n.jsxs("div",{children:[n.jsx("h3",{style:{marginBottom:"12px"},children:e("components.skeleton.stories.titleComponent.title")}),n.jsx(d,{width:300,height:24})]})},r={name:e("components.skeleton.stories.paragraphComponent.name"),render:()=>n.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[n.jsxs("div",{children:[n.jsx("h3",{style:{marginBottom:"12px"},children:e("components.skeleton.stories.paragraphComponent.defaultTitle")}),n.jsx(l,{})]}),n.jsxs("div",{children:[n.jsx("h3",{style:{marginBottom:"12px"},children:e("components.skeleton.stories.paragraphComponent.customLineCountTitle")}),n.jsx(l,{lineCount:5})]}),n.jsxs("div",{children:[n.jsx("h3",{style:{marginBottom:"12px"},children:e("components.skeleton.stories.paragraphComponent.customSizeTitle")}),n.jsx(l,{lineCount:3,width:400,height:16})]})]})},a={name:e("components.skeleton.stories.withoutAnimation.name"),args:{width:200,height:20,animated:!1}},i={name:e("components.skeleton.stories.loadingStatePattern.name"),render:()=>n.jsx("div",{children:n.jsxs(n.Fragment,{children:[n.jsx(d,{width:300,height:24}),n.jsx("div",{style:{marginTop:"16px"},children:n.jsx(l,{lineCount:3})})]})})},p={name:e("components.skeleton.stories.interactive.name"),args:{width:200,height:20,shape:"rounded"}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  name: t('components.skeleton.stories.default.name'),
+  args: {
+    width: 200,
+    height: 20
+  }
+}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  name: t('components.skeleton.stories.differentShapes.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <div>
+        <p style={{
+        marginBottom: '8px'
+      }}>
+          {t('components.skeleton.stories.differentShapes.rounded')}
+        </p>
+        <Skeleton width={200} height={20} shape="rounded" />
+      </div>
+      <div>
+        <p style={{
+        marginBottom: '8px'
+      }}>
+          {t('components.skeleton.stories.differentShapes.pill')}
+        </p>
+        <Skeleton width={200} height={20} shape="pill" />
+      </div>
+      <div>
+        <p style={{
+        marginBottom: '8px'
+      }}>
+          {t('components.skeleton.stories.differentShapes.square')}
+        </p>
+        <Skeleton width={200} height={20} shape="none" />
+      </div>
+    </div>
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  name: t('components.skeleton.stories.titleComponent.name'),
+  render: () => <div>
+      <h3 style={{
+      marginBottom: '12px'
+    }}>
+        {t('components.skeleton.stories.titleComponent.title')}
+      </h3>
+      <SkeletonTitle width={300} height={24} />
+    </div>
+}`,...s.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  name: t('components.skeleton.stories.paragraphComponent.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.skeleton.stories.paragraphComponent.defaultTitle')}
+        </h3>
+        <SkeletonParagraph />
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.skeleton.stories.paragraphComponent.customLineCountTitle')}
+        </h3>
+        <SkeletonParagraph lineCount={5} />
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.skeleton.stories.paragraphComponent.customSizeTitle')}
+        </h3>
+        <SkeletonParagraph lineCount={3} width={400} height={16} />
+      </div>
+    </div>
+}`,...r.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  name: t('components.skeleton.stories.withoutAnimation.name'),
+  args: {
+    width: 200,
+    height: 20,
+    animated: false
+  }
+}`,...a.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  name: t('components.skeleton.stories.loadingStatePattern.name'),
+  render: () => {
+    const loading = true;
+    return <div>
+        {loading ? <>
+            <SkeletonTitle width={300} height={24} />
+            <div style={{
+          marginTop: '16px'
+        }}>
+              <SkeletonParagraph lineCount={3} />
+            </div>
+          </> : <>
+            <h1>
+              {t('components.skeleton.stories.loadingStatePattern.actualTitle')}
+            </h1>
+            <p>
+              {t('components.skeleton.stories.loadingStatePattern.actualContent')}
+            </p>
+          </>}
+      </div>;
+  }
+}`,...i.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  name: t('components.skeleton.stories.interactive.name'),
+  args: {
+    width: 200,
+    height: 20,
+    shape: 'rounded'
+  }
+}`,...p.parameters?.docs?.source}}};const D=["Default","DifferentShapes","SkeletonTitleComponent","SkeletonParagraphComponent","WithoutAnimation","LoadingStatePattern","Interactive"];export{t as Default,o as DifferentShapes,p as Interactive,i as LoadingStatePattern,r as SkeletonParagraphComponent,s as SkeletonTitleComponent,a as WithoutAnimation,D as __namedExportsOrder,w as default};