@machinerd/js-module 0.1.0 → 0.2.1

package/dist/ui/index.cjs

@@ -1 +1 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../util-CDkao6z3.cjs`),n=require(`../hooks-DPYIex_y.cjs`);let r=require(`lodash-es`),i=require(`clsx`);i=e.t(i);let a=require(`react`);a=e.t(a);let o=require(`react/jsx-runtime`),s=require(`class-variance-authority`),c=require(`react-dom`);function l({className:e,items:t,render:n,...r}){return(0,o.jsx)(`nav`,{className:(0,i.default)(`komc:fixed komc:bottom-0 komc:left-0 komc:right-0 komc:box-border`,`komc:border-t komc:border-neutral-200 komc:bg-white komc:z-10`,e),...r,children:(0,o.jsx)(`div`,{className:`komc:grid komc:min-h-15 komc:p-0`,style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((e,t)=>(0,o.jsx)(a.default.Fragment,{children:n(e)},t))})})}const u=(0,s.cva)(t.f(`komc:inline-flex komc:justify-center komc:items-center komc:w-full`,`komc:transition-colors komc:duration-200 komc:relative`,`komc:*:transition-colors komc:*:duration-200 komc:cursor-pointer`,`komc:disabled:cursor-default komc:disabled:opacity-50 komc:disabled:pointer-events-none`,`komc:whitespace-nowrap komc:shrink-0 komc:outline-none komc:box-border`),{variants:{size:{xs:`komc:h-7.5`,sm:`komc:h-8`,base:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`},gap:{none:`komc:gap-0`,xs:`komc:gap-1`,sm:`komc:gap-2`,md:`komc:gap-3`,lg:`komc:gap-4`,xl:`komc:gap-5`},outline:{line:`komc:border`,solid:`komc:border-transparent`,clear:`komc:border-none`,dashed:`komc:border-dashed`,dotted:`komc:border-dotted`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`,"2.5xl":`komc:rounded-[20px]`,"3xl":`komc:rounded-3xl`,full:`komc:rounded-full`},variant:{default:``,ghost:`komc:bg-transparent komc:text-neutral-900`,white:`komc:bg-white komc:text-neutral-900 komc:hover:bg-neutral-100`,blue:`komc:bg-blue-500 komc:text-white komc:hover:bg-blue-600`,night:`komc:bg-[#2c5cb7] komc:text-white komc:hover:bg-[#26539F]`,charcoal:`komc:bg-[#36454F] komc:text-white komc:hover:bg-[#2E3A43]`,slate:`komc:bg-[#4A5565] komc:text-white komc:hover:bg-[#424A57]`,red:`komc:bg-[#C8313A] komc:text-white komc:hover:bg-[#B02B33]`,yellow:`komc:bg-[#E7FF14] komc:text-black komc:hover:bg-[#D4E600]`,black:`komc:bg-[rgb(95,95,96)] komc:text-white komc:hover:bg-[rgb(76,76,77)] komc:active:bg-[rgb(76,76,77)]`}},defaultVariants:{size:void 0,outline:void 0,rounded:void 0,variant:void 0}}),d=(0,a.forwardRef)(({children:e=`button`,type:t=`button`,size:n=`md`,gap:r=`sm`,outline:i=`line`,rounded:a=`sm`,variant:s=`blue`,className:c,...l},d)=>(0,o.jsx)(`button`,{ref:d,type:t,className:u({size:n,outline:i,gap:r,rounded:a,variant:s,className:c}),...l,children:e}));var f=d;function p({condition:e,wrapper:t,children:n}){return e?t(n):n}const m=(0,s.cva)(t.f(`komc:flex komc:items-center komc:w-full komc:px-2 komc:box-border`,`komc:[&>input]:outline-none komc:[&>input]:w-full`,`komc:[&>input]:focus:ring-0 komc:[&>input]:focus:ring-offset-0`,`komc:[&>input]:border-none komc:[&>input]:h-full`,`komc:[&>input]:p-0 komc:[&>input]:m-0`),{variants:{size:{xs:`komc:h-7.5`,sm:`komc:h-8`,base:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`},gap:{none:`komc:gap-0`,xs:`komc:gap-1`,sm:`komc:gap-2`,md:`komc:gap-3`,lg:`komc:gap-4`,xl:`komc:gap-5`},outline:{line:`komc:border`,solid:`komc:border-transparent`,clear:`komc:border-none`,dashed:`komc:border-dashed`,dotted:`komc:border-dotted`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`}}}),h=(0,a.forwardRef)(({prefix:e=null,surffix:t=null,size:n=`lg`,gap:r=`xl`,outline:i=`line`,rounded:a=`lg`,className:s,...c},l)=>(0,o.jsxs)(`div`,{className:m({size:n,gap:r,outline:i,rounded:a,className:s}),children:[e,(0,o.jsx)(`input`,{ref:l,type:`text`,...c}),t]}));var g=h;const _=(0,s.cva)(t.f(`komc:w-full komc:animate-pulse komc:bg-gray-200`),{variants:{size:{xs:`komc:h-4`,sm:`komc:h-8`,md:`komc:h-12`,lg:`komc:h-16`,xl:`komc:h-20`,"2xl":`komc:h-24`,"3xl":`komc:h-28`,square:`komc:h-auto komc:aspect-square`,full:`komc:h-full`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`,"3xl":`komc:rounded-3xl`,full:`komc:rounded-full`}},defaultVariants:{size:`sm`,rounded:`sm`}});function v({size:e,rounded:t,width:n,height:r,className:i,...a}){let s=n?typeof n==`string`?n:`${n}px`:void 0,c=r?typeof r==`string`?r:`${r}px`:void 0;return(0,o.jsx)(`div`,{className:_({size:e,rounded:t,className:i}),style:{width:s,height:c},...a})}function y({children:e,setOpen:t}){return(0,o.jsx)(`div`,{className:(0,i.default)(`komc:inline-flex komc:shrink-0 komc:justify-center komc:items-center`,`komc:bg-transparent komc:border-none komc:outline-none`,`komc:p-0 komc:m-0 komc:box-border`),onMouseLeave:()=>t(!1),onMouseOver:()=>t(!0),onFocus:()=>t(!0),onBlur:()=>t(!1),onClick:()=>t(!0),children:e})}const b=(0,s.cva)(t.f(`komc:absolute komc:z-99 komc:w-max komc:max-w-70 komc:p-2`,`komc:break-all komc:transition-opacity komc:duration-300 komc:bg-white`,`komc:drop-shadow-[0px_0.5px_3px_rgba(0,0,0,0.2)]`),{variants:{portal:{true:``,false:``},placement:{top:``,bottom:``,left:``,right:``,"top-start":``,"top-end":``,"bottom-start":``,"bottom-end":``,"left-start":``,"left-end":``,"right-start":``,"right-end":``}},compoundVariants:[{portal:!0,placement:`top`,className:`komc:-translate-y-2`},{portal:!0,placement:`bottom`,className:`komc:translate-y-2`},{portal:!0,placement:`left`,className:`komc:-translate-x-2`},{portal:!0,placement:`right`,className:`komc:translate-x-2`},{portal:!0,placement:`top-start`,className:`komc:-translate-y-2`},{portal:!0,placement:`top-end`,className:`komc:-translate-y-2`},{portal:!0,placement:`bottom-start`,className:`komc:translate-y-2`},{portal:!0,placement:`bottom-end`,className:`komc:translate-y-2`},{portal:!0,placement:`left-start`,className:`komc:-translate-x-2`},{portal:!0,placement:`left-end`,className:`komc:-translate-x-2`},{portal:!0,placement:`right-start`,className:`komc:translate-x-2`},{portal:!0,placement:`right-end`,className:`komc:translate-x-2`},{portal:!1,placement:`top`,className:`komc:bottom-full komc:left-1/2 komc:-translate-x-1/2`},{portal:!1,placement:`bottom`,className:`komc:top-full komc:left-1/2 komc:-translate-x-1/2`},{portal:!1,placement:`left`,className:`komc:right-full komc:top-1/2 komc:-translate-y-1/2`},{portal:!1,placement:`right`,className:`komc:left-full komc:top-1/2 komc:-translate-y-1/2`},{portal:!1,placement:`top-start`,className:`komc:bottom-full komc:left-0`},{portal:!1,placement:`top-end`,className:`komc:bottom-full komc:right-0`},{portal:!1,placement:`bottom-start`,className:`komc:top-full komc:left-0`},{portal:!1,placement:`bottom-end`,className:`komc:top-full komc:right-0`},{portal:!1,placement:`left-start`,className:`komc:right-full komc:top-0`},{portal:!1,placement:`left-end`,className:`komc:right-full komc:bottom-0`},{portal:!1,placement:`right-start`,className:`komc:left-full komc:top-0`},{portal:!1,placement:`right-end`,className:`komc:left-full komc:bottom-0`}],defaultVariants:{placement:`top`,portal:!1}}),x=(0,a.forwardRef)(({portal:e,children:t,className:n,placement:r,...i},a)=>(0,o.jsx)(`div`,{ref:a,role:`tooltip`,className:b({portal:e,placement:r,className:n}),...i,children:t}));var S=x;const C=(0,s.cva)(t.f(`komc:absolute komc:w-2 komc:h-2 komc:bg-inherit`,`komc:transition-opacity komc:duration-300`),{variants:{placement:{top:t.f(`komc:top-full komc:-mt-1 komc:left-1/2`),bottom:t.f(`komc:bottom-full komc:-mb-1 komc:left-1/2`),left:t.f(`komc:left-full komc:-ml-1 komc:top-1/2`),right:t.f(`komc:right-full komc:-mr-1 komc:top-1/2`),"top-start":t.f(`komc:top-full komc:-mt-1 komc:left-5`),"top-end":t.f(`komc:top-full komc:-mt-1 komc:right-5`),"bottom-start":t.f(`komc:bottom-full komc:-mb-1 komc:left-5`),"bottom-end":t.f(`komc:bottom-full komc:-mb-1 komc:right-5`),"left-start":t.f(`komc:left-full komc:-ml-1 komc:top-3`),"left-end":t.f(`komc:left-full komc:-ml-1 komc:bottom-3`),"right-start":t.f(`komc:right-full komc:-mr-1 komc:top-3`),"right-end":t.f(`komc:right-full komc:-mr-1 komc:bottom-3`)}},defaultVariants:{placement:`top`}}),w=({placement:e,className:t,offset:n,style:r,...i})=>{let s=(0,a.useMemo)(()=>{switch(e){case`top`:return`rotate(45deg)`;case`bottom`:return`rotate(225deg)`;case`left`:return`rotate(-45deg)`;case`right`:return`rotate(135deg)`;case`top-start`:return`rotate(45deg)`;case`top-end`:return`rotate(45deg)`;case`bottom-start`:return`rotate(225deg)`;case`bottom-end`:return`rotate(225deg)`;case`left-start`:return`rotate(-45deg)`;case`left-end`:return`rotate(-45deg)`;case`right-start`:return`rotate(135deg)`;case`right-end`:return`rotate(135deg)`;default:return`rotate(45deg)`}},[e]);return(0,o.jsx)(`div`,{className:C({placement:e,className:t}),style:{transform:`translate(${n?.x}px, ${n?.y}px) ${s}`},...i})};var T=w;const E=24,D=(e,t)=>{let[,n]=e.split(`-`);return n?`${t}-${n}`:t};function O({placement:e,className:t,content:n,open:s,hiddenRef:l,containerRef:u}){let[d,f]=(0,a.useState)(!1),p=(0,a.useRef)(null),[m,h]=(0,a.useState)(e),[g,_]=(0,a.useState)({top:0,left:0}),[v,y]=(0,a.useState)({x:0,y:0}),b=(0,a.useCallback)((0,r.debounce)(()=>{let e=u?.current,t=l.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=window.scrollY||document.documentElement.scrollTop,a=window.scrollX||document.documentElement.scrollLeft,[o,s]=m.split(`-`),c=i+n.top,d=a+n.left+n.width/2-r.width/2;switch(o){case`top`:c-=r.height;break;case`bottom`:c+=n.height;break;case`left`:c+=n.height/2-r.height/2,d-=r.width/2+n.width/2;break;case`right`:c+=n.height/2-r.height/2,d+=r.width/2+n.width/2;break}if([`top`,`bottom`].includes(o))switch(s){case`start`:d+=r.width/2-24;break;case`end`:d-=r.width/2-24;break}if([`left`,`right`].includes(o))switch(s){case`start`:c+=r.height/2+n.height/2-24;break;case`end`:c-=r.height/2+n.height/2-24;break}let f=d,p=window.innerWidth;f+r.width>p-4&&(f=p-r.width-4),f<4&&(f=4),_({top:c,left:f}),y({x:d-f,y:0})},50),[m]),x=(0,a.useCallback)((0,r.debounce)(()=>{if(!l.current)return;let{top:t,height:n}=l.current.getBoundingClientRect();h(r=>{let i=e;return t+n>=window.innerHeight?i=D(r,`top`):t<0&&(i=D(r,`bottom`)),i})},50),[e]);return(0,a.useEffect)(()=>(f(!0),x(),window.addEventListener(`scroll`,b,{passive:!0}),window.addEventListener(`resize`,b),window.addEventListener(`scroll`,x,{passive:!0}),window.addEventListener(`resize`,x),()=>{window.removeEventListener(`scroll`,b),window.removeEventListener(`resize`,b),window.removeEventListener(`scroll`,x),window.removeEventListener(`resize`,x)}),[b,x]),(0,a.useEffect)(()=>{d&&b()},[d,b]),d?(0,c.createPortal)((0,o.jsxs)(S,{ref:p,portal:!0,placement:m,className:(0,i.default)(t,s?`komc:visible komc:opacity-100`:`komc:opacity-0 komc:invisible`),style:{...g},children:[(0,o.jsx)(`span`,{children:n}),(0,o.jsx)(T,{placement:m,offset:v})]}),document.body):null}const k=(0,a.forwardRef)(({children:e,content:t,defaultOpen:r=!1,className:s,placement:c=`top`},l)=>{let[u,d]=(0,a.useState)(r),f=(0,a.useRef)(null),p=(0,a.useRef)(null);return n.t({ref:f,setOpen:d}),(0,o.jsxs)(`div`,{ref:f,className:`komc:flex komc:shrink-0 komc:relative komc:overflow-hidden komc:w-fit komc:h-fit`,children:[(0,o.jsx)(y,{setOpen:d,children:e}),(0,o.jsx)(O,{placement:c,className:s,open:u,content:t,hiddenRef:p,containerRef:f}),(0,o.jsx)(S,{ref:p,role:`presentation`,placement:c,className:(0,i.default)(`komc:opacity-0 komc:invisible`,s),children:(0,o.jsx)(`span`,{children:t})})]})});var A=k;exports.BottomAppBar=l,exports.Button=f,exports.ConditionalWrapper=p,exports.Input=g,exports.Skeleton=v,exports.Tooltip=A;
+const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../util-CDkao6z3.cjs`);let n=require(`clsx`);n=e.t(n);let r=require(`react`);r=e.t(r);let i=require(`react/jsx-runtime`),a=require(`class-variance-authority`);function o({className:e,items:t,render:a,...o}){return(0,i.jsx)(`nav`,{"data-komc":!0,className:(0,n.default)(`komc:fixed komc:bottom-0 komc:left-0 komc:right-0`,`komc:border-t komc:border-neutral-200 komc:bg-white komc:z-10`,e),...o,children:(0,i.jsx)(`div`,{className:`komc:grid komc:min-h-15`,style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((e,t)=>(0,i.jsx)(r.default.Fragment,{children:a(e)},t))})})}const s=(0,a.cva)(t.f(`komc:inline-flex komc:justify-center komc:items-center komc:w-full`,`komc:transition-colors komc:duration-200 komc:relative`,`komc:*:transition-colors komc:*:duration-200`,`komc:disabled:cursor-default komc:disabled:opacity-50 komc:disabled:pointer-events-none`,`komc:whitespace-nowrap komc:shrink-0 komc:outline-none`),{variants:{size:{xs:`komc:h-7.5`,sm:`komc:h-8`,base:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`},gap:{none:`komc:gap-0`,xs:`komc:gap-1`,sm:`komc:gap-2`,md:`komc:gap-3`,lg:`komc:gap-4`,xl:`komc:gap-5`},outline:{line:`komc:border`,solid:`komc:border-transparent`,clear:`komc:border-none`,dashed:`komc:border-dashed`,dotted:`komc:border-dotted`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`,"2.5xl":`komc:rounded-[20px]`,"3xl":`komc:rounded-3xl`,full:`komc:rounded-full`},variant:{default:``,ghost:`komc:bg-transparent komc:text-neutral-900`,white:`komc:bg-white komc:text-neutral-900 komc:hover:bg-neutral-100`,blue:`komc:bg-blue-500 komc:text-white komc:hover:bg-blue-600`,night:`komc:bg-[#2c5cb7] komc:text-white komc:hover:bg-[#26539F]`,charcoal:`komc:bg-[#36454F] komc:text-white komc:hover:bg-[#2E3A43]`,slate:`komc:bg-[#4A5565] komc:text-white komc:hover:bg-[#424A57]`,red:`komc:bg-[#C8313A] komc:text-white komc:hover:bg-[#B02B33]`,yellow:`komc:bg-[#E7FF14] komc:text-black komc:hover:bg-[#D4E600]`,black:`komc:bg-[rgb(95,95,96)] komc:text-white komc:hover:bg-[rgb(76,76,77)] komc:active:bg-[rgb(76,76,77)]`}},defaultVariants:{size:void 0,outline:void 0,rounded:void 0,variant:void 0}}),c=(0,r.forwardRef)(({children:e=`button`,type:t=`button`,size:n=`md`,gap:r=`sm`,outline:a=`line`,rounded:o=`sm`,variant:c=`blue`,className:l,...u},d)=>(0,i.jsx)(`button`,{ref:d,type:t,"data-komc":!0,className:s({size:n,outline:a,gap:r,rounded:o,variant:c,className:l}),...u,children:e}));var l=c;function u({condition:e,wrapper:t,children:n}){return e?t(n):n}const d=(0,a.cva)(`komc:flex komc:flex-col komc:w-full komc:mx-auto`,{variants:{maxWidth:{none:``,xs:`komc:max-w-xs`,sm:`komc:max-w-sm`,md:`komc:max-w-md`,lg:`komc:max-w-lg`,xl:`komc:max-w-xl`,"2xl":`komc:max-w-2xl`,"3xl":`komc:max-w-3xl`,"4xl":`komc:max-w-4xl`,"5xl":`komc:max-w-5xl`,"6xl":`komc:max-w-6xl`,"7xl":`komc:max-w-7xl`,full:`komc:max-w-full`}},defaultVariants:{maxWidth:`full`}});function f({className:e,children:t,maxWidth:r,...a}){return(0,i.jsx)(`footer`,{"data-komc":!0,className:(0,n.default)(`komc:block komc:w-full komc:h-full`,`komc:bg-white komc:border-t komc:border-neutral-200`,e),...a,children:(0,i.jsx)(`div`,{className:d({maxWidth:r}),children:t})})}const p=(0,a.cva)(t.f(`komc:flex komc:items-center`,`komc:mx-auto komc:min-h-10`),{variants:{maxWidth:{none:``,sm:`komc:max-w-sm`,md:`komc:max-w-md`,lg:`komc:max-w-lg`,xl:`komc:max-w-xl`,"2xl":`komc:max-w-2xl`,"3xl":`komc:max-w-3xl`,"4xl":`komc:max-w-4xl`,"5xl":`komc:max-w-5xl`,"6xl":`komc:max-w-6xl`,"7xl":`komc:max-w-7xl`,"8xl":`komc:max-w-330`,full:`komc:max-w-full`},size:{sm:`komc:h-10`,md:`komc:h-12`,lg:`komc:h-14`,xl:`komc:h-16`,"2xl":`komc:h-18`,"3xl":`komc:h-20`,"4xl":`komc:h-22`,"4.25xl":`komc:h-22.5`,"5xl":`komc:h-24`,"6xl":`komc:h-26`,"7xl":`komc:h-28`,"8xl":`komc:h-30`,full:`komc:h-full`}},defaultVariants:{maxWidth:`full`,size:`xl`}});function m({children:e,maxWidth:t,size:r,className:a,...o}){return(0,i.jsx)(`header`,{"data-komc":!0,className:(0,n.default)(`komc:w-full komc:sticky komc:top-0 komc:z-1000 komc:bg-white`,`komc:transition-all komc:duration-200`,a),...o,children:(0,i.jsx)(`div`,{className:p({maxWidth:t,size:r}),children:e})})}const h=(0,a.cva)(t.f(`komc:flex komc:items-center komc:w-full komc:px-2`,`komc:[&>input]:outline-none komc:[&>input]:w-full`,`komc:[&>input]:focus:ring-0 komc:[&>input]:focus:ring-offset-0`,`komc:[&>input]:h-full`),{variants:{size:{xs:`komc:h-7.5`,sm:`komc:h-8`,base:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`},gap:{none:`komc:gap-0`,xs:`komc:gap-1`,sm:`komc:gap-2`,md:`komc:gap-3`,lg:`komc:gap-4`,xl:`komc:gap-5`},outline:{line:`komc:border`,solid:`komc:border-transparent`,clear:`komc:border-none`,dashed:`komc:border-dashed`,dotted:`komc:border-dotted`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`}}}),g=(0,r.forwardRef)(({prefix:e=null,surffix:t=null,size:n=`lg`,gap:r=`xl`,outline:a=`line`,rounded:o=`lg`,className:s,...c},l)=>(0,i.jsxs)(`div`,{"data-komc":!0,className:h({size:n,gap:r,outline:a,rounded:o,className:s}),children:[e,(0,i.jsx)(`input`,{ref:l,type:`text`,...c}),t]}));var _=g;const v=(0,a.cva)(`komc:w-full komc:mx-auto komc:relative`,{variants:{type:{main:`komc:flex komc:flex-col`,content:`komc:grow komc:my-0`},maxWidth:{none:``,xs:`komc:max-w-xs komc:xl:max-w-full`,sm:`komc:max-w-sm komc:xl:max-w-full`,md:`komc:max-w-md komc:xl:max-w-full`,lg:`komc:max-w-lg komc:xl:max-w-full`,xl:`komc:max-w-xl komc:xl:max-w-full`,"2xl":`komc:max-w-2xl komc:xl:max-w-full`,"3xl":`komc:max-w-3xl komc:xl:max-w-full`,full:`komc:max-w-full`}},defaultVariants:{type:`main`,maxWidth:`full`}});function y({children:e,className:t,type:n,maxWidth:r,...a}){return(0,i.jsx)(`div`,{"data-komc":!0,className:v({type:n,maxWidth:r,className:t}),...a,children:e})}const b=(0,a.cva)(t.f(`komc:w-full komc:animate-pulse komc:bg-gray-200`),{variants:{size:{xs:`komc:h-4`,sm:`komc:h-8`,md:`komc:h-12`,lg:`komc:h-16`,xl:`komc:h-20`,"2xl":`komc:h-24`,"3xl":`komc:h-28`,square:`komc:h-auto komc:aspect-square`,full:`komc:h-full`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`,"3xl":`komc:rounded-3xl`,full:`komc:rounded-full`}},defaultVariants:{size:`sm`,rounded:`sm`}});function x({size:e,rounded:t,width:n,height:r,className:a,...o}){let s=n?typeof n==`string`?n:`${n}px`:void 0,c=r?typeof r==`string`?r:`${r}px`:void 0;return(0,i.jsx)(`div`,{"data-komc":!0,className:b({size:e,rounded:t,className:a}),style:{width:s,height:c},...o})}exports.BottomAppBar=o,exports.Button=l,exports.ConditionalWrapper=u,exports.Footer=f,exports.Header=m,exports.Input=_,exports.Layout=y,exports.Skeleton=x;

package/dist/ui/index.d.cts

@@ -1,14 +1,18 @@
-import * as react4 from "react";
+import * as react0 from "react";
 import React$1, { HTMLAttributes } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as class_variance_authority_types1 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/ui/bottom-app-bar/bottom-app-bar.d.ts
 interface BottomAppBarProps<T> extends React$1.HTMLAttributes<HTMLElement> {
   items: T[];
   render: (item: T) => React$1.ReactNode;
 }
+/**
+ * @param items - Items to render
+ * @param render - Render function
+ */
 declare function BottomAppBar<T>({
   className,
   items,
@@ -17,14 +21,14 @@ declare function BottomAppBar<T>({
 }: BottomAppBarProps<T>): React$1.ReactNode;
 //#endregion
 //#region src/ui/button/button.d.ts
-declare const classes$2: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | null | undefined;
+declare const classes$5: (props?: ({
+  size?: "xs" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
   gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
-  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | "2.5xl" | null | undefined;
+  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2.5xl" | "full" | null | undefined;
   variant?: "default" | "ghost" | "white" | "blue" | "night" | "charcoal" | "slate" | "red" | "yellow" | "black" | null | undefined;
 } & class_variance_authority_types1.ClassProp) | undefined) => string;
-interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'suffix' | 'prefix'>, VariantProps<typeof classes$2> {
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'suffix' | 'prefix'>, VariantProps<typeof classes$5> {
   /**
    * @param size - Height of the button
    * @default md - 40px
@@ -38,7 +42,7 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
    * - 2xl: 52px
    * - 3xl: 56px
    */
-  size?: VariantProps<typeof classes$2>['size'];
+  size?: VariantProps<typeof classes$5>['size'];
   /**
    * @param gap - Gap between the button and the content
    * @default sm - 8px
@@ -50,7 +54,7 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
    * - lg: 16px
    * - xl: 20px
    */
-  gap?: VariantProps<typeof classes$2>['gap'];
+  gap?: VariantProps<typeof classes$5>['gap'];
   /**
    * @param rounded - Border radius of the button
    * @default sm
@@ -65,7 +69,7 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
    * - 3xl: 24px
    * - full: 100%
    */
-  rounded?: VariantProps<typeof classes$2>['rounded'];
+  rounded?: VariantProps<typeof classes$5>['rounded'];
   /**
    * @param variant - Variant of the button
    * @default blue
@@ -81,21 +85,18 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
    * - yellow
    * - black
    */
-  variant?: VariantProps<typeof classes$2>['variant'];
+  variant?: VariantProps<typeof classes$5>['variant'];
   disabled?: boolean;
   children?: React.ReactNode;
 }
 /**
- * @param children - Children of the button
- * @param type - Type of the button
  * @param size - Size of the button
  * @param gap - Gap between the button and the content
  * @param outline - Outline of the button
  * @param rounded - Border radius of the button
  * @param variant - Variant of the button
- * @param className - Class name
  */
-declare const Button: react4.ForwardRefExoticComponent<ButtonProps & react4.RefAttributes<HTMLButtonElement>>;
+declare const Button: react0.ForwardRefExoticComponent<ButtonProps & react0.RefAttributes<HTMLButtonElement>>;
 //#endregion
 //#region src/ui/conditional-wrapper/conditional-wrapper.d.ts
 interface ConditionalWrapperProps {
@@ -112,16 +113,103 @@ declare function ConditionalWrapper({
   condition,
   wrapper,
   children
-}: ConditionalWrapperProps): react4.ReactNode;
+}: ConditionalWrapperProps): react0.ReactNode;
+//#endregion
+//#region src/ui/footer/footer.d.ts
+declare const classes$4: (props?: ({
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "full" | "4xl" | "5xl" | "6xl" | "7xl" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
+interface FooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$4> {
+  /**
+   * @param maxWidth - Maximum width of the footer
+   * @default full
+   * @property
+   * - none: 0
+   * - xs: 320px
+   * - sm: 384px
+   * - md: 448px
+   * - lg: 512px
+   * - xl: 576px
+   * - 2xl: 672px
+   * - 3xl: 768px
+   * - 4xl: 896px
+   * - 5xl: 1024px
+   * - 6xl: 1152px
+   * - 7xl: 1280px
+   * - full: 100%
+   */
+  maxWidth?: VariantProps<typeof classes$4>['maxWidth'];
+}
+declare function Footer({
+  className,
+  children,
+  maxWidth,
+  ...props
+}: FooterProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/header/header.d.ts
+declare const classes$3: (props?: ({
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "full" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "4.25xl" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
+interface HeaderProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$3> {
+  children?: React.ReactNode;
+  /**
+   * @param maxWidth - Maximum width of the header
+   * @default full
+   * @property
+   * - none: 0
+   * - xs: 320px
+   * - sm: 384px
+   * - md: 448px
+   * - lg: 512px
+   * - xl: 576px
+   * - 2xl: 672px
+   * - 3xl: 768px
+   * - 4xl: 896px
+   * - 5xl: 1024px
+   * - 6xl: 1152px
+   * - 7xl: 1280px
+   * - 8xl: 1320px
+   * - full: 100%
+   */
+  maxWidth?: VariantProps<typeof classes$3>['maxWidth'];
+  /**
+   * @param size - Size of the header
+   * @default xl
+   * @property
+   * - sm: 40px
+   * - md: 48px
+   * - lg: 56px
+   * - xl: 64px
+   * - 2xl: 72px
+   * - 3xl: 88px
+   * - 4xl: 80px
+   * - 4.25xl: 90px
+   * - 5xl: 96px
+   * - 6xl: 104px
+   * - 7xl: 112px
+   * - 8xl: 120px
+   * - full: 100%
+   */
+  size?: VariantProps<typeof classes$3>['size'];
+}
+declare function Header({
+  children,
+  maxWidth,
+  size,
+  className,
+  ...props
+}: HeaderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/input/input.d.ts
-declare const classes$1: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | null | undefined;
+declare const classes$2: (props?: ({
+  size?: "xs" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
   gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
   rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
 } & class_variance_authority_types1.ClassProp) | undefined) => string;
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'surffix' | 'size'>, VariantProps<typeof classes$1> {
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'surffix' | 'size'>, VariantProps<typeof classes$2> {
   /**
    * @param size - Height of the input
    * @default lg - 44px
@@ -135,7 +223,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
    * - 2xl: 52px
    * - 3xl: 56px
    */
-  size?: VariantProps<typeof classes$1>['size'];
+  size?: VariantProps<typeof classes$2>['size'];
   /**
    * @param gap - Gap between the input and the prefix/suffix
    * @default xl - 20px
@@ -147,8 +235,8 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
    * - lg: 16px
    * - xl: 20px
    */
-  gap?: VariantProps<typeof classes$1>['gap'];
-  outline?: VariantProps<typeof classes$1>['outline'];
+  gap?: VariantProps<typeof classes$2>['gap'];
+  outline?: VariantProps<typeof classes$2>['outline'];
   /**
    * @param rounded - Border radius of the input
    * @default lg
@@ -160,7 +248,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
    * - xl: 12px
    * - 2xl: 16px
    */
-  rounded?: VariantProps<typeof classes$1>['rounded'];
+  rounded?: VariantProps<typeof classes$2>['rounded'];
   prefix?: React.ReactNode;
   surffix?: React.ReactNode;
 }
@@ -171,14 +259,51 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
  * @param gap - Gap between the input and the prefix/suffix
  * @param outline - Outline of the input
  * @param rounded - Border radius of the input
- * @param className - Class name
  */
-declare const Input: react4.ForwardRefExoticComponent<InputProps & react4.RefAttributes<HTMLInputElement>>;
+declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/ui/layout/layout.d.ts
+declare const classes$1: (props?: ({
+  type?: "content" | "main" | null | undefined;
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "full" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$1> {
+  /**
+   * @param type - Type of the layout
+   * @default main
+   * @property
+   * - main: flex column
+   * - content: grow my-0
+   */
+  type?: VariantProps<typeof classes$1>['type'];
+  /**
+   * @param maxWidth - Maximum width of the layout
+   * @default full
+   * @property
+   * - none: 0
+   * - xs: 320px (>=1280px: 100%)
+   * - sm: 384px (>=1280px: 100%)
+   * - md: 448px (>=1280px: 100%)
+   * - lg: 512px (>=1280px: 100%)
+   * - xl: 576px (>=1280px: 100%)
+   * - 2xl: 672px (>=1280px: 100%)
+   * - 3xl: 768px (>=1280px: 100%)
+   * - full: 100%
+   */
+  maxWidth?: VariantProps<typeof classes$1>['maxWidth'];
+}
+declare function Layout({
+  children,
+  className,
+  type,
+  maxWidth,
+  ...props
+}: LayoutProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/skeleton/skeleton.d.ts
 declare const classes: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "square" | "full" | null | undefined;
-  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | null | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "square" | null | undefined;
+  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "full" | null | undefined;
 } & class_variance_authority_types1.ClassProp) | undefined) => string;
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes> {
   /**
@@ -228,7 +353,6 @@ interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typ
  * @param rounded - Rounded of the skeleton
  * @param width - Width of the skeleton
  * @param height - Height of the skeleton
- * @param className - Class name
  */
 declare function Skeleton({
   size,
@@ -239,53 +363,4 @@ declare function Skeleton({
   ...props
 }: SkeletonProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/ui/tooltip/tooltip-container.d.ts
-type SubPlacement = 'start' | 'end';
-type MainPlacement = 'top' | 'bottom' | 'left' | 'right';
-type TooltipPlacement = MainPlacement | `${MainPlacement}-${SubPlacement}`;
-interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * @param children - Trigger element
-   */
-  children: React.ReactNode;
-  /**
-   * @param content - Tooltip content
-   */
-  content: string;
-  /**
-   * @param placement - Placement of the tooltip
-   * @default top
-   * @property
-   * - top
-   * - bottom
-   * - left
-   * - right
-   * - top-start
-   * - top-end
-   * - bottom-start
-   * - bottom-end
-   * - left-start
-   * - left-end
-   * - right-start
-   * - right-end
-   */
-  placement?: TooltipPlacement;
-  /**
-   * @param defaultOpen - Default open state of the tooltip
-   * @default false
-   * @property
-   * - true: Open the tooltip
-   * - false: Close the tooltip
-   */
-  defaultOpen?: boolean;
-}
-/**
- * @param children - Trigger element
- * @param content - Tooltip content
- * @param defaultOpen - Default open state of the tooltip
- * @param className - Class name
- * @param placement - Placement of the tooltip
- */
-declare const TooltipContainer: react4.ForwardRefExoticComponent<TooltipContainerProps & react4.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { BottomAppBar, type BottomAppBarProps, Button, type ButtonProps, ConditionalWrapper, type ConditionalWrapperProps, Input, type InputProps, Skeleton, type SkeletonProps, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };
+export { BottomAppBar, type BottomAppBarProps, Button, type ButtonProps, ConditionalWrapper, type ConditionalWrapperProps, Footer, type FooterProps, Header, type HeaderProps, Input, type InputProps, Layout, type LayoutProps, Skeleton, type SkeletonProps };