@v-miniapp/ui-react 1.0.40 → 1.0.45

package/dist-storybook/assets/calendar.stories-DLWZldet.js

@@ -0,0 +1,189 @@
+import{j as t,r as D}from"./iframe-CQAwSt4E.js";import{C as r}from"./calendar-dOCsjhVU.js";import{t as e}from"./store-D2RudmNr.js";import{T as f,S as w,M as b,P as S,a as C}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-CUR_zgkh.js";import"./date-Cg-Uk_pp.js";import"./icon-DdQsMyRa.js";import"./colors-_6nFGM3e.js";import"./button-CL7GeC23.js";import"./typography-DEpAJl_i.js";import"./index-BV0AJWP6.js";import"./index-B-Ksafg0.js";import"./store-CPumdfcU.js";import"./_setToString-CbM921C9.js";import"./react-hufnxGVs.js";import"./index-DHiZ-gXR.js";const c=new Date;c.setDate(c.getDate()+1);const x=new Date;x.setDate(x.getDate()+4);const N=()=>{const n=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`type\` | \`'single' | 'range'\` | ${e("common.table.no")} | ${e("components.calendar.typeDescription")} |
+| \`navigationMode\` | \`'month' | 'month-year' | 'time-only'\` | ${e("common.table.no")} | ${e("components.calendar.navigationModeDescription")} |
+| \`lang\` | \`'vi' | 'en'\` | ${e("common.table.no")} | ${e("components.calendar.langDescription")} |
+| \`value\` | \`Date | [Date, Date]\` | ${e("common.table.no")} | ${e("components.calendar.valueDescription")} |
+| \`defaultValue\` | \`Date | [Date, Date]\` | ${e("common.table.no")} | ${e("components.calendar.defaultValueDescription")} |
+| \`minDate\` | \`Date\` | ${e("common.table.no")} | ${e("components.calendar.minDateDescription")} |
+| \`maxDate\` | \`Date\` | ${e("common.table.no")} | ${e("components.calendar.maxDateDescription")} |
+| \`renderText\` | \`IRenderText\` | ${e("common.table.no")} | ${e("components.calendar.renderTextDescription")} |
+| \`onChange\` | \`(date: Date | [Date, Date]) => void\` | ${e("common.table.no")} | ${e("components.calendar.onChangeDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.calendar.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.calendar.propsDescription")} |
+  `;return t.jsxs(t.Fragment,{children:[t.jsx(f,{}),t.jsx(w,{}),t.jsx(b,{children:e("components.calendar.description")}),t.jsx(S,{}),t.jsx(b,{children:n}),t.jsx(C,{})]})},F={title:"Components/Calendar",component:r,parameters:{layout:"padded",docs:{page:N}},tags:["autodocs"],argTypes:{type:{control:"select",options:["single","range"],description:e("components.calendar.argTypes.typeDescription"),table:{type:{summary:'"single" | "range"'},defaultValue:{summary:'\\"single\\"'}}},navigationMode:{control:"select",options:["month","month-year","time-only"],description:e("components.calendar.argTypes.navigationModeDescription"),table:{type:{summary:'"month" | "month-year" | "time-only"'},defaultValue:{summary:'"month-year"'}}},lang:{control:"select",options:["en","vi"],description:e("components.calendar.argTypes.langDescription"),table:{type:{summary:"string"},defaultValue:{summary:"vi"}}},value:{control:!1,description:e("components.calendar.argTypes.valueDescription"),table:{type:{summary:"Date | [Date, Date]"}}},defaultValue:{control:!1,description:e("components.calendar.argTypes.defaultValueDescription"),table:{type:{summary:"Date | [Date, Date]"}}},renderText:{control:!1,description:e("components.calendar.argTypes.renderTextDescription"),table:{type:{summary:`{
+  date?: (date: Date) => ReactNode;
+  dateSubText?: (date: Date) => ReactNode;
+  headerLabel?: (month: number, year: number) => ReactNode;
+  weekday?: (weekday: number) => ReactNode;
+}`}}},minDate:{control:"date",description:e("components.calendar.argTypes.minDateDescription"),table:{type:{summary:"Date"}}},maxDate:{control:"date",description:e("components.calendar.argTypes.maxDateDescription"),table:{type:{summary:"Date"}}},onChange:{action:"changed",description:e("components.calendar.argTypes.onChangeDescription"),table:{type:{summary:"(value: Date) => void | (value: [Date, Date]) => void"}}},className:{control:"text",description:e("components.calendar.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},d={storyName:e("components.calendar.stories.default.title"),args:{}},l={storyName:e("components.calendar.stories.controlledSingleDate.title"),render:()=>{const[n,o]=D.useState(c);return t.jsxs("div",{children:[t.jsxs("p",{style:{marginBottom:"16px"},children:[e("components.calendar.stories.controlledSingleDate.selected")," ",n.toLocaleDateString()]}),t.jsx(r,{type:"single",value:n,onChange:o,lang:"en"})]})}},m={storyName:e("components.calendar.stories.controlledDateRange.title"),args:{navigationMode:"time-only"},render:()=>{const[n,o]=D.useState([c,x]);return t.jsxs("div",{children:[t.jsxs("p",{style:{marginBottom:"16px"},children:[e("components.calendar.stories.controlledDateRange.selected")," ",n?`${n?.[0]?.toLocaleDateString()} - ${n?.[1]?.toLocaleDateString()}`:e("components.calendar.stories.controlledDateRange.noSelection")]}),t.jsx(r,{type:"range",value:n,onChange:o})]})}},p={storyName:e("components.calendar.stories.navigationModes.title"),args:{navigationMode:"month-year"},render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.calendar.stories.navigationModes.monthYear")}),t.jsx(r,{type:"single",navigationMode:"month-year"})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.calendar.stories.navigationModes.monthOnly")}),t.jsx(r,{type:"single",navigationMode:"month"})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.calendar.stories.navigationModes.timeOnly")}),t.jsx(r,{type:"single",navigationMode:"time-only"})]})]})},g={storyName:e("components.calendar.stories.withCustomRendering.title"),parameters:{docs:{description:{story:"Calendar with custom rendering for dates, weekdays, and header."}}},render:()=>{const[n,o]=D.useState(c),v=new Date;return t.jsx("div",{className:"flex flex-col gap-4",children:t.jsx(r,{value:n,onChange:o,className:"border rounded-lg p-4 w-fit",renderText:{date:a=>{const s=a.toDateString()===v.toDateString(),i=a.toDateString()===a.toDateString();return t.jsx("div",{className:`flex flex-col items-center justify-center w-10 h-10 rounded-full
+                  ${s?"bg-blue-100 text-blue-700 font-medium":""}
+                  ${i?"bg-primary-500 text-white":"hover:bg-gray-100"}
+                  transition-colors`,children:a.getDate()})},dateSubText:a=>{const s=a.getDate();return s%5===0?t.jsx("span",{className:"text-xs text-red-500",children:e("components.calendar.stories.withCustomRendering.sale")}):s%3===0?t.jsx("span",{className:"text-xs text-green-600",children:e("components.calendar.stories.withCustomRendering.event")}):null},weekday:a=>{const s=[e("components.calendar.stories.weekdays.sunday"),e("components.calendar.stories.weekdays.monday"),e("components.calendar.stories.weekdays.tuesday"),e("components.calendar.stories.weekdays.wednesday"),e("components.calendar.stories.weekdays.thursday"),e("components.calendar.stories.weekdays.friday"),e("components.calendar.stories.weekdays.saturday")];return t.jsx("div",{className:"text-sm font-medium text-gray-500",children:s[a]})},headerLabel:(a,s)=>{const i=[e("components.calendar.stories.months.january"),e("components.calendar.stories.months.february"),e("components.calendar.stories.months.march"),e("components.calendar.stories.months.april"),e("components.calendar.stories.months.may"),e("components.calendar.stories.months.june"),e("components.calendar.stories.months.july"),e("components.calendar.stories.months.august"),e("components.calendar.stories.months.september"),e("components.calendar.stories.months.october"),e("components.calendar.stories.months.november"),e("components.calendar.stories.months.december")];return t.jsxs("div",{className:"text-lg font-semibold",children:[i[a]," ",s]})}}})})}},y={storyName:e("components.calendar.stories.withDateRangeConstraints.title"),parameters:{docs:{description:{story:"Calendar with minDate and maxDate constraints. Only dates within the specified range will be selectable."}}},render:function(){const o=new Date;new Date(o).setMonth(o.getMonth()+1);const[a,s]=D.useState(o),i=new Date(o),h=new Date(o);return h.setMonth(o.getMonth()+1),t.jsx("div",{className:"flex flex-col gap-6",children:t.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:t.jsxs("div",{className:"space-y-4",children:[t.jsxs("div",{className:"text-sm text-gray-600 mb-2",children:[e("components.calendar.stories.withDateRangeConstraints.selectableRange")," ",i.toLocaleDateString()," ",e("common.to")," ",h.toLocaleDateString()]}),t.jsxs("div",{className:"text-sm text-gray-600 mb-2",children:[e("components.calendar.stories.withDateRangeConstraints.selectedDate")," ",a?a.toLocaleDateString():e("components.calendar.stories.withDateRangeConstraints.noDateSelected")]}),t.jsx(r,{value:a,onChange:s,minDate:i,maxDate:h})]})})})}},u={storyName:e("components.calendar.stories.interactive.title"),args:{defaultValue:c,type:"single"}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.calendar.stories.default.title'),
+  args: {}
+}`,...d.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.calendar.stories.controlledSingleDate.title'),
+  render: () => {
+    const [date, setDate] = useState(DefaultDate);
+    return <div>
+        <p style={{
+        marginBottom: '16px'
+      }}>
+          {t('components.calendar.stories.controlledSingleDate.selected')}{' '}
+          {date.toLocaleDateString()}
+        </p>
+        <Calendar type="single" value={date} onChange={setDate} lang="en" />
+      </div>;
+  }
+}`,...l.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.calendar.stories.controlledDateRange.title'),
+  args: {
+    navigationMode: 'time-only'
+  },
+  render: () => {
+    const [range, setRange] = useState<IRange>([DefaultDate, DefaultEndDate]);
+    return <div>
+        <p style={{
+        marginBottom: '16px'
+      }}>
+          {t('components.calendar.stories.controlledDateRange.selected')}{' '}
+          {range ? \`\${range?.[0]?.toLocaleDateString()} - \${range?.[1]?.toLocaleDateString()}\` : t('components.calendar.stories.controlledDateRange.noSelection')}
+        </p>
+        <Calendar type="range" value={range} onChange={setRange} />
+      </div>;
+  }
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.calendar.stories.navigationModes.title'),
+  args: {
+    navigationMode: 'month-year'
+  },
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px'
+  }}>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.calendar.stories.navigationModes.monthYear')}
+        </h3>
+        <Calendar type="single" navigationMode="month-year" />
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.calendar.stories.navigationModes.monthOnly')}
+        </h3>
+        <Calendar type="single" navigationMode="month" />
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.calendar.stories.navigationModes.timeOnly')}
+        </h3>
+        <Calendar type="single" navigationMode="time-only" />
+      </div>
+    </div>
+}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.calendar.stories.withCustomRendering.title'),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Calendar with custom rendering for dates, weekdays, and header.'
+      }
+    }
+  },
+  render: () => {
+    const [date, setDate] = useState<Date>(DefaultDate);
+    const today = new Date();
+    return <div className="flex flex-col gap-4">
+        <Calendar value={date} onChange={setDate} className="border rounded-lg p-4 w-fit" renderText={{
+        // Custom date rendering
+        date: date => {
+          const isToday = date.toDateString() === today.toDateString();
+          const isSelected = date.toDateString() === date.toDateString();
+          return <div className={\`flex flex-col items-center justify-center w-10 h-10 rounded-full
+                  \${isToday ? 'bg-blue-100 text-blue-700 font-medium' : ''}
+                  \${isSelected ? 'bg-primary-500 text-white' : 'hover:bg-gray-100'}
+                  transition-colors\`}>
+                  {date.getDate()}
+                </div>;
+        },
+        // Custom subtext
+        dateSubText: date => {
+          const day = date.getDate();
+          if (day % 5 === 0) return <span className="text-xs text-red-500">
+                    {t('components.calendar.stories.withCustomRendering.sale')}
+                  </span>;
+          if (day % 3 === 0) return <span className="text-xs text-green-600">
+                    {t('components.calendar.stories.withCustomRendering.event')}
+                  </span>;
+          return null;
+        },
+        // Custom weekday rendering
+        weekday: weekday => {
+          const weekdays = [t('components.calendar.stories.weekdays.sunday'), t('components.calendar.stories.weekdays.monday'), t('components.calendar.stories.weekdays.tuesday'), t('components.calendar.stories.weekdays.wednesday'), t('components.calendar.stories.weekdays.thursday'), t('components.calendar.stories.weekdays.friday'), t('components.calendar.stories.weekdays.saturday')];
+          return <div className="text-sm font-medium text-gray-500">
+                  {weekdays[weekday]}
+                </div>;
+        },
+        // Custom header label
+        headerLabel: (month, year) => {
+          const months = [t('components.calendar.stories.months.january'), t('components.calendar.stories.months.february'), t('components.calendar.stories.months.march'), t('components.calendar.stories.months.april'), t('components.calendar.stories.months.may'), t('components.calendar.stories.months.june'), t('components.calendar.stories.months.july'), t('components.calendar.stories.months.august'), t('components.calendar.stories.months.september'), t('components.calendar.stories.months.october'), t('components.calendar.stories.months.november'), t('components.calendar.stories.months.december')];
+          return <div className="text-lg font-semibold">
+                  {months[month]} {year}
+                </div>;
+        }
+      }} />
+      </div>;
+  }
+}`,...g.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.calendar.stories.withDateRangeConstraints.title'),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Calendar with minDate and maxDate constraints. Only dates within the specified range will be selectable.'
+      }
+    }
+  },
+  render: function Render() {
+    const today = new Date();
+    const nextMonth = new Date(today);
+    nextMonth.setMonth(today.getMonth() + 1);
+    const [date, setDate] = useState<Date>(today);
+
+    // Set minDate to today and maxDate to 1 month from now
+    const minDate = new Date(today);
+    const maxDate = new Date(today);
+    maxDate.setMonth(today.getMonth() + 1);
+    return <div className="flex flex-col gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <div className="text-sm text-gray-600 mb-2">
+              {t('components.calendar.stories.withDateRangeConstraints.selectableRange')}{' '}
+              {minDate.toLocaleDateString()} {t('common.to')}{' '}
+              {maxDate.toLocaleDateString()}
+            </div>
+            <div className="text-sm text-gray-600 mb-2">
+              {t('components.calendar.stories.withDateRangeConstraints.selectedDate')}{' '}
+              {date ? date.toLocaleDateString() : t('components.calendar.stories.withDateRangeConstraints.noDateSelected')}
+            </div>
+            <Calendar value={date} onChange={setDate} minDate={minDate} maxDate={maxDate} />
+          </div>
+        </div>
+      </div>;
+  }
+}`,...y.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.calendar.stories.interactive.title'),
+  args: {
+    defaultValue: DefaultDate,
+    type: 'single'
+  }
+}`,...u.parameters?.docs?.source}}};const z=["Default","ControlledSingleDate","ControlledDateRange","NavigationModes","WithCustomRendering","WithDateRangeConstraints","Interactive"];export{m as ControlledDateRange,l as ControlledSingleDate,d as Default,u as Interactive,p as NavigationModes,g as WithCustomRendering,y as WithDateRangeConstraints,z as __namedExportsOrder,F as default};

package/dist-storybook/assets/carousel-1Kww3hIz.js

@@ -0,0 +1,37 @@
+import{r as u,j as I}from"./iframe-CQAwSt4E.js";import{c as R,g as z}from"./classname-CUR_zgkh.js";import{u as B}from"./embla-carousel-react.esm-BYjpaHZ9.js";import{P as G}from"./pagination-DZHoBs_4.js";const J={active:!0,breakpoints:{},delay:4e3,jump:!1,playOnInit:!0,stopOnFocusIn:!0,stopOnInteraction:!0,stopOnMouseEnter:!1,stopOnLastSnap:!1,rootNode:null};function K(a,e){const n=a.scrollSnapList();return typeof e=="number"?n.map(()=>e):e(n,a)}function Q(a,e){const n=a.rootNode();return e&&e(n)||n}function H(a={}){let e,n,s,f,p=null,l=0,o=!1,g=!1,t=!1,i=!1;function y(r,x){n=r;const{mergeOptions:q,optionsAtMedia:D}=x,U=q(J,H.globalOptions),$=q(U,a);if(e=D($),n.scrollSnapList().length<=1)return;i=e.jump,s=!1,f=K(n,e.delay);const{eventStore:C,ownerDocument:W}=n.internalEngine(),_=!!n.internalEngine().options.watchDrag,L=Q(n,e.rootNode);C.add(W,"visibilitychange",j),_&&n.on("pointerDown",w),_&&!e.stopOnInteraction&&n.on("pointerUp",S),e.stopOnMouseEnter&&C.add(L,"mouseenter",E),e.stopOnMouseEnter&&!e.stopOnInteraction&&C.add(L,"mouseleave",T),e.stopOnFocusIn&&n.on("slideFocusStart",d),e.stopOnFocusIn&&!e.stopOnInteraction&&C.add(n.containerNode(),"focusout",m),e.playOnInit&&m()}function c(){n.off("pointerDown",w).off("pointerUp",S).off("slideFocusStart",d),d(),s=!0,o=!1}function O(){const{ownerWindow:r}=n.internalEngine();r.clearTimeout(l),l=r.setTimeout(F,f[n.selectedScrollSnap()]),p=new Date().getTime(),n.emit("autoplay:timerset")}function h(){const{ownerWindow:r}=n.internalEngine();r.clearTimeout(l),l=0,p=null,n.emit("autoplay:timerstopped")}function m(){if(!s){if(k()){t=!0;return}o||n.emit("autoplay:play"),O(),o=!0}}function d(){s||(o&&n.emit("autoplay:stop"),h(),o=!1)}function j(){if(k())return t=o,d();t&&m()}function k(){const{ownerDocument:r}=n.internalEngine();return r.visibilityState==="hidden"}function w(){g||d()}function S(){g||m()}function E(){g=!0,d()}function T(){g=!1,m()}function A(r){typeof r<"u"&&(i=r),m()}function b(){o&&d()}function v(){o&&m()}function P(){return o}function F(){const{index:r}=n.internalEngine(),x=r.clone().add(1).get(),q=n.scrollSnapList().length-1,D=e.stopOnLastSnap&&x===q;if(n.canScrollNext()?n.scrollNext(i):n.scrollTo(0,i),n.emit("autoplay:select"),D)return d();m()}function M(){if(!p)return null;const r=f[n.selectedScrollSnap()],x=new Date().getTime()-p;return r-x}return{name:"autoplay",options:a,init:y,destroy:c,play:A,stop:b,reset:v,isPlaying:P,timeUntilNext:M}}H.globalOptions=void 0;function V(a={}){let e,n=[];const s=["select","slideFocus"];function f(t){e=t;const{options:{axis:i},slideRects:y}=e.internalEngine();i!=="y"&&(n=y.map(c=>c.height),s.forEach(c=>e.on(c,o)),o())}function p(){s.forEach(i=>e.off(i,o));const t=e.containerNode();t.style.height="",t.getAttribute("style")||t.removeAttribute("style")}function l(){const{slideRegistry:t}=e.internalEngine(),i=t[e.selectedScrollSnap()];return i?i.map(y=>n[y]).reduce((y,c)=>Math.max(y,c),0):null}function o(){l()!==null&&(e.containerNode().style.height=`${l()}px`)}return{name:"autoHeight",options:a,init:f,destroy:p}}V.globalOptions=void 0;const X=(a={})=>{const{align:e="center",initialIndex:n=0,autoplay:s=!1,delay:f=3e3,duration:p=25,loop:l,autoHeight:o=!0}=a;console.log(e);const[g,t]=B({axis:"x",align:e,startIndex:n,duration:p,loop:l},[H({playOnInit:!0,delay:f,active:s}),V({active:o})]),i=t?.scrollNext,y=u.useCallback(v=>i?.(v.jump),[i]),c=t?.scrollPrev,O=u.useCallback(v=>c?.(v.jump),[c]),h=t?.scrollTo,m=u.useCallback((v,P)=>h?.(v,P.jump),[h]),[d,j]=u.useState(!1),[k,w]=u.useState(!1),[S,E]=u.useState(0),[T,A]=u.useState([]),b=u.useCallback(()=>{t&&(w(!!t?.canScrollPrev()),j(!!t?.canScrollNext()),A(t.scrollSnapList()),E(t.selectedScrollSnap()))},[t]);return u.useEffect(()=>{t&&(b(),t.on("reInit",b).on("select",b))},[t,b]),{ref:g,next:y,prev:O,toSlide:m,activeIndex:S,canNext:d,canPrev:k,snaps:T,options:a}},N=z("carousel"),Y=u.forwardRef(({className:a,carousel:e,options:n,pagination:s=!0,children:f},p)=>{const l=X(n);return e=e||l,u.useImperativeHandle(p,()=>e),I.jsxs("div",{className:R(N,a),style:{"--carousel-gap":typeof e.options.gap=="number"?e.options.gap+"px":"8px"},children:[I.jsx("div",{className:`${N}__viewport`,ref:e.ref,children:I.jsx("div",{className:`${N}__tracks`,children:f})}),!!s&&I.jsx(G,{total:e.snaps.length,activeIndex:e.activeIndex})]})}),Z=({children:a,className:e,...n})=>I.jsx("div",{className:R(`${N}__item`,e),...n,children:a});Y.__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}}}};Z.__docgenInfo={description:"",methods:[],displayName:"CarouselItem"};export{Y as C,Z as a,X as u};

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

@@ -0,0 +1,217 @@
+import{j as e,r as j}from"./iframe-CQAwSt4E.js";import{C as a,a as n,u as f}from"./carousel-1Kww3hIz.js";import{B as r}from"./button-CL7GeC23.js";import{t as o}from"./store-D2RudmNr.js";import{T as F,S as b,M as h,P as $,a as v}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-CUR_zgkh.js";import"./embla-carousel-react.esm-BYjpaHZ9.js";import"./pagination-DZHoBs_4.js";import"./icon-DdQsMyRa.js";import"./colors-_6nFGM3e.js";import"./typography-DEpAJl_i.js";import"./index-DHiZ-gXR.js";const N=()=>{const s=`
+## ${o("common.table.title")}
+
+| ${o("common.table.name")} | ${o("common.table.type")} | ${o("common.table.required")} | ${o("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`children\` | \`ReactNode\` | ${o("common.table.yes")} | ${o("components.carousel.childrenDescription")} |
+| \`carousel\` | \`ICarouselInstance\` | ${o("common.table.no")} | ${o("components.carousel.carouselDescription")} |
+| \`options\` | \`ICarouselOptions\` | ${o("common.table.no")} | ${o("components.carousel.optionsDescription")} |
+| \`pagination\` | \`boolean\` | ${o("common.table.no")} | ${o("components.carousel.paginationDescription")} |
+| \`className\` | \`string\` | ${o("common.table.no")} | ${o("components.carousel.classNameDescription")} |
+
+### ICarouselOptions
+
+| ${o("common.table.name")} | ${o("common.table.type")} | ${o("common.table.required")} | ${o("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`align\` | \`'start' | 'center' | 'end'\` | ${o("common.table.no")} | ${o("components.carousel.options.alignDescription")} |
+| \`initialIndex\` | \`number\` | ${o("common.table.no")} | ${o("components.carousel.options.initialIndexDescription")} |
+| \`loop\` | \`boolean\` | ${o("common.table.no")} | ${o("components.carousel.options.loopDescription")} |
+| \`duration\` | \`number\` | ${o("common.table.no")} | ${o("components.carousel.options.durationDescription")} |
+| \`autoplay\` | \`boolean\` | ${o("common.table.no")} | ${o("components.carousel.options.autoplayDescription")} |
+| \`delay\` | \`number\` | ${o("common.table.no")} | ${o("components.carousel.options.delayDescription")} |
+| \`autoHeight\` | \`boolean\` | ${o("common.table.no")} | ${o("components.carousel.options.autoHeightDescription")} |
+| \`gap\` | \`number\` | ${o("common.table.no")} | ${o("components.carousel.options.gapDescription")} |
+  `;return e.jsxs(e.Fragment,{children:[e.jsx(F,{}),e.jsx(b,{}),e.jsx(h,{children:o("components.carousel.description")}),e.jsx($,{}),e.jsx(h,{children:s}),e.jsx(v,{})]})},q={title:"Components/Carousel",component:a,parameters:{layout:"padded",docs:{page:N}},tags:["autodocs"],argTypes:{children:{control:!1,description:o("components.carousel.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},carousel:{control:!1,description:o("components.carousel.argTypes.carouselDescription"),table:{type:{summary:"ICarouselInstance"}}},options:{control:"object",description:o("components.carousel.argTypes.optionsDescription"),table:{type:{summary:"ICarouselOptions"}}},pagination:{control:"boolean",description:o("components.carousel.argTypes.paginationDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},className:{control:"text",description:o("components.carousel.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},t=(s,l)=>e.jsxs("div",{style:{width:"100%",height:"200px",backgroundColor:l,display:"flex",alignItems:"center",justifyContent:"center",color:"white",fontSize:"24px",fontWeight:"bold"},children:[o("components.carousel.stories.slide")," ",s+1]}),c={storyName:o("components.carousel.stories.default.title"),render:()=>e.jsxs(a,{children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})},i={storyName:o("components.carousel.stories.withLoop.title"),render:()=>e.jsxs(a,{options:{loop:!0},children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})},u={storyName:o("components.carousel.stories.withoutPagination.title"),render:()=>e.jsxs(a,{pagination:!1,children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})},m={storyName:o("components.carousel.stories.customOptions.title"),render:()=>e.jsxs(a,{options:{align:"center",loop:!0,autoplay:!0,delay:5e3,gap:16,duration:25},children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})},p={storyName:o("components.carousel.stories.programmaticControl.title"),render:()=>{const s=j.useRef(null),l=()=>{s.current?.next({})},S=()=>{s.current?.prev({})},y=B=>{s.current?.toSlide(B,{})};return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[e.jsx(r,{onClick:S,children:o("components.carousel.stories.programmaticControl.previous")}),e.jsx(r,{onClick:l,children:o("components.carousel.stories.programmaticControl.next")}),e.jsx(r,{onClick:()=>y(0),children:o("components.carousel.stories.programmaticControl.goToSlide",{index:1})}),e.jsx(r,{onClick:()=>y(1),children:o("components.carousel.stories.programmaticControl.goToSlide",{index:2})}),e.jsx(r,{onClick:()=>y(2),children:o("components.carousel.stories.programmaticControl.goToSlide",{index:3})})]}),e.jsxs(a,{ref:s,children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})]})}},d={storyName:o("components.carousel.stories.externalCarouselInstance.title"),render:()=>{const s=f({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(r,{onClick:()=>s.prev({}),children:o("components.carousel.stories.externalCarouselInstance.previous")}),e.jsx(r,{onClick:()=>s.next({}),children:o("components.carousel.stories.externalCarouselInstance.next")}),e.jsxs("p",{style:{fontSize:"14px",color:"#666"},children:[`${o("components.carousel.stories.externalCarouselInstance.activeIndex")} ${s.activeIndex} | `,`${o("components.carousel.stories.externalCarouselInstance.canNext")}: `,s.canNext?o("components.carousel.stories.externalCarouselInstance.yes"):o("components.carousel.stories.externalCarouselInstance.no"),` | ${o("components.carousel.stories.externalCarouselInstance.canPrev")}: `,s.canPrev?o("components.carousel.stories.externalCarouselInstance.yes"):o("components.carousel.stories.externalCarouselInstance.no")]})]}),e.jsxs(a,{carousel:s,children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})]})}},C={storyName:o("components.carousel.stories.alignmentOptions.title"),render:()=>{const[s,l]=j.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(r,{onClick:()=>l("start"),type:s==="start"?"solid":"outline",children:o("components.carousel.stories.alignmentOptions.start")}),e.jsx(r,{onClick:()=>l("center"),type:s==="center"?"solid":"outline",children:o("components.carousel.stories.alignmentOptions.center")}),e.jsx(r,{onClick:()=>l("end"),type:s==="end"?"solid":"outline",children:o("components.carousel.stories.alignmentOptions.end")})]}),e.jsxs(a,{options:{align:s,loop:!0},children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})]})}},x={storyName:o("components.carousel.stories.multipleSlides.title"),render:()=>e.jsxs(a,{options:{loop:!0,gap:12},children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")}),e.jsx(n,{children:t(3,"#FFD93D")}),e.jsx(n,{children:t(4,"#9B59B6")}),e.jsx(n,{children:t(5,"#E67E22")})]})},g={storyName:o("components.carousel.stories.withoutAutoplay.title"),render:()=>e.jsxs(a,{options:{autoplay:!1},children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})},I={storyName:o("components.carousel.stories.interactive.title"),args:{pagination:!0,children:e.jsxs(e.Fragment,{children:[e.jsx(n,{children:t(0,"#4A90E2")}),e.jsx(n,{children:t(1,"#50C878")}),e.jsx(n,{children:t(2,"#FF6B6B")})]})}};c.parameters={...c.parameters,docs:{...c.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>
+}`,...c.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.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>
+}`,...i.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.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>
+}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.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>
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.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>;
+  }
+}`,...p.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.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>;
+  }
+}`,...d.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.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>;
+  }
+}`,...C.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.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>
+}`,...x.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.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>
+}`,...g.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.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>
+      </>
+  }
+}`,...I.parameters?.docs?.source}}};const H=["Default","WithLoop","WithoutPagination","CustomOptions","ProgrammaticControl","ExternalCarouselInstance","AlignmentOptions","MultipleSlides","WithoutAutoplay","Interactive"];export{C as AlignmentOptions,m as CustomOptions,c as Default,d as ExternalCarouselInstance,I as Interactive,x as MultipleSlides,p as ProgrammaticControl,i as WithLoop,g as WithoutAutoplay,u as WithoutPagination,H as __namedExportsOrder,q as default};

package/dist-storybook/assets/checkbox-MGytNNRt.js

@@ -0,0 +1 @@
+import{j as t,r as d}from"./iframe-CQAwSt4E.js";import{c as B,g as F}from"./classname-CUR_zgkh.js";import{u as p}from"./index-BV0AJWP6.js";import{T as b}from"./typography-DEpAJl_i.js";const g=({fill:n="white",...l})=>t.jsx("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l,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:n})});g.__docgenInfo={description:"",methods:[],displayName:"CheckIcon",props:{fill:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'white'",computed:!1}}}};const x=({fill:n="white",...l})=>t.jsx("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l,children:t.jsx("rect",{x:"2",y:"6.5",width:"11",height:"2",rx:"1",fill:n})});x.__docgenInfo={description:"",methods:[],displayName:"IndeterminateIcon",props:{fill:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'white'",computed:!1}}}};const a=F("checkbox"),S=d.forwardRef((n,l)=>{const{disabled:r=!1,theme:C="brand",variant:s="default",className:N,style:k,checked:V,defaultChecked:L,onChange:R,number:T,defaultNumber:q,onNumberChange:z,children:m,typography:_,...h}=n,v=C||"brand",u=d.useRef(null),[w,i]=d.useState(!1),[f,j]=p(n,{valuePropName:"checked",defaultValuePropName:"defaultChecked",trigger:"onChange"}),[o,y]=p(n,{valuePropName:"number",defaultValuePropName:"defaultNumber",trigger:"onNumberChange"}),c=o!==void 0?!0:f;d.useImperativeHandle(l,()=>({focus:()=>u.current?.focus?.(),blur:()=>u.current?.blur?.()}));const $=e=>{if(e.preventDefault(),r)return;const P=o===void 0?1:o+1;y(P)},I=()=>s==="number"?t.jsx("input",{...h,type:"text",inputMode:"numeric",value:o??"",disabled:r,readOnly:!0,ref:u,className:`${a}__input`,onClick:e=>e.stopPropagation(),onFocus:e=>{i(!0),n.onFocus?.(e)},onBlur:e=>{i(!1),n.onBlur?.(e)}}):t.jsx("input",{...h,type:"checkbox",checked:f,disabled:r,onChange:e=>j(e.target.checked),ref:u,className:`${a}__input`,onFocus:e=>{i(!0),n.onFocus?.(e)},onBlur:e=>{i(!1),n.onBlur?.(e)}});return t.jsxs("label",{className:B(a,{[`${a}--checked`]:c,[`${a}--unchecked`]:!c,[`${a}--disabled`]:r,[`${a}--focus`]:w,[`${a}--theme-${v}`]:!0,[`${a}--variant-${s}`]:s!=="default"},N),style:k,onClick:s==="number"?$:void 0,children:[t.jsxs("span",{className:`${a}__button`,children:[t.jsx("span",{className:`${a}__overlay`}),c&&s==="number"&&o!==void 0?t.jsx(b,{component:"span",size:"x-small",weight:700,color:r?"alias-border-disabled":"alias-object-on-brand",className:`${a}__number`,children:o}):c&&s==="indeterminate"?t.jsx(x,{fill:r?"var(--color-alias-border-disabled, rgba(10, 10, 10, 0.25))":"white"}):c?t.jsx(g,{fill:r?"var(--color-alias-border-disabled, rgba(10, 10, 10, 0.25))":"white"}):null,I()]}),m&&t.jsx(b,{component:"span",..._,size:"base",children:m})]})});S.__docgenInfo={description:"",methods:[{name:"focus",docblock:null,modifiers:[],params:[],returns:null},{name:"blur",docblock:null,modifiers:[],params:[],returns:null}],displayName:"Checkbox"};export{S as C};