@v-miniapp/ui-react 1.0.60 → 1.0.72

package/dist-storybook/assets/carousel.stories-CMtljvBR.js

@@ -0,0 +1,253 @@
+import{r as m,j as e}from"./iframe-Crg_lbde.js";import{c as ee,g as ie}from"./classname-Bl5epEs-.js";import{u as ce}from"./embla-carousel-react.esm-DOEAp-w3.js";import{P as ue}from"./pagination-CjgiVNvu.js";import{t as n}from"./store-BwIebEt6.js";import{T as pe,S as me,a as Z,P as de,b as Ce}from"./blocks-CB7UwFa4.js";import{B as h}from"./button-BLW8SOpg.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CdnALcTP.js";import"./typography-CMIMyivt.js";import"./colors-_6nFGM3e.js";import"./icon-Cc9W858e.js";const xe={active:!0,breakpoints:{},delay:4e3,jump:!1,playOnInit:!0,stopOnFocusIn:!0,stopOnInteraction:!0,stopOnMouseEnter:!1,stopOnLastSnap:!1,rootNode:null};function ge(r,t){const o=r.scrollSnapList();return typeof t=="number"?o.map(()=>t):t(o,r)}function ye(r,t){const o=r.rootNode();return t&&t(o)||o}function Q(r={}){let t,o,i,d,g=null,C=0,c=!1,b=!1,l=!1,p=!1;function v(u,B){o=u;const{mergeOptions:T,optionsAtMedia:K}=B,se=T(xe,Q.globalOptions),ae=T(se,r);if(t=K(ae),o.scrollSnapList().length<=1)return;p=t.jump,i=!1,d=ge(o,t.delay);const{eventStore:$,ownerDocument:le}=o.internalEngine(),X=!!o.internalEngine().options.watchDrag,Y=ye(o,t.rootNode);$.add(le,"visibilitychange",W),X&&o.on("pointerDown",F),X&&!t.stopOnInteraction&&o.on("pointerUp",E),t.stopOnMouseEnter&&$.add(Y,"mouseenter",z),t.stopOnMouseEnter&&!t.stopOnInteraction&&$.add(Y,"mouseleave",U),t.stopOnFocusIn&&o.on("slideFocusStart",I),t.stopOnFocusIn&&!t.stopOnInteraction&&$.add(o.containerNode(),"focusout",f),t.playOnInit&&f()}function y(){o.off("pointerDown",F).off("pointerUp",E).off("slideFocusStart",I),I(),i=!0,c=!1}function V(){const{ownerWindow:u}=o.internalEngine();u.clearTimeout(C),C=u.setTimeout(oe,d[o.selectedScrollSnap()]),g=new Date().getTime(),o.emit("autoplay:timerset")}function N(){const{ownerWindow:u}=o.internalEngine();u.clearTimeout(C),C=0,g=null,o.emit("autoplay:timerstopped")}function f(){if(!i){if(k()){l=!0;return}c||o.emit("autoplay:play"),V(),c=!0}}function I(){i||(c&&o.emit("autoplay:stop"),N(),c=!1)}function W(){if(k())return l=c,I();l&&f()}function k(){const{ownerDocument:u}=o.internalEngine();return u.visibilityState==="hidden"}function F(){b||I()}function E(){b||f()}function z(){b=!0,I()}function U(){b=!1,f()}function G(u){typeof u<"u"&&(p=u),f()}function j(){c&&I()}function S(){c&&f()}function J(){return c}function oe(){const{index:u}=o.internalEngine(),B=u.clone().add(1).get(),T=o.scrollSnapList().length-1,K=t.stopOnLastSnap&&B===T;if(o.canScrollNext()?o.scrollNext(p):o.scrollTo(0,p),o.emit("autoplay:select"),K)return I();f()}function re(){if(!g)return null;const u=d[o.selectedScrollSnap()],B=new Date().getTime()-g;return u-B}return{name:"autoplay",options:r,init:v,destroy:y,play:G,stop:j,reset:S,isPlaying:J,timeUntilNext:re}}Q.globalOptions=void 0;function ne(r={}){let t,o=[];const i=["select","slideFocus"];function d(l){t=l;const{options:{axis:p},slideRects:v}=t.internalEngine();p!=="y"&&(o=v.map(y=>y.height),i.forEach(y=>t.on(y,c)),c())}function g(){i.forEach(p=>t.off(p,c));const l=t.containerNode();l.style.height="",l.getAttribute("style")||l.removeAttribute("style")}function C(){const{slideRegistry:l}=t.internalEngine(),p=l[t.selectedScrollSnap()];return p?p.map(v=>o[v]).reduce((v,y)=>Math.max(v,y),0):null}function c(){C()!==null&&(t.containerNode().style.height=`${C()}px`)}return{name:"autoHeight",options:r,init:d,destroy:g}}ne.globalOptions=void 0;const te=(r={})=>{const{align:t="center",initialIndex:o=0,autoplay:i=!1,delay:d=3e3,duration:g=25,loop:C,autoHeight:c=!0}=r,[b,l]=ce({axis:"x",align:t,startIndex:o,duration:g,loop:C},[Q({playOnInit:!0,delay:d,active:i}),ne({active:c})]),p=l?.scrollNext,v=m.useCallback(S=>p?.(S.jump),[p]),y=l?.scrollPrev,V=m.useCallback(S=>y?.(S.jump),[y]),N=l?.scrollTo,f=m.useCallback((S,J)=>N?.(S,J.jump),[N]),[I,W]=m.useState(!1),[k,F]=m.useState(!1),[E,z]=m.useState(0),[U,G]=m.useState([]),j=m.useCallback(()=>{l&&(F(!!l?.canScrollPrev()),W(!!l?.canScrollNext()),G(l.scrollSnapList()),z(l.selectedScrollSnap()))},[l]);return m.useEffect(()=>{l&&(j(),l.on("reInit",j).on("select",j))},[l,j]),{ref:b,next:v,prev:V,toSlide:f,activeIndex:E,canNext:I,canPrev:k,snaps:U,options:r}},M=ie("carousel"),x=m.forwardRef(({className:r,carousel:t,options:o,pagination:i=!0,children:d},g)=>{const C=te(o);return t=t||C,m.useImperativeHandle(g,()=>t),e.jsxs("div",{className:ee(M,r),style:{"--carousel-gap":typeof t.options.gap=="number"?t.options.gap+"px":"8px"},children:[e.jsx("div",{className:`${M}__viewport`,ref:t.ref,children:e.jsx("div",{className:`${M}__tracks`,children:d})}),!!i&&e.jsx(ue,{total:t.snaps.length,activeIndex:t.activeIndex})]})}),s=({children:r,className:t,...o})=>e.jsx("div",{className:ee(`${M}__item`,t),...o,children:r});x.__docgenInfo={description:"",methods:[],displayName:"Carousel",props:{className:{required:!1,tsType:{name:"string"},description:""},children:{required:!0,tsType:{name:"ReactNode"},description:""},carousel:{required:!1,tsType:{name:"signature",type:"object",raw:`{
+  ref: ICarouselViewPortRef
+  next: (options: ICarouselToOptions) => void
+  prev: (options: ICarouselToOptions) => void
+  toSlide: (index: number, options: ICarouselToOptions) => void
+  activeIndex: number
+  canNext: boolean
+  canPrev: boolean
+  snaps: number[]
+  options: ICarouselOptions
+}`,signature:{properties:[{key:"ref",value:{name:"signature",type:"function",raw:`<ViewportElement extends HTMLElement>(
+  instance: ViewportElement | null,
+) => void`,signature:{arguments:[{type:{name:"union",raw:"ViewportElement | null",elements:[{name:"ViewportElement"},{name:"null"}]},name:"instance"}],return:{name:"void"}},required:!0}},{key:"next",value:{name:"signature",type:"function",raw:"(options: ICarouselToOptions) => void",signature:{arguments:[{type:{name:"signature",type:"object",raw:`{
+  jump?: boolean
+}`,signature:{properties:[{key:"jump",value:{name:"boolean",required:!1}}]}},name:"options"}],return:{name:"void"}},required:!0}},{key:"prev",value:{name:"signature",type:"function",raw:"(options: ICarouselToOptions) => void",signature:{arguments:[{type:{name:"signature",type:"object",raw:`{
+  jump?: boolean
+}`,signature:{properties:[{key:"jump",value:{name:"boolean",required:!1}}]}},name:"options"}],return:{name:"void"}},required:!0}},{key:"toSlide",value:{name:"signature",type:"function",raw:"(index: number, options: ICarouselToOptions) => void",signature:{arguments:[{type:{name:"number"},name:"index"},{type:{name:"signature",type:"object",raw:`{
+  jump?: boolean
+}`,signature:{properties:[{key:"jump",value:{name:"boolean",required:!1}}]}},name:"options"}],return:{name:"void"}},required:!0}},{key:"activeIndex",value:{name:"number",required:!0}},{key:"canNext",value:{name:"boolean",required:!0}},{key:"canPrev",value:{name:"boolean",required:!0}},{key:"snaps",value:{name:"Array",elements:[{name:"number"}],raw:"number[]",required:!0}},{key:"options",value:{name:"signature",type:"object",raw:`{
+  align?: ICarouselAlign
+  initialIndex?: number
+  loop?: boolean
+  duration?: number
+  autoplay?: boolean
+  delay?: number
+  autoHeight?: boolean
+  gap?: number
+}`,signature:{properties:[{key:"align",value:{name:"union",raw:"'start' | 'center' | 'end'",elements:[{name:"literal",value:"'start'"},{name:"literal",value:"'center'"},{name:"literal",value:"'end'"}],required:!1}},{key:"initialIndex",value:{name:"number",required:!1}},{key:"loop",value:{name:"boolean",required:!1}},{key:"duration",value:{name:"number",required:!1}},{key:"autoplay",value:{name:"boolean",required:!1}},{key:"delay",value:{name:"number",required:!1}},{key:"autoHeight",value:{name:"boolean",required:!1}},{key:"gap",value:{name:"number",required:!1}}]},required:!0}}]}},description:""},options:{required:!1,tsType:{name:"signature",type:"object",raw:`{
+  align?: ICarouselAlign
+  initialIndex?: number
+  loop?: boolean
+  duration?: number
+  autoplay?: boolean
+  delay?: number
+  autoHeight?: boolean
+  gap?: number
+}`,signature:{properties:[{key:"align",value:{name:"union",raw:"'start' | 'center' | 'end'",elements:[{name:"literal",value:"'start'"},{name:"literal",value:"'center'"},{name:"literal",value:"'end'"}],required:!1}},{key:"initialIndex",value:{name:"number",required:!1}},{key:"loop",value:{name:"boolean",required:!1}},{key:"duration",value:{name:"number",required:!1}},{key:"autoplay",value:{name:"boolean",required:!1}},{key:"delay",value:{name:"number",required:!1}},{key:"autoHeight",value:{name:"boolean",required:!1}},{key:"gap",value:{name:"number",required:!1}}]}},description:""},pagination:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};s.__docgenInfo={description:"",methods:[],displayName:"CarouselItem"};const fe=()=>{const r=`
+## ${n("common.table.title")}
+
+| ${n("common.table.name")} | ${n("common.table.type")} | ${n("common.table.required")} | ${n("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`children\` | \`ReactNode\` | ${n("common.table.yes")} | ${n("components.carousel.childrenDescription")} |
+| \`carousel\` | \`ICarouselInstance\` | ${n("common.table.no")} | ${n("components.carousel.carouselDescription")} |
+| \`options\` | \`ICarouselOptions\` | ${n("common.table.no")} | ${n("components.carousel.optionsDescription")} |
+| \`pagination\` | \`boolean\` | ${n("common.table.no")} | ${n("components.carousel.paginationDescription")} |
+| \`className\` | \`string\` | ${n("common.table.no")} | ${n("components.carousel.classNameDescription")} |
+
+### ICarouselOptions
+
+| ${n("common.table.name")} | ${n("common.table.type")} | ${n("common.table.required")} | ${n("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`align\` | \`'start' | 'center' | 'end'\` | ${n("common.table.no")} | ${n("components.carousel.options.alignDescription")} |
+| \`initialIndex\` | \`number\` | ${n("common.table.no")} | ${n("components.carousel.options.initialIndexDescription")} |
+| \`loop\` | \`boolean\` | ${n("common.table.no")} | ${n("components.carousel.options.loopDescription")} |
+| \`duration\` | \`number\` | ${n("common.table.no")} | ${n("components.carousel.options.durationDescription")} |
+| \`autoplay\` | \`boolean\` | ${n("common.table.no")} | ${n("components.carousel.options.autoplayDescription")} |
+| \`delay\` | \`number\` | ${n("common.table.no")} | ${n("components.carousel.options.delayDescription")} |
+| \`autoHeight\` | \`boolean\` | ${n("common.table.no")} | ${n("components.carousel.options.autoHeightDescription")} |
+| \`gap\` | \`number\` | ${n("common.table.no")} | ${n("components.carousel.options.gapDescription")} |
+  `;return e.jsxs(e.Fragment,{children:[e.jsx(pe,{}),e.jsx(me,{}),e.jsx(Z,{children:n("components.carousel.description")}),e.jsx(de,{}),e.jsx(Z,{children:r}),e.jsx(Ce,{})]})},Ae={title:"Components/Carousel",component:x,parameters:{layout:"padded",docs:{page:fe}},tags:["autodocs"],argTypes:{children:{control:!1,description:n("components.carousel.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},carousel:{control:!1,description:n("components.carousel.argTypes.carouselDescription"),table:{type:{summary:"ICarouselInstance"}}},options:{control:"object",description:n("components.carousel.argTypes.optionsDescription"),table:{type:{summary:"ICarouselOptions"}}},pagination:{control:"boolean",description:n("components.carousel.argTypes.paginationDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},className:{control:"text",description:n("components.carousel.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},a=(r,t)=>e.jsxs("div",{style:{width:"100%",height:"200px",backgroundColor:t,display:"flex",alignItems:"center",justifyContent:"center",color:"white",fontSize:"24px",fontWeight:"bold"},children:[n("components.carousel.stories.slide")," ",r+1]}),A={storyName:n("components.carousel.stories.default.title"),render:()=>e.jsxs(x,{children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})},O={storyName:n("components.carousel.stories.withLoop.title"),render:()=>e.jsxs(x,{options:{loop:!0},children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})},w={storyName:n("components.carousel.stories.withoutPagination.title"),render:()=>e.jsxs(x,{pagination:!1,children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})},D={storyName:n("components.carousel.stories.customOptions.title"),render:()=>e.jsxs(x,{options:{align:"center",loop:!0,autoplay:!0,delay:5e3,gap:16,duration:25},children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})},q={storyName:n("components.carousel.stories.programmaticControl.title"),render:()=>{const r=m.useRef(null),t=()=>{r.current?.next({})},o=()=>{r.current?.prev({})},i=d=>{r.current?.toSlide(d,{})};return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[e.jsx(h,{onClick:o,children:n("components.carousel.stories.programmaticControl.previous")}),e.jsx(h,{onClick:t,children:n("components.carousel.stories.programmaticControl.next")}),e.jsx(h,{onClick:()=>i(0),children:n("components.carousel.stories.programmaticControl.goToSlide",{index:1})}),e.jsx(h,{onClick:()=>i(1),children:n("components.carousel.stories.programmaticControl.goToSlide",{index:2})}),e.jsx(h,{onClick:()=>i(2),children:n("components.carousel.stories.programmaticControl.goToSlide",{index:3})})]}),e.jsxs(x,{ref:r,children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})]})}},P={storyName:n("components.carousel.stories.externalCarouselInstance.title"),render:()=>{const r=te({loop:!1,autoplay:!1});return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[e.jsx(h,{onClick:()=>r.prev({}),children:n("components.carousel.stories.externalCarouselInstance.previous")}),e.jsx(h,{onClick:()=>r.next({}),children:n("components.carousel.stories.externalCarouselInstance.next")}),e.jsxs("p",{style:{fontSize:"14px",color:"#666"},children:[`${n("components.carousel.stories.externalCarouselInstance.activeIndex")} ${r.activeIndex} | `,`${n("components.carousel.stories.externalCarouselInstance.canNext")}: `,r.canNext?n("components.carousel.stories.externalCarouselInstance.yes"):n("components.carousel.stories.externalCarouselInstance.no"),` | ${n("components.carousel.stories.externalCarouselInstance.canPrev")}: `,r.canPrev?n("components.carousel.stories.externalCarouselInstance.yes"):n("components.carousel.stories.externalCarouselInstance.no")]})]}),e.jsxs(x,{carousel:r,children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})]})}},R={storyName:n("components.carousel.stories.alignmentOptions.title"),render:()=>{const[r,t]=m.useState("center");return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[e.jsx(h,{onClick:()=>t("start"),type:r==="start"?"solid":"outline",children:n("components.carousel.stories.alignmentOptions.start")}),e.jsx(h,{onClick:()=>t("center"),type:r==="center"?"solid":"outline",children:n("components.carousel.stories.alignmentOptions.center")}),e.jsx(h,{onClick:()=>t("end"),type:r==="end"?"solid":"outline",children:n("components.carousel.stories.alignmentOptions.end")})]}),e.jsxs(x,{options:{align:r,loop:!0},children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})]})}},H={storyName:n("components.carousel.stories.multipleSlides.title"),render:()=>e.jsxs(x,{options:{loop:!0,gap:12},children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")}),e.jsx(s,{children:a(3,"#FFD93D")}),e.jsx(s,{children:a(4,"#9B59B6")}),e.jsx(s,{children:a(5,"#E67E22")})]})},L={storyName:n("components.carousel.stories.withoutAutoplay.title"),render:()=>e.jsxs(x,{options:{autoplay:!1},children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})},_={storyName:n("components.carousel.stories.interactive.title"),args:{pagination:!0,children:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:a(0,"#4A90E2")}),e.jsx(s,{children:a(1,"#50C878")}),e.jsx(s,{children:a(2,"#FF6B6B")})]})}};A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.default.title'),
+  render: () => <Carousel>
+      <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+      <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+      <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+    </Carousel>
+}`,...A.parameters?.docs?.source}}};O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.withLoop.title'),
+  render: () => <Carousel options={{
+    loop: true
+  }}>
+      <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+      <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+      <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+    </Carousel>
+}`,...O.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.withoutPagination.title'),
+  render: () => <Carousel pagination={false}>
+      <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+      <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+      <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+    </Carousel>
+}`,...w.parameters?.docs?.source}}};D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.customOptions.title'),
+  render: () => <Carousel options={{
+    align: 'center',
+    loop: true,
+    autoplay: true,
+    delay: 5000,
+    gap: 16,
+    duration: 25
+  }}>
+      <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+      <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+      <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+    </Carousel>
+}`,...D.parameters?.docs?.source}}};q.parameters={...q.parameters,docs:{...q.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.programmaticControl.title'),
+  render: () => {
+    const carouselRef = useRef<ICarouselInstance | null>(null);
+    const goToNext = () => {
+      carouselRef.current?.next({});
+    };
+    const goToPrevious = () => {
+      carouselRef.current?.prev({});
+    };
+    const goToSlide = (index: number) => {
+      carouselRef.current?.toSlide(index, {});
+    };
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <div style={{
+        display: 'flex',
+        gap: '8px'
+      }}>
+          <Button onClick={goToPrevious}>
+            {t('components.carousel.stories.programmaticControl.previous')}
+          </Button>
+          <Button onClick={goToNext}>
+            {t('components.carousel.stories.programmaticControl.next')}
+          </Button>
+          <Button onClick={() => goToSlide(0)}>
+            {t('components.carousel.stories.programmaticControl.goToSlide', {
+            index: 1
+          })}
+          </Button>
+          <Button onClick={() => goToSlide(1)}>
+            {t('components.carousel.stories.programmaticControl.goToSlide', {
+            index: 2
+          })}
+          </Button>
+          <Button onClick={() => goToSlide(2)}>
+            {t('components.carousel.stories.programmaticControl.goToSlide', {
+            index: 3
+          })}
+          </Button>
+        </div>
+        <Carousel ref={carouselRef}>
+          <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+          <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+          <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+        </Carousel>
+      </div>;
+  }
+}`,...q.parameters?.docs?.source}}};P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.externalCarouselInstance.title'),
+  render: () => {
+    const carousel = useCarousel({
+      loop: false,
+      autoplay: false
+    });
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <div style={{
+        display: 'flex',
+        gap: '8px'
+      }}>
+          <Button onClick={() => carousel.prev({})}>
+            {t('components.carousel.stories.externalCarouselInstance.previous')}
+          </Button>
+          <Button onClick={() => carousel.next({})}>
+            {t('components.carousel.stories.externalCarouselInstance.next')}
+          </Button>
+          <p style={{
+          fontSize: '14px',
+          color: '#666'
+        }}>
+            {\`\${t('components.carousel.stories.externalCarouselInstance.activeIndex')} \${carousel.activeIndex} | \`}
+            {\`\${t('components.carousel.stories.externalCarouselInstance.canNext')}: \`}
+            {carousel.canNext ? t('components.carousel.stories.externalCarouselInstance.yes') : t('components.carousel.stories.externalCarouselInstance.no')}
+            {\` | \${t('components.carousel.stories.externalCarouselInstance.canPrev')}: \`}
+            {carousel.canPrev ? t('components.carousel.stories.externalCarouselInstance.yes') : t('components.carousel.stories.externalCarouselInstance.no')}
+          </p>
+        </div>
+        <Carousel carousel={carousel}>
+          <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+          <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+          <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+        </Carousel>
+      </div>;
+  }
+}`,...P.parameters?.docs?.source}}};R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.alignmentOptions.title'),
+  render: () => {
+    const [align, setAlign] = useState<'start' | 'center' | 'end'>('center');
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <div style={{
+        display: 'flex',
+        gap: '8px'
+      }}>
+          <Button onClick={() => setAlign('start')} type={align === 'start' ? 'solid' : 'outline'}>
+            {t('components.carousel.stories.alignmentOptions.start')}
+          </Button>
+          <Button onClick={() => setAlign('center')} type={align === 'center' ? 'solid' : 'outline'}>
+            {t('components.carousel.stories.alignmentOptions.center')}
+          </Button>
+          <Button onClick={() => setAlign('end')} type={align === 'end' ? 'solid' : 'outline'}>
+            {t('components.carousel.stories.alignmentOptions.end')}
+          </Button>
+        </div>
+        <Carousel options={{
+        align,
+        loop: true
+      }}>
+          <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+          <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+          <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+        </Carousel>
+      </div>;
+  }
+}`,...R.parameters?.docs?.source}}};H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.multipleSlides.title'),
+  render: () => <Carousel options={{
+    loop: true,
+    gap: 12
+  }}>
+      <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+      <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+      <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+      <CarouselItem>{createSlideContent(3, '#FFD93D')}</CarouselItem>
+      <CarouselItem>{createSlideContent(4, '#9B59B6')}</CarouselItem>
+      <CarouselItem>{createSlideContent(5, '#E67E22')}</CarouselItem>
+    </Carousel>
+}`,...H.parameters?.docs?.source}}};L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.withoutAutoplay.title'),
+  render: () => <Carousel options={{
+    autoplay: false
+  }}>
+      <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+      <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+      <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+    </Carousel>
+}`,...L.parameters?.docs?.source}}};_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.carousel.stories.interactive.title'),
+  args: {
+    pagination: true,
+    children: <>
+        <CarouselItem>{createSlideContent(0, '#4A90E2')}</CarouselItem>
+        <CarouselItem>{createSlideContent(1, '#50C878')}</CarouselItem>
+        <CarouselItem>{createSlideContent(2, '#FF6B6B')}</CarouselItem>
+      </>
+  }
+}`,..._.parameters?.docs?.source}}};const Oe=["Default","WithLoop","WithoutPagination","CustomOptions","ProgrammaticControl","ExternalCarouselInstance","AlignmentOptions","MultipleSlides","WithoutAutoplay","Interactive"];export{R as AlignmentOptions,D as CustomOptions,A as Default,P as ExternalCarouselInstance,_ as Interactive,H as MultipleSlides,q as ProgrammaticControl,O as WithLoop,L as WithoutAutoplay,w as WithoutPagination,Oe as __namedExportsOrder,Ae as default};

package/dist-storybook/assets/checkbox.stories-xYjsVg2X.js

@@ -0,0 +1,201 @@
+import{j as t,r as l}from"./iframe-Crg_lbde.js";import{T as R,S as L,a as _,P as M,b as H}from"./blocks-CB7UwFa4.js";import{c as U,g as Z}from"./classname-Bl5epEs-.js";import{u as w}from"./index-hDlmuyu2.js";import{T as V}from"./typography-CMIMyivt.js";import{t as e}from"./store-BwIebEt6.js";import{B as A}from"./button-BLW8SOpg.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CdnALcTP.js";import"./index-B-Ksafg0.js";import"./colors-_6nFGM3e.js";import"./icon-Cc9W858e.js";const B=({fill:o="white",...n})=>t.jsx("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",...n,children:t.jsx("path",{d:"M5.11112 12.4445H5.10934C4.90756 12.4445 4.71645 12.352 4.59112 12.1947L1.03556 7.75026C0.805341 7.46226 0.851563 7.04359 1.13956 6.81337C1.42845 6.58315 1.84712 6.63026 2.07645 6.91737L5.11467 10.7147L12.1485 2.02492C12.3805 1.7387 12.7991 1.69337 13.0862 1.92626C13.3725 2.15826 13.4169 2.57781 13.1849 2.86403L5.62934 12.1974C5.50223 12.3538 5.31201 12.4445 5.11112 12.4445Z",fill:o})});B.__docgenInfo={description:"",methods:[],displayName:"CheckIcon",props:{fill:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'white'",computed:!1}}}};const q=({fill:o="white",...n})=>t.jsx("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",...n,children:t.jsx("rect",{x:"2",y:"6.5",width:"11",height:"2",rx:"1",fill:o})});q.__docgenInfo={description:"",methods:[],displayName:"IndeterminateIcon",props:{fill:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'white'",computed:!1}}}};const i=Z("checkbox"),c=l.forwardRef((o,n)=>{const{disabled:r=!1,theme:d="brand",variant:s="default",className:p,style:$,checked:K,defaultChecked:W,onChange:X,number:Y,defaultNumber:ee,onNumberChange:te,children:D,typography:I,...S}=o,O=d||"brand",u=l.useRef(null),[P,b]=l.useState(!1),[T,G]=w(o,{valuePropName:"checked",defaultValuePropName:"defaultChecked",trigger:"onChange"}),[m,E]=w(o,{valuePropName:"number",defaultValuePropName:"defaultNumber",trigger:"onNumberChange"}),h=m!==void 0?!0:T;l.useImperativeHandle(n,()=>({focus:()=>u.current?.focus?.(),blur:()=>u.current?.blur?.()}));const z=a=>{if(a.preventDefault(),r)return;const Q=m===void 0?1:m+1;E(Q)},F=()=>s==="number"?t.jsx("input",{...S,type:"text",inputMode:"numeric",value:m??"",disabled:r,readOnly:!0,ref:u,className:`${i}__input`,onClick:a=>a.stopPropagation(),onFocus:a=>{b(!0),o.onFocus?.(a)},onBlur:a=>{b(!1),o.onBlur?.(a)}}):t.jsx("input",{...S,type:"checkbox",checked:T,disabled:r,onChange:a=>G(a.target.checked),ref:u,className:`${i}__input`,onFocus:a=>{b(!0),o.onFocus?.(a)},onBlur:a=>{b(!1),o.onBlur?.(a)}});return t.jsxs("label",{className:U(i,{[`${i}--checked`]:h,[`${i}--unchecked`]:!h,[`${i}--disabled`]:r,[`${i}--focus`]:P,[`${i}--theme-${O}`]:!0,[`${i}--variant-${s}`]:s!=="default"},p),style:$,onClick:s==="number"?z:void 0,children:[t.jsxs("span",{className:`${i}__button`,children:[t.jsx("span",{className:`${i}__overlay`}),h&&s==="number"&&m!==void 0?t.jsx(V,{component:"span",size:"x-small",weight:700,color:r?"alias-border-disabled":"alias-object-on-brand",className:`${i}__number`,children:m}):h&&s==="indeterminate"?t.jsx(q,{fill:r?"var(--color-alias-border-disabled, rgba(10, 10, 10, 0.25))":"white"}):h?t.jsx(B,{fill:r?"var(--color-alias-border-disabled, rgba(10, 10, 10, 0.25))":"white"}):null,F()]}),D&&t.jsx(V,{component:"span",...I,size:"base",children:D})]})});c.__docgenInfo={description:"",methods:[{name:"focus",docblock:null,modifiers:[],params:[],returns:null},{name:"blur",docblock:null,modifiers:[],params:[],returns:null}],displayName:"Checkbox"};const J=()=>{const o=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`checked\` | \`boolean\` | ${e("common.table.no")} | ${e("components.checkbox.checkedDescription")} |
+| \`defaultChecked\` | \`boolean\` | ${e("common.table.no")} | ${e("components.checkbox.defaultCheckedDescription")} |
+| \`disabled\` | \`boolean\` | ${e("common.table.no")} | ${e("components.checkbox.disabledDescription")} |
+| \`theme\` | \`'brand' | 'inverse'\` | ${e("common.table.no")} | ${e("components.checkbox.themeDescription")} |
+| \`variant\` | \`'default' | 'number' | 'indeterminate'\` | ${e("common.table.no")} | ${e("components.checkbox.variantDescription")} |
+| \`number\` | \`number\` | ${e("common.table.no")} | ${e("components.checkbox.numberDescription")} |
+| \`defaultNumber\` | \`number\` | ${e("common.table.no")} | ${e("components.checkbox.defaultNumberDescription")} |
+| \`onChange\` | \`(checked: boolean) => void\` | ${e("common.table.no")} | ${e("components.checkbox.onChangeDescription")} |
+| \`onNumberChange\` | \`(number: number | undefined) => void\` | ${e("common.table.no")} | ${e("components.checkbox.onNumberChangeDescription")} |
+| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.checkbox.childrenDescription")} |
+| \`typography\` | \`Omit<ITypographyProps<'span'>, 'component' | 'children'>\` | ${e("common.table.no")} | ${e("components.checkbox.typographyDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.checkbox.classNameDescription")} |
+| \`...props\` | \`ComponentProps<'input'>\` | ${e("common.table.no")} | ${e("components.checkbox.propsDescription")} |
+  `;return t.jsxs(t.Fragment,{children:[t.jsx(R,{}),t.jsx(L,{}),t.jsx(_,{children:e("components.checkbox.description")}),t.jsx(M,{}),t.jsx(_,{children:o}),t.jsx(H,{})]})},ue={title:"Components/Checkbox",component:c,parameters:{layout:"padded",docs:{page:J}},tags:["autodocs"],argTypes:{checked:{control:"boolean",description:e("components.checkbox.argTypes.checkedDescription"),table:{type:{summary:"boolean"}}},defaultChecked:{control:"boolean",description:e("components.checkbox.argTypes.defaultCheckedDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},disabled:{control:"boolean",description:e("components.checkbox.argTypes.disabledDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},theme:{control:"select",options:["default","brand","inverse"],description:e("components.checkbox.argTypes.themeDescription"),table:{type:{summary:"ICheckboxTheme"},defaultValue:{summary:"default"}}},variant:{control:"select",options:["default","number","indeterminate"],description:e("components.checkbox.argTypes.variantDescription"),table:{type:{summary:"ICheckboxVariant"},defaultValue:{summary:"default"}}},number:{control:{type:"number",min:0,max:99,step:1},description:e("components.checkbox.argTypes.numberDescription"),table:{type:{summary:"number"}}},defaultNumber:{control:{type:"number",min:0,max:99,step:1},description:e("components.checkbox.argTypes.defaultNumberDescription"),table:{type:{summary:"number"}}},children:{control:"text",description:e("components.checkbox.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}}}},x={storyName:e("components.checkbox.stories.default.title"),args:{children:e("components.checkbox.stories.interactive.label")}},k={storyName:e("components.checkbox.stories.states.title"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(c,{checked:!1,children:e("components.checkbox.stories.states.notChecked")}),t.jsx(c,{checked:!0,children:e("components.checkbox.stories.states.checked")}),t.jsx(c,{checked:!0,disabled:!0,children:e("components.checkbox.stories.states.disabledChecked")}),t.jsx(c,{checked:!1,disabled:!0,children:e("components.checkbox.stories.states.disabledUnchecked")})]})},f={storyName:e("components.checkbox.stories.variants.title"),render:()=>{const[o,n]=l.useState(3);return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(c,{checked:!0,variant:"default",children:e("components.checkbox.stories.variants.defaultCheckbox")}),t.jsx(c,{checked:!0,variant:"indeterminate",children:e("components.checkbox.stories.variants.indeterminateCheckbox")}),t.jsx(c,{checked:o>0,variant:"number",number:o,onNumberChange:r=>n(r||0),children:e("components.checkbox.stories.variants.quantity",{count:o})})]})}},y={storyName:e("components.checkbox.stories.themes.title"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(c,{checked:!0,children:e("components.checkbox.stories.themes.brandTheme")}),t.jsx(c,{checked:!0,theme:"inverse",children:e("components.checkbox.stories.themes.inverseTheme")})]})},g={storyName:e("components.checkbox.stories.controlled.title"),render:()=>{const[o,n]=l.useState(!1);return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(c,{checked:o,onChange:n,children:e("components.checkbox.stories.controlled.currently",{state:o?e("components.checkbox.stories.controlled.checked"):e("components.checkbox.stories.controlled.unchecked")})}),t.jsx(A,{onClick:()=>n(!o),children:e("components.checkbox.stories.controlled.toggleButton")})]})}},C={storyName:e("components.checkbox.stories.numberVariant.title"),render:()=>{const[o,n]=l.useState(1);return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(c,{variant:"number",number:o,onNumberChange:r=>n(r||0),children:e("components.checkbox.stories.numberVariant.quantity")}),t.jsx("p",{style:{fontSize:"14px",color:"#666"},children:e("components.checkbox.stories.numberVariant.instructions",{count:o})})]})}},v={storyName:e("components.checkbox.stories.checkboxGroup.title"),render:()=>{const[o,n]=l.useState([]),r=["Option 1","Option 2","Option 3"],d=(s,p)=>{n(p?[...o,s]:o.filter($=>$!==s))};return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[r.map(s=>t.jsx(c,{checked:o.includes(s),onChange:p=>d(s,p),children:e(`components.checkbox.stories.checkboxGroup.options.${s}`)},s)),t.jsxs("p",{style:{fontSize:"14px",color:"#666",marginTop:"8px"},children:[e("components.checkbox.stories.checkboxGroup.selected")," ",o.join(", ")||e("components.checkbox.stories.checkboxGroup.none")]})]})}},N={storyName:e("components.checkbox.stories.completeExample.title"),render:()=>{const[o,n]=l.useState(!1),[r,d]=l.useState(2);return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.checkbox.stories.complete.termsTitle")}),t.jsx(c,{checked:o,onChange:n,children:e("components.checkbox.stories.complete.agreeTerms")})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.checkbox.stories.complete.quantityTitle")}),t.jsx(c,{variant:"number",number:r,onNumberChange:s=>d(s||0),children:e("components.checkbox.stories.complete.items")})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.checkbox.stories.complete.disabledTitle")}),t.jsx(c,{checked:!0,disabled:!0,children:e("components.checkbox.stories.complete.disabledOption")})]})]})}},j={storyName:e("components.checkbox.stories.interactive.title"),args:{children:e("components.checkbox.stories.interactive.label"),checked:!1,disabled:!1,variant:"default"}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.default.title'),
+  args: {
+    children: t('components.checkbox.stories.interactive.label')
+  }
+}`,...x.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.states.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Checkbox checked={false}>
+        {t('components.checkbox.stories.states.notChecked')}
+      </Checkbox>
+      <Checkbox checked>
+        {t('components.checkbox.stories.states.checked')}
+      </Checkbox>
+      <Checkbox checked disabled>
+        {t('components.checkbox.stories.states.disabledChecked')}
+      </Checkbox>
+      <Checkbox checked={false} disabled>
+        {t('components.checkbox.stories.states.disabledUnchecked')}
+      </Checkbox>
+    </div>
+}`,...k.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.variants.title'),
+  render: () => {
+    const [number, setNumber] = useState(3);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <Checkbox checked variant="default">
+          {t('components.checkbox.stories.variants.defaultCheckbox')}
+        </Checkbox>
+        <Checkbox checked variant="indeterminate">
+          {t('components.checkbox.stories.variants.indeterminateCheckbox')}
+        </Checkbox>
+        <Checkbox checked={number > 0} variant="number" number={number} onNumberChange={number => setNumber(number || 0)}>
+          {t('components.checkbox.stories.variants.quantity', {
+          count: number
+        })}
+        </Checkbox>
+      </div>;
+  }
+}`,...f.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.themes.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Checkbox checked>
+        {t('components.checkbox.stories.themes.brandTheme')}
+      </Checkbox>
+      <Checkbox checked theme="inverse">
+        {t('components.checkbox.stories.themes.inverseTheme')}
+      </Checkbox>
+    </div>
+}`,...y.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.controlled.title'),
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <Checkbox checked={checked} onChange={setChecked}>
+          {t('components.checkbox.stories.controlled.currently', {
+          state: checked ? t('components.checkbox.stories.controlled.checked') : t('components.checkbox.stories.controlled.unchecked')
+        })}
+        </Checkbox>
+        <Button onClick={() => setChecked(!checked)}>
+          {t('components.checkbox.stories.controlled.toggleButton')}
+        </Button>
+      </div>;
+  }
+}`,...g.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.numberVariant.title'),
+  render: () => {
+    const [quantity, setQuantity] = useState(1);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <Checkbox variant="number" number={quantity} onNumberChange={number => setQuantity(number || 0)}>
+          {t('components.checkbox.stories.numberVariant.quantity')}
+        </Checkbox>
+        <p style={{
+        fontSize: '14px',
+        color: '#666'
+      }}>
+          {t('components.checkbox.stories.numberVariant.instructions', {
+          count: quantity
+        })}
+        </p>
+      </div>;
+  }
+}`,...C.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.checkboxGroup.title'),
+  render: () => {
+    const [selected, setSelected] = useState<string[]>([]);
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+    const handleChange = (option: string, checked: boolean) => {
+      if (checked) {
+        setSelected([...selected, option]);
+      } else {
+        setSelected(selected.filter(o => o !== option));
+      }
+    };
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px'
+    }}>
+        {options.map(option => <Checkbox key={option} checked={selected.includes(option)} onChange={checked => handleChange(option, checked)}>
+            {t(\`components.checkbox.stories.checkboxGroup.options.\${option}\`)}
+          </Checkbox>)}
+        <p style={{
+        fontSize: '14px',
+        color: '#666',
+        marginTop: '8px'
+      }}>
+          {t('components.checkbox.stories.checkboxGroup.selected')}{' '}
+          {selected.join(', ') || t('components.checkbox.stories.checkboxGroup.none')}
+        </p>
+      </div>;
+  }
+}`,...v.parameters?.docs?.source}}};N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.completeExample.title'),
+  render: () => {
+    const [terms, setTerms] = useState(false);
+    const [quantity, setQuantity] = useState(2);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    }}>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.checkbox.stories.complete.termsTitle')}
+          </h3>
+          <Checkbox checked={terms} onChange={setTerms}>
+            {t('components.checkbox.stories.complete.agreeTerms')}
+          </Checkbox>
+        </div>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.checkbox.stories.complete.quantityTitle')}
+          </h3>
+          <Checkbox variant="number" number={quantity} onNumberChange={number => setQuantity(number || 0)}>
+            {t('components.checkbox.stories.complete.items')}
+          </Checkbox>
+        </div>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.checkbox.stories.complete.disabledTitle')}
+          </h3>
+          <Checkbox checked disabled>
+            {t('components.checkbox.stories.complete.disabledOption')}
+          </Checkbox>
+        </div>
+      </div>;
+  }
+}`,...N.parameters?.docs?.source}}};j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.interactive.title'),
+  args: {
+    children: t('components.checkbox.stories.interactive.label'),
+    checked: false,
+    disabled: false,
+    variant: 'default'
+  }
+}`,...j.parameters?.docs?.source}}};const be=["Default","States","Variants","Themes","Controlled","NumberVariant","CheckboxGroup","CompleteExample","Interactive"];export{v as CheckboxGroup,N as CompleteExample,g as Controlled,x as Default,j as Interactive,C as NumberVariant,k as States,y as Themes,f as Variants,be as __namedExportsOrder,ue as default};