@v-miniapp/ui-react 1.0.41 → 1.0.45

package/dist-storybook/assets/date-field.stories-Diptwqfv.js

@@ -0,0 +1,129 @@
+import{j as t,r as h}from"./iframe-CQAwSt4E.js";import{T as g,S as D,M as u,P as b,a as f}from"./blocks-BuaOUtiH.js";import{D as a,a as l}from"./chip-kG4p82WT.js";import{t as e}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"./navigation-bar-vI-FPasP.js";import"./visibility-sensor-CwrzJO06.js";import"./index-B-Ksafg0.js";import"./store-CPumdfcU.js";import"./_setToString-CbM921C9.js";import"./react-hufnxGVs.js";import"./omit-Bsx5nTI0.js";import"./pick-BhmhLmLe.js";import"./button-CL7GeC23.js";import"./typography-DEpAJl_i.js";import"./image-C3EsNRhz.js";import"./bottom-tab-bar-CtcTAxuI.js";import"./toast-provider-DurnMJhd.js";import"./carousel-1Kww3hIz.js";import"./embla-carousel-react.esm-BYjpaHZ9.js";import"./pagination-DZHoBs_4.js";import"./section-content-DGNB4eLN.js";import"./option-item-LRh_OyV4.js";import"./index-BV0AJWP6.js";import"./alert-DLW8CoyB.js";import"./skeleton-C91JgehG.js";import"./label-DV2iCDmN.js";import"./input-wrapper-BKHgnPy6.js";import"./text-field-jK6rpOo2.js";import"./number-field-CXKmnfKe.js";import"./checkbox-MGytNNRt.js";import"./radio-B5NJxG_l.js";import"./date-Cg-Uk_pp.js";import"./date-picker-Dnq_-0Md.js";import"./calendar-dOCsjhVU.js";import"./search-field-CQqgFbfg.js";import"./text-area-DwSXyqOe.js";import"./avatar-GxcYPA1p.js";import"./badge-D_LzMVtw.js";import"./switch-p-aXI-ev.js";import"./tab-bar-CSeCmtIZ.js";import"./rating-BdXViYBv.js";import"./tooltip-QDdel5My.js";const x=()=>{const o=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`value\` | \`Date | null\` | ${e("common.table.no")} | ${e("components.dateField.valueDescription")} |
+| \`onChange\` | \`(value: Date | null) => void\` | ${e("common.table.no")} | ${e("components.dateField.onChangeDescription")} |
+| \`picker\` | \`boolean | IDatePickerSheetProps\` | ${e("common.table.no")} | ${e("components.dateField.pickerDescription")} |
+| \`loading\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dateField.loadingDescription")} |
+| \`label\` | \`ILabelProps\` | ${e("common.table.no")} | ${e("components.dateField.labelDescription")} |
+| \`placeholder\` | \`string\` | ${e("common.table.no")} | ${e("components.dateField.placeholderDescription")} |
+| \`shape\` | \`'rounded' | 'pill'\` | ${e("common.table.no")} | ${e("components.dateField.shapeDescription")} |
+| \`disabled\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dateField.disabledDescription")} |
+| \`error\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dateField.errorDescription")} |
+| \`errorMessage\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dateField.errorMessageDescription")} |
+| \`success\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dateField.successDescription")} |
+| \`successMessage\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dateField.successMessageDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.dateField.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.dateField.propsDescription")} |
+  `;return t.jsxs(t.Fragment,{children:[t.jsx(g,{}),t.jsx(D,{}),t.jsx(u,{children:e("components.dateField.description")}),t.jsx(b,{}),t.jsx(u,{children:o}),t.jsx(f,{})]})},ue={title:"Components/DateField",component:a,parameters:{layout:"padded",docs:{page:x}},tags:["autodocs"],argTypes:{value:{control:"date",description:e("components.dateField.valueDescription"),table:{type:{summary:"Date | null"}}},onChange:{action:"changed",description:e("components.dateField.onChangeDescription"),table:{type:{summary:"(value: Date | null) => void"}}},picker:{control:"boolean",description:e("components.dateField.pickerDescription"),table:{type:{summary:"boolean | IDatePickerSheetProps"},defaultValue:{summary:"true"}}},loading:{control:"boolean",description:e("components.dateField.loadingDescription"),table:{type:{summary:"boolean"}}},placeholder:{control:"text",description:e("components.dateField.placeholderDescription"),table:{type:{summary:"string"}}},shape:{control:"select",options:["rounded","pill"],description:e("components.dateField.shapeDescription"),table:{type:{summary:'"rounded" | "pill"'},defaultValue:{summary:"rounded"}}},disabled:{control:"boolean",description:e("components.dateField.disabledDescription"),table:{type:{summary:"boolean"}}},error:{control:"boolean",description:e("components.dateField.errorDescription"),table:{type:{summary:"boolean"}}},errorMessage:{control:"text",description:e("components.dateField.errorMessageDescription"),table:{type:{summary:"ReactNode"}}},success:{control:"boolean",description:e("components.dateField.successDescription"),table:{type:{summary:"boolean"}}},successMessage:{control:"text",description:e("components.dateField.successMessageDescription"),table:{type:{summary:"ReactNode"}}},className:{control:"text",description:e("components.dateField.classNameDescription"),table:{type:{summary:"string"}}}}},s={storyName:e("components.dateField.stories.default.title"),args:{defaultValue:new Date,picker:"calendar",placeholder:e("components.dateField.stories.default.placeholder")}},n={storyName:e("components.dateField.stories.controlled.title"),render:()=>{const[o,r]=h.useState(new Date);return t.jsx(a,{value:o,picker:"calendar",onChange:r,placeholder:e("components.dateField.stories.default.placeholder")})}},i={storyName:e("components.dateField.stories.withLabel.title"),args:{label:{text:e("components.dateField.stories.withLabel.label")},placeholder:e("components.dateField.stories.withLabel.placeholder")}},d={storyName:e("components.dateField.stories.withoutPicker.title"),args:{picker:!1,placeholder:e("components.dateField.stories.withoutPicker.placeholder")}},c={storyName:e("components.dateField.stories.states.title"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(a,{placeholder:e("components.dateField.stories.default.placeholder")}),t.jsx(a,{value:new Date}),t.jsx(a,{disabled:!0,placeholder:e("components.dateField.disabledDescription")}),t.jsx(a,{error:!0,errorMessage:e("components.dateField.stories.states.errorMessage"),placeholder:e("components.dateField.stories.default.placeholder")}),t.jsx(a,{loading:!0,placeholder:e("components.dateField.stories.states.loading")})]})},p={storyName:e("components.dateField.stories.shapes.title"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(a,{shape:"rounded",placeholder:e("components.dateField.stories.shapes.rounded")}),t.jsx(a,{shape:"pill",placeholder:e("components.dateField.stories.shapes.pill")})]})},m={storyName:e("components.dateField.stories.rangeDateField.title"),render:()=>{const[o,r]=h.useState({from:new Date("2025-01-01"),to:new Date("2025-01-10")});return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(l,{label:{text:e("components.dateField.stories.rangeDateField.datePickerControlled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},value:o,onChange:r}),t.jsx(l,{label:{text:e("components.dateField.stories.rangeDateField.calendarControlled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},value:o,onChange:r,picker:"calendar"}),t.jsx(l,{label:{text:e("components.dateField.stories.rangeDateField.inputControlled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},value:o,onChange:r,picker:!1}),t.jsx(l,{label:{text:e("components.dateField.stories.rangeDateField.datePickerUncontrolled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},defaultValue:o}),t.jsx(l,{label:{text:e("components.dateField.stories.rangeDateField.calendarUncontrolled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},defaultValue:o,picker:"calendar"}),t.jsx(l,{label:{text:e("components.dateField.stories.rangeDateField.inputUncontrolled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},defaultValue:o,picker:!1})]})}},F={storyName:e("components.dateField.stories.interactive.title"),args:{placeholder:e("components.dateField.stories.default.placeholder")}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.default.title'),
+  args: {
+    defaultValue: new Date(),
+    picker: 'calendar',
+    placeholder: t('components.dateField.stories.default.placeholder')
+  }
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.controlled.title'),
+  render: () => {
+    const [date, setDate] = useState<Date | null>(new Date());
+    return <DateField value={date} picker="calendar" onChange={setDate} placeholder={t('components.dateField.stories.default.placeholder')} />;
+  }
+}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.withLabel.title'),
+  args: {
+    label: {
+      text: t('components.dateField.stories.withLabel.label')
+    },
+    placeholder: t('components.dateField.stories.withLabel.placeholder')
+  }
+}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.withoutPicker.title'),
+  args: {
+    picker: false,
+    placeholder: t('components.dateField.stories.withoutPicker.placeholder')
+  }
+}`,...d.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.states.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <DateField placeholder={t('components.dateField.stories.default.placeholder')} />
+      <DateField value={new Date()} />
+      <DateField disabled placeholder={t('components.dateField.disabledDescription')} />
+      <DateField error errorMessage={t('components.dateField.stories.states.errorMessage')} placeholder={t('components.dateField.stories.default.placeholder')} />
+      <DateField loading placeholder={t('components.dateField.stories.states.loading')} />
+    </div>
+}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.shapes.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <DateField shape="rounded" placeholder={t('components.dateField.stories.shapes.rounded')} />
+      <DateField shape="pill" placeholder={t('components.dateField.stories.shapes.pill')} />
+    </div>
+}`,...p.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.rangeDateField.title'),
+  render: () => {
+    const [range, setRange] = useState<IDateFieldRangeValue>({
+      from: new Date('2025-01-01'),
+      to: new Date('2025-01-10')
+    });
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.datePickerControlled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} value={range} onChange={setRange} />
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.calendarControlled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} value={range} onChange={setRange} picker="calendar" />
+
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.inputControlled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} value={range} onChange={setRange} picker={false} />
+
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.datePickerUncontrolled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} defaultValue={range} />
+
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.calendarUncontrolled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} defaultValue={range} picker="calendar" />
+
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.inputUncontrolled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} defaultValue={range} picker={false} />
+      </div>;
+  }
+}`,...m.parameters?.docs?.source}}};F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.interactive.title'),
+  args: {
+    placeholder: t('components.dateField.stories.default.placeholder')
+  }
+}`,...F.parameters?.docs?.source}}};const he=["Default","Controlled","WithLabel","WithoutPicker","States","Shapes","DateFieldRange","Interactive"];export{n as Controlled,m as DateFieldRange,s as Default,F as Interactive,p as Shapes,c as States,i as WithLabel,d as WithoutPicker,he as __namedExportsOrder,ue as default};

package/dist-storybook/assets/date-picker-Dnq_-0Md.js

@@ -0,0 +1 @@
+import{r as n,j as p}from"./iframe-CQAwSt4E.js";import{u as Y}from"./index-BV0AJWP6.js";import{o as ae}from"./omit-Bsx5nTI0.js";import{g as se,c as A}from"./classname-CUR_zgkh.js";import{u as ne}from"./embla-carousel-react.esm-BYjpaHZ9.js";import{T as oe}from"./typography-DEpAJl_i.js";import{d as E}from"./date-Cg-Uk_pp.js";const F=se("date-picker"),re={CIRCLE_DEGREES:360,WHEEL_ITEM_SIZE:24,WHEEL_ITEM_COUNT:80,WHEEL_ITEMS_IN_VIEW:4},T=`${F}-item`,{CIRCLE_DEGREES:$,WHEEL_ITEM_COUNT:U,WHEEL_ITEMS_IN_VIEW:le,WHEEL_ITEM_SIZE:q}=re,L=$/U,ce=L*le,Z=Math.round(q/2/Math.tan(Math.PI/U)),R=(e,o)=>Math.abs(e-o)<ce,ie=(e,o,a,r,s)=>{const f=e.slideNodes()[o],l=e.scrollProgress()*s,i=e.scrollSnapList()[o]*s,t=i+s,u=i-s;let O=!1,d=o*-L;if(R(l,i)&&(O=!0),R(l,u)&&(O=!0,d=-$+(r-o)*L),R(l,t)&&(O=!0,d=-(s%$)-o*L),O){const c=Math.abs(l-i)<L/2;f.style.opacity=c?"1":"0.25",f.style.transform=`translateY(-${o*100}%) rotateX(${d}deg) translateZ(${Z}px)`}else f.style.opacity="0",f.style.transform="none"},ue=(e,o)=>{e.containerNode().style.transform=`translateZ(${Z}px) rotateX(${o}deg)`},k=e=>{const{className:o,items:a,activeIndex:r=0,renderLabel:s,onChange:f}=e,l=!0,[i,t]=ne({loop:l,axis:"y",dragFree:!0,containScroll:!1,watchSlides:!1,startIndex:r}),u=a.length,O=n.useRef(null),d=u*L,c=0,g=n.useCallback(h=>{if(!h)return;const{translate:y,slideLooper:I}=h.internalEngine();y.clear(),y.toggleActive(!1),I.loopPoints.forEach(({translate:M})=>{M.clear(),M.toggleActive(!1)})},[]),C=n.useCallback(h=>{const I=(u*L-c)*h.scrollProgress();ue(h,I),h.slideNodes().forEach((M,D)=>{ie(h,D,l,u,d)})},[u,c,d,l]);return n.useEffect(()=>{if(!t)return;t.on("pointerUp",y=>{const{scrollTo:I,target:M,location:D}=y.internalEngine(),j=M.get()-D.get(),H=Math.abs(j)<q/2.5?10:.1,x=j*H;I.distance(x,!0)}),t.on("scroll",C),t.on("reInit",y=>{g(y),C(y)}),g(t),C(t);const h=()=>{f&&f(t.selectedScrollSnap())};return t.on("select",h),()=>{t.off("select",h)}},[t,g,C,f]),p.jsx("div",{className:A(T,o),children:p.jsx("div",{className:`${T}__scene`,ref:O,children:p.jsx("div",{className:`${T}__viewport`,ref:i,children:p.jsx("div",{className:`${T}__container`,children:a.map(h=>p.jsx("div",{className:`${T}__slide`,children:p.jsx(oe,{size:"base",weight:"600",children:s?.(h)||h})},h))})})})})};k.__docgenInfo={description:"",methods:[],displayName:"DatePickerItem"};const de=e=>{const{type:o,value:a,max:r,min:s,hasHour:f,renderLabels:l}=e;let i,t,u;switch(o){case"day":{u=l?.days||ge,i=r&&E(r).startOf("month").valueOf()===E(a).startOf("month").valueOf()?r.getDate():void 0,t=s&&E(s).startOf("month").valueOf()===E(a).startOf("month").valueOf()?s.getDate():void 0;break}case"month":{u=l?.months||(f?ye:he),i=r&&E(r).startOf("year").valueOf()===E(a).startOf("year").valueOf()?r.getMonth():void 0,t=s&&E(s).startOf("year").valueOf()===E(a).startOf("year").valueOf()?s.getMonth():void 0;break}case"year":{u=l?.years||ve,i=r?r.getFullYear():void 0,t=s?s.getFullYear():void 0;break}case"hour":{u=l?.hours||me,i=r&&E(r).startOf("day").valueOf()===E(a).startOf("day").valueOf()?r.getHours():void 0,t=s&&E(s).startOf("day").valueOf()===E(a).startOf("day").valueOf()?s.getHours():void 0;break}case"minute":{u=l?.minutes||fe,i=r&&E(r).startOf("hour").valueOf()===E(a).startOf("hour").valueOf()?r.getMinutes():void 0,t=s&&E(s).startOf("hour").valueOf()===E(a).startOf("hour").valueOf()?s.getMinutes():void 0;break}case"dayOfWeek":{u=l?.dayOfWeeks||Ee;break}}return{renderLabel:u,max:i,min:t}},W=(e,o,a)=>Array.from({length:Math.floor((o-e+1)/a)},(r,s)=>e+s*a),w=(e,o)=>{let a=0;for(;a<e.length;a++){if(e[a]===o)return a;if(e[a]>o)return Math.max(a,0)}return a-1},me=e=>e.toString().padStart(2,"0"),fe=e=>e.toString().padStart(2,"0"),ge=e=>e.toString().padStart(2,"0"),he=e=>"tháng "+(e+1).toString().padStart(2,"0"),ye=e=>"thg "+(e+1).toString().padStart(2,"0"),ve=e=>e.toString().padStart(4,"0"),Ee=e=>["chủ nhật","thứ 2","thứ 3","thứ 4","thứ 5","thứ 6","thứ 7"][e%7],B=({className:e,hour:o,day:a,month:r,year:s,minutesProps:f,hoursProps:l,daysProps:i,monthsProps:t,yearsProps:u,dayOfWeeksProps:O,...d})=>{const[c,g]=Y(d,{trigger:"onChange",valuePropName:"value",defaultValue:{years:new Date().getFullYear(),minutes:new Date().getMinutes(),hours:new Date().getHours(),days:new Date().getDate(),months:new Date().getMonth(),dayOfWeeks:new Date().getDay()}});let C=!1;a=a||o&&(r||s),r=r||(o||a)&&s,a&&!o&&!r&&!s&&(C=!0,a=!1);const h=o,y=n.useMemo(()=>W(0,59,f?.step||1),[f?.step]),I=n.useMemo(()=>w(y,c.minutes),[y,c.minutes]),M=n.useCallback(v=>{g(m=>({...m,minutes:y[v%y.length]}))},[y,g]),D=n.useMemo(()=>W(0,23,l?.step||1),[l?.step]),j=n.useMemo(()=>w(D,c.hours),[D,c.hours]),H=n.useCallback(v=>{g(m=>({...m,hours:D[v%D.length]}))},[D,g]),x=n.useMemo(()=>{const v=new Date(c.years,c.months+1,0).getDate();return W(1,v,i?.step||1)},[i?.step,c.months,c.years]),G=n.useMemo(()=>w(x,c.days),[x,c.days]),X=n.useCallback(v=>{g(m=>({...m,days:x[v%x.length],dayOfWeeks:new Date(m.years,m.months,x[v%x.length]).getDay()}))},[x,g]),b=n.useMemo(()=>W(0,11,t?.step||1),[t?.step]),z=n.useMemo(()=>w(b,c.months),[b,c.months]),J=n.useCallback(v=>{g(m=>({...m,months:b[v%b.length],dayOfWeeks:new Date(m.years,b[v%b.length],m.days).getDay()}))},[b,g]),_=n.useMemo(()=>W(1900,2300,u?.step||1),[u?.step]),K=n.useMemo(()=>w(_,c.years),[_,c.years]),Q=n.useCallback(v=>{g(m=>({...m,years:_[v%_.length],dayOfWeeks:new Date(_[v%_.length],m.months,m.days).getDay()}))},[_,g]),S=n.useMemo(()=>W(0,59,O?.step||1),[O?.step]),P=n.useMemo(()=>w(S,c.dayOfWeeks),[S,c.dayOfWeeks]),ee=n.useCallback(v=>{g(m=>{const N=new Date(m.years,m.months,m.days),V=S[v%S.length],te=N.getDay()-V;return N.setDate(N.getDate()-te),{...m,years:N.getFullYear(),months:N.getMonth(),days:N.getDate(),dayOfWeeks:V}})},[S,g]);return p.jsxs("div",{className:A(`${F}-base`,e),children:[a&&p.jsx(k,{items:x,activeIndex:G,onChange:X,renderLabel:i.renderLabel,min:i.min,max:i.max},x.length),r&&p.jsx(k,{items:b,activeIndex:z,onChange:J,renderLabel:t.renderLabel,min:t.min,max:t.max}),s&&p.jsx(k,{items:_,activeIndex:K,onChange:Q,renderLabel:u.renderLabel,min:u.min,max:u.max}),C&&p.jsx(k,{items:S,activeIndex:P,onChange:ee,renderLabel:O.renderLabel,min:O.min,max:O.max}),o&&p.jsx(k,{items:D,activeIndex:j,onChange:H,renderLabel:l.renderLabel,min:l.min,max:l.max}),h&&p.jsx(k,{items:y,activeIndex:I,onChange:M,renderLabel:f.renderLabel,min:f.min,max:f.max})]})};B.__docgenInfo={description:"",methods:[],displayName:"DatePickerBase"};const Me=({min:e,max:o,renderLabels:a,year:r=!0,month:s=!0,day:f=!0,hour:l=!1,...i})=>{const[t,u]=Y(i,{trigger:"onChange",valuePropName:"value",defaultValue:new Date}),O=n.useMemo(()=>({years:t.getFullYear(),months:t.getMonth(),days:t.getDate(),dayOfWeeks:t.getDay(),hours:t.getHours(),minutes:t.getMinutes()}),[t]),d=n.useCallback(M=>de({type:M,value:t,max:o,min:e,hasHour:l,renderLabels:a}),[t,o,e,l,a]),c=n.useMemo(()=>d("year"),[d]),g=n.useMemo(()=>d("month"),[d]),C=n.useMemo(()=>d("day"),[d]),h=n.useMemo(()=>d("hour"),[d]),y=n.useMemo(()=>d("minute"),[d]),I=n.useMemo(()=>d("dayOfWeek"),[d]);return p.jsx(B,{...ae(i,["value","onChange"]),year:r,month:s,day:f,hour:l,yearsProps:c,monthsProps:g,daysProps:C,hoursProps:h,minutesProps:y,dayOfWeeksProps:I,value:O,onChange:M=>{u(new Date(M.years,M.months,M.days,M.hours,M.minutes))}})};Me.__docgenInfo={description:"",methods:[],displayName:"DatePicker",props:{year:{defaultValue:{value:"true",computed:!1},required:!1},month:{defaultValue:{value:"true",computed:!1},required:!1},day:{defaultValue:{value:"true",computed:!1},required:!1},hour:{defaultValue:{value:"false",computed:!1},required:!1}}};export{Me as D};

package/dist-storybook/assets/date-picker.stories-BuGWvzFL.js

@@ -0,0 +1,123 @@
+import{j as t,r as y}from"./iframe-CQAwSt4E.js";import{T as D,S as g,M as u,P,a as k}from"./blocks-BuaOUtiH.js";import{D as l}from"./date-picker-Dnq_-0Md.js";import{t as e}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";import"./index-BV0AJWP6.js";import"./index-B-Ksafg0.js";import"./omit-Bsx5nTI0.js";import"./_setToString-CbM921C9.js";import"./classname-CUR_zgkh.js";import"./embla-carousel-react.esm-BYjpaHZ9.js";import"./typography-DEpAJl_i.js";import"./colors-_6nFGM3e.js";import"./date-Cg-Uk_pp.js";const h=()=>{const o=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`value\` | \`Date\` | ${e("common.table.no")} | ${e("components.datePicker.valueDescription")} |
+| \`onChange\` | \`(value: Date) => void\` | ${e("common.table.no")} | ${e("components.datePicker.onChangeDescription")} |
+| \`year\` | \`boolean\` | ${e("common.table.no")} | ${e("components.datePicker.yearDescription")} |
+| \`month\` | \`boolean\` | ${e("common.table.no")} | ${e("components.datePicker.monthDescription")} |
+| \`day\` | \`boolean\` | ${e("common.table.no")} | ${e("components.datePicker.dayDescription")} |
+| \`hour\` | \`boolean\` | ${e("common.table.no")} | ${e("components.datePicker.hourDescription")} |
+| \`min\` | \`Date | null\` | ${e("common.table.no")} | ${e("components.datePicker.minDescription")} |
+| \`max\` | \`Date | null\` | ${e("common.table.no")} | ${e("components.datePicker.maxDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.datePicker.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.datePicker.propsDescription")} |
+  `;return t.jsxs(t.Fragment,{children:[t.jsx(D,{}),t.jsx(g,{}),t.jsx(u,{children:e("components.datePicker.description")}),t.jsx(P,{}),t.jsx(u,{children:o}),t.jsx(k,{})]})},B={title:"Components/DatePicker",component:l,parameters:{layout:"padded",docs:{page:h}},tags:["autodocs"],argTypes:{value:{control:"date",description:e("components.datePicker.argTypes.valueDescription"),table:{type:{summary:"Date"}}},onChange:{action:"changed",description:e("components.datePicker.argTypes.onChangeDescription"),table:{type:{summary:"(value: Date) => void"}}},year:{control:"boolean",description:e("components.datePicker.argTypes.yearDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},month:{control:"boolean",description:e("components.datePicker.argTypes.monthDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},day:{control:"boolean",description:e("components.datePicker.argTypes.dayDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},hour:{control:"boolean",description:e("components.datePicker.argTypes.hourDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},min:{control:"date",description:e("components.datePicker.argTypes.minDescription"),table:{type:{summary:"Date | null"}}},max:{control:"date",description:e("components.datePicker.argTypes.maxDescription"),table:{type:{summary:"Date | null"}}},className:{control:"text",description:e("components.datePicker.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},r={storyName:e("components.datePicker.stories.default.title"),args:{}},n={storyName:e("components.datePicker.stories.controlled.title"),render:()=>{const[o,p]=y.useState(new Date);return t.jsxs("div",{children:[t.jsxs("p",{style:{marginBottom:"16px"},children:[e("components.datePicker.stories.interactive.selected")," ",o.toLocaleDateString()]}),t.jsx(l,{value:o,onChange:p})]})}},a={storyName:e("components.datePicker.stories.dateOnly.title"),args:{day:!0,month:!0,year:!0,hour:!1},parameters:{docs:{description:{story:e("components.datePicker.stories.dateOnly.description")}}}},s={storyName:e("components.datePicker.stories.dateAndTime.title"),args:{day:!0,month:!0,year:!0,hour:!0},parameters:{docs:{description:{story:e("components.datePicker.stories.dateAndTime.description")}}}},i={storyName:e("components.datePicker.stories.timeOnly.title"),args:{day:!1,month:!1,year:!1,hour:!0},parameters:{docs:{description:{story:e("components.datePicker.stories.timeOnly.description")}}}},c={storyName:e("components.datePicker.stories.dateAndTimeNoYear.title"),args:{day:!0,month:!0,year:!1,hour:!0},parameters:{docs:{description:{story:e("components.datePicker.stories.dateAndTimeNoYear.description")}}}},m={storyName:e("components.datePicker.stories.withDateRange.title"),args:{min:new Date("2020-01-01"),max:new Date("2030-12-31")},parameters:{docs:{description:{story:e("components.datePicker.stories.withDateRange.description",{min:"2020-01-01",max:"2030-12-31"})}}}},d={storyName:e("components.datePicker.stories.interactive.title"),render:()=>{const[o,p]=y.useState(new Date);return t.jsxs("div",{children:[t.jsxs("p",{style:{marginBottom:"16px"},children:[e("components.datePicker.stories.interactive.selected")," ",o.toLocaleDateString()]}),t.jsx(l,{value:o,onChange:p})]})}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.datePicker.stories.default.title'),
+  args: {}
+}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.datePicker.stories.controlled.title'),
+  render: () => {
+    const [date, setDate] = useState(new Date());
+    return <div>
+        <p style={{
+        marginBottom: '16px'
+      }}>
+          {t('components.datePicker.stories.interactive.selected')}{' '}
+          {date.toLocaleDateString()}
+        </p>
+        <DatePicker value={date} onChange={setDate} />
+      </div>;
+  }
+}`,...n.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.datePicker.stories.dateOnly.title'),
+  args: {
+    day: true,
+    month: true,
+    year: true,
+    hour: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: t('components.datePicker.stories.dateOnly.description')
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.datePicker.stories.dateAndTime.title'),
+  args: {
+    day: true,
+    month: true,
+    year: true,
+    hour: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: t('components.datePicker.stories.dateAndTime.description')
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.datePicker.stories.timeOnly.title'),
+  args: {
+    day: false,
+    month: false,
+    year: false,
+    hour: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: t('components.datePicker.stories.timeOnly.description')
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.datePicker.stories.dateAndTimeNoYear.title'),
+  args: {
+    day: true,
+    month: true,
+    year: false,
+    hour: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: t('components.datePicker.stories.dateAndTimeNoYear.description')
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.datePicker.stories.withDateRange.title'),
+  args: {
+    min: new Date('2020-01-01'),
+    max: new Date('2030-12-31')
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: t('components.datePicker.stories.withDateRange.description', {
+          min: '2020-01-01',
+          max: '2030-12-31'
+        })
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.datePicker.stories.interactive.title'),
+  render: () => {
+    const [date, setDate] = useState(new Date());
+    return <div>
+        <p style={{
+        marginBottom: '16px'
+      }}>
+          {t('components.datePicker.stories.interactive.selected')}{' '}
+          {date.toLocaleDateString()}
+        </p>
+        <DatePicker value={date} onChange={setDate} />
+      </div>;
+  }
+}`,...d.parameters?.docs?.source}}};const L=["Default","Controlled","DateOnly","DateAndTime","TimeOnly","DateAndTimeNoYear","WithDateRange","Interactive"];export{n as Controlled,s as DateAndTime,c as DateAndTimeNoYear,a as DateOnly,r as Default,d as Interactive,i as TimeOnly,m as WithDateRange,L as __namedExportsOrder,B as default};

package/dist-storybook/assets/dialog.stories-DJ0WsSkA.js

@@ -0,0 +1,212 @@
+import{j as t,r}from"./iframe-CQAwSt4E.js";import{T as y,S as B,M as x,P as T,a as b}from"./blocks-BuaOUtiH.js";import{b as i}from"./chip-kG4p82WT.js";import{B as s}from"./button-CL7GeC23.js";import{t as e}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"./navigation-bar-vI-FPasP.js";import"./visibility-sensor-CwrzJO06.js";import"./index-B-Ksafg0.js";import"./store-CPumdfcU.js";import"./_setToString-CbM921C9.js";import"./react-hufnxGVs.js";import"./omit-Bsx5nTI0.js";import"./pick-BhmhLmLe.js";import"./image-C3EsNRhz.js";import"./typography-DEpAJl_i.js";import"./bottom-tab-bar-CtcTAxuI.js";import"./toast-provider-DurnMJhd.js";import"./carousel-1Kww3hIz.js";import"./embla-carousel-react.esm-BYjpaHZ9.js";import"./pagination-DZHoBs_4.js";import"./section-content-DGNB4eLN.js";import"./option-item-LRh_OyV4.js";import"./index-BV0AJWP6.js";import"./alert-DLW8CoyB.js";import"./skeleton-C91JgehG.js";import"./label-DV2iCDmN.js";import"./input-wrapper-BKHgnPy6.js";import"./text-field-jK6rpOo2.js";import"./number-field-CXKmnfKe.js";import"./checkbox-MGytNNRt.js";import"./radio-B5NJxG_l.js";import"./date-Cg-Uk_pp.js";import"./date-picker-Dnq_-0Md.js";import"./calendar-dOCsjhVU.js";import"./search-field-CQqgFbfg.js";import"./text-area-DwSXyqOe.js";import"./avatar-GxcYPA1p.js";import"./badge-D_LzMVtw.js";import"./switch-p-aXI-ev.js";import"./tab-bar-CSeCmtIZ.js";import"./rating-BdXViYBv.js";import"./tooltip-QDdel5My.js";const O=()=>{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.dialog.openDescription")} |
+| \`onBackdropClick\` | \`(e: React.MouseEvent) => void\` | ${e("common.table.no")} | ${e("components.dialog.onBackdropClickDescription")} |
+| \`onCloseClick\` | \`(e: React.MouseEvent) => void\` | ${e("common.table.no")} | ${e("components.dialog.onCloseClickDescription")} |
+| \`title\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.titleDescription")} |
+| \`description\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.descriptionDescription")} |
+| \`topImageUrl\` | \`string\` | ${e("common.table.no")} | ${e("components.dialog.topImageUrlDescription")} |
+| \`top\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.topDescription")} |
+| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.childrenDescription")} |
+| \`footer\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.footerDescription")} |
+| \`closeAction\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dialog.closeActionDescription")} |
+| \`portal\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dialog.portalDescription")} |
+| \`overlay\` | \`'default' | 'blur'\` | ${e("common.table.no")} | ${e("components.dialog.overlayDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.dialog.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.dialog.propsDescription")} |
+  `;return t.jsxs(t.Fragment,{children:[t.jsx(y,{}),t.jsx(B,{}),t.jsx(x,{children:e("components.dialog.description")}),t.jsx(T,{}),t.jsx(x,{children:n}),t.jsx(b,{})]})},xe={title:"Components/Dialog",component:i,parameters:{layout:"fullscreen",docs:{page:O}},tags:["autodocs"],argTypes:{open:{control:"boolean",description:e("components.dialog.argTypes.openDescription"),table:{type:{summary:"boolean"}}},onBackdropClick:{action:"backdrop clicked",description:e("components.dialog.argTypes.onBackdropClickDescription"),table:{type:{summary:"(e: React.MouseEvent) => void"}}},onCloseClick:{action:"close clicked",description:e("components.dialog.argTypes.onCloseClickDescription"),table:{type:{summary:"(e: React.MouseEvent) => void"}}},title:{control:"text",description:e("components.dialog.argTypes.titleDescription"),table:{type:{summary:"ReactNode"}}},description:{control:"text",description:e("components.dialog.argTypes.descriptionDescription"),table:{type:{summary:"ReactNode"}}},topImageUrl:{control:"text",description:e("components.dialog.argTypes.topImageUrlDescription"),table:{type:{summary:"string"}}},top:{control:!1,description:e("components.dialog.argTypes.topDescription"),table:{type:{summary:"ReactNode"}}},children:{control:!1,description:e("components.dialog.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},footer:{control:!1,description:e("components.dialog.argTypes.footerDescription"),table:{type:{summary:"ReactNode"}}},closeAction:{control:"boolean",description:e("components.dialog.argTypes.closeActionDescription"),table:{type:{summary:"boolean"}}},portal:{control:"boolean",description:e("components.dialog.argTypes.portalDescription"),table:{type:{summary:"boolean"}}},overlay:{control:"select",options:["default","blur"],description:e("components.dialog.argTypes.overlayDescription"),table:{type:{summary:"default | blur"}}},className:{control:"text",description:e("components.dialog.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},l={storyName:e("components.dialog.stories.default.storyName"),render:()=>{const[n,o]=r.useState(!1),[k,C]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.default.buttonText")}),t.jsx(i,{open:k,portal:!0,onBackdropClick:()=>C(!1),title:e("components.dialog.stories.default.title2"),description:e("components.dialog.stories.default.description2"),footer:t.jsx(t.Fragment,{children:t.jsx(s,{size:"large",theme:"neutral",onClick:()=>C(!1),children:e("components.dialog.stories.default.close")})})}),t.jsx(i,{open:n,portal:!0,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.default.title"),description:e("components.dialog.stories.default.description"),footer:t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",type:"solid-subtle",onClick:()=>o(!1),children:e("components.dialog.stories.default.cancel")}),t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.default.confirm")}),t.jsx(s,{size:"large",theme:"neutral",onClick:()=>C(!0),children:e("components.dialog.stories.default.open2")})]})})]})}},a={storyName:e("components.dialog.stories.titleOnly.storyName"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.titleOnly.buttonText")}),t.jsx(i,{open:n,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.titleOnly.title"),footer:t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.titleOnly.close")})})]})}},c={storyName:e("components.dialog.stories.withTopImage.storyName"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.withTopImage.buttonText")}),t.jsx(i,{open:n,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.withTopImage.title"),description:e("components.dialog.stories.withTopImage.description"),topImageUrl:"https://picsum.photos/600/300",footer:t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.withTopImage.close")})})]})}},p={storyName:e("components.dialog.stories.withCloseButton.storyName"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.withCloseButton.buttonText")}),t.jsx(i,{open:n,closeAction:!0,onBackdropClick:()=>o(!1),onCloseClick:()=>o(!1),title:e("components.dialog.stories.withCloseButton.title"),description:e("components.dialog.stories.withCloseButton.description"),footer:t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.withCloseButton.close")})})]})}},m={storyName:e("components.dialog.stories.withCustomTopContent.storyName"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.withCustomTopContent.buttonText")}),t.jsx(i,{open:n,onBackdropClick:()=>o(!1),top:t.jsxs("div",{style:{padding:"24px 24px 16px",textAlign:"center"},children:[t.jsx("h3",{style:{margin:0,marginBottom:"8px"},children:e("components.dialog.stories.withCustomTopContent.customTitle")}),t.jsx("p",{style:{margin:0,color:"#666"},children:e("components.dialog.stories.withCustomTopContent.customSubtitle")})]}),title:e("components.dialog.stories.withCustomTopContent.title"),description:e("components.dialog.stories.withCustomTopContent.description"),footer:t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.withCustomTopContent.close")})})]})}},d={storyName:e("components.dialog.stories.footerWithMultipleButtons.storyName"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.footerWithMultipleButtons.buttonText")}),t.jsx(i,{open:n,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.footerWithMultipleButtons.title"),description:e("components.dialog.stories.footerWithMultipleButtons.description"),footer:t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",type:"solid-subtle",onClick:()=>o(!1),children:e("components.dialog.stories.footerWithMultipleButtons.cancel")}),t.jsx(s,{size:"large",theme:"neutral",type:"solid",onClick:()=>o(!1),children:e("components.dialog.stories.footerWithMultipleButtons.save")})]})})]})}},u={storyName:e("components.dialog.stories.footerWithStackedButtons.storyName"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.footerWithStackedButtons.buttonText")}),t.jsx(i,{open:n,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.footerWithStackedButtons.title"),description:e("components.dialog.stories.footerWithStackedButtons.description"),footer:t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.footerWithStackedButtons.primaryAction")}),t.jsx(s,{size:"large",theme:"neutral",type:"solid-subtle",onClick:()=>o(!1),children:e("components.dialog.stories.footerWithStackedButtons.secondaryAction")})]})})]})}},g={storyName:e("components.dialog.stories.withCustomContent.storyName"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.withCustomContent.buttonText")}),t.jsx(i,{open:n,onBackdropClick:()=>o(!1),closeAction:!0,onCloseClick:()=>o(!1),title:e("components.dialog.stories.withCustomContent.title"),children:t.jsxs("div",{style:{padding:"16px"},children:[t.jsx("h3",{children:e("components.dialog.stories.withCustomContent.contentTitle")}),t.jsx("p",{children:e("components.dialog.stories.withCustomContent.contentText")})]}),footer:t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.withCustomContent.close")})})]})}},h={storyName:e("components.dialog.stories.completeExample.storyName"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.completeExample.buttonText")}),t.jsx(i,{open:n,closeAction:!0,onCloseClick:()=>o(!1),onBackdropClick:()=>o(!1),title:e("components.dialog.stories.completeExample.titleText"),description:e("components.dialog.stories.completeExample.descriptionText"),footer:t.jsxs("div",{style:{display:"flex",gap:"8px",justifyContent:"flex-end"},children:[t.jsx(s,{size:"large",theme:"neutral",type:"solid-subtle",onClick:()=>o(!1),children:e("components.dialog.stories.completeExample.cancel")}),t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.completeExample.confirm")})]})})]})}},f={storyName:e("components.dialog.stories.interactive.title"),render:()=>{const[n,o]=r.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.interactive.buttonText")}),t.jsx(i,{open:n,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.interactive.title"),description:e("components.dialog.stories.interactive.descriptionText"),closeAction:!1,footer:t.jsx(s,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.interactive.close")})})]})}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.default.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [open2, setOpen2] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.default.buttonText')}
+        </Button>
+        <Dialog open={open2} portal onBackdropClick={() => setOpen2(false)} title={t('components.dialog.stories.default.title2')} description={t('components.dialog.stories.default.description2')} footer={<>
+              <Button size="large" theme="neutral" onClick={() => setOpen2(false)}>
+                {t('components.dialog.stories.default.close')}
+              </Button>
+            </>} />
+        <Dialog open={open} portal onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.default.title')} description={t('components.dialog.stories.default.description')} footer={<>
+              <Button size="large" theme="neutral" type="solid-subtle" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.default.cancel')}
+              </Button>
+              <Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.default.confirm')}
+              </Button>
+              <Button size="large" theme="neutral" onClick={() => setOpen2(true)}>
+                {t('components.dialog.stories.default.open2')}
+              </Button>
+            </>} />
+      </>;
+  }
+}`,...l.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.titleOnly.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.titleOnly.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.titleOnly.title')} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.titleOnly.close')}
+            </Button>} />
+      </>;
+  }
+}`,...a.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.withTopImage.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.withTopImage.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.withTopImage.title')} description={t('components.dialog.stories.withTopImage.description')} topImageUrl="https://picsum.photos/600/300" footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.withTopImage.close')}
+            </Button>} />
+      </>;
+  }
+}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.withCloseButton.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.withCloseButton.buttonText')}
+        </Button>
+        <Dialog open={open} closeAction onBackdropClick={() => setOpen(false)} onCloseClick={() => setOpen(false)} title={t('components.dialog.stories.withCloseButton.title')} description={t('components.dialog.stories.withCloseButton.description')} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.withCloseButton.close')}
+            </Button>} />
+      </>;
+  }
+}`,...p.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.withCustomTopContent.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.withCustomTopContent.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} top={<div style={{
+        padding: '24px 24px 16px',
+        textAlign: 'center'
+      }}>
+              <h3 style={{
+          margin: 0,
+          marginBottom: '8px'
+        }}>
+                {t('components.dialog.stories.withCustomTopContent.customTitle')}
+              </h3>
+              <p style={{
+          margin: 0,
+          color: '#666'
+        }}>
+                {t('components.dialog.stories.withCustomTopContent.customSubtitle')}
+              </p>
+            </div>} title={t('components.dialog.stories.withCustomTopContent.title')} description={t('components.dialog.stories.withCustomTopContent.description')} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.withCustomTopContent.close')}
+            </Button>} />
+      </>;
+  }
+}`,...m.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.footerWithMultipleButtons.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.footerWithMultipleButtons.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.footerWithMultipleButtons.title')} description={t('components.dialog.stories.footerWithMultipleButtons.description')} footer={<>
+              <Button size="large" theme="neutral" type="solid-subtle" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.footerWithMultipleButtons.cancel')}
+              </Button>
+              <Button size="large" theme="neutral" type="solid" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.footerWithMultipleButtons.save')}
+              </Button>
+            </>} />
+      </>;
+  }
+}`,...d.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.footerWithStackedButtons.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.footerWithStackedButtons.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.footerWithStackedButtons.title')} description={t('components.dialog.stories.footerWithStackedButtons.description')} footer={<div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px'
+      }}>
+              <Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.footerWithStackedButtons.primaryAction')}
+              </Button>
+              <Button size="large" theme="neutral" type="solid-subtle" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.footerWithStackedButtons.secondaryAction')}
+              </Button>
+            </div>} />
+      </>;
+  }
+}`,...u.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.withCustomContent.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.withCustomContent.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} closeAction onCloseClick={() => setOpen(false)} title={t('components.dialog.stories.withCustomContent.title')} children={<div style={{
+        padding: '16px'
+      }}>
+              <h3>
+                {t('components.dialog.stories.withCustomContent.contentTitle')}
+              </h3>
+              <p>
+                {t('components.dialog.stories.withCustomContent.contentText')}
+              </p>
+            </div>} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.withCustomContent.close')}
+            </Button>} />
+      </>;
+  }
+}`,...g.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.completeExample.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.completeExample.buttonText')}
+        </Button>
+        <Dialog open={open} closeAction onCloseClick={() => setOpen(false)} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.completeExample.titleText')} description={t('components.dialog.stories.completeExample.descriptionText')} footer={<div style={{
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'flex-end'
+      }}>
+              <Button size="large" theme="neutral" type="solid-subtle" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.completeExample.cancel')}
+              </Button>
+              <Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.completeExample.confirm')}
+              </Button>
+            </div>} />
+      </>;
+  }
+}`,...h.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.interactive.title'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.interactive.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.interactive.title')} description={t('components.dialog.stories.interactive.descriptionText')} closeAction={false} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.interactive.close')}
+            </Button>} />
+      </>;
+  }
+}`,...f.parameters?.docs?.source}}};const ke=["Default","TitleOnly","WithTopImage","WithCloseButton","WithCustomTopContent","FooterWithMultipleButtons","FooterWithStackedButtons","WithCustomContent","CompleteExample","Interactive"];export{h as CompleteExample,l as Default,d as FooterWithMultipleButtons,u as FooterWithStackedButtons,f as Interactive,a as TitleOnly,p as WithCloseButton,g as WithCustomContent,m as WithCustomTopContent,c as WithTopImage,ke as __namedExportsOrder,xe as default};